mylloon.fr/static/css/style.css

249 lines
3.9 KiB
CSS
Raw Normal View History

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