Initial commit

static/css/about.css

@@ -0,0 +1,26 @@
+/* About/bio section */
+.about__logo {
+    height: 1.5rem;
+}
+
+.about__title {
+    display: inline;
+    vertical-align: top;
+}
+
+.about__title::before {
+    content: none;
+}
+
+/* Social media links */
+.aside__social-links {
+    padding: 0;
+}
+
+.aside__social-links li {
+    display: inline-block;
+}
+
+.aside__social-links li::marker {
+    content: none;
+}

static/css/colour/dark-mode.css

@@ -0,0 +1,7 @@
+:root {
+    --bg: var(--black);
+    --dark-bg: var(--dark-black);
+    --bright-bg: var(--bright-black);
+    --fg: var(--white);
+    --bright-fg: var(--bright-white);
+}

static/css/colour/gruvbox-dark.css

@@ -0,0 +1,22 @@
+/* gruvbox dark mode
+ * https://github.com/morhetz/gruvbox
+ */
+:root {
+    --black: #282828;
+    --red: #cc241d;
+    --green: #98971a;
+    --yellow: #d79921;
+    --blue: #458588;
+    --magenta: #b16286;
+    --cyan: #689d6a;
+    --white: #ebdbb2;
+    --dark-black: #1d2021;
+    --bright-black: #928374;
+    --bright-red: #fb4934;
+    --bright-green: #b8bb26;
+    --bright-yellow: #fabd2f;
+    --bright-blue: #83a598;
+    --bright-magenta: #d3869b;
+    --bright-cyan: #8ec07c;
+    --bright-white: #fbf1c7;
+}

static/css/colour/gruvbox-light.css

@@ -0,0 +1,23 @@
+/* gruvbox light mode
+ * https://github.com/morhetz/gruvbox
+ */
+:root {
+    --black: #3c3836;
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --magenta: #8f3f71;
+    --cyan: #427b58;
+    --white: #fbf1c7;
+    --dark-black: #282828;
+    --dark-white: #f2e5bc;
+    --bright-black: #928374;
+    --bright-red: #cc241d;
+    --bright-green: #98971a;
+    --bright-yellow: #d79921;
+    --bright-blue: #458588;
+    --bright-magenta: #b16286;
+    --bright-cyan: #689d6a;
+    --bright-white: #f9f5d7;
+}

static/css/colour/light-mode.css

@@ -0,0 +1,7 @@
+:root {
+    --bg: var(--white);
+    --dark-bg: var(--dark-white);
+    --bright-bg: var(--bright-black);
+    --fg: var(--black);
+    --bright-fg: var(--bright-black);
+}

static/css/custom.css

@@ -0,0 +1 @@
+/* Override this file to customise the theme's CSS for your site */

static/css/footer.css

@@ -0,0 +1,7 @@
+.page__footer {
+    color: var(--bright-bg);
+}
+
+.page__footer p {
+    margin: 0;
+}

static/css/header.css

@@ -0,0 +1,18 @@
+/* Main menu */
+.main-nav ul {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0.25rem 0;
+}
+
+.main-nav li {
+    margin-left: 2.5rem;
+    text-transform: lowercase;
+}
+
+.main-nav li::marker {
+    content: "./";
+}
+

static/css/layout.css

@@ -0,0 +1,56 @@
+/* 1rem = 16px by default */
+
+.page {
+    max-width: 64rem;
+    margin: 1rem auto;
+    display: grid;
+    grid-template-areas: 
+      "header" 
+      "body" 
+      "aside" 
+      "footer";
+    grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */
+    grid-row-gap: 2rem;
+}
+
+@media (min-width: 45rem) {
+    .page {
+        grid-template-areas:
+          "header  header"
+          "body    aside"
+          "footer  footer";
+        grid-template-columns: minmax(0, 1fr) 15rem;
+        grid-column-gap: 2rem;
+    }
+}
+
+/* Header */
+.page__header {
+    grid-area: header;
+    display: flex;
+}
+
+.page__logo {
+    flex-shrink: 0;
+}
+
+.page__nav {
+    flex-grow: 1;
+}
+
+/* Body + aside */
+.page__body {
+    grid-area: body;
+    background-color: var(--bg);
+    outline: 1rem solid var(--bg);
+}
+
+.page__aside {
+    grid-area: aside;
+    color: var(--bright-bg);
+}
+
+/* Footer */
+.page__footer {
+    grid-area: footer;
+}

