~tychi/code-mirror-shield

973c8194e627b0335c5f3ebaab42e84396f52506 — Tyler Childs 5 months ago c3cf0f3
feature: add preview functionality and add to quick start
M README.md => README.md +8 -0
@@ 9,3 9,11 @@ This is a digital garden. It is yours.
You _can_ touch this. And click it. Or **clack** it.

Any machine that'll survive past [y2k38](https://y2k38.info) will do.

To get started, play with the following examples:

* [hello-world](/hello-world.html)
* [hello-universe](/hello-universe.html)
* [me](/me)
* [style](/style.css)
* [editor](/editor.js)

M public/editor.bundle.js => public/editor.bundle.js +3 -0
@@ 17892,6 17892,9 @@ function mount1($, flags) {
            if (editors[target.id]) return;
            target.innerHTML = `
				<nav class="action-bar">
          <a href="/public${target.id}" style="float: right">
            Preview
           </a>
					<button data-recover data-id="${target.id}">
						Recover
					</button>

M public/editor.js => public/editor.js +3 -0
@@ 46,6 46,9 @@ function mount($, flags) {

			target.innerHTML = `
				<nav class="action-bar">
          <a href="/public${target.id}" style="float: right">
            Preview
           </a>
					<button data-recover data-id="${target.id}">
						Recover
					</button>

A public/me => public/me +76 -0
@@ 0,0 1,76 @@
<!DOCTYPE html author="mailto:email@tychi.me" license="BSD 3-Clause">
<html lang="en">
  <head>
    <title>An internet artist in their natural habitat</title>
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
      /* Latin Basic, as defined by Google Fonts */
      @font-face {
        font-family: 'Fraunces';
        font-display: swap;
        font-weight: 100 900;
        src: url('fonts/Fraunces--latin_basic.woff2') format('woff2');
        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
      }

      html {
        background: dodgerblue;
        font-family: 'Fraunces', 'Avenir', 'Avenir Next','Helvetica Neue','Segoe UI', 'Verdana', sans-serif;
        font-size: 1.3rem;
        font-variation-settings: "opsz" 9, "wght" 300, "SOFT" 100, "WONK" 1;
        line-height: 1.25;
      }
      body {
        background: white;
        border-radius: 1rem;
        margin: 2rem auto;
        max-width: 42rem;
        padding: 1rem;
      }

      main {
        padding: 1rem;
      }
      img {
        border: 1rem solid orange;
        border-radius: 1rem 1rem 0 0;
        box-sizing: border-box;
        display: block;
        max-width: 100%;
      }
      summary { font-weight: bold; font-size: 2rem; text-align: center; }
      details {
        background: white;
        border-radius: 1rem;
        margin: 1rem;
        padding: 1rem;
      }
      main h1,
      main p { margin: 1rem 0; }
    </style>
  </head>
  <body>
    <a href="https://thelanding.page">
      <img src="padres-selfie.jpg" alt="A photograph of the artist" />
    </a>
    <main>
      <h1>TyChi is an internet artist.<br/>Like Spider-Man, he slings web stuff.</h1>
      <p>
        His in progress work is best compared to the film <a href="https://en.wikipedia.org/wiki/Monsters%2C_Inc.">Monsters, Inc.</a>. A bit spoilery, but the flick charts the progression of two societies living in a dystopia and their path towards a utopia. The monsters use the fear of the innocent to power their burgeoning, swanky society. In the end, it turned out that laughter was the best medicine and the humans no longer needed to be afraid of the artificially scary monsters.
      </p>

      <p>
        The current state of this work is <a href="https://musings.tychi.me">a blog</a> that outlines what it is like living in a society fueled by fear-induced machines powered by greed. The ending is being written in real-time, but it should be all of us laughing the "Metaverse" into the ground if these clowns want to seriously take the world wide web on for a second round.
      </p>

      <h2>Contact</h2>
      <p>
        You can catch him lounging around the <a href="https://smallcamp.art/@tychi">SmallCamp</a> fire or directly via xmpp at taco@chat.1998.social.
      </p>

      <p>
        Email also works. yo [at] tychi.me is best for establishing initial contact if nothing else makes sense here.
      </p>
    </main>
  </body>
</html>

A public/me.html => public/me.html +183 -0
@@ 0,0 1,183 @@
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Starter Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      :root {
        --bg: cornsilk;
        --fg: saddlebrown;
        --card-bg: rgba(255,255,255,.85);
        --card-accent: rgba(0,0,0,.25);
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: rgba(0,0,0,.85);
          --fg: cornsilk;
        }
      }
      html {
        height: 100%;
        padding: 1rem;
      }
      body {
        background: var(--bg);
        color: var(--fg);
        height: 100%;
        max-width: 35rem;
        font-size: 18px;
        line-height: 30px;
        margin: 0 auto;
      }

      a {
        background: cornsilk;
        padding: .25rem;
      }

      footer {
        margin: 4rem 0 2rem;
      }

      img {
        display: flex;
        max-width: 100%;
      }

      code {
        display: block;
        padding: 1rem;
      }

      polaroid {
        background: var(--card-bg);
        border: 1px solid var(--card-accent);
        display: flex;
        margin: 1rem 0;
        padding: 1rem 1rem 3rem;
      }

      .sans-serif {
        font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
      }

      .serif {
        font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
      }

      .mono {
        font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
      }

      /*
        Best Practice from A11y Project
        https://a11yproject.com/posts/how-to-hide-content/
      */
      .visually-hidden {
        position: absolute !important;
        height: 1px; 
        width: 1px;
        overflow: hidden;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap; /* added line */
      }

      .breadcrumb {
        text-align: right;
      }
    </style>
  </head>
  <body class="serif">
    <a id="page-top"  class="visually-hidden"></a>
    <header>
      <nav>
        <a href="#content" class="visually-hidden">Skip Navigation</a>
        <h3>Menu</h3>
        <ul>
          <li><a href="#about">About Starter Site</a></li>
          <li><a href="#quick-start">Quick Start</a></li>
          <li><a href="#next-steps">Next Steps</a></li>
        </ul>
      </nav>
      <a id="content" class="visually-hidden"></a>
      <polaroid>
				<video width="100%" controls>
					<source src="https://user.fm/files/v2-50418402196995341f92799c34d5ed6a/recording_20211225-135812.webm" type="video/mp4">
				</video>
      </polaroid>
      <p class="breadcrumb">You are: <strong>Home</strong>
        <a href="#page-top">View Menu</a></p>
      <a name="about"></a>
      <h1>About Starter Site</h1>
    </header>
    <main>
      <p>The <em>Starter Site</em> is a handcrafted website starter template. Built for any skill level. To last until the end of the internet.</p>
      <ul>
        <li>Litigation Proof: ADA compliant</li>
        <li>Secure Mode: Runs with JavaScript disabled</li>
        <li>Scalable: Built for any size entity... person, organization, or otherwise</li>
        <li>Simple: A single file</li>
      </ul>
      <a name="quick-start"></a>
      <h2>Quick Start</h2>
      <p>
        Follow these three instructions. If successful, you will then have a website on the internet and a better understanding of web technology.
      </p>
      <ol>
        <li>
          Download this starter site (e.g. `<code>curl <script>document.write(window.location.origin + window.location.pathname)</script> --output my-first-website.html</code>`)
        </li>
        <li>
          Make any personalization changes. Maybe try colors from <a href="https://randoma11y.com">random a11y</a> or <a href="https://colours.neilorangepeel.com/">a color guide</a>.
        </li>
        <li>
          Upload your starter site (e.g. `<code>curl -F'file=@my-first-website.html' http://0x0.st</code>`)
        </li>
      </ol>
      <p>
        The file that is your website is now on a server. An internet domain (e.g. tychi.me) resolves to the server and the pathname (e.g. /starter-site) resolves to the file. Combined, this is a website.
      </p>
      <p>
        <strong>Note:</strong> The website renders with only basic content and no images, styling, or scripts. This is a security feature to protect 0x0.st from abuse. To render the website with images, styling, and scripts, follow the next steps below.
      </p>
      <a name="next-steps"></a>
      <h2>Next Steps</h2>
      <p>
        To have full control over your website, you will need three things:
      </p>
      <dl>
        <dt>Domain Name</dt>
        <dd>
          Addresses like .com, .org, etc can be leased from registrars. They allow for your website to be human identifiable.
        </dd>
        <dt>Internet Utilities</dt>
        <dd>
          Your server will need to be online 24/7 to process requests at any time from any where in the world. You will need both electricity and internet access.
        </dd>
        <dt>Server</dt>
        <dd>A computer capable of connecting to the internet and responding to requests for content</dd>
      </dl>
      <p>
        Then, upload your website to your server, point your domain name at the server, and turn everything on.
      </p>
      <h3>Extra Credit</h3>
      <p>
        Any computer is capable of launching applications when turned on. Specifically, we can open a web browser, or a webview, on boot and reference a website.
      </p>
      <p>
        Follow the cryptic instructions on this <a href="https://ncity.executiontime.pub/">Cyberpunk 2077 easter egg</a> to become a Netrunner capable of running a secure cyberdeck with your website as the home screen!
      </p>
      <a href="#page-top">Go to top</a>
    </main>
    <footer class="mono">
      designed w/&hearts; by (@|~)<a href="https://tychi.me">tychi</a> (CC BY-SA 4.0)
    </footer>
    <script type="text/javascript">
      (function() {
        location.hash = '#content';
      })();
    </script>
  </body>
