moved to hugo

12 files changed, 443 insertions, 0 deletions

diff --git a/public/css/about.css b/public/css/about.css
new file mode 100644
index 0000000..6c12ba4
--- /dev/null
+++ b/public/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;
+}
diff --git a/public/css/colour/dark-mode.css b/public/css/colour/dark-mode.css
new file mode 100644
index 0000000..386f99d
--- /dev/null
+++ b/public/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);
+}
diff --git a/public/css/colour/gruvbox-dark.css b/public/css/colour/gruvbox-dark.css
new file mode 100644
index 0000000..24c4218
--- /dev/null
+++ b/public/css/colour/gruvbox-dark.css
@@ -0,0 +1,29 @@
+/* gruvbox dark mode
+ * https://github.com/morhetz/gruvbox
+ */
+:root {
+    --dark-black: #1d2021;
+    --black: #282828;
+    --bright-black: #928374;
+    
+    --white: #ebdbb2;
+    --bright-white: #fbf1c7;
+    
+    --red: #cc241d;
+    --green: #98971a;
+    --yellow: #d79921;
+    --blue: #458588;
+    --magenta: #b16286;
+    --cyan: #689d6a;
+    --orange: #d65d0e;
+    --gray: #928374;
+    
+    --bright-red: #fb4934;
+    --bright-green: #b8bb26;
+    --bright-yellow: #fabd2f;
+    --bright-blue: #83a598;
+    --bright-magenta: #d3869b;
+    --bright-cyan: #8ec07c;
+    --bright-orange: #fe8019;
+    --bright-gray: #a89984;
+}
diff --git a/public/css/colour/gruvbox-light.css b/public/css/colour/gruvbox-light.css
new file mode 100644
index 0000000..cff8fa3
--- /dev/null
+++ b/public/css/colour/gruvbox-light.css
@@ -0,0 +1,30 @@
+/* gruvbox light mode
+ * https://github.com/morhetz/gruvbox
+ */
+:root {
+    --dark-black: #282828;
+    --black: #3c3836;
+    --bright-black: #928374;
+    
+    --white: #fbf1c7;
+    --bright-white: #f9f5d7;
+
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --magenta: #8f3f71;
+    --cyan: #427b58;
+    --orange: #af3a03;
+    --gray: #7c6f64;
+
+    --dark-white: #f2e5bc;
+    --bright-red: #cc241d;
+    --bright-green: #98971a;
+    --bright-yellow: #d79921;
+    --bright-blue: #458588;
+    --bright-magenta: #b16286;
+    --bright-cyan: #689d6a;
+    --bright-orange: #d65d0e;
+    --bright-gray: #928374;
+}
diff --git a/public/css/colour/light-mode.css b/public/css/colour/light-mode.css
new file mode 100644
index 0000000..3ac2827
--- /dev/null
+++ b/public/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);
+}
diff --git a/public/css/custom.css b/public/css/custom.css
new file mode 100644
index 0000000..71949ed
--- /dev/null
+++ b/public/css/custom.css
@@ -0,0 +1 @@
+/* Override this file to customise the theme's CSS for your site */
diff --git a/public/css/footer.css b/public/css/footer.css
new file mode 100644
index 0000000..3c5d6e9
--- /dev/null
+++ b/public/css/footer.css
@@ -0,0 +1,7 @@
+.page__footer {
+    color: var(--bright-bg);
+}
+
+.page__footer p {
+    margin: 0;
+}
diff --git a/public/css/header.css b/public/css/header.css
new file mode 100644
index 0000000..875201b
--- /dev/null
+++ b/public/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: "./";
+}
+
diff --git a/public/css/layout.css b/public/css/layout.css
new file mode 100644
index 0000000..da8027e
--- /dev/null
+++ b/public/css/layout.css
@@ -0,0 +1,57 @@
+/* 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);
+    box-shadow: 0 0 0 1rem var(--bg);
+    overflow-wrap: break-word;
+}
+
+.page__aside {
+    grid-area: aside;
+    color: var(--bright-bg);
+}
+
+/* Footer */
+.page__footer {
+    grid-area: footer;
+}
diff --git a/public/css/logo.css b/public/css/logo.css
new file mode 100644
index 0000000..be24b86
--- /dev/null
+++ b/public/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);
+}
diff --git a/public/css/risotto.css b/public/css/risotto.css
new file mode 100644
index 0000000..3c2969d
--- /dev/null
+++ b/public/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);
+}
diff --git a/public/css/typography.css b/public/css/typography.css
new file mode 100644
index 0000000..5a2c044
--- /dev/null
+++ b/public/css/typography.css
@@ -0,0 +1,214 @@
+/* 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: 0 0 1.5rem 0;
+    padding-left: 1.25rem;
+}
+
+ol {
+    margin: 0 0 1.5rem 0;
+    padding-left: 1.75rem;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin: 0;
+}
+
+ul li::marker {
+    content: '∗\00A0';
+    color: var(--bright-bg);
+}
+
+ol li::marker {
+    color: var(--bright-bg);
+}
+
+dt {
+  margin: 0;
+  font-weight: bold;
+}
+
+dd {
+  margin: 0 0 0 1.5rem;
+  font-style: italic;
+}
+
+dd + dt {
+  margin-top: 1.5rem;
+}
+
+dl {
+  margin: 0 0 1.5rem 0;
+}
+
+/* Blockquotes */
+blockquote {
+    position: relative;
+    margin: 0 0 1.5rem 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,
+samp {
+    background: var(--dark-bg) !important;
+    font-family: var(--font-monospace);
+    color: var(--bright-bg);
+}
+
+pre {
+    overflow-x: auto;
+    padding: 1.5rem;
+    margin: 0 0 1.5rem 0;
+}
+
+/* Emphasis */
+b,
+strong {
+    font-weight: 600;
+}
+
+/* Highlighting */
+::selection,
+mark {
+    background-color: var(--yellow);
+    color: var(--bg);
+}
+
+/* Other typographic elements */
+hr {
+    border: 0;
+    margin-bottom: 1.5rem;
+}
+
+hr:after {
+    content: '---';
+    color: var(--bright-bg);
+}
+
+
+/* Prevent super/sub from affecting line height */
+sup, sub {
+    vertical-align: baseline;
+    position: relative;
+    top: -0.25rem;
+    font-size: unset;
+}
+sub { 
+    top: 0.25rem; 
+}
+
+/* Tables */
+table {
+    border-spacing: 0;
+    margin: 0 0 1.5rem 0;
+    overflow-wrap: anywhere;
+}
+th, td {
+    padding: 0 .75rem;
+    vertical-align: top;
+}
+th:first-child, td:first-child {
+    padding-left: 0;
+}
+th {
+    text-align: inherit;
+}
+
+/* Figures */
+img {
+    max-width: 100%;
+    height: auto;
+}