Progressive enhancement

css html permacomputing

Why write a Hugo theme from scratch? One reason is to ensure our websites are designed with progressive enhancement in mind. In this post we explain the relevance of progressive enhancement to the climate crisis, detail exactly what progressive enhancement is, and then demonstrate how we use it in this Hugo theme. By refining the technology our websites are built upon, and documenting what we learn, we hope to initiate more conversations about how technology can support climate justice, and perhaps advance the state of the art in sustainable web design.


Smart quotes

quotes typography markdown parsing

The Goldmark Markdown parser should automatically convert your writing to use smart quotes or curly quotes, rather than dumb/straight quotes. However, there may occasionally be a bug. Let’s test out some edge cases!




Here’s a screengrab of a video with a link to it on YouTube: Many publishers will not find this to be adequate, because users have to click away from your web page in order to view the video. However, if this is sufficiently functional to give people a preview of what they will see if they click on the link, then maybe we can use progressive enhancement to embed the video in the webpage using javascript, for people who have javascript enabled.




Here’s one of my favorite photos I’ve taken in Philadelphia. It takes up the full width of the screen, escaping from the boundaries of the body text. We insert it into the text using a custom Hugo shortcode: {{<imgfull src="schuylkill.jpg" alt="alt text">}} And here’s a nice shot of a Sunrise Movement action in Providence, Rhode Island that I was lucky to be at. It only takes up the width of the body text, leaving more space on wider screens.


Link test

links markdown

I’m an inline-style link

I’m an inline-style link with title


My dark mode CSS

code css dark mode

Here is the CSS that powers this theme’s dark mode. First, we define some colors as CSS variables:


My second post

foo silly markdown

I’m baby taiyaki put a bird on it mixtape, kogi meditation chartreuse tattooed pickled cray messenger bag sriracha artisan. Umami pug kitsch, salvia pork belly banh mi everyday carry dreamcatcher food truck kogi try-hard kale chips. Coloring book next level fam tilde affogato asymmetrical. Art party lumbersexual iPhone pabst, vape aesthetic church-key fingerstache kinfolk. Palo santo gochujang knausgaard swag quinoa, YOLO raw denim jianbing enamel pin. Chicharrones four loko hammock tumblr, messenger bag pok pok shoreditch polaroid whatever microdosing letterpress wolf artisan.


My first post

foo bar typography

I’m baby twee tacos disrupt portland, kinfolk food truck kale chips. Aesthetic vice semiotics kitsch succulents cornhole, paleo shaman palo santo single-origin coffee affogato food truck before they sold out banh mi literally. Kitsch gochujang before they sold out, master cleanse craft beer sartorial hella schlitz fingerstache direct trade trust fund. Hell of vape small batch salvia biodiesel. Craft beer try-hard aesthetic put a bird on it. Hella chicharrones literally, helvetica banh mi waistcoat deep v swag offal 8-bit snackwave.