aboutsummaryrefslogtreecommitdiff
path: root/content/blog/2025-09-24-minimalist-website-redesign.org
diff options
context:
space:
mode:
Diffstat (limited to 'content/blog/2025-09-24-minimalist-website-redesign.org')
-rw-r--r--content/blog/2025-09-24-minimalist-website-redesign.org140
1 files changed, 0 insertions, 140 deletions
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 =<br>= 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.