convert to sty

BenMccray · Nov 5, 2024 · fe55c5d · fe55c5d
1 parent 3c1242e
commit fe55c5d
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 114 deletions.
diff --git a/league/index.html b/league/index.html
@@ -26,7 +26,7 @@
           </div>
 
           <div class="qol-div">
-            <input class="search-bar" type="text" placeholder="Search..." />
+            <input class="search-bar" type="search" placeholder="Search..." />
             <button class="color-scheme-btn" id="dark-mode">
               <svg
                 viewBox="0 0 24 24"
@@ -92,13 +92,11 @@
 
     <main>
       <ul class="league-selector">
-        <li class="selector-active"><button value="/sports/football/nfl/teams">NFL</button></li>
+        <li><button class="selector-active" value="/sports/football/nfl/teams">NFL</button></li>
         <li><button value="/sports/basketball/nba/teams">NBA</button></li>
-        <li><button value="/sports/football/ncaaf/teams">NCAAF</button></li>
-        <li>MLB</li>
-        <li>NHL</li>
-        <li>FIFA</li>
-        <li>UFC</li>
+        <li><button value="/sports/baseball/mlb/teams">MLB</button></li>
+        <li><button value="/sports/hockey/nhl/teams">NHL</button></li>
+
       </ul>
       <div class="select-prompt">
         <span class="select-text">Select League</span>
@@ -107,13 +105,11 @@
         </button>
       </div>
       <ul class="league-selector-sm" aria-hidden="true" role="region">
-        <li class="selector-active">NFL</li>
-        <li>NBA</li>
-        <li>NCAAF</li>
-        <li>MLB</li>
-        <li>NHL</li>
-        <li>FIFA</li>
-        <li>UFC</li>
+        <li><button class="selector-active" value="/sports/football/nfl/teams">NFL</button></li>
+        <li><button value="/sports/basketball/nba/teams">NBA</button></li>
+        <li><button value="/sports/baseball/mlb/teams">MLB</button></li>
+        <li><button value="/sports/hockey/nhl/teams">NHL</button></li>
+
       </ul>
       <ul id="leagues-list"></ul>
     </main>

diff --git a/saved/index.html b/saved/index.html
@@ -93,6 +93,15 @@
       <script src="../scripts/nav-sm.js"></script>
     </header>
     <main>
+      <button type="button" class="add-new-btn" id="add-new-btn">+</button>
+      <form id="add-new-modal">
+        <span>Create new save</span>
+        <input type="text" id="name-input" placeholder="Enter name..." required/>
+        <input type="text" id="description-input" placeholder="Enter description..."/>
+        <button type="submit" id="submit-btn">Submit</button>
+      </form>
+
+
       <article class="no-saved-notif">
         <h1>Nothing Saved</h1>
         <br />

diff --git a/scripts/load_league_teams.js b/scripts/load_league_teams.js
@@ -23,6 +23,8 @@ function loadTeams(query) {
         };
       });
 }
+
+
 function buildCard(teamData) {
     const li = document.createElement("li");
     const img = document.createElement("img");
@@ -46,10 +48,15 @@ function buildCard(teamData) {
 
 (function() {
 
-    let selectors = document.querySelectorAll(".league-selector button");
+
+    let small = window.matchMedia("(min-width: 399px) and (max-width: 768px)");
+    loadTeams(document.querySelector(`${small.matches ? ".league-selector-sm" : ".league-selector"} .selector-active`).value);
+
+    let selectors = document.querySelectorAll(`${small.matches ? ".league-selector-sm" : ".league-selector"} button`);
     selectors.forEach((select) => {
         select.addEventListener("click",  (e) => {            
-            console.log("clicked");
+            document.querySelector(`${small.matches ? ".league-selector-sm" : ".league-selector"} .selector-active`).classList.remove("selector-active");
+            e.target.classList.add("selector-active");
             loadTeams(e.target.value);
 
         });

diff --git a/styles/global_lg.css b/styles/global_lg.css
@@ -1,10 +1,12 @@
 :root {
-  --main-light-mode: rgb(211, 210, 210);
-  --nav-light-mode: #f3f4f6;
-  --footer-light-mode: #9ca3af;
-  --main-dark-mode: rgb(48, 47, 47);
-  --nav-dark-mode: black;
-  --footer-dark-mode: rgb(42, 42, 42);
+  --main-light-mode: #EDF2FE;
+  --nav-light-mode: #D0DFFF;
+  --footer-light-mode: #5184a6;
+  --main-dark-mode: #111725;
+  --nav-dark-mode: #1D2E61;
+  --footer-dark-mode: #292A2E;
+  --text-light: #152244;
+  --text-dark: #D5E2FF;
 }
 
 
@@ -36,7 +38,7 @@
 
   nav {
     padding: 1rem;
-    color: black;
+    color: var(--text-light);
   }
 
   #menu-lg {
@@ -70,15 +72,15 @@
     padding: 0.5rem 0.75rem;
     font-weight: 500;
     text-decoration: none;
-    color: black;
+    color: var(--text-light);
   }
 
   .nav-link.active {
-    color: #5a5cf1;
+    color: #0C111C;
   }
 
   .nav-link:not(.active):hover {
-    color: #5f6670;
+    color: #17283f;
   }
 
   .qol-div {
@@ -91,8 +93,9 @@
   .search-bar {
     padding: 0.5rem 0.75rem;
     border-radius: 0.5rem;
-    background-color: #b0b4bb;
+    background-color: var(--main-light-mode);
     border: 2px solid transparent;
+    font-size: large;
   }
 
   .search-bar:focus {
@@ -101,7 +104,7 @@
     border: 2px solid rgb(93, 92, 92);
   }
   .search-bar::placeholder {
-    color: rgb(60, 59, 59);
+    color: var(--nav-dark-mode);
     font-size: large;
   }
 
@@ -149,7 +152,7 @@
   }
   footer a {
     text-decoration: none;
-    color: black;
+    color: white;
     font-family: Tahoma;
     font-weight: 500;
   }
@@ -160,14 +163,14 @@
     body {
       background-color: var(--main-dark-mode);
       p, span, a, article, h1 {
-        color: white;
+        color: var(--text-dark);
       }
     }
 
     body header {
       background-color: var(--nav-dark-mode);
       p, span, a, article, h1{
-        color: white;
+        color: var(--text-dark);
       }
     }
   }

diff --git a/styles/global_sm.css b/styles/global_sm.css
@@ -1,13 +1,15 @@
 :root {
-  --main-light-mode: white;
-  --nav-light-mode: #f3f4f6;
-  --footer-light-mode: #9ca3af;
-  --main-dark-mode: rgb(48, 47, 47);
-  --nav-dark-mode: black;
-  --footer-dark-mode: rgb(42, 42, 42);
+  --main-light-mode: #EDF2FE;
+  --nav-light-mode: #D0DFFF;
+  --footer-light-mode: #5184a6;
+  --main-dark-mode: #111725;
+  --nav-dark-mode: #1D2E61;
+  --footer-dark-mode: #292A2E;
+  --text-light: #152244;
+  --text-dark: #D5E2FF;
 }
 
-@media (min-width: 399px) and (maxwidth: 768px) {
+@media (min-width: 399px) and (max-width: 768px) {
 
   body {
     height: 100vh;
@@ -43,12 +45,7 @@
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out;
-    background: rgb(134, 134, 134);
-    background: radial-gradient(
-      circle,
-      rgba(134, 134, 134, 1) 0%,
-      rgba(255, 255, 255, 1) 100%
-    );
+    background-color: var(--nav-light-mode);
     z-index: 10;
   }
   #menu-sm.show {
@@ -57,7 +54,7 @@
 
   #menu-sm a {
     text-decoration: none;
-    color: black;
+    color: var(--text-light);
     font-family: "Roboto";
     font-weight: 600;
     padding: 15% 100%;
@@ -75,6 +72,7 @@
   .nav-sm {
     display: flex;
     justify-content: space-between;
+    background-color: var(--nav-light-mode);
   }
   .search-bar {
     padding: 0.25rem 3rem 0 1rem;
@@ -115,8 +113,10 @@
   main {
     display: flex;
     flex-direction: column;
+    background-color: var(--main-light-mode);
   }
   footer {
+    background-color: var(--footer-light-mode);
     display: none;
   }
 }
diff --git a/styles/home_lg.css b/styles/home_lg.css
@@ -1,10 +1,12 @@
 :root {
-  --main-light-mode: white;
-  --nav-light-mode: #f3f4f6;
-  --footer-light-mode: #9ca3af;
-  --main-dark-mode: rgb(48, 47, 47);
-  --nav-dark-mode: black;
-  --footer-dark-mode: rgb(42, 42, 42);
+  --main-light-mode: #EDF2FE;
+  --nav-light-mode: #D0DFFF;
+  --footer-light-mode: #5184a6;
+  --main-dark-mode: #111725;
+  --nav-dark-mode: #1D2E61;
+  --footer-dark-mode: #292A2E;
+  --text-light: #152244;
+  --text-dark: #D5E2FF;
 }
 
 @media (min-width: 992px) {
@@ -22,7 +24,7 @@
     align-items: center;
 
     text-align: center;
-    color: black;
+    color: var(--text-light);
     grid-column: 2;
     grid-row: 1;
 

diff --git a/styles/home_sm.css b/styles/home_sm.css
@@ -1,13 +1,15 @@
 :root {
-  --main-light-mode: rgb(211, 210, 210);
-  --nav-light-mode: #f3f4f6;
-  --footer-light-mode: #9ca3af;
-  --main-dark-mode: rgb(48, 47, 47);
-  --nav-dark-mode: black;
-  --footer-dark-mode: rgb(42, 42, 42);
+  --main-light-mode: #EDF2FE;
+  --nav-light-mode: #D0DFFF;
+  --footer-light-mode: #5184a6;
+  --main-dark-mode: #111725;
+  --nav-dark-mode: #1D2E61;
+  --footer-dark-mode: #292A2E;
+  --text-light: #152244;
+  --text-dark: #D5E2FF;
 }
 
-@media (min-width: 399px) and (maxwidth: 768px) {
+@media (min-width: 399px) and (max-width: 768px) {
   /* styles for screens with a minimum width of 399px */
 
   .main-desc {

diff --git a/styles/league_lg.css b/styles/league_lg.css
@@ -1,11 +1,13 @@
 :root {
-    --main-light-mode: white;
-    --nav-light-mode: #f3f4f6;
-    --footer-light-mode: #9ca3af;
-    --main-dark-mode: rgb(48, 47, 47);
-    --nav-dark-mode: black;
-    --footer-dark-mode: rgb(42, 42, 42);
-}
+    --main-light-mode: #EDF2FE;
+    --nav-light-mode: #D0DFFF;
+    --footer-light-mode: #5184a6;
+    --main-dark-mode: #111725;
+    --nav-dark-mode: #1D2E61;
+    --footer-dark-mode: #292A2E;
+    --text-light: #3657C3;
+    --text-dark: #D5E2FF;
+  }
 
 @media (min-width: 992px) {
 
@@ -26,21 +28,33 @@
 
     .league-selector li {
         list-style: none;
-        padding: .5rem 1rem;
-        background-color: white;
-        border: 1px solid rgb(110, 110, 110);
+
+        background-color: var(--footer-light-mode);
+        color: var(--text-light);
+        border: 1px solid transparent;
         border-radius: 4rem;
         font-weight: 500;
+        button {
+            all: inherit;
+            padding: .5rem 1rem;
+            border:none
+
+        }
     }
 
     .league-selector li:hover {
         cursor: pointer;
     }
 
-    .league-selector li.selector-active {
-        background-color: rgb(151, 99, 248);
-        border: #f3f4f6;
+    .league-selector button.selector-active {
+        background-color: var(--main-dark-mode);
+        /* border: var(--footer-dark-mode); */
         color: white;
+        button {
+            background-color: inherit;
+            all: inherit;
+            padding: .5rem 1rem;
+        }
     }
 
     #leagues-list {
@@ -52,20 +66,20 @@
 
     .team-card {
         list-style: none;
-        border: 1px solid rgb(95, 94, 94);
-        border-radius: 10px;
         width: 200px;
         padding: auto;
         cursor: pointer;
         margin: 1rem .5rem 1rem;
-        background: rgb(242,11,46);
-        background: linear-gradient(90deg, rgb(240, 119, 137) 0%, rgb(197, 197, 252) 53%, rgb(148, 222, 236) 100%);
+    }
 
+    .team-card:hover {
+        transform: scale(1.1, 1.1);
+        transition: transform linear .1s;
     }
 
     .team-link {
         text-decoration: none;
-        color: black;
+        color: var(--footer-dark-mode);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -76,6 +90,7 @@
     .team-link span {
         text-align: center;
         font-weight: 500;
+        font-size: large;
     }
     .team-logo {
         height: 10em;