prepare for migration to statichost.eu

.gitignore

@@ -1,2 +0,0 @@
-img/
-system-css/

statichost.yml

@@ -0,0 +1,5 @@
+domains:
+  # Primary domain
+  - retro-baxter.emmas.place
+  # Domains that redirect to the primary
+  - www.retro-baxter.emmas.place

system-css/button-default.svg

@@ -0,0 +1,3 @@
+<svg width="155" height="155" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1893 0H119.811V10.5571H144.443L144.443 35.1898H155V119.811H144.443V144.444H119.811V155H35.1893V144.444H10.5569V119.811H0V35.1898H10.5569V10.5571H35.1893V0ZM6.24161 113.57V113.57H16.7984V113.57H6.24161ZM30.8742 138.202L30.8741 138.202V138.201H41.4308L30.8742 138.202ZM113.569 138.201V148.759H41.431L113.569 148.759V138.201H124.126L113.569 138.201ZM148.758 41.4315V113.57H138.202L148.758 113.57V41.4314L148.758 41.4315ZM113.569 6.24161V16.7986H113.569V6.24161H113.569ZM18.5579 43.1907V111.81H18.5578V43.1906H30.8741V30.8744H43.1904V18.5578H111.81V18.5579H43.1905V30.8745H30.8742V43.1907H18.5579ZM30.8741 124.126V111.81H30.8742V124.126H30.8741ZM43.1904 136.442V124.126H43.1905V136.442L43.1904 136.442ZM124.126 30.8744V30.8745H111.81V30.8744H124.126ZM24.7995 49.4324V105.569H37.1158V117.884H49.4321V130.201H105.568V117.884H117.884V105.569H130.201V49.4324H117.884V37.1161H105.568V24.7995H49.4321V37.1161H37.1158V49.4324H24.7995ZM57 37.0002H98V43.0002H104H112V51.0002V57.0002H118V98.0002H112V104V112H104H98V118H57V112H51H43V104V98.0002H37V57.0002H43V51.0002V43.0002H51H57V37.0002ZM104 58.0002H111V97.0002H104V104H97V111H58V104H51V97.0002H44V58.0002H51V51.0002H58V44.0002H97V51.0002H104V58.0002Z" fill="black"/>
+</svg>

system-css/button.svg

@@ -0,0 +1,3 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61 0H20V6H14H6V14V20H0V61H6V67V75H14H20V81H61V75H67H75V67V61H81V20H75V14V6H67H61V0ZM74 21H67V14H60V7H21V14H14V21H7V60H14V67H21V74H60V67H67V60H74V21Z" fill="black"/>
+</svg>

system-css/docs.css

