180 lines
3.0 KiB
Plaintext
180 lines
3.0 KiB
Plaintext
/*
|
|
Some dudes complain about using less because it's "soy" I've made a
|
|
playlist for that kind of people, I hope you like this playlist:
|
|
|
|
I. https://www.youtube.com/watch?v=XjQ18z06c2k
|
|
II. https://www.youtube.com/watch?v=F5WkkSkEkqs
|
|
III. https://www.youtube.com/watch?v=g5sukHe4A3A
|
|
IV. https://www.youtube.com/watch?v=EuC63LU13CA
|
|
V. https://www.youtube.com/watch?v=d9DUqjNMZ60
|
|
VI. https://www.youtube.com/watch?v=2dbR2JZmlWo
|
|
|
|
*/
|
|
|
|
// Fonts definition
|
|
|
|
@font-face {
|
|
font-family: monospaced_code;
|
|
src: url("/static/terminus.woff");
|
|
}
|
|
|
|
// Variables
|
|
@cyan: #009090;
|
|
@click: #003b3b;
|
|
@banner_alpha: rgba(0,0,0,0.5);
|
|
@button_bg: rgba(0,0,0,0.8);
|
|
@banner: rgb(97,50,97);
|
|
@cool_red: #610061;
|
|
@cool_click: #6100ff;
|
|
|
|
// Functions
|
|
.border_red {
|
|
border-style: solid;
|
|
max-width: 90%;
|
|
border-color: @cool_red;
|
|
}
|
|
|
|
.border_purple {
|
|
border-style: double;
|
|
max-width: 90%;
|
|
border-color: @banner;
|
|
}
|
|
|
|
// Stylesheet for mobile devices:
|
|
@media screen and (max-width: 800px) {
|
|
.sidebar {
|
|
overflow:hidden;
|
|
position:relative;
|
|
top:0;
|
|
left:0px;
|
|
right:0px;
|
|
background-color: @banner_alpha;
|
|
border-color: @cool_click;
|
|
border-bottom-style: outset;
|
|
width:auto;
|
|
margin-bottom: 10px;
|
|
.button {
|
|
float: left;
|
|
}
|
|
}
|
|
.button {
|
|
position:static;
|
|
left: 125px;
|
|
bottom: 0;
|
|
}
|
|
.container, .outline-2, .footnotes {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
background-color: rgba(0,0,0,0.9);
|
|
.border_red();
|
|
}
|
|
p {
|
|
max-width: 90%;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// Stylesheet for desktop
|
|
@media screen and (min-width: 801px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 125px;
|
|
height: 100%;
|
|
transition: all 0.5s ease;
|
|
background-color: @banner_alpha;
|
|
border: 1px solid @banner;
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
}
|
|
.content {
|
|
position: relative;
|
|
margin-left: 0px;
|
|
width: 100%;
|
|
right: -130px;
|
|
max-width: 100% - 130px;
|
|
}
|
|
|
|
.container, .outline-2 {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: rgba(0,0,0,0.9);
|
|
.border_red();
|
|
}
|
|
p {
|
|
max-width: 65%;
|
|
overflow: auto;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* Common for desktop and mobile */
|
|
body {
|
|
background-color: black;
|
|
font-family:monospace;
|
|
background-image: url(../img/bg3.png);
|
|
background-position: left;
|
|
background-repeat:no-repeat;
|
|
background-size: auto;
|
|
background-attachment: fixed;
|
|
overflow-x: hidden;
|
|
}
|
|
h1, h2, h3, h4, h5, h6, p, ul, li, pre, blockquote {
|
|
color: white;
|
|
}
|
|
|
|
a {
|
|
color: purple;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: gray;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.src {
|
|
background-color: black!important;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
.border_red();
|
|
border-style:dashed;
|
|
}
|
|
|
|
.cat_image {
|
|
border-style: solid;
|
|
border: 1px solid ;
|
|
border-left: 0px;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
|
|
}
|
|
.button {
|
|
width: 120px;
|
|
margin: 2px;
|
|
text-align: center;
|
|
a {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 16px;
|
|
color: @banner;
|
|
margin: auto;
|
|
}
|
|
a:hover {
|
|
color: @cool_click;
|
|
}
|
|
background-color: @button_bg;
|
|
.border_purple();
|
|
}
|
|
|
|
code {
|
|
font-family: monospaced_code
|
|
}
|