For those that are interested in the technical details, read on. The rest of you can stop right here.
tl;dr. In the header and footer, the graphic is a background SVG with embedded CSS scaling the heart element. The standalone hearts also are an SVG, this time with external CSS. In both cases, the CSS controls scaling.
First, I created a PNG of the text and heart with a screen capture from Keynote. Then I used an online PNG to SVG converter, the result of which I edited with a text editor to embed the CSS that animates the heart element. The embedded CSS is based on the hovering heartbeat animation CodePen by Joseph Emmerich. I modified the CSS to add transform-origin: 50% 50% immediately before each transform: scale() style to prevent the heart from moving when its scale changes. Finally, I used image replacement on the title text.
So far, I’ve tested it only on MacOS browsers. It works on WebKit-based browsers (Chrome, Opera, Brave, and Safari), but not Firefox. I still need to test on Windows browsers, and probably add a fallback static PNG for browsers that don’t support background SVGs.
Update. Since creating my first heading image, I created others with a lighter font and decreasing the frequency of animation.
Clean Archives Reloaded is a great archives plugin for those of us who have used WordPress for a long time. I use it on my archives page because it can display a lot of post titles without overwhelming the reader.
Twenty Sixteen is the default WordPress theme for WordPress version 4.4. I’m using Twenty Sixteen now.
Twenty Sixteen is a “mobile-first” responsive theme. Its main menu collapses our of the way for smaller screens yet can be expanded with a touch. The items are spaced for easy tapping.
Google’s Search Console1Search Console used to be called Webmaster Tools. highlights pages that are not mobile-friendly; it flagged my archives page because the post title links and month links were too close together.
Here’s how to take the CSS for Twenty Sixteen’s main menu and apply it to Clean Archives Reloaded.
Modify Clean Archives Reloaded
The HTML structure of Clean Archives Reloaded doesn’t quite match the HTML structure of Twenty Sixteen’s main menu. To simplify the CSS, it was easier to change one line of clean-archives-reloaded.php. I changed
This moves the date inside the anchor tag, simplifying its HTML structure.2I wonder if I can convince Alex Mills (Viper007Bond) to make the change in the official release.
Make Custom CSS
Next, I grabbed the CSS from Twenty Sixteen and searched for all the lines with .main-menu in them and modified those appropriate to Clean Archives Reloaded. Because I only wanted this new CSS to apply to smaller screen widths, I wrapped the CSS in a media query. This makes Clean Archives Reloaded use mobile-friendly formatting at the same screen width that Twenty Sixteen’s main menu.
LESS — “LESS extends CSS with: variables, mixins, operations and nested rules. Best of all, LESS uses existing CSS syntax. This means you can rename your current .css files to .less and they’ll just work.” LESS is a compiler that runs on ruby and needs both ruby and ruby-gems installed.
Sass — “Sass is CSS, plus nested rules, variables, mixins, and more all in a concise, readable syntax.” Sass (for Syntactically Awesome StyleSheets) is also a compiler that runs on ruby. Although its syntax is simplified, it is incompatible with CSS; CSS files will need to be modified before they can be be used with Sass.
Scaffold — “CSS Scaffold is a framework written in PHP. … You can drop Scaffold into your site and you’ll instantly have access to all of its functionality. Constants, mixins, nested selectors, expressions caching and gzipping, [and is] extendable through plugin.” Scaffold runs on your site in your CSS directory. You modify your .htaccess file to redirect CSS requests through Scaffold.
I like the features of LESS. I wish I didn’t have to install (and learn some) ruby to get it going. That’s likely still easier than getting Scaffold installed and running.
Other CSS-related sites I discovered today:
CSSTidy — “CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).”
Text Sizing — “I’d had enough. Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so I could see where they did and didn’t work. So I made 264 screenshots. This collection is posted for anyone else who is unhappy and distrustful.”
Sane CSS Sizes — “..wherein we present a method of text sizing in CSS that actually works consistently across our browsers without offending designers.”
List of CSS Tools — “What can be better than simple, useful and handy tools you can use “on the fly” in the development process?”