static/css/logo.css

@@ -0,0 +1,36 @@
+.page__logo {
+    padding: 0;
+    margin: 0;
+    font-weight: inherit;
+    color: var(--bg);
+}
+
+.page__logo:before {
+    content: none;
+}
+
+.page__logo-inner {
+    display: block;
+    background: var(--green);
+    padding: 0.25rem;
+}
+
+a.page__logo-inner:link, a.page__logo-inner:visited {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+a.page__logo-inner:hover,
+a.page__logo-inner:active {
+    background: var(--bright-green);
+}
+
+.page__logo-inner:before {
+    content: "[";
+    color: var(--bg);
+}
+
+.page__logo-inner:after {
+    content: "] $";
+    color: var(--bg);
+}

static/css/risotto.css

@@ -0,0 +1,11 @@
+@import 'typography.css';
+@import 'layout.css';
+@import 'header.css';
+@import 'logo.css';
+@import 'about.css';
+@import 'footer.css';
+
+body {
+    background-color: var(--dark-bg);
+    color: var(--fg);
+}

static/css/typography.css

@@ -0,0 +1,155 @@
+/* Fonts */
+:root {
+    --font-monospace: "Fira Mono", monospace;
+}
+
+body {
+    font-family: var(--font-monospace);
+    font-size: 16px;
+    line-height: 1.5rem;
+}
+
+/* Headings */
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+    font-size: 1rem;
+    margin: 1.5rem 0 0 0;
+    font-weight: 600;
+}
+
+h1+h2,
+h1+h3,
+h1+h4,
+h1+h5,
+h1+h6,
+h2+h3,
+h2+h4,
+h2+h5,
+h2+h6,
+h3+h4,
+h3+h5,
+h3+h6,
+h4+h5,
+h4+h6,
+h5+h6 {
+    margin: 0;
+}
+
+h1:before { content: "# "; }
+h2:before { content: "## "; }
+h3:before { content: "### "; }
+h4:before { content: "#### "; }
+h5:before { content: "##### "; }
+h6:before { content: "###### "; }
+
+h1:before, 
+h2:before, 
+h3:before, 
+h4:before, 
+h5:before, 
+h6:before {
+    color: var(--bright-bg);
+}
+
+h1:first-child {
+    margin-top: 0;
+}
+
+/* Paragraphs */
+p {
+    margin: 0 0 1.5rem 0;
+}
+
+/* Links */
+
+a:link, a:visited {
+    color: var(--fg);
+}
+
+a:hover, a:active {
+    color: var(--bright-fg);
+}
+
+/* Lists */
+ul {
+    margin: 1rem 0;
+    padding-left: 1.25rem;
+}
+
+ol {
+    margin: 1rem 0;
+    padding-left: 1.75rem;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin: 0;
+}
+
+ul li::marker {
+    content: '∗ ';
+    color: var(--bright-bg);
+}
+
+ol li::marker {
+    color: var(--bright-bg);
+}
+
+/* Blockquotes */
+blockquote {
+    position: relative;
+    margin-left: 1.5rem;
+}
+
+blockquote::before {
+    position: absolute;
+    left: -1.5rem;
+    content: ">";
+    color: var(--bright-bg);
+}
+
+.twitter-tweet::before {
+    content: "\f099";
+    font-family: "Font Awesome 5 Brands";
+    font-weight: 400;
+}
+
+/* Code */
+pre,
+code, 
+kbd {
+    overflow-x: scroll;
+    background: var(--dark-bg);
+    font-family: var(--font-monospace);
+    color: var(--bright-bg);
+}
+
+/* Emphasis */
+b,
+strong {
+    font-weight: 600;
+}
+
+/* Highlighting */
+::selection,
+mark {
+    background-color: var(--yellow);
+    color: var(--bg);
+}
+
+/* Other typographic elements */
+hr {
+    border: 0;
+}
+
+hr:after {
+    content: '---';
+    color: var(--bright-bg);
+}
+