optimize codebase

Austinet · Jul 29, 2023 · 5c23ec4 · 5c23ec4
1 parent 0daab73
commit 5c23ec4
Show file tree

Hide file tree

Showing 40 changed files with 137 additions and 9,664 deletions.
diff --git a/README.md b/README.md
@@ -33,13 +33,13 @@ Users should be able to:
 
 ### Screenshot
 
-- ![Homepage Large Screen](screenshots/homepageLargeScreen.jpg)
-- ![Homepage Large Screen Dark Mode](screenshots/homePageLargeScreenDarkMode.jpg)
-- ![Home page Medium Screen](screenshots/mediumScreen.jpg)
-- ![Home page Small Screen](screenshots/smallScreen.jpg)
-- ![Single Country Large Screen](screenshots/singleCountry.jpg)
-- ![Single Country Large Screen Dark Mode](screenshots/singleCountryDarkMode.jpg)
-- ![Single Country Small Screen](screenshots/smallScreenSingleCountry.jpg)
+- ![Homepage Large Screen](screenshots/homeLargeScreen.JPG)
+- ![Homepage Large Screen Dark Mode](screenshots/homeLargeScreenDark.JPG)
+- ![Home page Medium Screen](screenshots/homeMediumScreen.JPG)
+- ![Home page Small Screen](screenshots/homeSmallScreen.JPG)
+- ![Single Country Large Screen](screenshots/singleCountry.JPG)
+- ![Single Country Large Screen Dark Mode](screenshots/singleCountryDarkMode.JPG)
+- ![Single Country Small Screen](screenshots/singleCountrySmallScreen.JPG)
 - ![Search Feature](screenshots/searchFeature.jpg)
 - ![Filter Feature](screenshots/filterFeature.jpg)
 
@@ -109,5 +109,4 @@ I've gotten a lot of experience while working with web based technologies like H
 
 ## Acknowledgments
 
-I will like to acknowledge God for giving me the grace to be patient with myself while going through the huddles of carrying out this project. And also Frontend mentor, KodeCamp team for this tasks where i got to consume data from APIs.
-This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
+I will like to acknowledge God for giving me the grace to be patient with myself while going through the huddles of carrying out this project. And also Frontend mentor, KodeCamp team for this tasks where i got to consume data from APIs.
diff --git a/country.html b/country.html
@@ -6,21 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Country</title>
     <!-- icons -->
-    <link rel="stylesheet" href="css/all.min.css">
-    <!-- stylesheets -->
-    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- stylesheet -->
     <link rel="stylesheet" href="css/country.css">
 </head>
 <body id="body" class="light-mode">
     <!-- header section -->
     <header>
         <div class="header container">
             <h1>Where in the world?</h1>
-            <button id="mode-btn"><i class="far fa-moon"></i><span class="mode">Dark Mode</span></button>
+            <button id="mode-btn"><i class="far fa-moon"></i><span id="mode">Dark Mode</span></button>
         </div>
     </header>
     <nav class="container">
-        <a href="index.html" class="btn"><i class="fas fa-long-arrow-alt-left"></i><span>Back</span></a>
+        <a href="index.html" class="btn"><i class="fas fa-long-arrow-left"></i><span>Back</span></a>
     </nav>
     <main class="container">
         <!-- country entry point -->

diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/country.css b/css/country.css
@@ -11,9 +11,9 @@
    width: 120px;
    padding: 0.5rem 0.8rem;
    box-shadow: 0 0 5px var(--shadow-2);
-   border-radius: 3px; 
-   margin-right: 0.8rem;
-   margin-bottom: 1rem;
+   border-radius: 5px; 
+   margin-right: 0.6rem;
+   margin-bottom: 0.8rem;
    text-align: center;
    font-size: 1.1rem;
 }
@@ -23,7 +23,7 @@
 }
 
 nav .btn {
-    margin: 1rem 0;
+   margin-top: 1rem;
 }
 
 /* Color modes */
@@ -34,9 +34,10 @@ nav .btn {
 
 /* country section */
 .country-container  {
-    margin-top: 2rem;
+    margin-top: 3rem;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .country-image {
@@ -45,18 +46,18 @@ nav .btn {
 
 .country-image img {
     width: 100%;
-    height: 100%;
+    height: 55vh;
 }
 
 .country-details-container {
-    align-self: center;
     width: 53%;
+    margin-top: 1.5rem;
 }
 .country-details {
     display: flex;
     justify-content: space-between;
     align-self: center;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
 }
 
 .country-details-container h2 {
@@ -72,10 +73,11 @@ nav .btn {
 .border-countries {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 }
 
 .border-countries p {
-    margin-right: 1.5rem;
+    margin: 0 1.5rem 0.7rem 0;
     font-weight: 600;
     font-size: 1.2rem;
     opacity: 0.9;
@@ -86,46 +88,45 @@ nav .btn {
 }
 
 /* responsiveness - medium screens */
-@media(max-width: 1200px) {
+@media(max-width: 1000px) {
     .country-container {
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }
 
-    .country-image, 
+    .country-image,
     .country-details-container {
-        width: 80%;
-    }
-
-    .country-image {
-        margin-bottom: 2.5rem;
+        width: 90%;
     }
 }
 
 /* responsiveness - smaller screens */
-@media(max-width: 750px) {
-    .border-countries,
+@media(max-width: 650px) {
     .country-details {
         flex-direction: column;
     }
 
     .country-details > div:first-child {
         margin-bottom: 2rem;
     }
-
-    .border-countries {
-        align-items: stretch;
-    }
-
-    .border-countries p {
-        margin-bottom: 1.2rem;
-    }
 }
 
 @media(max-width: 500px) {
+    nav .btn {
+        margin-top: 0;
+     }
+
     .country-image, 
     .country-details-container {
         width: 100%;
     }
-}
+
+    .country-container {
+        margin-top: 1.5rem;
+    }
+
+    .country-image img {
+        height: 40vh;
+    }
+}
diff --git a/css/styles.css b/css/styles.css
@@ -18,12 +18,13 @@
 
 a {
     text-decoration: none;
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .container {
-    max-width: 85%;
+    max-width: 1400px;
     margin: 0 auto;
+    padding: 0 1.5rem;
 }
 
 
@@ -36,14 +37,11 @@ a {
 .light-mode header,
 .light-mode button,
 .light-mode .cards,
-.light-mode #search-filter select,
+.light-mode #region ul,
+.light-mode #region p,
 .light-mode #search-filter input[type="search"],
 .light-mode a {
-    background-color: var(--white);
-    color: var(--Very-Dark-Blue);
-}
-
-.dark-mode .search-div i {
+    background-color: var(--White);
     color: var(--Very-Dark-Blue);
 }
 
@@ -55,7 +53,8 @@ a {
 .dark-mode header,
 .dark-mode button,
 .dark-mode .cards,
-.dark-mode #search-filter select,
+.dark-mode #region ul,
+.dark-mode #region p,
 .dark-mode #search-filter input[type="search"],
 .dark-mode #search-filter input[type="search"]::placeholder,
 .dark-mode a {
@@ -77,7 +76,7 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.4rem 0;
+    padding: 1.5rem;
 }
 
 .header h1 {
@@ -104,7 +103,8 @@ header {
 #search-filter form {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
+    position: relative;
 }
 
 .search-div {
@@ -114,13 +114,13 @@ header {
 .search-div i {
     position: absolute;
     left: 22px;
-    top: 13px;
+    top: 16px;
     font-size: 1rem;
 }
 
 #search-filter input[type="search"] {
-    width: 450px;
-    height: 45px;
+    width: 430px;
+    height: 50px;
     padding: 0.8rem 1rem 0.8rem 3.5rem;
     border: none;
     border-radius: 3px;
@@ -129,29 +129,51 @@ header {
     outline: none;
 }
 
-#search-filter select {
-    width: 250px;
-    height: 45px;
-    padding: 0 1rem;
-    border: none;
-    border-radius: 3px;
+#region p {
+    width: 230px;
+    padding: 0.9rem 1.5rem;
+    height: 50px;
+    border-radius: 5px;
     box-shadow: 0 0 2px var(--shadow-1);
     font-size: 1.1rem;
-    outline: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#region ul {
+    margin-top: 0.5rem;
+    width: 230px;
+    padding: 0.8rem 1.5rem;
+    border-radius: 5px;
+    box-shadow: 0 0 2px var(--shadow-1);
+    font-size: 1.1rem;
+    position: absolute;
+    z-index: 2;
+}
+
+#region li {
+    list-style: none; 
+    padding: 0.3rem 0;
+    font-size: 1.3rem;
+}
+
+.hidden {
+    display: none;
 }
 
 
 /* countries section */
 #countries {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    gap: 3rem;
     justify-content: space-between;
 }
 
 .cards {
     border-radius: 5px;
     box-shadow: 0 0 3px var(--shadow-2);
-    margin-bottom: 3rem;
 }
 
 .cards img {
@@ -179,44 +201,39 @@ header {
 
 
 /* responsiveness - medium screens */
-@media(max-width: 850px) {
-    .container {
-        max-width: 93%;
+@media(max-width: 720px) {
+    #search-filter form {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
     }
 
     #search-filter input[type="search"] {
-        width: 300px;
+        width: 100%;
+        margin-bottom: 2rem;
     }
 }
 
 /* responsiveness - smaller screens */
-@media(max-width: 650px) {
+@media(max-width: 500px) {
     html {
-        font-size: 14px;
+        font-size: 15px;
     }
 
-    header {
-        margin-bottom: 1.8rem;
-    }
-
-    .header h1 {
-        font-size: 1.3rem;
-        font-weight: 500;
+    .container {
+        padding: 0 1rem;
     }
 
-    #search-filter form {
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: stretch;
+    .header {
+        padding: 1.5rem;
     }
 
-    #search-filter input[type="search"] {
-        width: 95%;
-        margin-bottom: 2rem;
+    header {
+        margin-bottom: 1.8rem;
     }
 
-    #countries {
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        justify-content: space-between;
+    .header h1 {
+        font-size: 1.2rem;
+        font-weight: 500;
     }
 }
diff --git a/design/Thumbs.db b/design/Thumbs.db