Convert to css style comments, part 1.
This commit is contained in:
Fredrik Jonsson
parent
114e529c48
commit
2eee4d3c24
19 changed files with 127 additions and 151 deletions
|
|
@ -1,8 +1,9 @@
|
|||
// Site custom styles and colours. This file loads last.
|
||||
|
||||
// Override colours like this
|
||||
// :root {
|
||||
// --color-brand: red;
|
||||
// --color-brand-alt: blue;
|
||||
// --color-brand-dark: green;
|
||||
// }
|
||||
/* Override colours like this
|
||||
:root {
|
||||
--color-brand: red;
|
||||
--color-brand-alt: blue;
|
||||
--color-brand-dark: green;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
// Font faces
|
||||
//
|
||||
// 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
|
||||
// browser. Because of the bandwidth and rendering resources required, web fonts
|
||||
// should be used with care.
|
||||
//
|
||||
// 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:
|
||||
// - https://www.fontsquirrel.com/
|
||||
// - https://www.theleagueofmoveabletype.com
|
||||
// - https://fonts.google.com
|
||||
//
|
||||
// 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:
|
||||
// https://www.fontsquirrel.com/tools/webfont-generator
|
||||
//
|
||||
// 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;
|
||||
//
|
||||
// @font-face {
|
||||
// font-family: 'Example';
|
||||
// src: url('../fonts/example.woff2') format('woff2');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// font-display: swap;
|
||||
// }
|
||||
/* Font faces
|
||||
|
||||
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
|
||||
browser. Because of the bandwidth and rendering resources required, web fonts
|
||||
should be used with care.
|
||||
|
||||
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:
|
||||
- https://www.fontsquirrel.com/
|
||||
- https://www.theleagueofmoveabletype.com
|
||||
- https://fonts.google.com
|
||||
|
||||
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:
|
||||
https://www.fontsquirrel.com/tools/webfont-generator
|
||||
|
||||
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;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Example';
|
||||
src: url('../fonts/example.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Initialization partial
|
||||
/* Initialization partial
|
||||
|
||||
// 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
|
||||
// file is in charge of importing all the other partials needed for the
|
||||
// project.
|
||||
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
|
||||
file is in charge of importing all the other partials needed for the
|
||||
project. */
|
||||
|
||||
// Variables.
|
||||
@import 'sass_variables';
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Variables
|
||||
// These need to be sass variables since they are used in sass functions and mixins.
|
||||
// Override sass variables in "assets/sass/_extra.scss"
|
||||
/* Variables
|
||||
These need to be sass variables since they are used in sass functions and mixins.
|
||||
Override sass variables in "assets/sass/_extra.scss" */
|
||||
|
||||
// Base line height, unitless.
|
||||
$base-line-height: 1.5;
|
||||
|
||||
// The font sizes in our type hierarchy as tee shirt sizes.
|
||||
// Size m is base.
|
||||
// Use like this: var(--fs-m)
|
||||
/* The font sizes in our type hierarchy as tee shirt sizes.
|
||||
Size m is base.
|
||||
Use like this: var(--fs-m) */
|
||||
$font-size-fixed: (
|
||||
xxxxl: 3rem,
|
||||
xxxl: 2.5rem,
|
||||
|
|
@ -19,9 +19,9 @@ $font-size-fixed: (
|
|||
xs: 0.778rem,
|
||||
);
|
||||
|
||||
// The responsive font sizes in our type hierarchy as tee shirt sizes.
|
||||
// Size m is base.
|
||||
// Use like this: var(--fs-m)
|
||||
/* The responsive font sizes in our type hierarchy as tee shirt sizes.
|
||||
Size m is base.
|
||||
Use like this: var(--fs-m) */
|
||||
$font-size-fluid: (
|
||||
xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem),
|
||||
xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem),
|
||||
|
|
@ -33,12 +33,12 @@ $font-size-fluid: (
|
|||
xs: 0.778rem,
|
||||
);
|
||||
|
||||
// Set the font sizes to use, fixed or fluid.
|
||||
// $font-size: $font-size-fluid;
|
||||
/* Set the font sizes to use, fixed or fluid.
|
||||
$font-size: $font-size-fluid; */
|
||||
$font-size: $font-size-fixed;
|
||||
|
||||
// Breakpoints (Deprecated in v5, use css @media directly instead.)
|
||||
// Use the `respond-to(s)` mixin to use named breakpoints.
|
||||
/* Breakpoints (Deprecated in v5, use css @media directly instead.)
|
||||
Use the `respond-to(s)` mixin to use named breakpoints. */
|
||||
$breakpoints: (
|
||||
'xxxl': 1222px,
|
||||
'xxl': 1111px,
|
||||
|
|
@ -51,9 +51,9 @@ $breakpoints: (
|
|||
'xxxs': 333px,
|
||||
);
|
||||
|
||||
// Spacing
|
||||
// Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
||||
// mx--m (mx = margin-block) classes.
|
||||
/* Spacing
|
||||
Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
||||
mx--m (mx = margin-block) classes. */
|
||||
$spacing: (
|
||||
xxl: 3,
|
||||
xl: 2,
|
||||
|
|
@ -68,7 +68,7 @@ $spacing: (
|
|||
// The max content width. (Consider using one of the breakpoints.)
|
||||
$max-content-width: 1111px;
|
||||
|
||||
// The max page width. Defaults to max-content-width.
|
||||
// Setting this to a larger value than max-content-width allows
|
||||
// content with class "stretch" to stretch out to the page edge.
|
||||
/* The max page width. Defaults to max-content-width.
|
||||
Setting this to a larger value than max-content-width allows
|
||||
content with class "stretch" to stretch out to the page edge. */
|
||||
$max-page-width: $max-content-width;
|
||||
|
|
|
|||
|
|
@ -23,14 +23,15 @@
|
|||
--base-font-size: 18;
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
// 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
|
||||
// attempt to use each font in turn until it finds one that is available
|
||||
// on the user's computer. The final "generic" font (sans-serif, serif or
|
||||
// monospace) hints at what type of font to use if the web browser doesn't
|
||||
// find any of the fonts in the list.
|
||||
|
||||
/* 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
|
||||
attempt to use each font in turn until it finds one that is available
|
||||
on the user's computer. The final "generic" font (sans-serif, serif or
|
||||
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: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
|
@ -93,8 +94,8 @@
|
|||
--radius-s: 0.3rem;
|
||||
--radius-xs: 0.125rem;
|
||||
|
||||
// Breakout amount.
|
||||
// How much should the "breakout" be. Defaults to same as gutters value.
|
||||
/* Breakout amount.
|
||||
How much should the "breakout" be. Defaults to same as gutters value. */
|
||||
--breakout: calc(5px + 1.5625vw);
|
||||
|
||||
// The left/right gutter/padding.
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
// Grouping content
|
||||
|
||||
// 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 {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// Headings
|
||||
//
|
||||
// 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
|
||||
// heading but not be a heading.
|
||||
/* Headings
|
||||
|
||||
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
|
||||
heading but not be a heading. */
|
||||
|
||||
h1,
|
||||
%h1,
|
||||
h2,
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
// Links
|
||||
//
|
||||
// Hyperlinks are used to allow the user to navigate to other resources or to
|
||||
// download a resource.
|
||||
//
|
||||
// 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
|
||||
//
|
||||
// :visited - A link that has already been visited.
|
||||
// :hover - A link that is being hovered over.
|
||||
// :focus - A link that has been given keyboard focus.
|
||||
// :active - A link that is being actively clicked.
|
||||
/* Links
|
||||
|
||||
Hyperlinks are used to allow the user to navigate to other resources or to
|
||||
download a resource.
|
||||
|
||||
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
|
||||
|
||||
:visited - A link that has already been visited.
|
||||
:hover - A link that is being hovered over.
|
||||
:focus - A link that has been given keyboard focus.
|
||||
:active - A link that is being actively clicked. */
|
||||
|
||||
a,
|
||||
%link {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
// 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
|
||||
// with additional styles won't have their styles overridden.
|
||||
/* 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
|
||||
with additional styles won't have their styles overridden. */
|
||||
:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
// Tables
|
||||
//
|
||||
// The `<table>` element displays tabular data in rows, columns, and cells.
|
||||
|
||||
table {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
// Anchor
|
||||
//
|
||||
// For heading anchor links. See render-heading.html.example.
|
||||
|
||||
.anchor,
|
||||
%anchor {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,4 @@
|
|||
// 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 {
|
||||
// Add vertical rhythm margins.
|
||||
|
|
@ -15,18 +6,11 @@
|
|||
padding: var(--spacing-xs);
|
||||
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 {
|
||||
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 {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
// The disabled variation should always go last, so that it overrides any
|
||||
// other variations.
|
||||
/* The disabled variation should always go last, so that it overrides any
|
||||
other variations. */
|
||||
%button--disabled[disabled] {
|
||||
@extend %disabled;
|
||||
background-color: var(--color-grey-200);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Cards
|
||||
//
|
||||
// A simple cards style.
|
||||
/* Cards
|
||||
|
||||
A simple cards style. */
|
||||
|
||||
.cards,
|
||||
%cards {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Clearfix
|
||||
//
|
||||
// Allows the bottom of an element to extend to the bottom of all floated child
|
||||
// elements. See http://nicolasgallagher.com/micro-clearfix-hack/
|
||||
/* Clearfix
|
||||
|
||||
Allows the bottom of an element to extend to the bottom of all floated child
|
||||
elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
|
||||
.clearfix,
|
||||
%clearfix {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Hidden
|
||||
//
|
||||
// Hide elements from all users. Compare to the visually-hidden component.
|
||||
//
|
||||
// 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
|
||||
// from a user.
|
||||
//
|
||||
// For anything you want to hide on page load when JavaScript is enabled, use
|
||||
// the `.js-hidden` class.
|
||||
/* Hidden
|
||||
|
||||
Hide elements from all users. Compare to the visually-hidden component.
|
||||
|
||||
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
|
||||
from a user.
|
||||
|
||||
For anything you want to hide on page load when JavaScript is enabled, use
|
||||
the `.js-hidden` class. */
|
||||
|
||||
.hidden,
|
||||
%hidden {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Pager
|
||||
//
|
||||
// Paged navigation is a list of page numbers when more than 1 page of content
|
||||
// is available.
|
||||
/* Pager
|
||||
|
||||
Paged navigation is a list of page numbers when more than 1 page of content
|
||||
is available. */
|
||||
|
||||
.pagination,
|
||||
.pager,
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Responsive video
|
||||
//
|
||||
// Using a wrapper div, embedded videos can be made responsive so that their
|
||||
// intrinsic aspect ratio is preserved at any screen width. The
|
||||
// `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
|
||||
// default 16:9 one.
|
||||
/* Responsive video
|
||||
|
||||
Using a wrapper div, embedded videos can be made responsive so that their
|
||||
intrinsic aspect ratio is preserved at any screen width. The
|
||||
`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
|
||||
default 16:9 one. */
|
||||
|
||||
.responsive-video,
|
||||
%responsive-video {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Visually hidden
|
||||
//
|
||||
// Make an element visually hidden, but accessible to screen readers, etc.
|
||||
/* Visually hidden
|
||||
|
||||
Make an element visually hidden, but accessible to screen readers, etc. */
|
||||
|
||||
.visually-hidden,
|
||||
%visually-hidden {
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
|
||||
// Components
|
||||
|
||||
// Design components are reusable designs that can be applied using just the CSS
|
||||
// class names specified in the component.
|
||||
/* Design components are reusable designs that can be applied using just the CSS
|
||||
class names specified in the component. */
|
||||
|
||||
@import 'components/anchor/anchor';
|
||||
@import 'components/box/box';
|
||||
|
|
|
|||
Loading…
Reference in a new issue