</html>

A public/padres-selfie.jpg => public/padres-selfie.jpg +0 -0
A public/style.css => public/style.css +730 -0
@@ 0,0 1,730 @@
:root {
	--bg: cornsilk;
	--fg: saddlebrown;
	--card-bg: rgba(255,255,255,.85);
	--card-accent: rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: rgba(0,0,0,.85);
		--fg: cornsilk;
	}
}

html {
	--border-radius: 4px;

	--red1: hsla(355, 100%, 8%, 1);
	--red2: hsla(355, 75%, 22%, 1);
	--red3: hsla(355, 85%, 36%, 1);
	--red4: hsla(355, 100%, 55%, 1);
	--red5: hsla(355, 85%, 64%, 1);
	--red6: hsla(355, 85%, 78%, 1);
	--red7: hsla(355, 100%, 92%, 1);

	--flame1: hsla(15, 100%, 8%, 1);
	--flame2: hsla(15, 75%, 22%, 1);
	--flame3: hsla(15, 85%, 36%, 1);
	--flame4: hsla(15, 95%, 50%, 1);
	--flame5: hsla(15, 85%, 64%, 1);
	--flame6: hsla(15, 85%, 78%, 1);
	--flame7: hsla(15, 100%, 92%, 1);

	--orange1: hsla(30, 100%, 8%, 1);
	--orange2: hsla(30, 75%, 22%, 1);
	--orange3: hsla(30, 85%, 36%, 1);
	--orange4: hsla(30, 100%, 50%, 1);
	--orange5: hsla(30, 85%, 64%, 1);
	--orange6: hsla(30, 85%, 78%, 1);
	--orange7: hsla(30, 100%, 92%, 1);

	--amber1: hsla(45, 100%, 8%, 1);
	--amber2: hsla(45, 75%, 22%, 1);
	--amber3: hsla(45, 85%, 36%, 1);
	--amber4: hsla(45, 100%, 50%, 1);
	--amber5: hsla(45, 85%, 64%, 1);
	--amber6: hsla(45, 85%, 78%, 1);
	--amber7: hsla(45, 100%, 92%, 1);

	--yellow1: hsla(60, 100%, 8%, 1);
	--yellow2: hsla(60, 75%, 22%, 1);
	--yellow3: hsla(60, 85%, 36%, 1);
	--yellow4: hsla(60, 100%, 50%, 1);
	--yellow5: hsla(60, 85%, 64%, 1);
	--yellow6: hsla(60, 85%, 78%, 1);
	--yellow7: hsla(60, 100%, 92%, 1);

	--chartruese1: hsla(75, 100%, 8%, 1);
	--chartruese2: hsla(75, 75%, 22%, 1);
	--chartruese3: hsla(75, 85%, 36%, 1);
	--chartruese4: hsla(75, 100%, 50%, 1);
	--chartruese5: hsla(75, 85%, 64%, 1);
	--chartruese6: hsla(75, 85%, 78%, 1);
	--chartruese7: hsla(75, 100%, 92%, 1);

	--green1: hsla(120, 100%, 8%, 1);
	--green2: hsla(120, 75%, 22%, 1);
	--green3: hsla(120, 85%, 36%, 1);
	--green4: hsla(120, 100%, 50%, 1);
	--green5: hsla(120, 85%, 64%, 1);
	--green6: hsla(120, 85%, 78%, 1);
	--green7: hsla(120, 100%, 92%, 1);

	--aqua1: hsla(160, 100%, 8%, 1);
	--aqua2: hsla(160, 75%, 22%, 1);
	--aqua3: hsla(160, 85%, 36%, 1);
	--aqua4: hsla(160, 100%, 50%, 1);
	--aqua5: hsla(160, 85%, 64%, 1);
	--aqua6: hsla(160, 85%, 78%, 1);
	--aqua7: hsla(160, 100%, 92%, 1);

	--blue1: hsla(200, 100%, 8%, 1);
	--blue2: hsla(200, 75%, 22%, 1);
	--blue3: hsla(200, 85%, 36%, 1);
	--blue4: hsla(200, 100%, 50%, 1);
	--blue5: hsla(200, 85%, 64%, 1);
	--blue6: hsla(200, 85%, 78%, 1);
	--blue7: hsla(200, 100%, 92%, 1);

	--indigo1: hsla(230, 100%, 8%, 1);
	--indigo2: hsla(230, 75%, 22%, 1);
	--indigo3: hsla(230, 75%, 36%, 1);
	--indigo4: hsla(230, 80%, 55%, 1);
	--indigo5: hsla(230, 65%, 64%, 1);
	--indigo6: hsla(230, 85%, 78%, 1);
	--indigo7: hsla(230, 100%, 92%, 1);

	--violet1: hsla(270, 100%, 8%, 1);
	--violet2: hsla(270, 75%, 22%, 1);
	--violet3: hsla(270, 85%, 36%, 1);
	--violet4: hsla(270, 100%, 55%, 1);
	--violet5: hsla(270, 85%, 64%, 1);
	--violet6: hsla(270, 85%, 78%, 1);
	--violet7: hsla(270, 100%, 92%, 1);

	--fuschia1: hsla(290, 100%, 8%, 1);
	--fuschia2: hsla(290, 75%, 22%, 1);
	--fuschia3: hsla(290, 85%, 36%, 1);
	--fuschia4: hsla(290, 100%, 55%, 1);
	--fuschia5: hsla(290, 85%, 64%, 1);
	--fuschia6: hsla(290, 85%, 78%, 1);
	--fuschia7: hsla(290, 100%, 92%, 1);

	--magenta1: hsla(330, 100%, 8%, 1);
	--magenta2: hsla(330, 75%, 22%, 1);
	--magenta3: hsla(330, 85%, 36%, 1);
	--magenta4: hsla(330, 100%, 55%, 1);
	--magenta5: hsla(330, 85%, 64%, 1);
	--magenta6: hsla(330, 85%, 78%, 1);
	--magenta7: hsla(330, 100%, 92%, 1);

	--silver1: hsla(180, 10%, 2%, 1);
	--silver2: hsla(180, 10%, 18%, 1);
	--silver3: hsla(180, 10%, 34%, 1);
	--silver4: hsla(180, 10%, 50%, 1);
	--silver5: hsla(180, 10%, 66%, 1);
	--silver6: hsla(180, 10%, 82%, 1);
	--silver7: hsla(180, 10%, 98%, 1);

	--color-primary-tint1: hsl(350, 80%, 60%);
	--color-primary: hsl(350, 80%, 45%);
	--color-primary-shade1: hsl(350, 80%, 35%);
	--color-accent-tint1: hsl(170, 80%, 60%);
	--color-accent: hsl(170, 80%, 45%);
	--color-accent-shade1: hsl(170, 80%, 35%);
	--color-link: hsl(230, 60%, 50%);
	--color-link-visited: hsl(290, 60%, 50%);
	--color-link-hover: hsl(230, 80%, 60%);
	--color-link-active: hsl(350, 60%, 50%);
	--color-neutral-tint4: hsl(170, 10%, 98%);
	--color-neutral-tint3: hsl(170, 10%, 94%);
	--color-neutral-tint2: hsl(170, 10%, 85%);
	--color-neutral-tint1: hsl(170, 10%, 68%);
	--color-neutral: hsl(170, 10%, 55%);
	--color-neutral-shade1: hsl(170, 10%, 41%);
	--color-neutral-shade2: hsl(170, 10%, 30%);
	--color-neutral-shade3: hsl(170, 10%, 18%);
	--color-neutral-shade4: hsl(170, 10%, 2%);
	--focus-outline: 4rem dotted var(--flame-4);
	--focus-outline-offset: 4rem;
	--font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: .5px;
}

