summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcyfraeviolae <cyfraeviolae>2022-02-26 03:09:34 -0500
committercyfraeviolae <cyfraeviolae>2022-02-26 03:09:34 -0500
commit9a27c952cfa865949bfd529669a009baa03ee5ad (patch)
treeee50fba523e30e4a7cdea344ea06dbf570563950
parent3f29bae0ee996ee22f75468937b84bd619939bbf (diff)
font and rework
-rw-r--r--index.html26
-rw-r--r--static/charter_bold.woff2bin0 -> 15028 bytes
-rw-r--r--static/charter_bold_italic.woff2bin0 -> 16108 bytes
-rw-r--r--static/charter_italic.woff2bin0 -> 15376 bytes
-rw-r--r--static/charter_regular.woff2bin0 -> 14648 bytes
-rw-r--r--static/style.css47
6 files changed, 56 insertions, 17 deletions
diff --git a/index.html b/index.html
index 5690c96..2f973f6 100644
--- a/index.html
+++ b/index.html
@@ -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>
+ &middot; 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
new file mode 100644
index 0000000..008c4f5
--- /dev/null
+++ b/static/charter_bold.woff2
Binary files differ
diff --git a/static/charter_bold_italic.woff2 b/static/charter_bold_italic.woff2
new file mode 100644
index 0000000..8a2cacc
--- /dev/null
+++ b/static/charter_bold_italic.woff2
Binary files differ
diff --git a/static/charter_italic.woff2 b/static/charter_italic.woff2
new file mode 100644
index 0000000..ea15e1a
--- /dev/null
+++ b/static/charter_italic.woff2
Binary files differ
diff --git a/static/charter_regular.woff2 b/static/charter_regular.woff2
new file mode 100644
index 0000000..d4bc9e0
--- /dev/null
+++ b/static/charter_regular.woff2
Binary files differ
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 {