Håvard Bob
LightNews LightNews
havardbrynjulfsen.design
Håvard Bob
@havardbrynjulfsen.design
49 followers 120 following 93 posts
Designer who codes (or vice-versa)🦄
Posts Replies Media Videos
havardbrynjulfsen.design
Somebody added overflow: hidden 🥲
October 30, 2025 at 8:26 AM
havardbrynjulfsen.design
Did a quick little touch-up of the header navigation on my website (before/after) 💅
A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom. A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links in large letters saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom. Below the vertical list there's a row of icons, each representing a social medium or website in this order: "Codepen", "Bluesky", "Mastodon", "Medium", "Sanity", "Github" and "RSS".
June 8, 2025 at 2:06 PM
havardbrynjulfsen.design
.beer:empty { order: 1; }

Important memo for the Drinks & Discussions session later at #CSSDay today
Conference badge with the name «Håvard Brynjulfsen» written on it beneath the logo for «CSSDay» — the name of the conference.
June 5, 2025 at 2:27 PM
havardbrynjulfsen.design
I love that even in a world of LLMs and IDE AI helpers I can still search for something on Google and find an old CSS-Tricks article that solves my problem😍

I was trying to create a timeline with curved lines, and this screencast by @chriscoyier.net saved me🤌

css-tricks.com/videos/172-h...
Screenshot of a Figma sketch displaying step-by-step tracking of an order, as a vertical timeline. The timeline is visualized by a line, much like train tracks, with stops along marked with a circle. In the middle of the timeline track the track curves inward before curving outwards again to rejoin the original track.
April 23, 2025 at 7:30 AM
havardbrynjulfsen.design
I’ve never been prouder 🥹
Screeenshot of a notification that says «CodePen picker your pen HaGrid», next to an image of the fictional Harry Potter-character «Hagrid» trapped inside a 4-by-4 grid.
January 19, 2025 at 9:01 AM
havardbrynjulfsen.design
Recently released mystreak.is

It’s a simple PWA that let’s you add and track habits daily

If you want to try it: be sure to add this to your Home Screen on your device, as it only stores the information using localStorage.

Built this for myself, and I’ve been using it daily since New Year’s ✅👌
Screenshot of an app. It shows five calendars with dates as squares, lined horizontally. Some of the squares have a checkmark, and some only show the date. Each calendar has a title, «Went to the gym», «Cardio training», «Reading», «No candy/crisps», «No pastries/cookies», and «No junkfood» respectively. A marker for each calendar shows a fire icon next to a number, representing a streak, indicating that the user of this app have completed a habit several days in a row
January 9, 2025 at 9:54 PM
havardbrynjulfsen.design
Working on something for New Year’s resolutions (and other habits)
Screenshot of an app. It shows three calendars with dates as squares, lined horizontally. Some of the squares have a checkmark, and some only show the date. Each calendar has a title, «No junk food», «Went to the gym» and «No candy», respectively. A marker for each calendar shows a fire icon next to a number, representing a streak, indicating that the user of this app have a 8 day streak of «No candy», and a 2 day streak of «Went to the gym»
December 30, 2024 at 6:05 PM
havardbrynjulfsen.design
What I mean: is it good for a11y?

Wikipedia has these kinds of settings now, letting the users choose text width and font size.

Or should we leave this stuff to the user, making them use browser settings or plugins to achieve the customization they want?

Or both?
Screenshot of a Wikipedia article. Two radio button groups sits in a sidebar to the right, one called «Text» with the options «Small», «Standard» and «Large», the other called «Width» with the options «Standard» and «Wide»
December 13, 2024 at 6:32 AM
havardbrynjulfsen.design
Finally got around to implementing a theme switcher for my website (www.havardbrynjulfsen.design) and refactor some theme colors 🎉

Pretty happy with the result! It also honors user's preferred color scheme👏
December 6, 2024 at 1:49 PM
havardbrynjulfsen.design
Implemented the Baseline Status component from Astro Embed (astro-embed.netlify.app/components/b...) on my website today.

Worked like a charm! 🚀

See it in action: www.havardbrynjulfsen.design/writing/tips...
Screenshot of a blog article with title, leading and body text. Inside the body text is a rectangular component, containing a title and several symbols. The title is "<dialog>". Beneath the title reads a text "Baseline Widely Available" next to a pointy version of the infinity symbol, with a green checkmark inside. Next to it is a row of web browser logos, Google, Edge, Firefox, Safari - all with green checkmarks next to them.
December 2, 2024 at 10:32 PM
havardbrynjulfsen.design
Cross stitched the famous #CSS meme, framed it and put it on my desk at work. One day when I wasn’t at the office somebody «fixed» it😄
November 23, 2024 at 1:11 PM
havardbrynjulfsen.design
Isn't alt text just a description of what's in the image, while captions should be used to describe the context?

Curious as I can't come up with a scenario where I would need to describe it differently based on context

A caption could be "The famous Windows-wallpaper", while alt could be (see alt)
Green, grassy hills fills the bottom half of the image with a clear, blue sky above. A few white clouds can be seen in the sky. Sun shines down on on the hills, the clouds casting spotted shadows on the hills.
November 20, 2024 at 2:59 PM
havardbrynjulfsen.design
I'm not saying there's no value in them, but I do think they're overused.

Sticky headers became popularized by social media platforms with infinite scroll, so you'd have the navigation available at all times. Most websites do not need that, imo.

Take a look at BBC's website:
November 16, 2024 at 11:30 AM