diff --git a/styles.css b/styles.css index cdb8e7c..48ed657 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,15 @@ @font-face { - font-family: GoMono; - src: url(fonts/GoMonoNerdFont-Regular.ttf); - font-weight: 400; + font-family: Jura; + src: url(fonts/Jura-VariableFont_wght.ttf) format(tr); font-style: normal; } +@font-face { + font-family: League; + src: url(fonts/LeagueGothic-Regular-VariableFont_wdth.ttf); + font-style: bold; +} + :root { --text: #e0def4; --love: #eb6f92; @@ -18,56 +23,106 @@ --surface: #1f1d2e; --overlay: #26233a; + --hl-low: #21202e; --hl-med: #403d52; --hl-high: #524f67; } body { - background-color: var(--base); + background-image: linear-gradient(to bottom right, var(--overlay), var(--base)); } h1, h2, h3, h4 { - font-family: Verdana, Geneva, Tahoma, sans-serif; + font-family: League, Verdana, Geneva, Tahoma, sans-serif; + color: var(--gold); + text-shadow: 0.8rem 0.8rem var(--base); +} + +h1 { + font-size: 8rem; +} + +h2 { + font-size: 6rem; +} + +h3 { + font-size: 4rem; color: var(--love); } main { - font-family: GoMono, serif; + font-family: Jura, serif; font-size: 2rem; width: 60%; margin: auto; color: var(--text); } -p { +p, +ul { + background-color: var(--surface); border-radius: 10rem; - padding: 2rem; + padding: 5rem; + box-shadow: 1rem 1rem var(--base); +} + +figcaption { + margin-bottom: 0; + font-size: 2em; + font-weight: 1000; + color: var(--iris); + text-shadow: 0.08em 0.08em var(--base); } b { - color: var(--gold); + /* color: var(--foam); */ + font-weight: 1000; + font-size: 1.1em } a { - text-decoration: none; + text-decoration-line: underline; + text-decoration-style: dotted; + text-decoration-color: var(--pine); color: var(--foam); + font-weight: bold; } a:visited { + text-decoration: none; color: var(--pine); } a:hover { - background-color: pink; + background-color: var(--hl-med); } +ul { + list-style-position: inside; + +} + + li { - list-style-type: ' '; + list-style-type: '✓ '; margin-bottom: 2rem; - + padding: 1rem; +} + +li::marker { + color: var(--pine); +} + +.link-list>li { + list-style-type: '> '; +} + +.link-list>li:hover::marker { + color: var(--foam); }