Commit c40bd404 authored by Andreas Nedbal's avatar Andreas Nedbal

[FEATURE] Improve handling of font files

- Remove FontAwesome SCSS files from Assets
- Include FontAwesome free NPM module
- Add Adobe Source Sans Pro NPM module
- Write Gulp tasks to copy fonts from modules and assets
- Ignore Resources/Public/Fonts
parent f8a62662
......@@ -7,3 +7,4 @@ Resources/Public/Prototype
Resources/Public/Images
Build/Styleguide/*
!Build/Styleguide/.keep
Resources/Public/Fonts
\ No newline at end of file
// 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);
}
}
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
border: solid 0.08em $fa-border-color;
border-radius: 0.1em;
padding: 0.2em 0.25em 0.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: 0.3em;
}
&.#{$fa-css-prefix}-pull-right {
margin-left: 0.3em;
}
}
// Base Class Definition
// -------------------------
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.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;
}
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
text-align: center;
width: (20em / 16);
}
This diff is collapsed.
// 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: -0.0667em;
}
.#{$fa-css-prefix}-xs {
font-size: 0.75em;
}
.#{$fa-css-prefix}-sm {
font-size: 0.875em;
}
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// 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;
}
// 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;
vertical-align: -0.125em;
}
@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;
}
}
// 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-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 {
filter: none;
}
}
// Screen Readers
// -------------------------
.sr-only {
@include sr-only;
}
.sr-only-focusable {
@include sr-only-focusable;
}
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2em;
}
.#{$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;
}
This diff is collapsed.
This diff is collapsed.
/*!
* Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (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;
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';
}
/*!
* Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (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;
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;
}
/*!
* Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (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;
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;
}
/*!
* Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (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';
......@@ -42,8 +42,8 @@ html {
src:
local('SourceSansPro Light'),
local('SourceSansPro-Light'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-300.woff2') format('woff2'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-300.woff') format('woff');
url('../Fonts/SourceSansPro/SourceSansPro-Light.otf.woff2') format('woff2'),
url('../Fonts/SourceSansPro/SourceSansPro-Light.otf.woff') format('woff');
}
/* source-sans-pro-regular - latin */
......@@ -54,8 +54,8 @@ html {
src:
local('SourceSansPro Regular'),
local('SourceSansPro-Regular'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-regular.woff2') format('woff2'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-regular.woff') format('woff');
url('../Fonts/SourceSansPro/SourceSansPro-Regular.otf.woff2') format('woff2'),
url('../Fonts/SourceSansPro/SourceSansPro-Regular.otf.woff') format('woff');
}
/* source-sans-pro-700 - latin */
......@@ -66,8 +66,8 @@ html {
src:
local('SourceSansPro Bold'),
local('SourceSansPro-Bold'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-700.woff2') format('woff2'),
url('../Fonts/SourceSansPro/source-sans-pro-v11-latin-700.woff') format('woff');
url('../Fonts/SourceSansPro/SourceSansPro-Bold.otf.woff2') format('woff2'),
url('../Fonts/SourceSansPro/SourceSansPro-Bold.otf.woff') format('woff');
}
h1,
......
......@@ -7,6 +7,7 @@ $remPostDecimalPositionNumber: 1000;
// Set font path to Fonts
$fa-font-path: '../Fonts/FontAwesome';
$slick-font-path: '../Fonts/Slick';
$mobile-menu-height: 56px;
$max-page-container-width: 1700px;
$primaryFont: 'Source Sans Pro', sans-serif;
......
......@@ -44,10 +44,10 @@
@import "../../node_modules/bootstrap/scss/utilities";
// Icon font
@import "FontAwesome/fontawesome";
@import "FontAwesome/fa-solid";
@import "FontAwesome/fa-brands";
@import "FontAwesome/v4-shims";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
// Slick slider
@import "../../node_modules/slick-carousel/slick/slick.scss";
......
......@@ -5,9 +5,10 @@
@import "../../node_modules/bootstrap/scss/bootstrap";
// Icon font
@import "FontAwesome/fontawesome";
@import "FontAwesome/fa-solid";
@import "FontAwesome/fa-brands";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
// Base
@import "base/functions";
......
const gulp = require('gulp');
const packageJson = require('../package.json');
gulp.task('fonts:fontawesome', function() {
return gulp.src(['./node_modules/@fortawesome/fontawesome-free/webfonts/**/*'])
.pipe(gulp.dest(packageJson.config.path.dest + './Fonts/FontAwesome'))
});
gulp.task('fonts:source-sans-pro', function() {
return gulp.src(
[
'./node_modules/source-sans-pro/WOFF/OTF/SourceSansPro-Bold.otf.woff',
'./node_modules/source-sans-pro/WOFF/OTF/SourceSansPro-Regular.otf.woff',
'./node_modules/source-sans-pro/WOFF/OTF/SourceSansPro-Light.otf.woff',
'./node_modules/source-sans-pro/WOFF2/OTF/SourceSansPro-Bold.otf.woff2',
'./node_modules/source-sans-pro/WOFF2/OTF/SourceSansPro-Regular.otf.woff2',
'./node_modules/source-sans-pro/WOFF2/OTF/SourceSansPro-Light.otf.woff2',
])
.pipe(gulp.dest(packageJson.config.path.dest + './Fonts/SourceSansPro'))
});
gulp.task('fonts:slick', function() {
return gulp.src(['./node_modules/slick-carousel/slick/fonts/**/*'])
.pipe(gulp.dest(packageJson.config.path.dest + './Fonts/Slick'))
});
gulp.task('fonts:assets', function() {
return gulp.src(['./Assets/Fonts/**/*'])
.pipe(gulp.dest(packageJson.config.path.dest + './Fonts'))
});
gulp.task('fonts', gulp.series('fonts:fontawesome', 'fonts:source-sans-pro', 'fonts:slick', 'fonts:assets'));
......@@ -4,6 +4,7 @@
const gulp = require('gulp');
const packageJson = require('./package.json');
require('./Gulp/css');
require('./Gulp/fonts');
require('./Gulp/image');
require('./Gulp/javascript');
require('./Gulp/prototype');
......@@ -20,8 +21,8 @@ gulp.task('watch', function () {
gulp.watch(packageJson.config.path.src + 'Prototype/**/*', gulp.series('fileinclude'));
});
gulp.task('build', gulp.parallel('css', 'styleguide', 'image', 'javascript'));
gulp.task('build-prod', gulp.parallel('css-prod', 'image', 'javascript'));
gulp.task('build', gulp.parallel('css', 'styleguide', 'image', 'javascript', 'fonts'));
gulp.task('build-prod', gulp.parallel('css-prod', 'image', 'javascript', 'fonts'));
gulp.task('ci', gulp.parallel('css-lint', 'build'));
......
This diff is collapsed.
......@@ -5,16 +5,18 @@
"main": "Gulpfile.js",
"dependencies": {
"@fancyapps/fancybox": "^3.2.5",
"@fortawesome/fontawesome-free": "^5.5.0",
"baguettebox.js": "^1.9.1",
"bootstrap": "^4.0.0-beta.3",
"bootstrap4-notify": "^4.0.3",
"datatables.net-bs4": "^1.10.16",
"h5bp-print-styles": "^4.3.2",
"gravatar": "^1.6.0",
"h5bp-print-styles": "^4.3.2",
"jquery": "^3.2.1",
"jquery-typeahead": "^2.10.4",
"popper.js": "^1.13.0",
"slick-carousel": "^1.8.1",
"source-sans-pro": "^2.40.0",
"tether": "^1.4.3"
},
"devDependencies": {
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment