Merge pull request #4 from nuoxoxo/23

23
nuoxoxo · Aug 9, 2023 · 69ac1be · 69ac1be
2 parents 0229c08 + 3efd3a1
commit 69ac1be
Showing 1 changed file with 56 additions and 58 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -1,90 +1,87 @@
-:root {
+$FontText: "Courier New", Courier, monospace, Consolas;
+$FontSize: 42px;
+$FontSizeHalf: calc(#{$FontSize} / 2);
+$FontSize2X: calc(#{$FontSize} * 2);
+$FontSize3X: calc(#{$FontSize} * 3);
+$BtnWaterGreen: #23aeba;
+$DadMarginH: 20%;
+$DadMarginV: 18%;
+
+@mixin font-styles {
+  font-family: $FontText;
+}
 
-  --FONT-TEXT: "Courier New", Courier, monospace, Consolas;
-  --FONT-SIZE: 42px;
-  --FONT-SIZE-HALF: calc(var(--FONT-SIZE) / 2);
-  --FONT-SIZE-2X: calc(var(--FONT-SIZE) * 2);
-  --FONT-SIZE-3X: calc(var(--FONT-SIZE) * 3);
-  --BTN-WATER-GREEN: #23aeba;
-  --DAD-MARGIN-H: 20%;
-  --DAD-MARGIN-V: 18%;
+@mixin button-styles {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 10px;
+  padding: 4px 10px;
+  margin: 3px;
+  font-size: 16px;
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  color: white;
+  border: 1px solid $BtnWaterGreen;
+
+  &:hover {
+    background-color: $BtnWaterGreen;
+  }
 }
 
 body {
-
   margin: 0;
   background-color: black;
   color: white;
-  font-family: var(--FONT-TEXT);
+  @include font-styles;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, 0%);
-  font-size: var(--FONT-SIZE-HALF);
+  font-size: $FontSizeHalf;
 }
 
 pre, span, div {
-
-  font-family: var(--FONT-TEXT);
+  @include font-styles;
   margin: .3em;
 }
 
 .container-L {
-
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .container-R {
-
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   white-space: pre-wrap; /* show \n inside strings */
-}
 
-.container-R > span {
-  margin-bottom: 1.2em;
+  > span {
+    margin-bottom: 1.2em;
+  }
 }
 
 nav {
   margin-top: 5%;
-}
 
-nav > ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
+  > ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 button {
-  cursor: pointer;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 1px solid var(--BTN-WATER-GREEN);
-  border-radius: 10px;
-  padding: 4px 10px;
-  margin: 3px;
-  font-size: 16px;
-  background-color: transparent;
-  transition: background-color 0.2s ease;
-
-  color: white;
-}
-
-button:hover {
-
-  background-color: var(--BTN-WATER-GREEN);
+  @include button-styles;
 }
 
-
 .gallery {
-
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -94,18 +91,19 @@ button:hover {
   max-width: 1400px;
   margin: 0 auto;
   padding: 20px 10px;
-}
 
-.gallery img {
-  width: 100%;
-  max-width: 320px;
-  height: 300px;
-  max-height: 320px;
-  object-fit: cover;
-  border-radius: 10px;
+  img {
+    width: 100%;
+    max-width: 320px;
+    height: 300px;
+    max-height: 320px;
+    object-fit: cover;
+    border-radius: 10px;
+  }
 }
 
 .dad-jokes-text {
+  color: #FAEED5;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -114,7 +112,7 @@ button:hover {
   cursor: pointer;
   padding-bottom: 50vh;
   user-select: none;
-  margin-left: var(--DAD-MARGIN-H);
-  margin-right: var(--DAD-MARGIN-H);
-  margin-top: var(--DAD-MARGIN-V);
+  margin-left: $DadMarginH;
+  margin-right: $DadMarginH;
+  margin-top: $DadMarginV;
 }