finish most of the colorswitch thigns

This commit is contained in:
zoe 2022-04-10 00:18:40 +02:00
parent 82d2cd2caf
commit edc13f82d5
18 changed files with 264 additions and 85 deletions

View File

@ -26,25 +26,29 @@
</div>
<div>
<a class="previous" href="http://example.org/a/">previous: A</a>
<a class="next" href="http://example.org/links/">next: Links</a>
</div>
</aside>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item active" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -24,18 +24,22 @@
</main>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -31,18 +31,22 @@
</aside>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item active" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -21,25 +21,29 @@
<li>
<a href="http://example.org/dir1/b/">2022-04-09 | B</a>
<a href="http://example.org/dir1/b/">B</a>
</li>
</ul>
</main>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item active" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

Binary file not shown.

Binary file not shown.

View File

@ -20,18 +20,22 @@
</div>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item active" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item active" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -7,6 +7,15 @@
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Sat, 09 Apr 2022 14:12:18 +0200</lastBuildDate><atom:link href="http://example.org/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Links</title>
<link>http://example.org/links/</link>
<pubDate>Sat, 09 Apr 2022 17:37:48 +0200</pubDate>
<guid>http://example.org/links/</guid>
<description></description>
</item>
<item>
<title>About</title>
<link>http://example.org/about/</link>
@ -25,15 +34,6 @@
<description></description>
</item>
<item>
<title>A</title>
<link>http://example.org/a/</link>
<pubDate>Sat, 09 Apr 2022 14:02:35 +0200</pubDate>
<guid>http://example.org/a/</guid>
<description>this is file a dskfjksdjfkdfj</description>
</item>
<item>
<title>B</title>
<link>http://example.org/dir1/b/</link>

59
public/js/darkmode.js Normal file
View File

@ -0,0 +1,59 @@
let DARKMODE = window.sessionStorage.getItem("darkmode");
const BUTTON = document.getElementById('darkmode-toggle');
const BODY = document.querySelector("body");
BUTTON.addEventListener("click", switchMode);
if (DARKMODE === null) {
askForPreferredTheme();
}
function askForPreferredTheme() {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
DARKMODE = true;
console.log("dark mode detected!")
}
else {
DARKMODE = false;
console.log("light mode detected!")
}
save_preferences();
}
changeDisplay();
function switchMode() {
DARKMODE = !DARKMODE;
save_preferences();
changeDisplay();
};
function changeDisplay() {
console.log(DARKMODE);
if (DARKMODE == true) {
switchToDark();
}
else {
switchToLight();
}
};
function switchToLight() {
BUTTON.checked = false;
console.log("switched to light");
BODY.classList.remove("dark");
BODY.classList.add("light");
}
function switchToDark() {
BUTTON.checked = true;
console.log("switched to dark");
BODY.classList.remove("light");
BODY.classList.add("dark");
}
function save_preferences() {
sessionStorage.setItem("darkmode", DARKMODE)
console.log("darkmode preferences saved: ", DARKMODE)
}

