phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Switch from CSS to SCSS and CSS load optimization

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

70
css/dark.css → css/dark.scss
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;
} }

69
css/light.css → css/light.scss
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;
} }

158
css/main.css → css/main.scss
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;
}
} }

49
css/nyqy.css
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;
}

7
headers/head-lvl0.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

7
headers/head-lvl1.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

2
headers/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