fonts hosted, scrollbar customised

SabineDetering · May 6, 2022 · 74bddd4 · 74bddd4
1 parent 7476b3a
commit 74bddd4
Show file tree

Hide file tree

Showing 19 changed files with 1,341 additions and 14 deletions.
diff --git a/data.js b/data.js
@@ -28,6 +28,7 @@ function extractFeatures(pokemon) {
     pokeExtract[pokeId] = { pokeId, name, image, mainType, secondType, species, height, weight, abilities, hp, attack, defense, specialAttack, specialDefense, speed, baseStatTotal, baseStatAvg, baseExp, moves, items };
 }
 
+
 /**
  * extract types from API-data
  * @param {json} pokemon 
@@ -42,6 +43,8 @@ function extractTypes(pokemon) {
     }
     return { mainType, secondType }
 }
+
+
 /**
  * extract abilities from API-data
  * @param {json} pokemon 
@@ -54,6 +57,8 @@ function extractAbilities(pokemon) {
     }
     return abilities;
 }
+
+
 /**
  * extract moves from API-data
  * @param {json} pokemon 

diff --git a/favorites-and-search.js b/favorites-and-search.js
@@ -15,13 +15,17 @@ function loadFavorites() {
     }
     saveFavorites();
 }
+
+
 /**
  * save favorites
  */
 function saveFavorites() {
     let favString = JSON.stringify(favorites);
     localStorage.setItem('favorites', favString);
 }
+
+
 /**
  * selects heart image according to favorite status
  * @param {integer} id of pokemon
@@ -33,6 +37,7 @@ function getHeartSrc(id) {
     } else { return './img/heart-outline.png'; }
 }
 
+
 /**
  * switch favorite status
  * @param {integer} id of pokemon
@@ -42,6 +47,8 @@ function toggleFavorite(id) {
     getId('heart').src = getHeartSrc(id);
     saveFavorites();
 }
+
+
 /**
  * show favorites only (small cards)
  * toggle heart
@@ -62,6 +69,8 @@ function showFavorites() {
     getId('heart-blue').src = "./img/heart-blue-filled.png";
     getId('footer-button').classList.add('d-none');
 }
+
+
 /**
  * return to all cards
  * toggle heart
@@ -74,12 +83,7 @@ function hideFavorites() {
     getId('footer-button').classList.remove('d-none');
 }
 //////////////////////////////////////////////////////////////////////
-// getId("searchField").addEventListener("keydown", function () {
-//     if (e.key == "Enter") {
-//         e.preventDefault();
-//         findPokemon();
-//     }
-// });
+
 /**
  * allow return key as affirmation of input field
  * not working!
@@ -90,6 +94,8 @@ function keydown(e) {
         findPokemon();
     }
 }
+
+
 /**
  * find searched pokemon
  */
@@ -103,6 +109,7 @@ function findPokemon() {
     }
 }
 
+
 /**
  * returns true if search value is an integer
  * false otherwise
@@ -116,6 +123,8 @@ function searchValueIsInteger(searchValue) {
         return false;
     }
 }
+
+
 /**
  * show searched pokemon
  * if necessary load it before
@@ -134,6 +143,8 @@ async function findPokeId(index) {
         } else { alert('Es wurde kein passendes Pokémon gefunden. Bitte geben Sie eine Zahl zwischen 1 und 898 ein.'); }
     }
 }
+
+
 /**
  * show searched pokemon
  * if necessary load it before

diff --git a/fonts/nunito-v23-latin-700.eot b/fonts/nunito-v23-latin-700.eot
diff --git a/fonts/nunito-v23-latin-700.svg b/fonts/nunito-v23-latin-700.svg
diff --git a/fonts/nunito-v23-latin-700.ttf b/fonts/nunito-v23-latin-700.ttf
diff --git a/fonts/nunito-v23-latin-700.woff b/fonts/nunito-v23-latin-700.woff
diff --git a/fonts/nunito-v23-latin-700.woff2 b/fonts/nunito-v23-latin-700.woff2
diff --git a/fonts/nunito-v23-latin-800.eot b/fonts/nunito-v23-latin-800.eot
diff --git a/fonts/nunito-v23-latin-800.svg b/fonts/nunito-v23-latin-800.svg
diff --git a/fonts/nunito-v23-latin-800.ttf b/fonts/nunito-v23-latin-800.ttf
diff --git a/fonts/nunito-v23-latin-800.woff b/fonts/nunito-v23-latin-800.woff
diff --git a/fonts/nunito-v23-latin-800.woff2 b/fonts/nunito-v23-latin-800.woff2
diff --git a/fonts/nunito-v23-latin-regular.eot b/fonts/nunito-v23-latin-regular.eot
diff --git a/fonts/nunito-v23-latin-regular.svg b/fonts/nunito-v23-latin-regular.svg
diff --git a/fonts/nunito-v23-latin-regular.ttf b/fonts/nunito-v23-latin-regular.ttf
diff --git a/fonts/nunito-v23-latin-regular.woff b/fonts/nunito-v23-latin-regular.woff
diff --git a/fonts/nunito-v23-latin-regular.woff2 b/fonts/nunito-v23-latin-regular.woff2
diff --git a/index.html b/index.html
@@ -6,16 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pokédex</title>
-    <!-- <script src="bootstrap.min.js"></script> -->
+
     <script src="script.js"> </script>
     <script src="data.js"> </script>
     <script src="favorites-and-search.js"></script>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link
-        href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-        rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -36,8 +31,7 @@
             <!-- search field is moved to an extra line for mobile -->
             <div class="input-group mx-5 mobile-none ">
                 <input type="text" class="form-control" placeholder="Nummer oder englischer Name"
-                    data-bs-toggle="tooltip" data-bs-placement="bottom"
-                    data-bs-trigger="hover"
+                    data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="hover"
                     title="Suche dein Lieblings-Pokémon über seine Nummer oder seinen englischen Namen. Bei schon geladenen Pokemon reicht auch ein Teil des Namens."
                     id="searchField" onkeydown="keydown(event)">
                 <button id="search-button" class="btn btn-outline btn-pokeblue" type="button"

diff --git a/style.css b/style.css
@@ -42,6 +42,83 @@ button {
     border-radius: var(--bd-radius) !important;
 }
 
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(160, 160, 160);
+    background: #e7e7e7;
+    border-radius: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: rgb(224, 110, 110);
+    border-radius: 5px;
+}
+
+/* nunito-regular - latin */
+@font-face {
+    font-family: 'Nunito';
+    font-style: normal;
+    font-weight: 400;
+    src: url('fonts/nunito-v23-latin-regular.eot');
+    /* IE9 Compat Modes */
+    src: local(''),
+        url('fonts/nunito-v23-latin-regular.eot?#iefix') format('embedded-opentype'),
+        /* IE6-IE8 */
+        url('fonts/nunito-v23-latin-regular.woff2') format('woff2'),
+        /* Super Modern Browsers */
+        url('fonts/nunito-v23-latin-regular.woff') format('woff'),
+        /* Modern Browsers */
+        url('fonts/nunito-v23-latin-regular.ttf') format('truetype'),
+        /* Safari, Android, iOS */
+        url('fonts/nunito-v23-latin-regular.svg#Nunito') format('svg');
+    /* Legacy iOS */
+}
+
+/* nunito-800 - latin */
+@font-face {
+    font-family: 'Nunito';
+    font-style: normal;
+    font-weight: 800;
+    src: url('fonts/nunito-v23-latin-800.eot');
+    /* IE9 Compat Modes */
+    src: local(''),
+        url('fonts/nunito-v23-latin-800.eot?#iefix') format('embedded-opentype'),
+        /* IE6-IE8 */
+        url('fonts/nunito-v23-latin-800.woff2') format('woff2'),
+        /* Super Modern Browsers */
+        url('fonts/nunito-v23-latin-800.woff') format('woff'),
+        /* Modern Browsers */
+        url('fonts/nunito-v23-latin-800.ttf') format('truetype'),
+        /* Safari, Android, iOS */
+        url('fonts/nunito-v23-latin-800.svg#Nunito') format('svg');
+    /* Legacy iOS */
+}
+
+/* nunito-700 - latin */
+@font-face {
+    font-family: 'Nunito';
+    font-style: normal;
+    font-weight: 700;
+    src: url('fonts/nunito-v23-latin-700.eot');
+    /* IE9 Compat Modes */
+    src: local(''),
+        url('fonts/nunito-v23-latin-700.eot?#iefix') format('embedded-opentype'),
+        /* IE6-IE8 */
+        url('fonts/nunito-v23-latin-700.woff2') format('woff2'),
+        /* Super Modern Browsers */
+        url('fonts/nunito-v23-latin-700.woff') format('woff'),
+        /* Modern Browsers */
+        url('fonts/nunito-v23-latin-700.ttf') format('truetype'),
+        /* Safari, Android, iOS */
+        url('fonts/nunito-v23-latin-700.svg#Nunito') format('svg');
+    /* Legacy iOS */
+}
 
 /* ************************************************ */
 #logo {