cmc/cleberg.net

  1#+date:        [2025-09-25 Thu 21:08:00]
  2#+title:       Minimalist Site: Strip It Down
  3#+description: A complete redesign stripping away extraneous CSS and HTML for readability.
  4#+slug: minimalist-website-redesign
  5#+filetags:    :web:
  6
  7I know what you're thinking: "ANOTHER blog post about redesigning the website?"
  8
  9Yes. Another blog post about redesigning the website. I enjoy it, what can I
 10say?
 11
 12I wrote my latest post about redesigning from a monospace-driven,
 13terminal-styled theme to a more natural paper-inspired theme. However, it left a
 14nagging feeling that something was missing. What if I took it further? Was there
 15really any reason that I had any of that CSS at all?
 16
 17#+caption: Old Theme
 18#+attr_html: :alt A screenshot of the old theme for cleberg.net.
 19https://img.cleberg.net/blog/20250905-human-website-design/after.webp
 20
 21#+caption: New Theme
 22#+attr_html: :alt A screenshot of the new theme for cleberg.net.
 23https://img.cleberg.net/blog/20250925-minimalist-website-redesign/minimal.webp
 24
 25* Inspiration
 26
 27I /briefly/ touched on my inspiration in the last post (hint: wabi-sabi, sho ga
 28nai, brutalism, minimalism), but I didn't expand on the /why/ for these
 29concepts.
 30
 31So, why? The minimalistic approach to web design has resonated with me for a
 32long time. But why minimalism?
 33
 34Officially, "the concept of minimalist architecture is to strip everything down
 35to its essential quality and achieve simplicity."
 36
 37This is a blog. It also has pages dedicated to describing who I am and what I
 38offer. Therefore, the essential quality is the information delivered by the
 39words and the design on your screen. To effectively communicate this
 40information, I tried to understand how online information is best read.
 41
 42With all of that out of the way, let's get on with it.
 43
 44* Core Changes
 45
 46Below is a quick audit of the original style sheet and markup, and the elements
 47I've removed or added. For more in-depth information, refer to the [[https://github.com/ccleberg/cleberg.net/commit/6eb7d43fc257638583e6a4ffefefc47f730595e4][git diff]].
 48
 49w*HTML*
 50
 51- HTML is now minified
 52- File tags
 53- Links to site pages are moved from the =index= to the =about= page
 54- Wiki was removed entirely
 55- Added a few =<br>= elements to compensate for some of the CSS removals
 56
 57*CSS*
 58
 59For the CSS, I removed /everything/, except the following rules.
 60
 61#+begin_src css
 62body {
 63  max-width: 50em;
 64  margin: 1.5rem;
 65}
 66
 67nav ul {
 68    list-style-type: none;
 69    display: flex;
 70    padding: 0;
 71}
 72
 73nav ul li {
 74    margin-right: 0.5rem;
 75}
 76
 77img {
 78    border-style: none;
 79    width: 100%;
 80}
 81
 82table {
 83    border: 1px solid #111;
 84    border-collapse: collapse;
 85    width: 100%;
 86}
 87
 88pre,
 89pre>code,
 90code {
 91    font-size: 0.9rem;
 92}
 93
 94pre {
 95    border: 1px solid #111;
 96    margin: 0.5rem 0;
 97    padding: 0.5rem;
 98    overflow-x: auto;
 99}
100
101time {
102    display: block;
103}
104
105:not(pre)>code {
106    color: #f00;
107}
108
109@media (prefers-color-scheme: dark) {
110    body {
111        background-color: #222;
112        color: #eee;
113    }
114    
115    a {
116        color: #add8e6;
117    }
118
119    pre {
120        border-color: #eee;
121    }
122}
123#+end_src
124
125That's it. No framework, no vendor prefixes, no unnecessary selectors.
126
127This gave me an almost-pure HTML site. It's freeing. It's liberating. It's
128comfortable.
129
130* Reading Experience Benefits
131
132Recent research shows that line length between 45–75 characters maximizes
133reading speed and comprehension. By constraining the container width to ~50 rem
134(≈ 100 characters), we stay close to that range while still staying wide enough
135for my personal preferences. Additionally, a lean stylesheet eliminates *FOUC*
136(flash‑of‑unstyled‑content) on slower networks, delivering a smoother
137first‑paint experience.
138
139* Final Thoughts
140
141I am very pleased with the new theme and will see how it holds up to time. Based
142on enabling short-term server logs to debug issues (before promptly wiping it to
143the ether), I notice that most visitors to my site are via RSS anyway. Either
144way, I hope you reach out if you have an opinion; I always enjoy hearing from
145you.