links since they are inline elements by default. */
display: inline-block;
font-family: var(--ff-headings);
text-decoration: none;
text-align: center;
width: fit-content;
padding: .2rem 1rem;
- // Improve usability and consistency of cursor style between image-type `input` and others.
+
+ /* Improve usability and consistency of cursor style between image-type `input` and others. */
cursor: pointer;
color: var(--color-button-text);
text-shadow: var(--color-button) 0 1px 0;
@@ -23,7 +25,7 @@
&:hover,
&:focus-visible,
&:active {
- // Override any link underlines and color changes.
+ /* Override any link underlines and color changes. */
text-decoration: none;
color: var(--color-button-text-hover);
text-shadow: var(--color-button-hover) 0 1px 0;
@@ -35,7 +37,7 @@
}
}
-// Add button variations here.
+/* Add button variations here. */
.button,
%button {
&--small {
diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
index 3803352..1bba00b 100644
--- a/assets/sass/components/cards/_cards.scss
+++ b/assets/sass/components/cards/_cards.scss
@@ -5,7 +5,8 @@ A simple cards style. */
.cards,
%cards {
@extend %grid-group;
- // Add vertical rhythm margins.
+
+ /* Add vertical rhythm margins. */
margin-block: var(--spacing-m);
}
diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss
index 23c00a9..244c50f 100644
--- a/assets/sass/components/cookieconsent/_cookieconsent.scss
+++ b/assets/sass/components/cookieconsent/_cookieconsent.scss
@@ -1,4 +1,4 @@
-// Cookieconsent
+/* Cookieconsent */
.cookieconsent {
display: flex;
diff --git a/assets/sass/components/disabled/_disabled.scss b/assets/sass/components/disabled/_disabled.scss
index 8eb0fc3..bf99f2d 100644
--- a/assets/sass/components/disabled/_disabled.scss
+++ b/assets/sass/components/disabled/_disabled.scss
@@ -1,13 +1,13 @@
.disabled,
%disabled {
- // Re-set default cursor for disabled elements.
+ /* Re-set default cursor for disabled elements. */
cursor: default;
color: var(--color-button-disabled);
&:hover,
&:focus,
&:active {
- // Override any link underlines and color changes.
+ /* Override any link underlines and color changes. */
color: var(--color-button-disabled);
text-decoration: none;
}
diff --git a/assets/sass/components/footer/_footer.scss b/assets/sass/components/footer/_footer.scss
index 910c7b5..c1a4e9b 100644
--- a/assets/sass/components/footer/_footer.scss
+++ b/assets/sass/components/footer/_footer.scss
@@ -1,4 +1,4 @@
-// Branding footer
+/* Branding footer */
.footer,
%footer {
diff --git a/assets/sass/components/grid-group/_grid-group.scss b/assets/sass/components/grid-group/_grid-group.scss
index e35c1ef..c9b0ea5 100644
--- a/assets/sass/components/grid-group/_grid-group.scss
+++ b/assets/sass/components/grid-group/_grid-group.scss
@@ -5,12 +5,13 @@
display: grid;
gap: var(--grid-group-gap);
- // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
- // stylelint-disable-next-line function-name-case
+
+ /* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
+ /* stylelint-disable-next-line function-name-case */
grid-template-columns: repeat(auto-fit, minmax(Min(var(--grid-group-column-min), 100%), 1fr));
&--fill {
- // stylelint-disable-next-line function-name-case
+ /* stylelint-disable-next-line function-name-case */
grid-template-columns: repeat(auto-fill, minmax(Min(var(--grid-group-column-min), 100%), 1fr));
}
diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss
index d8971a8..93a482f 100644
--- a/assets/sass/components/header/_header.scss
+++ b/assets/sass/components/header/_header.scss
@@ -1,10 +1,11 @@
-// Branding header
+/* Branding header */
.header,
%header {
--header-gap: var(--spacing-s);
- // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
- // stylelint-disable-next-line function-name-case
+
+ /* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
+ /* stylelint-disable-next-line function-name-case */
padding-block: Min(var(--gutters), var(--spacing-m));
display: flex;
flex-direction: column;
@@ -16,23 +17,23 @@
align-items: center;
}
- // Wrapping link for logo.
+ /* Wrapping link for logo. */
&__logo {
width: fit-content;
}
- // Logo image.
+ /* Logo image. */
&__logo-image {
vertical-align: bottom;
}
- // The name of the website.
+ /* The name of the website. */
&__site-name {
margin: 0;
line-height: 1;
}
- // The link around the name of the website.
+ /* The link around the name of the website. */
&__site-link {
&:link,
&:visited {
@@ -46,7 +47,7 @@
}
}
- // Wrapper for any blocks placed in the header region.
+ /* Wrapper for any blocks placed in the header region. */
&__region {
@media (min-width: 666px) {
margin-inline-start: auto;
diff --git a/assets/sass/components/icon-inline/_icon-inline.scss b/assets/sass/components/icon-inline/_icon-inline.scss
index 7d296f7..de4a9e0 100644
--- a/assets/sass/components/icon-inline/_icon-inline.scss
+++ b/assets/sass/components/icon-inline/_icon-inline.scss
@@ -1,4 +1,4 @@
-// Inline icons.
+/* Inline icons. */
.icon-inline,
%icon-inline {
diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss
index 8caf42e..efb44fa 100644
--- a/assets/sass/components/language-selector/_language-selector.scss
+++ b/assets/sass/components/language-selector/_language-selector.scss
@@ -1,4 +1,4 @@
-// Language selector
+/* Language selector */
.language-selector {
display: flex;
diff --git a/assets/sass/components/list-straight-left/_list-straight-left.scss b/assets/sass/components/list-straight-left/_list-straight-left.scss
index 0698740..eb7775b 100644
--- a/assets/sass/components/list-straight-left/_list-straight-left.scss
+++ b/assets/sass/components/list-straight-left/_list-straight-left.scss
@@ -1,4 +1,4 @@
-// Lists with a straight left margin.
+/* Lists with a straight left margin. */
.ul-straight-left,
%ul-straight-left {
diff --git a/assets/sass/components/messages/_messages.scss b/assets/sass/components/messages/_messages.scss
index 5dd0f45..ba743b5 100644
--- a/assets/sass/components/messages/_messages.scss
+++ b/assets/sass/components/messages/_messages.scss
@@ -1,4 +1,4 @@
-// Messages
+/* Messages */
.message,
%message {
diff --git a/assets/sass/components/meta/_meta.scss b/assets/sass/components/meta/_meta.scss
index fcd831d..b4b44c1 100644
--- a/assets/sass/components/meta/_meta.scss
+++ b/assets/sass/components/meta/_meta.scss
@@ -1,4 +1,4 @@
-// Style for meta content.
+/* Style for meta content. */
.meta,
%meta {
diff --git a/assets/sass/components/pager/_pager.scss b/assets/sass/components/pager/_pager.scss
index c88f7ed..d8798a6 100644
--- a/assets/sass/components/pager/_pager.scss
+++ b/assets/sass/components/pager/_pager.scss
@@ -8,7 +8,8 @@ is available. */
%pager {
@extend %flex-inline;
@extend %link-nav;
- // Add vertical rhythm margins.
+
+ /* Add vertical rhythm margins. */
margin-block: var(--spacing-m);
justify-content: center;
diff --git a/assets/sass/components/responsive-video/_responsive-video.scss b/assets/sass/components/responsive-video/_responsive-video.scss
index 2de94fc..837bf1c 100644
--- a/assets/sass/components/responsive-video/_responsive-video.scss
+++ b/assets/sass/components/responsive-video/_responsive-video.scss
@@ -9,11 +9,11 @@ default 16:9 one. */
.responsive-video,
%responsive-video {
- --aspect-ratio: 9 / 16; // 16:9 aspect ratio
+ --aspect-ratio: 9 / 16; /* 16:9 aspect ratio */
position: relative;
- padding-block-end: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
- padding-block-start: 25px; // Height of video controls
+ padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */
+ padding-block-start: 25px; /* Height of video controls */
height: 0;
iframe {
@@ -29,6 +29,6 @@ default 16:9 one. */
}
&--4-3 {
- --aspect-ratio: 3 / 4; // 4:3 aspect ratio
+ --aspect-ratio: 3 / 4; /* 4:3 aspect ratio */
}
}
diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss
index 1f388c6..24042c3 100644
--- a/assets/sass/layouts/_layouts.scss
+++ b/assets/sass/layouts/_layouts.scss
@@ -1,6 +1,6 @@
-// stylelint-disable no-duplicate-selectors
+/* stylelint-disable no-duplicate-selectors */
-// Initial layout setup.
+/* Initial layout setup. */
.layout {
&__page {
max-width: var(--max-page-width);
@@ -22,12 +22,13 @@
&__page-bottom,
&__cookieconsent {
padding-inline: var(--gutters);
- min-width: 0; // With display grid defaults to auto, making overflow.
+ min-width: 0; /* With display grid defaults to auto, making overflow. */
}
}
-// If page width is bigger then content with,
-// setup grid with breakout and stretch for main section.
+/* If page width is bigger then content with, */
+
+/* setup grid with breakout and stretch for main section. */
@if $max-page-width > $max-content-width {
.layout {
&__navigation > * {
@@ -41,17 +42,20 @@
&__main,
&__grid {
display: grid;
- // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
- // stylelint-disable function-name-case
+
+ /* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
+ /* stylelint-disable function-name-case */
grid-template-columns:
[stretch-start] minmax(var(--gutters), 1fr)
[breakout-start] minmax(0, var(--breakout))
[content-start] Min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
minmax(0, var(--breakout)) [breakout-end]
minmax(var(--gutters), 1fr) [stretch-end];
- // stylelint-enable function-name-case
+ /* stylelint-enable function-name-case */
+
padding-inline: 0;
- // Stop content in main from stretching.
+
+ /* Stop content in main from stretching. */
height: fit-content;
& > :not(.breakout, .stretch) {
@@ -70,7 +74,7 @@
}
}
-// Setup template areas/rown/columns for page.
+/* Setup template areas/rown/columns for page. */
.layout {
&__page {
display: grid;
diff --git a/assets/sass/mixins/breakpoint/_respond-to.scss b/assets/sass/mixins/breakpoint/_respond-to.scss
index 874ee74..3354cd1 100644
--- a/assets/sass/mixins/breakpoint/_respond-to.scss
+++ b/assets/sass/mixins/breakpoint/_respond-to.scss
@@ -1,7 +1,7 @@
@mixin respond-to($breakpoint) {
- // If the key exists in the map
+ /* If the key exists in the map */
@if map-has-key($breakpoints, $breakpoint) {
- // Prints a media query based on the value
+ /* Prints a media query based on the value */
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
@@ -13,9 +13,9 @@
}
@mixin respond-to-max($breakpoint) {
- // If the key exists in the map
+ /* If the key exists in the map */
@if map-has-key($breakpoints, $breakpoint) {
- // Prints a media query based on the value
+ /* Prints a media query based on the value */
@media (max-width: map-get($breakpoints, $breakpoint)) {
@content;
}
diff --git a/assets/sass/mobilemenu.scss b/assets/sass/mobilemenu.scss
index 3d80c94..3f68c3d 100644
--- a/assets/sass/mobilemenu.scss
+++ b/assets/sass/mobilemenu.scss
@@ -1,4 +1,4 @@
-// The mobile navigation stylesheet for this theme.
+/* The mobile navigation stylesheet for this theme. */
@import 'init';
@@ -129,7 +129,7 @@
&__toggle,
&__hamburger > rect,
&__sheet {
- // Add some transitions unless user prefer less motion.
+ /* Add some transitions unless user prefer less motion. */
@media (prefers-reduced-motion: no-preference) {
transition: all 130ms ease-in;
diff --git a/assets/sass/print.scss b/assets/sass/print.scss
index cf172fc..0894c24 100644
--- a/assets/sass/print.scss
+++ b/assets/sass/print.scss
@@ -1,4 +1,4 @@
-// The print stylesheet for this theme.
+/* The print stylesheet for this theme. */
@import 'init';
@@ -29,13 +29,13 @@ footer {
width: 100%;
}
- // Underline all links.
+ /* Underline all links. */
:link,
:visited {
text-decoration: underline;
}
- // Add visible title after abbreviations.
+ /* Add visible title after abbreviations. */
abbr[title] {
&::after {
content: ' (' attr(title) ')';
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index a4e2884..6e8a720 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -1,30 +1,30 @@
-// The main stylesheet for this theme.
+/* The main stylesheet for this theme. */
-// Sass init files.
+/* Sass init files. */
@import 'init';
-// Declaring CSS colour variables in :root.
+/* Declaring CSS colour variables in :root. */
@import 'colors';
-// Declaring CSS misc variables in :root.
+/* Declaring CSS misc variables in :root. */
@import 'variables';
-// Ensure fonts get loaded early to minimize front-end performance impact.
+/* Ensure fonts get loaded early to minimize front-end performance impact. */
@import 'fonts';
-// Base styles.
+/* Base styles. */
@import 'base/base';
-// Layouts
+/* Layouts */
@import 'layouts/layouts';
-// Components
+/* Components */
/* Design components are reusable designs that can be applied using just the CSS
class names specified in the component. */
@@ -58,10 +58,10 @@ class names specified in the component. */
@import 'components/visually-hidden/visually-hidden';
@import 'components/wrap/wrap';
-// Zen styles
+/* Zen styles */
@import 'zen';
-// Custom styles
+/* Custom styles */
@import 'custom';