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

Question

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).

Answer 1

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;

---