add: animated accordions

This commit is contained in:
sadorowo 2024-03-07 10:28:23 +01:00
parent f096147126
commit 50e9f9bdd6
5 changed files with 95 additions and 81 deletions

View File

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

View File

@ -5,8 +5,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="sadorro's personal website!"> <meta name="description" content="sadorro's personal website!">
<link rel="shortcut icon" href="logo.png"> <link rel="shortcut icon" href="logo.png">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script defer src="script.js"></script> <script defer src="script.js"></script>
<title>sador.me - projekty</title> <title>sador.me - projekty</title>
</head> </head>
@ -61,7 +63,8 @@
<img src="thumbnails/github_bg.png" alt="GitHub profile thumbnail" /> <img src="thumbnails/github_bg.png" alt="GitHub profile thumbnail" />
<div class="description"> <div class="description">
<h3>Narzędzia do IPTV</h3> <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>
</div> </div>
</a> </a>
@ -70,7 +73,9 @@
<img src="thumbnails/wulkanowy_mod.png" alt="Wulkanowy mod profile thumbnail" /> <img src="thumbnails/wulkanowy_mod.png" alt="Wulkanowy mod profile thumbnail" />
<div class="description"> <div class="description">
<h3>Zmodyfikowana aplikacja Wulkanowego</h3> <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>
</div> </div>
</a> </a>

View File

@ -75,14 +75,26 @@ const accordions = document.querySelectorAll('.accordion');
function closeOtherAccordions(accordion) { function closeOtherAccordions(accordion) {
accordions.forEach(acc => { accordions.forEach(acc => {
if (acc !== accordion) if (acc !== accordion) {
const panel = accordion.children[1];
acc.classList.remove('active'); acc.classList.remove('active');
panel.style.maxHeight = null;
}
}); });
} }
function openAccordion(accordion) { function openAccordion(accordion) {
closeOtherAccordions(accordion); closeOtherAccordions(accordion);
const panel = accordion.children[1];
accordion.classList.toggle('active'); 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 => { accordions.forEach(accordion => {

View File

@ -1,4 +1,5 @@
@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');
@import url('style.dark.css');
:root { :root {
--info-height: 40px; --info-height: 40px;
@ -45,6 +46,7 @@ body {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
color: #000;
transition: ease-in-out 0.3s; transition: ease-in-out 0.3s;
} }
@ -101,7 +103,7 @@ a {
} }
#age { #age {
color: #ffd9a4; color: #3b3b3b;
} }
button { button {
@ -131,17 +133,17 @@ button a {
text-decoration: none; text-decoration: none;
border: none; border: none;
color: #fff;
font-weight: 400;
border-radius: 10px; border-radius: 10px;
padding: 0 10px 0 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; transition: ease-in 0.2s;
color: #fff; font-family: 'Geologica', sans-serif;
} }
.social:hover { .social:hover {
background-color: rgb(78, 31, 208); background-color: #b5baff;
} }
.social p { .social p {
@ -181,6 +183,7 @@ button {
justify-content: center; justify-content: center;
text-decoration: none; text-decoration: none;
border: 1px solid #000; border: 1px solid #000;
background-color: rgb(185, 175, 255);
border-radius: 10px; border-radius: 10px;
transition: ease-in 0.2s; transition: ease-in 0.2s;
@ -256,6 +259,10 @@ button {
display: none; display: none;
padding: 10px 0 10px 0; padding: 10px 0 10px 0;
border-radius: 10px; border-radius: 10px;
max-height: 0;
overflow: hidden;
transition: max-height .2s ease-in-out;
} }
.accordion-content > *:is(ol, ul) { .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) { @media screen and (max-width: 798px) {
#projects { #projects {
flex-direction: column; flex-direction: column;

60
style.dark.css Normal file
View File

@ -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;
}
}