Refector css and add TOC
This commit is contained in:
@@ -1,4 +1,17 @@
|
||||
code[class*="language-"], pre[class*="language-"] {
|
||||
code {
|
||||
background-color: var(--color-gray-20);
|
||||
border-radius: 0.3em;
|
||||
font-size: var(--step--1);
|
||||
padding: 0 var(--space-3xs);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
code {
|
||||
background-color: var(--card-color);
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
@@ -21,10 +34,30 @@ code[class*="language-"], pre[class*="language-"] {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code Fences */
|
||||
pre,
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
pre:not([class*="language-"]) {
|
||||
margin: 0.5em 0;
|
||||
-moz-tab-size: var(--syntax-tab-size);
|
||||
-o-tab-size: var(--syntax-tab-size);
|
||||
tab-size: var(--syntax-tab-size);
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: var(--space-2xs);
|
||||
margin: .5em 0;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
@@ -36,8 +69,8 @@ pre[class*="language-"] {
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@@ -53,7 +86,7 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@@ -146,7 +179,7 @@ pre[class*="language-diff-"] {
|
||||
.token.prefix.inserted,
|
||||
.token.prefix.deleted {
|
||||
width: var(--eleventy-code-padding);
|
||||
background-color: rgba(0,0,0,.2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Optional: full-width background color */
|
||||
|
||||
@@ -153,9 +153,6 @@ html {
|
||||
font-size: 13px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
input.answer {
|
||||
display: inline;
|
||||
}
|
||||
input:not(.answer, .siteSettingsToggle input),
|
||||
textarea {
|
||||
background-color: var(--background-color);
|
||||
@@ -179,12 +176,10 @@ label {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3xs);
|
||||
}
|
||||
.answerBox > label {
|
||||
display: inline;
|
||||
}
|
||||
article:not(.postlist-item) h3 {
|
||||
margin-bottom: var(--space-s);
|
||||
margin-top: var(--space-m);
|
||||
article:not(.postlist-item) {
|
||||
& h2 {
|
||||
padding-top: var(--space-m);
|
||||
}
|
||||
}
|
||||
blockquote p {
|
||||
font-style: italic;
|
||||
@@ -231,20 +226,6 @@ button,
|
||||
.nav-item {
|
||||
font-family: var(--font-family-ui);
|
||||
}
|
||||
code {
|
||||
background-color: var(--color-gray-20);
|
||||
border-radius: 0.3em;
|
||||
font-size: var(--step--1);
|
||||
padding: 0 var(--space-3xs);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
code {
|
||||
background-color: var(--card-color);
|
||||
}
|
||||
}
|
||||
.links-nextprev > .postlist-item-container {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
header,
|
||||
footer,
|
||||
main {
|
||||
@@ -273,12 +254,6 @@ section {
|
||||
p {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
/* Add fleuron to last <p> in section */
|
||||
> p:not(blockquote > p, p.isso-post-action):last-child:after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
::selection {
|
||||
background: var(--contrast-color);
|
||||
@@ -405,7 +380,6 @@ figure > div > iframe {
|
||||
border-top-left-radius: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
/* box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); */
|
||||
}
|
||||
|
||||
html.barebones,
|
||||
@@ -479,85 +453,6 @@ table th {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
/* Audio Player */
|
||||
.albumCover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.albumCover,
|
||||
.coverContainer {
|
||||
width: var(--space-4xl);
|
||||
height: var(--space-4xl);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: var(--meta-font-size);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
.captionAndPlayer {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mplayer {
|
||||
background-color: var(--card-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
margin: 0 0 var(--space-s) 0;
|
||||
padding: var(--space-m);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
align-self: flex-end;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.songTitle {
|
||||
font-size: var(--step-1);
|
||||
font-variation-settings:
|
||||
"opsz" 50,
|
||||
"wght" 350,
|
||||
"SOFT" 20,
|
||||
"WONK" 1;
|
||||
}
|
||||
|
||||
/* Mastodon */
|
||||
.continue-discussion {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
.continue-discussion button {
|
||||
margin-top: calc(var(--space-s) * -1);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
|
||||
/* Code Fences */
|
||||
pre,
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
pre:not([class*="language-"]) {
|
||||
margin: 0.5em 0;
|
||||
-moz-tab-size: var(--syntax-tab-size);
|
||||
-o-tab-size: var(--syntax-tab-size);
|
||||
tab-size: var(--syntax-tab-size);
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
/* Footnotes */
|
||||
.footnotes-list {
|
||||
font-style: italic;
|
||||
@@ -585,24 +480,6 @@ hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Dropcap */
|
||||
main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
|
||||
float: left;
|
||||
font-size: var(--step-5);
|
||||
padding: var(--space-2xs);
|
||||
color: var(--contrast-color);
|
||||
border: solid 2px var(--contrast-color);
|
||||
font-family: var(--font-family-headline);
|
||||
font-variation-settings:
|
||||
"opsz" 144,
|
||||
"wght" 500,
|
||||
"SOFT" 10,
|
||||
"WONK" 0;
|
||||
margin: 0.5rem 0.7rem 0 0;
|
||||
border-radius: 0.2em;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header .home-link {
|
||||
display: grid;
|
||||
@@ -613,63 +490,6 @@ header .home-link {
|
||||
width: var(--space-l-xl);
|
||||
}
|
||||
|
||||
/* Microblog */
|
||||
.microblog-comment {
|
||||
p {
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding: var(--space-s) 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.microblog-emoji {
|
||||
font-size: var(--step-6);
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
.microblog-icon {
|
||||
filter: var(--logo-filter);
|
||||
height: var(--space-4xl);
|
||||
padding-right: var(--space-s);
|
||||
width: var(--space-2xl);
|
||||
}
|
||||
.microblog-list {
|
||||
.post-metadata {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.microblog-post {
|
||||
display: flex;
|
||||
.microblog-comment {
|
||||
p {
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--space-2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.microblog-status {
|
||||
&.card {
|
||||
align-items: center;
|
||||
padding: var(--space-s);
|
||||
}
|
||||
.microblog-status-copy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.status-metadata {
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Info Box */
|
||||
|
||||
.info {
|
||||
@@ -751,120 +571,6 @@ nav ul {
|
||||
); /* Compensate for border thickness */
|
||||
}
|
||||
|
||||
/* Navigator */
|
||||
.navigator {
|
||||
display: grid;
|
||||
gap: var(--space-2xs) var(--space-2xs);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
|
||||
width: 100%;
|
||||
.navigatorItem {
|
||||
background-color: var(--background-color);
|
||||
border: 1.5px solid var(--color-gray-20);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
height: var(--space-3xl);
|
||||
text-align: center;
|
||||
a {
|
||||
height: 100%;
|
||||
padding: var(--space-s) var(--space-xs);
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
img {
|
||||
aspect-ratio: 1 / 1;
|
||||
filter: var(--logo-filter);
|
||||
width: var(--space-m);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--text-color);
|
||||
border: 1.25px solid var(--text-color);
|
||||
transition: var(--transition-normal);
|
||||
a {
|
||||
color: var(--background-color);
|
||||
transition: var(--transition-normal);
|
||||
img {
|
||||
filter: none;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
img {
|
||||
filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
|
||||
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.postlist,
|
||||
.links-nextprev {
|
||||
container: postlist / inline-size;
|
||||
}
|
||||
.postlist-item {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.postlist-item-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
.post-image {
|
||||
width: var(--space-4xl);
|
||||
height: var(--space-4xl);
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
.post-image-container {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
height: var(--space-4xl);
|
||||
max-height: var(--space-4xl);
|
||||
overflow: hidden;
|
||||
width: var(--space-4xl);
|
||||
}
|
||||
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
color: var(--color-gray-90);
|
||||
font-size: var(--meta-font-size);
|
||||
/*margin: var(--space-2xs) 0;*/
|
||||
}
|
||||
.postlist-date {
|
||||
word-spacing: -0.5px;
|
||||
}
|
||||
.postlist-link {
|
||||
font-size: var(--step-5);
|
||||
padding-right: 0.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.postlist-link p {
|
||||
background-color: var(--color-gray-90);
|
||||
border-radius: 100px;
|
||||
color: var(--background-color);
|
||||
font-family: var(--font-family-ui);
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
margin-top: calc(var(--space-3xs) * -1);
|
||||
padding-left: var(--space-xs);
|
||||
padding-right: var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
width: max-content;
|
||||
}
|
||||
.post-copy {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
|
||||
sup {
|
||||
line-height: 0;
|
||||
}
|
||||
@@ -899,121 +605,6 @@ sup {
|
||||
}
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
a.post-tag {
|
||||
background-color: var(--color-gray-20);
|
||||
border-radius: 1rem;
|
||||
color: var(--text-color);
|
||||
font-family: var(--meta-font-family);
|
||||
font-variation-settings: "wght" 300;
|
||||
margin-top: var(--space-3xs);
|
||||
margin-right: var(--space-3xs);
|
||||
padding: 0 var(--space-3xs);
|
||||
text-decoration: none;
|
||||
}
|
||||
a.post-tag:before {
|
||||
content: "#";
|
||||
}
|
||||
a.post-tag:visited {
|
||||
color: var(--text-color);
|
||||
}
|
||||
a.post-tag:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.tag-feed-icon {
|
||||
fill: var(--rss-orange);
|
||||
height: var(--space-m);
|
||||
transition: var(--transition-normal);
|
||||
width: var(--space-m);
|
||||
&.small {
|
||||
height: var(--space-s);
|
||||
width: var(--space-s);
|
||||
}
|
||||
}
|
||||
.taglist {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.taglist li a {
|
||||
display: inline-block;
|
||||
font-size: var(--step--1);
|
||||
margin: 0 var(--space-2xs) var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.postlist-item > .post-tag {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Post Metadata */
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0 0 var(--space-l) 0;
|
||||
}
|
||||
|
||||
.post-metadata-copy {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-metadata p,
|
||||
.post-metadata ul,
|
||||
.post-metadata ul li,
|
||||
time,
|
||||
.metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
.post-metadata {
|
||||
padding-left: 0.15rem;
|
||||
}
|
||||
|
||||
@container postlist (max-width: 500px) {
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-left: 0;
|
||||
min-height: var(--space-10xl);
|
||||
width: 100%;
|
||||
}
|
||||
.post-image-container img.post-image {
|
||||
width: 100cqw;
|
||||
height: var(--space-10xl);
|
||||
}
|
||||
.postlist-link {
|
||||
padding: 0;
|
||||
}
|
||||
.postlist-link h3 {
|
||||
padding-top: var(--space-m);
|
||||
}
|
||||
.postlist-link p {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
.post-metadata {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.profilePic:not(.links-container > img.profilePic) {
|
||||
border-radius: 100%;
|
||||
height: var(--space-xl);
|
||||
margin-right: var(--space-s);
|
||||
width: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
a.header-anchor {
|
||||
font-style: normal;
|
||||
@@ -1037,30 +628,8 @@ h2 + .header-anchor {
|
||||
}
|
||||
|
||||
/* Components */
|
||||
article.post {
|
||||
grid-column: var(--span-grid);
|
||||
container: article / inline-size;
|
||||
/* Add fleuron after last <p> in article */
|
||||
> p:not(blockquote > p):last-child:after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
.blogroll {
|
||||
display: inline;
|
||||
}
|
||||
.blogroll-category-group {
|
||||
margin-bottom: var(--space-l);
|
||||
margin-left: var(--space-m);
|
||||
h3 {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
margin: var(--space-2xs) auto;
|
||||
}
|
||||
}
|
||||
#buttonsAndStuffContainer {
|
||||
/* This lives in the footer*/
|
||||
display: flex;
|
||||
grid-column: var(--span-grid);
|
||||
width: 100%;
|
||||
@@ -1084,152 +653,7 @@ article.post {
|
||||
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
.gallery-images {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
row-gap: var(--space-xs-s);
|
||||
column-gap: var(--space-m-l);
|
||||
.gallery-image-container {
|
||||
width: var(--space-7xl-8xl);
|
||||
height: var(--space-7xl-8xl);
|
||||
.gallery-image {
|
||||
border-radius: var(--border-radius);
|
||||
width: var(--space-7xl-8xl);
|
||||
height: var(--space-7xl-8xl);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Guestbook */
|
||||
.guestbook-message blockquote {
|
||||
margin-bottom: var(--space-m);
|
||||
margin-top: var(--space-3xs);
|
||||
}
|
||||
.guestbook-message p {
|
||||
margin-block: 0 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.guestbook-message p b,
|
||||
.guestbook-message p small {
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
}
|
||||
#guestbooks___challenge-answer-container br,
|
||||
.guestbooks___input-container br {
|
||||
display: none;
|
||||
}
|
||||
.guestbook-message-reply {
|
||||
border-left: var(--border-details);
|
||||
margin-left: var(--space-l);
|
||||
margin-top: calc(var(--space-s) * -1);
|
||||
opacity: 0.9;
|
||||
padding-left: var(--space-s);
|
||||
font-style: italic;
|
||||
& blockquote {
|
||||
margin-left: 0;
|
||||
}
|
||||
& blockquote::before {
|
||||
content: "";
|
||||
}
|
||||
& p::before {
|
||||
content: "Reply from ";
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add fleuron after <p> in article when footnotes are present */
|
||||
p:has(+ hr.footnotes-sep):after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
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));
|
||||
}
|
||||
/* Utilities */
|
||||
.grid-container {
|
||||
max-width: var(--grid-max-width);
|
||||
|
||||
Reference in New Issue
Block a user