diff options
| author | cyfraeviolae <cyfraeviolae> | 2022-02-26 03:09:34 -0500 |
|---|---|---|
| committer | cyfraeviolae <cyfraeviolae> | 2022-02-26 03:09:34 -0500 |
| commit | 9a27c952cfa865949bfd529669a009baa03ee5ad (patch) | |
| tree | ee50fba523e30e4a7cdea344ea06dbf570563950 | |
| parent | 3f29bae0ee996ee22f75468937b84bd619939bbf (diff) | |
font and rework
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | static/charter_bold.woff2 | bin | 0 -> 15028 bytes | |||
| -rw-r--r-- | static/charter_bold_italic.woff2 | bin | 0 -> 16108 bytes | |||
| -rw-r--r-- | static/charter_italic.woff2 | bin | 0 -> 15376 bytes | |||
| -rw-r--r-- | static/charter_regular.woff2 | bin | 0 -> 14648 bytes | |||
| -rw-r--r-- | static/style.css | 47 |
6 files changed, 56 insertions, 17 deletions
@@ -9,26 +9,34 @@ </head> <body> <div class="container"> - <a class="title" href="https://cyfraeviolae.org">cyfraeviolae.org</a> + <p class="header"> + <a class="title" href="https://cyfraeviolae.org">cyfraeviolae.org</a> + · the garden of encrypted violets + </p> <p> - <a href="/spectral-renga">Spectral Renga</a> + <img src="/spectral-renga/static/favicon.ico" width=12 height=12> + <a class="work" href="/spectral-renga">Spectral Renga</a> is a collaborative graph of poetry. </p> <p> - <a href="/antiquitysort">Antiquitysort</a> - is a mission to restore the well-ordering of our cultural histories. + <img src="/antiquitysort/static/favicon.ico" width=12 height=12> + <a class="work" href="/antiquitysort">Antiquitysort</a> + challenges you to order our cultural histories in time. </p> <p> - <a href="/sumcheck">Sumcheck</a> + <img src="/sumcheck/static/favicon.ico" width=12 height=12> + <a class="work" href="/sumcheck">Sumcheck</a> is a decider for Presburger arithmetic. </p> <p> - <a href="/well-ordered">Well-Ordered</a> - computes the most efficient way to incrementally recreate 77 IBA cocktails. + <img src="/well-ordered/static/favicon.ico" width=12 height=12> + <a class="work" href="/well-ordered">Well-Ordered</a> + computes how to efficiently and incrementally recreate 77 cocktails. </p> <p> - <a href="/prosodyle">Prosodyle</a> - is like Wordle but for poetry. + <img src="/prosodyle/static/favicon.ico" width=12 height=12> + <a class="work" href="/prosodyle">Prosodyle</a> + is Wordle but for poetry and metrical structure. </p> </div> </body> diff --git a/static/charter_bold.woff2 b/static/charter_bold.woff2 Binary files differnew file mode 100644 index 0000000..008c4f5 --- /dev/null +++ b/static/charter_bold.woff2 diff --git a/static/charter_bold_italic.woff2 b/static/charter_bold_italic.woff2 Binary files differnew file mode 100644 index 0000000..8a2cacc --- /dev/null +++ b/static/charter_bold_italic.woff2 diff --git a/static/charter_italic.woff2 b/static/charter_italic.woff2 Binary files differnew file mode 100644 index 0000000..ea15e1a --- /dev/null +++ b/static/charter_italic.woff2 diff --git a/static/charter_regular.woff2 b/static/charter_regular.woff2 Binary files differnew file mode 100644 index 0000000..d4bc9e0 --- /dev/null +++ b/static/charter_regular.woff2 diff --git a/static/style.css b/static/style.css index 06a86be..a513b50 100644 --- a/static/style.css +++ b/static/style.css @@ -1,4 +1,29 @@ @font-face { + font-family: Charter; + src: url(charter_regular.woff2) format('woff2-variations'); + font-style: normal; +} + +@font-face { + font-family: Charter; + src: url(charter_italic.woff2) format('woff2-variations'); + font-style: italic; +} + +@font-face { + font-family: Charter; + src: url(charter_bold.woff2) format('woff2-variations'); + font-weight: bold; +} + +@font-face { + font-family: Charter; + src: url(charter_bold_italic.woff2) format('woff2-variations'); + font-style: italic; + font-weight: bold; +} + +@font-face { font-family: EBGaramond; src: url(EBGaramond-VariableFont_wght.ttf) format('woff2-variations'); font-style: normal; @@ -17,29 +42,35 @@ } body { - background: #fdf3f3; + background: #fffaef; color: DarkSlateGrey; - font-family: EBGaramond, serif; - font-size: large; + font-family: Charter, serif; + font-size: 18px; } a { - color: #1a97bf; + text-decoration: none; + color: #dd1b26; } a:hover { - color: #075d77; + text-decoration: underline; + color: #dd1b26; } .container { - margin: 1em; + margin: 4em; max-width: 40em; } -.title { +.header { font-style: italic; + font-size: x-large; +} + +.title { + font-weight: bold; letter-spacing: -0.5px; - font-size: larger; } hr { |