progressbar + font + rapid media queries

Author: FabKaiz

public/fonts/ModernWarfare-8MM6z.ttf

@@ -112,9 +112,13 @@ function App() {
   return (
       <>
 
-        <h1>CAMO MW3</h1>
+        <header className="header">
+          <h1>CAMO MWIII</h1>
 
-        <div className="camo__list-container">
+          <button onClick={resetAllProgress}>Reset all progress</button>
+        </header>
+
+        <main className="camo__list-container">
           <div className="row__title">
             <h2 className="weapon">Weapon</h2>
             <h2 className="camos">Camos Multiplayer</h2>
@@ -137,12 +141,15 @@ function App() {
                 </ul>
               </div>
           ))}
-        </div>
-
-        <ProgressBar progress={progress} />
-        <ProgressBar progress={progressZombie} zombie={true} />
+          <div className="copyright">
+            <p>Created by <a href="https://github.com/FabKaiz">FabKaiz</a></p>
+          </div>
+        </main>
 
-        <button onClick={resetAllProgress}>Reset all progress</button>
+        <div className="progress__bars-container">
+          <ProgressBar progress={progress} />
+          <ProgressBar progress={progressZombie} zombie={true} />
+        </div>
       </>
   )
 }

src/App.jsx

@@ -2,8 +2,8 @@ import "./ProgressBar.scss"
 
 const ProgressBar = ({progress, zombie}) => {
   return (
-      <div className="progress-bar-container">
-        <div className="progress-bar" style={{width: `${progress}%`}}>
+      <div className="progress__bar-container">
+        <div className={zombie ? "progress-bar zombie" : "progress-bar"} style={{width: `${progress}%`}}>
           <span>{zombie ? "Progress zombie" : "Progress"}: {progress.toFixed(2)}%</span>
         </div>
       </div>

src/components/progressBar/ProgressBar.jsx

@@ -0,0 +1,26 @@
+@import "../../styles/global/helpers.scss";
+
+.progress__bar-container {
+    position: relative;
+    background: #212121;
+
+    .progress-bar {
+        background-image:  $gradient-multiplayer;
+        padding: 1.5rem 0;
+        transition: width 1s ease;
+
+        &.zombie {
+            background-image: $gradient-zombie;
+        }
+    }
+
+    span {
+        white-space: nowrap;
+        text-shadow: #212121 1px 1px 4px;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}

src/components/progressBar/ProgressBar.scss

@@ -6,7 +6,10 @@
 
     border-radius: 0.4rem;
     margin-bottom: 1rem;
-    overflow: hidden;
+    //overflow-x: scroll;
+    @include media-up(md) {
+        overflow: hidden;
+    }
 
     h3 {
         background: $dark-grey;
@@ -88,9 +91,14 @@
         &:hover {
             &:after {
                 opacity: 1;
+            }
+        }
 
-                // Remove
-                //background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ee5253"><path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"></path></svg>');
+        &.active {
+            &:hover {
+                &:after {
+                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ee5253"><path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"></path></svg>');
+                }
             }
         }
     }

src/components/weaponItem/WeaponItem.scss

@@ -5,4 +5,7 @@ $grey: #C4C4C4;
 $dark-grey: #2a2a2a;
 
 $zombie: #11373b;
-$multiplayer: #241649;
+$multiplayer: #241649;
+
+$gradient-zombie: linear-gradient(49deg, rgba(174, 227, 238, 1) 0%, rgba(148, 187, 233, 1) 56%, rgba(181, 220, 203, 1) 100%);
+$gradient-multiplayer: linear-gradient(83deg, rgba(48,3,68,1) 0%, rgba(73,18,94,1) 33%, rgba(129,15,67,1) 71%, rgba(93,19,89,1) 97%);

src/styles/global/_colors.scss

@@ -1,3 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 
-$font-base: 'Roboto', sans-serif;
+$font-base: 'Roboto', sans-serif;
+$font-custom: 'MW', sans-serif;
+
+
+@font-face {
+    font-family: 'MW';
+    font-style: normal;
+    font-weight: 400;
+    src: local('MW'), url('fonts/ModernWarfare-8MM6z.ttf') format('truetype');
+}

src/styles/global/_fonts.scss

@@ -4,17 +4,45 @@
     background: $black;
     color: $white;
 
-    h1 {
-        font-size: 3.5rem;
-        text-align: center;
-        margin: 1rem 0;
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 2rem;
+
+        h1 {
+            font-size: 3.5rem;
+            text-align: center;
+            margin: 1rem 0;
+            font-family: $font-custom;
+        }
+
+        button {
+            background: none;
+            border: none;
+            color: $white;
+            font-size: 1.25rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-family: $font-custom;
+
+            &:hover {
+                color: $grey;
+            }
+        }
     }
 
     .camo__list-container {
         max-width: 1200px;
-        margin: 0 auto;
+        margin: 0 auto 6rem;
         width: 100%;
-        padding: 0 5rem;
+        overflow-x: scroll;
+        padding: 0 1rem;
+
+        @include media-up(sm) {
+            padding: 0 5rem;
+            overflow: unset;
+        }
 
         .separator {
             background: linear-gradient(to right, $multiplayer 0%, $zombie 100%);
@@ -30,25 +58,37 @@
             z-index: 1;
             margin-bottom: 2rem;
             border-radius: 0.4rem;
-            overflow: hidden;
+            //overflow-x: scroll;
+            @include media-up(md) {
+                overflow: hidden;
+            }
 
             .separator {
 
             }
 
             .weapon {
                 background: #313030;
+                font-family: $font-custom;
                 padding: 1rem;
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
 
             .camos {
                 background: $multiplayer;
+                font-family: $font-custom;
                 padding: 1rem;
+                min-width: 200px;
             }
 
             .zombies {
+                font-family: $font-custom;
                 background: $zombie;
                 padding: 1rem;
+                min-width: 200px;
+                border-radius: 0 0.4rem 0.4rem 0;
             }
 
         }
@@ -62,4 +102,22 @@
             }
         }
     }
+
+    .progress__bars-container {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    .copyright {
+        color: #C4C4C4;
+
+        a {
+            color: #e3d6ff;
+            font-family: $font-custom;
+        }
+    }
 }