/r/MapPorn Styles

Front Page CSS

Screen Shot 2018-03-10 at 5.31.07 PM

The subreddit /r/MapPorn is popular and deserves to have a well designed frontpage. This is a screenshot of the basic layout. I used a CSS theme called Structura and tweaked it to make it a good user experience.

I added buttons, a sidebar image and an announcement header. These features give the user places to explore beyond the normal content on the frontpage. Since 2017 I’ve been expanding the social media presence of MapPorn. I now host a blog at mapporn.org, I curate a Twitter profile and a Facebook page. This social media presence has garnered a vibrant community of people interested in maps.


Header Image

I created this header image with Adobe Illustrator. I wanted to create an exciting header which indicates the content on the subreddit. Each letter is a shadowbox with a map underneath. Some of these are famous maps that are familiar to map geeks. These include John Snow’s Cholera Map, a map of the Trigonometric Survey of India and a map of California as an island.

While it looks simple, this map took many hours of tweaking to get right. It required knocking out the letters. Underneath there are individual maps that took some searching to find. A shadow effect was added to the top layer to give it a raised effect.

Sidebar Images

In addition I created dozens of sidebar images. These are changed on a periodic basis to keep the page looking fresh. They were mostly made with Adobe Illustrator. Here is a selection of some of them.