diff --git a/index.css b/index.css
index ffdd161..c47d713 100644
--- a/index.css
+++ b/index.css
@@ -6,6 +6,7 @@
/** -----------------------------------------------------------------
* SECTION TOKENS
+ * font: font-style font-variant font-weight font-size/line-height font-family; }
------------------------------------------------------------------ */
:root {
@@ -15,60 +16,96 @@
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
/* --font-icon: null; */
+ --text-color: #2D2F34;
+ --heading-color: var(--text-color);
+ --light-text-color: #707682;
+ --link-color: #0074E0;
+ --link-color-alt: #0263BC;
+ --ins-background: #E6F7EB;
+ --del-background: #FFE6E6;
+ --mark-background: #FFF9E6;
+ --page-background: white;
+ --element-background: #F0F1F3;
+ --accent-color: var(--link-color);
+ --invalid-color: #DC2F2F;
+
/* Colors */
- --color-gray-100: #F0F1F3;
- --color-gray-500: #707682;
- --color-gray-900: #2D2F34;
+ /* --color-gray-100: #F0F1F3; */
+ /* --color-gray-500: #707682; */
+ /* --color-gray-900: #2D2F34; */
/* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/707682/112/118/130/white */
- --color-red-100: #FFE6E6;
- --color-red-500: #DC2F2F;
- --color-red-900: #551616;
+ /* --color-red-100: #FFE6E6; */
+ /* --color-red-500: #DC2F2F; */
+ /* --color-red-900: #551616; */
/* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/DC2F2F/220/47/47/white */
- --color-yellow-100: #FFF9E6;
- --color-yellow-500: #D08200;
- --color-yellow-900: #4F3304;
+ /* --color-yellow-100: #FFF9E6; */
+ /* --color-yellow-500: #D08200; */
+ /* --color-yellow-900: #4F3304; */
/* https://hihayk.github.io/scale/#4/4/60/90/0/-10/50/-10/D08200/208/130/0/white */
- --color-green-100: #E6F7EB;
- --color-green-500: #00883E;
- --color-green-900: #033419;
+ /* --color-green-100: #E6F7EB; */
+ /* --color-green-500: #00883E; */
+ /* --color-green-900: #033419; */
/* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/00883E/0/136/62/white */
- --color-primary-100: #E6F1FF;
- --color-primary-500: #0074E0;
- --color-primary-900: #052E55;
+ /* --color-primary-100: #E6F1FF; */
+ /* --color-primary-500: #0074E0; */
+ /* --color-primary-900: #052E55; */
/* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/0074E0/0/116/224/white */
- /* Semantic Colors */
- --page-bg-color: white;
- --element-bg-color: var(--color-gray-100);
- --text-color: var(--color-gray-900);
- --light-text-color: var(--color-gray-500);
- --heading-color: var(--text-color);
- --highlight-color: var(--color-primary-100);
- --primary-alt: var(--color-primary-900);
-
- --nav-color: var(--color-primary-500);
- --button-color: var(--nav-color);
-
- --accent-color: var(--color-primary-500);
-
/* Spacing */
- --space: 1.6rem; /* Should equal body line-height */
- --section-space: calc(var(--space) * 4);
- --flow-space: var(--space);
- --gutter: var(--space);
- --content-width: 55rem;
- --sidebar-width: 15rem;
+ --content-width: 55rem; /* 880px */
+ --sidebar-width: 15rem; /* 240px */
+
+ /* --------------------------------------------------------------------------
+ * Size table using 8pt grid
+ * PX REM STEP
+ * :---- :------- :-----
+ * 4px 0.25rem 0.5
+ * 8px 0.5rem 1
+ * 12px 0.75rem 1.5
+ * 16px 1rem 2
+ * 18px 1.25rem 2.5
+ * 24px 1.5rem 3
+ * 28px 1.75 3.5
+ * 32px 2rem 4
+ * 36px 2.25rem 4.5
+ * 44px 2.75rem 5.5
+ * 48px 3rem 6
+ * 64px 4rem 8
+ * 72px 4.5rem 9
+ * 80px 5rem 10
+ * 128px 8rem 16
+ -------------------------------------------------------------------------- */
+
+ --sp_0: 0.25rem; /* 4px utility to substitute 0 margins to add some polish */
+ --sp_1: 0.5rem; /* 8px utility for tight paddings etc */
+ --sp_2: 1rem; /* 16px 1/2 line height, for closely related elements */
+ --sp_4: 2rem; /* 32px 1 line height, for related elements */
+ --sp_8: 4rem; /* 64px 2 line heights, for loosly related elements */
+ --sp_16: 8rem; /* 128px 4 line heights, for unrelated elements */
+
+ --flow-space: var(--sp_4);
+ --gutter: var(--sp_2);
+ --section-space: var(--sp_16);
/* Modular Scale */
- --ratio: 1.2; /* 1.2 is very similar to default browser style */
- --ms-0: 1rem; /* 1rem = 16px | 1.25rem = 20px | 1.125rem = 18px */
- --ms-1: calc(var(--ms-0) * var(--ratio));
- --ms-2: calc(var(--ms-1) * var(--ratio));
- --ms-3: calc(var(--ms-2) * var(--ratio));
- --ms-4: calc(var(--ms-3) * var(--ratio));
- --ms-5: calc(var(--ms-4) * var(--ratio));
- --ms--1: calc(var(--ms-0) / var(--ratio));
- --ms--2: calc(var(--ms--1) / var(--ratio));
+ --typeset_-1: 1rem/1.5rem var(--font-body); /* 16px/24px */
+ --typeset_0: 1.25rem/2rem var(--font-body); /* 18px/32px */
+ --typeset_1: 1.5rem/2rem var(--font-body); /* 24px/32px */
+ --typeset_2: 2rem/2.5rem var(--font-body); /* 36px/44px */
+ --typeset_3: 2.5rem/3rem var(--font-body); /* 48px/56px */
+ --typeset_4: 3rem/3rem var(--font-body); /* 72px/72px */
+ --typeset_5: 5rem/5rem var(--font-body); /* 80px/80px */
+}
+@media (min-width: 55rem) {
+ :root {
+ --typeset_-1: 1rem/1.5rem var(--font-body); /* 16px/24px */
+ --typeset_0: 1.25rem/2rem var(--font-body); /* 18px/32px */
+ --typeset_1: 1.5rem/2rem var(--font-body); /* 24px/32px */
+ --typeset_2: 2.25rem/2.75rem var(--font-body); /* 36px/44px */
+ --typeset_3: 3rem/3.5rem var(--font-body); /* 48px/56px */
+ --typeset_4: 4.5rem/4.5rem var(--font-body); /* 72px/72px */
+ --typeset_5: 5rem/5rem var(--font-body); /* 80px/80px */
+ }
}
/* END !SECTION TOKENS */
@@ -184,7 +221,7 @@ table {
/* Use primary color for focus styles */
:focus-visible {
- outline-color: var(--color-primary-500);
+ outline-color: var(--color-accent);
outline-offset: 3px;
outline-style: solid;
outline-width: 2px;
@@ -193,13 +230,13 @@ table {
/* Adds a margin above an element when it is the target of an ID link */
* {
- scroll-margin-top: var(--space);
- scroll-margin-bottom: var(--space);
+ scroll-margin-top: var(--flow-space);
+ scroll-margin-bottom: var(--flow-space);
}
-::selection {
+/* ::selection {
background-color: var(--color-primary-100);
-}
+} */
/** -----------------------------------------------------------------
* SECTION TYPOGRAPHY
@@ -208,64 +245,45 @@ table {
/* Set the document's default font, color, size, and line height */
body {
- font-family: var(--font-body);
+ font: var(--typeset_0);
color: var(--text-color);
- line-height: 1.6;
- font-size: var(--ms-0);
+ background: var(--page-background);
}
-/* Set font and flow margin to headings, and heading-like elements.
- * Setup utility classes for font sizes */
+/* Setup flow spacing for typography elements */
-h1, h2, h3, h4, h5,
-.txt-h1, .txt-h2, .txt-h3, .txt-h4, .txt-h5, .txt-h6,
-label, th, legend {
- /* font-family: var(--font-head); */
- margin-bottom: var(--flow-space);
+h1, h2, h3, h4, h5, h6, p,
+label, legend, address {
+ margin-block-end: var(--flow-space);
}
/* Double flow spacing before headings & set heading color. */
-h1, h2, h3, h4, h5, h6,
-.txt-h1, .txt-h2, .txt-h3, .txt-h4, .txt-h5, .txt-h6 {
- margin-top: calc(var(--flow-space) * 2);
- /* color: var(--heading-color); */
- line-height: 1.2;
+h1, h2, h3, h4, h5, h6 {
+ color: var(--heading-color);
+ margin-block-start: calc(var(--flow-space) * 2);
}
/* Decrease space between sequential headings */
-h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
-h5 + h6,
-.txt-h1 + .txt-h2,
-.txt-h2 + .txt-h3,
-.txt-h3 + .txt-h4,
-.txt-h4 + .txt-h5,
-.txt-h5 + .txt-h6 {
- margin-top: 0;
-}
-
-/* Add flow spacing after paragraphs */
-
-p, .txt-p {
- margin-bottom: var(--flow-space);
+h5 + h6 {
+ margin-block-start: 0;
}
/* Heading typography */
-h1, .txt-h1 { font-size: var(--ms-5); margin-top: 0;}
-h2, .txt-h2 { font-size: var(--ms-4); }
-h3, .txt-h3 { font-size: var(--ms-3); }
-h4, .txt-h4 { font-size: var(--ms-2); }
-h5, .txt-h5 { font-size: var(--ms-1); }
-h6, .txt-h6, label, th, legend { font-size: var(--ms-0); font-weight: bold; }
+h1, .txt-h1 { font: var(--typeset_4); font-weight: 800; letter-spacing: -0.01em; margin-block-start: 0;}
+h2, .txt-h2 { font: var(--typeset_3); font-weight: 600; letter-spacing: -0.01em;}
+h3, .txt-h3 { font: var(--typeset_2); font-weight: 600; letter-spacing: -0.01em; }
+h4, .txt-h4 { font: var(--typeset_1); font-weight: 700; letter-spacing: -0.01em; }
+h5, .txt-h5, h6, .txt-h6, label, th, legend { font: var(--typeset_0); font-weight: bold; }
/* Set typography for small text */
-small, .txt-small { font-size: var(--ms--1); line-height: 1.3; }
+small, .txt-small { font: var(--typeset_-1); }
/* Basic styles for inline semantics */
@@ -288,7 +306,7 @@ sub { bottom: -0.25em; }
* exist to announce the presence of these elements. Read more
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#accessibility_concerns */
-del::before,
+/* del::before,
del::after,
ins::before,
ins::after,
@@ -301,23 +319,23 @@ s::after {
position: absolute;
white-space: nowrap;
width: 1px;
-}
+} */
-del::before { content: " [deletion start] "; }
+/* del::before { content: " [deletion start] "; }
del::after { content: " [deletion end] "; }
ins::before { content: " [insertion start] "; }
ins::after { content: " [insertion end] "; }
s::before { content: " [start of stricken text] "; }
-s::after { content: " [end of stricken text] "; }
+s::after { content: " [end of stricken text] "; } */
del {
- background: var(--color-red-100);
+ background: var(--del-background);
text-decoration: line-through;
padding: 0.1em 0.3em;
}
ins {
- background: var(--color-green-100);
+ background: var(--ins-background);
text-decoration: none;
padding: 0.1em 0.3em;
}
@@ -329,7 +347,7 @@ s { text-decoration: line-through; }
/* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */
mark {
- background: var(--color-yellow-100);
+ background: var(--mark-background);
padding: 0.1em 0.3em;
}
@@ -347,13 +365,8 @@ abbr[title] {
q[cite] { font-style: italic; }
-/* Add flow spacing after address */
-address {
- margin-bottom: var(--flow-space);
-}
-
-/* END !SECTION TYPOGRAPHY */
+/* !SECTION TYPOGRAPHY */
/** -----------------------------------------------------------------
* SECTION LINKS
* :not([class]) is so that the styles won't need to be overridden
@@ -361,7 +374,7 @@ address {
------------------------------------------------------------------ */
a:not([class]) {
- color: var(--color-primary-500);
+ color: var(--link-color);
text-decoration: none;
font-weight: bold;
}
@@ -371,7 +384,7 @@ a:not([class]) {
a:not([class]):hover,
a:not([class]):focus {
text-decoration: underline;
- text-decoration-color: var(--color-primary-500);
+ text-decoration-color: var(--link-color);
text-decoration-thickness: 2px;
}
@@ -393,7 +406,7 @@ a:not([class])[data-link-type='document']::after {
padding-left: 0.1em;
} */
-/* END !SECTION LINKS */
+/* !SECTION LINKS */
/** -----------------------------------------------------------------
* SECTION BLOCKQUOTE
------------------------------------------------------------------ */
@@ -403,20 +416,19 @@ a:not([class])[data-link-type='document']::after {
blockquote,
.callout {
- border-left: 5px solid var(--color-primary-500);
- padding: calc(var(--space) / 2) var(--space);
- background-color: var(--color-primary-100);
- margin-bottom: var(--flow-space);
+ border-left: 5px solid var(--accent-color);
+ padding: var(--sp_2) var(--sp_4);
+ margin-block-end: var(--flow-space);
}
/* Remove the bottom margin from the last child in the blockquote */
blockquote :last-child,
.callout :last-child {
- margin-bottom: 0;
+ margin-block-end: 0;
}
-/* END !SECTION BLOCKQUOTE */
+/* !SECTION BLOCKQUOTE */
/** -----------------------------------------------------------------
* SECTION LISTS
* :not([class]) is so that the styles won't need to be overridden
@@ -439,13 +451,13 @@ ol:not([class]) ol:not([class]) ol:not([class]) { list-style-type: lower-roman;
/* Set indention and flow spacing for lists */
ul:not([class]), ol:not([class]) {
- margin-left: var(--space);
+ margin-inline-start: 1em;
}
/* Add flow spacing to list elements */
ul, ol, dl {
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
/* Add spacing between list items */
@@ -456,7 +468,7 @@ ul:not([class]) ul,
ol:not([class]) li,
ol:not([class]) ol,
ol:not([class]) ul {
- margin-bottom: calc(var(--flow-space) / 4);
+ margin-block-end: var(--sp_1);
}
/* Ensure nested lists have the correct spacing */
@@ -465,15 +477,15 @@ ul:not([class]) ol,
ul:not([class]) ul,
ol:not([class]) ol,
ol:not([class]) ul {
- margin-top: calc(var(--flow-space) / 4);
+ margin-block-start: var(--sp_1);
}
/* Add basic styles for definition lists */
dt { font-weight: bold; }
-dd { padding-left: var(--space); }
+dd { padding-inline-start: var(--flow-space); }
-/* END !SECTION LISTS */
+/* !SECTION LISTS */
/** -----------------------------------------------------------------
* SECTION MEDIA
------------------------------------------------------------------ */
@@ -489,7 +501,7 @@ video,
display: block;
width: 100%;
margin: auto;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
img {
@@ -520,7 +532,7 @@ audio {
display: block;
max-width: 100%;
border-radius: 900px;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
/* Setup media wrappers */
@@ -529,7 +541,7 @@ audio {
.video-wrapper,
.embed-container {
width: 100%;
- padding-top: calc(100%/(var(--aspect-ratio)));
+ padding-block-start: calc(100%/(var(--aspect-ratio)));
position: relative;
}
@@ -556,7 +568,7 @@ audio {
.aspect-ratio > object,
.aspect-ratio > img {
position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
+ inset: 0;
height: 100%;
width: 100%;
}
@@ -575,16 +587,16 @@ audio {
overflow-x: auto;
}
-/* END !SECTION MEDIA */
+/* !SECTION MEDIA */
/** -----------------------------------------------------------------
* SECTION RULES
------------------------------------------------------------------ */
hr {
border: none;
- border-bottom: 0.5px solid var(--light-text-color);
+ border-block-end: 0.5px solid var(--light-text-color);
width: 100%;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
hr.spacer {
@@ -592,36 +604,39 @@ hr.spacer {
margin: calc(var(--flow-space) * 2) 0;
}
-/* END !SECTION MISC */
+/* !SECTION RULES */
/** -----------------------------------------------------------------
* SECTION TABLES
------------------------------------------------------------------ */
table {
width: 100%;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
caption {
- padding: calc(var(--space) / 2);
- font-family: var(--font-head);
- font-weight: bold;
+ padding: var(--sp_1);
+ font: var(--typeset_1);
+ text-align: left;
}
th, td {
- padding: calc(var(--space) / 2);
+ font: var(--typeset_-1);
+ padding: var(--sp_1);
text-align: left;
}
+th { font-weight: bold; }
+
tr {
- border-bottom: 0.5px solid var(--light-text-color);
+ border-block-end: 0.5px solid var(--light-text-color);
}
tr:hover {
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
}
-/* END !SECTION TABLES */
+/* !SECTION TABLES */
/** -----------------------------------------------------------------
* SECTION CODE
------------------------------------------------------------------ */
@@ -632,7 +647,7 @@ code, samp, kbd, var {
}
code, samp {
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
}
var {
@@ -653,11 +668,13 @@ pre {
pre code,
pre samp {
display: block;
- padding: var(--space);
+ padding: var(--sp_2);
overflow: auto;
+ font: var(--typeset_-1);
+ font-family: var(--font-mono);
}
-/* END !SECTION CODE */
+/* !SECTION CODE */
/** -----------------------------------------------------------------
* SECTION DETAILS
------------------------------------------------------------------ */
@@ -668,7 +685,7 @@ pre samp {
details {
display: block;
position: relative;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
summary::-webkit-details-marker {
@@ -678,7 +695,7 @@ summary::-webkit-details-marker {
summary {
display: block;
cursor: pointer;
- padding-left: 1.5em;
+ padding-inline-start: 1.5em;
font-weight: bold;
}
@@ -695,7 +712,7 @@ summary::before {
}
summary:focus::before {
- color: var(--color-primary-500);
+ color: var(--accent-color);
}
details[open] > summary::before {
@@ -703,11 +720,11 @@ details[open] > summary::before {
}
details .details-content {
- padding-left: 1.5em;
+ padding-inline-start: 1.5em;
}
-/* END !SECTION DETAILS */
-/* END !SECTION CORE */
+/* !SECTION DETAILS */
+/* !SECTION CORE */
/** -----------------------------------------------------------------
* SECTION FORMS
* Form elements not styled:
@@ -718,35 +735,36 @@ details .details-content {
------------------------------------------------------------------ */
label, legend {
- font-weight: bold;
background-color: transparent;
display: block;
- margin-bottom: 0;
+ font: var(--typeset_-1);
+ font-weight: bold;
+ margin-block-end: var(--sp_0);
}
label + label {
- margin-top: calc(var(--space) / 2);
+ margin-block-start: var(--sp_1);
}
label.required::after {
content: " *";
- color: var(--color-red-500);
+ color: var(--invalid-color);
}
fieldset {
- border: 0.5px solid var(--color-gray-500);
- padding: var(--space);
- margin-bottom: var(--space);
- background-color: var(--color-gray-100);
+ border: 0.5px solid var(--light-text-color);
+ padding: var(--sp_2);
+ margin-block-end: var(--flow-space);
+ background-color: var(--element-background);
}
fieldset > :last-child {
- margin-bottom: 1rem;
+ margin-block-end: 1rem;
}
legend {
padding: 0 0.5em;
- margin-left: -0.5em;
+ margin-inline-start: -0.5em;
}
/* Normalize fonts, sizes, and borders */
@@ -756,10 +774,11 @@ legend {
line-height: inherit;
box-sizing: border-box;
- padding: calc(var(--space) / 4) calc(var(--space) / 2);
+ padding: var(--sp_1) var(--sp_2);
border: 1px solid var(--light-text-color);
margin: 0;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
+ background-color: var(--page-background);
}
/* Normalize input width */
@@ -806,8 +825,8 @@ datalist:active {
input[type="checkbox"]:checked,
input[type="radio"]:checked {
- box-shadow: inset 0 0 0 .25em var(--color-primary-500);
- border-color: var(--color-primary-500);
+ box-shadow: inset 0 0 0 .25em var(--accent-color);
+ border-color: var(--accent-color);
}
input[type="radio"] {
@@ -815,7 +834,7 @@ datalist:active {
}
}
-/* END !SECTION RADIO & CHECKBOX */
+/* !SECTION RADIO & CHECKBOX */
/** -----------------------------------------------------------------
* SECTION NUMBER, SELECT, SEARCH
------------------------------------------------------------------ */
@@ -835,12 +854,12 @@ select {
-moz-appearance: none;
appearance: none; /* hides the native UI */
- padding-right: calc(var(--space) * 2); /* prevents input text from running into background image */
+ padding-inline-end: var(--sp_4); /* prevents input text from running into background image */
background-image: url('data:image/svg+xml;utf8,');
background-size: 0.7em;
background-repeat: no-repeat;
- background-position: right calc(var(--space) / 2) center;
+ background-position: right var(--sp_1) center;
}
/* Remove the chrome cancel button */
@@ -848,7 +867,7 @@ input[type="search"]::-webkit-search-cancel-button {
display: none;
}
-/* END !SECTION NUMBER, SELECT, SEARCH */
+/* !SECTION NUMBER, SELECT, SEARCH */
/** -----------------------------------------------------------------
* SECTION PROGRESS
------------------------------------------------------------------ */
@@ -856,28 +875,28 @@ input[type="search"]::-webkit-search-cancel-button {
/* Normalize progress bar */
progress[value] {
border: 0;
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
-webkit-appearance: none;
display: block;
width: 100%;
- margin-bottom: var(--flow-space);
+ margin-block-end: var(--flow-space);
}
progress[value]::-webkit-progress-bar {
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
}
progress[value]::-webkit-progress-value {
- background: var(--color-primary-500);
+ background: var(--accent-color);
}
progress[value]::-moz-progress-bar {
- background: var(--color-primary-500);
+ background: var(--accent-color);
}
/* indeterminate styles
* progress:not([value]) {} */
-/* END !SECTION PROGRESS */
+/* !SECTION PROGRESS */
/** -----------------------------------------------------------------
* SECTION RANGE
------------------------------------------------------------------ */
@@ -893,7 +912,7 @@ input[type="range"]::-webkit-slider-thumb {
input[type="range"]:focus,
input[type="range"]:active {
outline: none;
- --color-gray-500: var(--color-primary-500);
+ --light-text-color: var(--accent-color);
}
/* Track Styles */
@@ -901,33 +920,33 @@ input[type="range"]::-webkit-slider-runnable-track {
border: none;
height: 5px;
border-radius: 0;
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
}
input[type="range"]::-moz-range-track {
height: 5px;
border: none;
border-radius: 0;
- background-color: var(--element-bg-color);
+ background-color: var(--element-background);
}
/* Thumb Styles */
input[type="range"]::-webkit-slider-thumb {
- margin-top: -0.5rem;
+ margin-block-start: -0.5rem;
width: 1.2rem;
height: 1.2rem;
- border: 2px solid var(--page-bg-color);
+ border: 2px solid var(--page-background);
border-radius: 1000rem;
- background: var(--color-gray-500);
+ background: var(--light-text-color);
}
input[type="range"]::-moz-range-thumb {
- border: 2px solid var(--page-bg-color);
+ border: 2px solid var(--page-background);
border-radius: 1000rem;
font-size: 1.2rem;
- background: var(--color-gray-500);
+ background: var(--light-text-color);
}
-/* END !SECTION RANGE */
-/* END !SECTION FORMS */
+/* !SECTION RANGE */
+/* !SECTION FORMS */
/** -----------------------------------------------------------------
* SECTION BUTTONS
------------------------------------------------------------------ */
@@ -937,7 +956,7 @@ label + .button,
label + input[type="submit"],
label + input[type="reset"],
label + input[type="button"] {
- margin-top: var(--space);
+ margin-block-start: var(--flow-space);
}
.button,
@@ -945,19 +964,23 @@ button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
- display: inline-block;
+ display: block;
text-align: center;
white-space: nowrap;
text-decoration: none;
- width: auto;
+ width: min-content;
background-color: transparent;
cursor: pointer;
box-sizing: border-box;
color: white;
- background-color: var(--color-primary-500);
- border: 1px solid var(--color-primary-500);
- margin-bottom: var(--space);
+ background-color: var(--link-color);
+ border: 1px solid var(--link-color);
+ margin-block-end: var(--flow-space);
+
+ font-weight: bold;
+ padding-inline-start: var(--sp_4);
+ padding-inline-end: var(--sp_4);
}
.button img,
@@ -978,8 +1001,8 @@ button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
- border-color: var(--color-primary-900);
- background-color: var(--color-primary-900);
+ border-color: var(--link-color-alt);
+ background-color: var(--link-color-alt);
}
input[type="submit"]:active,
@@ -996,12 +1019,12 @@ button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
- background-color: var(--element-bg-color);
- color: var(--color-gray-500);
- border-color: var(--element-bg-color);
+ background-color: var(--element-background);
+ color: var(--light-text-color);
+ border-color: var(--element-background);
}
-/* END !SECTION BUTTONS */
+/* !SECTION BUTTONS */
/** -----------------------------------------------------------------
* SECTION LAYOUT
------------------------------------------------------------------ */
@@ -1076,7 +1099,8 @@ input[type="button"][disabled] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- margin: calc(var(--space) / -2);
+ align-content: center;
+ gap: var(--gutter);
}
/* The first level item will be aligned to the left of the level
@@ -1084,12 +1108,6 @@ input[type="button"][disabled] {
* You can add more items, they will be evenly spaced,
* though 2 is recommended */
-.level_item {
- align-self: center;
- display: block;
- padding: calc(var(--space) / 2);
-}
-
/* END !SECTION LEVEL */
/** -----------------------------------------------------------------
* SECTION GRID
@@ -1102,28 +1120,28 @@ input[type="button"][disabled] {
@media ( min-width: 25em ) {
.grid {
- --grid-gap: var(--space);
+ --grid-gap: var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
- grid-gap: var(--grid-gap);
+ gap: var(--grid-gap);
}
}
@media ( orientation: portrait ) and ( min-width: 25em ) {
.grid-portrait {
- --grid-gap: var(--space);
+ --grid-gap: var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
- grid-gap: var(--grid-gap);
+ gap: var(--grid-gap);
}
}
@media ( orientation: landscape ) and (min-width: 25em ) {
.grid-landscape {
- --grid-gap: var(--space);
+ --grid-gap: var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
- grid-gap: var(--grid-gap);
+ gap: var(--grid-gap);
}
}
@@ -1188,8 +1206,8 @@ input[type="button"][disabled] {
width: 100%;
flex: 1 0 auto;
align-self: center;
- padding-top: calc(var(--space) * 5);
- padding-bottom: calc(var(--space) * 5);
+ padding-block-start: var(--section-space);
+ padding-block-end: var(--section-space);
}
/* Ensure footer does not shrink */
@@ -1215,12 +1233,13 @@ input[type="button"][disabled] {
display: grid;
grid-template-areas: "content" "sidebar";
- grid-gap: var(--section-space);
+ gap: var(--section-space);
}
/* Assign sidebar to the sidebar area,
- * Assign content to the content area */
+ * Assign content to the content area,
+ * Min-Width prevents grid blow out */
.has-sidebar > .sidebar {
grid-area: sidebar;
@@ -1253,14 +1272,14 @@ input[type="button"][disabled] {
details.accordion summary {
display: block;
cursor: pointer;
- padding: calc(var(--space)/2);
- padding-left: calc(var(--space) + 1em);
- background: var(--element-bg-color);
+ padding: var(--sp_1);
+ padding-left: calc(var(--sp_2) + 1em);
+ background: var(--element-background);
/*border-radius: 5px;*/
}
details.accordion summary::before {
- left: calc(var(--space)/2);
+ left: var(--sp_1);
}
/*details.accordion[open] > summary {
@@ -1269,9 +1288,9 @@ details.accordion summary::before {
}*/
details.accordion .details-content {
- padding: calc(var(--space) / 2);
- padding-left: calc(var(--space) + 1rem);
- border: 2px solid var(--element-bg-color);
+ padding: var(--sp_1);
+ padding-left: calc(var(--sp_2) + 1rem);
+ border: 2px solid var(--element-background);
/*border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;*/
}
@@ -1290,7 +1309,7 @@ details.accordion .details-content {
.cover {
position: absolute;
- top: 0; right: 0; bottom: 0; left: 0;
+ inset: 0;
object-fit: cover;
}
diff --git a/index.html b/index.html
index f1943fe..525f659 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,14 @@
Matt's CSS Boilerplate
-
+
+
+
+
+
+
+
+