finish most of the colorswitch thigns
This commit is contained in:
parent
82d2cd2caf
commit
edc13f82d5
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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; }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
Loading…
Reference in New Issue