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

This commit is contained in:
sadorowo 2024-03-03 20:15:52 +01:00
parent 5f05f68217
commit f096147126
3 changed files with 152 additions and 86 deletions

View File

@ -16,7 +16,8 @@
<p>Kliknij mnie!</p> <p>Kliknij mnie!</p>
</div> </div>
<div id="content"> <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> <h1>Sador</h1>
<h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2> <h2 id="points">Bonusowe punkty z minigry: <span>0</span></h2>
<button onclick="resetPoints()">Resetuj punkty</button> <button onclick="resetPoints()">Resetuj punkty</button>
@ -24,7 +25,7 @@
<button><a href="projects.html">Moje projekty</a></button> <button><a href="projects.html">Moje projekty</a></button>
<button id="swap">Odwróć strony :)</button> <button id="swap">Odwróć strony :)</button>
</div> </div>
<div id="right-side"> <div data-closed="true">
<h4>Media społecznościowe/moje konta</h4> <h4>Media społecznościowe/moje konta</h4>
<div id="socials"> <div id="socials">
<a class="social" href="https://github.com/sadorowo" target="_blank"> <a class="social" href="https://github.com/sadorowo" target="_blank">
@ -50,6 +51,61 @@
<li>elektronika</li> <li>elektronika</li>
<li>muzyka</li> <li>muzyka</li>
</ul> </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> <p>jestem fanem/po prostu słucham:</p>
<div class="accordion"> <div class="accordion">
<p>metalu</p> <p>metalu</p>
@ -108,59 +164,6 @@
</ul> </ul>
</div> </div>
</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>
</div> </div>
</body> </body>

View File

@ -1,4 +1,3 @@
const rightSideContainer = document.getElementById('right-side');
const contentContainer = document.getElementById('content'); const contentContainer = document.getElementById('content');
const swapButton = document.getElementById('swap'); const swapButton = document.getElementById('swap');
@ -58,8 +57,6 @@ if (box) box.addEventListener('click', () => {
window.onload = async () => { window.onload = async () => {
if (boxPoints) boxPoints.textContent = bonusPoints; if (boxPoints) boxPoints.textContent = bonusPoints;
if (box) await updateOpacity(box, true); if (box) await updateOpacity(box, true);
await updateOpacity(rightSideContainer, true);
} }
// update theme // update theme
@ -91,3 +88,26 @@ function openAccordion(accordion) {
accordions.forEach(accordion => { accordions.forEach(accordion => {
accordion.addEventListener('click', () => openAccordion(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));
});
}

View File

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