From d8995902414f2d2689b0bbdc6651730b1fe9bd31 Mon Sep 17 00:00:00 2001 From: Botond Hende Date: Wed, 17 Dec 2025 23:31:39 +0100 Subject: moved blog generation to separate folder --- blog/assets/css/blog.css | 407 +++++++++++++++++++++++++++ blog/assets/css/font.css | 9 + blog/assets/font/JetBrainsMono-Regular.woff2 | Bin 0 -> 92164 bytes blog/assets/image/arch.svg | 1 + blog/assets/image/balloon.svg | 1 + blog/assets/image/email.svg | 1 + blog/assets/image/git.svg | 1 + blog/assets/image/mastodon.svg | 1 + blog/assets/image/moon.svg | 1 + blog/assets/image/rss.svg | 1 + blog/assets/image/sun.svg | 1 + blog/assets/image/website.svg | 1 + blog/assets/js/theme.js | 20 ++ 13 files changed, 445 insertions(+) create mode 100644 blog/assets/css/blog.css create mode 100644 blog/assets/css/font.css create mode 100644 blog/assets/font/JetBrainsMono-Regular.woff2 create mode 100644 blog/assets/image/arch.svg create mode 100644 blog/assets/image/balloon.svg create mode 100644 blog/assets/image/email.svg create mode 100644 blog/assets/image/git.svg create mode 100644 blog/assets/image/mastodon.svg create mode 100644 blog/assets/image/moon.svg create mode 100644 blog/assets/image/rss.svg create mode 100644 blog/assets/image/sun.svg create mode 100644 blog/assets/image/website.svg create mode 100644 blog/assets/js/theme.js (limited to 'blog/assets') diff --git a/blog/assets/css/blog.css b/blog/assets/css/blog.css new file mode 100644 index 0000000..e921a73 --- /dev/null +++ b/blog/assets/css/blog.css @@ -0,0 +1,407 @@ +:root +{ + --term-fg: #b5aba8; + --term-bg: #2b2b2b; + --term-black: #515151; + --term-red: #cc6666; + --term-green: #b5bd68; + --term-yellow: #f0c674; + --term-blue: #81a2be; + --term-magenta: #b294bb; + --term-cyan: #8abeb7; + --term-white: #b5aba8; + + .filter-yellow{ + filter: brightness(0) saturate(100%) invert(91%) sepia(86%) saturate(596%) hue-rotate(314deg) brightness(96%) contrast(97%); + } +} + +[data-theme="light"] { + --term-fg: #515151; + --term-bg: #f3f3f3; + --term-black: #8e8e8e; + --term-red: #ff001e; + --term-green: #5eaa0c; + --term-yellow: #f29b00; + --term-blue: #0098ca; + --term-magenta: #d52ad2; + --term-cyan: #00dad5; + --term-white: #f3f3f3; + + .filter-yellow { + filter: brightness(0) saturate(100%) invert(61%) sepia(18%) saturate(3874%) hue-rotate(6deg) brightness(101%) contrast(101%); + } +} + +[data-theme="pink"] { + --term-fg: #c61c72; + --term-bg: #f8b9ce; + --term-black: #960052; + --term-red: #ff001e; + --term-green: #63bf01; + --term-yellow: #fcf6a6; + --term-blue: #00aff4; + --term-magenta: #a8005b; + --term-cyan: #00dad5; + --term-white: #f3f3f3; + + .filter-yellow { + filter: brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(1428%) hue-rotate(334deg) brightness(108%) contrast(98%); + } +} + +a[class*="theme-selector"] { + color: var(--term-green); +} + + +html:not([data-theme]) .theme-selector-dark, +html[data-theme="dark"] .theme-selector-dark, +html[data-theme="light"] .theme-selector-light, +html[data-theme="pink"] .theme-selector-pink, +html:not([data-extended-theme]) .theme-extender-target { + display: none; +} + +.theme-extender { + color: var(--term-fg); + font-weight: normal; +} + +.theme-extender:hover { + text-decoration: none; +} + +html:not([data-extended-theme]) .theme-extender { + color: var(--term-bg); +} + +header, .icon-text { + display: flex; + flex-flow: row; + align-items: center; +} + +.icon-text { + margin-top: 0.2rem; + margin-bottom: 0.2rem; +} + +.icon-text > :first-child { + margin-right: 0.3rem; +} + +header { + margin-top: 0rem; + margin-bottom: 1rem; +} + +header div { + flex: 1; +} + +header span { + flex: 0.2; +} + +.blog-title { + margin-top: 0rem; +} + +.ascii-art { + font-size: 0.6rem; + white-space: pre; +} + +hr { + width: 90%; + color: var(--term-black); +} + +.nobr, +.icon-text p, +.icon-text span { + white-space: nowrap; +} + +.force-wrap p, .force-wrap { + word-wrap: break-word; +} + +.quote { + margin: 1.2rem 0; +} + +.quote-main { + display: flex; + flex-flow: row; + align-items: center; + gap: 1rem; +} + +.quote p { + margin-top: 0; + margin-bottom: 0; + color: var(--term-yellow); +} + +p.quote-source { + font-size: 0.8rem; + margin-left: 25%; + text-align: center; +} + +.quote-main p:first-child{ + margin-left: auto; + font-size: 2rem; +} + +.quote-main p:last-child{ + margin-right: auto; + font-size: 2rem; +} + +.quote-main p:not(:first-child):not(:last-child) { + font-style: italic; +} + +.code-block, +.code-block-wrap { + border-style: solid; + border-color: var(--term-fg); + border-width: 0.1rem; + padding: 0.7rem; +} + +span.code-block, +span.code-block-wrap { + padding: 0 0.1rem; +} + +.code-block { + overflow-x: auto; +} + +figure { + margin-left: 0; + margin-right: 0; +} + +figcaption { + text-align: center; + color: var(--term-fg); +} + +h1 { + font-size: 2rem; + margin-top: 2rem; +} + +h2 { + font-size: 1.5rem; + margin-top: 1.5rem; +} + +h3 { + font-size: 1.2rem; + margin-top: 1.2rem; +} + +p { + font-size: 1rem; + margin-top: 0.8rem; +} + +ul { + padding-left: 2rem; +} + +li::marker { + content: "* "; + color: var(--term-cyan); +} + +li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + color: var(--term-fg); +} + +.code-block p, +.code-block-wrap p { + margin: 0; +} + +.code-block p { + white-space: pre; +} + +body { + background-color: var(--term-bg); +} + +p, h1, h2, h3 { + color: var(--term-fg); + margin-bottom: 0.8rem; +} + +h2.index-title { + margin-top: 0.8rem; +} + +img +{ + max-width: 100%; + max-height: 100%; + border-style: solid; + border-color: var(--term-bg); + border-width: 0.1rem; + width: 100%; +} + +.svg-icon { + max-width: 1.5rem; + max-height: 1.5rem; + border: none; + width: 1.5rem; + height: 1.5rem; +} + +a.dont-bother { + color: var(--term-fg); + font-weight: normal; +} + +a.dont-bother:hover { + text-decoration: none; +} + +strong { + color: var(--term-yellow); +} + +a { + font-weight: bold; + color: var(--term-blue); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a.posts-listing-link:hover :is(h2, h3) +{ + text-decoration: underline; +} + +.spoiler { + position: absolute; + left:-10000px; +} + +.spoiler:checked ~ label.spoiler-on, +.spoiler:not(:checked) ~ label.spoiler-off { + display: none; +} + +label.spoiler-on { + background-color: var(--term-fg); +} + +label.spoiler-off { + background-color: var(--term-black); +} + +@media (min-width: 768px) { + main { + border-width: 0.15rem; + border-color: var(--term-black); + border-style: none solid none solid; + } +} + +main :is(h1, h2, h3) { + color: var(--term-yellow); + margin-top: 2rem; +} + +.other_post { + display: flex; + flex-flow: row; + align-items: center; + margin: 2rem 0rem; + gap: 1rem; +} + +.other_post div { + flex: 1; +} + +.other_post img { + max-width: 100%; + max-height: 100%; +} + +.first-element { + margin-top: 0; +} + +.last-element { + margin-bottom: 0; +} + +div.huge-vertical-spacer-at-the-bottom { + height: 10rem; +} + +@media (max-width: 767px) { + div.sidebar-spacing { + height: 10rem; + } +} + +div.blog-content-spacer { + height: 2rem; +} + +/* Extra "terminal" colors */ +.fg { + color: var(--term-fg); +} + +.bg { + color: var(--term-bg); +} + +.black { + color: var(--term-black); +} + +.red { + color: var(--term-red); +} + +.green { + color: var(--term-green); +} + +.yellow { + color: var(--term-yellow); +} + +.blue { + color: var(--term-blue); +} + +.magenta { + color: var(--term-magenta); +} + +.cyan { + color: var(--term-cyan); +} + +.white { + color: var(--term-white); +} diff --git a/blog/assets/css/font.css b/blog/assets/css/font.css new file mode 100644 index 0000000..cda8b7a --- /dev/null +++ b/blog/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/blog/assets/font/JetBrainsMono-Regular.woff2 b/blog/assets/font/JetBrainsMono-Regular.woff2 new file mode 100644 index 0000000..40da427 Binary files /dev/null and b/blog/assets/font/JetBrainsMono-Regular.woff2 differ diff --git a/blog/assets/image/arch.svg b/blog/assets/image/arch.svg new file mode 100644 index 0000000..2d7e87a --- /dev/null +++ b/blog/assets/image/arch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blog/assets/image/balloon.svg b/blog/assets/image/balloon.svg new file mode 100644 index 0000000..62584c0 --- /dev/null +++ b/blog/assets/image/balloon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blog/assets/image/email.svg b/blog/assets/image/email.svg new file mode 100644 index 0000000..ed4c824 --- /dev/null +++ b/blog/assets/image/email.svg @@ -0,0 +1 @@ + diff --git a/blog/assets/image/git.svg b/blog/assets/image/git.svg new file mode 100644 index 0000000..304ecff --- /dev/null +++ b/blog/assets/image/git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blog/assets/image/mastodon.svg b/blog/assets/image/mastodon.svg new file mode 100644 index 0000000..4bac114 --- /dev/null +++ b/blog/assets/image/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blog/assets/image/moon.svg b/blog/assets/image/moon.svg new file mode 100644 index 0000000..436e0fc --- /dev/null +++ b/blog/assets/image/moon.svg @@ -0,0 +1 @@ + diff --git a/blog/assets/image/rss.svg b/blog/assets/image/rss.svg new file mode 100644 index 0000000..3554b8a --- /dev/null +++ b/blog/assets/image/rss.svg @@ -0,0 +1 @@ + diff --git a/blog/assets/image/sun.svg b/blog/assets/image/sun.svg new file mode 100644 index 0000000..126f454 --- /dev/null +++ b/blog/assets/image/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/blog/assets/image/website.svg b/blog/assets/image/website.svg new file mode 100644 index 0000000..809a2ac --- /dev/null +++ b/blog/assets/image/website.svg @@ -0,0 +1 @@ + diff --git a/blog/assets/js/theme.js b/blog/assets/js/theme.js new file mode 100644 index 0000000..9f1660c --- /dev/null +++ b/blog/assets/js/theme.js @@ -0,0 +1,20 @@ +"use strict" +const THEME_KEY = "data-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(); +} + +function setThemeExtend() { + document.documentElement.setAttribute("data-extended-theme", "true") +} + +updateTheme(); \ No newline at end of file -- cgit v1.2.3-70-g09d2