Creating and styling an animated logo for a Quarto site with CSS

How and why I created an animated logo for this site, using CSS

Quarto
CSS
Sass
Web development
Author

Ella Kaye

Published

April 11, 2023

In my previous post, I outlined a number of customisations I made to this personal website and promised a series of future blog posts on how I implemented them. This is the first in the series, on the creation of the animated logo in the top left corner of the site. Note that for the animation to work properly, it needs to be viewed on a device with a mouse/trackpad, not a touchscreen.

Figuring out the HTML and YAML

The first challenge was figuring out the HTML to use in the title that would give me something to style for the line between the names. I needed my first name on top of my last name, but using either <hr> or <br> tags didn’t work. It seems there are some limits to the HTML that can be used in yaml with Quarto. With <hr>, my last name was no longer displayed. Using <br> did give something to work with, at least that displayed on Chrome, but not on my default browser Safari. It turned out that <span> did the trick, with the addition of a class I could apply a CSS style to. The title became ELLA<span class='icon-line'></span>KAYE.

With that as my website title and with CSS applied, the logo looked as I wanted, but the title in the browser tab also read ELLA<span class='icon-line'></span>KAYE, which wasn’t great. After some digging, I found it was possible to set the navbar title separately from the website title:

website:
  title: "Ella Kaye"
  navbar:
    title: "ELLA<span class='icon-line'></span>KAYE"

That solves the problem. The browser tab shows “Ella Kaye” but the title of the navbar becomes the logo, with its span that can be styled. The title of the website is also important if you have an RSS feed for your blog, which is another reason not to have additional HTML in it.

Setting up the CSS animation

Although, as explained above, the styling of the icon-line has to appear in the two .scss files, the animation is applied the same way in both light and dark mode and, moreover, is created with pure CSS (i.e. without using any special features of Sass). Therefore the code for the animation lives in my ek-styles.css file.

The code for the animation is in two parts. The first part selects what we want to animate and when, how long the animation should last and what the animation is called:

.navbar-title:hover > .icon-line {
  animation-duration: 600ms;
  animation-name: line-expand;
}

The line .navbar-title:hover > .icon-line is the selector, i.e. defines what we want to style. As described above, in _quarto.yml, we set the logo to be the title of the navbar. That translates to the CSS class navbar-title.2 In CSS, we define a rule for a class by prefixing the class name with a ., i.e. .navbar-title. The suffix :hover means that the rule is activated when the cursor hovers over the navbar title. But it’s not the whole logo we want to animate, just the element with the class icon-line within it, which is what the > .icon-line part of the selector does. Putting that all together, the selector .navbar-title:hover > .icon-line translates to ‘when hovering over the navbar title, select the icon-line within it’.

Now that we’ve selected what we want to animate, we can define some key properties of how we want the animation to progress (though not yet the appearance of the animation). In particular, we say we want the animation to last 600ms. We also name the animation, which is important, because we use the name later when defining what the animation actually does.

This brings us to the second part of the code for the animation:

@keyframes line-expand {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}

Here, we use the @keyframes at-rule, with the name of the animation set above, to define the appearance of the animation. from indicates what we want the appearance to be at the beginning of the animation, and to indicates the same for the end. For my logo, I want to change the width of the line in the icon (i.e. the span with class icon-line). At the beginning of the animation, I want it to disappear (i.e. have a width of 0%), then by the end, the width has returned to 100%, the same as in its static state.

For more information on creating CSS animations, see the MDN docs. My logo animation is just about as simple as a CSS animation can be. The above docs explain more of the theory and delve into more complicated examples.

Applying the theme and animation

The rules relating to the styling and animation of the logo appear in three different files. In order to apply them to the site, these need to be declared on the website’s _quarto.yml file. For this site, the .scss and .css files live in the assets directory, and they’re set in _quarto.yml as follows:

format:
  html:
    theme: 
      light: assets/ek-theme-light.scss
      dark: assets/ek-theme-dark.scss
    css: assets/ek-styles.css

Conclusion

That’s it! We’ve used HTML in the navbar title to create a logo, styled the static version in our light and dark themes, applied a CSS animation in a separate .css file and made sure all the files are linked properly in _quarto.yml so they apply to the site.

I was thrilled recently to receive an e-mail from Matthieu Hanf letting me know that he’d found the repo for my site useful when creating his. His site is really cool and also features a navbar title logo that animates on hover.

If you have an animated logo on your site, please comment in the box at the bottom of this page with a link to it. I’d love to see!

Last updated

2023-04-11 15:31:50 BST

Details

Session info

Toggle
─ Session info ───────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.2.2 (2022-10-31)
 os       macOS Ventura 13.3
 system   aarch64, darwin20
 ui       X11
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       Europe/London
 date     2023-04-11
 pandoc   2.19.2 @ /Applications/RStudio.app/Contents/Resources/app/quarto/bin/tools/ (via rmarkdown)
 quarto   1.3.250 @ /usr/local/bin/quarto

─ Packages ───────────────────────────────────────────────────────────────────
 ! package     * version date (UTC) lib source
 P sessioninfo * 1.2.2   2021-12-06 [?] CRAN (R 4.2.0)

 [1] /Users/ellakaye/Rprojs/mine/ellakaye-quarto/renv/library/R-4.2/aarch64-apple-darwin20
 [2] /Users/ellakaye/Rprojs/mine/ellakaye-quarto/renv/sandbox/R-4.2/aarch64-apple-darwin20/fd29d0b8

 P ── Loaded and on-disk path mismatch.

──────────────────────────────────────────────────────────────────────────────

Footnotes

  1. This hack does still provide a useful trick for people with logos that can’t be created with HTML and styled with CSS but who nevertheless want to switch logos between light and dark modes.↩︎

  2. We can determine the class of an element by right-clicking on it in a browser then selecting ‘Inspect’ or ‘Inspect element’ (depending on the browser) from the drop-down list. This opens up developer mode and will highlight the element you’re inspecting, from which you can read off the class. Albert Rapp’s video (also mentioned above) demonstrates how to do this.↩︎

Reuse

Citation

BibTeX citation:
@online{kaye2023,
  author = {Kaye, Ella},
  title = {Creating and Styling an Animated Logo for a {Quarto} Site
    with {CSS}},
  date = {2023-04-11},
  url = {https://ellakaye.co.uk/posts/2023-04-11_animated-logo/},
  langid = {en}
}
For attribution, please cite this work as:
Kaye, Ella. 2023. “Creating and Styling an Animated Logo for a Quarto Site with CSS.” April 11, 2023. https://ellakaye.co.uk/posts/2023-04-11_animated-logo/.