From 21b66dd28fd38092002798336596750a248c8118 Mon Sep 17 00:00:00 2001 From: Nathan Upchurch Date: Fri, 20 Sep 2024 23:57:00 -0500 Subject: [PATCH] Style footnotes --- public/css/index.css | 172 +++++++++++++++++++++++++++++++------------ 1 file changed, 124 insertions(+), 48 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 7f19a0c..7d810ea 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -9,7 +9,6 @@ } } - /* Defaults */ :root { --font-family: "Fraunces", serif; @@ -17,7 +16,10 @@ --font-family-ui: "Manrope", sans-serif; --font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0; --font-variation-ui: "wght" 500; - --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; + --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, + Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, + Courier, monospace; --meta-font-family: "Fraunces", serif; --meta-font-size: var(--step--1); --meta-font-style: normal; @@ -42,7 +44,8 @@ /* Design Tokens */ :root { /* Animations */ - --slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; + --slide-in-blurred-bottom: slide-in-blurred-bottom 0.75s + cubic-bezier(0.23, 1, 0.32, 1) both; /* Colors */ --color-gray-20: #e0e0e0; @@ -50,7 +53,7 @@ --card-color: white; --contrast-color: #027860; - --background-color: #FAF5F5; + --background-color: #faf5f5; --rss-orange: rgb(255, 152, 0); --text-color: var(--color-gray-90); --text-color-link: var(--text-color); @@ -91,33 +94,35 @@ --space-2xl-3xl: clamp(5rem, 2.7465rem + 11.2676vw, 9rem); /* Custom pairs - https://utopia.fyi/ */ - --space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem); + --space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem); /* Fluid Grid Tokens - https://utopia.fyi/ */ - --grid-max-width: 55.50rem; + --grid-max-width: 55.5rem; --grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem)); --grid-columns: 12; /* Change SVG color with filter */ - --logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%); + --logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) + saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%); --icon-filter: none; /* Corners */ - --border-radius: .3rem; + --border-radius: 0.3rem; /* Transitions */ - --transition-normal: all .3s; + --transition-normal: all 0.3s; /* Links */ - --link-decoration-thickness: .1rem; + --link-decoration-thickness: 0.1rem; /* Borders */ + --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); --border-nav-hover: var(--space-xs-s) solid var(--text-color); /* Shadow */ - --box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Web Component Tokens */ --wc-card-background-color: var(--card-color); @@ -144,7 +149,8 @@ --background-color: #15202b; --logo-filter: none; - --icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%); + --icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%) + saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%); } .socialLinks a li img { filter: auto; @@ -162,7 +168,7 @@ body { color: var(--text-color); font-family: var(--font-family); font-variation-settings: var(--font-variation-default); - font-variant-Ligatures: normal; + font-variant-ligatures: normal; margin: 0 auto; padding: 0; } @@ -179,7 +185,7 @@ blockquote:before { margin-left: -4rem; margin-top: -2rem; position: fixed; - filter: opacity(.15); + filter: opacity(0.15); } body { animation: var(--slide-in-blurred-bottom); @@ -190,7 +196,8 @@ body { padding-top: var(--space-m); padding-bottom: var(--space-m); } -button, .nav-item { +button, +.nav-item { font-family: var(--font-family-ui); } code { @@ -204,7 +211,9 @@ code { background-color: var(--card-color); } } -header, footer, main { +header, +footer, +main { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(var(--grid-columns), 1fr); @@ -229,7 +238,7 @@ section { grid-column: 1 / span 12; font-size: var(--step-1); margin: 0; - padding-bottom: var(--space-xl); + padding-bottom: var(--space-xl); padding-top: var(--space-l); line-height: calc(var(--step-1) * 0.5 + var(--step-1)); } @@ -260,7 +269,9 @@ footer p { font-size: var(--step-0); grid-column: 1 / span 12; } -h1, h2, h3 { +h1, +h2, +h3 { color: var(--text-color); grid-column: 1 / span 12; margin: 0; @@ -268,14 +279,22 @@ h1, h2, h3 { } h1 { font-family: var(--font-family-headline); - font-variation-settings: "opsz" 100, "wght" 500, "SOFT" 10, "WONK" 1; + font-variation-settings: + "opsz" 100, + "wght" 500, + "SOFT" 10, + "WONK" 1; font-size: var(--step-5); font-style: normal; line-height: calc(var(--step-5) * 0.25 + var(--step-5)); } h2 { font-size: var(--step-2); - font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1; + font-variation-settings: + "opsz" 50, + "wght" 350, + "SOFT" 20, + "WONK" 1; padding-bottom: var(--space-l); padding-top: var(--space-xl); } @@ -292,7 +311,8 @@ main { grid-column: 1 / 12; padding-top: var(--space-3xl); } -main > p > img, main > p > a > img { +main > p > img, +main > p > a > img { width: 100%; padding-top: var(--space-l); } @@ -306,12 +326,17 @@ pre { p:last-child { margin-bottom: 0; } -p, li { +p, +li { font-size: var(--step-0); line-height: calc(var(--step-0) * 0.5 + var(--step-0)); } th { - font-variation-settings: "opsz" 25, "wght" 500, "SOFT" 40, "WONK" 0; + font-variation-settings: + "opsz" 25, + "wght" 500, + "SOFT" 40, + "WONK" 0; padding-bottom: var(--space-2xs); text-align: left; } @@ -328,7 +353,8 @@ figure > a > img { box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); } -html.barebones, body.barebones { +html.barebones, +body.barebones { background-color: var(--background-color); text-align: center; } @@ -354,7 +380,7 @@ button { } button > img { max-width: 1em; - margin-right: .5em; + margin-right: 0.5em; filter: var(--icon-filter); } a.link-button { @@ -401,14 +427,16 @@ table th { .continue-discussion button { margin-top: var(--space-xs); } -wc-comment::part(author-link), wc-toot::part(author-link) { +wc-comment::part(author-link), +wc-toot::part(author-link) { font-size: var(--step-0); text-decoration: none; } wc-comment::part(main) { padding: var(--space-m); } -wc-comment::part(publish-date), wc-toot::part(publish-date) { +wc-comment::part(publish-date), +wc-toot::part(publish-date) { font-family: var(--meta-font-family); font-size: var(--meta-font-size); font-style: var(--meta-font-style); @@ -419,7 +447,8 @@ wc-toot::part(main) { font-family: var(--meta-font-family); font-size: var(--step--1); } -wc-toot::part(author), wc-toot::part(author-link){ +wc-toot::part(author), +wc-toot::part(author-link) { color: white; font-style: var(--meta-font-style); font-variation-settings: "wght" 600; @@ -430,7 +459,7 @@ code { font-family: var(--font-family-monospace); } pre:not([class*="language-"]) { - margin: .5em 0; + margin: 0.5em 0; -moz-tab-size: var(--syntax-tab-size); -o-tab-size: var(--syntax-tab-size); tab-size: var(--syntax-tab-size); @@ -447,18 +476,47 @@ code { word-break: break-all; } -/* Dropcap */ +/* Footnotes */ +.footnotes-list { + font-style: italic; + margin-top: 0; + margin-bottom: 0; + > li, + > li > p { + font-size: var(--step--1); + } +} +.footnote-item::marker { + font-style: normal; +} +.footnote-ref { + > a { + font-size: var(--step--2); + text-decoration: none; + } + :before { + content: " "; + } +} +.footnote-ref hr.footnotes-sep { + border: var(--border-hr); +} +/* Dropcap */ main > section > article > p:not(.nodropcap):first-of-type:first-letter { float: left; font-size: var(--step-6); - padding: .5rem .5rem .5rem .5rem; + padding: 0.5rem 0.5rem 0.5rem 0.5rem; 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: .5rem .7rem 0 0; - border-radius: .2em; + 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; } @@ -487,7 +545,7 @@ nav ul { .nav-icon { fill: var(--color-gray-90); height: var(--space-2xs); - margin-right: .25rem; + margin-right: 0.25rem; transition: var(--transition-normal); width: var(--space-2xs); } @@ -513,7 +571,9 @@ nav ul { border-top: var(--border-nav-hover); /* Increase border thickness */ } .nav-item:hover a { - margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */ + margin-top: calc( + var(--space-xs-s) * -2 + ); /* Compensate for border thickness */ } .nav-item a[href]:visited { color: var(--text-color); @@ -528,9 +588,13 @@ nav ul { .nav-item[data-currentpage="true"] { border-top: var(--border-nav-currentpage); } -.nav-item[data-currentpage="true"] a, .nav-item[data-currentpage="true"] a[href]:visited, .nav-item[data-currentpage="true"]:hover a { +.nav-item[data-currentpage="true"] a, +.nav-item[data-currentpage="true"] a[href]:visited, +.nav-item[data-currentpage="true"]:hover a { color: var(--contrast-color); - margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */ + margin-top: calc( + var(--space-xs-s) * -2 + ); /* Compensate for border thickness */ } /* Posts list */ @@ -543,7 +607,7 @@ nav ul { align-items: flex-start; background-color: var(--card-color); border-radius: var(--border-radius); - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); display: flex; flex-flow: row nowrap; justify-content: flex-start; @@ -551,10 +615,10 @@ nav ul { width: 100%; } - -.postlist, .links-nextprev { +.postlist, +.links-nextprev { container: postlist / inline-size; - } +} .post-image-container { border-radius: var(--border-radius); @@ -576,8 +640,8 @@ nav ul { } .postlist-link { font-size: var(--step-5); /* 19px /16 */ - padding-right: .5em; - text-decoration: none; + padding-right: 0.5em; + text-decoration: none; } .postlist-link p { @@ -657,7 +721,7 @@ a.post-tag:hover { padding-left: 0; } .taglist li { - margin: 0em .5em 1.25em 0em; + margin: 0em 0.5em 1.25em 0em; } .taglist li a { font-size: var(--step-2); @@ -681,7 +745,11 @@ a.post-tag:hover { padding-left: var(--space-s); } -.post-metadata p, .post-metadata ul, .post-metadata ul li, time, .metadata { +.post-metadata p, +.post-metadata ul, +.post-metadata ul li, +time, +.metadata { display: flex; flex-flow: row wrap; font-size: var(--meta-font-size); @@ -694,7 +762,7 @@ a.post-tag:hover { } .post-metadata time { - padding-left: .15rem; + padding-left: 0.15rem; } .profilePic:not(.links-container > img.profilePic) { @@ -705,7 +773,7 @@ a.post-tag:hover { /* Direct Links / Markdown Headers */ a.header-anchor { font-style: normal; - margin-left: .1em; + margin-left: 0.1em; text-decoration: none; } a[href].header-anchor, @@ -736,6 +804,14 @@ article.post > p:not(blockquote > p):last-child:after { display: inline; font-size: var(--step-1); } + +/* Adds fleuron to article end when footnotes are present */ +p:has(+ hr.footnotes-sep):after { + content: "\2766"; + display: inline; + font-size: var(--step-1); +} + /* Utilities */ .grid-container { max-width: var(--grid-max-width);