More sketching on showcase

AgnosticUI · Sep 10, 2020 · f613e2e · f613e2e
1 parent 7c2fc0b
commit f613e2e
Show file tree

Hide file tree

Showing 5 changed files with 308 additions and 48 deletions.
diff --git a/showcase/public/highlightjs.css b/showcase/public/highlightjs.css
@@ -3,64 +3,88 @@
 Atom One Light by Daniel Gamage
 Original One Light Syntax theme from https://github.com/atom/one-light-syntax
 
-base:    #fafafa
-mono-1:  #383a42
-mono-2:  #686b77
-mono-3:  #a0a1a7
-hue-1:   #0184bb
-hue-2:   #4078f2
-hue-3:   #a626a4
-hue-4:   #50a14f
-hue-5:   #e45649
-hue-5-2: #c91243
-hue-6:   #986801
-hue-6-2: #c18401
+REFACTORED FOR SHOWCASE
+-----------------------
 
+original base:    #fafafa
+base:   var(--gray-light-warm)
+
+--hljs-accent-N colors are defined in showcase/public/index.html
+
+      --hljs-accent-1: #292323;
+      --hljs-accent-2: #a0a1a7;
+      --hljs-accent-3: #b53ab4;
+      --hljs-accent-4: #e45649;
+      --hljs-accent-5: #0184bb;
+      --hljs-accent-6: #54aa8b;
+      --hljs-accent-7: #d89a09;
+      --hljs-accent-8: #009bac;
+      --hljs-accent-9: #4f79d5;
+        old mono-1:  #383a42
+        mono-1:  #292323;
+        mono-2:  #686b77
+        mono-3:  #a0a1a7
+        hue-1:   #0184bb
+        old hue-2:   #4078f2
+        hue-2:   #4f79d5
+        old hue-3:   #a626a4
+        hue-3:   #b53ab4;
+        old hue-4:   #50a14f
+        hue-4:   #54aa8b;
+        hue-5:   #e45649
+        hue-5-2: #c91243
+        old hue-6:   #986801
+        hue-6:   #009bac
+        old hue-6-2: #c18401
+        hue-6-2: #d89a09;
 */
 
 .hljs {
+  /* New -- essentially GitHub's monospace stack */
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;;
+  font-size: var(--hljs-font-size);
   display: block;
   overflow-x: auto;
-  padding: 0.5em;
-  color: #383a42;
-  background: #fafafa;
+  padding: 8px 32px; /* appears to be auto-vertical gutters so only 8px added */
+  color: var(--hljs-accent-1);
+  background: var(--gray-light-warm);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #a0a1a7;
+  color: var(--hljs-accent-2);
   font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-  color: #a626a4;
+  color: var(--hljs-accent-3);
 }
 
 .hljs-section,
 .hljs-name,
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-  color: #e45649;
+  color: var(--hljs-accent-4);
 }
 
 .hljs-literal {
-  color: #0184bb;
+  color: var(--hljs-accent-5);
 }
 
 .hljs-string,
 .hljs-regexp,
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta-string {
-  color: #50a14f;
+  color: var(--hljs-accent-6);
 }
 
 .hljs-built_in,
 .hljs-class .hljs-title {
-  color: #c18401;
+  color: var(--hljs-accent-7);
 }
 
 .hljs-attr,
@@ -71,16 +95,17 @@ hue-6-2: #c18401
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-  color: #986801;
+  color: var(--hljs-accent-8);
 }
 
+.hljs-params, /* new */
 .hljs-symbol,
 .hljs-bullet,
 .hljs-link,
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-  color: #4078f2;
+  color: var(--hljs-accent-9);
 }
 
 .hljs-emphasis {

diff --git a/showcase/public/index.html b/showcase/public/index.html
@@ -11,15 +11,28 @@
   <style>
     :root {
       --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      --app-font-header-family: Georgia, Zilla Slab, serif;
+      --app-font-size: 21px;
+      --app-font-header-weight: 300;
       --app-width-initial: 1072px;
       --agnostic-header-content-width: var(--app-width-initial);
       --gray-light-warm: #fff7f7;
+      --gray-warm: #e2c0c0;
       --gray-light: #e9e9e9;
       --gray-mid: #d8d8d8;
       --gray: #bbbbbb;
       --gray-dark: #777777;
+      --mint-green: #54aa8b;
       --font-color: #333333;
+      --hljs-font-size: 18px;
+      --hljs-accent-1: #292323;
+      --hljs-accent-2: #a0a1a7;
+      --hljs-accent-3: #b53ab4;
+      --hljs-accent-4: #e45649;
+      --hljs-accent-5: #0184bb;
+      --hljs-accent-6: var(--mint-green);
+      --hljs-accent-7: #d89a09;
+      --hljs-accent-8: #009bac;
+      --hljs-accent-9: #4f79d5;
 
       /* For the lofi component cards */
       --agnosticui-card-boxshadow1-offset-x: 0px;
@@ -38,6 +51,21 @@
     body {
       font-family: var(--app-font-family);
       color: var(--font-color);
+      font-size: var(--app-font-size);
+      line-height: 1.4;
+      scroll-behavior: smooth;
+    }
+
+    a {
+      /* This gradient is curated to work with the code block backgrounds */
+      background: linear-gradient(transparent 70%, var(--gray-warm) 0);
+      text-decoration: none;
+      font-weight: 700;
+    }
+
+    a,
+    a:hover {
+      color: var(--font-color);
     }
 
     h1,
@@ -47,16 +75,58 @@
     h5,
     h6 {
       font-family: var(--app-font-family);
+      font-weight: var(--app-font-header-weight);
+    }
+
+    /*
+:root {
+  --Space-80: 80px;
+  --Space-72: 72px;
+  --Space-64: 64px;
+  --Space-56: 56px;
+  --Space-48: 48px;
+  --Space-40: 40px;
+  --Space-32: 32px;
+  --Space-24: 24px;
+  --Space-16: 16px;
+  --Space-14: 14px;
+  --Space-12: 12px;
+  --Space-10: 10px;
+  --Space-8: 8px;
+  --Space-6: 6px;
+  --Space-4: 4px;
+}
+*/
+    h1 {
+      font-size: 64px;
+      margin-bottom: 80px;
+    }
+
+    h2 {
+      font-size: 48px;
+      margin-bottom: 64px;
+    }
+
+    h3 {
+      font-size: 32px;
+      margin-bottom: 48px;
     }
 
     h4 {
       font-size: 21px;
+      margin-bottom: 36px;
     }
 
     h6 {
       font-size: 11px;
       text-transform: uppercase;
     }
+
+    /* We're mainly using the <pre> for code snippets */
+    p,
+    pre {
+      margin: 32px auto;
+    }
   </style>
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>