Simple Interview Formatting Using Pseudo Elements

I had a quick question today about formatting an interview. That led to some quick experimentation in Code Pen and some simple uses of pseudo class selectors.1 When I first looked at the transcript I started to assign a class to each paragraph. That would work but was tedious. Given we were switching speakers at every paragraph I could be clever/lazy. nth-of-type will let me select odd and even elements. You can also be far fancier (every 5th etc.) but even/odd was all I needed. Given how pleasant that was, I figured I’d try a few more. This CSS lets me grab the first letter (and the colon) of the paragraphs and make them a bit like a drop cap.2 I wondered if I could use the selectors in combination to alternately style the first letters drop caps. Turns out you can. Anyway a fun 10 minutes or so that might be of interest to other wanderers out there. See the Pen demo for clare – fancy version by Tom (@twwoodward) on CodePen. 1 Disregard my neapolitan-ice-cream-inspired color scheme. 2 I had to look up the word for ‘big letters in medieval manuscripts’ and didn’t actually read/follow the tips for drop caps at the URL linked here . . .

Add a Custom Masonry Layout with 2 Plugins

I’ve been meaning to set up a Masonry style layout for my weekly photography posts for a while. After my earlier post meshing together plugins, I figured now was the right time to show how to do it. Sure you could do this with a child theme and some specific themes have this layout. There are also some Masonry plugins that’ll get you some of this. This path allows you a good bit more freedom in the end and hopefully walks the middle path between intimidating coding and still having some real control over the end product/style etc. It’s also not a bad example pattern for integrating other javascript options without the hassle/upkeep of child themes etc. Plugins Needed Display Posts Shortcode – gets us the posts we want Specific CSS/JS for Posts/Pages – lets us tie in the masonry JavaScript library and custom CSS To Business Activate those plugins. Make a page where you want your Masonry layout to show up. You’ll have the option at the bottom of that page (or post) to link to the mansonry library and turn it on for the page. You can see that below. You can put the CSS in this area as well. Don’t forget to wrap it in the style tags. Since I was using a Bootstrap based theme I […]

3D Passenger Pigeon Bones

I’ve been working with Bernard Means who runs VCU’s Virtual Curation Laboratory1. We spoke briefly a while back about building a site to allow for interactive views and downloads of 3D STL files his team has made of passenger pigeon bones. One of the goals was to allow mobile devices to interact with the site in an “app-like” fashion. This is more than a desire for the PR boost that seems to come with creating an “app”2 What we’re working toward is the ability to cache this stuff and enable archaeologists in the field to interact with the virtual shapes on mobile devices or download the shapefiles, print them out, and carry the replicas into the field (next up is a consideration of points). We wanted to get the passenger pigeon bones out in time for the anniversary of the extinction of the species which was 100 years ago today. Due to the excitement and drama that is the new school year, I didn’t end up getting the bones or focusing on this until Thursday. This was the first website I’ve made by hand (non-cms) in a while. I figured it’d be good for me and I thought it’d help remove complications. I don’t know if that ended up being true but it was a decent idea. It was a […]