html {
	height: 100%;
	padding: 1rem;
}

body {
	background: var(--bg);
	color: var(--fg);
	height: 100%;
	max-width: 35rem;
	font-size: 18px;
	font: font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
	line-height: 30px;
	margin: 0 auto;
}

body {
	font-size: 36rem;
	line-height: 48rem;
}

* {
	border: 0;
	font: inherit;
	margin: 0;
	padding: 0;
	text-rendering: geometricPrecision;
}

:focus {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}

html {
	overflow-x: hidden;
}

html,
body {
	box-sizing: border-box;
	min-height: 100%;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 48rem 0;
}

h1 {
	font-size: 128rem;
	font-weight: 700;
	line-height: 144rem;
	margin-bottom: 96rem;
}

h2 {
	font-size: 112rem;
	line-height: 144rem;
}

h3 {
	font-size: 72rem;
	font-weight: 700;
	line-height: 96rem;
}

h4 {
	font-size: 60rem;
	font-weight: 700;
}

h5 {
	font-weight: 700;
}

p {
	margin-bottom: 48rem;
}

form {
	margin: 48rem 0;
}

pre,
code,
samp,
kbd {
	background-color: var(--flame7);
	font-size: var(--font-size);
	color: var(--flame2);
	font-family: var(--font-mono);
	line-height: 1;
}

