site küçük ekranlar için uyumlu hale getirildi

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "teknolojirehberleri.xyz",
       "version": "0.1.0",
       "dependencies": {
         "contentful": "^8.4.2",

styles/abstracts/_include-media.scss

@@ -29,11 +29,17 @@
 ///  $breakpoints: ('phone': 320px);
 ///
 $breakpoints: (
-  "phone": 320px,
-  "tablet": 768px,
-  "desktop": 1024px,
+  "smallest": 25em,
+  // 400 px
+  "smaller": 34.375em,
+  // 550 px
+  "small": 43.75em,
+  // 700 px
+  "large": 62.5em,
+  // 1000 px
+  "largest": 81.25em,
+  // 1200 px
 ) !default;
-
 ///
 /// Creates a list of static expressions or media types
 ///

styles/components/footer.scss

@@ -22,5 +22,14 @@
         color: var(--color-tertiary);
       }
     }
+
+    @include media("<smaller") {
+      &-main {
+        font-size: 1.7rem;
+      }
+      &-secondary {
+        font-size: 1.3rem;
+      }
+    }
   }
 }

styles/components/navbar.scss

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   justify-items: center;
+  white-space: nowrap;
 
   background-color: var(--color-grey);
   padding: 1.6rem;
@@ -28,13 +29,16 @@
     margin-top: 0.3rem;
     margin-left: 2rem;
 
-    font-size: 2rem;
     list-style-type: none;
 
     li:not(:last-child) {
       margin-right: 2.5rem;
     }
 
+    li {
+      font-size: 1.9rem;
+    }
+
     &-item {
       a:visited,
       a:link {
@@ -55,4 +59,28 @@
       }
     }
   }
+
+  @include media("<small") {
+    width: 100%;
+    &_logo {
+      font-size: 2rem;
+    }
+
+    &_list {
+      li {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  @include media("<smallest") {
+    &_logo {
+      font-size: 1.5rem;
+    }
+
+    &_list {
+      li {
+        font-size: 1.1rem;
+      }
+    }
+  }
 }

styles/pages/hakkinda.scss

@@ -1,7 +1,7 @@
 .about {
   display: grid;
   justify-content: center;
-  grid-template-rows: repeat(1, 10rem);
+  grid-template-rows: 10rem;
 
   padding: 2rem;
 
@@ -13,4 +13,15 @@
       margin-top: 1.5rem;
     }
   }
+
+  @include media("<small") {
+    grid-template-rows: 12rem;
+  }
+
+  @include media("<smallest") {
+    p,
+    li {
+      font-size: 1.6rem;
+    }
+  }
 }

styles/pages/homepage.scss

@@ -12,10 +12,10 @@
 
   &_posts {
     display: grid;
+    justify-content: center;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(8, 12rem);
     width: 55%;
-    min-height: 100vh;
 
     li {
       margin-top: 2rem;
@@ -23,4 +23,15 @@
       text-align: center;
     }
   }
+
+  @include media("<largest") {
+    li {
+      font-size: 1.7rem;
+    }
+  }
+  @include media("<smallest") {
+    li {
+      font-size: 1.5rem;
+    }
+  }
 }

styles/pages/rehber.scss

@@ -73,4 +73,57 @@
       font-size: 1.5rem;
     }
   }
+
+  @include media("<largest") {
+    img {
+      max-width: 80%;
+      min-width: 80%;
+    }
+  }
+  @include media("<large") {
+    grid-template-columns: 70%;
+  }
+  @include media("<small") {
+    grid-template-columns: 90%;
+    img {
+      max-width: 100%;
+      min-width: 100%;
+    }
+  }
+  @include media("<smaller") {
+    p,
+    li {
+      font-size: 1.7rem;
+    }
+
+    pre {
+      code {
+        font-size: 1.2rem;
+      }
+    }
+  }
+
+  @include media("<smallest") {
+    grid-template-columns: 85%;
+    pre {
+      code {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+  h2 {
+    font-size: 2.7rem;
+  }
+
+  h3 {
+    font-size: 2.4rem;
+  }
+
+  h4 {
+    font-size: 1.9rem;
+  }
 }