karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dark theme switcher (god it was a pain)

Browse Source
This commit is contained in:
Karma Riuk 2023-09-19 18:44:47 +02:00
parent f398788adb
commit de5023604f
3 changed files with 140 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
assets/css/style.css
View File

@ -11,15 +11,82 @@
--------------------------------------------------------------*/ --------------------------------------------------------------*/
:root { :root {
--highlight: #ffb727; --highlight: #ffb727;
--highlight-alt: #ffc85a;
--background: #fff; --background: #fff;
--border: var(--background);
--btn-bg: var(--highlight);
--btn-bg-hover: #ffc550;
--btn-bg-hover-2: #f3a200;
--text-color: #444; --text-color: #444;
--text-color-alt: #fff; --text-color-alt: var(--background);
--text-color-alt-2: #eee; --text-color-alt-2: #eee;
--section-title-color: #3b434a;
--section-title-color-back: #3b434a17;
--progress-text-color: #3b434a;
--progress-background: #e6e8eb;
--resume-time-background: #eef0f2;
--resume-border: #82909c;
--resume-btn-border: var(--highlight);
--resume-btn-hover: var(--background);
--skill-title: #111;
--skill-icon-bg: #fff4df;
--contact-title-icon-bg: #fff6e4;
--contact-title: #777;
--contact-box-shadow: rgba(214, 215, 216, 0.6);
--contact-icon: #687683;
--contact-icon-border: #dde1e4;
}
body.dark {
--highlight: #ffbc35;
--highlight-alt: #ffc859;
--background: rgb(24, 26, 27);
--border: #303436;
--btn-bg: #b57800;
--btn-bg-hover: #f3a200;
--btn-bg-hover-2: #f3a200;
--text-color: rgb(189, 183, 175);
--text-color-alt: #e8e6e5;
--text-color-alt-2: #e8e6e5;
--section-title-color: #beb8b0;
--section-title-color-back: #beb8b017;
--progress-text-color: #beb8b0;
--progress-background: #252829;
--resume-time-background: #202325;
--resume-border: #50565a;
--resume-btn-border: #a76f00;
--resume-btn-hover: var(--text-color-alt);
--skill-title: #dddad6;
--skill-icon-bg: #462e00;
--contact-title-icon-bg: #432d00;
--contact-title: #9d9488;
--contact-box-shadow: rgba(45, 50, 52, 0.6);
--contact-icon: #9e9589;
--contact-icon-border: #393d40;
} }
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: var(--text-color); color: var(--text-color);
background: var(--background);
overflow-x: hidden; overflow-x: hidden;
} }
@ -29,7 +96,7 @@ a {
} }
a:hover { a:hover {
color: #ffc85a; color: var(--highlight-alt);
text-decoration: none; text-decoration: none;
} }
@ -58,7 +125,7 @@ h6 {
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
z-index: 996; z-index: 996;
background: var(--highlight); background: var(--btn-bg);
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 4px; border-radius: 4px;
@ -72,7 +139,7 @@ h6 {
} }
.back-to-top:hover { .back-to-top:hover {
background: #ffc550; background: var(--btn-bg-hover);
color: var(--text-color-alt); color: var(--text-color-alt);
} }
@ -126,7 +193,8 @@ h6 {
} }
.navbar a, .navbar a,
.navbar a:focus { .navbar a:focus,
.navbar li > i {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -149,10 +217,12 @@ h6 {
} }
.navbar a:hover, .navbar a:hover,
.navbar li > i:hover,
.navbar .active, .navbar .active,
.navbar .active:focus, .navbar .active:focus,
.navbar li:hover > a { .navbar li:hover > a {
color: var(--highlight); color: var(--highlight);
cursor: pointer;
} }
.navbar .dropdown ul { .navbar .dropdown ul {
@ -165,7 +235,7 @@ h6 {
z-index: 99; z-index: 99;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
background: #fff; background: var(--background);
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s; transition: 0.3s;
border-radius: 4px; border-radius: 4px;
@ -227,7 +297,7 @@ h6 {
* Mobile Navigation * Mobile Navigation
*/ */
.mobile-nav-toggle { .mobile-nav-toggle {
color: #fff; color: var(--background);
font-size: 28px; font-size: 28px;
cursor: pointer; cursor: pointer;
display: none; display: none;
@ -272,7 +342,7 @@ h6 {
left: 15px; left: 15px;
padding: 10px 0; padding: 10px 0;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--background);
overflow-y: auto; overflow-y: auto;
transition: 0.3s; transition: 0.3s;
} }
@ -303,7 +373,7 @@ h6 {
z-index: 99; z-index: 99;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
background: #fff; background: var(--background);
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
} }
@ -443,7 +513,7 @@ section {
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 0; padding-bottom: 0;
color: #3b434a; color: var(--section-title-color);
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@ -451,7 +521,7 @@ section {
.section-title span { .section-title span {
position: absolute; position: absolute;
top: 30px; top: 30px;
color: #3b434a17; color: var(--section-title-color-back);
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
@ -581,7 +651,7 @@ section {
display: block; display: block;
font-weight: 700; font-weight: 700;
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
color: #3b434a; color: var(--progress-text-color);
} }
.progress .skill .val { .progress .skill .val {
@ -590,7 +660,7 @@ section {
} }
.progress-bar-wrap { .progress-bar-wrap {
background: #e6e8eb; background: var(--progress-background);
} }
.progress-bar { .progress-bar {
@ -614,13 +684,13 @@ section {
font-weight: 700; font-weight: 700;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
color: #3b434a; color: var(--section-title-color);
} }
.resume .resume-item { .resume .resume-item {
padding: 0 0 20px 20px; padding: 0 0 20px 20px;
margin-top: -2px; margin-top: -2px;
border-left: 2px solid #82909c; border-left: 2px solid var(--resume-border);
position: relative; position: relative;
} }
@ -635,7 +705,7 @@ section {
.resume .resume-item h5 { .resume .resume-item h5 {
font-size: 16px; font-size: 16px;
background: #eef0f2; background: var(--resume-time-background);
padding: 5px 15px; padding: 5px 15px;
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
@ -663,25 +733,25 @@ section {
border-radius: 50px; border-radius: 50px;
left: -9px; left: -9px;
top: 0; top: 0;
background: white; background: var(--background);
border: 2px solid var(--highlight); border: 2px solid var(--highlight);
} }
.resume .resume-item.secondary::before { .resume .resume-item.secondary::before {
border-color: #82909c; border-color: var(--resume-border);
} }
.btn { .resume .btn {
font-size: 20px; font-size: 20px;
border-color: var(--highlight); border-color: var(--resume-btn-border);
color: var(--highlight); color: var(--highlight);
transition: background-color 1s; transition: 0.3s;
} }
.btn:hover { .resume .btn:hover {
transition: background-color, color, border-color; transition: 0.3s;
color: #fff; color: var(--resume-btn-hover);
background-color: var(--highlight); background-color: var(--btn-bg);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -691,11 +761,11 @@ section {
padding: 30px; padding: 30px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #fff; background: var(--background);
box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
text-align: center; text-align: center;
border: 1px solid #fff; border: 1px solid var(--border);
} }
.skills .icon { .skills .icon {
@ -706,7 +776,8 @@ section {
border-radius: 50%; border-radius: 50%;
width: 72px; width: 72px;
height: 72px; height: 72px;
background: #fff4df; background: var(--skill-icon-bg);
transition: 0.3s;
} }
.skills .icon i { .skills .icon i {
@ -722,7 +793,7 @@ section {
} }
.skills .title a { .skills .title a {
color: #111; color: var(--skill-title);
transition: 0.3s; transition: 0.3s;
} }
@ -772,7 +843,7 @@ section {
.testimonials .testimonial-item { .testimonials .testimonial-item {
text-align: center; text-align: center;
color: #fff; color: var(--text-color-alt);
} }
.testimonials .testimonial-item .testimonial-img { .testimonials .testimonial-item .testimonial-img {
@ -786,7 +857,7 @@ section {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin: 10px 0 5px 0; margin: 10px 0 5px 0;
color: #fff; color: var(--text-color-alt);
} }
.testimonials .testimonial-item h4 { .testimonials .testimonial-item h4 {
@ -817,7 +888,7 @@ section {
.testimonials .testimonial-item p { .testimonials .testimonial-item p {
font-style: italic; font-style: italic;
margin: 0 auto 15px auto; margin: 0 auto 15px auto;
color: #eee; color: var(--text-color-alt-2);
line-height: 2; line-height: 2;
} }
@ -862,7 +933,7 @@ section {
text-transform: uppercase; text-transform: uppercase;
color: var(--text-color); color: var(--text-color);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
border: 2px solid #fff; border: 2px solid var(--border);
} }
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li:hover,
@ -897,9 +968,9 @@ section {
.portfolio .portfolio-item .portfolio-info h4 { .portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px; font-size: 18px;
color: #fff; color: var(--background);
font-weight: 600; font-weight: 600;
color: #fff; color: var(--background);
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -915,7 +986,7 @@ section {
right: 40px; right: 40px;
font-size: 24px; font-size: 24px;
top: calc(50% - 18px); top: calc(50% - 18px);
color: #fff; color: var(--background);
transition: 0.3s; transition: 0.3s;
} }
@ -958,7 +1029,7 @@ section {
.swiper-pagination-bullet { .swiper-pagination-bullet {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: #fff; background-color: var(--background);
opacity: 1; opacity: 1;
border: 1px solid var(--highlight); border: 1px solid var(--highlight);
} }
@ -1012,7 +1083,7 @@ section {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.pricing .box { .pricing .box {
padding: 20px; padding: 20px;
background: #fff; background: var(--background);
text-align: center; text-align: center;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
border-radius: 5px; border-radius: 5px;
@ -1086,7 +1157,7 @@ section {
display: inline-block; display: inline-block;
padding: 8px 35px; padding: 8px 35px;
border-radius: 4px; border-radius: 4px;
color: #fff; color: var(--background);
transition: none; transition: none;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@ -1096,11 +1167,11 @@ section {
} }
.pricing .btn-buy:hover { .pricing .btn-buy:hover {
background: #ffc85a; background: var(--highlight-alt);
} }
.pricing .featured h3 { .pricing .featured h3 {
color: #fff; color: var(--background);
background: var(--highlight); background: var(--highlight);
} }
@ -1114,7 +1185,7 @@ section {
font-size: 14px; font-size: 14px;
padding: 1px 0 3px 0; padding: 1px 0 3px 0;
background: var(--highlight); background: var(--highlight);
color: #fff; color: var(--background);
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -1123,7 +1194,7 @@ section {
.contact .info-box { .contact .info-box {
color: var(--text-color); color: var(--text-color);
text-align: center; text-align: center;
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); box-shadow: 0 0 30px var(--contact-box-shadow);
padding: 20px 0 30px 0; padding: 20px 0 30px 0;
} }
@ -1132,12 +1203,12 @@ section {
color: var(--highlight); color: var(--highlight);
border-radius: 50%; border-radius: 50%;
padding: 15px; padding: 15px;
background: #fff6e4; background: var(--contact-title-icon-bg);
} }
.contact .info-box h3 { .contact .info-box h3 {
font-size: 20px; font-size: 20px;
color: #777777; color: var(--contact-title);
font-weight: 700; font-weight: 700;
margin: 10px 0; margin: 10px 0;
} }
@ -1158,13 +1229,13 @@ section {
.contact .social-links a { .contact .social-links a {
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
color: #687683; color: var(--contact-icon);
line-height: 1; line-height: 1;
margin: 0 8px; margin: 0 8px;
transition: 0.3s; transition: 0.3s;
padding: 14px; padding: 14px;
border-radius: 50px; border-radius: 50px;
border: 1px solid #dde1e4; border: 1px solid var(--contact-icon-border);
} }
.contact .email a { .contact .email a {
@ -1174,106 +1245,9 @@ section {
} }
.contact .social-links a:hover { .contact .social-links a:hover {
color: #fff; color: var(--text-color-alt-2);
border-color: var(--highlight); border-color: var(--btn-bg);
background: var(--highlight); background: var(--btn-bg);
}
.contact .php-email-form {
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
padding: 27px;
}
.contact .php-email-form .validate {
display: none;
color: red;
margin: 0 0 15px 0;
font-weight: 400;
font-size: 13px;
}
.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .error-message br + br {
margin-top: 25px;
}
.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,
.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
}
.contact .php-email-form input::focus,
.contact .php-email-form textarea::focus {
background-color: var(--highlight);
}
.contact .php-email-form input {
padding: 10px 15px;
}
.contact .php-email-form textarea {
padding: 12px 15px;
}
.contact .php-email-form button[type="submit"] {
background: var(--highlight);
border: 0;
padding: 10px 24px;
color: #fff;
transition: 0.4s;
border-radius: 5px;
}
.contact .php-email-form button[type="submit"]:hover {
background: #ffc85a;
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -1283,7 +1257,7 @@ section {
background: url("../img/footer-bg.jpg") top center no-repeat; background: url("../img/footer-bg.jpg") top center no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
color: var(--background); color: var(--text-color-alt-2);
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding: 80px 0; padding: 80px 0;
@ -1307,7 +1281,7 @@ section {
#footer h3 { #footer h3 {
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
color: #fff; color: var(--text-color-alt-2);
position: relative; position: relative;
font-family: "Satisfy", serif; font-family: "Satisfy", serif;
padding: 0; padding: 0;
@ -1328,8 +1302,8 @@ section {
#footer .social-links a { #footer .social-links a {
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
background: var(--highlight); background: var(--btn-bg);
color: #fff; color: var(--text-color-alt-2);
line-height: 1; line-height: 1;
padding: 8px 0; padding: 8px 0;
margin-right: 4px; margin-right: 4px;
@ -1341,8 +1315,8 @@ section {
} }
#footer .social-links a:hover { #footer .social-links a:hover {
background: #f3a200; background: var(--btn-bg-hover-2);
color: #fff; color: var(--text-color-alt-2);
text-decoration: none; text-decoration: none;
} }

11
assets/js/main.js
View File

@ -277,3 +277,14 @@
}, },
}); });
})(); })();
function toggleDarkMode(e) {
e.preventDefault();
e.target.classList.toggle("bi-moon-stars-fill");
e.target.classList.toggle("bi-sun-fill");
document.body.classList.toggle("dark");
document.documentElement.style.setProperty(
"color-scheme",
document.body.classList.contains("dark") ? "dark" : "light",
);
}

3
index.html
View File

@ -54,7 +54,8 @@
<li><a class="nav-link scrollto" href="#skills">Skills</a></li> <li><a class="nav-link scrollto" href="#skills">Skills</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li> <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li> <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><button onclick="toggleDarkMode()">Dark</button> </li> <li><i class="dark-mode bi icon-white bi-moon-stars-fill" onClick="toggleDarkMode(event)"></i>
</li>
</ul> </ul>
<i class="bi bi-list mobile-nav-toggle"></i> <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar --> </nav><!-- .navbar -->