diff options
author | Steph Enders <steph@senders.io> | 2024-03-07 15:17:29 -0500 |
---|---|---|
committer | Steph Enders <steph@senders.io> | 2024-03-07 15:17:29 -0500 |
commit | 1f689fd039533801842ae241671f2437ddbe0044 (patch) | |
tree | 50d3db88f2c7e676d6679696a101e6ae2b25448f /templates/index.css | |
parent | 80f5dacf988b1cddd04eea6c4a6f70b165376764 (diff) |
Copy old files and update build.sh to generate it all!
This is a huge messy commit but :) sue me. I'm not at work I can do
git badly for once!
Diffstat (limited to 'templates/index.css')
-rw-r--r-- | templates/index.css | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/templates/index.css b/templates/index.css new file mode 100644 index 0000000..cb26dbd --- /dev/null +++ b/templates/index.css @@ -0,0 +1,140 @@ +:root { + --blue: #7BD3EA; + --green: #A1EEBD; + --pink: #F6D6D6; + --bg-color: #ffffeb; + --color: black; + --code-color: white; + --quote-color: #aaa; + --quote-text: black; + --footer-text: black; + --border-color: var(--pink); + --article-border-color: var(--green); + --article-border-outset-color: var(--blue); + --main-width: 800px; + +} + +/* #261c35 # darkmode bg-color */ +/* #ffa # links */ +/* #3E7 or this? */ +/* #3C0E6A as a "pink" alternative for dark mode? */ +html, body { + margin: 0; + background-color: var(--bg-color); + color: var(--color); +} + +/* NAV */ + +#site-header { + margin: 16px; + text-align: center; +} + +#site-title { + font-size: 3em; + text-decoration: underline; + text-decoration-style: wavy; + text-decoration-color: var(--pink); + color: #000; + font-family: monospace; +} + +nav { + margin: 4px 0; +} + +nav a:not(:first-child){ + margin-left: 4px; +} + +/* MAIN */ +main { + max-width: var(--main-width); + margin: auto auto; + border-color: var(--article-border-color); + border-right-color: var(--article-border-outset-color); + border-bottom-color: var(--article-border-outset-color); + border-radius: 4px; + border-style: solid; +} +main article { + margin: 16px; + line-height: 1.5em; +} + +main article h1 { + text-align: center; +} + +main footer { + background-color: var(--pink); + margin: 16px 0; + padding: 2px 16px; + color: var(--footer-text); +} + +main footer ul { + list-style: none; + padding: 0; + margin: 0; +} + +main footer ul li { + display: inline; +} + +main footer ul li:not(:first-child) { + padding-left: 16px; +} + +footer { + font-size: .8em; + padding: 16px; +} +#copyright { + text-align: center; +} + +pre, code { + background-color: var(--code-color); + padding: 4px 16px; +} + +main article figure blockquote { + padding: 8px; + background-color: var(--pink); + box-shadow: 8px 8px var(--blue); + color: var(--quote-text); +} + +main article figure blockquote p:before { + content: '“'; + font-size: 2em; + color: var(--quote-color); +} + +main article figure blockquote p:after { + content: '”'; + font-size: 2em; + color: var(--quote-color); +} + +main article figure blockquote cite { + display: block; + text-align: right; +} + +#pinned { + list-style: none; +} + +#pinned li::marker { + content: "📌 "; +} + +hr { + border-color: var(--pink); + border-style: solid; +} |