Preload CSS where applicable

This commit is contained in:
Yannik Rödel 2021-09-20 16:47:06 +02:00
parent fbe295fbdc
commit fb07ed42a2
5 changed files with 30 additions and 20 deletions

View file

@ -2,17 +2,33 @@
<html lang="{{ metadata.language }}">
<head>
<meta charset="utf-8">
<title>{{ title or metadata.title }}</title>
<link rel="preload" href="{{ '/assets/css/base.css' | url }}" as="style">
{# We only bother with preloading the variable font here because chances are
that if a browser doesn't support variable fonts it won't support
preloading either:
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#browser_compatibility
#}
<link rel="preload" href="{{ '/assets/fonts/Comfortaa-VariableFont_wght.ttf' | url }}" as="font">
{% for name in (extraStylesheets or []) %}
<link rel="preload" href="{{ '/assets/css/' + name + '.css' | url }}" as="style">
{% endfor %}
{% block headStart %}{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
{% block extraHead %}{% endblock %}
<link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
{% for name in (extraStylesheets or []) %}
<link rel="stylesheet" href="{{ '/assets/css/' + name + '.css' | url }}">
{% endfor %}
{% block headEnd %}{% endblock %}
</head>
<body>
<header class="site-header">
@ -47,7 +63,9 @@
</header>
<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
{{ content | safe }}
{% block content %}
{{ content | safe }}
{% endblock %}
</main>
<footer class="page-section footer">

View file

@ -1,7 +1,3 @@
{% set extraStylesheets = [ "home" ].concat(extraStylesheets or []) %}
{% extends "layouts/base.njk" %}
{% block extraHead %}
<link rel="stylesheet" href="{{ '/assets/css/home.css' | url }}">
{% endblock %}
{{ content | safe }}

View file

@ -1,9 +1,5 @@
{% if useForms %}
{% set extraStylesheets = [ "forms" ].concat(extraStylesheets or []) %}
{% endif %}
{% extends "layouts/base.njk" %}
{% block extraHead %}
{% if useForms %}
<link rel="stylesheet" href="{{ '/assets/css/forms.css' | url }}">
{% endif %}
{% endblock %}
{{ content | safe }}

View file

@ -2,5 +2,6 @@
@use 'components/markup';
@use 'components/site';
@use 'components/page';
@use 'components/banner';
@include typography.root-config;

View file

@ -1,3 +1,2 @@
@use 'components/actions';
@use 'components/banner';
@use 'components/tabs';