Commit a03e0431 authored by Emmanuel Raviart's avatar Emmanuel Raviart

Convert global SCSS file (including Bootstrap) to a static CSS file.

This CSS is no more embedded in JavaScript, so the CSS is immediately applied when page loads.

Also removes sound from client webpack configuration.
parent ed3002de
......@@ -7,4 +7,5 @@ yarn-error.log
/export/
/build/
/app/manifest/
/assets/server.css
/data.json
import "./global.scss"
import "bootstrap"
import { init } from "sapper/runtime.js"
import { routes } from "./manifest/client.js"
......
@import "node_modules/bootstrap/scss/bootstrap";
\ No newline at end of file
@import "node_modules/bootstrap/scss/bootstrap";
/* Cf https://google.github.io/material-design-icons/ */
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.woff) format("woff"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
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";
}
<!doctype html>
<html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#aa1e1e">
%sapper.base%
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="server.css">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="favicon.png">
......
/* Cf https://google.github.io/material-design-icons/ */
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.woff) format("woff"),
url(/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
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";
}
......@@ -17,7 +17,7 @@
{#if duration !== null && seconds !== null}
<span class="display-1{duration < seconds ? " bg-danger text-white" : duration - 10 < seconds ? " bg-warning text-dark" : ""} pl-1 pr-1">{toMinutesSeconds(duration - seconds)}
</span>
<audio id="ring_sound" src="/ring.mp3"></audio>
<audio id="ring_sound" src="ring.mp3"></audio>
{#if duration < seconds}
<script>
if (document !== undefined) { // eslint-disable-line no-undef
......
......@@ -9476,16 +9476,6 @@
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true
},
"style-loader": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.21.0.tgz",
"integrity": "sha512-T+UNsAcl3Yg+BsPKs1vd22Fr8sVT+CJMtzqc6LEw9bbJZb43lm9GoeIfUcDEefBSWC0BhYbcdupV1GtI4DGzxg==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"schema-utils": "^0.4.5"
}
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
......
......@@ -42,7 +42,7 @@ module.exports = {
data: content,
includePaths: ["components", "routes"],
sourceMap: true,
importer: function(url /*, prev */) {
importer: function(url) {
if (url.indexOf("~") === 0) {
const nodeModulePath = `./node_modules/${url.substr(1)}`
return { file: require("path").resolve(nodeModulePath) }
......@@ -75,33 +75,6 @@ module.exports = {
},
],
},
{
test: /\.mp3$/,
use: "file-loader",
},
{
test: /\.(scss)$/,
use: [
{
loader: "style-loader", // inject CSS to page
},
{
loader: "css-loader", // translates CSS into CommonJS modules
},
{
loader: "postcss-loader", // Run post css actions
options: {
plugins: function() {
// post css plugins, can be exported to postcss.config.js
return [require("precss"), require("autoprefixer")]
},
},
},
{
loader: "sass-loader", // compiles Sass to CSS
},
],
},
],
},
mode,
......
......@@ -35,7 +35,7 @@ module.exports = {
data: content,
includePaths: ["components", "routes"],
sourceMap: true,
importer: function(url /* , prev */) {
importer: function(url) {
if (url.indexOf("~") === 0) {
const nodeModulePath = `./node_modules/${url.substr(1)}`
return { file: require("path").resolve(nodeModulePath) }
......@@ -67,12 +67,8 @@ module.exports = {
{
test: /\.(scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader", // translates CSS into CommonJS modules
},
MiniCssExtractPlugin.loader,
"css-loader", // translates CSS into CommonJS modules
{
loader: "postcss-loader", // Run post css actions
options: {
......@@ -82,9 +78,7 @@ module.exports = {
},
},
},
{
loader: "sass-loader", // compiles Sass to CSS
},
"sass-loader", // compiles Sass to CSS
],
},
],
......@@ -94,7 +88,7 @@ module.exports = {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
filename: "../assets/[name].css",
chunkFilename: "[id].css",
}),
],
......
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