Categories
blogan

Heartbeat

My blog now has a heartbeat — I love it!

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.

Brent Logan

Update 2. Any modern browser now supports background SVGs.

Update 3 (1 Mar 2019). I’ve again changed the appearance of my site, so I have a new header image to match.

Brent Logan

Categories
WordPress

Clean Archives Reloaded in Twenty Sixteen

Clean Archives Reloaded is a great archives plugin for those of us who have used WordPress for a long time. I use it in 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 Console1 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

$html .= '<li>' .  mysql2date( 'd', $post->post_date ) . ': <a href="' . get_permalink( $post->ID ) . '">' . get_the_title( $post->ID ) . '</a>';

to

$html .= '<li><a href="' . get_permalink( $post->ID ) . '">' .  mysql2date( 'd', $post->post_date ) . ': ' . get_the_title( $post->ID ) . '</a>';

This moves the date inside the anchor tag, simplifying its HTML structure.2

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.

@media screen and (max-width: 56.875em) {
    .car-list {
        font-family: Montserrat, "Helvetica Neue", sans-serif;
    }
    .car-list ul a {
        box-shadow: none;
    }
    .car-list,
    .car-list ul {
        list-style: none;
        margin: 0;
    }
    .car-list li {
        border-top: 1px solid #e8e8e8;
        position: relative;
    }
    .car-yearmonth, .car-list a {
        color: #1a1a1a;
        display: block;
        line-height: 1.3125;
        padding: 0.84375em 0;
    }
    .car-list a:hover,
    .car-list a:focus {
        color: #007acc;
    }
    .car-list ul {
        display: none;
        margin-left: 0.875em;
    }
    .car-list {
        border-bottom: 1px solid #e8e8e8;
    }
    .car-yearmonth:after {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-family: "Genericons";
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        line-height: 1;
        speak: none;
        text-align: center;
        text-decoration: inherit;
        text-transform: none;
        vertical-align: top;
    }
    .car-yearmonth {
        margin-right: 50px;
        padding-right: 2.25em;
    }
    .car-yearmonth:after {
        content: "\f431";
        position: absolute;
        top: 0.8125em;
        right: 0.625em;
    }
}
.post-sharing a, .car-toggler {
    background: #1a1a1a;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-weight: 700;
    letter-spacing: 0.046875em;
    line-height: 1;
    padding: 0.84375em 0.875em 0.78125em;
    text-transform: uppercase;
}
.car-toggler:hover {
    background: #007acc;
    color: #fff;
}
.car-toggler:focus {    
    outline: thin dotted;
    outline-offset: -4px;
    color: #fff
}
.car-list {
    margin-top: 20px;
}

There are many options for applying this custom CSS, from using a child theme, to using JetPack’s custom CSS module. I use a plugin that loads my custom CSS file.

This is the result.

Success!

Update. I continue to update the CSS and screen capture as Twenty Twelve’s CSS continues to change during development. This is the CSS I’m using here now.


  1. Search Console used to be called Webmaster Tools. 
  2. I wonder if I can convince Alex Mills (Viper007Bond) to make the change in the official release. 
Categories
General

Extended CSS

CSSI discovered a few tools for extending CSS while reading the comments to Different Ways to Format CSS on CSS Tricks:

  • 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?”

Do you use a CSS extender?

Categories
blogan

Giving Credit Where Credit’s Due

Mike Davidson describes his design signature in a recent post. I realized then how much I like his link styling.

  • Bold font weight
  • Dotted underline that becomes solid when hovered over
  • Gray text for visited links

Mike, I hope you consider this flattery instead of theft.

Categories
General

CSS-Free for Annual Naked Day

Blogan.net is turning off its styling for April 9, 2008. To learn why, visit the Annual Naked Day website.

Stripping courtesy of Aja’s CSS Naked Day plugin for WordPress blogs.

Categories
blogging

Web Cheat Sheets

Lorelle maintains links to cheat sheets on HTML/XHTML, CSS, PHP, SQL, ASCII, and other acronymed topics. Incredibly useful!

Hat tip: WP Bits.