From e3eef47f9b6f6963e492068ff4adeadac70ac41b Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Thu, 25 Sep 2025 21:15:21 -0500 Subject: fix image in latest post --- .../2025-09-24-minimalist-website-redesign.org | 140 --------------------- .../2025-09-25-minimalist-website-redesign.org | 140 +++++++++++++++++++++ 2 files changed, 140 insertions(+), 140 deletions(-) delete mode 100644 content/blog/2025-09-24-minimalist-website-redesign.org create mode 100644 content/blog/2025-09-25-minimalist-website-redesign.org diff --git a/content/blog/2025-09-24-minimalist-website-redesign.org b/content/blog/2025-09-24-minimalist-website-redesign.org deleted file mode 100644 index 8cfaf58..0000000 --- a/content/blog/2025-09-24-minimalist-website-redesign.org +++ /dev/null @@ -1,140 +0,0 @@ -#+date: <2025-09-25 Thu 21:08:00> -#+title: Simplifying the Site: A Minimalist Approach -#+description: This post details a complete redesign of a blog post, stripping away extraneous CSS and HTML elements to prioritize readability and user experience. -#+slug: minimalist-website-redesign - -I know what you're thinking: "ANOTHER blog post about redesigning the website?" - -Yes. Another blog post about redesigning the website. I enjoy it, what can I -say? - -I wrote my latest post about redesigning from a monospace-driven, -terminal-styled theme to a more natural paper-inspired theme. However, it left a -nagging feeling that something was missing. What if I took it further? Was there -really any reason that I had any of that CSS at all? - -| Old Theme | New Theme | -|-----------------------------------------------------------------------+-----------------------------------------------------------------------| -| https://img.cleberg.net/blog/20250905-human-website-design/after.png | https://img.cleberg.net/blog/2025-09-25-minimalist-website-redesign/minimal.png | - -* Inspiration - -I /briefly/ touched on my inspiration in the last post (hint: wabi-sabi, sho ga -nai, brutalism, minimalism), but I didn't expand on the /why/ for these -concepts. - -So, why? The minimalismtic approach to web design has resonated with me for a -long time. But why minimalism? - -Officially, "the concept of minimalist architecture is to strip everything down -to its essential quality and achieve simplicity." - -This is a blog. It also has pages dedicated to describing who I am and what I -offer. Therefore, the essential quality is the information delivered by the -words and the design on your screen. To effectively communicate this -information, I tried to understand how online information is best read. - -With all of that out of the way, let's get on with it. - -* Core Changes - -Below is a quick audit of the original style sheet and markup, and the elements -I've removed or added. For more in-depth information, refer to the [[https://git.cleberg.net/cleberg.net.git/commit/?id=d7978b4ccf4c6c56b1c2888791f73271f91fd12c][git diff]]. - -*HTML* - -- HTML is now minified -- File tags -- Links to site pages are moved from the =index= to the =about= page -- Wiki was removed entirely -- Added a few =
= elements to compensate for some of the CSS removals - -*CSS* - -For the CSS, I removed /everything/, except the following rules. - -#+begin_src css -body { - max-width: 50em; - margin: 1.5rem; -} - -nav ul { - list-style-type: none; - display: flex; - padding: 0; -} - -nav ul li { - margin-right: 0.5rem; -} - -img { - border-style: none; - width: 100%; -} - -table { - border: 1px solid #111; - border-collapse: collapse; - width: 100%; -} - -pre, -pre>code, -code { - font-size: 0.9rem; -} - -pre { - border: 1px solid #111; - margin: 0.5rem 0; - padding: 0.5rem; - overflow-x: auto; -} - -time { - display: block; -} - -:not(pre)>code { - color: #f00; -} - -@media (prefers-color-scheme: dark) { - body { - background-color: #222; - color: #eee; - } - - a { - color: #add8e6; - } - - pre { - border-color: #eee; - } -} -#+end_src - -That's it. No frameowk, no vendor prefixes, no unnecessary selectors. - -This gave me an almost-pure HTML site. It's freeing. It's liberating. It's -comfortable. - -* Reading Experience Benefits - -Recent research shows that line length between 45–75 characters maximizes -reading speed and comprehension. By constraining the container width to ~50 rem -(≈ 100 characters), we stay close to that range while still staying wide enough -for my personal preferences. Additionally, a lean stylesheet eliminates *FOUC* -(flash‑of‑unstyled‑content) on slower networks, delivering a smoother -first‑paint experience. - -* Final Thoughts - -I am very pleased with the new theme and will see how it holds up to time. Based -on enabling short-term server logs to debug issues (before promptly wiping it to -the ether), I notice that most visitors to my site are via RSS anyway. Either -way, I hope you reach out if you have an opinion; I always enjoy hearing from -you. diff --git a/content/blog/2025-09-25-minimalist-website-redesign.org b/content/blog/2025-09-25-minimalist-website-redesign.org new file mode 100644 index 0000000..a3f5b9c --- /dev/null +++ b/content/blog/2025-09-25-minimalist-website-redesign.org @@ -0,0 +1,140 @@ +#+date: <2025-09-25 Thu 21:08:00> +#+title: Simplifying the Site: A Minimalist Approach +#+description: This post details a complete redesign of a blog post, stripping away extraneous CSS and HTML elements to prioritize readability and user experience. +#+slug: minimalist-website-redesign + +I know what you're thinking: "ANOTHER blog post about redesigning the website?" + +Yes. Another blog post about redesigning the website. I enjoy it, what can I +say? + +I wrote my latest post about redesigning from a monospace-driven, +terminal-styled theme to a more natural paper-inspired theme. However, it left a +nagging feeling that something was missing. What if I took it further? Was there +really any reason that I had any of that CSS at all? + +| Old Theme | New Theme | +|-----------------------------------------------------------------------+---------------------------------------------------------------------| +| https://img.cleberg.net/blog/20250905-human-website-design/after.png | https://img.cleberg.net/blog/20250925-minimalist-website-redesign/minimal.png | + +* Inspiration + +I /briefly/ touched on my inspiration in the last post (hint: wabi-sabi, sho ga +nai, brutalism, minimalism), but I didn't expand on the /why/ for these +concepts. + +So, why? The minimalismtic approach to web design has resonated with me for a +long time. But why minimalism? + +Officially, "the concept of minimalist architecture is to strip everything down +to its essential quality and achieve simplicity." + +This is a blog. It also has pages dedicated to describing who I am and what I +offer. Therefore, the essential quality is the information delivered by the +words and the design on your screen. To effectively communicate this +information, I tried to understand how online information is best read. + +With all of that out of the way, let's get on with it. + +* Core Changes + +Below is a quick audit of the original style sheet and markup, and the elements +I've removed or added. For more in-depth information, refer to the [[https://git.cleberg.net/cleberg.net.git/commit/?id=d7978b4ccf4c6c56b1c2888791f73271f91fd12c][git diff]]. + +*HTML* + +- HTML is now minified +- File tags +- Links to site pages are moved from the =index= to the =about= page +- Wiki was removed entirely +- Added a few =
= elements to compensate for some of the CSS removals + +*CSS* + +For the CSS, I removed /everything/, except the following rules. + +#+begin_src css +body { + max-width: 50em; + margin: 1.5rem; +} + +nav ul { + list-style-type: none; + display: flex; + padding: 0; +} + +nav ul li { + margin-right: 0.5rem; +} + +img { + border-style: none; + width: 100%; +} + +table { + border: 1px solid #111; + border-collapse: collapse; + width: 100%; +} + +pre, +pre>code, +code { + font-size: 0.9rem; +} + +pre { + border: 1px solid #111; + margin: 0.5rem 0; + padding: 0.5rem; + overflow-x: auto; +} + +time { + display: block; +} + +:not(pre)>code { + color: #f00; +} + +@media (prefers-color-scheme: dark) { + body { + background-color: #222; + color: #eee; + } + + a { + color: #add8e6; + } + + pre { + border-color: #eee; + } +} +#+end_src + +That's it. No frameowk, no vendor prefixes, no unnecessary selectors. + +This gave me an almost-pure HTML site. It's freeing. It's liberating. It's +comfortable. + +* Reading Experience Benefits + +Recent research shows that line length between 45–75 characters maximizes +reading speed and comprehension. By constraining the container width to ~50 rem +(≈ 100 characters), we stay close to that range while still staying wide enough +for my personal preferences. Additionally, a lean stylesheet eliminates *FOUC* +(flash‑of‑unstyled‑content) on slower networks, delivering a smoother +first‑paint experience. + +* Final Thoughts + +I am very pleased with the new theme and will see how it holds up to time. Based +on enabling short-term server logs to debug issues (before promptly wiping it to +the ether), I notice that most visitors to my site are via RSS anyway. Either +way, I hope you reach out if you have an opinion; I always enjoy hearing from +you. -- cgit v1.2.3-70-g09d2