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

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

@ -58,6 +58,15 @@
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;
}
@ -81,7 +90,7 @@ body {
margin-left: 10%;
margin-right: 10%;
padding: 10px;
background-color: #9f9287;
background-color: var(--body-bg);
}
.main h1, h2, h3 {
@ -113,7 +122,7 @@ div.pfp {
}
div.main {
background-color: #cdcac4;
background-color: var(--main-bg);
padding: 2em;
border-radius: 10px;
min-height: 500px;
@ -136,7 +145,7 @@ div.main {
div.menu {
/* background: #ae4e26; */
background: #2b2623;
background: var(--menu-bg);
padding: .5em;
margin-bottom: 2em;
overflow: hidden;
@ -163,7 +172,7 @@ div.menu {
margin-left: 1em;
min-width: 100px;
text-align: center;
background-color: #dba047;
background-color: var(--btn-col);
display:inline-block;
font-size: medium;
border-radius: 10px;
@ -172,7 +181,7 @@ div.menu {
}
.menu a:hover, .contact a:hover {
background-color: #ae4e26;
background-color: var(--btn-hov);
}
.main a {
@ -192,7 +201,7 @@ div.contact {
text-decoration: none;
padding: .8em .8em;
text-align: center;
background-color: #dba047;
background-color: var(--btn-col);
display:grid;
font-size: medium;
border-radius: 10px;
@ -205,7 +214,7 @@ div.contact {
footer {
/* background: #ae4e26; */
background: #2b2623;
background: var(--foot-bg);
padding: 1em;
margin-top: 2em;
overflow: hidden;
@ -322,3 +331,25 @@ div.desc {
display: table;
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>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>
<footer>

45
assets/css/styles.css
View File

@ -58,6 +58,15 @@
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;
}
@ -81,7 +90,7 @@ body {
margin-left: 10%;
margin-right: 10%;
padding: 10px;
background-color: #9f9287;
background-color: var(--body-bg);
}
.main h1, h2, h3 {
@ -113,7 +122,7 @@ div.pfp {
}
div.main {
background-color: #cdcac4;
background-color: var(--main-bg);
padding: 2em;
border-radius: 10px;
min-height: 500px;
@ -136,7 +145,7 @@ div.main {
div.menu {
/* background: #ae4e26; */
background: #2b2623;
background: var(--menu-bg);
padding: .5em;
margin-bottom: 2em;
overflow: hidden;
@ -163,7 +172,7 @@ div.menu {
margin-left: 1em;
min-width: 100px;
text-align: center;
background-color: #dba047;
background-color: var(--btn-col);
display:inline-block;
font-size: medium;
border-radius: 10px;
@ -172,7 +181,7 @@ div.menu {
}
.menu a:hover, .contact a:hover {
background-color: #ae4e26;
background-color: var(--btn-hov);
}
.main a {
@ -192,7 +201,7 @@ div.contact {
text-decoration: none;
padding: .8em .8em;
text-align: center;
background-color: #dba047;
background-color: var(--btn-col);
display:grid;
font-size: medium;
border-radius: 10px;
@ -205,7 +214,7 @@ div.contact {
footer {
/* background: #ae4e26; */
background: #2b2623;
background: var(--foot-bg);
padding: 1em;
margin-top: 2em;
overflow: hidden;
@ -322,3 +331,25 @@ div.desc {
display: table;
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);
}
}