eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests Releases Wiki Activity

[BASE] Importing fonts through CSS instead, minimizing content blocking. Removed legibility optimizations in font rendering. Removed unused font rules.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-11 21:31:56 +01:00 committed by Hugo Sales
parent 8887efe305
commit 404442ebda
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 13 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/base.css
View File

@ -1,3 +1,5 @@
@import url("../fonts/inter/inter.css");
html * {
scroll-margin-top: 4rem;
}

2
public/assets/css/reset.css
View File

@ -75,8 +75,6 @@ body,
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
background-attachment: fixed;
color: var(--white);

195
public/assets/fonts/inter/inter.css
View File

@ -1,174 +1,3 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
url("Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
url("Inter-ThinItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("Inter-Light.woff2?v=3.19") format("woff2"),
url("Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
url("Inter-LightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
url("Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
url("Inter-Italic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
url("Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
url("Inter-MediumItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
url("Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
url("Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-BoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("Inter-Black.woff2?v=3.19") format("woff2"),
url("Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
url("Inter-BlackItalic.woff?v=3.19") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
@ -185,26 +14,4 @@ Usage:
font-style: italic;
font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("Inter.var.woff2?v=3.19") format("woff2");
}
}

19
templates/base.html.twig
View File

@ -13,9 +13,6 @@
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/reset.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/inter/inter.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/manrope/manrope.css') }}">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}">
{% for stylesheet in show_stylesheets() %}
@ -40,7 +37,8 @@
<br>
<p tabindex="0">{{ 'Provided the following keyboard shortcut, the link is targeted.' | trans }}</p>
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}</p>
<p tabindex="0">{{ 'Be mindful that another ' | trans }}<kbd>Tab</kbd>{{ ' is needed in order to focus.' | trans }}
</p>
<p tabindex="0">
{% if is_firefox() == true %}
@ -54,13 +52,13 @@
<a id="anchor-accessibility-menu" class="anchor-hidden"></a>
<p tabindex="0">
<strong>{{'The keyboard key ' | trans }}<kbd>Z</kbd>{{' accesses this menu.' | trans }}</strong>
<strong>{{ 'The keyboard key ' | trans }}<kbd>Z</kbd>{{ ' accesses this menu.' | trans }}</strong>
<strong>{{ 'The other access keys are:' | trans }}</strong>
</p>
<nav>
<ul>
<li><a href="#anchor-left-panel" accesskey="h"><kbd>H</kbd>{{' for the Left panel.' | trans }}</a></li>
<li><a href="#anchor-left-panel" accesskey="h"><kbd>H</kbd>{{ ' for the Left panel.' | trans }}</a></li>
<li><a href="#anchor-main-content" accesskey="k"><kbd>K</kbd>{{ ' for the main content.' | trans }}</a></li>
<li><a href="#anchor-main-page" accesskey="j"><kbd>J</kbd>{{ ' for the main page.' | trans }}</a></li>
<li><a href="#anchor-right-panel" accesskey="l"><kbd>L</kbd>{{ ' for the right panel.' | trans }}</a></li>
@ -72,8 +70,10 @@
<header id='header' role="banner">
{{ block("leftpanel", "stdgrid.html.twig") }}
<a role="navigation" id="anchor-main-page" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0" title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
<a role="navigation" id="anchor-main-page" class="anchor-hidden"
title="{{ 'Press tab to access selected region!' | trans }}"></a>
<a class="accessibility-target" id='instance' href="{{ path('main_public') }}" tabindex="0"
title="{{ 'This instance\'s name. Access public timeline.' | trans }}">
<h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }} </h1>
</a>
@ -84,7 +84,8 @@
{% endblock header %}
<div class="container">
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
title="{{ 'Press tab to access selected region!' | trans }}"></a>
<div class='content accessibility-target'>
{% block nav %}{% endblock %}
{% block body %}{% endblock %}