about summary refs log tree commit diff
path: root/content
diff options
context:
space:
mode:
authorNgô Ngọc Đức Huy <huyngo@disroot.org>2021-05-30 21:38:58 +0700
committerNgô Ngọc Đức Huy <huyngo@disroot.org>2021-05-30 21:38:58 +0700
commit3b687cc3b77e4739ce0ea5c8b0920c82e4c6ab65 (patch)
tree368cdfffdce6f4ac9e576005e07f9718e97d1de7 /content
parentaf57704fcd8aff1f72c09a2dc2d00cef573a7142 (diff)
downloadblog-3b687cc3b77e4739ce0ea5c8b0920c82e4c6ab65.tar.gz
Upload new blog post
Diffstat (limited to 'content')
-rw-r--r--content/posts/2021-05-30-css-stylus.md89
-rw-r--r--content/posts/badwolf-ish.pngbin0 -> 97272 bytes
2 files changed, 89 insertions, 0 deletions
diff --git a/content/posts/2021-05-30-css-stylus.md b/content/posts/2021-05-30-css-stylus.md
new file mode 100644
index 0000000..ba565fc
--- /dev/null
+++ b/content/posts/2021-05-30-css-stylus.md
@@ -0,0 +1,89 @@
+---
+title: "App Recommendation: Stylus"
+date: 2021-05-30T21:17:55+07:00
+categories: [blog]
+tags: [recommendation, css, custom, stylus, "browser addon"]
+draft: true
+---
+
+# No more theme-switcher
+
+So, I dropped the theme switcher to `auto` theme, which means it will switch
+theme automagically according to your system setting.
+
+However, if one applies [hardening][ff-config] to Firefox, one will notice that
+the feature is broken, and you'll see light theme by default.  How would one fix
+this?
+
+I have a nice solution: [Stylus][stylus].
+
+Stylus is a browser addon that allows you to write custom CSS.  And of course,
+it is free software, released under GNU GPL version 3.0!  And I love their
+privacy policy:
+
+> Unlike other similar extensions, we don't find you to be all that interesting.
+> Your questionable browsing history should remain between you and the NSA.
+> Stylus collects nothing. Period.
+
+# Applying to my website
+
+I've customized my theme to look a bit like my vim theme, badwolf, but with a
+lighter background:
+
+![badwolf-ish](/posts/badwolf-ish.png)
+
+Here is the CSS I used:
+
+```css
+:root {
+    --font-color: #eee;
+    --bg-color: #212121;
+
+    --link-color: #0a9dff;
+    --link-state-color:#ffa724;
+    --link-state-border-color: rgba(238, 54, 54, 0.5);
+
+    --thead-bg-color: #343a40;
+    --table-border-color: lightgrey;
+
+    --nav-bg-color: #242424;
+    --nav-link-color: #b6b6b6;
+
+    --pre-color: #333;
+    --pre-bg-color: #f1f1f1;
+
+    --bq-color: #ccc;
+    --hr-color: #333;
+
+    --pagination-bg-color: #373737;
+    --pagination-link-color: #b6b6b6;
+
+    --post-info-color: #599ada;
+
+    --switcher-color: #333;
+    --switcher-bg-color: #fff;
+}
+
+html {
+    font-family: monospace;
+}
+
+h1, h2, h3 {
+    color: #aeee00;
+}
+
+ul li {
+  list-style: '* '; /* Remove default bullets */
+}
+
+ul li::marker {
+    color: #ffa724;
+    font-weight: bold;
+}
+```
+
+The source file could be found on [sourcehut][sauce]
+
+[ff-config]: https://privacytools.io/browsers/#about_config
+[stylus]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
+[sauce]: https://git.sr.ht/~huyngo/huyngo.srht.site/tree/master/item/dark.css
diff --git a/content/posts/badwolf-ish.png b/content/posts/badwolf-ish.png
new file mode 100644
index 0000000..b65afd9
--- /dev/null
+++ b/content/posts/badwolf-ish.png
Binary files differ