add terminal theme

3 files changed, 184 insertions, 1 deletions

diff --git a/.eleventy.js b/.eleventy.js
new file mode 100644
index 0000000..5e9de02
--- /dev/null
+++ b/.eleventy.js
@@ -0,0 +1,3 @@
+module.exports = function(eleventyConfig) {
+	eleventyConfig.addPassthroughCopy("terminal.css")
+}
diff --git a/_includes/base.njk b/_includes/base.njk
index 96ad9ed..fbbdcdd 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -8,7 +8,7 @@ title: Starfall
 <meta charset=UTF-8>
 <meta name=robots content="noindex, nofollow">
 <meta name=viewport content="width=device-width, initial-scale=1">
-<!-- todo css -->
+<link rel=stylesheet href=/terminal.css>
 <!-- todo color picker -->
 
 <header>
diff --git a/terminal.css b/terminal.css
new file mode 100644
index 0000000..d8dc3bd
--- /dev/null
+++ b/terminal.css
@@ -0,0 +1,180 @@
+@font-face {
+    font-family: "DejaVu Sans Mono";
+    src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf");
+}
+:root {
+    --fg: #90ff90;
+	--shadow: 0 0 3px #80ffc066, 0 0 5px #0f63;
+    --link: #3e3;
+    --visited: #b9ffb0;
+
+    --bg: #1d2021;
+	--bg2: black;
+	--selection: #466639;
+
+    --font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
+    --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace;
+    --font-accent: var(--font-mono);
+}
+.green {
+    --fg: #86ff86; /* hue 120, contrast 13:1 */
+	--shadow: 0 0 3px #80ffc066, 0 0 5px #0f63;
+    --link: #42f042; /* hue 120, contrast 10.75:1 */
+    --visited: #b7ffaf; /* hue 114, contrast 14:1 */
+
+    --bg: #1d2021;
+	--selection: #466639;
+}
+.purple {
+	--fg: #f099ff; /* hue 291, contrast 8:1 */
+	--shadow: 0 0 3px #ff80f166, 0 0 5px #f0f3;
+	--link: #ff96e2; /* hue 317, contrast 8:1 */
+	--visited: #ff82d2; /* hue 322, contrast 7:1 */
+
+	--bg: #291f33;
+	--selection: #663963;
+}
+.cyan {
+	--fg: #90ffff; /* hue 180, contrast 14:1 */
+	--shadow: 0 0 3px #0ff6, 0 0 5px #0ff3;
+	--link: #00f5f5; /* hue 180, contrast 12:1 */
+	--visited: #83baf1; /* hue 210, contrast 8:1 */
+
+    --bg: #1d2021;
+	--selection: #466639;
+}
+
+/* UTILITY CLASSES */
+.clearfix::after, section::after { clear:both; display:block; content: ""; }
+.inline { display:inline }
+/* MAIN STYLES*/
+html {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+body {
+    background-color: var(--bg);
+    background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%);
+    background-size: 100% 3px;
+    color: var(--fg);
+    text-shadow: var(--shadow);
+    font: 100%/1.6 var(--font-body);
+    margin: auto;
+    max-width: 75ch;
+    word-spacing: .05em;
+}
+::selection {
+	background: var(--selection);
+	color: white;
+	text-shadow: none;
+}
+a {
+    color: var(--link);
+}
+a:visited {
+    color: var(--visited);
+}
+a:hover,
+a:focus {
+    text-decoration: none;
+}
+code,
+pre {
+    font: 100%/1.25 var(--font-mono);
+}
+footer {
+    font: 75%/1.25 var(--font-accent);
+}
+h1 {
+    font: bold 200%/1 var(--font-accent);
+    margin: 0.5em 0 0 0;
+    border-bottom: 0.25em solid;
+}
+h1::after {
+    content: "█";
+    display: inline-block;
+    animation: blink 2.4s steps(2) infinite;
+}
+@keyframes blink {
+    0% {
+        opacity: 0;
+    }
+}
+@media(prefers-reduced-motion: reduce) {
+	h1::after {
+		animation: none !important;
+		opacity: 50%;
+	}
+}
+h2 {
+    font: bold 141%/1 var(--font-accent);
+    margin: 0.4em 0;
+}
+h3 {
+	font: bold 117%/1 var(--font-accent);
+}
+/* NAVIGATION */
+header > nav > ul {
+    font: 100%/1.5 var(--font-accent);
+    list-style-type: none;
+    margin: 0 0 0.4em 0;
+    padding: 0;
+}
+header > nav > ul > li {
+    display: inline;
+}
+header > nav > ul > li > a {
+    padding: 0.4em;
+}
+header > nav a.active {
+    background: var(--fg);
+    color: var(--bg);
+}
+/* SECTION */
+section {
+    border-bottom: 1px solid;
+}
+/* IMAGES */
+figure {
+	border: 1px solid;
+	margin: auto;
+	padding: 0.4em;
+	text-align: center;
+	width: min-content;
+}
+figure.fullwidth {
+	width: initial;
+}
+figure.fullwidth > img {
+	max-width: 100%;
+}
+/* DETAILS */
+details {
+	border: 1px solid;
+	padding: 0.4em;
+}
+/* TABLES */
+table {
+	margin: 0.4em;
+}
+tr:nth-of-type(odd) {
+	background: var(--bg);
+}
+tr:nth-of-type(even) {
+	background: var(--bg2);
+}
+tr td:first-child {
+    white-space: nowrap;
+}
+td {
+	padding: 0 0.4em;
+}
+th {
+	border: 1px solid;
+	padding: 0 0.4em;
+}
+table.center-cells td,
+table.center-cells th {
+	text-align: center;
+}