@@ -0,0 +1,179 @@
+@font-face {
+  font-family: Geneva9;
+  src: url("fonts/FindersKeepers.ttf")
+}
+
+@font-face {
+  font-family: Chicago_12;
+  src: url("fonts/ChiKareGo2.ttf"); 
+}
+
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* Layout: */
+
+.col-main {
+  flex: 1;
+}  
+
+.col-complementary {
+  flex: 1;
+}
+
+aside {
+  width: 200px;
+  position: sticky;
+  top: 18px;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+  height: calc(100vh - 36px);
+}
+
+html {
+  font-family: "Inconsolata", Menlo, Chicago, Geneva;
+  font-size: 18px;
+  letter-spacing: -0.025em;
+  min-height: 100vh;
+}
+
+h3 {
+  font-family: Chicago;
+  font-size: 1.5em;
+}
+
+.heading {
+  font-size: 3rem;
+}
+
+.desc {
+  font-family: Geneva_9;
+  font-size: 2em;
+}
+
+
+.center {
+  text-align: center;
+}
+
+.component {
+  display: flex;
+  margin-top: 24px;
+  font-family: Geneva;
+  font-size: 1em;
+}
+
+.alert-text,
+.dialog-text,
+.modal-text,
+.modeless-text {
+  font-family: Chicago_12;
+  font-size: 1em;
+  font-weight: normal;
+}
+
+.dialog-text {
+  margin-top: 20px;
+}
+
+.modal-text, .alert-text {
+  font-size: 1.2em;
+  margin-top: 10px;
+}
+
+p {
+  font-family: Geneva;
+  font-size: 0.9em;
+}
+
+
+blockquote {
+  margin: 0 0 20px;
+  padding: 20px;
+  width: 80%;
+  font-size: 14px;
+  border: 1px solid black;
+}
+
+blockquote footer {
+  margin: 12px 0 0 12px;
+}
+
+.example {
+  margin: 16px;
+  padding: 12px 24px;
+  border-left: 1px solid #000000;
+}
+
+summary {
+  font-size: 14px;
+  padding-top: 10px;
+  cursor: pointer;
+  margin: 12px 0 0 0;
+  width: 30%;
+}
+
+pre {
+  font-size: 13px;
+}
+
+.modal-dialog {
+  width: 50%;
+}
+
+.btn.active {
+  background: black;
+  border-radius:6px;
+  color: white;
+  font-family: Chicago_12;
+}
+
+.square {
+  width: 50px;
+  height: 50px;
+  background-color: transparent;
+  border: 1.5px solid black;
+  padding-right: 46px;
+}
+
+.menu-items {
+  padding: 0;
+  font-size: 14px;
+}
+
+/* responsive shiz */
+@media only screen and (min-width: 640px) {
+  .layout {
+    display: flex;
+    justify-content: space-between;
+  }
+  .standard-dialog {
+    margin-right: 20px;
+    margin-top: 18px;
+  }
+  .sidebar {
+    z-index: 1;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .sidebar {
+    display: none !important;
+  }
+  .example {
+    margin: 0px;
+  }
+  .component {
+    display: contents;
+  }
+  .scale-down {
+    transform: scale(0.8);
+  }
+}

system-css/index.html.ejs

@@ -0,0 +1,635 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>system.css | A design system for building retro Apple-inspired interfaces</title>
+  <link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+  <meta property="og:title" content="system.css" />
+  <meta name="Description" content="A design system for building retro Apple interfaces" />
+  <meta property="og:description" content="A design system for building retro Apple interfaces" />
+
+  <link rel="stylesheet" href="system.css">
+  <link rel="stylesheet" href="docs.css">
+</head>
+<body ontouchstart>
+  <div class="container">
+    <div class="layout">
+      <p class="col col-main">
+        <aside class="window sidebar">
+          <div class="title-bar">
+            <button aria-label="Close" class="close"></button>
+            <h1 class="title">Docs</h1>
+            <button aria-label="Resize" class="resize"></button>
+          </div>
+          <div class="separator"></div>
+          <div class="window-pane">
+            <ul class="menu-items">
+              <li><a href="#intro">Intro</a></li>
+              <li>Components
+                  <ul>
+                    <li><a href="#buttons">Buttons</a></li>
+                    <li><a href="#radio-buttons">Radio Buttons</a></li>
+                    <li><a href="#checkboxes">Checkboxes</a></li>
+                    <li><a href="#menu-bar">Menu Bar</a></li>
+                    <li><a href="#select-menu">Select Menu</a></li>
+                    <li><a href="#text-box">Text Box</a></li>
+                  </ul>
+                </li>
+              <li>Windows
+                <ul>
+                  <li><a href="#title-bar">Title Bar</a></li>
+                  <li><a href="#window-contents">Window Contents</a></li>
+                  <li><a href="#dialogs">Dialogs</a></li>
+                </ul>
+              </li>
+              <li><a href="#contributing">Contributing, Credits, etc.</a></li>
+              <li>Sponsors
+                <ul>
+                  <li><a href="https://getcssscan.com/?ref=systemcss" target="_blank">Get CSS Scan browser extension</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </aside>
+
+      </p>
+      <p class="col col-complementary" role="complementary">
+        <div class="standard-dialog">
+          <p class="heading center">System.css</p>
+            <p class="desc center">A design system for building retro <span role="img" class="apple" aria-label="Apple"></span>-inspired interfaces</p>
+
+          <h2 class="subheading" id="intro">Intro</h2>
+            <p>System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.</p>
+
+            <p>Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.</p>
+
+            <h2 class="subheading">Components</h2>
+
+            <section class="component">
+              <h3 class="subheading" id="buttons">Buttons</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.
+                  <footer>&mdash; Apple HI Guidelines, p. 204</footer>
+                </blockquote>
+
+                <p>A standard button measures 59px wide and 20px tall. We use the <code>.btn</code> class for these buttons</p>
+
+                <%- example(`
+                <button class="btn">Cancel</button>
+                <button class="btn">Submit</button>
+
+                `)%>
+
+                <p>When pressed, buttons invert. The button below is stimulated to be in the active state.</p>
+
+                <%- example(`
+                <button [[class="btn active"]]>Active</button>
+
+                `)%>
+
+                <p>Buttons can also have dynamic widths.</p>
+
+                <%- example(`
+                <button class="btn">Buttons can be long!!</button>
+
+                `)%>
+
+                <p>Or even have a default choice.</p>
+
+                <%- example(`
+                <button class="btn">Cancel</button>
+                <button class="btn btn-default">Find</button>
+
+                `)%>
+
+                <p>Disabled buttons look the same as standard buttons, but with grey button text. Add the <code>disabled</code> attribute to use it.</p>
+
+                <%- example(`
+                <button class="btn" disabled>Disabled</button>
+
+                `)%>
+
+
+                <!--<p>Default buttons have an extra border around them. Add the <code>disabled</code> attribute to use it.</p>
+
+                <div class="example">
+                  <span class="default">
+                    <button [[ class="btn"]]>Default</button>
+                  </span>
+                </div> -->
+              </div>
+
+
+            </section>
+
+            <section class="component">
+              <h3 class="subheading" id="radio-buttons">Radio Buttons</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time.
+                  <footer>&mdash; Apple HI Guidelines, p. 210</footer>
+                </blockquote>
+
+                <p>Radio Buttons can be rendered by specifying a <code>radio</code> type on an <code>input</code> tag and assigning it a name.</p>
+
+                <%- example(`
+                  <div class="field-row">
+                    <input id="radio1" type="radio" name="first-example">
+                    <label for="radio1">Left</label>
+                  </div>
+                  <div class="field-row">
+                    <input id="radio2" type="radio" name="first-example">
+                    <label for="radio2">Center</label>
+                  </div>
+                  <div class="field-row">
+                    <input id="radio3" type="radio" name="first-example">
+                    <label for="radio3">Right</label>
+                </div>
+
+                `)%>
+
+
+              </div>
+            </section>
+
+            <section class="component">
+              <h3 class="subheading" id="checkboxes">Checkboxes</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  Checkboxes, like radio buttons, provide alternative choices for users. A
+                  checkbox is a square with label text next to it
+                  <footer>&mdash; Apple HI Guidelines, p. 211</footer>
+                </blockquote>
+
+                <p>Checkboxes can be rendered by specifying a <code>checkbox</code> type on an <code>input</code> tag and assigning it a name.</p>
+
+                <%- example(`
+                  <div class="field-row">
+                    <input id="checkbox${getNewId()}" type="checkbox" name="chbx-example">
+                    <label for="checkbox${getCurrentId()}">Left</label>
+                  </div>
+                  <div class="field-row">
+                    <input id="checkbox${getNewId()}" type="checkbox" name="chbx-example">
+                    <label for="checkbox${getCurrentId()}">Center</label>
+                  </div>
+                  <div class="field-row">
+                    <input id="checkbox${getNewId()}" type="checkbox" name="chbx-example">
+                    <label for="checkbox${getCurrentId()}">Right</label>
+                </div>
+
+                `)%>
+
+
+              </div>
+            </section>
+
+
+            <section class="component">
+              <h3 class="subheading" id="menu-bar">Menu Bar</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  The menu bar extends across the top of the screen and contains words and
+                  icons that serve as the title of each menu
+                  <footer>&mdash; Apple HI Guidelines, p. 52</footer>
+                </blockquote>
+
+                <p>A menu bar consists of menu elements that name menu items and they typically have a dropdown menu associated with them.</p>
+                
+                <p>To create a menu bar we will use the <code>.menu-bar</code> class. </p>
+
+                <%- example(`
+                <ul role="menu-bar">
+                  <li role="menu-item" tabindex="0" aria-haspopup="true">
+                    File
+                    <ul role="menu">
+                      <li role="menu-item"><a href="#menu">Action</a></li>
+                      <li role="menu-item"><a href="#menu">Another Action</a></li>
+                      <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li>
+                      <li role="menu-item"><a href="https://twitter.com/sakofchit">sakun's twitter</a></li>
+                    </ul>
+                  </li>
+                  <li role="menu-item" tabindex="0" aria-haspopup="true">
+                    Edit
+                    <ul role="menu">
+                      <li role="menu-item"><a href="#menu">Action</a></li>
+                      <li role="menu-item"><a href="#menu">Another Action</a></li>
+                      <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li>
+                      <li role="menu-item"><a href="https://sakun.co">sakun's projects</a></li>
+                    </ul>
+                  </li>
+                  <li role="menu-item" tabindex="0" aria-haspopup="true">
+                    View
+                    <ul role="menu">
+                      <li role="menu-item"><a href="#menu">Action</a></li>
+                      <li role="menu-item"><a href="#menu">Another Action</a></li>
+                      <li role="menu-item"><a href="#menu">Something else here</a></li>
+                    </ul>
+                  </li>
+                  <li role="menu-item" tabindex="0" aria-haspopup="true">
+                    Special
+                    <ul role="menu">
+                      <li role="menu-item"><a href="#menu">You</a></li>
+                      <li role="menu-item"><a href="#menu">Get the</a></li>
+                      <li role="menu-item"><a href="#menu">Idea</a></li>
+                    </ul>
+                  </li>
+                </ul>
+                `)%>
+
+                <p>In case of a menu item as a single children or plain text with no menu dropdown associated with it, use <code>aria-haspopup="false"</code> attribute.</p>
+                <%- example(`
+                  <ul role="menu-bar">
+                    <li role="menu-item" tabindex="0" aria-haspopup="false">Single Item</li>
+                    <li role="menu-item" tabindex="0" aria-haspopup="false"><a target="_blank" href="https://github.com/sakofchit/system.css">System.css on GitHub</a></li>
+                  </ul>
+                `)%>
+
+                <p>We can also manipulate a menu bar into a standard dropdown.</p>
+
+                <%- example(`
+                <ul role="menu-bar">
+                  <li role="menu-item" tabindex="0" aria-haspopup="true">
+                    Dropdown
+                    <ul role="menu">
+                      <li role="menu-item"><a href="#menu">Action</a></li>
+                      <li role="menu-item"><a href="#menu">Another Action</a></li>
+                      <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li>
+                      <li role="menu-item"><a href="https://twitter.com/sakofchit">sakun's twitter</a></li>
+                    </ul>
+                  </li>
+                </ul>
+                `)%>
+              </div>
+            </section>
+
+
+            <section class="component">
+              <h3 class="subheading" id="select-menu">Select Menu</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  A select menu can be used to create a drop-down list, typically used in forms.
+                </blockquote>
+
+                <p>Select menus can be rendered using the <code>select</code> and <code>option</code> elements.</p>
+
+                <%- example(`
+                  <select>
+                    <option>name</option>
+                    <option>age</option>
+                    <option>date of birth</option>
+                  </select>
+                `)%>
+
+                <p>By default the first option will be selected, but you can change that by adding the <code>selected</code> attribute to an <code>option</code></p>
+
+                <%- example(`
+                  <select>
+                    <option>name</option>
+                    <option>age</option>
+                    <option selected>date of birth</option>
+                  </select>
+                `)%>
+              </div>
+            </section>
+
+            <section class="component">
+              <h3 class="subheading" id="text-box">Text Box</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  The place or places in a dialog box where information can be typed. Also called text entry field.
+                  <footer>&mdash; Apple HI Guidelines, p. 372</footer>
+                </blockquote>
+
+                <p>Text Boxes can be rendered by specifying a <code>text</code> type on an <code>input</code> tag</p>
+
+                <%- example(`
+                <input aria-label="Example text box" type="text" placeholder="some cool text"/>
+                `)%>
+
+                <p>Other types of text are also supported</p>
+
+                <%- example(`
+                <form>
+                  <label for="text_email">Email</label><br>
+                  <input id="text_email" type="email" placeholder="panic@thedis.co"/><br>
+                  <label for="text_pwd">Password</label><br>
+                  <input id="text_pwd" type="password" placeholder="password"/><br><br>
+                </form>
+                `)%>
+
+
+              </div>
+            </section>
+
+
+            <section class="component">
+              <h2 class="subheading" id="windows">Windows</h2>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  Standard document windows have standard structural components.
+                  These components include the title bar, size box, close box, zoom box,
+                  and scroll bars. Windows are designed for visual consistency across all monitors
+                  <footer>&mdash; Apple HI Guidelines, p. 134, 159</footer>
+                </blockquote>
+              </div>
+            </section>
+
+
+
+            <section class="component">
+              <h3 class="subheading" id="title-bar">Title Bar</h3>
+              <div style="padding-left: 20px;">
+
+                <blockquote>
+                  A standard title bar is at least 19px tall, has a close button, caption, and racing stripes.
+                </blockquote>
+
+                <p>They're usually a part of a window. Title bars use the Chicago 12pt font.</p>
+
+                <%- example(`
+
+                <div class="window">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">A Title Bar</h1>
+                    <button aria-label="Resize" disabled class="hidden"></button>
+                  </div>
+                </div>
+
+                `)%>
+
+                <p>Title bars can look different depending on what they're intended for.</p>
+
+                <%- example(`
+
+                <div class="window">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">Also a Title Bar</h1>
+                    <button aria-label="Resize" class="resize"></button>
+                  </div>
+                </div>
+                <div class="window">
+                  <div class="title-bar">
+                    <h1 class="title">Dialog Title</h1>
+                  </div>
+                </div>
+
+                `)%>
+
+                <p>You can also set a title bar to be inactive by applying the <code>.inactive-title-bar</code> class</p>
+
+                <%- example(`
+
+                <div class="window">
+                  <div class="inactive-title-bar">
+
+                    <h1 class="title">Inactive Title Bar</h1>
+
+                  </div>
+                </div>
+
+                `)%>
+
+              </div>
+            </section>
+
+
+
+            <section class="component">
+              <h3 class="subheading" id="window-contents">Window Contents</h3>
+              <div style="padding-left: 20px;">
+
+                <blockquote>
+                  Document windows present a view into the content that people create and store.
+                  <footer>&mdash; Apple HI Guidelines, p. 134</footer>
+                </blockquote>
+
+                <p>This is a window (without stuff in it). To create a basic window, we simply use the <code>.window</code> class.</p>
+
+                <%- example(`
+
+                <div class="window scale-down">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">Window Without Stuff</h1>
+                    <button aria-label="Resize" class="resize"></button>
+                  </div>
+                </div>
+
+                `)%>
+
+
+                <p>This is a window with stuff in it. We can achieve this by simply adding a div with the <code>.window-pane</code> below the title bar.</p>
+
+                <%- example(`
+
+                <div class="window">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">Window With Stuff</h1>
+                    <button aria-label="Resize" class="resize"></button>
+                  </div>
+                  <div class="separator"></div>
+
+                  <div class="window-pane">
+                    Woo I got stuff in me!
+                  </div>
+                </div>
+
+                `)%>
+
+
+
+                <p>You can also add a details bar to a window by adding<code>.details-bar</code> below the title bar.</p>
+
+                <%- example(`
+
+                <div class="window">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">Window With Details</h1>
+                    <button aria-label="Resize" class="resize"></button>
+                  </div>
+                  <div class="details-bar">
+                    <span>some</span>
+                    <span>more</span>
+                    <span>details</span>
+                  </div>
+
+                  <div class="window-pane">
+                    Woo I got a details bar.
+                  </div>
+                </div>
+
+                `)%>
+
+                <p>You can also create an inactive window using an inactive title bar.</p>
+
+                <%- example(`
+                  <div class="window">
+                    <div class="inactive-title-bar">
+                      <h1 class="title">Inactive Window</h1>
+                    </div>
+                    <div class="details-bar">
+                      <span>some</span>
+                      <span>more</span>
+                      <span>details</span>
+                    </div>
+
+                    <div class="window-pane">
+                      not active :(
+                    </div>
+                  </div>
+                `)%>
+
+
+              </div>
+            </section>
+
+            <section class="component">
+              <h3 class="subheading" id="dialogs">Dialogs</h3>
+              <div style="padding-left: 20px;">
+                <blockquote>
+                  Dialog boxes are windows that provide a standard framework in which the
+                  computer can present alternatives from which the user can choose.
+                  <footer>&mdash; Apple HI Guidelines, p. 176</footer>
+                </blockquote>
+
+                <p>
+                  A basic dialog is just a box with text in it. We use the <code>.standard-dialog</code> class here.
+                </p>
+
+                <%- example(`
+
+                <div class="standard-dialog center scale-down" style="width:30rem;">
+                  <h1 class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</h1>
+                  <p class="dialog-text">&copy; 1984 Apple Computer</p>
+                </div>
+
+
+                `)%>
+
+                <p>
+                  A modeless dialog box looks like a window without a size box, zoom box, or
+                  scroll bars.
+                </p>
+
+                <%- example(`
+                <div class="window scale-down" style="width:30rem;">
+                  <div class="title-bar">
+                    <button aria-label="Close" class="close"></button>
+                    <h1 class="title">Modeless Dialog</h1>
+                    <button aria-label="Resize" disabled class="hidden"></button>
+                  </div>
+                  <div class="separator"></div>
+
+                  <div class="modeless-dialog">
+                    <section class="field-row" style="justify-content: flex-start">
+                      <label for="text_find" class="modeless-text">Find:</label>
+                      <input id="text_find" type="text" style="width:100%;" placeholder=""/>
+                    </section>
+                    <section class="field-row" style="justify-content: flex-end">
+                      <button class="btn">Cancel</button>
+                      <button class="btn" style="width:95px;">Find</button>
+                    </section>
+                  </div>
+                </div>
+                `)%>
+
+                <p>
+                  We can also have a modal dialog box, which typically has some interactive component within it. It has a double-outline border. We achieve this by using a nested <code>div</code>. The outer <code>div</code> uses the <code>.outer-border</code> class and the <code>.inner-border</code> for the inner <code>div</code>.
+                </p>
+
+                <%- example(`
+                <div class="modal-dialog outer-border" style="width: 30rem;">
+                  <div class="inner-border center">
+                    <div class="modal-contents">
+                      <h1 class="modal-text">Modal Dialog</h1>
+                      <div style="padding-left: 20px;">
+                        <div class="field-row">
+                          <input id="radio${getNewId()}" type="radio" name="second-example">
+                          <label for="radio${getCurrentId()}">Room</label>
+                        </div>
+                        <div class="field-row">
+                          <input id="radio${getNewId()}" type="radio" name="second-example">
+                          <label for="radio${getCurrentId()}">For</label>
+                        </div>
+                        <div class="field-row">
+                          <input id="radio${getNewId()}" type="radio" name="second-example">
+                          <label for="radio${getCurrentId()}">Stuff</label>
+                        </div>
+
+                      </div>
+                      <section class="field-row" style="justify-content: flex-end">
+                        <button class="btn">Cancel</button>
+                        <button class="btn" style="width:95px;">OK</button>
+                      </section>
+
+                    </div>
+
+                  </div>
+                </div>
+                `)%>
+
+
+                <blockquote>
+                  Alert boxes appear when the system software or an application needs to
+                  communicate information to the user. Alert boxes provide messages about
+                  error conditions and warn users about potentially hazardous situations or
+                  actions
+                  <footer>&mdash; Apple HI Guidelines, p. 176</footer>
+                </blockquote>
+
+                <p>Like modal dialogs, alert boxes also have a double-outline frame. The empty square is where you'd place an icon.</p>
+
+                <%- example(`
+                <div class="alert-box outer-border scale-down"  style="width:30rem;">
+                  <div class="inner-border">
+                    <div class="alert-contents" style="padding-left: 30px; padding-right:20px;">
+                      <section class="field-row" style="justify-content: flex-start">
+                        <div class="square"></div>
+                        <p class="alert-text" style="padding-left:10px;">This is a standard alert box. The text would be placed here.
+                          This is where more text appears</p>
+                      </section>
+                      <section class="field-row" style="justify-content: flex-end">
+                        <button class="btn">Cancel</button>
+                        <button class="btn" style="width:95px;">OK</button>
+                      </section>
+
+                    </div>
+
+                  </div>
+                </div>
+                `)%>
+              </div>
+            </section>
+
+            <h2 class="subheading" id="contributing">Contributing, Credits, etc.</h2>
+
+            <section class="component">
+              <div>
+                <p>Thanks for checking this project out! This library was made in good fun and was largely inspired by <a href="https://github.com/jdan/98.css" target="_blank">98.css</a>. The <a href="http://www.suppertime.co.uk/blogmywiki/2017/04/chicago/" target="_blank">Chicago 12pt</a> and <a href="http://www.suppertime.co.uk/blogmywiki/2017/04/finderskeepers/" target="_blank">Geneva 9pt</a> fonts are recreations by <a href="https://twitter.com/blogmywiki" target="_blank">@blogmywiki</a></p>
+
+                <p>System.css is still in beta! There's a few things that are currently missing that I incline on adding pretty soon. I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found <a href="https://github.com/sakofchit/system.css/tree/main/icon">here</a>.</p>
+
+                <p>If you find a bug, consider opening an issue <a href="https://github.com/sakofchit/system.css/issues">here</a>. If there's something that you'd like to add, please feel free to create a PR!</p>
+
+                <p>If you'd like to see what else I'm up to, consider following me on <a href="https://twitter.com/sakofchit" target="_blank">Twitter</a> or checking out my <a href="https://sakun.co" target="_blank">personal site</a> :)</p>
+              </div>
+            </section>
+
+            <h2 class="subheading">Sponsors</h2>
+
+            <p><a href="https://getcssscan.com/?ref=systemcss" target="_blank">CSS Scan</a>: The fastest and easiest way to check, copy and edit CSS</p>
+
+        </div>
+      </div>
+    </p>
+  </div>
+
+</body>
+</html>

system-css/script.js

@@ -0,0 +1,8 @@
+$(document).on("click touchend", function(e){
+    $(".dropdown-content").removeClass("show");
+});
+  
+$('.dropdown-content').prev('button').on('click', function(e) {  
+    $(this).siblings('.dropdown-content').toggleClass('show');
+    return false;
+});