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.
develop
Lucien Cartier-Tilet 4 years ago
parent f510638ec8
commit 79596d60a1
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
10 changed files with 256 additions and 161 deletions
Show Stats Download Patch File Download Diff File

6
.gitignore vendored
Unescape Escape 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
Unescape Escape View File

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

58
css/dark.css → css/dark.scss
Unescape Escape 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;
}
thead {
tr {
@extend html;
}
}
.tooltiptext {
@extend html;
}
.tooltiptext::after {
border-color: $darkerbg transparent transparent transparent;
}
body {
color: $textcolor;
}
.title {
@extend body;
}
body,
.title,
.themeBtn,
a {
color: #ecf0f1;
@extend body;
}
th {
border: 1px solid $bg;
}
td {
@extend th;
}
th,
td,
pre {
border: 1px solid #263646;
@extend th;
}
table {
border: 2px solid #263646;
border: 2px solid $bg;
}
#content,
#postamble{
background-color: #2c3e50;
#content {
background-color: $bg;
}
.tooltiptext::after {
border-color: #34495e transparent transparent transparent;
#postamble{
background-color: $bg;
}

59
css/light.css → css/light.scss
Unescape Escape 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;
}
thead {
tr {
@extend html;
}
}
.tooltiptext {
@extend html;
}
.tooltiptext::after {
border-color: $darkerbg transparent transparent transparent;
}
body {
color: $textcolor;
}
.title {
@extend body;
}
body,
.title,
.themeBtn,
a {
color: #444;
@extend body;
}
th {
border: 1px solid $bg;
}
th,
td {
border: 1px solid #444;
@extend th;
}
pre {
@extend th;
}
table {
border: 2px solid #444;
border: 2px solid $bg;
}
thead tr,
.tooltiptext {
background-color: #ddd;
#content {
background-color: $bg;
}
.tooltiptext::after {
border-color: #ddd transparent transparent transparent;
#postamble{
background-color: $bg;
}

160
css/main.css → css/main.scss
Unescape Escape View File

@ -46,6 +46,7 @@ body {
#postamble {
text-align: center;
margin-bottom: 20px;
}
#content {
@ -65,114 +66,66 @@ 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;
}
a {
text-decoration: none;
box-shadow: inset 0 -3px 0 #9b59b6;
transition: all .3s ease-out;
}
a:hover {
box-shadow: inset 0 -21px 0 #9b59b6;
transition: all .3s ease-in;
}
a[href^="img/"],
a[href^="img/"]:hover {
box-shadow: 0 0;
}
.figure p {
margin: 0 0;
}
.largetable,
.figure {
display: block;
overflow-x: auto;
}
img,
table {
margin: auto;
}
table {
border-collapse: collapse;
.outline-4 {
@extend .outline-2;
}
th,
td {
padding: 10px;
.outline-text-4 {
@extend .outline-text-2;
}
.vertical {
writing-mode: vertical-rl;
text-align: right;
.outline-5 {
@extend .outline-2;
}
p {
text-align: justify;
.outline-text-5 {
@extend .outline-text-2;
}
pre {
box-shadow: 3px 3px 3px rgba(1, 1, 1, .6);
.outline-6 {
@extend .outline-2;
}
h1,
h2,
h3,
h4,
h5,
legend {
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
font-weight: 700;
display: inline-block;
.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;
}
@ -182,6 +135,71 @@ h5 {
font-weight: 300;
}
p {
text-align: justify;
}
$linkColor: #9b59b6;
a {
text-decoration: none;
box-shadow: inset 0 -3px 0 $linkColor;
transition: all .3s ease-out;
}
a:hover {
box-shadow: inset 0 -21px 0 $linkColor;
transition: all .3s ease-in;
}
a[href^="img/"],
a[href^="img/"]:hover {
box-shadow: 0 0;
}
.figure {
display: block;
overflow-x: auto;
p {
margin: 0 0;
}
}
.largetable {
display: block;
overflow-x: auto;
}
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;
}
th,
td {
padding: 10px;
}
.vertical {
writing-mode: vertical-rl;
text-align: right;
}
pre {
box-shadow: 3px 3px 3px rgba(1, 1, 1, .6);
}
/* 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;
}
}

49
css/nyqy.css
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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

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

2
headers/headers.org
Unescape Escape 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