H2 and Sidebar styling

Author: grgur

src/components/Products/index.js

@@ -30,7 +30,7 @@ function Products() {
 
   return (
     <section>
-      <h2>Pick your next Hog ide</h2>
+      <h2>Pick your next Hog ride</h2>
       <div className={s.animated}>
         {colors.map(([background, fill], idx) => (
           <motion.a

src/components/Sidebar/styles.css

@@ -41,7 +41,7 @@ Note: Beware of modifying this element as it can break the animations - you shou
 .bm-menu {
   background: var(--color-background);
   font-family: var(--font-primary);
-  padding: 2.5em 1.5em 0;
+  padding: 2.5em 0.825em 0;
   font-size: 1.15em;
 }
 
@@ -58,35 +58,22 @@ Note: Beware of modifying this element as it can break the animations - you shou
 }
 
 .bm-menu li {
-  border-radius: 5px;
-  height: 40px;
+  --canvas-color: #030003;
+  display: flex !important;
   width: 100%;
+  height: 40px;
   opacity: 0;
-  margin-bottom: 10px;
+  color: var(--color-primary);
+  background: var(--canvas-color);
+  border: 4px solid var(--color-primary);
+  border-radius: 5px;
   transform-origin-y: 0%;
-  color: white;
-  display: flex !important;
   align-items: center;
-}
-
-.bm-menu li:nth-child(1) {
-  background: #f69a9a;
-}
-
-.bm-menu li:nth-child(2) {
-  background: #83ae9b;
-}
-
-.bm-menu li:nth-child(3) {
-  background: #43415f;
-}
-
-.bm-menu li:nth-child(4) {
-  background: #ef4566;
-}
-
-.bm-menu li:nth-child(5) {
-  background: #f9cdae;
+  text-transform: uppercase;
+  font-weight: 800;
+  box-shadow: 0 0 1px 5px var(--canvas-color);
+  padding: 0.8rem;
+  margin: 1rem 0;
 }
 
 /* Morph shape necessary with bubble or elastic */

src/index.css

@@ -36,11 +36,8 @@ h1 {
 }
 
 h2 {
-  --canvas-color: #030003;
   color: var(--color-primary);
-  background: var(--canvas-color);
-  border: 4px solid var(--color-primary);
-  box-shadow: 0 0 1px 4px var(--canvas-color);
+  border-bottom: 4px solid var(--color-primary);
   padding: 0.8rem;
   text-transform: uppercase;
   font-weight: 800;