n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Big update: add quiz function, new post

Browse Source
This commit is contained in:
Nathan Upchurch
2025-02-02 17:40:57 -06:00
parent a98006f918
commit a915341e5c
35 changed files with 2249 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
public/css/index.css
View File

@ -134,6 +134,7 @@
--link-decoration-thickness: 0.1rem;
/* Borders */
--border-details: 1px solid var(--color-gray-20);
--border-hr: 0.5px solid var(--color-gray-20);
--border-nav: 1px solid var(--text-color);
--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
@ -263,13 +264,15 @@ main {
gap: var(--grid-gutter);
grid-template-columns: repeat(var(--grid-columns), 1fr);
}
.indexFeature:not(:last-child) {
padding-bottom: var(--space-l);
}
nav {
grid-column: 2 / span 12;
}
.now {
display: grid;
grid-column: var(--span-grid);
padding: var(--space-l) 0;
}
ol {
padding-left: 0;
@ -277,16 +280,14 @@ ol {
section {
display: grid;
grid-column: var(--span-grid);
&.full-width-text {
p {
grid-column: var(--span-grid);
}
/* Add fleuron to last <p> in section */
> p:not(blockquote > p):last-child:after {
content: "\2766";
display: inline;
font-size: var(--step-1);
}
p {
grid-column: var(--span-grid);
}
/* Add fleuron to last <p> in section */
> p:not(blockquote > p):last-child:after {
content: "\2766";
display: inline;
font-size: var(--step-1);
}
}
::selection {
@ -967,6 +968,7 @@ article.post {
}
}
}
/* Add fleuron after <p> in article when footnotes are present */
p:has(+ hr.footnotes-sep):after {
content: "\2766";
@ -974,6 +976,89 @@ p:has(+ hr.footnotes-sep):after {
font-size: var(--step-1);
}
/* Quiz */
.answerBox {
margin-bottom: var(--space-3xs);
}
.answersBox > input {
display: block;
}
details {
background-color: var(--card-color);
border: var(--border-details);
border-radius: var(--border-radius);
color: var(--text-color);
margin-top: var(--space-s);
padding: var(--space-xs);
width: 100%;
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
font-family: var(--font-family-ui);
::marker {
content: "+ ";
}
&[open] p {
font-size: var(--step--2);
line-height: calc(var(--step--2) * 0.25 + var(--step--2));
}
&[open] summary::marker {
content: "- ";
}
&[open] summary {
border-bottom: var(--border-details);
margin-bottom: var(--space-xs);
padding-bottom: var(--space-xs);
}
summary {
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
font-family: var(--font-family-ui);
}
}
dialog {
background-color: var(--card-color);
border: none;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
width: var(--grid-max-width);
h2 {
padding-top: 0;
}
p {
color: var(--text-color);
}
&::backdrop {
background-color: var(--contrast-color);
opacity: 0.5;
}
img {
max-width: 100%;
padding-top: var(--space-s);
}
}
.questionBox {
margin: var(--space-s) 0;
figure {
padding-top: 0;
padding-bottom: 0;
}
}
.quizQuestion {
font-size: var(--step-2);
font-variation-settings:
"opsz" 50,
"wght" 350,
"SOFT" 20,
"WONK" 1;
line-height: calc(var(--step-2) * 0.25 + var(--step-2));
padding-bottom: var(--space-s);
padding-top: var(--space-s);
}
/* Utilities */
.grid-container {
max-width: var(--grid-max-width);