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
*.pdf_tex
*.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/>.
*/
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;
}

View File

@ -15,33 +15,60 @@
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
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;
}

View File

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

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; -*-
#+INCLUDE: headers.org
# ### 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/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <script src="./js/jquery.min.js"></script>
#+HTML_HEAD_EXTRA: <script defer src="./js/main.js"></script>
#+INCLUDE: headers.org

View File

@ -1,10 +1,9 @@
# -*- mode: org; -*-
#+INCLUDE: headers.org
# ### 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/htmlize.min.css"/>
#+HTML_HEAD_EXTRA: <script src="../js/jquery.min.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_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