From 7537da2f036c8ec437f1f4a672f489b709108142 Mon Sep 17 00:00:00 2001
From: Jesus Gil <jesusgil.dev@gmail.com>
Date: Mon, 7 Mar 2022 11:24:48 -0600
Subject: [PATCH 1/2] feat:sticky navbar

---
 _styles/main.css | 63 ++++++++++++++++++++++--------------------------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/_styles/main.css b/_styles/main.css
index 8737367cc5..4583d29e5d 100644
--- a/_styles/main.css
+++ b/_styles/main.css
@@ -3,7 +3,7 @@
 * This file is part of elementary.io   *
 ***************************************/
 
-@import url('/fonts/inter.css');
+@import url("/fonts/inter.css");
 
 :root {
   --ui-font: Inter, Helvetica, Roboto, sans-serif;
@@ -19,7 +19,6 @@ body {
   font-weight: 400;
   margin: 0;
   min-height: 100vh;
-  overflow-x: hidden;
 }
 
 *,
@@ -129,7 +128,7 @@ p.small-label {
 }
 
 q {
-  font-family: 'Marck Script', cursive;
+  font-family: "Marck Script", cursive;
   font-size: 24px;
   font-weight: 400;
   margin-bottom: 10px;
@@ -245,6 +244,11 @@ nav {
   min-width: 100%;
   overflow-x: auto;
   white-space: nowrap;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #fff;
 }
 
 @media (max-width: 768px) {
@@ -378,6 +382,7 @@ body {
 
 #content-container {
   flex-grow: 1;
+  overflow-x: hidden;
 }
 
 footer {
@@ -779,11 +784,15 @@ select,
 .button {
   appearance: none;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.04));
+  background-image: linear-gradient(
+    to bottom,
+    transparent,
+    transparent 50%,
+    rgba(0, 0, 0, 0.04)
+  );
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
     inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
     0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -808,12 +817,10 @@ button,
 button:focus,
 .button:focus {
   border-color: rgba(77, 156, 209, 0.8);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
     inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
-    0 3px 6px rgba(12, 128, 200, 0.16),
-    0 3px 6px rgba(12, 128, 200, 0.23);
+    0 3px 6px rgba(12, 128, 200, 0.16), 0 3px 6px rgba(12, 128, 200, 0.23);
   text-decoration: none;
 }
 
@@ -825,8 +832,7 @@ button.active,
   background-color: rgba(0, 0, 0, 0.05);
   background-image: none;
   border-color: rgba(0, 0, 0, 0.25);
-  box-shadow:
-    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05),
     0 1px 0 0 rgba(255, 255, 255, 0.3);
 }
 
@@ -856,8 +862,7 @@ button.suggested-action,
 .button.flat:focus,
 .button.flat:hover {
   background: rgba(0, 0, 0, 0.03);
-  box-shadow:
-    0 2px 3px -1px rgba(0, 0, 0, 0.08),
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08),
     0 5px 10px -2px rgba(0, 0, 0, 0.15);
 }
 
@@ -937,10 +942,8 @@ input:not([type="submit"]):not(.button) {
   background-image: linear-gradient(to bottom, #fafafa, #fdfdfd);
   border: 1px solid rgba(0, 0, 0, 0.22);
   border-radius: 3px;
-  box-shadow:
-    inset 0 1px 0 0 rgba(0, 0, 0, 0.04),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.02),
-    0 1px 0 1px rgba(255, 255, 255, 0.3);
+  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.04),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.02), 0 1px 0 1px rgba(255, 255, 255, 0.3);
   color: #323232;
   outline: 0;
   text-shadow: 0 1px rgba(255, 255, 255, 0.4);
@@ -970,8 +973,7 @@ input::-webkit-inner-spin-button {
 
 input:focus:not([type="submit"]):not(.button) {
   border-color: rgba(61, 155, 218, 0.8);
-  box-shadow:
-    inset 0 0 0 1px rgba(61, 155, 218, 0.23),
+  box-shadow: inset 0 0 0 1px rgba(61, 155, 218, 0.23),
     0 1px 0 1px rgba(255, 255, 255, 0.3);
   outline: none;
   transition: all 200ms ease-in;
@@ -1095,12 +1097,9 @@ input:focus::placeholder {
 .modal {
   background-color: #f5f5f5;
   border-radius: 4px;
-  box-shadow:
-    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset 0 1px 0 0 #fff,
-    0 0 0 1px rgba(0, 0, 0, 0.2),
-    0 10px 20px rgba(0, 0, 0, 0.19),
+  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset -1px 0 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 0 #fff,
+    0 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.19),
     0 6px 6px rgba(0, 0, 0, 0.23);
   max-height: 100vh;
   max-width: 100vw;
@@ -1137,14 +1136,10 @@ input:focus::placeholder {
 .dialog {
   background-color: #f5f5f5;
   border-radius: 3px;
-  box-shadow:
-    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset 0 1px 0 0 #fff,
-    0 0 0 1px rgba(0, 0, 0, 0.2),
-    0 8px 20px 1px rgba(0, 0, 0, 0.14),
-    0 3px 28px 2px rgba(0, 0, 0, 0.12),
-    0 5px 10px -3px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset -1px 0 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 0 #fff,
+    0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 20px 1px rgba(0, 0, 0, 0.14),
+    0 3px 28px 2px rgba(0, 0, 0, 0.12), 0 5px 10px -3px rgba(0, 0, 0, 0.4);
   margin: 0 auto;
   padding: 12px;
   padding-top: 24px;

From 1d2f7a2f889284711203a564ad18236ae3ce2c27 Mon Sep 17 00:00:00 2001
From: Jesus Gil <jesusgil.dev@gmail.com>
Date: Mon, 7 Mar 2022 11:46:46 -0600
Subject: [PATCH 2/2] fix:auto formatted css styles

---
 _styles/main.css | 56 ++++++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/_styles/main.css b/_styles/main.css
index 4583d29e5d..46b48ce608 100644
--- a/_styles/main.css
+++ b/_styles/main.css
@@ -3,7 +3,7 @@
 * This file is part of elementary.io   *
 ***************************************/
 
-@import url("/fonts/inter.css");
+@import url('/fonts/inter.css');
 
 :root {
   --ui-font: Inter, Helvetica, Roboto, sans-serif;
@@ -128,7 +128,7 @@ p.small-label {
 }
 
 q {
-  font-family: "Marck Script", cursive;
+  font-family: 'Marck Script', cursive;
   font-size: 24px;
   font-weight: 400;
   margin-bottom: 10px;
@@ -784,15 +784,11 @@ select,
 .button {
   appearance: none;
   background-color: transparent;
-  background-image: linear-gradient(
-    to bottom,
-    transparent,
-    transparent 50%,
-    rgba(0, 0, 0, 0.04)
-  );
+  background-image: linear-gradient(to bottom, transparent, transparent 50%,rgba(0, 0, 0, 0.04));
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
     inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
     0 1px 0 0 rgba(255, 255, 255, 0.15);
@@ -817,10 +813,12 @@ button,
 button:focus,
 .button:focus {
   border-color: rgba(77, 156, 209, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
     inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
     inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
-    0 3px 6px rgba(12, 128, 200, 0.16), 0 3px 6px rgba(12, 128, 200, 0.23);
+    0 3px 6px rgba(12, 128, 200, 0.16),
+    0 3px 6px rgba(12, 128, 200, 0.23);
   text-decoration: none;
 }
 
@@ -832,7 +830,8 @@ button.active,
   background-color: rgba(0, 0, 0, 0.05);
   background-image: none;
   border-color: rgba(0, 0, 0, 0.25);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+  box-shadow:
+    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
     0 1px 0 0 rgba(255, 255, 255, 0.3);
 }
 
@@ -862,7 +861,8 @@ button.suggested-action,
 .button.flat:focus,
 .button.flat:hover {
   background: rgba(0, 0, 0, 0.03);
-  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.08),
+  box-shadow:
+    0 2px 3px -1px rgba(0, 0, 0, 0.08),
     0 5px 10px -2px rgba(0, 0, 0, 0.15);
 }
 
@@ -942,8 +942,10 @@ input:not([type="submit"]):not(.button) {
   background-image: linear-gradient(to bottom, #fafafa, #fdfdfd);
   border: 1px solid rgba(0, 0, 0, 0.22);
   border-radius: 3px;
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.04),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.02), 0 1px 0 1px rgba(255, 255, 255, 0.3);
+  box-shadow:
+    inset 0 1px 0 0 rgba(0, 0, 0, 0.04),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.02),
+    0 1px 0 1px rgba(255, 255, 255, 0.3);
   color: #323232;
   outline: 0;
   text-shadow: 0 1px rgba(255, 255, 255, 0.4);
@@ -973,7 +975,8 @@ input::-webkit-inner-spin-button {
 
 input:focus:not([type="submit"]):not(.button) {
   border-color: rgba(61, 155, 218, 0.8);
-  box-shadow: inset 0 0 0 1px rgba(61, 155, 218, 0.23),
+  box-shadow:
+    inset 0 0 0 1px rgba(61, 155, 218, 0.23),
     0 1px 0 1px rgba(255, 255, 255, 0.3);
   outline: none;
   transition: all 200ms ease-in;
@@ -1097,9 +1100,12 @@ input:focus::placeholder {
 .modal {
   background-color: #f5f5f5;
   border-radius: 4px;
-  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset -1px 0 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 0 #fff,
-    0 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.19),
+  box-shadow:
+    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset 0 1px 0 0 #fff,
+    0 0 0 1px rgba(0, 0, 0, 0.2),
+    0 10px 20px rgba(0, 0, 0, 0.19),
     0 6px 6px rgba(0, 0, 0, 0.23);
   max-height: 100vh;
   max-width: 100vw;
@@ -1136,10 +1142,14 @@ input:focus::placeholder {
 .dialog {
   background-color: #f5f5f5;
   border-radius: 3px;
-  box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
-    inset -1px 0 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 0 #fff,
-    0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 20px 1px rgba(0, 0, 0, 0.14),
-    0 3px 28px 2px rgba(0, 0, 0, 0.12), 0 5px 10px -3px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
+    inset 0 1px 0 0 #fff,
+    0 0 0 1px rgba(0, 0, 0, 0.2),
+    0 8px 20px 1px rgba(0, 0, 0, 0.14),
+    0 3px 28px 2px rgba(0, 0, 0, 0.12),
+    0 5px 10px -3px rgba(0, 0, 0, 0.4);
   margin: 0 auto;
   padding: 12px;
   padding-top: 24px;