Made my own theme and everything. Let me know what everyone thinks, especially if I am doing something obviously naïve.
7 Likes
The visual theme is giga based. I am a sucker for minimalist sites. I have a few criticisms though:
- Why rely on a heavy css framework like Phosphore or any css framework at all ?
It doesn’t take much effort to strip down to the few properties you really need. My stylesheet amounts to no more than 600 lines in comparison (unminified) with very few classes. - you should use responsive images for pictures above 20kb imho
Lastly, I personally hate reflows when hovering over an object, especially links. Changing font-weights tends to do that. You should look into the scale property instead.
The visual theme is giga based. I am a sucker for minimalist
sites. I have a few criticisms though:
Is this a compliment? In which case, thanks a lot! I tried to make
it subtle and functional. Or, are you telling me there is another
theme somewhere called giga that mine is based on? Which would be
only coincidental.
Why rely on a heavy css framework like Phosphore or any css
framework at all ?
I am not. I just like the Phosphore icons and followed documentation
to apply them. I am not a seasoned web-dev, unless an employer is
reading this, in which case god gave me nodejs in a holy-dream.
It doesn’t take much effort to strip down to the few properties you
really need. My stylesheet amounts to no more than 600 lines in
comparison (unminified) with very few classes.
Could you show me how to do this or point me to an appropriate
resource?
you should use responsive images for pictures above 20kb imho
What does this mean, what will this fix and how?
Lastly, I personally hate reflows when hovering over an object,
especially links. Changing font-weights tends to do that.
What is reflow? I only slightly change the weight of the link upon
hover to make it seem attentive. I don’t think it is big enough to
rearrange anything?
You should look into the scale property instead.
Again, any resources would be nice.
I meant it’s giga cool !
For starters, you have this element:
<figure class="image-fifteen"><img src="/posts/sicp/scheme-exit.WEBP" alt="Exiting MIT/GNU Scheme"><figcaption>Exiting MIT/GNU Scheme</img><figcaption></figure>
In comparison my img wouid look something like:
<figure><img src="/Images/scheme-exit.jpg" srcset="/scheme-exit_hu_e3a83e3ad8a23dfe.jpg 100w, /scheme-exit_hu_4db89e5d702fedf6.jpg 150w, /scheme-exit_hu_e39930f7ea14567.jpg 250w, /scheme-exit_hu_98a9f0062865aa7d.jpg 350w, /scheme-exit_hu_e6883e617d4bcdb3.jpg 400w, /scheme-exit_hu_5a1652b97d8d2e54.jpg 877w" loading="lazy" alt="See the figcaption" sizes="(max-width: 300px) 100vw, (max-width: 600px) 45vw,(max-width: 28cm) 36vw, 400px" width="1080" height="607"></figure>
Depending on the viewport, a different file is taken so a mobile doesn’t download a picture it doesn’t have the resolution to display at all. Or if you’re just a freak like me that likes to use every single tool he has for the aesthetics. It must be tailored to your layout though.
Reflows happen when the page’s layout (sizes, box sizes) are recalculated and elements redrawn. You hover over a link, it gets bigger and the paragraph is redrawn, pushes floats and other paragraphs down, etc. Making the browser sweats (who cares today) for no reason but most of all, it’s ugly.
So to signal hovering, as most variable fonts don’t allow touching character width, instead of a higher font-weight you could make scale:3 (like a zoom but doesn’t change the element’s box size) but the need for display:inline-size can cause reflows too so forget it.
Or like I prefer, use text-shadow (text-shadow: 2px 1px). Giving the impression of a broader stroke without font-weight’s downside.
I don’t think it is big enough to rearrange anything?
It changes the paragraph it is in… I hate that 
Could you show me how to do this or point me to an appropriate
I had to migrate a Wordpress site recently. I ended up looking under each element’s style to find the last selectors in the cascade, and so that I could ditch all others in my CSS, stripping down the big ugly library it was shipped with without having to rewrite it. Sometimes the brutish approach is the fastest.
It wasn’t just for being the most minimalist I could be with CSS, but to also understand it at all. Platforms like Wordpress use dozens of classes everywhere and multiple style-sheets by default. It’s the bane of modern web development, even for bloody blog sites. I got it by dumbing it down.
For phosphore you could just copy/paste the few icons you need, or better even use unicode emojis.