∆

futureofcoding · Aug 22, 2024 · 51d202f · 51d202f
1 parent f4c6ea3
commit 51d202f
Show file tree

Hide file tree

Showing 10 changed files with 405 additions and 142 deletions.
diff --git a/assets/404.html b/assets/404.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+
+  <main>
+
+    <header>
+      <a id="logo" href="/">
+        <img alt="Future of Coding" width="300" height="300" src="/wiki.svg">
+      </a>
+      <nav>
+        <a id="edit" href="https://github.com/futureofcoding/wiki/edit/main/{{path}}">
+          <span>Edit This Page</span>
+          <img width="14" height="13" src="/edit.svg" alt="">
+        </a>
+        <a href="/">Home</a>
+        <a href="/all">List of All Pages</a>
+      </nav>
+    </header>
+
+    This page doesn't exist.
+
+    <a href="https://github.com/futureofcoding/wiki/new/master/_pages?filename=pages%2FMy-file-name.md&value=---%0Atitle:%20A%20New%20Page%0Acontributors:%20Your%20Name%0A---">Create it on GitHub</a>
+
+  </main>
+
+  <footer>
+    <p class="cc0">
+      This wiki is dedicated to the public domain, marked with
+      <a href="https://creativecommons.org/publicdomain/zero/1.0/" rel="license noopener noreferrer">
+        CC0 1.0
+        <img width="22" height="22" src="/cc.svg" alt="">
+        <img width="22" height="22" src="/zero.svg" alt="">
+      </a>
+    </p>
+    <p>
+      Built by the <a href="https://futureofcoding.org">Future of Coding</a> community.
+    </p>
+    <a class="initials" href="https://futureofcoding.org">
+      <img alt="" width="40" height="40" src="/initials.svg">
+    </a>
+  </footer>
+
+</body>
+</html>
diff --git a/assets/styles.css b/assets/styles.css
@@ -19,6 +19,7 @@
   --main-bg: white;
   --main-shadow: #00000008;
   --text-color: var(--dark-grey);
+  --code-color: hsl(160, 40%, 30%);
   --link-color: var(--mid-green);
   --nav-link-hover-bg: hsl(160, 50%, 90%);
   --nav-link-border: hsl(160, 40%, 80%);
@@ -32,8 +33,9 @@
   :root {
     --page-bg: hsl(160, 50%, 4%);
     --main-bg: hsl(160, 40%, 9%);
-    --main-shadow: #000;
+    --main-shadow: #0009;
     --text-color: hsl(160, 30%, 90%);
+    --code-color: hsl(160, 10%, 75%);
     --link-color: var(--green);
     --nav-link-hover-bg: var(--dark-grey);
     --nav-link-border: #0003;
@@ -43,22 +45,6 @@
   }
 }
 
-/* Colorful theme */
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --page-bg: hsl(160, 20%, 4%);
-    --main-bg: hsl(240, 20%, 9%);
-    --main-shadow: #000;
-    --text-color: hsl(160, 30%, 90%);
-    --link-color: hsl(38, 100%, 50%);
-    --nav-link-hover-bg: hsl(220, 50%, 15%);
-    --nav-link-border: #0003;
-    --edit-link-color: hsl(160, 0%, 100%);
-    --edit-link-bg: hsl(220, 70%, 40%);
-    --edit-link-border: #0003;
-  }
-} */
-
 /* Wide layout */
 @media(min-width: 801px) {
   :root {
@@ -70,7 +56,7 @@
 
 body {
   margin: 0;
-  text-align: center; /* center <main> within <body> */
+  text-align: center;
   font-size: 16px;
   line-height: 1.5;
   font-family: system-ui, sans-serif;
@@ -92,7 +78,7 @@ main {
       "header article"
       "aside article";
     grid-template-rows: auto 1fr; /* Pull the aside up towards the top */
-    grid-template-columns: var(--logo-width) auto; /* Set the header/aside width */
+    grid-template-columns: var(--logo-width) minmax(auto, 48em); /* Set the header/aside width */
     gap: var(--pad);
     margin: var(--pad);
     border-radius: 3px;
@@ -106,6 +92,7 @@ main {
       "article"
       "aside";
     gap: var(--double-pad);
+    width: 100%;
     padding-bottom: var(--double-pad);
   }
 }
@@ -132,12 +119,12 @@ header {
 }
 
 @media(max-width: 800px) {
-  #logo {
+  a#logo {
     width: clamp(5em, 25vw, 10em);
   }
 }
 
-#logo img {
+a#logo img {
   width: 100%;
   height: auto;
   border-radius: 1px; /* For consistency with <a> style */
@@ -179,7 +166,7 @@ nav a:focus {
   border-bottom-color: var(--nav-link-border);
 }
 
-#edit {
+a#edit {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -191,7 +178,7 @@ nav a:focus {
 }
 
 @media(max-width: 800px) {
-  #edit img {
+  a#edit img {
     order: -1;
   }
 }
@@ -231,7 +218,6 @@ aside section ul {
 
 article {
   grid-area: article;
-  max-width: 48em;
 }
 
 footer {
@@ -240,13 +226,15 @@ footer {
   font-weight: 200;
 }
 
-footer .cc0 img {
-  margin-right: .2em;
+footer a {
+  display: inline-block;
+}
+
+footer p.cc0 img {
   vertical-align: -.3em;
 }
 
-footer .initials {
-  display: inline-block;
+footer a.initials {
   width: 40px;
   height: 40px;
   border-radius: 20px;
@@ -268,16 +256,19 @@ title {
   text-wrap: balance;
 }
 
-h1, h2 {
-  border-bottom: 1.5px solid currentcolor;
-}
+article h1 { font-size: clamp(1.6em, 5vw, 2.5em); }
+article h2 { font-size: clamp(1.4em, 4vw, 2em); }
+article h3 { font-size: clamp(1.2em, 3vw, 1.5em); }
+
+h1 { border-bottom: 2px solid currentcolor }
+h2 { border-bottom: 1px solid currentcolor }
 
 h1, h2, h3 {
   font-weight: 300;
 }
 
 img {
-  vertical-align: middle; /* Don't add space under images */
+  vertical-align: middle; /* Remove default space under images */
 }
 
 a {
@@ -296,6 +287,32 @@ a:focus {
   outline: solid 3px var(--link-color);
 }
 
+code {
+  padding: .15em .3em;
+  border-radius: 4px;
+  font-family: ui-monospace, monospace;
+  line-height: 1.3;
+  background: #000c;
+  color: var(--code-color);
+}
+
+pre {
+  padding: .6em 1em;
+  border-radius: 6px;
+  background: #000c;
+  color:
+}
+pre code {
+  padding: 0;
+  background: none;
+}
+
+blockquote {
+  margin: 0;
+  padding-left: .5em;
+  border-left: 2px solid currentcolor;
+}
+
 ul {
   list-style-type: square;
 }