Bring in some retro oldschool fonts from https://int10h.org/oldschool-pc-fonts/fontlist/

sass/_typography.scss

@@ -1,3 +1,17 @@
+@font-face {
+  font-family: 'Tandy1K';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/Tandy1K.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Tandy1KMono';
+  font-style: monospace;
+  font-weight: 400;
+  src: url(/Tandy1KMono.woff) format('woff');
+}
+
 // Typography
 // Headings
 h1,
@@ -9,7 +23,7 @@ h6 {
   font-weight: 700;
   margin-bottom: .5em;
   margin-top: 0;
-  font-family: "Arial Black";
+  font-family: "Tandy1K";
 
   a {
     text-decoration: none !important;
@@ -23,7 +37,7 @@ h6 {
 .h5,
 .h6 {
   font-weight: 700;
-  font-family: "Arial Black";
+  font-family: "Tandy1K";
 
   a {
     text-decoration: none !important;
@@ -65,7 +79,7 @@ h6,
 // Paragraphs
 p {
   margin: 0 0 $line-height;
-  color: $black;
+  color: $body-font-color;
 }
 
 // Semantic text elements
@@ -110,7 +124,7 @@ blockquote {
 ul,
 ol {
   margin: $unit-4 $unit-4 $unit-4 $unit-4;
-  background-color: lighten($gray-color-light, 3%);
+  background-color: $gray;
   padding: 0.5em;
 
 

sass/_variables.scss

@@ -4,90 +4,88 @@ $version: "0.5.8";
 // Core features
 $rtl: false !default;
 
-// created by me just kind of randomly
+$yellow: #DEB8AE;
-$black: hsl(309, 15%, 9%);
+$blue: #0aa;
-$blue: hsl(216, 43%, 21%);
+$red: #a00;
-$red: hsl(356, 71%, 25%);
+$gray: #444;
-$yellow: hsl(42, 75%, 49%);
+$snow: #eee;
-$green: hsl(151, 50%, 55%);
+$black: #000;
-$snow: hsl(86, 23, 94);
+$green: #0a0;
-$white: #f8f8f2; // this comes from the code prism uses
+$white: #fff;
+$debug: red;
 
 // Core colors
-$primary-color: $blue !default;
+$primary-color: $gray !default;
-$primary-color-dark: $black !default;
+$primary-color-dark: darken($primary-color, 3%) !default;
-$primary-color-light: hsl(181, 29%, 67%) !default;
+$primary-color-light: lighten($primary-color, 3%) !default;
-$secondary-color: hsl(218, 8%, 63%) !default;
+$secondary-color: lighten($red, 17.5%) !default;
-$secondary-color-dark: hsl(212, 20%, 31%) !default;
+$secondary-color-dark: darken($secondary-color, 10%) !default;
-$secondary-color-light: hsl(240, 11%, 78%) !default;
+$secondary-color-light: lighten($secondary-color, 10%) !default;
 
 // Gray colors
-$dark-color: darken($primary-color, 5%) !default;
+$dark-color: $gray !default;
-$light-color: lighten($snow, 3%) !default;
+$light-color: $snow !default;
-$gray-color: lighten($blue, 55%) !default;
+$gray-color: $gray !default;
-$gray-color-dark: darken($gray-color, 30%) !default;
+$gray-color-dark: darken($gray-color, 10%) !default;
-$gray-color-light: lighten($gray-color, 18%) !default;
+$gray-color-light: lighten($gray-color, 20%) !default;
 
-$border-color: lighten($dark-color, 65%) !default;
+$border-color: lighten($green, 65%) !default;
 $border-color-dark: darken($border-color, 10%) !default;
 $border-color-light: lighten($border-color, 8%) !default;
-$bg-color: $gray-color-light !default;
+$bg-color: $black !default;
-$bg-color-dark: darken($bg-color, 3%) !default;
+$bg-color-dark: darken($bg-color, 10%) !default;
-$bg-color-light: $light-color !default;
+$bg-color-light: lighten($bg-color, 10%) !default;
 
 // Control colors
-$success-color: darken($green, 5%) !default;
+$success-color: #32b643 !default;
-$warning-color: $yellow !default;
+$warning-color: $green !default;
-$error-color: $red !default;
+$error-color: #e85600 !default;
 
 // Other colors
-$code-color: $snow !default;
+$code-color: $green !default;
 $highlight-color: #ffe9b3 !default;
-$body-bg: $bg-color-light !default;
+$body-bg: $bg-color !default;
-$body-font-color: lighten($dark-color, 5%) !default;
+$body-font-color: darken($white, 10%) !default;
-$link-color: $primary-color !default;
+$link-color: $green !default;
-$link-color-dark: darken($red, 20%) !default;
+$link-color-dark: $red !default;
-$link-color-light: lighten($link-color, 10%) !default;
+$link-color-light: $yellow !default;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-$base-font-family: "Arial", !default;
+$base-font-family: "Tandy1K" !default;
-$header-font-family: "Arial Black", !default;
+$mono-font-family: "Tandy1KMono", monospace !default;
-$mono-font-family: “Roboto”, “Droid Sans”, “Helvetica Neue”, sans-serif, !default;
+$fallback-font-family: "Roboto", sans-serif !default;
-$fallback-font-family: "Helvetica Neue", sans-serif !default;
 $body-font-family: $base-font-family, $fallback-font-family !default;
 
 // Unit sizes
-$unit-o: .1rem !default;
+$unit-o: .05rem !default;
-$unit-h: .2rem !default;
+$unit-h: .1rem !default;
-$unit-1: .3rem !default;
+$unit-1: .2rem !default;
-$unit-2: .5rem !default;
+$unit-2: .4rem !default;
-$unit-3: .7rem !default;
+$unit-3: .6rem !default;
-$unit-4: .9rem !default;
+$unit-4: .8rem !default;
-$unit-5: 1.1rem !default;
+$unit-5: 1rem !default;
-$unit-6: 1.3rem !default;
+$unit-6: 1.2rem !default;
-$unit-7: 1.5rem !default;
+$unit-7: 1.4rem !default;
-$unit-8: 1.7rem !default;
+$unit-8: 1.6rem !default;
-$unit-9: 1.9rem !default;
+$unit-9: 1.8rem !default;
-$unit-10: 2.1rem !default;
+$unit-10: 2rem !default;
-$unit-12: 2.5rem !default;
+$unit-12: 2.4rem !default;
-$unit-16: 3.3rem !default;
+$unit-16: 3.2rem !default;
 
 // Font sizes
-$html-font-size: 22px !default;
+$html-font-size: 25px !default;
-$html-line-height: 35px !default;
+$html-line-height: 1.5 !default;
 $font-size: 1rem !default;
-$font-size-sm: 0.9rem !default;
+$font-size-sm: .9rem !default;
-$font-size-lg: 1.1rem !default;
+$font-size-lg: 1.9rem !default;
-$line-height: 1.4rem !default;
+$line-height: 1.5rem !default;
 
 // Sizes
 $layout-spacing: $unit-2 !default;
 $layout-spacing-sm: $unit-1 !default;
 $layout-spacing-lg: $unit-4 !default;
-$layout-spacing-xl: $unit-6 !default;
 $border-radius: $unit-h !default;
-$border-width-sm: 1px !default;
 $border-width: $unit-o !default;
 $border-width-lg: $unit-h !default;
 $control-size: $unit-9 !default;
@@ -99,7 +97,7 @@ $control-padding-x-lg: $unit-2 * 1.5 !default;
 $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
 $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
 $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
-$control-icon-size: 1rem !default;
+$control-icon-size: .8rem !default;
 
 $control-width-xs: 180px !default;
 $control-width-sm: 320px !default;
@@ -112,7 +110,7 @@ $size-xs: 480px !default;
 $size-sm: 600px !default;
 $size-md: 840px !default;
 $size-lg: 960px !default;
-$size-xl: 1257px !default;
+$size-xl: 1280px !default;
 $size-2x: 1440px !default;
 
 $responsive-breakpoint: $size-xs !default;
@@ -123,4 +121,3 @@ $zindex-1: 100 !default;
 $zindex-2: 200 !default;
 $zindex-3: 300 !default;
 $zindex-4: 400 !default;
-

src/components/Footer.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Icon from './Icon.svelte';
+</script>
+
+<style lang="scss">
+  @import 'sass/_variables';
+
+  #footer {
+    border-top: 1px solid $primary-color;
+    background-color: $gray-color-light;
+  }
+
+  #right-column {
+    padding: 2rem;
+  }
+
+  #footer .panel {
+    border: 0px;
+    border-radius: 0px;
+    font-size: $font-size-sm;
+  }
+</style>
+
+<div id="footer" class="columns col-gapless">
+  <div class="column col-9">
+    <div class="panel">
+      <div class="panel-header">
+        This website and all content is Copyright &copy; Zed A. Shaw since 2020 and beyond.
+      </div>
+      <div class="panel-body">
+      </div>
+    </div>
+  </div>
+
+  <div class="column col-3" id="right-column">
+    <a alt="Twitter @lzsthw" aria-label="Twitter @lzsthw" rel="external" href="https://twitter.com/lzsthw"><Icon size="48" name="twitter" /></a>
+      <a alt="The git repository" aria-label="The git repository" rel="external" href="https://git.learnjsthehardway.com/zedshaw/buttons-computer"><Icon size="48" name="code" /></a>
+  </div>
+</div>

src/components/Icon.svelte

@@ -14,6 +14,8 @@ export let tooltip_right=false;
 export let tooltip_bottom=false;
 export let tooltip_left=false;
 export let light_color="#f8f9f6";
+export let code="";
+
 </script>
 
 <style lang="scss">
@@ -26,15 +28,19 @@ export let light_color="#f8f9f6";
 </style>
 
 <span class:tooltip="{tooltip !== ''}"  class:tooltip-bottom="{ tooltip_bottom }" class:tooltip-left="{ tooltip_left }" class:tooltip-right={ tooltip_right } data-tooltip="{tooltip}">
-  <svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}"
+  {#if code}
-  width="{size}"
+    { code }
-  height="{size}"
+  {:else}
-  fill="{fill}"
+    <svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}"
-  stroke="{light ? light_color : color}"
+                                                                                             width="{size}"
-  stroke-width="{width}"
+                                                                                             height="{size}"
-  stroke-linecap="{linecap}"
+                                                                                             fill="{fill}"
-  stroke-linejoin="{linejoin}"
+                                                                                             stroke="{light ? light_color : color}"
->
+   stroke-width="{width}"
-  <use xlink:href="/icons/feather-sprite.svg#{name}"/>
+   stroke-linecap="{linecap}"
-</svg>
+   stroke-linejoin="{linejoin}"
+ >
+ <use xlink:href="/icons/feather-sprite.svg#{name}"/>
+    </svg>
+  {/if}
 </span>

src/components/Sidebar.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { ButtonMachine } from 'buttons';
+
+  let ops = ButtonMachine.operations();
+
+</script>
+
+<style lang="scss">
+</style>
+
+<b>HELP</b>
+<pre>
+<code>
+OPERATIONS:
+
+{#each ops as op}
+{ op + '\n'}
+{/each}
+</code>
+</pre>

src/node_modules/buttons.js

@@ -27,7 +27,7 @@ class ButtonMachine {
     return test;
   }
 
-  get operations() {
+  static operations() {
     return Object.getOwnPropertyNames(ButtonMachine.prototype)
       .filter(x => x.startsWith('op_'))
       .map(x => x.slice(3));

src/routes/_layout.svelte

@@ -1,9 +1,51 @@
 <script>
+  import Footer from '../components/Footer.svelte';
+  import Sidebar from '../components/Sidebar.svelte';
 </script>
 
 <style>
+#main {
+    display: flex;
+    flex: 1 0 auto;
+    min-height: 100vh;
+    flex-direction: column;
+    padding-left: 0px;
+    padding-right: 0px;
+    min-width: 340px;
+}
+
+#main_content {
+    flex-grow: 1;
+}
 </style>
 
-<main>
+<div class="container grid-xl full-width" id="main">
-	<slot></slot>
+  <div class="columns" id="nav">
-</main>
+    <div class="column col-mx-auto">
+    </div>
+  </div>
+
+  <div class="container full-width" id="main_content">
+    <div class="columns">
+      <div class="column col-mx-auto">
+        <div class="off-canvas">
+          <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+            ?¿
+          </a>
+
+          <div id="sidebar-id" class="off-canvas-sidebar">
+            <Sidebar />
+          </div>
+
+          <a class="off-canvas-overlay" href="#close"></a>
+
+          <div class="off-canvas-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Footer/>
+</div>

src/routes/index.svelte

@@ -1,5 +1,5 @@
 <svelte:head>
-  <title>Buttons the Programming Language</title>
+  <title>Buttons the Computer</title>
 </svelte:head>
 
 <script>
@@ -9,10 +9,10 @@
   const { session } = stores();
 
   let code = [
-    ['PUSH', -20], // start at -20
+    ['PUSH', -10], // start at -10
     ['PUSH', 1],  // increment by 1
     ['ADD'],      
-    ['JZ'],    // if we're at 0 jumps to the end
+    ['JZ', 5],    // if we're at 0 jumps to the end
     ['JUMP', 1]    // the previous test fails so it jumps to loop again
   ];
 
@@ -24,7 +24,7 @@
 
   const data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']);
 
-  const ops = machine.operations;
+  const ops = ButtonMachine.operations();
 
   const change_op = (i, count) => {
     let cur_op = code[i][0];
@@ -103,9 +103,15 @@
 
   <div class="columns">
     <div class="column col-6">
-    <button class="btn btn-primary" on:click={ run_machine }><Icon name="play-circle" tooltip="Run it" light={ true }/></button>
+      <button class="btn btn-primary" on:click={ run_machine }>
-    <button class="btn btn-primary" on:click={ step_machine }><Icon name="clock" tooltip="Step through" light={ true }/></button>
+        <Icon code="►" tooltip="Run it" tooltip_right={ true } light={ true }/>
-    <button class="btn btn-primary" on:click={ reset_machine }><Icon name="power" tooltip="Reset" light={ true }/></button>
+      </button>
+      <button class="btn btn-primary" on:click={ step_machine }>
+        <Icon code="→" tooltip="Step through" tooltip_right={ true } light={ true }/>
+      </button>
+      <button class="btn btn-primary" on:click={ reset_machine }>
+        <Icon code="■" tooltip="Reset" light={ true }/>
+      </button>
 
     <div class="divider"></div>
       {#each code as [op, data], i}