summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/blog.css35
-rw-r--r--assets/css/font.css9
-rw-r--r--assets/image/moon.svg1
-rw-r--r--assets/image/sun.svg1
-rw-r--r--assets/js/theme.js16
-rw-r--r--templates/base.html.j26
-rw-r--r--templates/sidebar.html.j212
7 files changed, 66 insertions, 14 deletions
diff --git a/assets/css/blog.css b/assets/css/blog.css
index 8928235..028e4b9 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -12,14 +12,27 @@
--term-white: #b5aba8;
}
-@font-face {
- font-family: "jetbrains-mono";
- src: url("/assets/font/JetBrainsMono-Regular.woff2");
+[used-theme="light"] {
+ --term-fg: #515151;
+ --term-bg: #f3f3f3;
+ --term-black: #515151;
+ --term-red: #ff001e;
+ --term-green: #5eaa0c;
+ --term-yellow: #f29b00;
+ --term-blue: #0098ca;
+ --term-magenta: #d52ad2;
+ --term-cyan: #00dad5;
+ --term-white: #f3f3f3;
+}
+
+a[class*="theme-selector"] {
+ color: var(--term-green);
}
-html {
- font-family: "jetbrains-mono", serif;
- font-variant-ligatures: none;
+html:not([used-theme]) .theme-selector-dark,
+html[used-theme="dark"] .theme-selector-dark,
+html[used-theme="light"] .theme-selector-light {
+ display: none;
}
header, .icon-text {
@@ -39,7 +52,7 @@ header, .icon-text {
header {
margin-top: 0rem;
- margin-bottom 1rem;
+ margin-bottom: 1rem;
}
header div {
@@ -61,7 +74,7 @@ header span {
hr {
width: 90%;
- color: var(--term-black);
+ color: var(--term-bg);
}
.nobr,
@@ -105,7 +118,7 @@ hr {
.code-block,
.code-block-wrap {
border-style: solid;
- border-color: var(--term-white);
+ border-color: var(--term-fg);
border-width: 0.1rem;
padding: 0.7rem;
}
@@ -171,7 +184,7 @@ img
max-width: 100%;
max-height: 100%;
border-style: solid;
- border-color: var(--term-black);
+ border-color: var(--term-bg);
border-width: 0.1rem;
width: 100%;
}
@@ -215,7 +228,7 @@ a.posts-listing-link:hover :is(h2, h3)
@media (min-width: 768px) {
main {
border-width: 0.15rem;
- border-color: var(--term-black);
+ border-color: var(--term-bg);
border-style: none solid none solid;
}
}
diff --git a/assets/css/font.css b/assets/css/font.css
new file mode 100644
index 0000000..cda8b7a
--- /dev/null
+++ b/assets/css/font.css
@@ -0,0 +1,9 @@
+@font-face {
+ font-family: "jetbrains-mono";
+ src: url("/assets/font/JetBrainsMono-Regular.woff2");
+}
+
+html {
+ font-family: "jetbrains-mono", serif;
+ font-variant-ligatures: none;
+} \ No newline at end of file
diff --git a/assets/image/moon.svg b/assets/image/moon.svg
new file mode 100644
index 0000000..c0e3eeb
--- /dev/null
+++ b/assets/image/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#f0c674" d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.1 103.1 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"/></svg> \ No newline at end of file
diff --git a/assets/image/sun.svg b/assets/image/sun.svg
new file mode 100644
index 0000000..126f454
--- /dev/null
+++ b/assets/image/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#f0c674" d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m8 24a64 64 0 1 0 64 64a64.07 64.07 0 0 0-64-64m-69.66 5.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"/></svg> \ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..ffb6d48
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,16 @@
+"use strict"
+const THEME_KEY = "used-theme";
+
+function updateTheme() {
+ let theme = localStorage.getItem(THEME_KEY);
+ if (theme != null) {
+ document.documentElement.setAttribute(THEME_KEY, theme)
+ }
+}
+
+function setTheme(theme) {
+ localStorage.setItem(THEME_KEY, theme);
+ updateTheme();
+}
+
+updateTheme(); \ No newline at end of file
diff --git a/templates/base.html.j2 b/templates/base.html.j2
index 1925ed2..fa1f2d8 100644
--- a/templates/base.html.j2
+++ b/templates/base.html.j2
@@ -7,8 +7,10 @@
<meta property="og:title" content="{% block page_title_short %}{{ site.blog_name }}{% endblock %}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ url }}" />
- <link rel="stylesheet" href="{{ site.assets_path }}/css/blog.css" />
<link rel="stylesheet" href="{{ site.assets_path_static }}/css/bootstrap-grid.min.css" />
+ <link rel="stylesheet" href="{{ site.assets_path }}/css/font.css" />
+ <script src="{{ site.assets_path }}/js/theme.js"></script>
+ <link rel="stylesheet" href="{{ site.assets_path }}/css/blog.css" />
</head>
<body>
<div class="bootstrap-wrapper">
@@ -24,7 +26,7 @@
dOB68QO8PdUOpugoO9bD
CgggbU8OU qOp qOdoUOdcb
6OuU</span><span class="yellow"> /</span><span class="green">p u gcoUodpP</span>
-<span class="yellow"> \\\// /<span><span class="green">douUP</span>
+<span class="yellow"> \\\// /</span><span class="green">douUP</span>
<span class="yellow"> \\\////
|||/\
|||\/
diff --git a/templates/sidebar.html.j2 b/templates/sidebar.html.j2
index fdb1b4b..f675735 100644
--- a/templates/sidebar.html.j2
+++ b/templates/sidebar.html.j2
@@ -22,8 +22,18 @@ Sometimes I touch upon some more artistic stuff, but mostly just to amuse myself
<span>Git repositories</span>
</a>
<h3 class="magenta">Top tags</h3>
+<p>ls <a href="/tags">~/tags/</a></p>
<p>{% for tag in site.top_tags %}<a href="/tags/{{ tag }}.html">{{ tag }}/</a>{% if not loop.last %} {% endif %}{% endfor %}</p>
-<p>more: cd <a href="/tags">~/tags</a></p>
+<h3 class="magenta">I want different colors</h3>
+<p>~/themes/</p>
+<a href="javascript:void(0);" class="icon-text theme-selector-light" onclick="setTheme('light')">
+ <img src="/assets/image/sun.svg" class="svg-icon" />
+ <span>sweet-celestia.sh</span>
+</a>
+<a href="javascript:void(0);" class="icon-text theme-selector-dark" onclick="setTheme('dark')">
+ <img src="/assets/image/moon.svg" class="svg-icon" />
+ <span>luna-eclipsed.sh</span>
+</a>
<h3 class="magenta">Never miss a post</h3>
<a href="/feed.xml" class="icon-text">
<img src="/assets/image/rss.svg" class="svg-icon" />
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-15 03:54:08 +0000