From 79596d60a16927b4a3709f08f716f4fba580be43 Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Wed, 11 Dec 2019 17:47:09 +0100 Subject: [PATCH] Switch from CSS to SCSS and CSS load optimization Most CSS files were rewritten in SCSS. Most important CSS also loaded first. --- .gitignore | 6 ++ css/.gitignore | 1 + css/{dark.css => dark.scss} | 70 ++++++++++----- css/{light.css => light.scss} | 69 ++++++++++----- css/{main.css => main.scss} | 162 +++++++++++++++++++--------------- css/nyqy.css | 49 ---------- css/nyqy.scss | 68 ++++++++++++++ headers/head-lvl0.org | 7 +- headers/head-lvl1.org | 7 +- headers/headers.org | 2 - 10 files changed, 268 insertions(+), 173 deletions(-) create mode 100644 css/.gitignore rename css/{dark.css => dark.scss} (60%) rename css/{light.css => light.scss} (61%) rename css/{main.css => main.scss} (83%) delete mode 100644 css/nyqy.css create mode 100644 css/nyqy.scss diff --git a/.gitignore b/.gitignore index 6f12189..117bc87 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,9 @@ _minted* /js/.tern-port *.pdf_tex *.lot +/css/.sass-cache/ +*.map +/css/light.css +/css/main.css +/css/dark.css +/css/nyqy.css diff --git a/css/.gitignore b/css/.gitignore new file mode 100644 index 0000000..9ac4a9f --- /dev/null +++ b/css/.gitignore @@ -0,0 +1 @@ +/css/dark.css diff --git a/css/dark.css b/css/dark.scss similarity index 60% rename from css/dark.css rename to css/dark.scss index 3d843c6..97b12f9 100644 --- a/css/dark.css +++ b/css/dark.scss @@ -15,32 +15,60 @@ along with this program. If not, see . */ -html, thead tr, .tooltiptext { - background-color: #34495e; +$bg: #2c3e50; +$darkerbg: #34495e; +$textcolor: #ecf0f1; + +html { + background-color: $darkerbg; } -body, -.title, -.themeBtn, -a { - color: #ecf0f1; +thead { + tr { + @extend html; + } } -th, -td, -pre { - border: 1px solid #263646; -} - -table { - border: 2px solid #263646; -} - -#content, -#postamble{ - background-color: #2c3e50; +.tooltiptext { + @extend html; } .tooltiptext::after { - border-color: #34495e transparent transparent transparent; + border-color: $darkerbg transparent transparent transparent; +} + +body { + color: $textcolor; +} + +.title { + @extend body; +} + +a { + @extend body; +} + +th { + border: 1px solid $bg; +} + +td { + @extend th; +} + +pre { + @extend th; +} + +table { + border: 2px solid $bg; +} + +#content { + background-color: $bg; +} + +#postamble{ + background-color: $bg; } diff --git a/css/light.css b/css/light.scss similarity index 61% rename from css/light.css rename to css/light.scss index 147ccfb..fcb49f1 100644 --- a/css/light.css +++ b/css/light.scss @@ -15,33 +15,60 @@ along with this program. If not, see . */ -html, -#content, -#postamble { - background-color: #eee; +$bg: #2c3e50; +$darkerbg: #ddd; +$textcolor: #444; + +html { + background-color: $darkerbg; } -body, -.title, -.themeBtn, -a { - color: #444; +thead { + tr { + @extend html; + } } -th, -td { - border: 1px solid #444; -} - -table { - border: 2px solid #444; -} - -thead tr, .tooltiptext { - background-color: #ddd; + @extend html; } .tooltiptext::after { - border-color: #ddd transparent transparent transparent; + border-color: $darkerbg transparent transparent transparent; +} + +body { + color: $textcolor; +} + +.title { + @extend body; +} + +a { + @extend body; +} + +th { + border: 1px solid $bg; +} + +td { + @extend th; +} + +pre { + @extend th; +} + +table { + border: 2px solid $bg; +} + +#content { + background-color: $bg; +} + +#postamble{ + background-color: $bg; } diff --git a/css/main.css b/css/main.scss similarity index 83% rename from css/main.css rename to css/main.scss index 18bba13..80b6050 100644 --- a/css/main.css +++ b/css/main.scss @@ -46,6 +46,7 @@ body { #postamble { text-align: center; + margin-bottom: 20px; } #content { @@ -65,37 +66,89 @@ hr { border-width: 1px; } -.outline-2, -.outline-3, -.outline-4, -.outline-5, -.outline-6, -.outline-text-2, -.outline-text-3, -.outline-text-4, -.outline-text-5, -.outline-text-6 { +.outline-2 { margin: 0 2px; padding: 0 10px; } -.outline-text-2, -.outline-text-3, -.outline-text-4, -.outline-text-5, -.outline-text-6, -#postamble { +.outline-text-2 { + @extend .outline-2; margin-bottom: 20px; } +.outline-4 { + @extend .outline-2; +} + +.outline-text-4 { + @extend .outline-text-2; +} + +.outline-5 { + @extend .outline-2; +} + +.outline-text-5 { + @extend .outline-text-2; +} + +.outline-6 { + @extend .outline-2; +} + +.outline-text-6 { + @extend .outline-text-2; +} + +h1 { + @extend legend; + font-size: 4em; + box-shadow: inset 0 -50px 0 #1abc9c; +} + +h2 { + @extend legend; + font-size: 150%; + box-shadow: inset 0 -20px 0 #16a085; +} + +h3 { + @extend legend; + font-size: 125%; + box-shadow: inset 0 -16px 0 #27ae60; +} + +h4 { + @extend legend; + font-size: 115%; + box-shadow: inset 0 -15px 0 #e67e22; +} + +h5 { + @extend legend; + font-size: 110%; + box-shadow: inset 0 -14px 0 #9b59b6; +} + +h4, +h5 { + font-weight: 300; +} + +p { + text-align: justify; +} + +$linkColor: #9b59b6; + a { text-decoration: none; - box-shadow: inset 0 -3px 0 #9b59b6; + box-shadow: inset 0 -3px 0 $linkColor; transition: all .3s ease-out; } a:hover { - box-shadow: inset 0 -21px 0 #9b59b6; + box-shadow: inset 0 -21px 0 $linkColor; transition: all .3s ease-in; } @@ -104,22 +157,32 @@ a[href^="img/"]:hover { box-shadow: 0 0; } -.figure p { - margin: 0 0; +.figure { + display: block; + overflow-x: auto; + + p { + margin: 0 0; + } } -.largetable, -.figure { +.largetable { display: block; overflow-x: auto; } -img, -table { +img { margin: auto; } +legend { + font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif; + font-weight: 700; + display: inline-block; +} + table { + margin: auto; border-collapse: collapse; } @@ -133,55 +196,10 @@ td { text-align: right; } -p { - text-align: justify; -} - pre { box-shadow: 3px 3px 3px rgba(1, 1, 1, .6); } -h1, -h2, -h3, -h4, -h5, -legend { - font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif; - font-weight: 700; - display: inline-block; -} - -h1 { - font-size: 4em; - box-shadow: inset 0 -50px 0 #1abc9c; -} - -h2 { - font-size: 150%; - box-shadow: inset 0 -20px 0 #16a085; -} - -h3 { - font-size: 125%; - box-shadow: inset 0 -16px 0 #27ae60; -} - -h4 { - font-size: 115%; - box-shadow: inset 0 -15px 0 #e67e22; -} - -h5 { - font-size: 110%; - box-shadow: inset 0 -14px 0 #9b59b6; -} - -h4, -h5 { - font-weight: 300; -} - /* scrollbar *****************************************************************/ /* width */ @@ -215,8 +233,8 @@ h5 { text-align: center; box-shadow: 3px 3px 6px rgba(1, 1, 1, .6); cursor: pointer; -} -.themeBtn .fas { - font-size: 30px; + .fas { + font-size: 30px; + } } diff --git a/css/nyqy.css b/css/nyqy.css deleted file mode 100644 index 1b674c8..0000000 --- a/css/nyqy.css +++ /dev/null @@ -1,49 +0,0 @@ -.tooltip { - position: relative; - display: inline-block; - border-bottom: 1px dotted #1e5b50; -} - -.tooltip .tooltiptext { - visibility: hidden; - width: 120px; - text-align: center; - padding: 5px 0; - border-radius: 6px; - - /* Position the tooltip text */ - position: absolute; - z-index: 1; - bottom: 125%; - left: 50%; - margin-left: -60px; - - /* Fade in tooltip */ - opacity: 0; - transition: opacity 0.3s; -} - -.tooltip .tooltiptext::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; -} - -/* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext { - visibility: visible; - opacity: 1; -} - -.tooltiptext { - padding: 7px !important; -} - -.largetable { - padding-top: 40px !important; - padding-bottom: 40px !important; -} diff --git a/css/nyqy.scss b/css/nyqy.scss new file mode 100644 index 0000000..bac0baf --- /dev/null +++ b/css/nyqy.scss @@ -0,0 +1,68 @@ +/* + Copyright (C) 2019-2020 Lucien Cartier-Tilet + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted #1e5b50; + + .tooltiptext { + visibility: hidden; + width: 120px; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + /* position the tooltip text */ + position: absolute; + z-index: 1; + bottom: 125; + left: 50%; + margin-left: -60%; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; + + } + + .tooltiptext::after { + content: ""; + top: 100%; + margin-left: -5%; + border-width: 5px; + border-style: solid; + transition: opacity 0.2s; + } +} + +.tooltip:hover { + .tooltiptext { + visibility: visible; + opacity: 1; + } +} + +.tooltiptext { + padding: 7px !important; +} + +.largetable { + $tablepadding: 40px; + padding-top: $tablepadding !important; + padding-bottom: $tablepadding !important; +} diff --git a/headers/head-lvl0.org b/headers/head-lvl0.org index 82d827c..a410d4d 100644 --- a/headers/head-lvl0.org +++ b/headers/head-lvl0.org @@ -1,10 +1,9 @@ # -*- mode: org; -*- -#+INCLUDE: headers.org - # ### STYLE #################################################################### - -#+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: +#+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: + +#+INCLUDE: headers.org diff --git a/headers/head-lvl1.org b/headers/head-lvl1.org index dc4eb63..d854782 100644 --- a/headers/head-lvl1.org +++ b/headers/head-lvl1.org @@ -1,10 +1,9 @@ # -*- mode: org; -*- -#+INCLUDE: headers.org - # ### STYLE #################################################################### - -#+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: +#+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: + +#+INCLUDE: headers.org diff --git a/headers/headers.org b/headers/headers.org index b969e27..3da8810 100644 --- a/headers/headers.org +++ b/headers/headers.org @@ -15,12 +15,10 @@ #+LaTeX_CLASS_OPTIONS: [a4paper,twoside] #+LATEX_HEADER_EXTRA: \usepackage{xltxtra} #+LATEX_HEADER_EXTRA: \usepackage[total={17cm,24cm}]{geometry} -# #+LATEX_HEADER_EXTRA: \setromanfont{Charis SIL} #+LATEX_HEADER_EXTRA: \setmainfont{Charis SIL} #+LATEX_HEADER_EXTRA: \usepackage{xcolor} #+LATEX_HEADER_EXTRA: \usepackage{hyperref} #+LATEX_HEADER_EXTRA: \hypersetup{colorlinks=true,linkbordercolor=red,linkcolor=blue,pdfborderstyle={/S/U/W 1}} -# #+LATEX_HEADER_EXTRA: \usepackage{multicol} #+LATEX_HEADER_EXTRA: \usepackage{indentfirst} #+LATEX_HEADER_EXTRA: \sloppy