Implement new css.Build.
This commit is contained in:
Fredrik Jonsson
parent
5ca43e14d3
commit
d984bcaf5d
28 changed files with 1681 additions and 1695 deletions
|
|
@ -1,36 +1,34 @@
|
|||
/* Anchor */
|
||||
|
||||
@layer components {
|
||||
.anchor {
|
||||
--anchor-gap: .5rem;
|
||||
--anchor-opacity: .4;
|
||||
.anchor {
|
||||
--anchor-gap: .5rem;
|
||||
--anchor-opacity: .4;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: start;
|
||||
align-items: baseline;
|
||||
gap: var(--anchor-gap);
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: start;
|
||||
align-items: baseline;
|
||||
gap: var(--anchor-gap);
|
||||
|
||||
a {
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&:has(:focus-visible),
|
||||
&:hover {
|
||||
a {
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
opacity: var(--anchor-opacity);
|
||||
|
||||
&:has(:focus-visible),
|
||||
&:hover {
|
||||
a {
|
||||
opacity: var(--anchor-opacity);
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p:has(+ .anchor) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
p:has(+ .anchor) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,64 @@
|
|||
/* Box */
|
||||
|
||||
@layer components {
|
||||
.box {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
padding: var(--spacing-xs);
|
||||
border: 5px solid var(--color-border);
|
||||
.box {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
padding: var(--spacing-xs);
|
||||
border: 5px solid var(--color-border);
|
||||
|
||||
.box__title,
|
||||
.title {
|
||||
.box__title,
|
||||
.title {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
& > * {
|
||||
&:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
& > * {
|
||||
&:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
.box--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.box--fit {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.box--fit {
|
||||
width: fit-content;
|
||||
}
|
||||
.box--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
|
||||
.box--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
.box--inverted {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
|
||||
.box--inverted {
|
||||
background: var(--color-border);
|
||||
/* Make sure headings etc. also gets inverted. */
|
||||
* {
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
||||
/* Make sure headings etc. also gets inverted. */
|
||||
* {
|
||||
color: var(--color-text-bg);
|
||||
a {
|
||||
&:link {
|
||||
color: var(--color-link-inverted);
|
||||
}
|
||||
|
||||
a {
|
||||
&:link {
|
||||
color: var(--color-link-inverted);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--color-link-visited-inverted);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-link-visited-inverted);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-link-hover-inverted);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-link-hover-inverted);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-link-active-inverted);
|
||||
}
|
||||
&:active {
|
||||
color: var(--color-link-active-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,108 +2,106 @@
|
|||
|
||||
/* Button */
|
||||
|
||||
@layer components {
|
||||
.button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
/* 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;
|
||||
width: fit-content;
|
||||
padding: .2rem 1rem;
|
||||
.button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
/* 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;
|
||||
width: fit-content;
|
||||
padding: .2rem 1rem;
|
||||
|
||||
/* Improve usability and consistency of cursor style between image-type `input` and others. */
|
||||
cursor: pointer;
|
||||
/* 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;
|
||||
background: linear-gradient(var(--color-button), var(--color-button-hover));
|
||||
border: 1px solid var(--color-button-hover);
|
||||
border-radius: var(--radius-s);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
/* 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;
|
||||
background: linear-gradient(var(--color-button-hover), var(--color-button));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 2px 2px 5px var(--color-black-40);
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
font-size: var(--fs-xs);
|
||||
padding: .2rem .75rem;
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
color: var(--color-button-text-hover);
|
||||
background: var(--color-button-hover);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
text-shadow: var(--color-button) 0 1px 0;
|
||||
background: linear-gradient(var(--color-button), var(--color-button-hover));
|
||||
border: 1px solid var(--color-button-hover);
|
||||
border-radius: var(--radius-s);
|
||||
background: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
color: var(--color-button);
|
||||
background: var(--color-button-text);
|
||||
}
|
||||
|
||||
.button--accept {
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.button--decline {
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* The disabled variation should always go last, so that it overrides any
|
||||
other variations. */
|
||||
.button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
&:disabled {
|
||||
background-color: var(--color-grey-200);
|
||||
border: 1px solid var(--color-button-disabled);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:focus,
|
||||
&:active {
|
||||
/* 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;
|
||||
background: linear-gradient(var(--color-button-hover), var(--color-button));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 2px 2px 5px var(--color-black-40);
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
font-size: var(--fs-xs);
|
||||
padding: .2rem .75rem;
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
color: var(--color-button-text-hover);
|
||||
background: var(--color-button-hover);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
color: var(--color-button);
|
||||
background: var(--color-button-text);
|
||||
}
|
||||
|
||||
.button--accept {
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.button--decline {
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* The disabled variation should always go last, so that it overrides any
|
||||
other variations. */
|
||||
.button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
&:disabled {
|
||||
background-color: var(--color-grey-200);
|
||||
border: 1px solid var(--color-button-disabled);
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
/* Override any link underlines and color changes. */
|
||||
color: var(--color-button-disabled);
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* For forms with multiple fields show submit button below the form. */
|
||||
input:not(:only-of-type),
|
||||
textarea {
|
||||
& + [type='submit'] {
|
||||
display: block;
|
||||
}
|
||||
/* For forms with multiple fields show submit button below the form. */
|
||||
input:not(:only-of-type),
|
||||
textarea {
|
||||
& + [type='submit'] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* For forms on mobile with single field add space between it and the submit button. */
|
||||
@media (min-width: 666px) {
|
||||
input:only-of-type {
|
||||
&:has(+ [type='submit']) {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
/* For forms on mobile with single field add space between it and the submit button. */
|
||||
@media (min-width: 666px) {
|
||||
input:only-of-type {
|
||||
&:has(+ [type='submit']) {
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,69 +2,67 @@
|
|||
|
||||
A simple cards style. */
|
||||
|
||||
@layer components {
|
||||
.cards {
|
||||
--grid-group-column-min: 200px;
|
||||
--grid-group-gap: 1.5rem;
|
||||
.cards {
|
||||
--grid-group-column-min: 200px;
|
||||
--grid-group-gap: 1.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: var(--grid-group-gap);
|
||||
display: grid;
|
||||
gap: var(--grid-group-gap);
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
}
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: var(--spacing-xs);
|
||||
border: 1px solid var(--color-border);
|
||||
.card {
|
||||
padding: var(--spacing-xs);
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
& > * {
|
||||
&:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
& > * {
|
||||
&:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card--featured {
|
||||
grid-row: span 2;
|
||||
grid-column: span 2;
|
||||
}
|
||||
.card--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
.card--featured {
|
||||
grid-row: span 2;
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.card--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
.card--gutter {
|
||||
padding-inline: var(--gutters);
|
||||
}
|
||||
|
||||
.card--inverted {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
.card--inverted {
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
|
||||
a {
|
||||
&:link {
|
||||
color: var(--color-link-inverted);
|
||||
}
|
||||
a {
|
||||
&:link {
|
||||
color: var(--color-link-inverted);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-link-visited-inverted);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--color-link-visited-inverted);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-link-hover-inverted);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-link-hover-inverted);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-link-active-inverted);
|
||||
}
|
||||
&:active {
|
||||
color: var(--color-link-active-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
@layer components {
|
||||
.grid-center {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
.grid-center {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.margin-center {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.margin-center {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,15 @@
|
|||
Allows the bottom of an element to extend to the bottom of all floated child
|
||||
elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
|
||||
@layer components {
|
||||
.clearfix {
|
||||
&::before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
.clearfix {
|
||||
&::before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
/* Cookieconsent */
|
||||
|
||||
@layer components {
|
||||
.cookieconsent {
|
||||
.cookieconsent {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--color-warning);
|
||||
background-color: var(--color-warning-bg);
|
||||
border-block-start: 4px solid var(--color-warning);
|
||||
font-size: var(--fs-s);
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-out;
|
||||
z-index: 99;
|
||||
|
||||
.cookieconsent__actions {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--color-warning);
|
||||
background-color: var(--color-warning-bg);
|
||||
border-block-start: 4px solid var(--color-warning);
|
||||
font-size: var(--fs-s);
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-out;
|
||||
z-index: 99;
|
||||
|
||||
.cookieconsent__actions {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-cookieconsentopen] {
|
||||
transform: translateY(0);
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-cookieconsentopen] {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
@layer components {
|
||||
.disabled {
|
||||
/* Re-set default cursor for disabled elements. */
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
.disabled {
|
||||
/* Re-set default cursor for disabled elements. */
|
||||
cursor: default;
|
||||
color: var(--color-button-disabled);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
/* Override any link underlines and color changes. */
|
||||
color: var(--color-button-disabled);
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
/* Override any link underlines and color changes. */
|
||||
color: var(--color-button-disabled);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,42 @@
|
|||
@layer components {
|
||||
.flex-group {
|
||||
--flex-gap: calc(var(--base-line-height) * 1rem);
|
||||
.flex-group {
|
||||
--flex-gap: calc(var(--base-line-height) * 1rem);
|
||||
|
||||
display: flex;
|
||||
gap: var(--flex-gap);
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
gap: var(--flex-gap);
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 666px) {
|
||||
.flex-group--2 > * {
|
||||
flex-basis: calc(100% / 2 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
@media (min-width: 666px) {
|
||||
.flex-group--2 > * {
|
||||
flex-basis: calc(100% / 2 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.flex-group--3 > * {
|
||||
flex-basis: calc(100% / 3 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-group--3 > * {
|
||||
flex-basis: calc(100% / 3 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.flex-group--4 > * {
|
||||
flex-basis: calc(100% / 4 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-group--4 > * {
|
||||
flex-basis: calc(100% / 4 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.flex-group--5 > * {
|
||||
flex-basis: calc(100% / 5 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-group--5 > * {
|
||||
flex-basis: calc(100% / 5 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.flex-group--6 > * {
|
||||
flex-basis: calc(100% / 6 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-group--6 > * {
|
||||
flex-basis: calc(100% / 6 - var(--flex-gap));
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.flex-group--grow > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-group--grow > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
@layer components {
|
||||
.flex-inline {
|
||||
--flex-inline-gap: .5rem;
|
||||
.flex-inline {
|
||||
--flex-inline-gap: .5rem;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--flex-inline-gap);
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--flex-inline-gap);
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
|
||||
.flex-inline__item,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-inline--inline {
|
||||
display: inline-flex;
|
||||
.flex-inline__item,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-inline--inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
/* Branding footer */
|
||||
|
||||
@layer components {
|
||||
.footer {
|
||||
padding-block: var(--gutters);
|
||||
background-color: var(--color-footer-bg);
|
||||
text-align: center;
|
||||
.footer {
|
||||
padding-block: var(--gutters);
|
||||
background-color: var(--color-footer-bg);
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,49 @@
|
|||
@layer components {
|
||||
.grid-group {
|
||||
--grid-group-column-min: 200px;
|
||||
--grid-group-gap: 1.5rem;
|
||||
.grid-group {
|
||||
--grid-group-column-min: 200px;
|
||||
--grid-group-gap: 1.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: var(--grid-group-gap);
|
||||
display: grid;
|
||||
gap: var(--grid-group-gap);
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
}
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
}
|
||||
|
||||
.grid-group--fill {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
}
|
||||
.grid-group--fill {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||
}
|
||||
|
||||
.grid-group--100 {
|
||||
--grid-group-column-min: 100px;
|
||||
}
|
||||
.grid-group--100 {
|
||||
--grid-group-column-min: 100px;
|
||||
}
|
||||
|
||||
.grid-group--150 {
|
||||
--grid-group-column-min: 150px;
|
||||
}
|
||||
.grid-group--150 {
|
||||
--grid-group-column-min: 150px;
|
||||
}
|
||||
|
||||
.grid-group--200 {
|
||||
--grid-group-column-min: 200px;
|
||||
}
|
||||
.grid-group--200 {
|
||||
--grid-group-column-min: 200px;
|
||||
}
|
||||
|
||||
.grid-group--250 {
|
||||
--grid-group-column-min: 250px;
|
||||
}
|
||||
.grid-group--250 {
|
||||
--grid-group-column-min: 250px;
|
||||
}
|
||||
|
||||
.grid-group--300 {
|
||||
--grid-group-column-min: 300px;
|
||||
}
|
||||
.grid-group--300 {
|
||||
--grid-group-column-min: 300px;
|
||||
}
|
||||
|
||||
.grid-group--350 {
|
||||
--grid-group-column-min: 350px;
|
||||
}
|
||||
.grid-group--350 {
|
||||
--grid-group-column-min: 350px;
|
||||
}
|
||||
|
||||
.grid-group--400 {
|
||||
--grid-group-column-min: 400px;
|
||||
}
|
||||
.grid-group--400 {
|
||||
--grid-group-column-min: 400px;
|
||||
}
|
||||
|
||||
.grid-group--500 {
|
||||
--grid-group-column-min: 500px;
|
||||
}
|
||||
.grid-group--500 {
|
||||
--grid-group-column-min: 500px;
|
||||
}
|
||||
|
||||
.grid-group--600 {
|
||||
--grid-group-column-min: 600px;
|
||||
}
|
||||
.grid-group--600 {
|
||||
--grid-group-column-min: 600px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
@layer components {
|
||||
.grid-stack {
|
||||
display: grid;
|
||||
.grid-stack {
|
||||
display: grid;
|
||||
|
||||
& > * {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
& > * {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,53 @@
|
|||
/* Branding header */
|
||||
|
||||
@layer components {
|
||||
.header {
|
||||
--header-gap: var(--spacing-s);
|
||||
.header {
|
||||
--header-gap: var(--spacing-s);
|
||||
|
||||
padding-block: min(var(--gutters), var(--spacing-m));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--header-gap);
|
||||
background-color: var(--color-header-bg);
|
||||
padding-block: min(var(--gutters), var(--spacing-m));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--header-gap);
|
||||
background-color: var(--color-header-bg);
|
||||
|
||||
@media (min-width: 666px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 666px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wrapping link for logo. */
|
||||
.header__logo {
|
||||
width: fit-content;
|
||||
}
|
||||
/* Wrapping link for logo. */
|
||||
.header__logo {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Logo image. */
|
||||
.header__logo-image {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Logo image. */
|
||||
.header__logo-image {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
/* The name of the website. */
|
||||
.header__site-name {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* The name of the website. */
|
||||
.header__site-name {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
/* The link around the name of the website. */
|
||||
.header__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* The link around the name of the website. */
|
||||
.header__site-link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wrapper for any blocks placed in the header region. */
|
||||
.header__region {
|
||||
@media (min-width: 666px) {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
/* Wrapper for any blocks placed in the header region. */
|
||||
.header__region {
|
||||
@media (min-width: 666px) {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,20 +9,18 @@ from a user.
|
|||
For anything you want to hide on page load when JavaScript is enabled, use
|
||||
the `.js-hidden` class. */
|
||||
|
||||
@layer components {
|
||||
.hidden {
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js-hidden {
|
||||
html.js & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js-hidden {
|
||||
html.js & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nojs-hidden {
|
||||
html.nojs & {
|
||||
display: none;
|
||||
}
|
||||
.nojs-hidden {
|
||||
html.nojs & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
/* Inline icons. */
|
||||
|
||||
@layer components {
|
||||
.icon-inline {
|
||||
.icon-inline {
|
||||
.icon-link {
|
||||
opacity: 0;
|
||||
transition: all 130ms ease-in;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.icon-link {
|
||||
opacity: 0;
|
||||
transition: all 130ms ease-in;
|
||||
text-decoration: none;
|
||||
}
|
||||
opacity: .3;
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
.icon-link {
|
||||
opacity: .3;
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
svg {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
/* Language selector */
|
||||
|
||||
@layer components {
|
||||
.language-selector {
|
||||
display: flex;
|
||||
}
|
||||
.language-selector {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.language-icon {
|
||||
margin-inline-end: var(--spacing-xs);
|
||||
fill: var(--color-text);
|
||||
}
|
||||
.language-icon {
|
||||
margin-inline-end: var(--spacing-xs);
|
||||
fill: var(--color-text);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,52 @@
|
|||
/* Lists with a straight left margin. */
|
||||
|
||||
@layer components {
|
||||
.ul-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.ul-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
& > li {
|
||||
display: table-row;
|
||||
& > li {
|
||||
display: table-row;
|
||||
|
||||
&::before {
|
||||
padding-inline-end: var(--spacing-xs);
|
||||
display: table-cell;
|
||||
content: '\2981';
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
&::before {
|
||||
padding-inline-end: var(--spacing-xs);
|
||||
display: table-cell;
|
||||
content: '\2981';
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ol-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.ol-straight-left {
|
||||
display: table;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
& > li {
|
||||
display: table-row;
|
||||
counter-increment: table-ol;
|
||||
& > li {
|
||||
display: table-row;
|
||||
counter-increment: table-ol;
|
||||
|
||||
&::before {
|
||||
padding-inline-end: var(--spacing-xs);
|
||||
display: table-cell;
|
||||
content: counter(table-ol) '.';
|
||||
font-size: var(--fs-s);
|
||||
text-align: end;
|
||||
}
|
||||
&::before {
|
||||
padding-inline-end: var(--spacing-xs);
|
||||
display: table-cell;
|
||||
content: counter(table-ol) '.';
|
||||
font-size: var(--fs-s);
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ul-straight-left--off {
|
||||
display: block;
|
||||
list-style: inherit;
|
||||
.ul-straight-left--off {
|
||||
display: block;
|
||||
list-style: inherit;
|
||||
|
||||
& > li {
|
||||
display: list-item;
|
||||
& > li {
|
||||
display: list-item;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline;
|
||||
padding: inherit;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline;
|
||||
padding: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,42 @@
|
|||
/* Messages */
|
||||
|
||||
@layer components {
|
||||
.message {
|
||||
padding: .5rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
width: 95%;
|
||||
.message {
|
||||
padding: .5rem;
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
width: 95%;
|
||||
|
||||
&.success {
|
||||
background-color: var(--color-success-bg);
|
||||
color: var(--color-success);
|
||||
outline-color: var(--color-success);
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
outline-color: var(--color-info);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
outline-color: var(--color-warning);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
outline-color: var(--color-error);
|
||||
}
|
||||
&.success {
|
||||
background-color: var(--color-success-bg);
|
||||
color: var(--color-success);
|
||||
outline-color: var(--color-success);
|
||||
}
|
||||
|
||||
.message--highlight {
|
||||
animation: 2s ease-in-out infinite --outline-highlight;
|
||||
&.info {
|
||||
background-color: var(--color-info-bg);
|
||||
color: var(--color-info);
|
||||
outline-color: var(--color-info);
|
||||
}
|
||||
|
||||
@keyframes --outline-highlight {
|
||||
50% {
|
||||
outline-width: .3rem;
|
||||
}
|
||||
&.warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
outline-color: var(--color-warning);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
outline-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.message--highlight {
|
||||
animation: 2s ease-in-out infinite --outline-highlight;
|
||||
}
|
||||
|
||||
@keyframes --outline-highlight {
|
||||
50% {
|
||||
outline-width: .3rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
/* Style for meta content. */
|
||||
|
||||
@layer components {
|
||||
.meta {
|
||||
font-family: var(--ff-headings);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
.meta {
|
||||
font-family: var(--ff-headings);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue