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 ++ 2 files changed, 416 insertions(+) create mode 100644 blog/assets/css/blog.css create mode 100644 blog/assets/css/font.css (limited to 'blog/assets/css') 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 -- cgit v1.2.3-70-g09d2