learn-javascript-the-hard-way
/
buttons-computer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
master
Zed A. Shaw 4 years ago
parent 937ef3192e
commit 8f8db6555d
13 changed files with 213 additions and 89 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

22
sass/_typography.scss
Unescape View File

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

117
sass/_variables.scss
Unescape View File

@ -4,90 +4,88 @@ $version: "0.5.8";
// Core features
$rtl: false !default;
// created by me just kind of randomly
$black: hsl(309, 15%, 9%);
$blue: hsl(216, 43%, 21%);
$red: hsl(356, 71%, 25%);
$yellow: hsl(42, 75%, 49%);
$green: hsl(151, 50%, 55%);
$snow: hsl(86, 23, 94);
$white: #f8f8f2; // this comes from the code prism uses
$yellow: #DEB8AE;
$blue: #0aa;
$red: #a00;
$gray: #444;
$snow: #eee;
$black: #000;
$green: #0a0;
$white: #fff;
$debug: red;
// Core colors
$primary-color: $blue !default;
$primary-color-dark: $black !default;
$primary-color-light: hsl(181, 29%, 67%) !default;
$secondary-color: hsl(218, 8%, 63%) !default;
$secondary-color-dark: hsl(212, 20%, 31%) !default;
$secondary-color-light: hsl(240, 11%, 78%) !default;
$primary-color: $gray !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
$secondary-color: lighten($red, 17.5%) !default;
$secondary-color-dark: darken($secondary-color, 10%) !default;
$secondary-color-light: lighten($secondary-color, 10%) !default;
// Gray colors
$dark-color: darken($primary-color, 5%) !default;
$light-color: lighten($snow, 3%) !default;
$gray-color: lighten($blue, 55%) !default;
$gray-color-dark: darken($gray-color, 30%) !default;
$gray-color-light: lighten($gray-color, 18%) !default;
$dark-color: $gray !default;
$light-color: $snow !default;
$gray-color: $gray !default;
$gray-color-dark: darken($gray-color, 10%) !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-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
$bg-color: $black !default;
$bg-color-dark: darken($bg-color, 10%) !default;
$bg-color-light: lighten($bg-color, 10%) !default;
// Control colors
$success-color: darken($green, 5%) !default;
$warning-color: $yellow !default;
$error-color: $red !default;
$success-color: #32b643 !default;
$warning-color: $green !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-font-color: lighten($dark-color, 5%) !default;
$link-color: $primary-color !default;
$link-color-dark: darken($red, 20%) !default;
$link-color-light: lighten($link-color, 10%) !default;
$body-bg: $bg-color !default;
$body-font-color: darken($white, 10%) !default;
$link-color: $green !default;
$link-color-dark: $red !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;
$header-font-family: "Arial Black", !default;
$mono-font-family: “Roboto”, “Droid Sans”, “Helvetica Neue”, sans-serif, !default;
$fallback-font-family: "Helvetica Neue", sans-serif !default;
$base-font-family: "Tandy1K" !default;
$mono-font-family: "Tandy1KMono", monospace !default;
$fallback-font-family: "Roboto", sans-serif !default;
$body-font-family: $base-font-family, $fallback-font-family !default;
// Unit sizes
$unit-o: .1rem !default;
$unit-h: .2rem !default;
$unit-1: .3rem !default;
$unit-2: .5rem !default;
$unit-3: .7rem !default;
$unit-4: .9rem !default;
$unit-5: 1.1rem !default;
$unit-6: 1.3rem !default;
$unit-7: 1.5rem !default;
$unit-8: 1.7rem !default;
$unit-9: 1.9rem !default;
$unit-10: 2.1rem !default;
$unit-12: 2.5rem !default;
$unit-16: 3.3rem !default;
$unit-o: .05rem !default;
$unit-h: .1rem !default;
$unit-1: .2rem !default;
$unit-2: .4rem !default;
$unit-3: .6rem !default;
$unit-4: .8rem !default;
$unit-5: 1rem !default;
$unit-6: 1.2rem !default;
$unit-7: 1.4rem !default;
$unit-8: 1.6rem !default;
$unit-9: 1.8rem !default;
$unit-10: 2rem !default;
$unit-12: 2.4rem !default;
$unit-16: 3.2rem !default;
// Font sizes
$html-font-size: 22px !default;
$html-line-height: 35px !default;
$html-font-size: 25px !default;
$html-line-height: 1.5 !default;
$font-size: 1rem !default;
$font-size-sm: 0.9rem !default;
$font-size-lg: 1.1rem !default;
$line-height: 1.4rem !default;
$font-size-sm: .9rem !default;
$font-size-lg: 1.9rem !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;

39
src/components/Footer.svelte
Unescape View File

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

28
src/components/Icon.svelte
Unescape View File

@ -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}"
width="{size}"
height="{size}"
fill="{fill}"
stroke="{light ? light_color : color}"
stroke-width="{width}"
stroke-linecap="{linecap}"
stroke-linejoin="{linejoin}"
>
<use xlink:href="/icons/feather-sprite.svg#{name}"/>
</svg>
{#if code}
{ code }
{:else}
<svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}"
width="{size}"
height="{size}"
fill="{fill}"
stroke="{light ? light_color : color}"
stroke-width="{width}"
stroke-linecap="{linecap}"
stroke-linejoin="{linejoin}"
>
<use xlink:href="/icons/feather-sprite.svg#{name}"/>
</svg>
{/if}
</span>

20
src/components/Sidebar.svelte
Unescape View File

@ -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
Unescape View File

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

48
src/routes/_layout.svelte
Unescape View File

@ -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>
<slot></slot>
</main>
<div class="container grid-xl full-width" id="main">
<div class="columns" id="nav">
<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>

20
src/routes/index.svelte
Unescape View File

@ -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={ step_machine }><Icon name="clock" tooltip="Step through" light={ true }/></button>
<button class="btn btn-primary" on:click={ reset_machine }><Icon name="power" tooltip="Reset" light={ true }/></button>
<button class="btn btn-primary" on:click={ run_machine }>
<Icon code="►" tooltip="Run it" tooltip_right={ true } light={ true }/>
</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}

BIN
static/Tandy1K.woff
View File

Binary file not shown.

BIN
static/Tandy1KMono.woff
View File

Binary file not shown.

2
static/css/spectre-exp.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
static/css/spectre-icons.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
static/css/spectre.min.css vendored
View File

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