Stylize galeri.html

resources/css/main.scss

@@ -5,6 +5,7 @@
 @use "views/iletisim.scss";
 @use "views/hakkimizda.scss";
 @use "views/kamera.scss";
+@use "views/galeri.scss";
 @use "partials/header.scss";
 @use "partials/footer.scss";
 @use "sass:math";
@@ -19,6 +20,19 @@ html, body {
   font-family: sans-serif;
 }
 
+a {
+  text-decoration: none;
+  color: variables.$clr_nav_sleep;
+
+  &:hover {
+    color: variables.$clr_nav_active;
+  }
+
+  &:active {
+    font-style: italic;
+  }
+}
+
 .content-spacing {
   padding: math.div(variables.$px_horizontalPadding, 2) variables.$px_horizontalPadding;
 
@@ -271,16 +285,18 @@ html, body {
     filter: invert(100%);
   }
 
-  &:hover {
+  @media (hover: hover) and (pointer: fine) {
-    width: $px_scroll-to-top_size + 10;
+    &:hover {
-    height: $px_scroll-to-top_size + 10;
+      width: $px_scroll-to-top_size + 10;
-    right: 20px;
+      height: $px_scroll-to-top_size + 10;
-    bottom: 50px;
+      right: 20px;
-    transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+      bottom: 50px;
-
-    img {
-      transform: translateY(-5px);
       transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+
+      img {
+        transform: translateY(-5px);
+        transition: 250ms cubic-bezier(0.51, 1.27, 0.18, 0.96);
+      }
     }
   }
 }

resources/css/views/galeri.scss

@@ -0,0 +1,33 @@
+#fullscreen {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 99vw;
+  height: 100vh;
+
+  #fullscreen-img {
+    max-width: 100%;
+    max-height: 100vh;
+    object-fit: cover;
+    cursor: pointer;
+  }
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  .photo {
+    margin: 1vh 1vw;
+    width: 25%;
+    height: 25%;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(1.3);
+    }
+  }
+}