Update sass reset and componets to use modern css and internal mixins to replace typey.
This commit is contained in:
Fredrik Jonsson
parent
4b4234df6f
commit
3fdb351a8a
27 changed files with 285 additions and 361 deletions
|
|
@ -5,30 +5,23 @@
|
|||
// 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 Google. 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:
|
||||
// - http://www.fontsquirrel.com/fontface
|
||||
// - http://www.theleagueofmoveabletype.com
|
||||
// - https://www.fontsquirrel.com/
|
||||
// - https://www.theleagueofmoveabletype.com
|
||||
// - https://fonts.google.com
|
||||
//
|
||||
// In order to use these fonts, you will need to convert them into formats
|
||||
// suitable for web fonts. We recommend the free-to-use Font Squirrel's
|
||||
// Font-Face Generator:
|
||||
// http://www.fontsquirrel.com/fontface/generator
|
||||
// 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;
|
||||
//
|
||||
// Since we're using Sass, you'll need to declare your font faces here, then you
|
||||
// can add them to the font variables in the _init.scss partial.
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'Example';
|
||||
// src: url('../fonts/example.eot');
|
||||
// src: url('../fonts/example.eot?iefix') format('eot'),
|
||||
// url('../fonts/example.woff') format('woff'),
|
||||
// url('../fonts/example.ttf') format('truetype'),
|
||||
// url('../fonts/example.svg#webfontOkOndcij') format('svg');
|
||||
// src: url('../fonts/example.woff2') format('woff2');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// font-display: swap;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
// Variables
|
||||
|
||||
// Set variables for this site before a library sets its !default value.
|
||||
|
||||
// Font faces, stacks and sizes.
|
||||
|
||||
// Font styling and line heights are controlled by the several variables that
|
||||
|
|
@ -12,28 +10,54 @@
|
|||
// homepage](https://github.com/jptaranto/typey).
|
||||
|
||||
// The font size set on the root html element.
|
||||
$base-font-size: 18px;
|
||||
// Specify unitless, it will be recalculated as %.
|
||||
$base-font-size: 18;
|
||||
|
||||
// The base line height determines the basic unit of vertical rhythm.
|
||||
$base-line-height: $base-font-size * 1.5;
|
||||
// Base and heading line height, unitless.
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
|
||||
// The pt font-size to be used for printing.
|
||||
$print-font-size: 12pt;
|
||||
|
||||
// The font sizes in our type hierarchy as tee shirt sizes.
|
||||
$font-size: (
|
||||
xxl: 36px,
|
||||
xl: 28px,
|
||||
l: 22px,
|
||||
m: $base-font-size,
|
||||
s: 16px,
|
||||
xs: 14px,
|
||||
// Size m is base.
|
||||
$font-size-fixed: (
|
||||
xxxxl: 2.778rem,
|
||||
xxxl: 2.335rem,
|
||||
xxl: 2rem,
|
||||
xl: 1.556rem,
|
||||
l: 1.223rem,
|
||||
m: 1rem,
|
||||
s: 0.889rem,
|
||||
xs: 0.778rem,
|
||||
);
|
||||
|
||||
// Typey allows you to alter font weights site-wide with this map.
|
||||
// The responsive font sizes in our type hierarchy as tee shirt sizes.
|
||||
// Size m is base.
|
||||
$font-size-fluid: (
|
||||
xxxxl: clamp(1.80rem, calc(1.45rem + 1.73vw), 2.80rem),
|
||||
xxxl: clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem),
|
||||
xxl: clamp(1.42rem, calc(1.24rem + 0.90vw), 1.94rem),
|
||||
xl: clamp(1.27rem, calc(1.14rem + 0.62vw), 1.62rem),
|
||||
l: clamp(1.13rem, calc(1.05rem + 0.39vw), 1.35rem),
|
||||
m: 1rem,
|
||||
s: 0.889rem,
|
||||
xs: 0.778rem,
|
||||
);
|
||||
|
||||
// Set the font sizes to use, fixed or fluid.
|
||||
$font-size: $font-size-fixed;
|
||||
//$font-size: $font-size-fluid;
|
||||
|
||||
// Font weights.
|
||||
$font-weight: (
|
||||
bold: bold,
|
||||
medium: 500,
|
||||
normal: normal,
|
||||
light: 300,
|
||||
lighter: lighter,
|
||||
bolder: 900,
|
||||
bold: 700,
|
||||
medium: 500,
|
||||
normal: 400,
|
||||
light: 300,
|
||||
lighter: 200,
|
||||
);
|
||||
|
||||
// The following font family declarations use widely available fonts.
|
||||
|
|
@ -53,8 +77,6 @@ $garamond: Garamond, Charter, 'Times New Roman', serif;
|
|||
$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif;
|
||||
$tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif;
|
||||
$helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif;
|
||||
$arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
|
||||
$impact: Impact, 'Arial Narrow', Helvetica, sans-serif;
|
||||
$lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
|
||||
$futura: Futura, 'Century Gothic', AppleGothic, sans-serif;
|
||||
|
||||
|
|
@ -64,81 +86,66 @@ $system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Rob
|
|||
// Monospace font stacks.
|
||||
// For an explanation of why "sans-serif" is at the end of this list, see
|
||||
// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
|
||||
// $menlo: Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
|
||||
$menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
|
||||
|
||||
// The font faces you specify in the $typefaces map can be used in the
|
||||
// typeface() mixin.
|
||||
$typefaces: (
|
||||
body: (
|
||||
font-family: $garamond,
|
||||
),
|
||||
headings: (
|
||||
font-family: $futura,
|
||||
),
|
||||
monospace: (
|
||||
font-family: $menlo,
|
||||
),
|
||||
compact: (
|
||||
font-family: $impact,
|
||||
weight: bold,
|
||||
case: uppercase,
|
||||
// We could also specify the following property:
|
||||
// letter-spacing: .5px,
|
||||
),
|
||||
); // stylelint-disable indentation
|
||||
|
||||
// Output a horizontal grid to help with debugging typography.
|
||||
$typey-debug: false;
|
||||
$with-wireframes: false;
|
||||
|
||||
// The length unit in which to output font size and margin values.
|
||||
// Supported values: px, em, rem.
|
||||
$base-unit: 'rem';
|
||||
|
||||
// px fallbacks for rem units are needed for IE 8 and earlier.
|
||||
$rem-fallback: false;
|
||||
|
||||
// We have separate print file.
|
||||
$auto-print-sizing: false;
|
||||
$font-family: (
|
||||
body: $garamond,
|
||||
headings: $futura,
|
||||
alt: $system-ui,
|
||||
monospace: $menlo,
|
||||
);
|
||||
|
||||
// Breakpoints
|
||||
|
||||
// Use the `respond-to()` mixin to use named breakpoints.
|
||||
|
||||
$breakpoints: (
|
||||
'xxxs': 333px,
|
||||
'xxs': 444px,
|
||||
'xs': 555px,
|
||||
's': 666px,
|
||||
'm': 777px,
|
||||
'l': 888px,
|
||||
'xl': 999px,
|
||||
'xxl': 1111px,
|
||||
'xxxl': 1222px
|
||||
) !default;
|
||||
|
||||
// Layout
|
||||
|
||||
// The max content width.
|
||||
$max-content-width: 1000px;
|
||||
|
||||
// The max line width for readability.
|
||||
$max-line-width: 70ch;
|
||||
|
||||
// The default left/right gutter/padding.
|
||||
$zen-gutters: calc(5px + 1.5625vw);
|
||||
$zen-gutters-reverse: calc(0px - (5px + 1.5625vw));
|
||||
'xxxl': 1222px,
|
||||
'xxl': 1111px,
|
||||
'xl': 999px,
|
||||
'l': 888px,
|
||||
'm': 777px,
|
||||
's': 666px,
|
||||
'xs': 555px,
|
||||
'xxs': 444px,
|
||||
'xxxs': 333px,
|
||||
);
|
||||
|
||||
// Border radius.
|
||||
$s-radius: 3px;
|
||||
$m-radius: .3rem;
|
||||
$l-radius: 1rem;
|
||||
$border-radius: (
|
||||
l: 1rem,
|
||||
m: 0.3rem,
|
||||
s: 3px,
|
||||
);
|
||||
|
||||
// Miscellaneous variables
|
||||
// Spacing.
|
||||
$spacing: (
|
||||
xxxl: 5rem,
|
||||
xxl: 3rem,
|
||||
xl: 2rem,
|
||||
l: 1.5rem,
|
||||
m: 1rem,
|
||||
s: 0.75rem,
|
||||
xs: 0.5rem,
|
||||
xxs: 0.4rem,
|
||||
xxxs: 0.3rem,
|
||||
);
|
||||
|
||||
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
|
||||
$indent-amount: 2 * $base-font-size;
|
||||
// The max content width. (Consider using one of the breakpoints.)
|
||||
$max-content-width: 1111px;
|
||||
|
||||
// `$include-rtl` controls whether RTL styles are output.
|
||||
// The max page width. Defaults to max-content-width.
|
||||
// Setting this to a larger value than max-content-width allows
|
||||
// content with class "stetch" to strech out to the page edge.
|
||||
//$max-page-width: 1111px;
|
||||
|
||||
// The max line width for readability.
|
||||
$max-line-width: 70ch;
|
||||
|
||||
// The left/right gutter/padding.
|
||||
$gutters: calc(5px + 1.5625vw);
|
||||
$gutters-reverse: calc(0px - (5px + 1.5625vw));
|
||||
|
||||
// The amount lists, blockquotes and comments are indented.
|
||||
$indent-amount: 2rem;
|
||||
|
||||
// Control whether RTL styles are added.
|
||||
$include-rtl: false;
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ body {
|
|||
}
|
||||
|
||||
.header {
|
||||
padding-top: $zen-gutters;
|
||||
padding-top: var(--gutters);
|
||||
}
|
||||
|
||||
.footer {
|
||||
@include margin-top(1.5);
|
||||
@include padding(.5 0);
|
||||
@include padding(.3);
|
||||
text-align: center;
|
||||
border-top: 2px solid var(--color-brand);
|
||||
|
||||
|
|
@ -31,14 +31,14 @@ th,
|
|||
label,
|
||||
legend,
|
||||
figcaption {
|
||||
@include font-size(s);
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
|
||||
.language-selector,
|
||||
article > header,
|
||||
.content-dates,
|
||||
.footer {
|
||||
@include font-size(xs);
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
// Apply heading font stack to heading, labels etc.
|
||||
|
|
@ -54,9 +54,9 @@ article > header,
|
|||
.content-dates,
|
||||
.header,
|
||||
.footer {
|
||||
@include typeface(headings);
|
||||
font-family: var(--ff-headings);
|
||||
font-weight: var(--fw-normal);
|
||||
color: var(--color-headings);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
article > .content,
|
||||
|
|
@ -72,16 +72,13 @@ aside {
|
|||
|
||||
article {
|
||||
& > header {
|
||||
@include margin-bottom(.75);
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
|
||||
.submitted {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.submitted,
|
||||
.tags {
|
||||
@include respond-to(l) {
|
||||
@include respond-to(s) {
|
||||
display: inline-block;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
|
@ -96,8 +93,8 @@ article {
|
|||
}
|
||||
|
||||
li {
|
||||
@include padding-right(.2);
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,13 +104,13 @@ article {
|
|||
}
|
||||
|
||||
code {
|
||||
@include font-size(xs);
|
||||
font-size: var(--fs-xs);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--color-code);
|
||||
border-radius: $s-radius;
|
||||
border-radius: var(--radius-s);
|
||||
padding: 5px;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: var(--color-text-bg);
|
||||
|
|
@ -131,10 +128,6 @@ article {
|
|||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.js-clipboard-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.title-submitted {
|
||||
|
|
@ -146,8 +139,7 @@ img {
|
|||
&.image {
|
||||
@include respond-to(s) {
|
||||
&.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&.left {
|
||||
|
|
@ -246,11 +238,11 @@ figure {
|
|||
// Search
|
||||
|
||||
.search-input {
|
||||
@include margin(1 0);
|
||||
@include margin-block(1);
|
||||
}
|
||||
|
||||
.search-text {
|
||||
@include font-size(l);
|
||||
font-size: var(--fs-l);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,32 +19,17 @@
|
|||
|
||||
.box,
|
||||
%box {
|
||||
@include margin-bottom(1);
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
@include padding(.5);
|
||||
border: 5px solid var(--color-border);
|
||||
padding: 1em;
|
||||
|
||||
// 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 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Sass compiles this nested ruleset's selector into:
|
||||
// .box:focus, .box:hover, .box.is-focus, .box--is-focus,
|
||||
// %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
|
||||
//
|
||||
// The ".box--is-focus" class is a stray class we don't actually want, but we
|
||||
// deal with it because we often want a placeholder selector like
|
||||
// %box--is-focus in case we need to use @extends later.
|
||||
//
|
||||
// The ".is-" part of the class name is a Drupal 8 BEM naming convention that
|
||||
// indicates the "focus" is a _state_ of the "box" component.
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.is-focus,
|
||||
&--is-focus {
|
||||
border-color: var(--color-text);
|
||||
&__title,
|
||||
.title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Sass compiles this to the selector: .box--highlight, %box--highlight {}
|
||||
|
|
@ -52,6 +37,22 @@
|
|||
// the "highlight" is a _modifier_, creating a new variation of the standard
|
||||
// "box" component.
|
||||
&--highlight {
|
||||
border-color: var(--color-link);
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
@extend %link-inverted;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ button,
|
|||
[type='reset'],
|
||||
[type='submit'] {
|
||||
@extend %button--disabled;
|
||||
@include typeface(headings);
|
||||
@include margin-right(.75);
|
||||
@include margin-bottom(.75);
|
||||
@include padding(.2 1);
|
||||
// Some styles don't apply to <a> links since they are inline elements by default.
|
||||
display: inline-block;
|
||||
font-family: var(--ff-headings);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
|
|
@ -28,7 +28,7 @@ button,
|
|||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
border: 0;
|
||||
border-radius: $m-radius;
|
||||
border-radius: var(--radius-m);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
@ -44,10 +44,10 @@ button,
|
|||
.button,
|
||||
%button {
|
||||
&--small {
|
||||
@include font-size(xs);
|
||||
@include margin-right(.3);
|
||||
@include margin-bottom(.3);
|
||||
@include padding(.1 .5);
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
&--alt {
|
||||
|
|
@ -79,18 +79,9 @@ button,
|
|||
// The disabled variation should always go last, so that it overrides any
|
||||
// other variations.
|
||||
%button--disabled[disabled] {
|
||||
// Re-set default cursor for disabled elements.
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
@extend %disabled;
|
||||
background-color: var(--color-grey-extra-light);
|
||||
border: 1px solid var(--color-button-disabled);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
color: var(--color-button-disabled);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Cookieconsent
|
||||
|
||||
.cookieconsent {
|
||||
@include font-size(s);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: var(--color-warning);
|
||||
background-color: var(--color-warning-bg);
|
||||
border-top: 4px solid var(--color-warning-border);
|
||||
font-size: var(--fs-s);
|
||||
text-align: center;
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-out;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
.divider,
|
||||
%divider {
|
||||
@include margin(1 0);
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
border: 0;
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
// Wrapping link for logo.
|
||||
&__logo {
|
||||
@include respond-to(s) {
|
||||
margin: 0 $zen-gutters 0 0;
|
||||
margin: 0 var(--gutters) 0 0;
|
||||
|
||||
@include rtl() {
|
||||
margin: 0 0 0 $zen-gutters;
|
||||
margin: 0 0 0 var(--gutters);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,5 @@
|
|||
.highlight-mark,
|
||||
%highlight-mark {
|
||||
color: var(--color-mark-highlight);
|
||||
// Remove background highlighting from <mark> in normalize.
|
||||
background-color: transparent;
|
||||
background-color: var(--color-mark-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
// Inline links
|
||||
//
|
||||
// A list of links that are inline with each other.
|
||||
|
||||
.inline-links,
|
||||
%inline-links {
|
||||
padding: 0;
|
||||
|
||||
&__item {
|
||||
display: inline;
|
||||
list-style-type: none;
|
||||
padding: 0 1em 0 0;
|
||||
|
||||
@include rtl() {
|
||||
// Bug in Safari causes display: inline to fail.
|
||||
display: inline-block;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
display: table-row;
|
||||
|
||||
&::before {
|
||||
@include font-size(s);
|
||||
@include padding-right(.5);
|
||||
display: table-cell;
|
||||
content: '\2022';
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
counter-increment: table-ol;
|
||||
|
||||
&::before {
|
||||
@include font-size(s);
|
||||
@include padding-right(.5);
|
||||
display: table-cell;
|
||||
content: counter(table-ol) '.';
|
||||
font-size: var(--fs-s);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
.responsive-video,
|
||||
%responsive-video {
|
||||
position: relative;
|
||||
padding-bottom: (9 / 16) * 100%; // 16:9 aspect ratio
|
||||
padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio
|
||||
padding-top: 25px; // Height of video controls
|
||||
height: 0;
|
||||
|
||||
|
|
@ -27,6 +27,6 @@
|
|||
}
|
||||
|
||||
&--4-3 {
|
||||
padding-bottom: (3 / 4) * 100%; // 4:3 aspect ratio
|
||||
padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
.layout {
|
||||
&__page {
|
||||
max-width: $max-content-width;
|
||||
max-width: var(--max-page-width);
|
||||
|
||||
@include respond-to(s) {
|
||||
margin: 0 auto;
|
||||
margin-inline: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,9 +19,28 @@
|
|||
&__page-top,
|
||||
&__page-bottom,
|
||||
&__cookieconsent {
|
||||
padding: 0 $zen-gutters;
|
||||
padding-inline: var(--gutters);
|
||||
min-width: 0; // With display grid defaults to auto, making <pre> overflow.
|
||||
}
|
||||
|
||||
@if $max-page-width > $max-content-width {
|
||||
&__main {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
&__navigation > *,
|
||||
&__main > * {
|
||||
max-width: var(--max-content-width);
|
||||
|
||||
&:not(.stretch) {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
|
||||
@include respond-to(s) {
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// The mobile navigation stylesheet for this theme.
|
||||
|
||||
@import 'init';
|
||||
@import 'extra';
|
||||
|
||||
.main-menu,
|
||||
.header__region { // stylelint-disable selector-class-pattern
|
||||
|
|
@ -14,13 +13,13 @@
|
|||
} // stylelint-enable selector-class-pattern
|
||||
|
||||
.mobile-nav {
|
||||
@include typeface(headings);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: var(--ff-headings);
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -54,10 +53,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: $zen-gutters;
|
||||
right: $zen-gutters;
|
||||
top: var(--gutters);
|
||||
right: var(--gutters);
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-weight: var(--fw-bold);
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
z-index: 22;
|
||||
|
|
@ -110,11 +109,11 @@
|
|||
}
|
||||
|
||||
&__sheet {
|
||||
@include padding(1.5);
|
||||
visibility: hidden;
|
||||
background-color: var(--color-mobile-menu);
|
||||
width: 90vw;
|
||||
height: 100vh;
|
||||
padding: 2rem;
|
||||
transform: translateX(100vw);
|
||||
z-index: 21;
|
||||
|
||||
|
|
@ -143,7 +142,7 @@
|
|||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
margin: .4rem 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
// "More" link
|
||||
//
|
||||
// Styles the "Read more…" and "Help" links common on the web.
|
||||
|
||||
.more-link,
|
||||
%more-link {
|
||||
text-align: right;
|
||||
|
||||
@include rtl() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__help-icon {
|
||||
padding: 1px 0 1px 20px;
|
||||
background-image: image-url('navigation', 'more-link/more-link__help-icon.svg');
|
||||
background-position: 0 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include rtl() {
|
||||
padding: 1px 20px 1px 0;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="8" cy="8" r="7" fill="#c5c5c5"/><path d="M8.767,10.847l-1.644,0c-0.004,-0.236 -0.007,-1.216 -0.007,-1.268c0,-0.533 0.089,-0.972 0.265,-1.316c0.176,-0.343 0.529,-0.73 1.058,-1.16c0.528,-0.43 0.844,-0.712 0.948,-0.845c0.159,-0.211 0.238,-0.443 0.238,-0.697c0,-0.352 -0.141,-0.654 -0.422,-0.906c-0.282,-0.251 -0.661,-0.377 -1.139,-0.377c-0.46,0 -0.844,0.131 -1.154,0.393c-0.309,0.263 -0.522,0.662 -0.638,1.2l-1.664,-0.207c0.047,-0.769 0.375,-1.423 0.983,-1.96c0.609,-0.538 1.407,-0.806 2.396,-0.806c1.041,0 1.868,0.272 2.483,0.816c0.615,0.543 0.922,1.177 0.922,1.899c0,0.4 -0.113,0.778 -0.338,1.135c-0.226,0.357 -0.709,0.843 -1.448,1.457c-0.383,0.319 -0.62,0.574 -0.713,0.768c-0.092,0.193 -0.134,1.376 -0.126,1.874ZM7.123,13.102l0,-1.629l1.666,0l0,1.629l-1.666,0Z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,24 +1,6 @@
|
|||
// Navbar
|
||||
//
|
||||
// A simple method to get navigation links to appear in one line.
|
||||
|
||||
.navbar,
|
||||
%navbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
@include rtl() {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__item,
|
||||
li {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.navbar {
|
||||
@extend %flex-inline;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,49 +3,30 @@
|
|||
// Paged navigation is a list of page numbers when more than 1 page of content
|
||||
// is available.
|
||||
|
||||
.pagination,
|
||||
.pager,
|
||||
%pager {
|
||||
@include margin-top(.5);
|
||||
@include margin-bottom(.5);
|
||||
clear: both;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
@extend %flex-inline;
|
||||
@extend %link-nav;
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
justify-content: center;
|
||||
|
||||
// A page item in the pager list.
|
||||
&__item {
|
||||
display: inline;
|
||||
padding: 0 .5em;
|
||||
list-style-type: none;
|
||||
background-image: none;
|
||||
.page-item {
|
||||
}
|
||||
|
||||
// The current page's list item.
|
||||
&__current-item {
|
||||
@extend %pager__item;
|
||||
font-weight: bold;
|
||||
&__item,
|
||||
.page-link {
|
||||
padding-inline: 2px;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
.page-link {
|
||||
@extend %disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Zen selectors.
|
||||
//
|
||||
|
||||
// .pager-item - A list item containing a page number in the list of pages.
|
||||
// .pager-first - The first page's list item.
|
||||
// .pager-previous - The previous page's list item.
|
||||
// .pager-next - The next page's list item.
|
||||
// .pager-last - The last page's list item.
|
||||
// .pager-ellipsis - A concatenation of several list items using an ellipsis.
|
||||
|
||||
.pager-item,
|
||||
.pager-first,
|
||||
.pager-previous,
|
||||
.pager-next,
|
||||
.pager-last,
|
||||
.pager-ellipsis {
|
||||
@extend %pager__item;
|
||||
}
|
||||
|
||||
.pager-current {
|
||||
@extend %pager__current-item;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
@import 'embedded/embedded';
|
||||
@import 'forms/forms';
|
||||
@import 'grouping/grouping';
|
||||
@import 'interactive/interactive';
|
||||
@import 'links/links';
|
||||
@import 'sections/sections';
|
||||
@import 'tables/tables';
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
html {
|
||||
// Change the default font family in all browsers (opinionated).
|
||||
@include typeface(body);
|
||||
font-family: var(--ff-body);
|
||||
// Set base font size in percent.
|
||||
font-size: $base-font-size / $browser-font-size * 100%;
|
||||
font-size: calc(#{$base-font-size} / 16 * 100%);
|
||||
// Correct the line height in all browsers.
|
||||
line-height: 1.5;
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size.
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue