added ipad/tablet,mobile,laptop,small screen, desktop, large screen o…

…ptimization and functionality
IbroRebronja · May 20, 2024 · abde7c6 · abde7c6
1 parent 24766ca
commit abde7c6
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
-  <link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon"/>
+  <link rel="icon" href="images/favicon/favicon.ico" type="image/x-icon" />
   <link
     href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Oleo+Script:wght@700&family=Quicksand:wght@300;500&display=swap"
     rel="stylesheet" />
@@ -86,8 +86,10 @@ <h2>Highlights</h2>
 
   <footer>
     <ul>
-      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img
+            src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png"
+            alt="facebook Logo"></a></li>
     </ul>
   </footer>
 

diff --git a/styles/places.css b/styles/places.css
@@ -1,6 +1,6 @@
 body {
   background: linear-gradient(30deg, rgb(253, 118, 118), #cfdf74);
-  color: rgb(68,68,68);
+  color: rgb(68, 68, 68);
 }
 
 #page-logo a {
@@ -19,7 +19,7 @@ header a {
   text-shadow: 1px 1px 2px rgb(0, 0, 0);
 }
 
-main ul{
+main ul {
   width: 75rem;
   margin: 0 auto 3rem auto;
   display: grid;
@@ -29,17 +29,17 @@ main ul{
 }
 
 li:nth-of-type(1) {
-  grid-column:1/span 2;
+  grid-column: 1 / span 2;
 }
 
 li:nth-of-type(10) {
-  grid-column:1/span 2;
+  grid-column: 1 / span 2;
 }
 
 main li {
   display: flex;
   background-color: white;
-  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   overflow: hidden;
   transition: transform 0.3s ease-in-out;
@@ -50,12 +50,12 @@ main li {
 
 main li:hover {
   transform: scale(1.01);
-  z-index:2;
+  z-index: 2;
 }
 
 main li img {
-  width:18.75rem;
-  height:17.5rem;
+  width: 18.75rem;
+  height: 17.5rem;
   object-fit: cover;
   image-rendering: pixelated;
 }
@@ -76,42 +76,117 @@ main li img {
 }
 
 .actions a {
-  text-decoration:none;
+  text-decoration: none;
   padding: 6px;
   color: rgb(53, 212, 226);
-  border-radius:5px ;
+  border-radius: 5px;
 }
 
 .actions a:hover {
   background-color: rgb(216, 235, 236);
 }
 
+/* 320px — 480px: Mobile devices */
+@media (min-width: 320px) and (max-width: 480px) {
+  body {
+    font-size: 14px; /* Adjust body font size for better readability */
+  }
+
+  main ul {
+    width: 90%;
+    margin: auto;
+    margin-bottom: 1.5rem;
+    padding: 0;
+    grid-template-columns: 100%;
+    gap: 10px;
+  }
+
+
+  main li {
+    margin: 20px auto;
+    padding: 0.1rem;
+    flex-direction: column;
+  }
+
+  main li img {
+    width: 100%;
+    height: 13rem;
+    border-radius: 5px;
+  }
+
+  .item-content {
+    padding: 1rem;
+  }
+
+  .item-content h2 {
+    font-size: 1.2rem;
+  }
+
+  .item-content p {
+    font-size: 0.875rem;
+  }
+
+  header {
+    padding: 0.625rem 1.25rem;
+    margin: 0.2rem;
+  }
+
+  li:nth-of-type(1),
+  li:nth-of-type(10) {
+    grid-column: initial;
+  }
+
+  #page-logo a {
+    font-size: 1.2rem;
+  }
+
+  header a {
+    font-size: 1.2rem;
+  }
+
+  footer li {
+    width: 50px;
+    height: 50px;
+  }
+
+  header a {
+    display: none;
+  }
+
+  .menu-btn {
+    display: flex;
+    width: 2.1rem;
+    height: 2.1rem;
+  }
+
+}
 
-@media (max-width: 48rem) {
-  #page-logo a{
-    font-size:1.5rem;
+/* 481px — 768px: iPads, Tablets */
+@media (min-width: 481px) and (max-width: 768px) {
+  #page-logo a {
+    font-size: 1.5rem;
   }
 
-  header a{
-  display:none;
+  header a {
+    display: none;
   }
 
   .menu-btn {
-    display:flex;
+    display: flex;
   }
 
   main ul {
     grid-template-columns: 100%;
     margin: auto;
-    width:90%;
+    width: 90%;
     padding: 0;
     margin-top: 1.5rem;
     margin-bottom: 2rem;
   }
 
-  main li{
+  main li {
     margin: 20px auto;
-    padding:0.1rem;
+    padding: 0.1rem;
     flex-direction: column;
     max-width: calc(100% -40px);
   }
@@ -124,20 +199,172 @@ main li img {
   main li img {
     width: 100%;
     height: auto;
-    border-radius:5px ;
+    border-radius: 5px;
   }
 
   .item-content {
     padding: 1rem;
   }
 
-
   .item-content h2 {
     font-size: 1.5rem;
   }
 
   .item-content p {
     font-size: 1rem;
   }
+}
+
+/* 769px — 1024px: Small screens, laptops */
+@media (min-width: 769px) and (max-width: 1024px) {
+  main {
+    margin-bottom: 2.5rem;
+  }
+
+  main ul {
+    width: 90%;
+    margin: auto;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  main li {
+    max-width: 100%;
+  }
+
+  main li img {
+    width: 50%;
+    height: 23.1rem;
+    border-radius: 5px;
+  }
+
+  li:nth-of-type(1),
+  li:nth-of-type(10) {
+    grid-column: initial;
+  }
+
+  .item-content {
+    padding: 1rem;
+  }
+
+  .item-content h2 {
+    font-size: 1.2rem;
+  }
+
+  .item-content p {
+    font-size: 0.8rem;
+  }
+
+  header {
+    padding: 0.9375rem 1.875rem;
+  }
+
+  #page-logo a {
+    font-size: 2.5rem;
+  }
+
+  header a {
+    font-size: 1.25rem;
+  }
+
+  footer li {
+    width: 60px;
+    height: 60px;
+  }
+
+  .menu-btn {
+    display: flex;
+  }
+
+  #side-drawer {
+    display: none;
+  }
+
+  nav ul {
+    display: flex;
+  }
+
+  .menu-btn {
+    display: none;
+  }
+}
+
+/* 1025px — 1200px: Desktops, large screens */
+@media (min-width: 1025px) and (max-width: 1200px) {
+  main {
+    margin-bottom: 2.5rem;
+  }
+
+  main ul {
+    width: 90%;
+    margin: auto;
+    gap: 20px;
+  }
+
+  main li img {
+    width: 50%;
+    height: 100%;
+  }
+
+  .item-content {
+    padding: 0.9rem;
+  }
+
+  .item-content h2 {
+    font-size: 1rem;
+  }
+
+  .item-content p {
+    font-size: 0.85rem;
+  }
+
+  header {
+    padding: 0.975rem 3.75rem;
+  }
+
+  #page-logo a {
+    font-size: 3rem;
+  }
+
+  header a {
+    font-size: 1.5rem;
+  }
+
+  footer li {
+    width: 70px;
+    height: 70px;
+  }
+
+  .menu-btn {
+    display: none;
+  }
+}
+
+@media (min-width: 1200px) and (max-width: 1325px) {
+  main {
+    margin-bottom: 2.5rem;
+  }
+
+  main ul {
+    width: 90%;
+    margin: auto;
+    gap: 20px;
+  }
+
+  main li img {
+    width: 50%;
+    height: 100%;
+  }
 
+  .item-content {
+    padding: 1rem;
+  }
+
+  .item-content h2 {
+    font-size: 1.4rem;
+  }
+
+  .item-content p {
+    font-size: 1.1rem;
+  }
 }
diff --git a/styles/shared.css b/styles/shared.css
@@ -22,7 +22,6 @@ header {
   top: 0;
   left: 0;
   box-sizing: border-box;
-
 }
 
 #page-logo a {
@@ -65,6 +64,7 @@ header nav a:hover {
 }
 
 footer {
+  margin-top: auto;
   background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));
   padding: 2.25rem 0;
 }