ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert to css style comments, part 1.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-09-18 10:33:40 +02:00
commit 2eee4d3c24
19 changed files with 127 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/sass/_custom.scss
View file

@ -1,8 +1,9 @@
// Site custom styles and colours. This file loads last. // Site custom styles and colours. This file loads last.
// Override colours like this /* Override colours like this
// :root { :root {
// --color-brand: red; --color-brand: red;
// --color-brand-alt: blue; --color-brand-alt: blue;
// --color-brand-dark: green; --color-brand-dark: green;
// } }
*/

55
assets/sass/_fonts.scss
View file

@ -1,27 +1,28 @@
// Font faces /* Font faces
//
// Instead of relying on the fonts that are available on a user's computer, you Instead of relying on the fonts that are available on a user's computer, you
// can use web fonts which, like images, are resources downloaded to the user's can use web fonts which, like images, are resources downloaded to the user's
// browser. Because of the bandwidth and rendering resources required, web fonts browser. Because of the bandwidth and rendering resources required, web fonts
// should be used with care. should be used with care.
//
// Numerous resources for web fonts can be found on the web. Here are a few Numerous resources for web fonts can be found on the web. Here are a few
// websites where you can find Open Source fonts to download: websites where you can find Open Source fonts to download:
// - https://www.fontsquirrel.com/ - https://www.fontsquirrel.com/
// - https://www.theleagueofmoveabletype.com - https://www.theleagueofmoveabletype.com
// - https://fonts.google.com - https://fonts.google.com
//
// In order to use fonts on a web site you will need to convert them into woff2 format. In order to use fonts on a web site you will need to convert them into woff2 format.
// Font Squirrel's Font-Face Generator is a good option: Font Squirrel's Font-Face Generator is a good option:
// https://www.fontsquirrel.com/tools/webfont-generator https://www.fontsquirrel.com/tools/webfont-generator
//
// The following is an example @font-face declaration. This font can then be The following is an example @font-face declaration. This font can then be
// used in any ruleset using a property like this: font-family: Example, serif; used in any ruleset using a property like this: font-family: Example, serif;
//
// @font-face { @font-face {
// font-family: 'Example'; font-family: 'Example';
// src: url('../fonts/example.woff2') format('woff2'); src: url('../fonts/example.woff2') format('woff2');
// font-weight: normal; font-weight: normal;
// font-style: normal; font-style: normal;
// font-display: swap; font-display: swap;
// } }
*/

10
assets/sass/_init.scss
View file

@ -1,9 +1,9 @@
// Initialization partial /* Initialization partial
// To make it easier to use all variables and mixins in any Sass file in this To make it easier to use all variables and mixins in any Sass file in this
// project, each .scss file has a `@import 'init';` declaration. The _init.scss project, each .scss file has a `@import 'init';` declaration. The _init.scss
// file is in charge of importing all the other partials needed for the file is in charge of importing all the other partials needed for the
// project. project. */
// Variables. // Variables.
@import 'sass_variables'; @import 'sass_variables';

38
assets/sass/_sass_variables.scss
View file

