add: animated accordions

index.html

@@ -5,8 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="sadorro's personal website!">
+
     <link rel="shortcut icon" href="logo.png">
     <link rel="stylesheet" href="style.css">
+
     <script defer src="script.js"></script>
     <title>sador.me</title>
 </head>

projects.html

@@ -5,8 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="sadorro's personal website!">
+
     <link rel="shortcut icon" href="logo.png">
     <link rel="stylesheet" href="style.css">
+
     <script defer src="script.js"></script>
     <title>sador.me - projekty</title>
 </head>
@@ -61,7 +63,8 @@
                         <img src="thumbnails/github_bg.png" alt="GitHub profile thumbnail" />
                         <div class="description">
                             <h3>Narzędzia do IPTV</h3>
-                            <p>Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając README na moim GitHubie.</p>
+                            <p>Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając
+                                README na moim GitHubie.</p>
                         </div>
                     </div>
                 </a>
@@ -70,7 +73,9 @@
                         <img src="thumbnails/wulkanowy_mod.png" alt="Wulkanowy mod profile thumbnail" />
                         <div class="description">
                             <h3>Zmodyfikowana aplikacja Wulkanowego</h3>
-                            <p>Masz wymagających rodziców a nie chcesz męczyć się w szkole? Ta aplikacja jest dla Ciebie! Możesz ukrywać oceny poniżej 3, ustawić fałszywą 100% frekwencję, ukryć uwagi, nieusprawiedliwioną frekwencję za pomocą sekretnego menu.</p>
+                            <p>Masz wymagających rodziców a nie chcesz męczyć się w szkole? Ta aplikacja jest dla
+                                Ciebie! Możesz ukrywać oceny poniżej 3, ustawić fałszywą 100% frekwencję, ukryć uwagi,
+                                nieusprawiedliwioną frekwencję za pomocą sekretnego menu.</p>
                         </div>
                     </div>
                 </a>

script.js

@@ -75,14 +75,26 @@ const accordions = document.querySelectorAll('.accordion');
 
 function closeOtherAccordions(accordion) {
     accordions.forEach(acc => {
-        if (acc !== accordion)
+        if (acc !== accordion) {
+            const panel = accordion.children[1];
+            
             acc.classList.remove('active');
+            panel.style.maxHeight = null;
+        }
     });
 }
 
 function openAccordion(accordion) {
     closeOtherAccordions(accordion);
+
+    const panel = accordion.children[1];
     accordion.classList.toggle('active');
+    
+    console.log(panel, panel.style.maxHeight)
+    if (panel.style.maxHeight)
+        panel.style.maxHeight = null
+    else
+        panel.style.maxHeight = panel.scrollHeight + "px"
 }
 
 accordions.forEach(accordion => {

style.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap');
+@import url('style.dark.css');
 
 :root {
     --info-height: 40px;
@@ -45,6 +46,7 @@ body {
     align-items: center;
     flex-direction: column;
 
+    color: #000;
     transition: ease-in-out 0.3s;
 }
 
@@ -101,7 +103,7 @@ a {
 }
 
 #age {
-    color: #ffd9a4;
+    color: #3b3b3b;
 }
 
 button {
@@ -131,17 +133,17 @@ button a {
     text-decoration: none;
 
     border: none;
+    color: #fff;
+    font-weight: 400;
     border-radius: 10px;
     padding: 0 10px 0 10px;
-    background-color: rgb(101, 44, 255);
+    background-color: #a4aaff;
-    font-family: 'Geologica', sans-serif;
-    font-weight: 400;
     transition: ease-in 0.2s;
-    color: #fff;
+    font-family: 'Geologica', sans-serif;
 }
 
 .social:hover {
-    background-color: rgb(78, 31, 208);
+    background-color: #b5baff;
 }
 
 .social p {
@@ -181,6 +183,7 @@ button {
     justify-content: center;
     text-decoration: none;
     border: 1px solid #000;
+    background-color: rgb(185, 175, 255);
 
     border-radius: 10px;
     transition: ease-in 0.2s;
@@ -256,6 +259,10 @@ button {
     display: none;
     padding: 10px 0 10px 0;
     border-radius: 10px;
+
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .2s ease-in-out;
 }
 
 .accordion-content > *:is(ol, ul) {
@@ -296,78 +303,6 @@ button {
     }
 }
 
-/* DARK THEME */
-body.dark {
-    background-color: #2f3136;
-}
-
-body.dark #box {
-    background-color: #fff;
-    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
-}
-
-body.dark #box p {
-    color: #000;
-}
-
-body.dark #content > *[data-closed="false"] {
-    color: #fff;
-}
-
-body.dark #content #age {
-    color: #ffd9a4;
-}
-
-body.dark #content>*[data-closed="true"] #age {
-    color: #2f3136;
-}
-
-body.dark .social p {
-    color: #fff;
-}
-
-body.dark a {
-    color: #fff;
-    text-decoration-color: #fff;
-}
-
-body.dark .project-card {
-    border: 1px solid #ffd9a4;
-}
-
-body.dark .project-card .description * {
-    background-color: #fffdcc;
-}
-
-body:not(.dark) .project-card {
-    background-color: rgb(185, 175, 255);
-}
-
-body.dark #socials .social img {
-    filter: invert();
-}
-
-body.dark .accordion {
-    color: #000;
-}
-
-body:not(.dark) .social {
-    background-color: rgb(185, 175, 255);
-}
-
-body:not(.dark) .social:hover {
-    background-color: rgb(132, 125, 189);
-}
-
-body:not(.dark) #content>* {
-    color: #000;
-}
-
-body:not(.dark) #age {
-    color: #3b3b3b;
-}
-
-/* MOBILE */
 @media screen and (max-width: 798px) {
     #projects {
         flex-direction: column;

style.dark.css

@@ -0,0 +1,60 @@
+body.dark {
+    background-color: #2f3136;
+}
+
+body.dark #box {
+    background-color: #fff;
+    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
+}
+
+body.dark #box p {
+    color: #000;
+}
+
+body.dark #content > *[data-closed="false"] {
+    color: #fff;
+}
+
+body.dark #content #age {
+    color: #ffd9a4;
+}
+
+body.dark #content>*[data-closed="true"] #age {
+    color: #2f3136;
+}
+
+body.dark .social p {
+    color: #fff;
+}
+
+body.dark a {
+    color: #fff;
+    text-decoration-color: #fff;
+}
+
+body.dark .project-card {
+    border: 1px solid #ffd9a4;
+}
+
+body.dark .project-card .description * {
+    background-color: #fffdcc;
+}
+
+body.dark #socials .social img {
+    filter: invert();
+}
+
+body.dark .accordion {
+    color: #000;
+}
+
+/* MOBILE */
+@media screen and (max-width: 798px) {
+    body.dark #content>* {
+        color: #fff;
+    }
+
+    body.dark #content>*[data-closed="true"] #age {
+        color: unset;
+    }
+}