This commit is contained in:
Mylloon 2023-04-11 01:51:49 +02:00
parent c46a61fba6
commit b5ddf30a73
Signed by: Anri
GPG key ID: A82D63DFF8D1317F

View file

@ -1,60 +1,60 @@
/* Title font */ /* Title font */
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@200&display=swap"); @import url("https://api.fonts.coollabs.io/css2?family=Overpass:wght@200&display=swap");
/* Normal font */ /* Normal font */
@font-face { @font-face {
font-family: "Luciole"; font-family: "Luciole";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
src: url(/css/fonts/Luciole-Regular.ttf); src: url(/css/fonts/Luciole-Regular.ttf);
} }
/* Italic font */ /* Italic font */
@font-face { @font-face {
font-family: "Luciole"; font-family: "Luciole";
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
src: url(/css/fonts/Luciole-Regular-Italic.ttf); src: url(/css/fonts/Luciole-Regular-Italic.ttf);
} }
/* Bold fond */ /* Bold fond */
@font-face { @font-face {
font-family: "Luciole"; font-family: "Luciole";
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
src: url(/css/fonts/Luciole-Bold.ttf); src: url(/css/fonts/Luciole-Bold.ttf);
} }
/* Bold italic font */ /* Bold italic font */
@font-face { @font-face {
font-family: "Luciole"; font-family: "Luciole";
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
src: url(/css/fonts/Luciole-Bold-Italic.ttf); src: url(/css/fonts/Luciole-Bold-Italic.ttf);
} }
/* Page bottom */ /* Page bottom */
footer { footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
margin: -8px; margin: -8px;
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
} }
/* Regular tags */ /* Regular tags */
html { html {
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
position: relative; position: relative;
padding-bottom: 3em; padding-bottom: 3em;
min-height: 90%; min-height: 90%;
background-color: rgb(24, 24, 24); background-color: rgb(24, 24, 24);
} }
p, p,
@ -63,186 +63,186 @@ h2,
h3, h3,
li, li,
a { a {
font-family: "Luciole", sans-serif; font-family: "Luciole", sans-serif;
} }
::selection { ::selection {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background: rgba(124, 75, 173, 0.486); background: rgba(124, 75, 173, 0.486);
} }
/* Frames */ /* Frames */
h1.subtitle { h1.subtitle {
text-decoration: none; text-decoration: none;
color: rgb(28, 118, 236); color: rgb(28, 118, 236);
} }
h1#title { h1#title {
text-align: center; text-align: center;
color: rgb(28, 236, 174); color: rgb(28, 236, 174);
} }
h2.subtitle, h2.subtitle,
h2.subtitle a { h2.subtitle a {
color: rgb(28, 118, 236) !important; color: rgb(28, 118, 236) !important;
} }
h3.subsubtitle, h3.subsubtitle,
#content h3.subsubtitle a { #content h3.subsubtitle a {
text-align: left; text-align: left;
color: rgb(149, 87, 201); color: rgb(149, 87, 201);
} }
#content h3.subsubtitle a:hover { #content h3.subsubtitle a:hover {
color: rgb(0, 181, 236); color: rgb(0, 181, 236);
transition: color 0.1s; transition: color 0.1s;
} }
div#content { div#content {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 2%; margin-top: 2%;
padding: 0.9% 0.9% 0.9% 0.9%; padding: 0.9% 0.9% 0.9% 0.9%;
width: 42%; width: 42%;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgb(170, 170, 170); border: 1px solid rgb(170, 170, 170);
text-align: center; text-align: center;
} }
@media only screen and (max-width: 850px) { @media only screen and (max-width: 850px) {
/* Mobile display */ /* Mobile display */
div#content { div#content {
width: 90%; width: 90%;
} }
} }
#content a, #content a,
#content a:visited, #content a:visited,
#content ul { #content ul {
text-decoration: none; text-decoration: none;
color: rgb(201, 201, 201); color: rgb(201, 201, 201);
text-align: center; text-align: center;
} }
#content p { #content p {
text-decoration: none; text-decoration: none;
color: rgb(201, 201, 201); color: rgb(201, 201, 201);
text-align: center; text-align: center;
padding: 0.7em; padding: 0.7em;
} }
#content a:hover { #content a:hover {
color: rgb(0, 181, 236); color: rgb(0, 181, 236);
transition: color 0.1s; transition: color 0.1s;
} }
/* https://stackoverflow.com/a/40244401/15436737 */ /* https://stackoverflow.com/a/40244401/15436737 */
#content a { #content a {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
#content a:after { #content a:after {
display: block; display: block;
content: ""; content: "";
border-bottom: solid 3px; border-bottom: solid 3px;
transform: scaleX(0); transform: scaleX(0);
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
transform-origin: 100% 50%; transform-origin: 100% 50%;
} }
#content a:hover:after { #content a:hover:after {
transform: scaleX(1); transform: scaleX(1);
transform-origin: 0 50%; transform-origin: 0 50%;
} }
/* ------------------------------------------- */ /* ------------------------------------------- */
div.subcontent { div.subcontent {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 5%; margin-top: 5%;
padding: 1.2% 1.2% 1.2% 1.2%; padding: 1.2% 1.2% 1.2% 1.2%;
width: 78%; width: 78%;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgb(170, 170, 170); border: 1px solid rgb(170, 170, 170);
text-align: center; text-align: center;
} }
#listecontent li { #listecontent li {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
/* Index */ /* Index */
.index { .index {
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.divIndex { .divIndex {
width: 50%; width: 50%;
height: 50%; height: 50%;
float: left; float: left;
} }
button.buttonIndex { button.buttonIndex {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
opacity: 0.6; opacity: 0.6;
transition: all 0.1s; transition: all 0.1s;
cursor: pointer; cursor: pointer;
} }
span.buttonIndex { span.buttonIndex {
font-family: "Overpass", sans-serif; font-family: "Overpass", sans-serif;
font-size: 500%; font-size: 500%;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
position: relative; position: relative;
transition: 0.5s; transition: 0.5s;
} }
.buttonIndex:hover, .buttonIndex:hover,
span.buttonIndex:after { span.buttonIndex:after {
opacity: 1; opacity: 1;
padding-right: 2%; padding-right: 2%;
} }
#buttonIndexTL { #buttonIndexTL {
background-color: rgb(0, 255, 255); background-color: rgb(0, 255, 255);
} }
#buttonIndexTR { #buttonIndexTR {
background-color: rgb(21, 255, 0); background-color: rgb(21, 255, 0);
} }
#buttonIndexBL { #buttonIndexBL {
background-color: rgb(187, 255, 0); background-color: rgb(187, 255, 0);
} }
#buttonIndexBR { #buttonIndexBR {
background-color: rgb(208, 88, 255); background-color: rgb(208, 88, 255);
} }
/* Back links going to the index */ /* Back links going to the index */
footer.backToIndexPage { footer.backToIndexPage {
text-align: center; text-align: center;
} }
footer.backToIndexPage a { footer.backToIndexPage a {
color: rgb(114, 180, 76); color: rgb(114, 180, 76);
text-decoration: none; text-decoration: none;
} }
footer.backToIndexPage a:hover { footer.backToIndexPage a:hover {
color: rgb(152, 187, 132); color: rgb(152, 187, 132);
} }
/* Hide content */ /* Hide content */
.hide { .hide {
display: none; display: none;
} }