237 lines
3.1 KiB
Text
237 lines
3.1 KiB
Text
|
@light: ~"(prefers-color-scheme: light)";
|
||
|
@dark: ~"(prefers-color-scheme: dark)";
|
||
|
|
||
|
* {
|
||
|
padding: 0px;
|
||
|
margin: 0px;
|
||
|
font-family: system-ui, sans-serif;
|
||
|
font-size: 30px;
|
||
|
line-height: 50px;
|
||
|
|
||
|
@media @light {
|
||
|
background-color: @lightColor;
|
||
|
color: @darkColor;
|
||
|
scrollbar-color: @darkColor @lightColor;
|
||
|
}
|
||
|
|
||
|
@media @dark {
|
||
|
background-color: @darkColor;
|
||
|
color: @lightColor;
|
||
|
scrollbar-color: @lightColor @darkColor;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
::selection {
|
||
|
@media @light {
|
||
|
color: @lightColor;
|
||
|
background-color: @darkColor;
|
||
|
}
|
||
|
@media @dark {
|
||
|
color: @darkColor;
|
||
|
background-color: @lightColor;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
main {
|
||
|
padding: 30px;
|
||
|
padding-top: 15px;
|
||
|
|
||
|
@media (max-width: 500px) {
|
||
|
padding-left: 10px;
|
||
|
padding-right: 10px;
|
||
|
}
|
||
|
|
||
|
margin-left: 20%;
|
||
|
margin-right: 20%;
|
||
|
|
||
|
@media (max-width: 1400px) {
|
||
|
margin-left: 10%;
|
||
|
margin-right: 10%;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 800px) {
|
||
|
margin-left: 0px;
|
||
|
margin-right: 0px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
a, a:visited {
|
||
|
text-decoration: underline;
|
||
|
transition-property: color, border-color;
|
||
|
transition-duration: 0.1s;
|
||
|
transition-timing-function: linear;
|
||
|
|
||
|
&:hover, &:focus {
|
||
|
text-decoration: none;
|
||
|
color: @mainColor;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.button {
|
||
|
border-width: 2px;
|
||
|
border-style: solid;
|
||
|
padding: 8px 16px 8px 16px;
|
||
|
margin: 5px;
|
||
|
display: inline-block;
|
||
|
border-radius: 14px;
|
||
|
text-decoration: none;
|
||
|
|
||
|
@media @light {
|
||
|
border-color: @darkColor;
|
||
|
}
|
||
|
@media @dark {
|
||
|
border-color: @lightColor;
|
||
|
}
|
||
|
|
||
|
&:hover, &:focus {
|
||
|
color: @mainColor;
|
||
|
border: 2px solid @mainColor;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
.smallButton {
|
||
|
.button();
|
||
|
font-size: 80%;
|
||
|
padding: 0px 16px 0px 16px;
|
||
|
}
|
||
|
|
||
|
.logo {
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
img {
|
||
|
height: auto;
|
||
|
max-width: 100%;
|
||
|
}
|
||
|
|
||
|
.imgArticle {
|
||
|
display: block;
|
||
|
margin: auto;
|
||
|
margin-top: 20px;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.border {
|
||
|
border-width: 1px;
|
||
|
border-style: solid;
|
||
|
border-radius: 5px;
|
||
|
|
||
|
@media @light {
|
||
|
border-color: @darkColor;
|
||
|
}
|
||
|
|
||
|
@media @dark {
|
||
|
border-color: @lightColor;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
strong {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
pre, *:not(pre) > code, var, samp {
|
||
|
padding: 5px;
|
||
|
}
|
||
|
|
||
|
pre, code, var, samp {
|
||
|
font-family: monospace;
|
||
|
overflow: auto;
|
||
|
border-radius: 10px;
|
||
|
font-style: normal;
|
||
|
@media @dark {
|
||
|
background-color: @darkerColor;
|
||
|
}
|
||
|
|
||
|
@media @light {
|
||
|
background-color: @lightlessColor;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
abbr[title] {
|
||
|
text-decoration: dotted underline;
|
||
|
}
|
||
|
|
||
|
address {
|
||
|
font-style: normal;
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
padding-left: 35px;
|
||
|
}
|
||
|
|
||
|
dt {
|
||
|
font-weight: 500;
|
||
|
}
|
||
|
|
||
|
dd {
|
||
|
margin-left: 25px;
|
||
|
padding-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
padding-top: 10px;
|
||
|
padding-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
.centered {
|
||
|
text-align: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
// FOOTER
|
||
|
|
||
|
.textefooter {
|
||
|
margin: 30px;
|
||
|
line-height: 1.5em;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
footer {
|
||
|
text-align: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
header {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
// ----- TITLES -----
|
||
|
|
||
|
h1, h2, h3, h4, h5, h6 {
|
||
|
font-weight: normal;
|
||
|
line-height: 100%;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
font-size: 250%;
|
||
|
text-align: center;
|
||
|
padding-bottom: 20px;
|
||
|
padding-top: 15px;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
font-size: 200%;
|
||
|
margin-top: 50px;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
h3 {
|
||
|
font-size: 160%;
|
||
|
margin-top: 30px;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
h4 {
|
||
|
font-size: 130%;
|
||
|
}
|
||
|
|
||
|
h5 {
|
||
|
font-size: 115%;
|
||
|
}
|
||
|
|
||
|
h6 {
|
||
|
font-size: 107%;
|
||
|
}
|