Converting from sass to nested vanilla css with layers (#147)
This commit is contained in:
Fredrik Jonsson
GitHub
parent
8e611f3a64
commit
57244c3f33
7 changed files with 2687 additions and 2751 deletions
22
assets/css/base/_document.css
Normal file
22
assets/css/base/_document.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/* Document */
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
/* Change the default font family in all browsers. */
|
||||
font-family: var(--ff-body);
|
||||
|
||||
/* Set base font size in percent. */
|
||||
font-size: calc(var(--base-font-size) / 16 * 100%);
|
||||
|
||||
/* Set text colour. */
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
body {
|
||||
/* Correct the line height in all browsers. */
|
||||
line-height: var(--base-line-height);
|
||||
|
||||
/* Accent colour for forms. */
|
||||
accent-color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
89
assets/css/base/_forms.css
Normal file
89
assets/css/base/_forms.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/* Form defaults. */
|
||||
|
||||
@layer base {
|
||||
form {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
/* Display as block if before input. */
|
||||
&:has(+ input),
|
||||
&:has(+ textarea){
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Mark field as required if needed. */
|
||||
&:has(+ :required) {
|
||||
&::after {
|
||||
content: '*';
|
||||
color: var(--color-mark-highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Valid and invalid state. */
|
||||
input,
|
||||
textarea {
|
||||
&:user-valid {
|
||||
border-color: var(--color-success);
|
||||
border-style: solid;
|
||||
background-color: var(--color-success-bg);
|
||||
}
|
||||
|
||||
&:focus:user-valid {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:user-invalid {
|
||||
border-color: var(--color-error);
|
||||
border-style: solid;
|
||||
background-color: var(--color-error-bg);
|
||||
}
|
||||
|
||||
&:focus:user-invalid {
|
||||
border-color: transparent;
|
||||
background-color: var(--color-warning-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Set max text line width for readability. */
|
||||
input,
|
||||
label,
|
||||
textarea,
|
||||
select {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Make field where you enter more info a bit wider. */
|
||||
[type='email'],
|
||||
[type='password'],
|
||||
[type='range'],
|
||||
[type='search'],
|
||||
[type='url'] {
|
||||
width: min(20em, 100%);
|
||||
}
|
||||
|
||||
/* Make field where you enter more info a bit wider. */
|
||||
[type='text'],
|
||||
textarea {
|
||||
width: min(30em, 100%);
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny. */
|
||||
textarea:not([rows]) {
|
||||
min-height: 7lh;
|
||||
}
|
||||
}
|
||||
107
assets/css/base/_grouping.css
Normal file
107
assets/css/base/_grouping.css
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
/* Grouping content */
|
||||
|
||||
@layer base {
|
||||
/* Block quotes */
|
||||
|
||||
blockquote {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
/* Also indent the quote on both sides. */
|
||||
margin-inline: var(--indent-amount);
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
margin-inline-start: var(--indent-amount);
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
padding: 0;
|
||||
padding-inline-start: var(--indent-amount);
|
||||
|
||||
/* Turn off margins on nested lists. */
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
|
||||
hr {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
border: 0;
|
||||
border-block-start: 1px solid var(--color-border);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
|
||||
p {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
}
|
||||
|
||||
/* Preformatted text */
|
||||
|
||||
pre {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
font-family: var(--ff-monospace);
|
||||
}
|
||||
|
||||
/* Code */
|
||||
|
||||
/* Do not set colour for code with syntax highlighting. */
|
||||
code:not([data-lang]),
|
||||
kbd,
|
||||
samp {
|
||||
color: var(--color-code);
|
||||
}
|
||||
}
|
||||
59
assets/css/base/_headings.css
Normal file
59
assets/css/base/_headings.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* Headings
|
||||
|
||||
All HTML headings, `<h1>` through `<h6>`, are available. */
|
||||
|
||||
@layer base {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-block: 1.5em .5em;
|
||||
color: var(--color-headings);
|
||||
font-family: var(--ff-headings);
|
||||
font-weight: var(--fw-headings);
|
||||
line-height: var(--heading-line-height);
|
||||
text-wrap: balance;
|
||||
|
||||
/* Smaller margin when a headeing is right after another heading. */
|
||||
& + & {
|
||||
margin-block-start: .75em;
|
||||
}
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
/* h1 only on top of page so different margins. */
|
||||
margin-block-start: var(--spacing-m);
|
||||
margin-block-end: var(--spacing-xs);
|
||||
font-size: var(--fs-xxl);
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--fs-xl);
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--fs-l);
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--fs-m);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
}
|
||||
89
assets/css/base/_images.css
Normal file
89
assets/css/base/_images.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/* Figure and image. */
|
||||
|
||||
@layer base {
|
||||
figure,
|
||||
img {
|
||||
&.image {
|
||||
--image-padding: .75rem;
|
||||
|
||||
@media (min-width: 666px) {
|
||||
&.center {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&.left {
|
||||
padding-inline-end: var(--image-padding);
|
||||
padding-block-end: var(--image-padding);
|
||||
margin: 0;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding-inline-start: var(--image-padding);
|
||||
padding-block-end: var(--image-padding);
|
||||
margin: 0;
|
||||
float: right;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
|
||||
&.image {
|
||||
figcaption {
|
||||
padding-block-start: var(--image-padding);
|
||||
contain: inline-size;
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
max-width: var(--max-line-width);
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
@media (min-width: 666px) {
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 666px) {
|
||||
inline-size: fit-content;
|
||||
|
||||
&.left {
|
||||
figcaption {
|
||||
padding-inline-end: var(--image-padding);
|
||||
padding-block-end: var(--image-padding);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
figcaption {
|
||||
padding-inline-start: var(--image-padding);
|
||||
padding-block-end: var(--image-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.podcast {
|
||||
audio {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
&.image {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
81
assets/css/base/_links.css
Normal file
81
assets/css/base/_links.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/* 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. */
|
||||
|
||||
@layer base {
|
||||
a {
|
||||
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. */
|
||||
:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
|
||||
/* Remove underline from links to current page to */
|
||||
/* indicate that there is no need to click on it. */
|
||||
[aria-current] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Use smooth scrolling unless user prefer less motion. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:has(:target) {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-block-start: var(--gutters);
|
||||
}
|
||||
}
|
||||
|
||||
.link-nav {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Inverted links, for dark backgrounds. */
|
||||
.link-inverted {
|
||||
a {
|
||||
&:link {
|
||||
color: var(--color-link-inverted);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-link-visited-inverted);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color-link-hover-inverted);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-link-active-inverted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
assets/css/base/_tables.css
Normal file
34
assets/css/base/_tables.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* Tables */
|
||||
|
||||
@layer base {
|
||||
table {
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
|
||||
/* Remove default spacing between table cells. */
|
||||
border-collapse: collapse;
|
||||
|
||||
/* Prevent cramped-looking tables */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
/* Remove most spacing between table cells. */
|
||||
padding: 0;
|
||||
|
||||
/* Align content to top of cells. */
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
th {
|
||||
/* Align content to bottom of headers. */
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
/* Align all text the same. */
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue