Host stuff locally (#194)

This commit includes the following things to host them locally:
* fonts (formerly from Google Fonts)
* fontawesome
* normalize

For a reasoning on why this is good to do, see below.

Everything is now included in Sass code. This means not only we no more
have requests to third-party sites, but also reduced the amount of
requests necessary to access the page by three.

I mainly downloaded all necessary stuff and put it at appropriate
places. I also ran `make release` to regenerate all CSS files.

Sites that helped me doing this:
* https://switching.social/ethical-alternatives-to-google-fonts/
* https://google-webfonts-helper.herokuapp.com/fonts
* https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin-ext,latin
* https://google-webfonts-helper.herokuapp.com/fonts/merriweather?subsets=vietnamese,cyrillic-ext,latin-ext,latin,cyrillic
* https://google-webfonts-helper.herokuapp.com/fonts/source-code-pro?subsets=latin-ext,latin
* https://fontawesome.com/how-to-use/on-the-web/using-with/sass
* https://github.com/JohnAlbin/normalize-scss

---------------

Currently, this theme opens many connections to third-party sites.

I hope I don't have to explain all too much why not exposing all visitors to Google etc. is a good thing, but I'll do list some advantages:

* Pretty strong CSP: `content-security-policy: default-src https://nico.dorfbrunnen.eu:443`
* Increased autonomy of webpage; if Google or other CDNs goes down, website still looks good
* When building locally without Internet, everything works fine
* Google is all about surveillance capitalism, they want to collect as much data about people as possible
* With this change, we stop helping them on all websites using this theme
* Google (and the other sites might too) is censored in quite some countries; in all of them, this theme would look not as beautiful as it could

Regarding licensing issues:

> first I need to understand if there is any license problem if we distribute these fonts with the theme.

Sure! Here's what I've found out:

According to [the CSS file we pull from Google](https://fonts.googleapis.com/css?family=Lato:400,700%7CMerriweather:300,700%7CSource+Code+Pro:400,700) we're using three fonts: [Lato](https://fonts.google.com/specimen/Lato), [Merriweather](https://fonts.google.com/specimen/Merriweather) and [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro). On the bottom right of those pages it says for all fonts that they are licensed under the [Open Font License ](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web). In its preamble, it says:
> The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works.

So I think we're good to go and can include those fonts with the theme.
This commit is contained in:
Nico Alt
2019-09-02 01:09:19 +02:00
committed by Luiz F. A. de Prá
parent 2fa8ce9cdb
commit bd8f610936
77 changed files with 17281 additions and 6 deletions

20
assets/scss/fontawesome/_animated.scss vendored Normal file
View File

@@ -0,0 +1,20 @@
// Animated Icons
// --------------------------
.#{$fa-css-prefix}-spin {
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@@ -0,0 +1,20 @@
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
border: solid .08em $fa-border-color;
border-radius: .1em;
padding: .2em .25em .15em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fab {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}

21
assets/scss/fontawesome/_core.scss vendored Normal file
View File

@@ -0,0 +1,21 @@
// Base Class Definition
// -------------------------
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-icon {
@include fa-icon;
}

View File

@@ -0,0 +1,6 @@
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
}

1388
assets/scss/fontawesome/_icons.scss vendored Normal file

File diff suppressed because it is too large Load Diff

23
assets/scss/fontawesome/_larger.scss vendored Normal file
View File

@@ -0,0 +1,23 @@
// Icon Sizes
// -------------------------
// makes the font 33% larger relative to the icon container
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.#{$fa-css-prefix}-xs {
font-size: .75em;
}
.#{$fa-css-prefix}-sm {
font-size: .875em;
}
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}

18
assets/scss/fontawesome/_list.scss vendored Normal file
View File

@@ -0,0 +1,18 @@
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: $fa-li-width * 5/4;
padding-left: 0;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
left: -$fa-li-width;
position: absolute;
text-align: center;
width: $fa-li-width;
line-height: inherit;
}

56
assets/scss/fontawesome/_mixins.scss vendored Normal file
View File

@@ -0,0 +1,56 @@
// Mixins
// --------------------------
@mixin fa-icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
transform: scale($horiz, $vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
@mixin sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}

View File

@@ -0,0 +1,24 @@
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root {
.#{$fa-css-prefix}-rotate-90,
.#{$fa-css-prefix}-rotate-180,
.#{$fa-css-prefix}-rotate-270,
.#{$fa-css-prefix}-flip-horizontal,
.#{$fa-css-prefix}-flip-vertical,
.#{$fa-css-prefix}-flip-both {
filter: none;
}
}

View File

@@ -0,0 +1,5 @@
// Screen Readers
// -------------------------
.sr-only { @include sr-only; }
.sr-only-focusable { @include sr-only-focusable; }

2062
assets/scss/fontawesome/_shims.scss vendored Normal file

File diff suppressed because it is too large Load Diff

31
assets/scss/fontawesome/_stacked.scss vendored Normal file
View File

@@ -0,0 +1,31 @@
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: ($fa-fw-width*2);
}
.#{$fa-css-prefix}-stack-1x,
.#{$fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.#{$fa-css-prefix}-stack-1x {
line-height: inherit;
}
.#{$fa-css-prefix}-stack-2x {
font-size: 2em;
}
.#{$fa-css-prefix}-inverse {
color: $fa-inverse;
}

1405
assets/scss/fontawesome/_variables.scss vendored Normal file

File diff suppressed because it is too large Load Diff

22
assets/scss/fontawesome/brands.scss vendored Normal file
View File

@@ -0,0 +1,22 @@
/*!
* Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-brands-400.eot');
src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
}

View File

@@ -0,0 +1,16 @@
/*!
* Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
@import 'mixins';
@import 'core';
@import 'larger';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';

23
assets/scss/fontawesome/regular.scss vendored Normal file
View File

@@ -0,0 +1,23 @@
/*!
* Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-regular-400.eot');
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}

24
assets/scss/fontawesome/solid.scss vendored Normal file
View File

@@ -0,0 +1,24 @@
/*!
* Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-solid-900.eot');
src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

6
assets/scss/fontawesome/v4-shims.scss vendored Normal file
View File

@@ -0,0 +1,6 @@
/*!
* Font Awesome Free 5.10.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import 'variables';
@import 'shims';