From 576eaa9ed53d029aca0555a40077b3d322fb9c58 Mon Sep 17 00:00:00 2001
From: Alexander <azhirov@uveon.ru>
Date: Sun, 20 Apr 2025 02:17:27 +0300
Subject: [PATCH] =?UTF-8?q?=D1=82=D0=B5=D1=81=D1=82=D0=B8=D1=80=D1=83?=
 =?UTF-8?q?=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css | 21 +++++++++++++++------
 index.html    | 32 +++++++++++++++++---------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/css/style.css b/css/style.css
index dfad9dc..b5b6b8c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -17,7 +17,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
+    /* min-height: 140vh; */
     flex-direction: column;
     color: #333333;
     margin: 0;
@@ -67,14 +67,18 @@ div.bio {
     text-align: justify;
 }
 
+div.icons {
+    min-height: 400px;
+}
+
 div.social {
     display: grid;
-    grid-template-columns: repeat(5, 1fr); /* 5 столбцов для десктопа */
-    gap: 20px;
+    grid-template-columns: repeat(6, 1fr); /* 5 столбцов для десктопа */
+    gap: 60px;
     justify-items: center;
     margin-top: 50px;
     width: 100%;
-    max-width: 960px;
+    max-width: 600px;
 }
 
 .social div {
@@ -121,7 +125,7 @@ div.social {
     padding: 5px 0;
     position: absolute;
     z-index: 1;
-    top: 110%;
+    top: 100%;
     opacity: 0;
     transition: opacity 1s;
     font-family: Whypo-rrey;
@@ -136,6 +140,7 @@ div.social {
 @media screen and (max-width: 768px) {
     body {
         padding: 10px;
+        /* min-height: 170vh; */
     }
 
     div.row {
@@ -163,9 +168,13 @@ div.social {
         font-size: 18px;
     }
 
+    div.icons {
+        min-height: 150%;
+    }
+
     div.social {
         grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
-        gap: 10px;
+        gap: 60px;
         margin-top: 30px;
     }
 
diff --git a/index.html b/index.html
index 2233360..f890dea 100644
--- a/index.html
+++ b/index.html
@@ -24,21 +24,23 @@
                 </div>
             </div>
         </div>
-        <div class="row social">
-            <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
-            <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
-            <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
-            <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
-            <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
-            <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
-            <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
-            <div class="tooltip git"><span class="tooltiptext">Git</span></div>
-            <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
-            <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
-            <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
-            <div class="tooltip band"><span class="tooltiptext">Band</span></div>
-            <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
-            <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
+        <div class="icons">
+            <div class="row social">
+                <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
+                <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
+                <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
+                <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
+                <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
+                <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
+                <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
+                <div class="tooltip git"><span class="tooltiptext">Git</span></div>
+                <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
+                <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
+                <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
+                <div class="tooltip band"><span class="tooltiptext">Band</span></div>
+                <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
+                <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
+            </div>
         </div>
     </body>
 </html>