From eb8e81541dba1e53ff4985779ab0c83adc8efcad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Tue, 5 Jul 2022 21:07:25 +0300
Subject: [PATCH] No comment :D

---
 aydinlatma.html                    |   2 +-
 index.html                         |  17 ++--
 kamera.html                        |   2 +-
 resources/css/main.scss            |  19 ++--
 resources/css/mixins.scss          |   8 +-
 resources/css/partials/footer.scss |   4 +-
 resources/css/variables.scss       |  10 +-
 resources/css/views/index.scss     | 138 ++++++++++++++++++---------
 resources/styles/main.css          | 146 +++++++++++++++++++----------
 9 files changed, 229 insertions(+), 117 deletions(-)
diff --git a/aydinlatma.html b/aydinlatma.html
index b1192fe..104e593 100644
--- a/aydinlatma.html
+++ b/aydinlatma.html
@@ -20,7 +20,7 @@
     <a class="menu"><img alt="Menu" src="resources/img/menu-white.png"></a>
 </header>
 <div id="container">
-    <div id="content" class="content_spacing">
+    <div id="content" class="content-spacing">
         <h1>Kişisel Verilerin Korunması Kanunu Aydınlatma Metni</h1>
         <p>Bu politika Veri Sorumlusu sıfatıyla Uğur Koçak Otomotiv Ltd. Şti. / Uğur Koçak Treyler Ltd. Şti.’nin
             tedarikçi, ziyaretçi, müşteri ile web sitesi (<a
diff --git a/index.html b/index.html
index 9a736ef..9924132 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <header id="header">
-        <img id="logo" src="resources/img/ugurgaleri-yazıtek.png" alt="Uğur Galeri logosu">
+        <img id="logo" src="resources/img/Uğur%20Galeri/header-lessshadow.png" alt="Uğur Galeri logosu">
         <nav class="navbar">
             <a class="nav-item" href="index.html">Ana sayfa</a>
             <a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
@@ -22,10 +22,10 @@
     </header>
     <div id="container">
         <div id="content">
-            <div class="showcase content_spacing">
+            <div class="showcase content-spacing">
                 <h1>Biz bir şeyler satıyoruz.</h1>
             </div>
-            <div id="brands" class="table content_spacing">
+            <div id="brands" class="table content-spacing">
                 <div class="table-item square">
                     <img src="resources/img/ugurgaleri-utek.png">
                     <div class="vertical-separator"></div>
@@ -47,8 +47,13 @@
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
             </div>
-            <div id="social">
-                <p></p>
+            <div id="social" class="social content-spacing">
+                <p>Sosyal medyada<br>bizi takip<br>edin.</p>
+                <nav>
+                    <a class="social-button"><img src="resources/img/Social/facebook/white/PNG/f_logo_RGB-White_1024.png"></a>
+                    <a class="social-button"><img src="resources/img/Social/instagram/02%20White%20Glyph/Instagram_Glyph_White.svg"></a>
+                    <a class="social-button"><img src="resources/img/Social/sahibinden/S-beyaz.png"></a>
+                </nav>
             </div>
         </div>
         <footer id="footer">
@@ -75,7 +80,7 @@
                 </div>
             </div>
         </footer>
-        <footer id="footer-stateless" class="content_spacing">
+        <footer id="footer-stateless" class="content-spacing ignore-vertical">
             <p>&copy; Uğur Galeri 2022</p>
             <p class="smaller">Dizayn & Uygulama: <a href="https://fybx.dev">fybx.dev</a></p>
         </footer>
diff --git a/kamera.html b/kamera.html
index 151a579..c251fde 100644
--- a/kamera.html
+++ b/kamera.html
@@ -20,7 +20,7 @@
     <a class="menu"><img alt="Menu" src="resources/img/menu-white.png"></a>
 </header>
 <div id="container">
-    <div id="content" class="content_spacing">
+    <div id="content" class="content-spacing">
         <h1>Aydınlatma Metni</h1>
         <h3>Uğur Koçak Otomotiv Ltd. Şti. / Uğur Koçak Treyler Ltd. Şti. Uğur Galeri Yerleşkesi içerisinde Yer Alan
             Güvenlik Kameraları Hakkında Aydınlatma Metni</h3>
diff --git a/resources/css/main.scss b/resources/css/main.scss
index 7e4603e..59880f8 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -4,6 +4,7 @@
 @use "views/aydinlatma.scss";
 @use "partials/header.scss";
 @use "partials/footer.scss";
+@use "sass:math";
 
 html, body {
   margin: 0;
@@ -11,18 +12,24 @@ html, body {
   background-color: variables.$clr_sides;
 }
 
-.content_spacing {
-  padding: 0 variables.$px_contentPadding;
+.content-spacing {
+  padding: math.div(variables.$px_horizontalPadding, 2) variables.$px_horizontalPadding;
 
-  @include mixins.mx_content_fix {
-    padding: 0 variables.$px_contentPadding2;
+  @include mixins.mx_index_brands_fix {
+    padding: math.div(variables.$px_horizontalPadding2, 2) variables.$px_horizontalPadding2;
   }
 
-  @include mixins.mx_content_fix2 {
-    padding: 0 variables.$px_contentPadding3;
+  @include mixins.mx_index_brands_fix2 {
+    padding: math.div(variables.$px_horizontalPadding3, 2) variables.$px_horizontalPadding3;
   }
 }
 
+.ignore-vertical {
+  // ignores vertical padding applied by .content-spacing
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 #header {
   // Layout, details and children is set in partials/header.scss
   height: 10vh;
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss
index c04299b..b7ad176 100644
--- a/resources/css/mixins.scss
+++ b/resources/css/mixins.scss
@@ -24,14 +24,14 @@
   }
 }
 
-@mixin mx_content_fix {
-  @media screen and (max-width: variables.$content_fix) {
+@mixin mx_index_brands_fix {
+  @media screen and (max-width: variables.$index_brands_fix) {
     @content;
   }
 }
 
-@mixin mx_content_fix2 {
-  @media screen and (max-width: variables.$content_fix2) {
+@mixin mx_index_brands_fix2 {
+  @media screen and (max-width: variables.$index_brands_fix2) {
     @content;
   }
 }
\ No newline at end of file
diff --git a/resources/css/partials/footer.scss b/resources/css/partials/footer.scss
index 7d2eef8..d4289be 100644
--- a/resources/css/partials/footer.scss
+++ b/resources/css/partials/footer.scss
@@ -6,7 +6,7 @@
   justify-content: space-between;
   background-color: variables.$clr_footerBackground;
   font: 16px "Montserrat", sans-serif;
-  padding: 50px variables.$px_contentPadding;
+  padding: 50px 200px;
 
   #small-logo {
     height: 50px;
@@ -17,7 +17,7 @@
     display: flex;
 
     .footer-column {
-      margin: variables.$px_contentPadding / 10;
+      margin: 0 20px 20px 20px;
 
       h1 {
         margin: 0 0 16px 0;
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 57286d0..5ce4de0 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -1,15 +1,15 @@
 $header_overflow: 1200px;
 $header_overflow2: 850px;
-$content_fix: 850px;
-$content_fix2: 600px;
+$index_brands_fix: 1100px;
+$index_brands_fix2: 850px;
 $footer_overflow2: 880px;
 $footer_overflow: 1110px;
 
 $px_headerPadding: 150px;
 $px_headerPadding2: 50px;
-$px_contentPadding: 200px;
-$px_contentPadding2: 100px;
-$px_contentPadding3: 20px;
+$px_horizontalPadding: 200px;
+$px_horizontalPadding2: 100px;
+$px_horizontalPadding3: 20px;
 
 $sz_l_footer_h: 22px;
 $sz_m_footer_h: 18px;
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 3f08358..f1a5a19 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -1,9 +1,12 @@
 @use "../variables.scss";
 @use "../mixins.scss";
+@use "sass:math";
 
 $table-item_img_width: 100px;
 $table-item_margin_between_items: 10px;
-$table-item_margin_img_to_paragraph: 100px;
+
+$social-button_img_width: 24px;
+$social-button_inner_margin: 10px;
 
 .showcase {
   display: flex;
@@ -35,18 +38,56 @@ $table-item_margin_img_to_paragraph: 100px;
     align-items: center;
 
     img {
-      margin-right: $table-item_margin_img_to_paragraph;
+      margin-right: math.div(variables.$px_horizontalPadding, 10);
       height: auto;
       width: $table-item_img_width;
+
+      @include mixins.mx_index_brands_fix {
+        margin-right: math.div(variables.$px_horizontalPadding2, 10);
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        margin-right: math.div(variables.$px_horizontalPadding2, 10);
+      }
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  .vertical-separator {
+    // vertical-separator makes an empty div behave as a separator which aligned vertically
+    height: $table-item_img_width + 20px;
+    border: solid 1px variables.$clr_brand;
+    margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);
+
+    @include mixins.mx_index_brands_fix {
+      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
+    }
+
+    @include mixins.mx_index_brands_fix2 {
+      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
     }
   }
 
   .reverse {
+    // reverse is a property given to .table-item elements
+    // it contains styling for img, p and .vertical-separator elements contained under
+    // a .table-item element
     flex-direction: row-reverse;
 
     img {
       margin-right: 0;
-      margin-left: $table-item_margin_img_to_paragraph;
+      margin-left: math.div(variables.$px_horizontalPadding, 10);;
+
+      @include mixins.mx_index_brands_fix {
+        margin-left: math.div(variables.$px_horizontalPadding2, 10);
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        margin-left: math.div(variables.$px_horizontalPadding2, 10);
+      }
     }
 
     p {
@@ -55,14 +96,16 @@ $table-item_margin_img_to_paragraph: 100px;
 
     .vertical-separator {
       margin-right: 0;
-      margin-left: $table-item_margin_img_to_paragraph;
-    }
-  }
+      margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
 
-  .vertical-separator {
-    height: $table-item_img_width + 20px;
-    border: solid 1px variables.$clr_brand;
-    margin-right: $table-item_margin_img_to_paragraph;
+      @include mixins.mx_index_brands_fix {
+        margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
+      }
+    }
   }
 
   .square {
@@ -72,44 +115,16 @@ $table-item_margin_img_to_paragraph: 100px;
   }
 
   .table-item-animation {
-    animation: slide-in-left 3000ms;
-  }
-
-  .table-item-animation-reverse {
     animation: slide-in-right 3000ms;
   }
 
-  @keyframes fade-in {
-    from {
-      margin-left: 10%;
-      width: 105%;
-      opacity: 0;
-    }
-
-    to {
-      margin-left: 0;
-      width: 100%;
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in-reverse {
-    from {
-      margin-right: 10%;
-      width: 105%;
-      opacity: 0;
-    }
-
-    to {
-      margin-right: 0;
-      width: 100%;
-      opacity: 1;
-    }
+  .table-item-animation-reverse {
+    animation: slide-in-left 3000ms;
   }
 
   @keyframes slide-in-left {
     from {
-      transform: translateX(-100%);
+      transform: translateX(-5%);
       opacity: 0;
     }
 
@@ -121,15 +136,48 @@ $table-item_margin_img_to_paragraph: 100px;
 
   @keyframes slide-in-right {
     from {
-      margin-left: 100%;
-      width: 300%;
+      transform: translateX(+5%);
       opacity: 0;
     }
 
     to {
-      margin-left: 0;
-      width: 100%;
+      transform: translateX(0%);
       opacity: 1;
     }
   }
+}
+
+.social {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: variables.$clr_brand;
+  color: white;
+
+  p {
+    font: 700 $social-button_img_width "Montserrat", sans-serif;
+  }
+
+  .social-button {
+    display: inline-block;
+    height: $social-button_img_width + (2 * $social-button_inner_margin);
+    width: auto;
+    border: 2px solid white;
+    border-radius: 50%;
+
+    img {
+      margin: 10px;
+      height: $social-button_img_width;
+      width: $social-button_img_width;
+    }
+
+    &:hover {
+      background-color: white;
+
+      img {
+        filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 85529ff..3583862 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -29,65 +29,84 @@
   align-items: center;
 }
 .table .table-item img {
-  margin-right: 100px;
+  margin-right: 20px;
   height: auto;
   width: 100px;
 }
+@media screen and (max-width: 1100px) {
+  .table .table-item img {
+    margin-right: 10px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .table-item img {
+    margin-right: 10px;
+  }
+}
+.table .table-item:first-of-type {
+  margin-top: 0;
+}
+.table .vertical-separator {
+  height: 120px;
+  border: solid 1px #1d60b5;
+  margin-right: 180px;
+}
+@media screen and (max-width: 1100px) {
+  .table .vertical-separator {
+    margin-right: 90px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .vertical-separator {
+    margin-right: 90px;
+  }
+}
 .table .reverse {
   flex-direction: row-reverse;
 }
 .table .reverse img {
   margin-right: 0;
-  margin-left: 100px;
+  margin-left: 20px;
+}
+@media screen and (max-width: 1100px) {
+  .table .reverse img {
+    margin-left: 10px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .reverse img {
+    margin-left: 10px;
+  }
 }
 .table .reverse p {
   text-align: right;
 }
 .table .reverse .vertical-separator {
   margin-right: 0;
-  margin-left: 100px;
+  margin-left: 180px;
 }
-.table .vertical-separator {
-  height: 120px;
-  border: solid 1px #1d60b5;
-  margin-right: 100px;
+@media screen and (max-width: 1100px) {
+  .table .reverse .vertical-separator {
+    margin-left: 90px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .reverse .vertical-separator {
+    margin-left: 90px;
+  }
 }
 .table .square img {
   height: 100px;
 }
 .table .table-item-animation {
-  animation: slide-in-left 3000ms;
-}
-.table .table-item-animation-reverse {
   animation: slide-in-right 3000ms;
 }
-@keyframes fade-in {
-  from {
-    margin-left: 10%;
-    width: 105%;
-    opacity: 0;
-  }
-  to {
-    margin-left: 0;
-    width: 100%;
-    opacity: 1;
-  }
-}
-@keyframes fade-in-reverse {
-  from {
-    margin-right: 10%;
-    width: 105%;
-    opacity: 0;
-  }
-  to {
-    margin-right: 0;
-    width: 100%;
-    opacity: 1;
-  }
+.table .table-item-animation-reverse {
+  animation: slide-in-left 3000ms;
 }
 @keyframes slide-in-left {
   from {
-    transform: translateX(-100%);
+    transform: translateX(-5%);
     opacity: 0;
   }
   to {
@@ -97,17 +116,45 @@
 }
 @keyframes slide-in-right {
   from {
-    margin-left: 100%;
-    width: 300%;
+    transform: translateX(5%);
     opacity: 0;
   }
   to {
-    margin-left: 0;
-    width: 100%;
+    transform: translateX(0%);
     opacity: 1;
   }
 }
 
+.social {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #1d60b5;
+  color: white;
+}
+.social p {
+  font: 700 24px "Montserrat", sans-serif;
+}
+.social .social-button {
+  display: inline-block;
+  height: 44px;
+  width: auto;
+  border: 2px solid white;
+  border-radius: 50%;
+}
+.social .social-button img {
+  margin: 10px;
+  height: 24px;
+  width: 24px;
+}
+.social .social-button:hover {
+  background-color: white;
+}
+.social .social-button:hover img {
+  filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
+}
+
 #header {
   background: #FDFFFF;
   padding: 0 150px;
@@ -190,7 +237,7 @@
   display: flex;
 }
 #footer .footer-columns .footer-column {
-  margin: 20px;
+  margin: 0 20px 20px 20px;
 }
 #footer .footer-columns .footer-column h1 {
   margin: 0 0 16px 0;
@@ -236,18 +283,23 @@ html, body {
   background-color: #364040;
 }
 
-.content_spacing {
-  padding: 0 200px;
+.content-spacing {
+  padding: 100px 200px;
+}
+@media screen and (max-width: 1100px) {
+  .content-spacing {
+    padding: 50px 100px;
+  }
 }
 @media screen and (max-width: 850px) {
-  .content_spacing {
-    padding: 0 100px;
+  .content-spacing {
+    padding: 10px 20px;
   }
 }
-@media screen and (max-width: 600px) {
-  .content_spacing {
-    padding: 0 20px;
-  }
+
+.ignore-vertical {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 #header {