54
public/links/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Links</title>
<link rel="stylesheet" href="/scss/main.css">
<link rel="icon" type="image/x-icon" href="/svg/favicon.svg">
</head>
<body><div id="content">
<section id="main">
<h1 id="title">Single Page Links</h1>
<div>
<article id="content">
</article>
</div>
</section>
<aside id="meta">
<div>
<section>
</section>
</div>
<div>
<a class="previous" href="http://example.org/about/">previous: About</a>
</div>
</aside>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="footer-nav-item active" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -33,18 +33,22 @@
</aside>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item active" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -33,18 +33,22 @@
</aside>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item active" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -21,29 +21,33 @@
<li>
<a href="http://example.org/posts/aeiuo/">2022-04-09 | Aeiuo</a>
<a href="http://example.org/posts/aeiuo/">Aeiuo</a>
</li>
<li>
<a href="http://example.org/posts/example/">2022-04-09 | Example</a>
<a href="http://example.org/posts/example/">Example</a>
</li>
</ul>
</main>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item active" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -1,37 +1,49 @@
body {
background-color: #352b42;
color: #f2f0e5; }
body.light {
background-color: #ffe7d6;
color: #73464c; }
a {
color: #c2d368; }
footer, footer a {
background-color: #f2f0e5;
color: #352b42; }
body.dark {
background-color: black;
color: white; }
@font-face {
font-family: Caskaydia Cove;
src: url(../fonts/Caskaydia); }
font-family: CaskaydiaCove;
src: url(/font/CaskaydiaCove.ttf); }
* {
font-family: CaskaydiaCove;
font-size: 16pt; }
h1 {
font-size: 42pt; }
a {
text-decoration: none; }
footer a {
text-decoration: underline; }
footer {
font-size: 20pt; }
html, body {
height: 100%;
flex: auto; }
footer {
height: 10%;
min-height: 24pt;
position: sticky;
display: flex;
justify-content: center;
align-items: center;
height: 10%; }
justify-content: center; }
#footer-content {
width: 100%; }
#content {
min-height: 90%; }
#footer-right {
justify-self: right; }
* {
padding: 0;
margin: 0; }

View File

@ -2,6 +2,9 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://example.org/links/</loc>
<lastmod>2022-04-09T17:37:48+02:00</lastmod>
</url><url>
<loc>http://example.org/about/</loc>
<lastmod>2022-04-09T14:23:49+02:00</lastmod>
</url><url>
@ -13,9 +16,6 @@
</url><url>
<loc>http://example.org/posts/</loc>
<lastmod>2022-04-09T14:12:18+02:00</lastmod>
</url><url>
<loc>http://example.org/a/</loc>
<lastmod>2022-04-09T14:02:35+02:00</lastmod>
</url><url>
<loc>http://example.org/dir1/b/</loc>
<lastmod>2022-04-09T14:02:24+02:00</lastmod>

View File

@ -24,18 +24,22 @@
</main>
</div><footer>
<div id="footer-center">
<nav id="footer-nav">
<a class="sidebar-nav-item" href="/about" title="">about</a>
<a class="footer-nav-item" href="/" title=""> home</a>
<a class="sidebar-nav-item" href="/dir1/" title="Dir1s">Dir1s</a>
<a class="footer-nav-item" href="/about/" title="About"> about</a>
<a class="sidebar-nav-item" href="/" title="">home</a>
<a class="sidebar-nav-item" href="/posts/" title="Posts">Posts</a>
<a class="footer-nav-item" href="/links/" title="Links"> links</a>
</nav>
</div>
<div id="footer-right">
<input type="checkbox" id="darkmode-toggle">
</div>
</footer>
<script src="/js/darkmode.js"></script>
</body>
</html>

View File

@ -1,17 +1,35 @@
body {
background-color: #ffe7d6;
color: #73464c; }
background-color: #292831;
color: #fbbbad; }
body.light {
background-color: #515262;
color: #c9cca1; }
a {
background-color: #ab5675;
color: #ffe7d6; }
background-color: #ee8695;
color: #292831; }
a.light {
background-color: #ab5675;
color: #515262; }
a.footer-nav-item.active {
color: #ab5675; }
color: #4a7a96; }
a.footer-nav-item.active.light {
color: #72dcbb; }
footer, footer a {
background-color: #73464c;
color: #ffe7d6; }
footer {
background-color: #333f58;
color: #292831; }
footer.light {
background-color: #caa05a;
color: #515262; }
footer a {
color: #292831;
background-color: #333f58; }
footer a.light {
color: #515262;
background-color: #caa05a; }
@font-face {
font-family: CaskaydiaCove;

@ -1 +1 @@
Subproject commit 572bc88b45a78947870e2bc5e975896d1d21bc0e
Subproject commit 487b637ab93f05d57ec1acc88125a2332e8c6e86