From 3d57df45ce73eee1a18b7baaab5a77ad59dc13fb Mon Sep 17 00:00:00 2001 From: m1ka Date: Thu, 21 May 2026 08:57:23 +0200 Subject: [PATCH] new stylesheets ! --- .gitignore | 3 +- Dockerfile | 4 +- README | 2 +- bricks/base-header.thtml | 2 +- bricks/footer.thtml | 7 ++- bricks/navbar.thtml | 2 +- kethel/.formatter.exs | 2 +- kethel/lib/blog.ex | 28 +++++++++++ kethel/lib/thoughts.ex | 2 +- kethel/main.exs | 13 ++++-- nginx.conf | 2 +- pages/index.fxg | 4 +- pages/projects.fxg | 2 +- pull-hljs.sh | 2 +- scripts/dyn-codeberg-logo.js | 31 +++++++----- static/mastodon-logo-purple.svg | 10 ++++ static/mastodon-logo-white.svg | 3 ++ styles/base.css | 83 +++++++++++++++++---------------- styles/colophon.css | 4 +- styles/index.css | 6 +-- templates/pages/index.thtml | 6 ++- 21 files changed, 140 insertions(+), 78 deletions(-) create mode 100644 kethel/lib/blog.ex create mode 100644 static/mastodon-logo-purple.svg create mode 100644 static/mastodon-logo-white.svg diff --git a/.gitignore b/.gitignore index eeeb852ae05fef9ec324d1d4a2891fbcd75b300b..60d5d1a40501d92cf31949a89cadf1fbe60326e3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /build /static/*.min.* /deploy.sh -.DS_Store \ No newline at end of file +.DS_Store +.zed diff --git a/Dockerfile b/Dockerfile index 8657b65e43a74dd2aeb320e858713af77d2a6d2d..7617c25c5fe1acad855cdf5ab3f4f236f3105724 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ WORKDIR "/usr/local/app" COPY pull-hljs.sh . RUN ./pull-hljs.sh WORKDIR "/usr/local/app/kethel" -COPY kethel/mix.exs kethel/mix.lock kethel/package.json kethel/package-lock.json . +COPY kethel/mix.exs kethel/mix.lock kethel/package.json kethel/package-lock.json ./ RUN npm i # build www.m1kadev.nl @@ -37,4 +37,4 @@ RUN chown -R www:www /data/www RUN chmod -R 744 /data/www # serve www.m1kadev.nl -CMD [ "nginx", "-c", "/etc/nginx/nginx.conf" ] \ No newline at end of file +CMD [ "nginx", "-c", "/etc/nginx/nginx.conf" ] diff --git a/README b/README index b8133613eaf214cdf1723bd27863e69bb68567b3..59eb4a81dae6caaf4fd8ec53097d3023f4f8a119 100644 --- a/README +++ b/README @@ -11,7 +11,7 @@ this should work out of the box: ==== from source ==== Make sure you have a compatible version of <#https://codeberg.org/m1ka/fxg fxg> installed (this site is usually compiled against fxg a990e6c5ab). -go into the 'kethel' directory, and use your javascript runtime of choice (for this site, usually node.js, sadly). +go into the 'kethel' directory, and use your javascript runtime of choice (for this site, usually node.js, sadly). afterwards, build any possible dependencies for kethel using mix. finally, using the main.exs script ran against the kethel library, you can compile the website, which will output in the 'build' folder, in the root of the repository. diff --git a/bricks/base-header.thtml b/bricks/base-header.thtml index 71bbc911c38981c4f046c3e085c4bbf6d0d34e1f..9437c989ea952f565c666de76fdc3ece62dba938 100644 --- a/bricks/base-header.thtml +++ b/bricks/base-header.thtml @@ -5,4 +5,4 @@ - \ No newline at end of file + diff --git a/bricks/footer.thtml b/bricks/footer.thtml index 427ec7e3f394daa114263502fba8e84c4dc72fb3..bdb410d2ec1abd13355b311b7b9a8708f0a7332c 100644 --- a/bricks/footer.thtml +++ b/bricks/footer.thtml @@ -4,8 +4,11 @@ All content on this website is licensed under CC-BY-SA-4.0, unless otherwise noted. diff --git a/bricks/navbar.thtml b/bricks/navbar.thtml index 6a828afff6f7ff6171135bd6864eae240d0f6107..4b200c6b8b3cdf65c1e08e4b6e5ba17005e3a31d 100644 --- a/bricks/navbar.thtml +++ b/bricks/navbar.thtml @@ -7,7 +7,7 @@
home projects - blog + blog
now diff --git a/kethel/.formatter.exs b/kethel/.formatter.exs index d2cda26eddc9110057ce9e8002585682217542cc..c0d6eb1a3f29714fb6fbf120d46f457b9cb7c7f8 100644 --- a/kethel/.formatter.exs +++ b/kethel/.formatter.exs @@ -1,4 +1,4 @@ # Used by "mix format" [ - inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"] + inputs: ["{mix,.formatter,main}.exs", "{config,lib,test}/**/*.{ex,exs}"] ] diff --git a/kethel/lib/blog.ex b/kethel/lib/blog.ex new file mode 100644 index 0000000000000000000000000000000000000000..dc16c5e07cfa52473bd88cef2e342ab917bbb3aa --- /dev/null +++ b/kethel/lib/blog.ex @@ -0,0 +1,28 @@ +defmodule Blog do + def collect(project_root, bricks) do + files = + Path.wildcard(project_root <> "/blog/*.fxg") + |> Map.new(fn x -> {FileX.trimmed_filename(x), File.read!(x)} end) + + # no blog posts yet so we return nothing + + %{ + output_dir: "#{project_root}/build/blog", + main_template: File.read!(project_root <> "/templates/base.thtml"), + bricks: bricks + } + end + + def compile(blog) do + File.mkdir_p!("#{blog.output_dir}") + + index = "

my blog ^w^

comig son :3

" + + File.write!( + "#{blog.output_dir}/index.html", + Mustache.render(blog.main_template, Map.merge(%{fxg_content: index}, blog.bricks)) + ) + + IO.puts("[GENERATE] #{blog.output_dir}/index.html") + end +end diff --git a/kethel/lib/thoughts.ex b/kethel/lib/thoughts.ex index f96dcd121fa207e5839d71f315de9db7bc5330c4..76ff1d7abac71f91da94270b65d5279dd73b1e7a 100644 --- a/kethel/lib/thoughts.ex +++ b/kethel/lib/thoughts.ex @@ -58,7 +58,7 @@ defmodule Thoughts do ) File.write!("#{thoughts.project_root}/build/thoughts/index.html", index) - IO.puts("[COMPILED] #{thoughts.project_root}/build/thoughts/index.html") + IO.puts("[GENERATE] #{thoughts.project_root}/build/thoughts/index.html") t_end = System.monotonic_time(:millisecond) t_end - t_begin diff --git a/kethel/main.exs b/kethel/main.exs index f5a978a8642db0819dfabea8dc8cc7460e485b0b..128d160f3b9c2fc8d81b78bedd1789e58a06c503 100644 --- a/kethel/main.exs +++ b/kethel/main.exs @@ -20,9 +20,10 @@ if folder != nil do scripts_task = Task.async(fn -> Scripts.collect(project_root) end) pages_task = Task.async(fn -> Pages.collect(project_root, bricks) end) thoughts_task = Task.async(fn -> Thoughts.collect(project_root, bricks) end) + blog_task = Task.async(fn -> Blog.collect(project_root, bricks) end) - [styles, pages, scripts, thoughts] = - Task.await_many([styles_task, pages_task, scripts_task, thoughts_task], :infinity) + [styles, pages, scripts, thoughts, blog] = + Task.await_many([styles_task, pages_task, scripts_task, thoughts_task, blog_task], :infinity) collection_time_end = System.monotonic_time(:millisecond) delta_r = collection_time_end - collection_time_start @@ -33,6 +34,7 @@ if folder != nil do styles_compile_task = Task.async(fn -> Styles.compile(styles) end) scripts_compile_task = Task.async(fn -> Scripts.compile(scripts) end) thoughts_compile_task = Task.async(fn -> Thoughts.compile(thoughts) end) + blog_compile_task = Task.async(fn -> Blog.compile(blog) end) [pages_time, styles_time, scripts_time, thoughts_time, _] = Task.await_many( @@ -60,10 +62,11 @@ if folder != nil do File.write!("#{project_root}/build/rss.xml", rss_header <> rss_thoughts <> rss_footer) - IO.puts("[COMPILED] #{project_root}/build/rss.xml") + IO.puts("[GENERATE] #{project_root}/build/rss.xml") IO.puts("Finalising...") + IO.puts("favicon.ico") File.cp!("#{project_root}/favicon.ico", "#{project_root}/build/favicon.ico") IO.puts("") IO.puts(:stderr, "===== BUILD RESULTS =====") @@ -80,11 +83,11 @@ if folder != nil do IO.puts(:stderr, String.duplicate("-", 35)) delta_c = compilation_time_end - compilation_time_start - ratio = (delta_r / delta_c) |> Float.to_string() + ratio = (delta_c / delta_r) |> Float.to_string() IO.puts( :stderr, - "www.m1kadev.nl compiled in #{(delta_c + delta_r) / 1000} seconds (ratio #{ratio |> binary_part(0, min(5, byte_size(ratio)))})" + "www.m1kadev.nl compiled in #{(delta_c + delta_r) / 1000} seconds (ratio compilation : collection = #{ratio |> binary_part(0, min(5, byte_size(ratio)))})" ) else IO.puts(:stderr, "The root project folder should be provided on the command line") diff --git a/nginx.conf b/nginx.conf index 3b8d73ccad236206975fa3239c1e73eab1898046..970206b364ee341cc803969b1ab32e2fb5fafd49 100644 --- a/nginx.conf +++ b/nginx.conf @@ -26,4 +26,4 @@ http { root /var/lib/nginx/html; } } -} \ No newline at end of file +} diff --git a/pages/index.fxg b/pages/index.fxg index aff82615c502d388ed7751485698f5586cbdc2d6..7887962daa85de9ea5fbd5bbb7b4fa2737c7db14 100644 --- a/pages/index.fxg +++ b/pages/index.fxg @@ -1,4 +1,4 @@ -====== haii !! i'm mika! ====== +====== haii :3 i'm mika! ====== haii! i'm mika (also sometimes //m1ka//, //m1kadev//). i'm a (mostly backend) developer from <#https://wikipedia.org/wiki/The_Netherlands The Netherlands>. besides programming, i also like to play music and cook. @@ -8,4 +8,4 @@ i do VWO (dutch a-levels) physics, in the greater rotterdam area. i enjoy implem ===== contact ===== -feel free to reach out to me! i'm available at m1kadev on discord, or otherwise on my e-mail, "mika [dot] dupunkto [at] org". (you're not stupid; i think you know what characters go where). \ No newline at end of file +feel free to reach out to me! i'm available at m1kadev on discord, or otherwise on my e-mail, "mika [dot] dupunkto [at] org". (you're not stupid; i think you know what characters go where). diff --git a/pages/projects.fxg b/pages/projects.fxg index 0726f4ad076e2bbc87580e8a206ab14f4926d308..09a4436aceb60c5374c2abf86caeb21f4ff2bca8 100644 --- a/pages/projects.fxg +++ b/pages/projects.fxg @@ -5,4 +5,4 @@ <#https://github.com/m1kadev/fxg fxg> is my own markup language, written in <#https://rust-lang.org/ Rust>. it aims to maximise readability in text form, and tries to only have one way to write markup (unlike Markdown). you can view <#https://codeberg.org/m1ka/www.m1kadev.nl/src/branch/main/pages/projects.fxg the source> of this page, if you'd like to see for yourself. ===== m1kadev.nl ===== -the site you're on right now! the <#https://codeberg.org/m1ka/www.m1kadev.nl/src/branch/main/kethel generator> for this site is written in elixir. all code for the generator is written by me. +the site you're on right now! the <#https://codeberg.org/m1ka/www.m1kadev.nl/src/branch/main/kethel generator> for this site is written in <#https://elixir-lang.org/ elixir>. all code for the generator is written by me. diff --git a/pull-hljs.sh b/pull-hljs.sh index a062bbd91705cec350cb1b56fb9482a75be32bc9..db2802c301445e52dfeb0a5a358330d63a063a0e 100755 --- a/pull-hljs.sh +++ b/pull-hljs.sh @@ -16,4 +16,4 @@ wget https://raw.githubusercontent.com/highlightjs/cdn-release/refs/heads/main/b wget https://raw.githubusercontent.com/highlightjs/cdn-release/refs/heads/main/build/styles/arta.min.css -mv rust.min.js rs.min.js \ No newline at end of file +mv rust.min.js rs.min.js diff --git a/scripts/dyn-codeberg-logo.js b/scripts/dyn-codeberg-logo.js index fcf5b78a84fc2c91086c0f52a1ea89b9c87fe037..2991d6266892515aba6157a7c615ce06ce816c59 100644 --- a/scripts/dyn-codeberg-logo.js +++ b/scripts/dyn-codeberg-logo.js @@ -1,15 +1,22 @@ -const setCodebergLogo = image => { - const isLight = window.matchMedia("(prefers-color-scheme: light)").matches; - if (isLight) { - image.src = "/static/codeberg-logo_icon_blue.svg"; - } else { - image.src = "/static/codeberg-logo_icon_white.svg"; - } +const setLogoSources = (images) => { + const isLight = window.matchMedia("(prefers-color-scheme: light)").matches; + + images.codeberg.src = isLight + ? "/static/codeberg-logo_icon_blue.svg" + : "/static/codeberg-logo_icon_white.svg"; + + images.mastodon.src = isLight + ? "/static/mastodon-logo-purple.svg" + : "/static/mastodon-logo-white.svg"; }; -addEventListener("DOMContentLoaded", ev => { - const image = document.getElementById("codeberg"); - setCodebergLogo(image); - window.matchMedia("(prefers-color-scheme: light)").addEventListener('change', _ => setCodebergLogo(image)); +addEventListener("DOMContentLoaded", (_) => { + const logos = { + codeberg: document.getElementById("codeberg"), + mastodon: document.getElementById("mastodon"), + }; + setLogoSources(logos); + window + .matchMedia("(prefers-color-scheme: light)") + .addEventListener("change", (_) => setLogoSources(logos)); }); - diff --git a/static/mastodon-logo-purple.svg b/static/mastodon-logo-purple.svg new file mode 100644 index 0000000000000000000000000000000000000000..0f8baebfc9cb1fb6eb0c5fc81182e60a1e770774 --- /dev/null +++ b/static/mastodon-logo-purple.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/mastodon-logo-white.svg b/static/mastodon-logo-white.svg new file mode 100644 index 0000000000000000000000000000000000000000..39a116b223fd21c48fcfcd0f688a780be85b27fb --- /dev/null +++ b/static/mastodon-logo-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/base.css b/styles/base.css index cc95495873b827800b17b7fddd708ad328600747..1099af68707ffc0cc96f190961d7192025b34c13 100644 --- a/styles/base.css +++ b/styles/base.css @@ -2,9 +2,11 @@ --serif-font: "Merriweather", serif; --sans-serif-font: "Geom", sans-serif; color-scheme: light dark; - --fg-color: light-dark(#0A0A0A, #eee); - --bg-color: light-dark(#e9e9e9, #212121); + --fg-color: light-dark(#1a1417, #eee); + --bg-color: light-dark(#fdf9fa, #212121); --accent-color: #ee41b4; + --main-padding: 0.65rem; + --main-border: 0.075rem solid var(--fg-color); } body { @@ -23,8 +25,8 @@ h5, h6 { font-family: var(--sans-serif-font); margin: 0; - border-bottom: .1rem solid var(--fg-color); - padding: .5rem; + border-bottom: var(--main-border); + padding: var(--main-padding); font-weight: 500; font-style: italic; font-stretch: condensed; @@ -43,23 +45,23 @@ header { } #wordmark { - border-bottom: .1rem solid var(--fg-color); + border-bottom: var(--main-border); text-align: right; - padding: .5rem; + padding: var(--main-padding); } -#wordmark>span { +#wordmark > span { width: min-content; display: block; margin-left: auto; } -#wordmark>span>span { +#wordmark > span > span { text-align: left; display: block; } -#wordmark>span>i { +#wordmark > span > i { text-align: left; display: block; font-family: var(--sans-serif-font); @@ -70,7 +72,7 @@ nav { font-size: 1.2rem; } -nav>h3 { +nav > h3 { font-weight: normal; font-size: 1.2rem; } @@ -80,16 +82,16 @@ main { } p { - border-bottom: .1rem solid var(--fg-color); + border-bottom: var(--main-border); padding-right: calc(-450px + 100%); - padding-bottom: .5rem; - padding-top: .5rem; - padding-left: .5rem; + padding-bottom: var(--main-padding); + padding-top: var(--main-padding); + padding-left: var(--main-padding); margin: 0; } .link-group { - border-bottom: .1rem solid var(--fg-color); + border-bottom: var(--main-border); background-color: var(--fg-color); display: flex; flex-direction: row; @@ -97,16 +99,15 @@ p { align-items: end; align-items: center; justify-content: center; - gap: .1rem; + gap: 0.1rem; } .link-group::after { background-color: var(--bg-color); } - -.link-group>a { - padding: .4rem .6rem; +.link-group > a { + padding: 0.4rem 0.6rem; display: inline; background-color: var(--bg-color); width: max-content; @@ -114,13 +115,13 @@ p { flex-grow: 1; } -footer>#build-info { - padding: .5rem; +footer > #build-info { + padding: var(--main-padding); } -footer>#links { - border-top: .1rem solid var(--fg-color); - padding: .5rem; +footer > #links { + border-top: var(--main-border); + padding: var(--main-padding); } img#codeberg { @@ -128,20 +129,25 @@ img#codeberg { height: 2rem; } -@media (min-width: 900px) { +img#mastodon { + padding-left: 1rem; + width: 2rem; + height: 2rem; +} - footer>#build-info { +@media (min-width: 900px) { + footer > #build-info { padding: 0; } .link-group { flex-direction: column; - padding: .5rem; + padding: var(--main-padding); background-color: var(--bg-color); - align-items: end + align-items: end; } - .link-group>a { + .link-group > a { padding: 0; display: block; width: max-content; @@ -156,7 +162,7 @@ img#codeberg { } main { - border-left: .1rem solid var(--fg-color); + border-left: var(--main-border); width: initial; flex: 1; } @@ -165,7 +171,7 @@ img#codeberg { width: min-content; } - nav>h3 { + nav > h3 { min-width: max-content; } @@ -173,29 +179,28 @@ img#codeberg { text-align: right; } - nav>a { + nav > a { text-align: right; } footer { - padding: .5rem; - border-bottom: .1rem solid var(--fg-color); + padding: var(--main-padding); + border-bottom: var(--main-border); display: flex; } - footer>#build-info { + footer > #build-info { width: 450px; display: inline-block; } - footer>#links { + footer > #links { border-top: 0 solid transparent; display: inline-block; padding: 0; margin-top: auto; margin-bottom: auto; margin-left: auto; - padding-right: .5em; + padding-right: var(--main-padding); } - -} \ No newline at end of file +} diff --git a/styles/colophon.css b/styles/colophon.css index 80fb497a7cff456b68b507f0fae89bcd1d981cc6..e22076807e8b311c3ad180fb853ea955249d2578 100644 --- a/styles/colophon.css +++ b/styles/colophon.css @@ -4,8 +4,8 @@ } } -footer>div::after { +footer > div::after { content: "_"; font-family: var(--sans-serif-font); animation: blink 1s steps(1) infinite; -} \ No newline at end of file +} diff --git a/styles/index.css b/styles/index.css index ec2eb3c140c8b7ff9d37f8f98dd842f9a433c4e3..4a8f55b272b7d3fb4ac96343ef0aa5f9eeb47937 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,5 +1,5 @@ -#greet { +aside { writing-mode: vertical-rl; border-bottom: 0; - border-left: .1rem solid var(--fg-color); -} \ No newline at end of file + border-left: 0.1rem solid var(--fg-color); +} diff --git a/templates/pages/index.thtml b/templates/pages/index.thtml index 031cd1dcf15b4aa556dc3eaf855e006f2a40f39b..762cbcd7e33d407e53a13cad944ba7e4bb0274dc 100644 --- a/templates/pages/index.thtml +++ b/templates/pages/index.thtml @@ -21,6 +21,8 @@ {{ &fxg_content }} {{ &footer }} -

placehoders are nice :)

+ - \ No newline at end of file +