From 8bdd98a8bf8a07e2a8ff99705ea74ee25a1fcb32 Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Wed, 11 Jul 2018 01:51:26 +0200 Subject: [PATCH] Use font-display CSS property and add OpenGraph meta tags --- README.md | 3 + build/webpack.dev.conf.js | 8 +- build/webpack.prod.conf.js | 2 + config/index.js | 6 +- humans.txt | 2 +- index.html | 12 ++- src/css/material-icons.css | 35 +++++++ src/css/roboto-fontface.css | 195 ++++++++++++++++++++++++++++++++++++ src/main.js | 10 +- 9 files changed, 263 insertions(+), 10 deletions(-) create mode 100644 src/css/material-icons.css create mode 100644 src/css/roboto-fontface.css diff --git a/README.md b/README.md index 1dff964..706426b 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,9 @@ adapt the behavior to your needs. * `TILE_SERVER=` to pass a specific tile server to use rather than the default one. +You should also have a look at the build variables under the `config/` +subdirectory. + ### Server part diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index e152b45..b5be0a6 100755 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -53,9 +53,11 @@ const devWebpackConfig = merge(baseWebpackConfig, { new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ - filename: 'index.html', - template: 'index.html', - inject: true + filename: 'index.html', + template: 'index.html', + ogURL: config.build.ogURL, + ogImage: config.build.ogImage, + inject: true }), // copy custom static assets new CopyWebpackPlugin([ diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 9deb67d..fd5ca69 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -63,6 +63,8 @@ const webpackConfig = merge(baseWebpackConfig, { new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', + ogURL: config.build.ogURL, + ogImage: config.build.ogImage, inject: true, minify: { removeComments: true, diff --git a/config/index.js b/config/index.js index 3d2c5fb..9378641 100644 --- a/config/index.js +++ b/config/index.js @@ -71,6 +71,10 @@ module.exports = { // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off - bundleAnalyzerReport: process.env.npm_config_report + bundleAnalyzerReport: process.env.npm_config_report, + + // OpenGraph-related variables + ogURL: 'https://cyclo.phyks.me', + ogImage: 'https://cyclo.phyks.me/static/icon192.png', } } diff --git a/humans.txt b/humans.txt index 66cbfe9..117b891 100644 --- a/humans.txt +++ b/humans.txt @@ -2,7 +2,7 @@ Main dev: Phyks (Lucas Verney) Contact: phyks+cyclassist[at]phyks.me Mastodon: https://mastodon.tetaneutral.net/@Phyks - Twitter: @phyksishere + Twitter: @PhyksIsHere From: Paris /* THANKS */ diff --git a/index.html b/index.html index f5cae8e..73b62f7 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,20 @@ + + + + + + + + + - cyclassist + + Cyclassist: your bike companion!
diff --git a/src/css/material-icons.css b/src/css/material-icons.css new file mode 100644 index 0000000..6cfcd82 --- /dev/null +++ b/src/css/material-icons.css @@ -0,0 +1,35 @@ +/** + * Copy of the CSS file from the node_modules package, including an additional + * font-display directive. + */ +@font-face { + font-display: block; + font-family: "Material Icons"; + font-style: normal; + font-weight: 400; + src: url("../../node_modules/material-icons/iconfont/MaterialIcons-Regular.eot"); + /* For IE6-8 */ + src: local("Material Icons"), local("MaterialIcons-Regular"), url("../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), url("../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), url("../../node_modules/material-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype"); +} + +.material-icons { + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: 24px; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: 'liga'; +} diff --git a/src/css/roboto-fontface.css b/src/css/roboto-fontface.css new file mode 100644 index 0000000..4ae392c --- /dev/null +++ b/src/css/roboto-fontface.css @@ -0,0 +1,195 @@ +/** + * Copy of the CSS file from the node_modules package, including an additional + * font-display directive. + */ +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.eot'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.svg#Roboto') format('svg'); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Thin'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.eot'); + src: local('Roboto Thin'), local('Roboto-Thin'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.eot'); + src: local('Roboto ThinItalic'), local('Roboto-ThinItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.svg#Roboto') format('svg'); + font-weight: 100; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-ThinItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.eot'); + src: local('Roboto ThinItalic'), local('Roboto-ThinItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-ThinItalic.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.eot'); + src: local('Roboto Light'), local('Roboto-Light'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.svg#Roboto') format('svg'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Light'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.eot'); + src: local('Roboto Light'), local('Roboto-Light'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.eot'); + src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.svg#Roboto') format('svg'); + font-weight: 300; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-LightItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.eot'); + src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-LightItalic.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.eot'); + src: local('Roboto Regular'), local('Roboto-Regular'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.svg#Roboto') format('svg'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Regular'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.eot'); + src: local('Roboto Regular'), local('Roboto-Regular'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.eot'); + src: local('Roboto RegularItalic'), local('Roboto-RegularItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.svg#Roboto') format('svg'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-RegularItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.eot'); + src: local('Roboto RegularItalic'), local('Roboto-RegularItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-RegularItalic.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.eot'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.svg#Roboto') format('svg'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Medium'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.eot'); + src: local('Roboto Medium'), local('Roboto-Medium'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.eot'); + src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.svg#Roboto') format('svg'); + font-weight: 500; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-MediumItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.eot'); + src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-MediumItalic.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.eot'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.svg#Roboto') format('svg'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Bold'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.eot'); + src: local('Roboto Bold'), local('Roboto-Bold'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.eot'); + src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.svg#Roboto') format('svg'); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-BoldItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.eot'); + src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BoldItalic.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.eot'); + src: local('Roboto Black'), local('Roboto-Black'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.svg#Roboto') format('svg'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-Black'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.eot'); + src: local('Roboto Black'), local('Roboto-Black'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-Black.svg#Roboto') format('svg'); +} + +@font-face { + font-display: swap; + font-family: 'Roboto'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.eot'); + src: local('Roboto BlackItalic'), local('Roboto-BlackItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.svg#Roboto') format('svg'); + font-weight: 900; + font-style: italic; +} + +@font-face { + font-display: swap; + font-family: 'Roboto-BlackItalic'; + src: url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.eot'); + src: local('Roboto BlackItalic'), local('Roboto-BlackItalic'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2') format('woff2'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff') format('woff'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.ttf') format('truetype'), url('../../node_modules/roboto-fontface/fonts/roboto/Roboto-BlackItalic.svg#Roboto') format('svg'); +} diff --git a/src/main.js b/src/main.js index eec384b..03270e7 100644 --- a/src/main.js +++ b/src/main.js @@ -4,10 +4,12 @@ import Vue from 'vue'; import Vuetify from 'vuetify'; import Vue2Leaflet from 'vue2-leaflet'; import Vue2LeafletTracksymbol from 'vue2-leaflet-tracksymbol'; -import 'material-icons/iconfont/material-icons.css'; -import 'roboto-fontface/css/roboto/roboto-fontface.css'; -import 'leaflet/dist/leaflet.css'; -import 'vuetify/dist/vuetify.min.css'; + +import './css/roboto-fontface.css'; +import './css/material-icons.css'; +import 'leaflet/dist/leaflet.css'; // eslint-disable-line import/first +import 'vuetify/dist/vuetify.min.css'; // eslint-disable-line import/first + import App from './App.vue'; import i18n from './i18n';