1 files changed, 557 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..52d19af
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,557 @@
+[hidden] { display: none !important; }
+
+html {
+    font-family: "Cantarell", sans-serif;
+}
+
+@media (max-width: 54em) {
+    html {
+        font-size: 14px;
+        line-height: 160%;
+    }
+}
+
+@media (max-width: 26em) {
+    html {
+        font-size: 12px;
+        line-height: 150%;
+    }
+}
+
+body {
+    max-width: 54rem;
+    margin: .5rem auto;
+    position: relative;
+}
+
+@media (max-width: 54em) {
+    body {
+        max-width: 100%;
+        padding: 0 1rem;
+    }
+}
+
+/* Top-level header. */
+
+body > header {
+    display: flex;
+    align-items: center;
+}
+
+@media screen and (max-width: 360px) {
+    body > header {
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+}
+
+body > header > a > img {
+    max-width: 4rem;
+}
+
+@media screen and (min-width: 480px) {
+    body > header > a {
+        padding-right: 1rem;
+    }
+}
+
+body > header > nav ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+@media screen and (min-width: 480px) {
+    body > header > nav > ul > li {
+        display: inline-block;
+    }
+
+    body > header > nav > ul li {
+        padding: 1rem 2rem;
+        border-bottom: 2px solid #d2d6dd;
+        text-align: center;
+    }
+
+    body > header > nav > ul li > a {
+        color: #000;
+        text-decoration: none;
+    }
+
+    body > header > nav > ul .drop-menu {
+        display: none;
+        position: absolute;
+        z-index: 1;
+    }
+
+    body > header > nav > ul .drop-menu > li {
+        background: #fff;
+    }
+
+    body > header > nav > ul > li:hover .drop-menu {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    body > header > nav > ul .drop-menu {
+        list-style-type: circle;
+        padding-left: 1em;
+    }
+}
+
+/* Horizontal lists. */
+
+.horizontal-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    list-style-type: none;
+    text-align: center;
+
+    margin: 0;
+    padding: 8px 0;
+}
+
+/* Pagination. */
+
+#pagination {
+    display: flex;
+    justify-content: space-around;
+}
+
+/* Tag clouds. */
+
+#tag-cloud a {
+    color: #000;
+}
+
+#tag-cloud li {
+    display: inline-block;
+    margin: 10px 5px;
+    padding: 5px 10px;
+    vertical-align: top;
+
+    text-align: center;
+
+    border-radius: 4px;
+    border-style: solid;
+    border-width: thin;
+}
+
+/* Links. */
+
+a:link, a:visited { color: #00E; text-decoration: none; }
+
+/* Figures */
+
+figure > img {
+    display: block;
+    max-height: 600px;
+    max-width: 90%;
+    margin: auto;
+
+    border-radius: 2px;
+}
+
+figure > .org-svg {
+    display: block;
+    max-width: 90%;
+    margin: auto;
+}
+
+figure > figcaption {
+    padding-top: 1rem;
+}
+
+/* Embeds. */
+
+.mastodon > iframe,
+.peertube > iframe {
+    display: block;
+    width: 90%;
+    min-height: 100%;
+    margin: auto;
+    border-radius: 4px;
+}
+
+/* Footnotes. */
+
+.footdef {
+    margin-bottom: 1rem;
+}
+
+.footdef > sup, .footpara {
+    display: inline;
+}
+
+/* Comments & Webmention. */
+
+textarea {
+    width: 100%;
+    height: 4rem;
+}
+
+textarea, input[type=text], input[type=url] {
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+}
+
+#webmention p .author-name {
+    margin: 4px;
+}
+
+#webmention {
+    border-top: 2px solid #d2d6dd;
+}
+
+ul.webmention-container {
+    list-style-type: none;
+}
+
+ul.webmention-container > li {
+    border: 2px solid #d2d6dd;
+    border-bottom: none;
+}
+
+ul.webmention-container > li:last-child {
+    border-bottom: 2px solid #d2d6dd;
+}
+
+ul.webmention-container > li.comment {
+    padding: 0.5rem;
+}
+
+ul.webmention-container > li.comment img.u-photo {
+    width: 4rem;
+    padding: 0 1rem 1rem 0;
+    float: left;
+    clear: both;
+    height: 100%;
+}
+
+ul.webmention-container > li.interaction {
+    padding: 4px;
+}
+
+ul.webmention-container > li.interaction img.u-photo {
+    max-width: 16px;
+    margin-right: 8px;
+    float: left;
+    clear: both;
+}
+
+ul.webmention-container ul.comment-reactions {
+    margin-top: 8px;
+}
+
+ul.webmention-container ul.comment-reactions li {
+    border-radius: 4px;
+    border: 1px solid #d2d6dd;
+    display: inline;
+    list-style-type: none;
+    padding: 4px;
+}
+
+/* Webmention (or comment) source indicator. */
+
+ul.webmention-container .comment {
+    position: relative;
+}
+
+ul.webmention-container .comment .comment-source-identifier {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    max-width: 16px;
+}
+
+/* Widget for comment reactions. */
+
+.emoji-picker {
+    width: 51%;
+    height: 2.75em;
+    border: solid 1px;
+    overflow: scroll;
+    margin-top: 16px;
+}
+
+.emoji-picker > span {
+    margin: 2px;
+    font-size: 2em;
+}
+
+
+/* Webmention form. */
+
+form#webmention-form {
+    border-top: 2px solid #d2d6dd;
+    padding-top: 1rem;
+}
+
+#webmention-input-group {
+    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: 9fr 1fr;
+}
+
+/* Comment form. */
+
+.required:after {
+    content:" *";
+    color: red;
+}
+
+fieldset#comment-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-gap:5px;
+}
+
+#comment-form #captcha-trigger-block label {
+    display: block;
+    margin-bottom: 16px;
+}
+
+#comment-form img {
+    max-width: 100%;
+}
+
+/* Source code. */
+
+pre {
+    color: #f0e9dc;
+    font-family: "Hack", monospace;
+    font-size: 90%;
+
+    background-color: #303539;
+    border-radius: 4px;
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+/* Footer. */
+
+body > footer {
+    margin-top: 1.2rem;
+    border-top: 2px solid #d2d6dd;
+}
+
+body > footer > div {
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+body > footer > div > p {
+    margin: 0;
+    padding-right: 1rem;
+}
+
+/* About page. */
+
+.overline {
+    border-top: 2px solid #d2d6dd;
+    margin-top: 0.5rem;
+    overflow: auto; /* Not specific to overline. */
+}
+
+/* Tables. */
+
+table {
+    text-align: center;
+    width: 100%;
+}
+
+td {
+    padding: 0 1rem;
+}
+
+tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+/* Buttons. */
+
+.lang button {
+    display: inline;
+    padding: .3em .6em .3em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25em;
+}
+
+.label-info {
+    background-color: #5bc0de;
+}
+
+.label-good {
+    background-color: #5cb85c;
+    border-color: #4cae4c;
+}
+
+.label-okay {
+    background-color: #ec971f;
+    border-color: #d58512;
+}
+
+.label-bad {
+    background-color: #dc3545;
+}
+
+/* Spoilered text. */
+
+.spoiler {
+    background-color: #2e3436;
+    color: #2e3436;
+}
+
+.spoiler:hover {
+    background-color: #f6f5f4;
+}
+
+/* Folded sections. */
+.fold-hidden {
+    height: 300px;
+    overflow: hidden;
+    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
+}
+
+/* Styles specific to the "about" page. */
+
+.portrait {
+    max-width: 30%;
+    float: right;
+}
+
+.portrait > img {
+    max-width: 100%;
+}
+
+.project-section td:nth-child(1) {
+    width: 15%;
+}
+
+.project-section td:nth-child(2) {
+    width: 10%;
+}
+
+.project-section td:nth-child(3) {
+    width: 80px;
+}
+
+.project-section td:nth-child(4) {
+    width: 15%;
+}
+
+.team-timeline-section img {
+    max-width: 32px;
+}
+
+.team-timeline-section td:nth-child(1) {
+    width: 15%;
+}
+
+.team-timeline-section td:nth-child(2) {
+    width: 40px;
+}
+
+/* .team-timeline-section td:nth-child(3) { */
+/*     width: 20%; */
+/* } */
+
+.team-timeline-section td:nth-child(4) {
+    width: 15%;
+}
+
+.team-timeline-section td:nth-child(5) {
+    width: 15%;
+}
+
+.lang-c {
+    background-color: #555555;
+    color: #fff;
+}
+
+.lang-cpp {
+    background-color: #f34b7d;
+    color: #fff;
+}
+
+.lang-python {
+    background-color: #3572a5;
+    color: #ffdb4e;
+}
+
+.lang-rust {
+    background-color: #dea584;
+    color: #fff;
+}
+
+.lang-kotlin {
+    background-color: #f89917;
+    color: #fff;
+}
+
+.lang-fennel {
+    background-color: #2ca02c;
+    color: #fff;
+}
+
+.lang-elisp {
+    background-color: #c065db;
+    color: #fff;
+}
+
+.lang-scheme {
+    background-color: #1e4aec;
+    color: #fff;
+}
+
+.lang-ebuild {
+    background-color: #4d4270;
+    color: #fff;
+}
+
+.article-front-matter {
+  border: 1px solid;
+  border-radius: 3px;
+  padding: 0.25em 1em;
+}
+
+.article-warning {
+  background-image: url('/static/image/tango-emblem-important.png');
+  background-repeat: no-repeat;
+  background-size: 4em 4em;
+  background-position: 1.5em 50%;
+  padding: 0.25em 1em 0.25em 7em;
+}
+
+.article-future-interjection {
+  background-image: url('/static/image/clock.png');
+  background-repeat: no-repeat;
+  background-size: 4em 4em;
+  background-position: 1.5em 50%;
+  padding: 0.25em 1em 0.25em 7em;
+}
+
+#loading {
+    border: 1px solid;
+    width: fit-content;
+    padding: 5px;
+    margin: auto;
+}
+
+fieldset {
+    padding: 12px;
+    margin: 15px;
+}
+
+#rsvp-input input {
+    margin: 0px 16px;
+}