diff --git a/index.html b/index.html
index 378e99a..d3a1936 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,10 @@
+
+
sador.me
diff --git a/projects.html b/projects.html
index 9dd4811..c786a5a 100644
--- a/projects.html
+++ b/projects.html
@@ -5,8 +5,10 @@
+
+
sador.me - projekty
@@ -61,7 +63,8 @@
Narzędzia do IPTV
-
Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając README na moim GitHubie.
+
Tak dokładniej to narzędzia do manipulacji playlistami. Więcej dowiesz się czytając
+ README na moim GitHubie.
@@ -70,7 +73,9 @@
Zmodyfikowana aplikacja Wulkanowego
-
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.
+
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.
diff --git a/script.js b/script.js
index 4952187..fdcaab9 100644
--- a/script.js
+++ b/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 => {
diff --git a/style.css b/style.css
index c2b5a8d..7c760c9 100644
--- a/style.css
+++ b/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);
- font-family: 'Geologica', sans-serif;
- font-weight: 400;
+ background-color: #a4aaff;
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;
diff --git a/style.dark.css b/style.dark.css
new file mode 100644
index 0000000..0f85886
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file