angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Preload CSS where applicable

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
_includes/layouts/base.njk
View file

@ -2,17 +2,33 @@
<html lang="{{ metadata.language }}"> <html lang="{{ metadata.language }}">
<head> <head>
<meta charset="utf-8"> <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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}"> <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.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" 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> </head>
<body> <body>
<header class="site-header"> <header class="site-header">
@ -47,7 +63,9 @@
</header> </header>
<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}> <main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
{% block content %}
{{ content | safe }} {{ content | safe }}
{% endblock %}
</main> </main>
<footer class="page-section footer"> <footer class="page-section footer">

8
_includes/layouts/home.njk
View file

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

12
_includes/layouts/page.njk
View file

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

1
styles/base.scss
View file

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

1
styles/home.scss
View file

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