From 5df314b6a50a25699c6a9e781860659192cfedb4 Mon Sep 17 00:00:00 2001
From: Ruben <60184397+sneexy-boi@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:27:20 -0600
Subject: [PATCH] light theme wip
---
index.html | 7 +
style.css | 397 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 404 insertions(+)
diff --git a/index.html b/index.html
index 93b39de..b295754 100644
--- a/index.html
+++ b/index.html
@@ -58,6 +58,13 @@
+
+
+
+ my socials! feel free to contact me by these ● you can find extra info by clicking their icons!
+
+
diff --git a/style.css b/style.css
index 4384ab4..1cc0e15 100644
--- a/style.css
+++ b/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 -- */
+}
\ No newline at end of file