From 4c92965ac3971234f11596006896c9fcb2b50e9a Mon Sep 17 00:00:00 2001
From: woodcox <64870518+woodcox@users.noreply.github.com>
Date: Mon, 15 Jan 2024 06:59:25 +0000
Subject: [PATCH] Improve styling

---
 .eleventy.js => eleventy.config.js   |   0
 package.json                         |   4 +-
 src/_data/buildmeta.json             |   2 +-
 src/_data/manifest.json              |  12 +-
 src/_data/meta.js                    |  10 +-
 src/_includes/components/menu.webc   |   9 +-
 src/_includes/components/tester.webc |   7 -
 src/index.md                         |  16 -
 src/sass/style.scss                  | 105 -----
 src/style/style.scss                 | 563 +++++++++++++++++++++++++++
 src/webc.md                          |   7 -
 11 files changed, 584 insertions(+), 151 deletions(-)
 rename .eleventy.js => eleventy.config.js (100%)
 delete mode 100644 src/_includes/components/tester.webc
 delete mode 100644 src/sass/style.scss
 create mode 100644 src/style/style.scss
 delete mode 100644 src/webc.md

diff --git a/.eleventy.js b/eleventy.config.js
similarity index 100%
rename from .eleventy.js
rename to eleventy.config.js
diff --git a/package.json b/package.json
index 0ed261c9..7e646f53 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "main": ".eleventy.js",
   "scripts": {
     "clean": "node config/clean/clean.js",
-    "dev:sass": "sass --no-source-map --watch src/sass:./dist/app",
+    "dev:sass": "sass --no-source-map --watch src/style:./dist/app",
     "dev:eleventy": "ELEVENTY_ENV=dev npx @11ty/eleventy --serve --incremental --output=dist",
-    "build:sass": "sass --no-source-map src/sass:./dist/app",
+    "build:sass": "sass --no-source-map src/style:./dist/app",
     "build:eleventy": "npx @11ty/eleventy",
     "prefix": "lightningcss --browserslist ./dist/app/*.css -o ./dist/app/*.css",
     "start": "NODE_ENV=dev conc --kill-others 'npm:dev:*'",
diff --git a/src/_data/buildmeta.json b/src/_data/buildmeta.json
index a3b043a6..a963a883 100644
--- a/src/_data/buildmeta.json
+++ b/src/_data/buildmeta.json
@@ -1 +1 @@
-{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":51942,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27913,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":3872,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"cjs"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":1038,"imports":[]}},"outputs":{"dist/app/app-AB2A76W7.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":7272},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":3727},"src/scripts/jsx/app.jsx":{"bytesInOutput":226}},"bytes":11676},"dist/app/fetch-4UMXTQRU.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":9032},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":4364},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":557}},"bytes":14722},"dist/app/is-land-TXS7GROR.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":3959},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":4344},"dist/app/style-UUXDUJOW.min.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":1038}},"bytes":1039}}}
\ No newline at end of file
+{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":51942,"imports":[],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27913,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":3872,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":1661,"imports":[]}},"outputs":{"dist/app/app.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":145092},"dist/app/app.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54853},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29123},"src/scripts/jsx/app.jsx":{"bytesInOutput":488}},"bytes":84626},"dist/app/fetch.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":145732},"dist/app/fetch.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54853},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29123},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":929}},"bytes":85071},"dist/app/is-land.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":14661},"dist/app/is-land.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":7742},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":7836},"dist/app/style.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":2779},"dist/app/style.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":1318}},"bytes":1381}}}
\ No newline at end of file
diff --git a/src/_data/manifest.json b/src/_data/manifest.json
index 62796edf..1c13e110 100644
--- a/src/_data/manifest.json
+++ b/src/_data/manifest.json
@@ -1,6 +1,10 @@
 {
-  "app": "app-AB2A76W7.min.js",
-  "fetch": "fetch-4UMXTQRU.min.js",
-  "is-land": "is-land-TXS7GROR.min.js",
-  "style": "style-UUXDUJOW.min.css"
+  "app.map": "app.js.map",
+  "app": "app.js",
+  "fetch.map": "fetch.js.map",
+  "fetch": "fetch.js",
+  "is-land.map": "is-land.js.map",
+  "is-land": "is-land.js",
+  "style.map": "style.css.map",
+  "style": "style.css"
 }
\ No newline at end of file
diff --git a/src/_data/meta.js b/src/_data/meta.js
index 45cb4695..d68bc8be 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -7,16 +7,16 @@ module.exports = {
       href: '/'
     },
     {
-      text: 'SolidJS',
-      href: '/solid/'
+      text: 'About',
+      href: '/about/'
     },
     {
-      text: 'WebC',
-      href: '/webc/'
+      text: 'Inline',
+      href: '/inline/'
     },
     {
       text: 'Islands',
-      href: '/islands/'
+      href: '/island/'
     }
   ]
 }
diff --git a/src/_includes/components/menu.webc b/src/_includes/components/menu.webc
index 2850afde..5b43208e 100644
--- a/src/_includes/components/menu.webc
+++ b/src/_includes/components/menu.webc
@@ -1,6 +1,7 @@
-<h2>Menu</h2>{{meta.environment}}
 <template webc:type="11ty" 11ty:type="liquid">
-  <ul>{% for link in meta.nav %}{% capture navhref %}{{ link.href | url }}{% endcapture %}
-    <li><a href="{{ link.href | url }}">{{ link.text }}</a></li>{% endfor %}
-  </ul>
+  <nav>
+    <ul>{% for link in meta.nav %}
+      <li><a href="{{ link.href | url }}">{{ link.text }}</a></li>{% endfor %}
+    </ul>
+  </nav>
 </template>
\ No newline at end of file
diff --git a/src/_includes/components/tester.webc b/src/_includes/components/tester.webc
deleted file mode 100644
index a1e89f0c..00000000
--- a/src/_includes/components/tester.webc
+++ /dev/null
@@ -1,7 +0,0 @@
-HTML testing of webc. This is awesome.
-
-<style webc>
-tester {
-  color: red;
-}
-</style>
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index fb469bc4..7c34fd5d 100644
--- a/src/index.md
+++ b/src/index.md
@@ -3,9 +3,6 @@ layout: default.html
 title: 11ty-solid-base
 ---
 
-## Menu
-- [WebC]({{ '/webc/' }})
-
 <menu></menu>
 
 ## The counter
@@ -45,22 +42,9 @@ render(() => <Solidify />, document.getElementById('shorty'))
   </template>
 </is-land> 
 
-## The webC component
-
-<tester></tester>
-
-
 ## SolidJS
 A more interesting example
 
 <p id="wordapp"></p>
 <script type="module" src="{{ '/app/fetch.js' | hash }}"></script>
 
