quartoreveal.js

left-align the title and author in a quarto-revealjs presentation


I want to recreate my organization's presentation template in quarto/reveal.js and after figuring out a lot of other things am now stuck: I need to align title and authors to the left of the title page with both having the same distance to the left border of the presentation.

This is how far I came:

YAML heading:

---
title: "A title"
author: "Jane Doe"
format: 
  revealjs: 
    theme: [default, styles.scss]
---

styles.scss:

/*-- scss:defaults --*/

/*-- scss:rules --*/
#title-slide {
  
  text-align: left;
  
  .title {
    font-size: 2.5em;
    color: #fff;
    position: relative;
    left: -15%;
    top: -150px;
  }

  .quarto-title-author-name {
    color: #ffffff;
    position: relative;
    left: -15%;
  }
}
}

But the title and author boxes seem to be positioned relative to their original center - therefore, the resulting positions are not aligned (i.e., -15% is not the same for the title as for the author).


Solution

  • You can use the sass variable $presentation-title-slide-text-align to left align the title and author names on the title slide.

    ---
    title: "A title"
    author: "Jane Doe"
    format: 
      revealjs: 
        theme: [default, styles.scss]
    ---
    
    ## Quarto
    
    Quarto enables you to weave together content and executable code 
    into a finished presentation. 
    

    styles.scss

    /*-- scss:defaults --*/
    
    $presentation-title-slide-text-align: left;
    

    left aligned title and author name on revealjs title slide