master
Zed A. Shaw 4 years ago
parent 937ef3192e
commit 8f8db6555d
  1. 22
      sass/_typography.scss
  2. 117
      sass/_variables.scss
  3. 39
      src/components/Footer.svelte
  4. 28
      src/components/Icon.svelte
  5. 20
      src/components/Sidebar.svelte
  6. 2
      src/node_modules/buttons.js
  7. 48
      src/routes/_layout.svelte
  8. 20
      src/routes/index.svelte
  9. BIN
      static/Tandy1K.woff
  10. BIN
      static/Tandy1KMono.woff
  11. 2
      static/css/spectre-exp.min.css
  12. 2
      static/css/spectre-icons.min.css
  13. 2
      static/css/spectre.min.css

@ -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 // Typography
// Headings // Headings
h1, h1,
@ -9,7 +23,7 @@ h6 {
font-weight: 700; font-weight: 700;
margin-bottom: .5em; margin-bottom: .5em;
margin-top: 0; margin-top: 0;
font-family: "Arial Black"; font-family: "Tandy1K";
a { a {
text-decoration: none !important; text-decoration: none !important;
@ -23,7 +37,7 @@ h6 {
.h5, .h5,
.h6 { .h6 {
font-weight: 700; font-weight: 700;
font-family: "Arial Black"; font-family: "Tandy1K";
a { a {
text-decoration: none !important; text-decoration: none !important;
@ -65,7 +79,7 @@ h6,
// Paragraphs // Paragraphs
p { p {
margin: 0 0 $line-height; margin: 0 0 $line-height;
color: $black; color: $body-font-color;
} }
// Semantic text elements // Semantic text elements
@ -110,7 +124,7 @@ blockquote {
ul, ul,
ol { ol {
margin: $unit-4 $unit-4 $unit-4 $unit-4; margin: $unit-4 $unit-4 $unit-4 $unit-4;
background-color: lighten($gray-color-light, 3%); background-color: $gray;
padding: 0.5em; padding: 0.5em;

@ -4,90 +4,88 @@ $version: "0.5.8";
// Core features // Core features
$rtl: false !default; $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 // 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 // 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-dark: darken($border-color, 10%) !default;
$border-color-light: lighten($border-color, 8%) !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 // 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 // Other colors
$code-color: $snow !default; $code-color: $green !default;
$highlight-color: #ffe9b3 !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 // Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ // 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; $body-font-family: $base-font-family, $fallback-font-family !default;
// Unit sizes // 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 // 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: 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 // Sizes
$layout-spacing: $unit-2 !default; $layout-spacing: $unit-2 !default;
$layout-spacing-sm: $unit-1 !default; $layout-spacing-sm: $unit-1 !default;
$layout-spacing-lg: $unit-4 !default; $layout-spacing-lg: $unit-4 !default;
$layout-spacing-xl: $unit-6 !default;
$border-radius: $unit-h !default; $border-radius: $unit-h !default;
$border-width-sm: 1px !default;
$border-width: $unit-o !default; $border-width: $unit-o !default;
$border-width-lg: $unit-h !default; $border-width-lg: $unit-h !default;
$control-size: $unit-9 !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: ($control-size - $line-height) / 2 - $border-width !default;
$control-padding-y-sm: ($control-size-sm - $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-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-xs: 180px !default;
$control-width-sm: 320px !default; $control-width-sm: 320px !default;
@ -112,7 +110,7 @@ $size-xs: 480px !default;
$size-sm: 600px !default; $size-sm: 600px !default;
$size-md: 840px !default; $size-md: 840px !default;
$size-lg: 960px !default; $size-lg: 960px !default;
$size-xl: 1257px !default; $size-xl: 1280px !default;
$size-2x: 1440px !default; $size-2x: 1440px !default;
$responsive-breakpoint: $size-xs !default; $responsive-breakpoint: $size-xs !default;
@ -123,4 +121,3 @@ $zindex-1: 100 !default;
$zindex-2: 200 !default; $zindex-2: 200 !default;
$zindex-3: 300 !default; $zindex-3: 300 !default;
$zindex-4: 400 !default; $zindex-4: 400 !default;

@ -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>

@ -14,6 +14,8 @@ export let tooltip_right=false;
export let tooltip_bottom=false; export let tooltip_bottom=false;
export let tooltip_left=false; export let tooltip_left=false;
export let light_color="#f8f9f6"; export let light_color="#f8f9f6";
export let code="";
</script> </script>
<style lang="scss"> <style lang="scss">
@ -26,15 +28,19 @@ export let light_color="#f8f9f6";
</style> </style>
<span class:tooltip="{tooltip !== ''}" class:tooltip-bottom="{ tooltip_bottom }" class:tooltip-left="{ tooltip_left }" class:tooltip-right={ tooltip_right } data-tooltip="{tooltip}"> <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> </span>

@ -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>

2
src/node_modules/buttons.js generated vendored

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

@ -1,9 +1,51 @@
<script> <script>
import Footer from '../components/Footer.svelte';
import Sidebar from '../components/Sidebar.svelte';
</script> </script>
<style> <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> </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>

@ -1,5 +1,5 @@
<svelte:head> <svelte:head>
<title>Buttons the Programming Language</title> <title>Buttons the Computer</title>
</svelte:head> </svelte:head>
<script> <script>
@ -9,10 +9,10 @@
const { session } = stores(); const { session } = stores();
let code = [ let code = [
['PUSH', -20], // start at -20 ['PUSH', -10], // start at -10
['PUSH', 1], // increment by 1 ['PUSH', 1], // increment by 1
['ADD'], ['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 ['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 data_ops = new Set(['PUSH', 'JZ', 'JNZ', 'JUMP', 'STOR', 'RSTOR', 'HALT']);
const ops = machine.operations; const ops = ButtonMachine.operations();
const change_op = (i, count) => { const change_op = (i, count) => {
let cur_op = code[i][0]; let cur_op = code[i][0];
@ -103,9 +103,15 @@
<div class="columns"> <div class="columns">
<div class="column col-6"> <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> <div class="divider"></div>
{#each code as [op, data], i} {#each code as [op, data], i}

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save