From 8f8db6555d28c77997960944d67361cadaaf0e13 Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Sun, 30 Aug 2020 14:50:33 -0400 Subject: [PATCH] Bring in some retro oldschool fonts from https://int10h.org/oldschool-pc-fonts/fontlist/ --- sass/_typography.scss | 22 ++++-- sass/_variables.scss | 117 +++++++++++++++---------------- src/components/Footer.svelte | 39 +++++++++++ src/components/Icon.svelte | 28 +++++--- src/components/Sidebar.svelte | 20 ++++++ src/node_modules/buttons.js | 2 +- src/routes/_layout.svelte | 48 ++++++++++++- src/routes/index.svelte | 20 ++++-- static/Tandy1K.woff | Bin 0 -> 9124 bytes static/Tandy1KMono.woff | Bin 0 -> 9808 bytes static/css/spectre-exp.min.css | 2 +- static/css/spectre-icons.min.css | 2 +- static/css/spectre.min.css | 2 +- 13 files changed, 213 insertions(+), 89 deletions(-) create mode 100644 src/components/Footer.svelte create mode 100644 src/components/Sidebar.svelte create mode 100644 static/Tandy1K.woff create mode 100644 static/Tandy1KMono.woff diff --git a/sass/_typography.scss b/sass/_typography.scss index 67707f8..07e4408 100644 --- a/sass/_typography.scss +++ b/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; diff --git a/sass/_variables.scss b/sass/_variables.scss index 788e0fe..8972782 100644 --- a/sass/_variables.scss +++ b/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; - diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte new file mode 100644 index 0000000..c8b103d --- /dev/null +++ b/src/components/Footer.svelte @@ -0,0 +1,39 @@ + + + + + diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte index 9a4c7c6..c4f752e 100644 --- a/src/components/Icon.svelte +++ b/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=""; + - - - + {#if code} + { code } + {:else} + + + + {/if} diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte new file mode 100644 index 0000000..d8622ac --- /dev/null +++ b/src/components/Sidebar.svelte @@ -0,0 +1,20 @@ + + + + +HELP +
+
+OPERATIONS:
+
+{#each ops as op}
+{ op + '\n'}
+{/each}
+
+
diff --git a/src/node_modules/buttons.js b/src/node_modules/buttons.js index 730c6ed..c68dd48 100644 --- a/src/node_modules/buttons.js +++ b/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)); diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 1a5e350..e205263 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -1,9 +1,51 @@ -
- -
+
+ + +
+
+
+
+ + ?¿ + + + + + + +
+ +
+
+
+
+
+ +
+
diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 6a19a57..b946f9d 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,5 +1,5 @@ - Buttons the Programming Language + Buttons the Computer