light theme wip
This commit is contained in:
Ruben
parent
100a8028ed
commit
5df314b6a5
2 changed files with 404 additions and 0 deletions
|
|
@ -58,6 +58,13 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
<div class="pixel-corners">
|
||||
<article id="socials" class="socials">
|
||||
<h1><span class="anchors"><a href="#socials">~/socials</a></span></h1>
|
||||
<h1>my socials! feel free to contact me by these <span class="dot">●</span> you can find extra info by clicking their icons!</small>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="pixel-corners">
|
||||
<article id="links" class="links">
|
||||
<h1><span class="anchors"><a href="#links">~/links</a></span></h1>
|
||||
|
|
|
|||
397
style.css
397
style.css
|
|
@ -722,3 +722,400 @@ footer > .dot {
|
|||
}
|
||||
}
|
||||
/* -- yea -- */
|
||||
|
||||
/* -- the entire css repasted for light theme enjoyers -- */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--page-bg: #FFFFFF;
|
||||
--bg: #E6F4EB;
|
||||
--bg-t: #BCFFE1;
|
||||
--header: #00C293;
|
||||
--header-2: #00A47C;
|
||||
--fg: #121E19;
|
||||
--accent-1: #36FFC4;
|
||||
--shadow: #36FFC4;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--page-bg);
|
||||
}
|
||||
|
||||
/* -- pixelated border radius -- */
|
||||
.pixel-corners,
|
||||
.pixel-corners--wrapper {
|
||||
clip-path: polygon(0px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px 100%,
|
||||
calc(100% - 28px) 100%,
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
100% calc(100% - 28px),
|
||||
100% 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 0px,
|
||||
28px 0px,
|
||||
28px 4px,
|
||||
20px 4px,
|
||||
20px 8px,
|
||||
12px 8px,
|
||||
12px 12px,
|
||||
8px 12px,
|
||||
8px 20px,
|
||||
4px 20px,
|
||||
4px 28px,
|
||||
0px 28px);
|
||||
position: relative;
|
||||
}
|
||||
.pixel-corners {
|
||||
border: 4px solid transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.pixel-corners--wrapper {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.pixel-corners--wrapper .pixel-corners {
|
||||
display: block;
|
||||
clip-path: polygon(4px 28px,
|
||||
8px 28px,
|
||||
8px 20px,
|
||||
12px 20px,
|
||||
12px 12px,
|
||||
20px 12px,
|
||||
20px 8px,
|
||||
28px 8px,
|
||||
28px 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 28px),
|
||||
4px calc(100% - 28px));
|
||||
}
|
||||
.pixel-corners::after,
|
||||
.pixel-corners--wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
clip-path: polygon(0px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px 100%,
|
||||
calc(100% - 28px) 100%,
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
100% calc(100% - 28px),
|
||||
100% 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 0px,
|
||||
28px 0px,
|
||||
28px 4px,
|
||||
20px 4px,
|
||||
20px 8px,
|
||||
12px 8px,
|
||||
12px 12px,
|
||||
8px 12px,
|
||||
8px 20px,
|
||||
4px 20px,
|
||||
4px 28px,
|
||||
0px 28px,
|
||||
0px 50%,
|
||||
4px 50%,
|
||||
4px 28px,
|
||||
8px 28px,
|
||||
8px 20px,
|
||||
12px 20px,
|
||||
12px 12px,
|
||||
20px 12px,
|
||||
20px 8px,
|
||||
28px 8px,
|
||||
28px 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px 50%,
|
||||
0px 50%);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #36ffc4;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pixel-corners::after {
|
||||
margin: -4px;
|
||||
}
|
||||
/* -- end of pixelated borders -- */
|
||||
|
||||
/* -- usual css things -- */
|
||||
h1 {
|
||||
color: var(--header);
|
||||
text-shadow: 0px 0px 14px var(--accent-1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--header-2);
|
||||
text-shadow: 0px 0px 8px var(--header-2);
|
||||
}
|
||||
|
||||
li, p {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-1);
|
||||
text-shadow: 0px 0px 5px var(--accent-1);
|
||||
}
|
||||
|
||||
footer > a, footer > p, footer > p > a {
|
||||
color: var(--header);
|
||||
}
|
||||
/* -- end of usual css things -- */
|
||||
|
||||
.nav, .nav > a {
|
||||
color: var(--header-2);
|
||||
text-shadow: 0px 0px 8px var(--header-2);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--accent-1);
|
||||
text-shadow: 0px 0px 8px var(--accent-1);
|
||||
}
|
||||
|
||||
.dot {
|
||||
color: var(--accent-1);
|
||||
text-shadow: 0px 0px 8px var(--accent-1);
|
||||
}
|
||||
|
||||
.anchors, .anchors > a {
|
||||
color: var(--header);
|
||||
text-shadow: 0px 0px 14px var(--accent-1);
|
||||
}
|
||||
|
||||
.links > .fedi > .dot, .links > .messaging > .dot, .links > .platforms > .dot, .links > .misc > .dot {
|
||||
color: var(--accent-1);
|
||||
text-shadow: 0px 0px 8px var(--accent-1);
|
||||
}
|
||||
|
||||
.separator > small {
|
||||
color: var(--bg-t);
|
||||
}
|
||||
|
||||
.intro-box, .navbar, .about-me, .links, .fun-facts, .user-reviews, .buttons {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
/* -- fedi section -- */
|
||||
|
||||
/* -- firefish -- */
|
||||
.firefish > p > small, .firefish > p > small > a {
|
||||
background: #E74788;
|
||||
background: linear-gradient(to right, #E74788 0%, #F6AE4A 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #F1775D;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- akkoma -- */
|
||||
.akkoma > p > small, .akkoma > p > small > a {
|
||||
color: #CBA6D7;
|
||||
text-shadow: 0px 0px 8px #CBA6D7;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- messaging section -- */
|
||||
|
||||
/* -- revolt -- */
|
||||
.revolt > p > small, .revolt > p > small > a {
|
||||
background: #FF4654;
|
||||
background: linear-gradient(to right, #FF4654 0%, #FF558B 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #FF4654;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- matrix -- */
|
||||
.matrix > p > small, .matrix > p > small > a {
|
||||
background: #FFFFFF;
|
||||
background: linear-gradient(to right, #FFFFFF 0%, #4B4B4B 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #4B4B4B;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- xmpp -- */
|
||||
.xmpp > p > small, .xmpp > p > small > a {
|
||||
background: #EED49F;
|
||||
background: linear-gradient(to right, #A6DA95 0%, #EED49F 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #11A4D8;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- other platforms that i guess count as social -- */
|
||||
|
||||
/* -- listenbrainz -- */
|
||||
.listenbrainz > p > small, .listenbrainz > p > small > a {
|
||||
background: #DA9014;
|
||||
background: linear-gradient(to right, #8AADf4 0%, #EB743B 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #D58C17;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- git.gay -- */
|
||||
.gitgay > p > small, .gitgay > p > small > a {
|
||||
background: #69CB86;
|
||||
background: linear-gradient(to right, #FE9494 0%, #FFC783 31%, #69CB86 56%, #83A8FF 79%, #C56AD4 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #69CB86;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- gith*b -- */
|
||||
.github > p > small, .github > p > small > a {
|
||||
color: #CDD6F4;
|
||||
text-shadow: 0px 0px 8px #CDD6F4;
|
||||
}
|
||||
/* -- */
|
||||
|
||||
/* -- misc. links -- */
|
||||
|
||||
/* -- retrospring -- */
|
||||
.retrospring > p > small, .retrospring > p > small > a {
|
||||
color: #CA9EE6;
|
||||
text-shadow: 0px 0px 8px #5E35B1;
|
||||
}
|
||||
|
||||
/* -- are chives dot org -- */
|
||||
.archiveorg > p > small, .archiveorg > p > small > a {
|
||||
background: #FFFFFF;
|
||||
background: linear-gradient(to right, #FFFFFF 0%, #000000 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
text-shadow: 0px 0px 8px #777777;
|
||||
}
|
||||
|
||||
/* -- end of puke code -- */
|
||||
|
||||
.quote > p::before, .quote > p::after {
|
||||
color: var(--header);
|
||||
}
|
||||
|
||||
.quote > small::before {
|
||||
text-shadow: 0px 0px 8px var(--accent-1);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.quote > small, .quote > small > i > a {
|
||||
color: var(--fg);
|
||||
}
|
||||
/* -- end of styling the rest of the elements -- */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue