Browse Source

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

master
Zed A. Shaw 1 year ago
parent
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

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

117
sass/_variables.scss

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

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

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

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

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

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

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

Binary file not shown.

BIN
static/Tandy1KMono.woff

Binary file not shown.

2
static/css/spectre-exp.min.css

File diff suppressed because one or more lines are too long

2
static/css/spectre-icons.min.css

File diff suppressed because one or more lines are too long

2
static/css/spectre.min.css

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