@ -1,13 +1,13 @@
// Variables /* Variables
// These need to be sass variables since they are used in sass functions and mixins. These need to be sass variables since they are used in sass functions and mixins.
// Override sass variables in "assets/sass/_extra.scss" Override sass variables in "assets/sass/_extra.scss" */
// Base line height, unitless. // Base line height, unitless.
$base-line-height: 1.5; $base-line-height: 1.5;
// The font sizes in our type hierarchy as tee shirt sizes. /* The font sizes in our type hierarchy as tee shirt sizes.
// Size m is base. Size m is base.
// Use like this: var(--fs-m) Use like this: var(--fs-m) */
$font-size-fixed: ( $font-size-fixed: (
xxxxl: 3rem, xxxxl: 3rem,
xxxl: 2.5rem, xxxl: 2.5rem,
@ -19,9 +19,9 @@ $font-size-fixed: (
xs: 0.778rem, xs: 0.778rem,
); );
// The responsive font sizes in our type hierarchy as tee shirt sizes. /* The responsive font sizes in our type hierarchy as tee shirt sizes.
// Size m is base. Size m is base.
// Use like this: var(--fs-m) Use like this: var(--fs-m) */
$font-size-fluid: ( $font-size-fluid: (
xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem), xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem),
xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem), xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem),
@ -33,12 +33,12 @@ $font-size-fluid: (
xs: 0.778rem, xs: 0.778rem,
); );
// Set the font sizes to use, fixed or fluid. /* Set the font sizes to use, fixed or fluid.
// $font-size: $font-size-fluid; $font-size: $font-size-fluid; */
$font-size: $font-size-fixed; $font-size: $font-size-fixed;
// Breakpoints (Deprecated in v5, use css @media directly instead.) /* Breakpoints (Deprecated in v5, use css @media directly instead.)
// Use the `respond-to(s)` mixin to use named breakpoints. Use the `respond-to(s)` mixin to use named breakpoints. */
$breakpoints: ( $breakpoints: (
'xxxl': 1222px, 'xxxl': 1222px,
'xxl': 1111px, 'xxl': 1111px,
@ -51,9 +51,9 @@ $breakpoints: (
'xxxs': 333px, 'xxxs': 333px,
); );
// Spacing /* Spacing
// Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
// mx--m (mx = margin-block) classes. mx--m (mx = margin-block) classes. */
$spacing: ( $spacing: (
xxl: 3, xxl: 3,
xl: 2, xl: 2,
@ -68,7 +68,7 @@ $spacing: (
// The max content width. (Consider using one of the breakpoints.) // The max content width. (Consider using one of the breakpoints.)
$max-content-width: 1111px; $max-content-width: 1111px;
// The max page width. Defaults to max-content-width. /* The max page width. Defaults to max-content-width.
// Setting this to a larger value than max-content-width allows Setting this to a larger value than max-content-width allows
// content with class "stretch" to stretch out to the page edge. content with class "stretch" to stretch out to the page edge. */
$max-page-width: $max-content-width; $max-page-width: $max-content-width;

21
assets/sass/_variables.scss
View file

@ -23,14 +23,15 @@
--base-font-size: 18; --base-font-size: 18;
// stylelint-disable value-keyword-case // stylelint-disable value-keyword-case
// Modern font stacks. See how they look at https://modernfontstacks.com/.
// /* Modern font stacks. See how they look at https://modernfontstacks.com/.
// The following font family declarations use widely available fonts.
// A user's web browser will look at the comma-separated list and will The following font family declarations use widely available fonts.
// attempt to use each font in turn until it finds one that is available A user's web browser will look at the comma-separated list and will
// on the user's computer. The final "generic" font (sans-serif, serif or attempt to use each font in turn until it finds one that is available
// monospace) hints at what type of font to use if the web browser doesn't on the user's computer. The final "generic" font (sans-serif, serif or
// find any of the fonts in the list. monospace) hints at what type of font to use if the web browser doesn't
find any of the fonts in the list. */
// Emojis font stack. Add to end of other stacks when needed. // Emojis font stack. Add to end of other stacks when needed.
--emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@ -93,8 +94,8 @@
--radius-s: 0.3rem; --radius-s: 0.3rem;
--radius-xs: 0.125rem; --radius-xs: 0.125rem;
// Breakout amount. /* Breakout amount.
// How much should the "breakout" be. Defaults to same as gutters value. How much should the "breakout" be. Defaults to same as gutters value. */
--breakout: calc(5px + 1.5625vw); --breakout: calc(5px + 1.5625vw);
// The left/right gutter/padding. // The left/right gutter/padding.

8
assets/sass/base/grouping/_grouping.scss
View file

@ -1,14 +1,6 @@
// Grouping content // Grouping content
// Block quotes // Block quotes
//
// The `<blockquote>` element is for quoting blocks of content from another
// source within your document. Wrap the `<blockquote>` around any <abbr
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
// quotes, we recommend a `<p>`.
//
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
// the name of the source work in `<cite>`.
blockquote { blockquote {
// Add vertical rhythm margins. // Add vertical rhythm margins.

11
assets/sass/base/headings/_headings.scss
View file

@ -1,8 +1,9 @@
// Headings /* Headings
//
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6` All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
// classes are also available, for when you want to match the font styling of a classes are also available, for when you want to match the font styling of a
// heading but not be a heading. heading but not be a heading. */
h1, h1,
%h1, %h1,
h2, h2,

30
assets/sass/base/links/_links.scss
View file

@ -1,24 +1,24 @@
// Links /* Links
//
// Hyperlinks are used to allow the user to navigate to other resources or to Hyperlinks are used to allow the user to navigate to other resources or to
// download a resource. download a resource.
//
// The order of link states are based on Eric Meyer's article: The order of link states are based on Eric Meyer's article:
// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
//
// :visited - A link that has already been visited. :visited - A link that has already been visited.
// :hover - A link that is being hovered over. :hover - A link that is being hovered over.
// :focus - A link that has been given keyboard focus. :focus - A link that has been given keyboard focus.
// :active - A link that is being actively clicked. :active - A link that is being actively clicked. */
a, a,
%link { %link {
color: var(--color-link); color: var(--color-link);
} }
// Any element can receive focus, but only links can be visited, so we can /* Any element can receive focus, but only links can be visited, so we can
// safely lower this selector's specificity. This also ensures visited links safely lower this selector's specificity. This also ensures visited links
// with additional styles won't have their styles overridden. with additional styles won't have their styles overridden. */
:visited { :visited {
color: var(--color-link-visited); color: var(--color-link-visited);
} }

2
assets/sass/base/tables/_tables.scss
View file

@ -1,6 +1,4 @@
// Tables // Tables
//
// The `<table>` element displays tabular data in rows, columns, and cells.
table { table {
// Add vertical rhythm margins. // Add vertical rhythm margins.

2
assets/sass/components/anchor/_anchor.scss
View file

@ -1,6 +1,4 @@
// Anchor // Anchor
//
// For heading anchor links. See render-heading.html.example.
.anchor, .anchor,
%anchor { %anchor {

16
assets/sass/components/box/_box.scss
View file

@ -1,13 +1,4 @@
// Box // Box
//
// A simple box style.
//
// A block is often styled as a box. However, this design component is
// not applied to any blocks by default; it is used as an example of how to
// build and document a CSS component.
//
// "box" is the name of our component, so we define a `.box` class that we can
// apply to any HTML element that needs the box styling.
.box { .box {
// Add vertical rhythm margins. // Add vertical rhythm margins.
@ -15,18 +6,11 @@
padding: var(--spacing-xs); padding: var(--spacing-xs);
border: 5px solid var(--color-border); border: 5px solid var(--color-border);
// Sass compiles this to the selector: .box__title, %box__title {}
// The "__" (double underscore) is part of a BEM naming convention that
// indicates the "title" is an _element_ of (a piece of) the "box" component.
&__title, &__title,
.title { .title {
margin-top: 0; margin-top: 0;
} }
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
// The "--" (double dash) is part of a BEM naming convention that indicates
// the "highlight" is a _modifier_, creating a new variation of the standard
// "box" component.
&--highlight { &--highlight {
border-color: var(--color-highlight); border-color: var(--color-highlight);
} }

4
assets/sass/components/button/_button.scss
View file

@ -61,8 +61,8 @@
} }
} }
// The disabled variation should always go last, so that it overrides any /* The disabled variation should always go last, so that it overrides any
// other variations. other variations. */
%button--disabled[disabled] { %button--disabled[disabled] {
@extend %disabled; @extend %disabled;
background-color: var(--color-grey-200); background-color: var(--color-grey-200);

6
assets/sass/components/cards/_cards.scss
View file

@ -1,6 +1,6 @@
// Cards /* Cards
//
// A simple cards style. A simple cards style. */
.cards, .cards,
%cards { %cards {

8
assets/sass/components/clearfix/_clearfix.scss
View file

@ -1,7 +1,7 @@
// Clearfix /* Clearfix
//
// Allows the bottom of an element to extend to the bottom of all floated child Allows the bottom of an element to extend to the bottom of all floated child
// elements. See http://nicolasgallagher.com/micro-clearfix-hack/ elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix, .clearfix,
%clearfix { %clearfix {

20
assets/sass/components/hidden/_hidden.scss
View file

@ -1,13 +1,13 @@
// Hidden /* Hidden
//
// Hide elements from all users. Compare to the visually-hidden component. Hide elements from all users. Compare to the visually-hidden component.
//
// Used for elements which should not be immediately displayed to any user. An Used for elements which should not be immediately displayed to any user. An
// example would be a collapsible fieldset that will be expanded with a click example would be a collapsible fieldset that will be expanded with a click
// from a user. from a user.
//
// For anything you want to hide on page load when JavaScript is enabled, use For anything you want to hide on page load when JavaScript is enabled, use
// the `.js-hidden` class. the `.js-hidden` class. */
.hidden, .hidden,
%hidden { %hidden {

8
assets/sass/components/pager/_pager.scss
View file

@ -1,7 +1,7 @@
// Pager /* Pager
//
// Paged navigation is a list of page numbers when more than 1 page of content Paged navigation is a list of page numbers when more than 1 page of content
// is available. is available. */
.pagination, .pagination,
.pager, .pager,

16
assets/sass/components/responsive-video/_responsive-video.scss
View file

@ -1,11 +1,11 @@
// Responsive video /* Responsive video
//
// Using a wrapper div, embedded videos can be made responsive so that their Using a wrapper div, embedded videos can be made responsive so that their
// intrinsic aspect ratio is preserved at any screen width. The intrinsic aspect ratio is preserved at any screen width. The
// `responsive-video__embed` class is optional if the embed is an `iframe`. `responsive-video__embed` class is optional if the embed is an `iframe`.
//
// .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
// default 16:9 one. default 16:9 one. */
.responsive-video, .responsive-video,
%responsive-video { %responsive-video {

6
assets/sass/components/visually-hidden/_visually-hidden.scss
View file

@ -1,6 +1,6 @@
// Visually hidden /* Visually hidden
//
// Make an element visually hidden, but accessible to screen readers, etc. Make an element visually hidden, but accessible to screen readers, etc. */
.visually-hidden, .visually-hidden,
%visually-hidden { %visually-hidden {

4
assets/sass/styles.scss
View file

@ -26,8 +26,8 @@
// Components // Components
// Design components are reusable designs that can be applied using just the CSS /* Design components are reusable designs that can be applied using just the CSS
// class names specified in the component. class names specified in the component. */
@import 'components/anchor/anchor'; @import 'components/anchor/anchor';
@import 'components/box/box'; @import 'components/box/box';