Add initial version

This commit adds the first published version of the website including
the first blog post, Unix Domain Socket Forwarding with OpenSSH.

1 files changed, 303 insertions, 0 deletions

diff --git a/css/site.css b/css/site.css
new file mode 100644
index 0000000..05a3afa
--- /dev/null
+++ b/css/site.css
@@ -0,0 +1,303 @@
+:root {
+  --foreground-color: rgba(0, 0, 0, .8);
+  --background-color: rgb(255, 255, 255);
+  --link-color: rgb(33, 86, 165);
+  --accent-color: rgb(186, 57, 37);
+
+  --light-gray: rgba(0, 0, 0, .03);
+  --dark-gray: rgba(0, 0, 0, .3);
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+
+  font-family: "Dejavu Serif", serif;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+
+  color: var(--foreground-color);
+  background-color: var(--background-color);
+}
+
+body > header {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+body > main {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+}
+
+body > footer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+}
+
+body > header,
+body > footer {
+  display: inherit;
+  overflow-x: auto;
+
+  font-family: "Dejavu Sans", sans-serif;
+  color: var(--foreground-color);
+  background-color: var(--light-gray);
+}
+
+body > header nav ul,
+body > footer nav ul {
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+  max-width: 42em;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: flex-end;
+  list-style: none;
+}
+
+body > header nav ul li,
+body > footer nav ul li {
+  margin: 0;
+  padding: 0;
+}
+
+body > header nav a,
+body > footer nav a {
+  padding: 1em;
+
+  display: block;
+
+  color: inherit;
+  text-decoration: none;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.1em;
+
+  white-space: nowrap;
+}
+
+body > header nav a:hover,
+body > footer nav a:hover {
+  background: linear-gradient(
+      rgba(0, 0, 0, 0.2),
+      rgba(0, 0, 0, 0.2)
+    ), var(--light-gray);
+}
+
+body > header nav li:first-of-type {
+  margin-right: auto;
+}
+
+body > footer nav {
+  margin: 0 auto;
+}
+
+body > main {
+  margin: 0 auto;
+  padding: 0 1em 0 1em;
+  width: 100%;
+  max-width: 42em;
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Dejavu Sans", sans-serif;
+  /* color: var(--accent-color); */
+}
+
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a,
+h5 > a,
+h6 > a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+main > nav {
+  text-align: center;
+}
+
+main > nav > a + a {
+  margin-left: 2em;
+}
+
+nav a {
+  text-decoration: none;
+}
+
+article > h1,
+article > header {
+  text-align: center;
+}
+
+article header h1 {
+  margin-bottom: 0;
+}
+
+article header h1 + * {
+  margin-top: 0.5em;
+}
+
+:not(pre) > code {
+  background: var(--light-gray);
+  white-space: nowrap;
+}
+
+pre {
+  background: var(--light-gray) !important;
+  padding: 1em;
+  hyphens: none;
+  overflow-x: auto;
+  width: 100%;
+  box-sizing: border-box;
+  border-left: 2px var(--accent-color) solid;
+}
+
+code {
+  font-family: "DejaVu Sans Mono", monospace;
+  hyphens: none;
+}
+
+pre.numberLines > code {
+  counter-reset: line;
+}
+
+pre.numberLines > code > span {
+  counter-increment: line;
+}
+
+pre.numberLines > code > span::before {
+  display: inline-block;
+  /* FIXME: Align line numbers without fixed width. */
+  width: 2ch;
+  padding-right: 1em;
+
+  content: counter(line);
+  user-select: none;
+  text-align: right;
+}
+
+a {
+  color: var(--link-color);
+  hyphens: none;
+}
+
+p {
+  text-align: justify;
+  hyphens: auto;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 0.5em;
+  /* border-bottom: 1px solid var(--foreground-color); */
+}
+
+tr:nth-child(even) {
+  background-color: var(--light-gray);
+}
+
+caption {
+  caption-side: bottom;
+}
+
+li + li {
+  margin-top: 0.5em;
+}
+
+blockquote {
+  border-left: 2px var(--dark-gray) solid;
+  margin: 0 2em 0 2em;
+  padding: 0 0 0 1em;
+}
+
+svg.icon {
+  pointer-events: none;
+  width: 100%;
+  max-width: 1em;
+  height: 100%;
+  max-height: 1em;
+  fill: var(--foreground-color);
+}
+
+.home-page {
+  /* margin: auto; */
+  /* max-width: 32em; */
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+}
+
+.home-page > h1,
+.home-page > p {
+  text-align: center;
+}
+
+.blog-index {
+  list-style: none;
+  padding: 0;
+}
+.blog-index > li > a {
+  display: block;
+}
+.blog-index > li > time {
+  font-style: italic;
+  padding-right: 1em;
+}
+.blog-index > li > time::after {
+  content: ".";
+}
+.blog-index > li > p {
+  display: inline;
+}
+.blog-index > li + li {
+  padding-top: 1em;
+}
+@media (min-width: 42em) {
+  .blog-index {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    grid-gap: 0 1em;
+  }
+  .blog-index > li {
+    display: contents;
+  }
+  .blog-index > li > a {
+    grid-row: span 2;
+    grid-column: 2 / 3;
+  }
+  .blog-index > li > time {
+    grid-column: 1 / 2;
+    text-align: right;
+    font-style: initial;
+  }
+  .blog-index > li > time::after {
+    content: "";
+  }
+  .blog-index > li > p {
+    grid-column: 2 / 3;
+    display: block;
+  }
+}