diff options
| -rw-r--r-- | 404.html | 31 | ||||
| -rw-r--r-- | index.html | 72 | ||||
| -rw-r--r-- | static/FiraMono-Regular.ttf | bin | 0 -> 169464 bytes | |||
| -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/favicon.ico | bin | 0 -> 1098 bytes | |||
| -rw-r--r-- | static/styles.css | 180 |
9 files changed, 283 insertions, 0 deletions
diff --git a/404.html b/404.html new file mode 100644 index 0000000..8a2fc69 --- /dev/null +++ b/404.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>cyfraeviolae</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico"> + <link rel="stylesheet" href="/static/styles.css"> + </head> + <body> + <div class="container"> + <div class="header"> + <div class="subtitle">THE LIMINAL REVERIE OF</div> + <a class="title" href="/">CYFRAE VIOLAE</a> + <div class="contact"> + New York · + <a href="mailto:library@cyfraeviolae.org">library@cyfraeviolae.org</a> + </div> + </div> + <div class="category">404 Not Found</div> + <p class="work"> + The page you’re looking for is somewhere else, + <br> + but while you’re here, consider this + <br> + a brief caesura. + </p> + </div> + </body> +</html> + diff --git a/index.html b/index.html new file mode 100644 index 0000000..87f3d08 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<html> + <head> + <title>cyfraeviolae</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico"> + <link rel="stylesheet" href="/static/styles.css"> + </head> + <body> + <div class="container"> + <div class="header"> + <div class="subtitle">THE LIMINAL REVERIE OF</div> + <a class="title" href="/">CYFRAE VIOLAE</a> + <div class="contact"> + New York · + <a href="mailto:library@cyfraeviolae.org">library@cyfraeviolae.org</a> + </div> + </div> + <div class="category">Literature</div> + <p class="work"> + <img src="/spectral-renga/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/spectral-renga">Spectral Renga</a> + is a collaborative graph of poetry. + </p> + <p class="work"> + <img src="/prosodyle/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/prosodyle">Prosodyle</a> + is Wordle but for poetry and meter. + </p> + <div class="category">Art History</div> + <p class="work"> + <img src="/antiquitysort/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/antiquitysort">Antiquitysort</a> + challenges you to order our cultural histories in time. + </p> + <p class="work"> + <img src="/countervisual/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/countervisual">Countervisual</a> + is a game about restoring color-randomized artwork. + </p> + <div class="category">Mathematics and Cryptography</div> + <p class="work"> + <img src="/sumcheck/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/sumcheck">Sumcheck</a> + is a decider for Presburger arithmetic. + </p> + <p class="work"> + <img src="/well-ordered/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/well-ordered">Well-Ordered</a> + computes how to best incrementally recreate 77 cocktails. + </p> + <p class="work"> + <img src="/forbidden-salamanders/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/forbidden-salamanders">Forbidden Salamanders</a> + demonstrates cryptanalytic attacks against AES-GCM. + </p> + <div class="category">Sundry</div> + <p class="work"> + <img src="/telechromy/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/telechromy">Telechromy</a> + is a 2-player game about color, perception, and expression. + </p> + <p class="work"> + <img src="/infinite-connections/static/favicon.ico" width=11 height=11> + <a class="work-title" href="/infinite-connections">Infinite Connections</a> + autogenerates <em>Connections</em> games. + </p> + </div> + </body> +</html> + diff --git a/static/FiraMono-Regular.ttf b/static/FiraMono-Regular.ttf Binary files differnew file mode 100644 index 0000000..3910f17 --- /dev/null +++ b/static/FiraMono-Regular.ttf 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/favicon.ico b/static/favicon.ico Binary files differnew file mode 100644 index 0000000..8c1446c --- /dev/null +++ b/static/favicon.ico diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..23a689d --- /dev/null +++ b/static/styles.css @@ -0,0 +1,180 @@ +@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: FiraMono; + src: url(FiraMono-Regular.ttf); + font-style: normal; +} + +body { + background: #fffaef; + color: DarkSlateGrey; + font-family: Charter, serif; + font-size: 16px; + text-align: center; + line-height: 1.2; + margin-left: 0; + margin-right: 0; +} + +.container { + background: #fffaef; + text-align: left; + padding: 1em; + padding-bottom: 1.4em; + min-width: 40%; + padding-top: .7em; +} + +.center-container { + text-align: center; + width: 80%; + max-width: 500px; + margin: 0 auto; +} + +.center-container .crumbs { + padding-left: 0; +} + +@media only screen and (min-width: 700px) { + .container { + border: 1px DarkSlateGrey dotted; + border-radius: 4px; + box-shadow: 4px 4px 0px rgba(0, 0, 0, .5); + padding: 2em; + padding-top: 1.5em; + max-width: 40em; + margin: 0 auto; + margin-top: 6%; + margin-bottom: 6%; + } + body { + background: #fbf7f0; + } +} + +@media only screen and (min-height: 700px) { + body { + margin-top: 0; + } + .container { + } +} + +p { + margin-bottom: 0; +} + +a { + text-decoration: underline dotted; + text-decoration-thickness: 1px; + color: black; +} + +a:hover { + text-decoration: underline; + color: #dd1b26; +} + +.title { + font-size: 200%; + font-weight: bold; + color: #dd1b26; + text-decoration: none; + letter-spacing: -1px; +} + +.subtitle { + font-weight: bold; + font-size: large; + margin-bottom: -.5em; +} + +.category { + font-size: large; + font-style: italic; + margin-bottom: -.3em; + margin-top: 1.8em; +} + +.work { + margin-left: 1em; +} + +.work-title { + letter-spacing: -1px; +} + +.contact { + margin-top: .3em; + font-style: italic; + font-size: small; +} + +.home { + font-style: italic; + font-size: 20px; + letter-spacing: -1px; +} + +.home > span { + font-size: 16px; +} + +.site { + font-size: 16px; +} + +.crumbs { + font-size: small; + padding-left: 2em; +} + +.crumbs a { + white-space: nowrap; +} + +.home-title { + font-weight: bold; + color: #dd1b26; +} + +.sep { + margin-left: 3px; + margin-right: 3px; +} + +.header { + text-align: center; +} + +.source { + float: right; + font-size: small !important; + font-family: monospace; + font-style: normal; +} |