-
-To do: 
- - A more complex webC example making use of:
- - bundling of webC with Solid-js
- - webC with scoped css
- - Solid-js web components/progressive enhancement example
-
-Look at [11ty docs](https://www.11ty.dev/docs/languages/webc/) & [11ty.rocks](https://11ty.rocks/).
diff --git a/src/sass/style.scss b/src/sass/style.scss
deleted file mode 100644
index d1d05261..00000000
--- a/src/sass/style.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-:root {
-  --font-sans: 'Fira Code', monospace;
-  --font-mono: 'Fira Code', monospace;
-  --tx-1: #ffffff;
-  --tx-2: #eeeeee;
-  --bg-1: #010000;
-  --bg-2: #002700;
-  --bg-3: hsla(101, 76%, 36%, 0.836);
-  --lk-1: #00ff00;
-  --lk-2: #00c200;
-  --lk-tx: #000000;
-  --ac-1: #00ff00;
-  --ac-tx: #000000;
-}
-
-* {
-  /* Reset margins and padding */
-  margin: 0;
-  padding: 0;
-}
-
-html,
-input,
-select,
-button {
-  /* Set body font family and some finicky elements */
-  font-family: var(--font-sans);
-}
-
-body {
-  /* Center body in page */
-  margin: 0 auto;
-  max-width: 750px;
-  padding: 2rem;
-  border-radius: 6px;
-  overflow-x: hidden;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  background: var(--bg-1);
-
-  /* Main body text */
-  color: var(--tx-2);
-  font-size: 1.03rem;
-  line-height: 1.5;
-}
-
-dl,
-ol,
-p,
-pre,
-ul {
-  /* Margins for elements */
-  margin-bottom: 1rem;
-}
-
-header {
-  background: var(--bg-2);
-  border-bottom: 1px solid var(--bg-3);
-  padding: 2rem 1.5rem;
-
-  /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
-
-  margin: -2rem calc(50% - 50vw) 2rem;
-  padding-left: calc(50vw - 50%);
-  padding-right: calc(50vw - 50%);
-}
-
-header h1,
-header h2 {
-  padding-bottom: 0;
-  border-bottom: 0;
-}
-
-header > *:first-child {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-header > *:last-child {
-  margin-bottom: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1;
-  color: var(--tx-1);
-  padding-top: 0.875rem;
-}
-
-h1,
-h2,
-h3 {
-  color: var(--tx-1);
-  padding-bottom: 2px;
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--bg-2);
-}
-
-li {
-  margin: 2rem;
-}
diff --git a/src/style/style.scss b/src/style/style.scss
new file mode 100644
index 00000000..2723a5b1
--- /dev/null
+++ b/src/style/style.scss
@@ -0,0 +1,563 @@
+/* MVP.css v1.14 - https://github.com/andybrewer/mvp */
+
+:root {
+  --active-brightness: 0.85;
+  --border-radius: 5px;
+  --box-shadow: 2px 2px 10px;
+  --color-accent: #118bee15;
+  --color-bg: #fff;
+  --color-bg-secondary: #e9e9e9;
+  --color-link: #118bee;
+  --color-secondary: #920de9;
+  --color-secondary-accent: #920de90b;
+  --color-shadow: #f4f4f4;
+  --color-table: #118bee;
+  --color-text: #000;
+  --color-text-secondary: #999;
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  --hover-brightness: 1.2;
+  --justify-important: center;
+  --justify-normal: left;
+  --line-height: 1.5;
+  --width-card: 285px;
+  --width-card-medium: 460px;
+  --width-card-wide: 800px;
+  --width-content: 1080px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[color-mode='user'] {
+    --color-accent: #0097fc4f;
+    --color-bg: #333;
+    --color-bg-secondary: #555;
+    --color-link: #0097fc;
+    --color-secondary: #e20de9;
+    --color-secondary-accent: #e20de94f;
+    --color-shadow: #bbbbbb20;
+    --color-table: #0097fc;
+    --color-text: #f7f7f7;
+    --color-text-secondary: #aaa;
+  }
+}
+
+/* Background */
+html {
+  --s: 82px; /* control the size */
+  --c1: #b2b2b2;
+  --c2: #ffffff;
+  --c3: #d9d9d9;
+  --_g: var(--c3) 0 120deg, #0000 0;
+  background: conic-gradient(from -60deg at 50% calc(100% / 3), var(--_g)),
+    conic-gradient(from 120deg at 50% calc(200% / 3), var(--_g)),
+    conic-gradient(
+      from 60deg at calc(200% / 3),
+      var(--c3) 60deg,
+      var(--c2) 0 120deg,
+      #0000 0
+    ),
+    conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
+    linear-gradient(
+      90deg,
+      var(--c1) calc(100% / 6),
+      var(--c2) 0 50%,
+      var(--c1) 0 calc(500% / 6),
+      var(--c2) 0
+    );
+  background-size: calc(1.732 * var(--s)) var(--s);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* 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: var(--font-family);
+  line-height: var(--line-height);
+  margin: 0;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+footer,
+header,
+main {
+  margin: 0 auto;
+  max-width: var(--width-content);
+  padding: 3rem 1rem;
+}
+
+hr {
+  background-color: var(--color-bg-secondary);
+  border: none;
+  height: 1px;
+  margin: 4rem 0;
+  width: 100%;
+}
+
+section {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--justify-important);
+}
+
+section img,
+article img {
+  max-width: 100%;
+}
+
+section pre {
+  overflow: auto;
+}
+
+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);
+}
+
+[hidden] {
+  display: none;
+}
+
+/* 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: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+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;
+  position: relative;
+  text-align: left;
+}
+
+/* Nav Dropdown */
+nav ul li:hover ul {
+  display: block;
+}
+
+nav ul li ul {
+  background: var(--color-bg);
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  display: none;
+  height: auto;
+  left: -2px;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  top: 1.7rem;
+  white-space: nowrap;
+  width: auto;
+  z-index: 1;
+}
+
+nav ul li ul::before {
+  /* fill gap above to make mousing over them easier */
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.5rem;
+  height: 0.5rem;
+}
+
+nav ul li ul li,
+nav ul li ul li a {
+  display: block;
+}
+
+/* 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: 0 0.5rem;
+}
+
+details {
+  margin: 1.3rem 0;
+}
+
+details summary {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: var(--line-height);
+  text-wrap: balance;
+}
+
+mark {
+  padding: 0.1rem;
+}
+
+ol li,
+ul li {
+  padding: 0.2rem 0;
+}
+
+p {
+  margin: 0.75rem 0;
+  padding: 0;
+  width: 100%;
+}
+
+pre {
+  margin: 1rem 0;
+  max-width: var(--width-card-wide);
+  padding: 1rem 0;
+}
+
+pre code,
+pre samp {
+  display: block;
+  max-width: var(--width-card-wide);
+  padding: 0.5rem 2rem;
+  white-space: pre-wrap;
+}
+
+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-link);
+  display: inline-block;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+a:active {
+  filter: brightness(var(--active-brightness));
+}
+
+a:hover {
+  filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a em,
+a i,
+a strong,
+button,
+input[type='submit'] {
+  border-radius: var(--border-radius);
+  display: inline-block;
+  font-size: medium;
+  font-weight: bold;
+  line-height: var(--line-height);
+  margin: 0.5rem 0;
+  padding: 1rem 2rem;
+}
+
+button,
+input[type='submit'] {
+  font-family: var(--font-family);
+}
+
+button:active,
+input[type='submit']:active {
+  filter: brightness(var(--active-brightness));
+}
+
+button:hover,
+input[type='submit']:hover {
+  cursor: pointer;
+  filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button,
+input[type='submit'] {
+  background-color: var(--color-link);
+  border: 2px solid var(--color-link);
+  color: var(--color-bg);
+}
+
+a em,
+a i {
+  border: 2px solid var(--color-link);
+  border-radius: var(--border-radius);
+  color: var(--color-link);
+  display: inline-block;
+  padding: 1rem 2rem;
+}
+
+article aside a {
+  color: var(--color-secondary);
+}
+
+/* Images */
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+figure img {
+  max-width: 100%;
+}
+
+figure figcaption {
+  color: var(--color-text-secondary);
+}
+
+/* Forms */
+button:disabled,
+input:disabled {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
+}
+
+button[disabled]:hover,
+input[type='submit'][disabled]:hover {
+  filter: none;
+}
+
+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[type='checkbox'],
+input[type='radio'] {
+  display: inline-block;
+}
+
+input[type='checkbox'] + label,
+input[type='radio'] + label {
+  display: inline-block;
+  font-weight: normal;
+  position: relative;
+  top: 1px;
+}
+
+input[type='range'] {
+  padding: 0.4rem 0;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  margin-bottom: 1rem;
+  padding: 0.4rem 0.8rem;
+}
+
+input[type='text'],
+textarea {
+  width: calc(100% - 1.6rem);
+}
+
+input[readonly],
+textarea[readonly] {
+  background-color: var(--color-bg-secondary);
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 0.2rem;
+}
+
+/* Popups */
+dialog {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  z-index: 999;
+}
+
+/* Tables */
+table {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  border-spacing: 0;
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 0;
+  white-space: nowrap;
+}
+
+table td,
+table th,
+table tr {
+  padding: 0.4rem 0.8rem;
+  text-align: var(--justify-important);
+}
+
+table thead {
+  background-color: var(--color-table);
+  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);
+}
+
+table tr:nth-child(even) {
+  background-color: var(--color-accent);
+}
+
+/* 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;
+}
+
+/* Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(202, 202, 232) auto;
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgb(202, 202, 232);
+  border-radius: 10px;
+}
diff --git a/src/webc.md b/src/webc.md
deleted file mode 100644
index d09aeb57..00000000
--- a/src/webc.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: default.html
-title: Webc Example
----
-
-## Menu
-- [Liquid/Nunjunks]({{'/' | url }})