add: columns! (most shitty css you've ever seen)

index.html

@@ -16,7 +16,8 @@
         <p>Kliknij mnie!</p>
     </div>
     <div id="content">
-        <div id="left-side">
+        <p id="top-bar">Aby zamknąć bądź otworzyć daną kolumnę, kliknij w jej tło.</p>
+        <div data-closed="false">
             <h1>Sador</h1>
             <h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
             <button onclick="resetPoints()">Resetuj punkty</button>
@@ -24,7 +25,7 @@
             <button><a href="projects.html">Moje projekty</a></button>
             <button id="swap">Odwróć strony :)</button>
         </div>
-        <div id="right-side">
+        <div data-closed="true">
             <h4>Media społecznościowe/moje konta</h4>
             <div id="socials">
                 <a class="social" href="https://github.com/sadorowo" target="_blank">
@@ -50,6 +51,61 @@
                 <li>elektronika</li>
                 <li>muzyka</li>
             </ul>
+            <p>sprzęt/oprogramowanie, który posiadam:</p>
+            <div class="accordion">
+                <p>sprzęt</p>
+                <div class="accordion-content">
+                    <ul>
+                        <li>CPU: Intel i5-4590</li>
+                        <li>GPU: NVIDIA GTX 970 + Radeon RX 5500 XT</li>
+                        <li>Bluetooth: CSR 4.0</li>
+                        <li>Wi-Fi: TP-LINK TL-WN722N V2</li>
+                        <li>Klawiatura: Microsoft All-In-One Media Keyboard</li>
+                        <li>Mysz: coś z defendera :)</li>
+                        <li>Słuchawki: Beats Studio Buds</li>
+                        <li>Monitor: LG M2450D</li>
+                        <li>Płyta główna: ASRock H97M Pro4</li>
+                        <li>RAM: 16GB DDR3</li>
+                        <li>Dysk: ADATA 500GB</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="accordion">
+                <p>systemy operacyjne</p>
+                <div class="accordion-content">
+                    <ul>
+                        <li>Hackintosh Sonoma</li>
+                        <li>Windows 10 Pro</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="accordion">
+                <p>oprogramowanie</p>
+                <div class="accordion-content">
+                    <ul>
+                        <li>DaVinci Resolve</li>
+                        <li>Firefox</li>
+                        <li>GIMP</li>
+                        <li>OBS Studio</li>
+                        <li>Handbrake</li>
+                        <li>VSC (only product from ms trash that I'm using LMAO)</li>
+                        <li>BitTorrent Web</li>
+                        <li>Apple Music</li>
+                        <li>JetBrains IDEs</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="accordion">
+                <p>subskrypcje</p>
+                <div class="accordion-content">
+                    <ul>
+                        <li>Apple Music Individual</li>
+                    </ul>
+                </div>
+            </div>
+            <p>cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.</p>
+        </div>
+        <div data-closed="true">
             <p>jestem fanem/po prostu słucham:</p>
             <div class="accordion">
                 <p>metalu</p>
@@ -108,59 +164,6 @@
                     </ul>
                 </div>
             </div>
-            <p>sprzęt/oprogramowanie, który posiadam:</p>
-            <div class="accordion">
-                <p>sprzęt</p>
-                <div class="accordion-content">
-                    <ul>
-                        <li>CPU: Intel i5-4590</li>
-                        <li>GPU: NVIDIA GTX 970 + Radeon RX 5500 XT</li>
-                        <li>Bluetooth: CSR 4.0</li>
-                        <li>Wi-Fi: TP-LINK TL-WN722N V2</li>
-                        <li>Klawiatura: Microsoft All-In-One Media Keyboard</li>
-                        <li>Mysz: coś z defendera :)</li>
-                        <li>Słuchawki: Beats Studio Buds</li>
-                        <li>Monitor: LG M2450D</li>
-                        <li>Płyta główna: ASRock H97M Pro4</li>
-                        <li>RAM: 16GB DDR3</li>
-                        <li>Dysk: ADATA 500GB</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="accordion">
-                <p>systemy operacyjne</p>
-                <div class="accordion-content">
-                    <ul>
-                        <li>Hackintosh Sonoma</li>
-                        <li>Windows 10 Pro</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="accordion">
-                <p>oprogramowanie</p>
-                <div class="accordion-content">
-                    <ul>
-                        <li>DaVinci Resolve</li>
-                        <li>Firefox</li>
-                        <li>GIMP</li>
-                        <li>OBS Studio</li>
-                        <li>Handbrake</li>
-                        <li>VSC (only product from ms trash that I'm using LMAO)</li>
-                        <li>BitTorrent Web</li>
-                        <li>Apple Music</li>
-                        <li>JetBrains IDEs</li>
-                    </ul>
-                </div>
-            </div>
-            <div class="accordion">
-                <p>subskrypcje</p>
-                <div class="accordion-content">
-                    <ul>
-                        <li>Apple Music Individual</li>
-                    </ul>
-                </div>
-            </div>
-            <p>cenię sobie prywatność, nie korzystam m.in. z facebooka, wyszukiwarki google.</p>
         </div>
     </div>
 </body>

script.js

@@ -1,4 +1,3 @@
-const rightSideContainer = document.getElementById('right-side');
 const contentContainer = document.getElementById('content');
 
 const swapButton = document.getElementById('swap');
@@ -58,8 +57,6 @@ if (box) box.addEventListener('click', () => {
 window.onload = async () => {
     if (boxPoints) boxPoints.textContent = bonusPoints;
     if (box) await updateOpacity(box, true);
-
-    await updateOpacity(rightSideContainer, true);
 }
 
 // update theme
@@ -90,4 +87,27 @@ function openAccordion(accordion) {
 
 accordions.forEach(accordion => {
     accordion.addEventListener('click', () => openAccordion(accordion));
-});
+});
+
+// Hide or show columns
+const columns = document.querySelectorAll('#content > div');
+
+function showColumn(event, column) {
+    // Check if the click was on actual column, not on its children
+    if (event.target !== column) return;
+
+    columns.forEach(col => {
+        if (col === column) return;
+
+        col.dataset.closed = 'true';
+    });
+
+    column.dataset.closed = column.dataset.closed === 'true' ? 'false' : 'true';
+}
+
+// Apply only to desktop
+if (window.innerWidth > 768) {
+    columns.forEach(column => {
+        column.addEventListener('click', (event) => showColumn(event, column));
+    });
+}

style.css

@@ -1,53 +1,69 @@
 @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap');
 
 :root {
+    --info-height: 40px;
     --size: 100px;
+    --columns: 3;
 }
 
-body {
-    min-height: 100vh;
+html, body {
+    width: 100%;
+    height: 100%;
 }
 
 body {
     font-family: 'Geologica', sans-serif;
+    text-align: center;
     font-weight: 700;
     margin: 0;
 }
 
+#top-bar {
+    background-color: #a4aaff;
+    text-align: center;
+    position: fixed;
+    color: #fff;
+    z-index: 1;
+    width: 100%;
+    margin: 0;
+
+    line-height: var(--info-height);
+    height: var(--info-height);
+}
+
 #content {
     display: flex;
     align-items: stretch;
-    justify-content: center;
     flex-direction: row;
-    height: 100vh;
+    height: 100%;
     width: 100%;
 }
 
 #content>* {
     overflow-y: auto;
-    width: 100%;
     display: flex;
     align-items: center;
     flex-direction: column;
-    justify-content: center;
+
+    transition: ease-in-out 0.3s;
 }
 
