From a15db2b4b88dc1f52546efcce51ae2280653a258 Mon Sep 17 00:00:00 2001
From: Papin Nikolai <nikolai@weirdcat.ru>
Date: Wed, 14 Aug 2024 18:07:56 +0300
Subject: [PATCH] Footer adaptive for galaxy fold;

---
 frontend/src/lib/components/footer.svelte | 157 ++++++++++++++++------
 1 file changed, 113 insertions(+), 44 deletions(-)

diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte
index fcd9f8e..d511bd5 100644
--- a/frontend/src/lib/components/footer.svelte
+++ b/frontend/src/lib/components/footer.svelte
@@ -40,7 +40,7 @@
         <Icon image={CatIcon} size="64px"/>
     </div>
 
-    <p class="footer__copyright">(C) WeirdCat 2024</p>
+    <p class="footer__copyright">© WeirdCat 2024</p>
 
 </footer>
 
@@ -68,48 +68,6 @@
         background-color: var(--col_panel);
     }
 
-    .footer-column {
-
-        display: flex;
-        flex-direction: column;
-        justify-self: center;
-        gap: 20px;
-        padding: 30px 20px;
-
-        font-family: "Montserrat" sans-serif;
-        font-size: 20px;
-        color: var(--col_text_footer);
-        background-color: var(--col_footer);
-    }
-
-    .footer-column > * {
-        margin-top: 0;
-        margin-bottom: 0;
-        padding: 0;
-
-    }
-
-    .footer-column-title {
-
-        position: relative;
-        padding-bottom: 20px;
-
-        font-family: "Source_Sans_3" sans-serif;
-        font-weight: bold;
-        text-transform: uppercase;
-
-    }
-
-    .footer-column-title::after {
-        content: "";
-        background-color: var(--col_text_footer);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 2px;
-        width: 45%;
-    }
-
     /*FIXME: Make another class title here*/
     .container {
         grid-area: social-notice;
@@ -139,12 +97,67 @@
 
         display: flex;
         justify-content: right;
+
         gap: 20px;
         grid-area: social-links;
-        width: 1fr;
+        width: auto;
 
     }
 
+    .footer-column {
+
+        display: flex;
+        flex-direction: column;
+        justify-self: center;
+        gap: 20px;
+        padding: 30px 20px;
+
+        font-family: "Montserrat" sans-serif;
+        font-size: 20px;
+        color: var(--col_text_footer);
+        background-color: var(--col_footer);
+    }
+
+    .footer-column > * {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding: 0;
+
+    }
+
+    .footer__column1 {
+        grid-area: column1;
+    }
+
+    .footer__column2 {
+        grid-area: column2;
+    }
+
+    .footer__column3 {
+        grid-area: column3;
+    }
+
+    .footer-column-title {
+
+        position: relative;
+        padding-bottom: 20px;
+
+        font-family: "Source_Sans_3" sans-serif;
+        font-weight: bold;
+        text-transform: uppercase;
+
+    }
+
+    .footer-column-title::after {
+        content: "";
+        background-color: var(--col_text_footer);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        width: 45%;
+    }
+
     .footer__copyright {
         grid-area: copyright;
         margin: auto 0 0 0;
@@ -161,4 +174,60 @@
         background-color: var(--col_footer_copyright);
     }
 
+    @media screen and (max-width: 800px) {
+
+        .footer {
+            grid-template-areas: "social-notice social-notice social-links"
+                             "column1 column1 column1"
+                             "column2 column2 column2"
+                             "column3 column3 column3"
+                             "copyright copyright copyright";
+        }
+
+        .footer-column
+        {
+            justify-content: center;
+            justify-items: center;
+            padding: 20px;
+            max-width: 60%;
+            width: 100%;
+            text-align: center;
+        }
+
+        .footer-column > :global(.icon) {
+            align-self: center;
+        }
+
+        .footer-column-title::after {
+        content: "";
+        background-color: var(--col_text_footer);
+        position: absolute;
+        bottom: 0;
+        left: 28%;
+        height: 2px;
+        width: 45%;
+        margin: inherit auto;
+    }
+    }
+
+    @media screen and (max-width: 543px) {
+
+        .footer {
+            grid-template-areas: "social-links social-links social-links"
+                                 "column1 column1 column1"
+                                 "column2 column2 column2"
+                                 "column3 column3 column3"
+                                 "copyright copyright copyright";
+        }
+
+        .footer__social-notice {
+            display: none;
+        }
+
+        .footer__social-links {
+            justify-content: center;
+            margin: inherit 20px;
+        }
+    }
+
 </style>
\ No newline at end of file