summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--luevano/index.html95
-rw-r--r--static/css/dark.css14
-rw-r--r--static/css/general_style.css15
-rw-r--r--static/css/light.css14
4 files changed, 89 insertions, 49 deletions
diff --git a/luevano/index.html b/luevano/index.html
index f1f1f05..15bda0a 100644
--- a/luevano/index.html
+++ b/luevano/index.html
@@ -14,6 +14,14 @@
</head>
<body>
+ <div id="theme-switcher-container">
+ <i class="fas fa-sun"></i>
+ <label class="switch theme">
+ <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
+ <span class="slider round"></span>
+ </label>
+ <i class="fas fa-moon"></i>
+ </div>
<header>
<ul class="menubar">
@@ -49,49 +57,46 @@
</li>
</ul>
</nav>
-
- <label class="switch">
- <input id="theme-switch" type="checkbox" onclick="toggleTheme()">
- <span class="slider round"></span>
- </label>
-
- <div class="welcome">
- <h1>
- Welcome!
- </h1>
-
- <p>
- My name is David Luévano and this is my little piece of internet.
- </p>
-
- <p>
- I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon").
- </p>
-
- <p>
- But for now, this place is under construction (as you may notice from most links being broken).<br/>
-
- <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction">
- </p>
- </div>
-
- <footer class="footer">
- <i class="fas fa-envelope" alt="Email"></i>
- Email
- <a href="mailto:david@luevano.xyz">
- david@luevano.xyz
- </a>
- <br>
-
- <i class="fas fa-rss" alt="RSS"></i>
- RSS
- <a href="https://blog.luevano.xyz/rss.xml">
- https://blog.luevano.xyz/rss.xml
- </a>
- <br>
-
- <i class="fas fa-donate" alt="Donate"></i>
- <a href="https://luevano.xyz/donate">Donate</a>
- <a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i></a>
- </footer>
+ </header>
+
+ <div class="welcome">
+ <h1>
+ Welcome!
+ </h1>
+
+ <p>
+ My name is David Luévano and this is my little piece of internet.
+ </p>
+
+ <p>
+ I plan on doing all sort of stuff here, including a <a href="https://blog.luevano.xyz/">blog</a> and stuff like an interactive <a href="https://gb.luevano.xyz/">gameboy</a> where everyone who participates plays together (think "twitch plays pokemon" and more recently "twitter plays pokemon").
+ </p>
+
+ <p>
+ But for now, this place is under construction (as you may notice from most links being broken).<br/>
+
+ <img src="https://static.luevano.xyz/images/gifs/worker1.gif" alt="Under construction">
+ </p>
+ </div>
+
+ <footer class="footer">
+ <i class="fas fa-envelope" alt="Email"></i>
+ Email
+ <a href="mailto:david@luevano.xyz">
+ david@luevano.xyz
+ </a>
+ <br>
+
+ <i class="fas fa-rss" alt="RSS"></i>
+ RSS
+ <a href="https://blog.luevano.xyz/rss.xml">
+ https://blog.luevano.xyz/rss.xml
+ </a>
+ <br>
+
+ <i class="fas fa-donate" alt="Donate"></i>
+ <a href="https://luevano.xyz/donate">Donate</a>
+ <a href="https://paypal.me/dlvna"><i class="fab fa-paypal" alt="Paypal"></i></a>
+ </footer>
</body>
+</html>
diff --git a/static/css/dark.css b/static/css/dark.css
index 29af64b..13a3ea3 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -20,10 +20,12 @@
--fg-acc4: var(--color14);
--fg-acc5: var(--color15);
- --switch-bg: var(--color1);
- --switch-slider: var(--color4);
+ --switch-bg: var(--color3);
+ --switch-slider: var(--color0);
--switch-toggled-bg: var(--color10);
--switch-ol: var(--color4);
+ --switch-moon: var(--color3);
+ --switch-sun: var(--color13);
}
html {
@@ -61,6 +63,14 @@ h3 {
background-color: var(--switch-bg);
}
+#theme-switcher-container i.fa-moon {
+ color: var(--switch-moon);
+}
+
+#theme-switcher-container i.fa-sun {
+ color: var(--switch-sun);
+}
+
.slider:before {
background-color: var(--switch-slider);
}
diff --git a/static/css/general_style.css b/static/css/general_style.css
index e49edb7..a4e032e 100644
--- a/static/css/general_style.css
+++ b/static/css/general_style.css
@@ -26,6 +26,21 @@ a{
height: 1rem;
}
+/* specifically the theme switcher */
+#theme-switcher-container {
+ position: absolute;
+ top: 1.6em;
+ --hardcoded-pos: calc(50vw - 25.2em);
+ --resized-pos: calc(0.4px + 0.5em);
+ --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos));
+ right: var(--calculated-pos);
+}
+
+#theme-switcher-container i {
+ position: relative;
+ top: -0.2em;
+}
+
.switch input {
opacity: 0;
width: 0;
diff --git a/static/css/light.css b/static/css/light.css
index cee7f22..b295ccf 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -20,10 +20,12 @@
--fg-acc4: var(--color14);
--fg-acc5: var(--color15);
- --switch-bg: var(--color1);
+ --switch-bg: var(--color3);
--switch-slider: var(--color4);
--switch-toggled-bg: var(--color10);
- --switch-ol: var(--color4);
+ --switch-ol: var(--color0);
+ --switch-moon: var(--color3);
+ --switch-sun: var(--color13);
}
html {
@@ -61,6 +63,14 @@ h3 {
background-color: var(--switch-bg);
}
+#theme-switcher-container i.fa-moon {
+ color: var(--switch-moon);
+}
+
+#theme-switcher-container i.fa-sun {
+ color: var(--switch-sun);
+}
+
.slider:before {
background-color: var(--switch-slider);
}