-#left-side {
+#content>div {
+    margin-top: var(--info-height);
+}
+
+#content>*[data-closed="true"] {
+    width: 20%;
+    cursor: pointer;
     background-color: #ffd9a4;
-    text-align: center;
 }
 
-#right-side {
-    transition: ease-in 0.2s;
+#content>*[data-closed="true"] * {
+    filter: grayscale();
 }
 
-#right-side {
-    opacity: 0
-}
-
-#right-side h4 {
-    color: #ffd9a4;
-    text-transform: uppercase;
+#content>*[data-closed="false"] {
+    width: calc(100% - calc((var(--columns) - 1) * 20%))
 }
 
 a {
@@ -224,7 +240,6 @@ button {
 }
 
 .accordion p {
-    text-align: center;
     margin: 0;
 }
 
@@ -241,7 +256,6 @@ button {
     display: none;
     padding: 10px 0 10px 0;
     border-radius: 10px;
-    text-align: center;
 }
 
 .accordion-content > *:is(ol, ul) {
@@ -296,10 +310,18 @@ body.dark #box p {
     color: #000;
 }
 
-body.dark #right-side {
+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;
 }
@@ -337,7 +359,7 @@ body:not(.dark) .social:hover {
     background-color: rgb(132, 125, 189);
 }
 
-body:not(.dark) #right-side h4 {
+body:not(.dark) #content>* {
     color: #000;
 }
 
@@ -360,11 +382,6 @@ body:not(.dark) #age {
         padding: 0;
     }
 
-    #left-side {
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-    }
-
     #socials {
         display: flex;
         flex-direction: column;
@@ -372,6 +389,32 @@ body:not(.dark) #age {
     }
 
     #box {
-        display: none;
+        display: none !important;
+    }
+
+    #content>*[data-closed="true"] {
+        width: auto;
+        cursor: auto;
+        background-color: unset;
+    }
+    
+    #content>*[data-closed="true"] * {
+        filter: none;
+    }
+    
+    #content>*[data-closed="false"] {
+        width: 100%;
+    }
+
+    #top-bar {
+        line-height: normal;
+    }
+
+    body.dark #content>* {
+        color: #fff;
+    }
+
+    body.dark #content>*[data-closed="true"] #age {
+        color: unset;
     }
 }