Switch from CSS to SCSS and CSS load optimization

Most CSS files were rewritten in SCSS. Most important CSS also loaded
first.
This commit is contained in:
Lucien Cartier-Tilet 2019-12-11 17:47:09 +01:00
parent f510638ec8
commit 79596d60a1
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
10 changed files with 268 additions and 173 deletions

6
.gitignore vendored
View File

@ -14,3 +14,9 @@ _minted*
/js/.tern-port /js/.tern-port
*.pdf_tex *.pdf_tex
*.lot *.lot
/css/.sass-cache/
*.map
/css/light.css
/css/main.css
/css/dark.css
/css/nyqy.css

1
css/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/css/dark.css

View File

@ -15,32 +15,60 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
html, thead tr, .tooltiptext { $bg: #2c3e50;
background-color: #34495e; $darkerbg: #34495e;
$textcolor: #ecf0f1;
html {
background-color: $darkerbg;
} }
body, thead {
.title, tr {
.themeBtn, @extend html;
a { }
color: #ecf0f1;
} }
th, .tooltiptext {
td, @extend html;
pre {
border: 1px solid #263646;
}
table {
border: 2px solid #263646;
}
#content,
#postamble{
background-color: #2c3e50;
} }
.tooltiptext::after { .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;
} }

View File

@ -15,33 +15,60 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
html, $bg: #2c3e50;
#content, $darkerbg: #ddd;
#postamble { $textcolor: #444;
background-color: #eee;
html {
background-color: $darkerbg;
} }
body, thead {
.title, tr {
.themeBtn, @extend html;
a { }
color: #444;
} }
th,
td {
border: 1px solid #444;
}
table {
border: 2px solid #444;
}
thead tr,
.tooltiptext { .tooltiptext {
background-color: #ddd; @extend html;
} }
.tooltiptext::after { .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;
} }

View File

@ -46,6 +46,7 @@ body {
#postamble { #postamble {
text-align: center; text-align: center;
margin-bottom: 20px;
} }
#content { #content {
@ -65,37 +66,89 @@ hr {
border-width: 1px; border-width: 1px;
} }
.outline-2, .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 {
margin: 0 2px; margin: 0 2px;
padding: 0 10px; padding: 0 10px;
} }
.outline-text-2, .outline-text-2 {
.outline-text-3, @extend .outline-2;
.outline-text-4,
.outline-text-5,
.outline-text-6,
#postamble {
margin-bottom: 20px; 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 { a {
text-decoration: none; text-decoration: none;
box-shadow: inset 0 -3px 0 #9b59b6; box-shadow: inset 0 -3px 0 $linkColor;
transition: all .3s ease-out; transition: all .3s ease-out;
} }
a:hover { a:hover {
box-shadow: inset 0 -21px 0 #9b59b6; box-shadow: inset 0 -21px 0 $linkColor;
transition: all .3s ease-in; transition: all .3s ease-in;
} }
@ -104,22 +157,32 @@ a[href^="img/"]:hover {
box-shadow: 0 0; box-shadow: 0 0;
} }
.figure p { .figure {
display: block;
overflow-x: auto;
p {
margin: 0 0; margin: 0 0;
}
} }
.largetable, .largetable {
.figure {
display: block; display: block;
overflow-x: auto; overflow-x: auto;
} }
img, img {
table {
margin: auto; margin: auto;
} }
legend {
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
font-weight: 700;
display: inline-block;
}
table { table {
margin: auto;
border-collapse: collapse; border-collapse: collapse;
} }
@ -133,55 +196,10 @@ td {
text-align: right; text-align: right;
} }
p {
text-align: justify;
}
pre { pre {
box-shadow: 3px 3px 3px rgba(1, 1, 1, .6); 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 *****************************************************************/ /* scrollbar *****************************************************************/
/* width */ /* width */
@ -215,8 +233,8 @@ h5 {
text-align: center; text-align: center;
box-shadow: 3px 3px 6px rgba(1, 1, 1, .6); box-shadow: 3px 3px 6px rgba(1, 1, 1, .6);
cursor: pointer; cursor: pointer;
}
.themeBtn .fas { .fas {
font-size: 30px; font-size: 30px;
}
} }

View File

@ -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;
}

68
css/nyqy.scss Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
.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;
}

View File

@ -1,10 +1,9 @@
# -*- mode: org; -*- # -*- mode: org; -*-
#+INCLUDE: headers.org
# ### STYLE #################################################################### # ### STYLE ####################################################################
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="./css/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="./css/main.css"/> #+HTML_HEAD_EXTRA: <link rel="stylesheet" href="./css/main.css"/>
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="./css/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <script src="./js/jquery.min.js"></script> #+HTML_HEAD_EXTRA: <script src="./js/jquery.min.js"></script>
#+HTML_HEAD_EXTRA: <script defer src="./js/main.js"></script> #+HTML_HEAD_EXTRA: <script defer src="./js/main.js"></script>
#+INCLUDE: headers.org

View File

@ -1,10 +1,9 @@
# -*- mode: org; -*- # -*- mode: org; -*-
#+INCLUDE: headers.org
# ### STYLE #################################################################### # ### STYLE ####################################################################
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="../css/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="../css/main.css"/> #+HTML_HEAD_EXTRA: <link rel="stylesheet" href="../css/main.css"/>
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="../css/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <script src="../js/jquery.min.js"></script> #+HTML_HEAD_EXTRA: <script src="../js/jquery.min.js"></script>
#+HTML_HEAD_EXTRA: <script defer src="../js/main.js"></script> #+HTML_HEAD_EXTRA: <script defer src="../js/main.js"></script>
#+INCLUDE: headers.org

View File

@ -15,12 +15,10 @@
#+LaTeX_CLASS_OPTIONS: [a4paper,twoside] #+LaTeX_CLASS_OPTIONS: [a4paper,twoside]
#+LATEX_HEADER_EXTRA: \usepackage{xltxtra} #+LATEX_HEADER_EXTRA: \usepackage{xltxtra}
#+LATEX_HEADER_EXTRA: \usepackage[total={17cm,24cm}]{geometry} #+LATEX_HEADER_EXTRA: \usepackage[total={17cm,24cm}]{geometry}
# #+LATEX_HEADER_EXTRA: \setromanfont{Charis SIL}
#+LATEX_HEADER_EXTRA: \setmainfont{Charis SIL} #+LATEX_HEADER_EXTRA: \setmainfont{Charis SIL}
#+LATEX_HEADER_EXTRA: \usepackage{xcolor} #+LATEX_HEADER_EXTRA: \usepackage{xcolor}
#+LATEX_HEADER_EXTRA: \usepackage{hyperref} #+LATEX_HEADER_EXTRA: \usepackage{hyperref}
#+LATEX_HEADER_EXTRA: \hypersetup{colorlinks=true,linkbordercolor=red,linkcolor=blue,pdfborderstyle={/S/U/W 1}} #+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: \usepackage{indentfirst}
#+LATEX_HEADER_EXTRA: \sloppy #+LATEX_HEADER_EXTRA: \sloppy