From 061e510b4479fcd98bded6f77705da265cf2d4b1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 2 Feb 2022 23:34:38 -0800
Subject: [PATCH] Update variables

---
 styles/globals.scss   | 43 ++++++++++++++++++++++---------------------
 styles/variables.scss | 13 ++++++++-----
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/styles/globals.scss b/styles/globals.scss
index 1064b1b5..3b04bed6 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -1,42 +1,43 @@
 @import '~meyer-reset-scss';
 
 html {
-  background: $grey-90;
-  font-size: 62.5%;
-  padding: $unit * 2;
+    background: $background-color;
+    font-size: 62.5%;
+    padding: $unit * 2;
 }
 
 body {
-  -webkit-font-smoothing: antialiased;
-  font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 1.4rem;
-  
-  &.no-scroll {
-      overflow: hidden;
-  }
+    -webkit-font-smoothing: antialiased;
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.4rem;
+    
+    &.no-scroll {
+        overflow: hidden;
+    }
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 button, input {
-  font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 h1, h2, h3, p {
-  color: $grey-00;
+    color: $grey-00;
 }
 
 h1 {
-  font-size: 2.1rem;
-  font-weight: $medium;
-  text-align: center;
+    font-size: 2.1rem;
+    font-weight: $medium;
+    text-align: center;
 }
 
 #Content {
-  display: flex;
-  flex-direction: column;
-  gap: $unit * 3;
-  margin-top: $unit * 3;
-}
\ No newline at end of file
+    display: flex;
+    flex-direction: column;
+    gap: $unit * 3;
+    margin-top: $unit * 3;
+    min-width: 752px;
+
diff --git a/styles/variables.scss b/styles/variables.scss
index cb23afef..57418742 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -1,7 +1,8 @@
 // @import 'include-media/dist/_include-media';
 
 // Breakpoints
-$breakpoints: (small: 320px, medium: 768px, large: 1024px);
+$breakpoints: (small: 320px, medium: 800px, large: 1024px);
+$medium-screen: 800px;
 
 // Sizing
 $unit: 8px;
@@ -12,6 +13,7 @@ $grey-10: #777;
 $grey-50: #888;
 $grey-80: #E9E9E9;
 $grey-90: #F5F5F5;
+$background-color: $grey-90;
 
 $blue: #61B3FF;
 $red: #FF6161;
@@ -23,10 +25,11 @@ $medium: 500;
 $bold: 600;
 
 // Font size
-$font-small:    12px;
-$font-regular:  14px;
-$font-large:    18px;
-$font-xlarge:   21px;
+$font-small:    11px;
+$font-button:   15px;
+$font-regular:  16px;
+$font-large:    21px;
+$font-xlarge:   24px;
 
 // Scale factors
 $scale-wide: scale(1.05, 1.05);