Zach's git repos / zachdecook.com
source code for html website at https://zachdecook.com
* Home Page: Replace projects, replicate existing layout
Browse Source
Zach DeCook 2020-03-28
parent 21aa817 · commit 85940e8
Diffstat
-rw-r--r--index.md48
-rw-r--r--index2.css29
-rwxr-xr-xscript.sh3
-rw-r--r--shared/mvp/mvp-dark.css383
-rw-r--r--shared/mvp/mvp.css384
5 files changed, 833 insertions, 14 deletions
diff --git a/index.md b/index.md
index 7b56c6a..95648f7 100644
--- a/index.md
+++ b/index.md
@@ -1,32 +1,52 @@
----
-header-includes:
- <meta name="theme-color" content="#A2DFCA">
- <link rel="stylesheet" type="text/css" href="/posts/common.css"/>
- <link rel="stylesheet" type="text/css" href="https://zachdecook.com/shared/w3css/4/w3.css"/>
-title: |
- Zach DeCook: "That's so wizard"
----
+<link rel="stylesheet" type="text/css" href="https://zachdecook.com/shared/mvp/mvp-dark.css"/>
+<link rel="stylesheet" type="text/css" href="/index2.css"/>
+<nav>
+
+* [**Songbooks**](https://songs.zachdecook.com)
+
+</nav>
<header>
![Rare photo of cold Zach: beard sold separately!](https://zachdecook.com/cards/cc2018/winter.jpg)
# Zach DeCook
-</header>
-<nav>
-
-</nav>
-<main>
+</header><main>
## Intro
What is a "Zach DeCook"? Most days software developer,
with interests in music, maths, and many other things.
He's possibly best defined by the projects he spends time on.
-You can find the best of these on GitLab, and others on Github.
## Selected Projects
+<section>
+<aside>
+
+### [Tight Change](/posts/tightchange)
+
+Coin-Holding device in card form-factor.
+
+[![Shaking the device won't loose the coins](/posts/tightchange/shaking.gif)](/posts/tightchange)
+</aside>
+<aside>
+
+### [FossMoji](/fossmoji)
+
+Procedurally generated free software SVGinOT Emoji font
+
+[![A collection of very happy emojis](/fossmoji.png)](/fossmoji)
+</aside>
+<aside>
+
+### [MIDI hardware projects](/posts/ststech)
+
+A collaboration of controllers that I programmed.
+
+[![The "Combo breaker"](/posts/ststech.png)](/posts/ststech)
+</aside>
+</section>
## Other Projects
diff --git a/index2.css b/index2.css
new file mode 100644
index 0000000..21685f3
--- /dev/null
+++ b/index2.css
@@ -0,0 +1,29 @@
+:root{
+ --color: #6cb3de;
+ --color-secondary: #366d9d;
+ --line-height: 110%;
+}
+@font-face {
+ font-family: "ZachsSharpie";
+ src: url("ZachsSharpie.ttf") format("truetype");
+}
+h1{
+font-family:"ZachsSharpie";
+font-size: 5em;
+filter: drop-shadow(0 0 7px white);
+}
+header img {
+ max-width: 300px;
+}
+section aside img
+{
+ width: 100%;
+}
+/* Overrides for mvp.css */
+nav {margin-bottom: initial;}
+nav ul { margin: initial;}
+body { padding: initial;}
+footer,header,main{padding: 0; margin: 1rem;}
+h1, h2, h3, h4, h5, h6 { margin: 1rem 0;}
+a b, a em, a i, a strong, button {margin: .5rem;}
+
diff --git a/script.sh b/script.sh
new file mode 100755
index 0000000..fdd11bf
--- /dev/null
+++ b/script.sh
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+pandoc -f commonmark index.md -t html5 -s > index.html
diff --git a/shared/mvp/mvp-dark.css b/shared/mvp/mvp-dark.css
new file mode 100644
index 0000000..0351e4d
--- /dev/null
+++ b/shared/mvp/mvp-dark.css
@@ -0,0 +1,383 @@
+/* MVP.css v1.1 - https://github.com/andybrewer/mvp */
+
+:root {
+ --border-radius: 5px;
+ --box-shadow: 2px 2px 10px;
+ --color: #0097fc;
+ --color-accent: #0097fc4f;
+ --color-bg: #333;
+ --color-bg-secondary: #555;
+ --color-secondary: #e20de9;
+ --color-secondary-accent: #e20de94f;
+ --color-shadow: #bbbbbb20;
+ --color-text: #f7f7f7;
+ --color-text-secondary: #aaa;
+ --hover-brightness: 1.2;
+ --justify-important: center;
+ --justify-normal: left;
+ --line-height: 150%;
+ --width-card: 285px;
+ --width-card-medium: 460px;
+ --width-card-wide: 800px;
+ --width-content: 1080px;
+}
+
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --color: #118bee;
+ --color-accent: #118bee0b;
+ --color-bg: #fff;
+ --color-bg-secondary: #e9e9e9;
+ --color-secondary: #920de9;
+ --color-secondary-accent: #920de90b;
+ --color-shadow: #f4f4f4;
+ --color-text: #000;
+ --color-text-secondary: #999;
+ }
+}
+
+/* Layout */
+article aside {
+ background: var(--color-secondary-accent);
+ border-left: 4px solid var(--color-secondary);
+ padding: 0.01rem 0.8rem;
+}
+
+body {
+ background: var(--color-bg);
+ color: var(--color-text);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ line-height: var(--line-height);
+ margin: 0;
+ overflow-x: hidden;
+ padding: 1rem 0;
+}
+
+footer,
+header,
+main {
+ margin: 0 auto;
+ max-width: var(--width-content);
+ padding: 2rem 1rem;
+}
+
+hr {
+ background-color: var(--color-bg-secondary);
+ border: none;
+ height: 1px;
+ margin: 4rem 0;
+}
+
+section {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: var(--justify-important);
+}
+
+section aside {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin: 1rem;
+ padding: 1.25rem;
+ width: var(--width-card);
+}
+
+section aside:hover {
+ box-shadow: var(--box-shadow) var(--color-bg-secondary);
+}
+
+section aside img {
+ max-width: 100%;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+ padding-top: 0;
+}
+
+header {
+ text-align: var(--justify-important);
+}
+
+header a b,
+header a em,
+header a i,
+header a strong {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
+header nav img {
+ margin: 1rem 0;
+}
+
+section header {
+ padding-top: 0;
+ width: 100%;
+}
+
+/* Nav */
+nav {
+ align-items: center;
+ display: flex;
+ font-weight: bold;
+ justify-content: space-between;
+ margin-bottom: 7rem;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+nav ul li {
+ display: inline-block;
+ margin: 0 0.5rem;
+}
+
+/* Typography */
+code,
+samp {
+ background-color: var(--color-accent);
+ border-radius: var(--border-radius);
+ color: var(--color-text);
+ display: inline-block;
+ margin: 0 0.1rem;
+ padding: 0rem 0.5rem;
+ text-align: var(--justify-normal);
+}
+
+details {
+ margin: 1.3rem 0;
+}
+
+details summary {
+ font-weight: bold;
+}
+
+details summary:focus {
+ outline: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: var(--line-height);
+}
+
+mark {
+ padding: 0.1rem;
+}
+
+ol li,
+ul li {
+ padding: 0.2rem 0;
+}
+
+p {
+ margin: 0.75rem 0;
+ padding: 0;
+}
+
+pre {
+ white-space: normal;
+}
+
+pre code,
+pre samp {
+ display: block;
+ margin: 1rem 0;
+ max-width: var(--width-card-wide);
+ padding: 1rem;
+}
+
+small {
+ color: var(--color-text-secondary);
+}
+
+sup {
+ background-color: var(--color-secondary);
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ font-size: xx-small;
+ font-weight: bold;
+ margin: 0.2rem;
+ padding: 0.2rem 0.3rem;
+ position: relative;
+ top: -2px;
+}
+
+/* Links */
+a {
+ color: var(--color-secondary);
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a:hover {
+ filter: brightness(var(--hover-brightness));
+ text-decoration: underline;
+}
+
+a b,
+a em,
+a i,
+a strong,
+button {
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-size: medium;
+ font-weight: bold;
+ margin: 1.5rem 0 0.5rem 0;
+ padding: 1rem 2rem;
+}
+
+button:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button {
+ background-color: var(--color);
+ border: 2px solid var(--color);
+ color: var(--color-bg);
+}
+
+a em,
+a i {
+ border: 2px solid var(--color);
+ border-radius: var(--border-radius);
+ color: var(--color);
+ display: inline-block;
+ padding: 1rem 2rem;
+}
+
+/* Images */
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+figure img {
+ max-width: 100%;
+}
+
+figure figcaption {
+ color: var(--color-text-secondary);
+}
+
+/* Forms */
+form {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: block;
+ max-width: var(--width-card-wide);
+ min-width: var(--width-card);
+ padding: 1.5rem;
+ text-align: var(--justify-normal);
+}
+
+form header {
+ margin: 1.5rem 0;
+ padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+ display: block;
+ font-size: inherit;
+ max-width: var(--width-card-wide);
+}
+
+input,
+select,
+textarea {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ padding: 0.4rem 0.8rem;
+}
+
+label {
+ font-weight: bold;
+ margin-bottom: 0.2rem;
+}
+
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+ outline: none;
+}
+
+/* Tables */
+table {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border-spacing: 0;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ padding: 0;
+}
+
+table td,
+table th,
+table tr {
+ padding: 0.4rem 0.8rem;
+ text-align: var(--justify-important);
+}
+
+table thead {
+ background-color: var(--color);
+ border-collapse: collapse;
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ margin: 0;
+ padding: 0;
+}
+
+table thead th:first-child {
+ border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+ border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+ text-align: var(--justify-normal);
+}
+
+/* Quotes */
+blockquote {
+ display: block;
+ font-size: x-large;
+ line-height: var(--line-height);
+ margin: 1rem auto;
+ max-width: var(--width-card-medium);
+ padding: 1.5rem 1rem;
+ text-align: var(--justify-important);
+}
+
+blockquote footer {
+ color: var(--color-text-secondary);
+ display: block;
+ font-size: small;
+ line-height: var(--line-height);
+ padding: 1.5rem 0;
+}
+
+/* Custom styles */
diff --git a/shared/mvp/mvp.css b/shared/mvp/mvp.css
new file mode 100644
index 0000000..0617b81
--- /dev/null
+++ b/shared/mvp/mvp.css
@@ -0,0 +1,384 @@
+/* MVP.css v1.1 - https://github.com/andybrewer/mvp */
+
+:root {
+ --border-radius: 5px;
+ --box-shadow: 2px 2px 10px;
+ --color: #118bee;
+ --color-accent: #118bee0b;
+ --color-bg: #fff;
+ --color-bg-secondary: #e9e9e9;
+ --color-secondary: #920de9;
+ --color-secondary-accent: #920de90b;
+ --color-shadow: #f4f4f4;
+ --color-text: #000;
+ --color-text-secondary: #999;
+ --hover-brightness: 1.2;
+ --justify-important: center;
+ --justify-normal: left;
+ --line-height: 150%;
+ --width-card: 285px;
+ --width-card-medium: 460px;
+ --width-card-wide: 800px;
+ --width-content: 1080px;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color: #0097fc;
+ --color-accent: #0097fc4f;
+ --color-bg: #333;
+ --color-bg-secondary: #555;
+ --color-secondary: #e20de9;
+ --color-secondary-accent: #e20de94f;
+ --color-shadow: #bbbbbb20;
+ --color-text: #f7f7f7;
+ --color-text-secondary: #aaa;
+ }
+}
+*/
+
+/* Layout */
+article aside {
+ background: var(--color-secondary-accent);
+ border-left: 4px solid var(--color-secondary);
+ padding: 0.01rem 0.8rem;
+}
+
+body {
+ background: var(--color-bg);
+ color: var(--color-text);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ line-height: var(--line-height);
+ margin: 0;
+ overflow-x: hidden;
+ padding: 1rem 0;
+}
+
+footer,
+header,
+main {
+ margin: 0 auto;
+ max-width: var(--width-content);
+ padding: 2rem 1rem;
+}
+
+hr {
+ background-color: var(--color-bg-secondary);
+ border: none;
+ height: 1px;
+ margin: 4rem 0;
+}
+
+section {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: var(--justify-important);
+}
+
+section aside {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ margin: 1rem;
+ padding: 1.25rem;
+ width: var(--width-card);
+}
+
+section aside:hover {
+ box-shadow: var(--box-shadow) var(--color-bg-secondary);
+}
+
+section aside img {
+ max-width: 100%;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+ padding-top: 0;
+}
+
+header {
+ text-align: var(--justify-important);
+}
+
+header a b,
+header a em,
+header a i,
+header a strong {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
+header nav img {
+ margin: 1rem 0;
+}
+
+section header {
+ padding-top: 0;
+ width: 100%;
+}
+
+/* Nav */
+nav {
+ align-items: center;
+ display: flex;
+ font-weight: bold;
+ justify-content: space-between;
+ margin-bottom: 7rem;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+nav ul li {
+ display: inline-block;
+ margin: 0 0.5rem;
+}
+
+/* Typography */
+code,
+samp {
+ background-color: var(--color-accent);
+ border-radius: var(--border-radius);
+ color: var(--color-text);
+ display: inline-block;
+ margin: 0 0.1rem;
+ padding: 0rem 0.5rem;
+ text-align: var(--justify-normal);
+}
+
+details {
+ margin: 1.3rem 0;
+}
+
+details summary {
+ font-weight: bold;
+}
+
+details summary:focus {
+ outline: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: var(--line-height);
+}
+
+mark {
+ padding: 0.1rem;
+}
+
+ol li,
+ul li {
+ padding: 0.2rem 0;
+}
+
+p {
+ margin: 0.75rem 0;
+ padding: 0;
+}
+
+pre {
+ white-space: normal;
+}
+
+pre code,
+pre samp {
+ display: block;
+ margin: 1rem 0;
+ max-width: var(--width-card-wide);
+ padding: 1rem;
+}
+
+small {
+ color: var(--color-text-secondary);
+}
+
+sup {
+ background-color: var(--color-secondary);
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ font-size: xx-small;
+ font-weight: bold;
+ margin: 0.2rem;
+ padding: 0.2rem 0.3rem;
+ position: relative;
+ top: -2px;
+}
+
+/* Links */
+a {
+ color: var(--color-secondary);
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a:hover {
+ filter: brightness(var(--hover-brightness));
+ text-decoration: underline;
+}
+
+a b,
+a em,
+a i,
+a strong,
+button {
+ border-radius: var(--border-radius);
+ display: inline-block;
+ font-size: medium;
+ font-weight: bold;
+ margin: 1.5rem 0 0.5rem 0;
+ padding: 1rem 2rem;
+}
+
+button:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button {
+ background-color: var(--color);
+ border: 2px solid var(--color);
+ color: var(--color-bg);
+}
+
+a em,
+a i {
+ border: 2px solid var(--color);
+ border-radius: var(--border-radius);
+ color: var(--color);
+ display: inline-block;
+ padding: 1rem 2rem;
+}
+
+/* Images */
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+figure img {
+ max-width: 100%;
+}
+
+figure figcaption {
+ color: var(--color-text-secondary);
+}
+
+/* Forms */
+form {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow) var(--color-shadow);
+ display: block;
+ max-width: var(--width-card-wide);
+ min-width: var(--width-card);
+ padding: 1.5rem;
+ text-align: var(--justify-normal);
+}
+
+form header {
+ margin: 1.5rem 0;
+ padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+ display: block;
+ font-size: inherit;
+ max-width: var(--width-card-wide);
+}
+
+input,
+select,
+textarea {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+ padding: 0.4rem 0.8rem;
+}
+
+label {
+ font-weight: bold;
+ margin-bottom: 0.2rem;
+}
+
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+ outline: none;
+}
+
+/* Tables */
+table {
+ border: 1px solid var(--color-bg-secondary);
+ border-radius: var(--border-radius);
+ border-spacing: 0;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ padding: 0;
+}
+
+table td,
+table th,
+table tr {
+ padding: 0.4rem 0.8rem;
+ text-align: var(--justify-important);
+}
+
+table thead {
+ background-color: var(--color);
+ border-collapse: collapse;
+ border-radius: var(--border-radius);
+ color: var(--color-bg);
+ margin: 0;
+ padding: 0;
+}
+
+table thead th:first-child {
+ border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+ border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+ text-align: var(--justify-normal);
+}
+
+/* Quotes */
+blockquote {
+ display: block;
+ font-size: x-large;
+ line-height: var(--line-height);
+ margin: 1rem auto;
+ max-width: var(--width-card-medium);
+ padding: 1.5rem 1rem;
+ text-align: var(--justify-important);
+}
+
+blockquote footer {
+ color: var(--color-text-secondary);
+ display: block;
+ font-size: small;
+ line-height: var(--line-height);
+ padding: 1.5rem 0;
+}
+
+/* Custom styles */