hexaitos/hexaitos.com
hexaitos
/
hexaitos.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add auto dark mode

This commit is contained in:
Hexaitos 2024-10-23 18:59:42 +02:00
parent ee2b7423f1
commit ebd44d3832
3 changed files with 79 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
_site/assets/css/styles.css
View File

@ -58,6 +58,15 @@
font-display: swap; font-display: swap;
} }
:root {
--body-bg: #9f9287;
--main-bg: #cdcac4;
--menu-bg: #2b2623;
--foot-bg: #2b2623;
--btn-col: #dba047;
--btn-hov: #ae4e26;
}
* { * {
font-family: Merriweather, Merriweather Sans; font-family: Merriweather, Merriweather Sans;
} }
@ -81,7 +90,7 @@ body {
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
padding: 10px; padding: 10px;
background-color: #9f9287; background-color: var(--body-bg);
} }
.main h1, h2, h3 { .main h1, h2, h3 {
@ -113,7 +122,7 @@ div.pfp {
} }
div.main { div.main {
background-color: #cdcac4; background-color: var(--main-bg);
padding: 2em; padding: 2em;
border-radius: 10px; border-radius: 10px;
min-height: 500px; min-height: 500px;
@ -136,7 +145,7 @@ div.main {
div.menu { div.menu {
/* background: #ae4e26; */ /* background: #ae4e26; */
background: #2b2623; background: var(--menu-bg);
padding: .5em; padding: .5em;
margin-bottom: 2em; margin-bottom: 2em;
overflow: hidden; overflow: hidden;
@ -163,7 +172,7 @@ div.menu {
margin-left: 1em; margin-left: 1em;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
background-color: #dba047; background-color: var(--btn-col);
display:inline-block; display:inline-block;
font-size: medium; font-size: medium;
border-radius: 10px; border-radius: 10px;
@ -172,7 +181,7 @@ div.menu {
} }
.menu a:hover, .contact a:hover { .menu a:hover, .contact a:hover {
background-color: #ae4e26; background-color: var(--btn-hov);
} }
.main a { .main a {
@ -192,7 +201,7 @@ div.contact {
text-decoration: none; text-decoration: none;
padding: .8em .8em; padding: .8em .8em;
text-align: center; text-align: center;
background-color: #dba047; background-color: var(--btn-col);
display:grid; display:grid;
font-size: medium; font-size: medium;
border-radius: 10px; border-radius: 10px;
@ -205,7 +214,7 @@ div.contact {
footer { footer {
/* background: #ae4e26; */ /* background: #ae4e26; */
background: #2b2623; background: var(--foot-bg);
padding: 1em; padding: 1em;
margin-top: 2em; margin-top: 2em;
overflow: hidden; overflow: hidden;
@ -321,4 +330,26 @@ div.desc {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #615953;
--main-bg: #2b2623;
--menu-bg: #2b2623;
--foot-bg: #2b2623;
--btn-hov: #dba047;
--btn-col: #ae4e26;
}
p, h1, h2, h3, b {
color: white;
}
div.desc {
color: white;
}
div.gallery {
border: 5px double rgba(167, 47, 20, 1);
}
}

2
_site/index.html
View File

@ -39,7 +39,7 @@
<p>If you want to get in touch, look at the <a href="contact.html">contact</a> page! You can find me on plenty of websites or just send me an email – I am always happy to talk to new people!</p> <p>If you want to get in touch, look at the <a href="contact.html">contact</a> page! You can find me on plenty of websites or just send me an email – I am always happy to talk to new people!</p>
<p>This website is still very much a work-in-progress and it was last updated: 19 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p> <p>This website is still very much a work-in-progress and it was last updated: 23 October 2024. I will be adding a <a href="blog.html">blog</a> at some point where I will be posting things mostly about computers, games and birds (<i>who’d’ve thunk?</i>). </p>
</div> </div>
<footer> <footer>

47
assets/css/styles.css
View File

@ -58,6 +58,15 @@
font-display: swap; font-display: swap;
} }
:root {
--body-bg: #9f9287;
--main-bg: #cdcac4;
--menu-bg: #2b2623;
--foot-bg: #2b2623;
--btn-col: #dba047;
--btn-hov: #ae4e26;
}
* { * {
font-family: Merriweather, Merriweather Sans; font-family: Merriweather, Merriweather Sans;
} }
@ -81,7 +90,7 @@ body {
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
padding: 10px; padding: 10px;
background-color: #9f9287; background-color: var(--body-bg);
} }
.main h1, h2, h3 { .main h1, h2, h3 {
@ -113,7 +122,7 @@ div.pfp {
} }
div.main { div.main {
background-color: #cdcac4; background-color: var(--main-bg);
padding: 2em; padding: 2em;
border-radius: 10px; border-radius: 10px;
min-height: 500px; min-height: 500px;
@ -136,7 +145,7 @@ div.main {
div.menu { div.menu {
/* background: #ae4e26; */ /* background: #ae4e26; */
background: #2b2623; background: var(--menu-bg);
padding: .5em; padding: .5em;
margin-bottom: 2em; margin-bottom: 2em;
overflow: hidden; overflow: hidden;
@ -163,7 +172,7 @@ div.menu {
margin-left: 1em; margin-left: 1em;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
background-color: #dba047; background-color: var(--btn-col);
display:inline-block; display:inline-block;
font-size: medium; font-size: medium;
border-radius: 10px; border-radius: 10px;
@ -172,7 +181,7 @@ div.menu {
} }
.menu a:hover, .contact a:hover { .menu a:hover, .contact a:hover {
background-color: #ae4e26; background-color: var(--btn-hov);
} }
.main a { .main a {
@ -192,7 +201,7 @@ div.contact {
text-decoration: none; text-decoration: none;
padding: .8em .8em; padding: .8em .8em;
text-align: center; text-align: center;
background-color: #dba047; background-color: var(--btn-col);
display:grid; display:grid;
font-size: medium; font-size: medium;
border-radius: 10px; border-radius: 10px;
@ -205,7 +214,7 @@ div.contact {
footer { footer {
/* background: #ae4e26; */ /* background: #ae4e26; */
background: #2b2623; background: var(--foot-bg);
padding: 1em; padding: 1em;
margin-top: 2em; margin-top: 2em;
overflow: hidden; overflow: hidden;
@ -321,4 +330,26 @@ div.desc {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #615953;
--main-bg: #2b2623;
--menu-bg: #2b2623;
--foot-bg: #2b2623;
--btn-hov: #dba047;
--btn-col: #ae4e26;
}
p, h1, h2, h3, b {
color: white;
}
div.desc {
color: white;
}
div.gallery {
border: 5px double rgba(167, 47, 20, 1);
}
}