From f3ace0f1a46e3b8849ceeb49b325d40ee824d6d2 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Mon, 26 Aug 2024 19:32:37 +0300
Subject: [PATCH] feat: add mobile design

---
 index.html | 173 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 161 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 59eed84..7317a46 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,16 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="/style/style.css" />
     <style>
+      a {
+        text-decoration: none;
+        color: black;
+      }
+
+      a:hover {
+        color: black;
+        text-decoration: underline;
+      }
+
       p {
         margin: 0;
       }
@@ -89,7 +99,27 @@
         opacity: 0.3;
       }
 
+      .app-disabled {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid white;
+        gap: 24px;
+        height: 290px;
+        transition-property: opacity;
+        transition-duration: 500ms;
+        opacity: 0.3;
+      }
+
       .app:hover {
+        body {
+          margin-top: 48px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
         transition-property: opacity;
         transition-duration: 500ms;
         opacity: 0.8;
@@ -110,6 +140,103 @@
         padding: 20px 0;
       }
 
+      @media (max-width: 1300px) {
+        .app-name {
+          font-family: "Source Sans Pro", sans-serif;
+          font-size: 20px;
+        }
+
+        body {
+          margin-top: 24px;
+          margin-bottom: 48px;
+        }
+
+        #logo {
+          padding: 12px 24px;
+          gap: 12px;
+        }
+
+        #pan-container {
+          padding: 0px;
+        }
+
+        .brand-name {
+          font-family: "Source Code Pro", monospace;
+          font-size: 24px;
+        }
+
+        #logo-image {
+          height: 240px;
+          width: 240px;
+        }
+
+        .container {
+          width: 290px;
+          display: grid;
+          grid-template-columns: 141px 141px;
+          grid-template-rows: 340px 160px 160px;
+          gap: 8px 8px;
+          grid-auto-flow: row;
+          grid-template-areas:
+            "main main"
+            "app1 app2"
+            "app3 .";
+          justify-content: space-between;
+        }
+
+        .app-image {
+          width: 64px;
+          height: 64px;
+        }
+
+        .app {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid white;
+          gap: 12px;
+          height: 160px;
+          transition-property: opacity;
+          transition-duration: 500ms;
+          opacity: 0.3;
+        }
+
+        .app-disabled {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid white;
+          gap: 24px;
+          height: 160px;
+          transition-property: opacity;
+          transition-duration: 500ms;
+          opacity: 0.3;
+        }
+
+        .app:hover {
+          transition-property: opacity;
+          transition-duration: 500ms;
+          opacity: 0.8;
+        }
+
+        .app1 {
+          grid-area: app1;
+          padding: 20px 0;
+        }
+
+        .app2 {
+          grid-area: app2;
+          padding: 20px 0;
+        }
+
+        .app3 {
+          grid-area: app3;
+          padding: 20px 0;
+        }
+      }
+
       @media (prefers-color-scheme: light) {
         #logo {
           border: 1px solid black;
@@ -118,6 +245,10 @@
         .app {
           border: 1px solid black;
         }
+
+        .app-disabled {
+          border: 1px solid black;
+        }
       }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -126,21 +257,34 @@
   <body>
     <div class="container">
       <div class="app1">
-        <div class="app">
-          <img src="/ikon.png" height="128px" width="128px" />
-          <p class="app-name">Blog</p>
-        </div>
+        <a href="https://blog.log101.dev">
+          <div class="app">
+            <img
+              src="/ikon.png"
+              height="128px"
+              width="128px"
+              class="app-image"
+            />
+            <p class="app-name">Blog</p>
+          </div>
+        </a>
       </div>
       <div class="app2">
-        <div class="app">
-          <img src="/konulu-konum-logo.jpg" height="128px" width="128px" />
-          <p class="app-name">Konulu<br />Konum</p>
-        </div>
+        <a href="https://konulukonum.log101.dev">
+          <div class="app">
+            <img
+              src="/konulu-konum-logo.jpg"
+              height="128px"
+              width="128px"
+              class="app-image"
+            />
+            <p class="app-name">Konulu<br />Konum</p>
+          </div>
+        </a>
       </div>
       <div class="app3">
-        <div class="app">
-          <img src="/degisim-kotudur.png" height="128px" width="128px" />
-          <p class="app-name">Değişim<br />Kötüdür</p>
+        <div class="app-disabled">
+          <p class="app-name">Yakında...</p>
         </div>
       </div>
       <div id="logo-container">
@@ -154,7 +298,12 @@
               <p>İ</p>
               <p>P</p>
             </div>
-            <img width="624" height="624" src="/acayip-logo.png" />
+            <img
+              width="624"
+              height="624"
+              src="/acayip-logo.png"
+              id="logo-image"
+            />
             <div id="brand" class="brand-name">
               <p>A</p>
               <p>C</p>