code,
samp,
kbd {
	border-radius: var(--border-radius);
	overflow-y: hidden;
	overflow-x: auto;
	padding: 8rem;
}

pre {
	border-radius: var(--border-radius);
	line-height: var(--line-height);
	overflow-y: hidden;
	overflow-x: auto;
	padding: 24rem;
	margin: 0 0 48rem;
}

pre code,
pre samp,
pre kbd {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

a:link {
	color: var(--color-link);
}

a:visited {
	color: var(--color-link-visited);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

a:active {
	color: var(--color-link-active);
}

img,
video {
	max-width: 100%;
	vertical-align: top;
}

hr {
	height: 96rem;
	margin-bottom: 48rem;
	position: relative;
}

hr::before {
	background-color: var(--flame6);
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}

ol,
ul {
	margin: 0 0 48rem 48rem;
}

ol {
	list-style-type: decimal;
}

ol ol {
	margin-bottom: 0;
}

ul {
	list-style-type: disc;
}

ul ul {
	margin-bottom: 0;
}

dt {
	font-style: italic;
}

dd {
	margin-left: 48rem;
}

blockquote {
	margin: 0 0 48rem 24rem;
	border-left: 6rem solid var(--flame1);
	padding: 48rem 24rem;
}

blockquote p:last-child {
	margin-bottom: 0;
}

figure {
	margin: 0 auto 48rem;
}

small,
sub,
sup,
caption,
figcaption {
	font-size: 32rem;
	vertical-align: top;
}

sub,
sup {
	position: relative;
}

sub {
	top: 16rem;
}

sup {
	bottom: 16rem;
}

caption,
figcaption {
	font-style: italic;
	text-align: center;
}

rem,
cite,
i {
	font-style: italic;
}

strong,
var,
b {
	font-weight: bold;
}

q::before {
	content: "'";
}

q::after {
	content: "'";
}

q > q {
	font-style: italic;
}

dfn,
abbr {
	border-bottom: 3rem dotted var(--flame2);
	cursor: default;
}

table {
	border-radius: var(--border-radius);
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 48rem;
	width: 100%;
}

table th {
	text-align: left;
}

table th,
table td {
	padding: 0 12rem;
}

input,
label,
select,
button,
textarea {
	color: var(--fg);
	display: block;
	padding: 24rem;
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

label {
	color: var(--blue2);
	padding: 0;
}

.button {
	--border-color: transparent;
	--border-color-hover: transparent;
	--border-thickness: 4rem;
	--background-color: var(--flame3);
	--background-color-hover: var(--flame4);
	--text-color: var(--flame7);
	--text-color-hover: var(--flame6);

	align-items: center;
	align-content: center;
	background-color: var(--background-color);
	border: var(--border-thickness) solid var(--border-color);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	color: var(--text-color);
	cursor: pointer;
	display: inline-block;
	font-size: var(--font-size);
	justify-content: center;
	line-height: 48rem;
	max-width: 100%;
	min-height: 96rem;
	padding: 20rem 48rem;
	text-align: center;
	transition-duration: 250ms;
	transition-property: all;
	user-select: none;
	width: auto;
	vertical-align: middle;
}

.button::-moz-focus-inner {
	border: 0;
}

.button:link,
.button:visited {
	color: var(--text-color);
	text-decoration: none;
}

.button:focus,
.button:hover {
	background-color: var(--background-color-hover);
	border-color: var(--border-color-hover);
	color: var(--text-color-hover);
}

.button:active {
	background-color: var(--background-color);
	color: var(--text-color);
}

.button:disabled {
	opacity: .5;
	pointer-events: none;
}

.button--outlined {
	--background-color: transparent;
	--background-color-hover: var(--flame7);
	--border-color: var(--flame3);
	--border-color-hover: var(--flame4);
	--text-color: var(--flame7);
}

.button--secondary {
	--background-color: var(--blue7);
	--background-color-hover: var(--blue6);
	--border-color: var(--blue2);
	--border-color-hover: var(--blue1);
	--text-color: var(--blue2);
	--text-color-hover: var(--blue1);
}

.button--link {
	--background-color: transparent;
	--background-color-hover: transparent;
	--border-color: transparent;
	--border-color-hover: transparent;
	--text-color: var(--color-link);
	--text-color-hover: var(--color-link-hover);

	text-decoration: underline;
}

.button--block {
	display: block;
	width: 100%;
}

.button--small {
	--border-thickness: 3rem;

	font-size: 36rem;
	line-height: 48rem;
	min-height: 48rem;
	padding: 0 24rem;
}

.button--large {
	--border-thickness: 6rem;

	font-size: 60rem;
	line-height: 72rem;
	min-height: 144rem;
	padding: 16rem 96rem;
}

.field [disabled] + *,
[disabled] {
	cursor: default;
	opacity: .5;
	pointer-events: none;
}

.field {
	display: flex;
	margin-bottom: 48rem;
	position: relative;
	text-align: left;
}

.field .label {
	z-index: 2;
}

.field [type=checkbox] + .label,
.field [type=radio] + .label {
	color: var(--blue2);
	cursor: pointer;
	display: inline-block;
	padding-left: 48rem;
}

.field *:not([type=radio]):not([type=checkbox]) + .label {
	font-size: 24rem;
	position: absolute;
	left: 3rem;
	line-height: 1;
	padding: 12rem 12rem 0;
	right: 3rem;
	top: 0;
}

.field input,
.field textarea,
.field select {
	background-color: var(--blue7);
	border: 1px solid var(--blue2);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	margin-top: -2px;
	padding: 36rem 12rem 6rem;
	position: relative;
	width: 100%;
}

.field select {
	z-index: 1;
}

.field select + .label::after {
	content: '';
	border-left: 12rem solid transparent;
	border-right: 12rem solid transparent;
	border-top: 12rem solid var(--blue2);
	bottom: -32rem;
	height: 0;
	pointer-events: none;
	position: absolute;
	right: 24rem;
	width: 0;
}

.field option[disabled] {
	background-color: var(--neutral6);
	color: var(--neutral2);
}

.field--inline {
	display: inline-block;
	margin-right: 24rem;
}

.field [type=checkbox],
.field [type=radio] {
	opacity: 0;
	position: absolute;
	z-index: 0;
}

.field [type=checkbox] + .label::before,
.field [type=radio] + .label::before {
	background-color: var(--blue7);
	border: 2px solid var(--blue2);
	content: '';
	height: 24rem;
	left: 0;
	position: absolute;
	top: 6rem;
	transform: translateY(3rem);
	width: 24rem;
}

.field [type=checkbox] + .label::after,
.field [type=radio] + .label::after {
	background-color: var(--blue6);
	border: 2px solid transparent;
	color: var(--blue4);
	height: 12rem;
	left: 6rem;
	position: absolute;
	top: 12rem;
	transform: translateY(3rem);
	width: 12rem;
}

.field [type=checkbox] + .label::before,
.field [type=checkbox] + .label::after {
	border-radius: var(--border-radius);
}

.field [type=radio] + .label::before,
.field [type=radio] + .label::after {
	border-radius: 48rem;
}

.field [type=radio]:focus + .label::before,
.field [type=checkbox]:focus + .label::before {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}

.field [type=checkbox]:checked + .label::after,
.field [type=radio]:checked + .label::after {
	content: '';
}

.field textarea {
	margin-top: 0;
	min-height: 192rem;
}

.sans-serif {
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}

.serif {
	font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.mono {
	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

/*
	Best Practice from A11y Project
	https://a11yproject.com/posts/how-to-hide-content/
*/
.visually-hidden {
	position: absolute !important;
	height: 1px; 
	width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; /* added line */
}

M server.js => server.js +1 -2
@@ 63,7 63,6 @@ async function handleGet(request) {

	return editor(request)
}

function editor(request) {
	const { pathname } = new URL(request.url);



@@ 102,7 101,7 @@ const types = {
}

function getType(ext) {
	return types[ext] || 'text/plain; charset=utf-8'
	return types[ext] || types['html']
}

console.log("Listening on http://localhost:8000");