From d844a1b3ef90b45d7b584f0821b16360985b69c7 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Fri, 28 Jul 2023 12:48:06 -0400
Subject: [PATCH] style: format

---
 ui/styles/global.scss | 168 ++++++++++++++++++++++--------------------
 1 file changed, 87 insertions(+), 81 deletions(-)

diff --git a/ui/styles/global.scss b/ui/styles/global.scss
index 1788968..4294f53 100644
--- a/ui/styles/global.scss
+++ b/ui/styles/global.scss
@@ -2,43 +2,43 @@
 @import "vars";
 
 @font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2');
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2');
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2');
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2');
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
 }
 
 @font-face {
-  font-family: 'Jaldi';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../fonts/Jaldi-Regular.woff2") format('woff2');
+    font-family: 'Jaldi';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../fonts/Jaldi-Regular.woff2") format('woff2');
 }
 
 @tailwind base;
@@ -46,82 +46,88 @@
 @tailwind utilities;
 
 body {
-  background: #080808;
+    background: #080808;
 }
 
 #app {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  font-family: $font-family-jaldi;
-  @include fluid-font-size(0.625rem);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-family: $font-family-jaldi;
+    @include fluid-font-size(0.625rem);
 }
 
 header {
-  padding: 2.5em;
-  color: #fff;
-  background: #080808;
-  border-bottom: 0.1em solid #363636;
+    padding: 2.5em;
+    color: #fff;
+    background: #080808;
+    border-bottom: 0.1em solid #363636;
 
-  img {
-    @include fluid-width-height(7.875rem, 2.625rem);
-  }
+    img {
+        @include fluid-width-height(7.875rem, 2.625rem);
+    }
 }
 
 main {
-  flex-grow: 1;
-  overflow: hidden;
+    flex-grow: 1;
+    overflow: hidden;
 }
 
 .btn-wrapper {
-  display: flex;
-  gap: 2em;
+    display: flex;
+    gap: 2em;
+
+    button, > a {
+        flex: 1;
+    }
+
+    > a {
+        flex: 1
+    }
 
-  button {
-    flex: 1;
-  }
 }
 
-.btn-main {
-  display: inline-block;
-  padding: 1em;
-  @include fluid-font-size(1.25rem);
-  line-height: 1;
-  color: #fff;
-  background: #252525;
-  border: 0.05em solid #252525;
-  border-radius: 0.25em;
-  transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
-  white-space: nowrap;
-
-  &:hover {
-    background: #2e2e2e;
-  }
-
-  &.btn-green {
-    color: #080808;
-    background: #62c554;
-    border-color: #62c554;
+.btn-wrapper > .btn-main, .btn-wrapper > a  {
+    text-align: center;
+    display: inline-block;
+    padding: 1em;
+    @include fluid-font-size(1.25rem);
+    line-height: 1;
+    color: #fff;
+    background: #252525;
+    border: 0.05em solid #252525;
+    border-radius: 0.25em;
+    transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
+    white-space: nowrap;
 
     &:hover {
-      background: #6ee65d;
-    }
-  }
-
-  &.btn-black {
-    background: #080808;
-    border-color: #777;
-
-    &:hover {
-      border-color: #a1a1a1;
+        background: #2e2e2e;
     }
 
-    &.gray-text {
-      color: #777;
+    &.btn-green {
+        color: #080808;
+        background: #62c554;
+        border-color: #62c554;
 
-      &:hover {
-        color: #a1a1a1;
-      }
+        &:hover {
+            background: #6ee65d;
+        }
+    }
+
+    &.btn-black {
+        background: #080808;
+        border-color: #777;
+
+        &:hover {
+            border-color: #a1a1a1;
+        }
+
+        &.gray-text {
+            color: #777;
+
+            &:hover {
+                color: #a1a1a1;
+            }
+        }
     }
-  }
 }