feat: add assets, finish splash screen (#2)

* feat: add assets, finish splash screen

* add css vars, use grey for controls

Author: joahg

public/cloudflare.png

@@ -4,23 +4,27 @@ const Splash = () => {
       <div className="quadrants">
         <div className="quadrant">
           <div className="quadrant-content">
-            <h1>Welcome to Austin JavaScript</h1>
+            <img src="/logo.png" />
+            <h1>Welcome to<br/>Austin JavaScript</h1>
             <p>we’re glad you’re here :)</p>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h2>Join us on Discord</h2>
+            <img src="/discord-qr.png" width="300" />
+            <h2>Join us on <img src="/discord-mark-black.png" style={ { margin: '-5px 0', height: 30 } }/> Discord</h2>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h3>sponsored by</h3>
+            <img src="/shirt-qr.png" width="300" />
+            <h2>Austin JavaScript Shirts are $25</h2>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h3>sponsored by</h3>
+            <h2>Sponsored by</h2>
+            <img src="/cloudflare.png"/>
           </div>
         </div>
       </div>

public/discord-mark-black.png

@@ -5,6 +5,11 @@
 @import "./settings.scss";
 
 :root {
+  --r-orange: #{$orange};
+  --r-black: #{$black};
+  --r-white: #{$white};
+  --r-gray: #{$gray};
+  --r-maroon: #{$maroon};
   --r-background-color: #{$backgroundColor};
   --r-main-font: #{$mainFont};
   --r-main-font-size: #{$mainFontSize};

public/discord-qr.png

@@ -41,4 +41,8 @@
 .quadrant:nth-child(4) {
   background-color: $maroon;
   color: $white;
+
+  h2 {
+    color: rgba(255, 255, 255, 0.59);
+  }
 }

public/logo.png

@@ -1,10 +1,10 @@
 @use "sass:color";
 
-$orange: rgb(232, 173, 66);
+$orange: #F2AC1B;
 $black: #000;
 $white: #fff;
-$gray: rgb(166, 161, 150);
-$maroon: rgb(148, 76, 116);
+$gray: #A6A194;
+$maroon: #9D4676;
 
 // Base settings for all themes that can optionally be
 // overridden by the super-theme
@@ -14,7 +14,7 @@ $backgroundColor: $white;
 
 
 // Primary/body text
-$mainFont: 'Lato', sans-serif;
+$mainFont: 'Inter', sans-serif;
 $mainFontSize: 20px;
 $mainColor: #eee;
 
@@ -23,7 +23,7 @@ $blockMargin: 20px;
 
 // Headings
 $headingMargin: 0 0 $blockMargin 0;
-$headingFont: 'Lato', sans-serif;
+$headingFont: 'Inter', sans-serif;
 $headingColor: $black;
 $headingLineHeight: 1.2;
 $headingLetterSpacing: normal;
@@ -32,9 +32,9 @@ $headingTextShadow: none;
 $headingFontWeight: bold;
 $heading1TextShadow: $headingTextShadow;
 
-$heading1Size: 3.77em;
-$heading2Size: 2.11em;
-$heading3Size: 1.55em;
+$heading1Size: 2em;
+$heading2Size: 1.6rem;
+$heading3Size: 1.3em;
 $heading4Size: 1.00em;
 
 $codeFont: monospace;

public/shirt-qr.png

@@ -322,7 +322,7 @@
  *********************************************/
 
 .reveal .controls {
-  color: var(--r-link-color);
+  color: var(--r-gray);
 }