UnoCSS Starter Theme - Above the fold

Screens come in different sizes and shapes.

The available space can be as small as a phone, or as large as a billboard, with different pixel densities.

Regardless, the visible space when the page loads is called above the fold.

Here is a SDC template for creating a layout area that takes up the whole space.

<div class="h-[calc(100vh_-_var(--drupal-displace-offset-top,_0px))] bg-green">
  {% block top %}
    {{ top }}
  {% endblock %}
</div>

--drupal-displace-offset-top is a variable provided by the toolbar, representing it's height.

This amount of pixels is subtracted from the screen height, giving us the actual amount available.

Using this in your page template works like this:

{% embed 'unocss_starter_demo:layout_top' %}

  {% block top %}
    <header role="banner">
      {{ include('unocss_starter_demo:header', {
        branding: page.header,
        secondary_menu: page.secondary_menu,
        primary_menu: page.primary_menu
      }) }}

    </header>

    {{ page.breadcrumb }}

    {{ page.highlighted }}

    {{ page.help }}

  {% endblock %}
  
{% endembed %}

Here is what it looks like:

The green background only covers the space above the fold. As soon as you scroll down, you see the white background of the next section.

You could have a hero image or video filling the space. You may need to set up some breakpoints or allow the container to extend below the fold in some cases.