Premier commit
This commit is contained in:
Vendored
BIN
Binary file not shown.
+466
@@ -0,0 +1,466 @@
|
||||
:root {
|
||||
--main-color: black ;
|
||||
--alternative-color: white ;
|
||||
--interactive-color: grey;
|
||||
}
|
||||
|
||||
a{
|
||||
color: var(--main-color);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#logoandcredits{
|
||||
height: fit-content; width: 100%;
|
||||
position: relative; bottom: auto;
|
||||
margin-top: 25vh; margin-bottom: 3vh;
|
||||
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#logo{
|
||||
width: auto; height: 20vh;
|
||||
}
|
||||
|
||||
#credits{
|
||||
width: fit-content;
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logoandcredits p{
|
||||
width: 70vw;
|
||||
line-height: 2.5vh;
|
||||
}
|
||||
|
||||
#logoandcredits p a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#logoandcredits p a:hover{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
/*
|
||||
$$\ $$\ $$\ $$\ $$$$$$$\ $$\
|
||||
$$ | $$ | $$ | $$ | $$ __$$\ $$ |
|
||||
$$ | $$ | $$$$$$\ $$$$$$\ $$$$$$$ | $$$$$$\ $$$$$$\ $$$$$$\ $$$$$$$\ $$$$$$$ | $$ | $$ |$$ | $$$$$$\ $$\ $$\ $$$$$$\ $$$$$$\
|
||||
$$$$$$$$ |$$ __$$\ \____$$\ $$ __$$ |$$ __$$\ $$ __$$\ \____$$\ $$ __$$\ $$ __$$ | $$$$$$$ |$$ | \____$$\ $$ | $$ |$$ __$$\ $$ __$$\
|
||||
$$ __$$ |$$$$$$$$ | $$$$$$$ |$$ / $$ |$$$$$$$$ |$$ | \__| $$$$$$$ |$$ | $$ |$$ / $$ | $$ ____/ $$ | $$$$$$$ |$$ | $$ |$$$$$$$$ |$$ | \__|
|
||||
$$ | $$ |$$ ____|$$ __$$ |$$ | $$ |$$ ____|$$ | $$ __$$ |$$ | $$ |$$ | $$ | $$ | $$ |$$ __$$ |$$ | $$ |$$ ____|$$ |
|
||||
$$ | $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ | \$$$$$$$ |$$ | $$ |\$$$$$$$ | $$ | $$ |\$$$$$$$ |\$$$$$$$ |\$$$$$$$\ $$ |
|
||||
\__| \__| \_______| \_______| \_______| \_______|\__| \_______|\__| \__| \_______| \__| \__| \_______| \____$$ | \_______|\__|
|
||||
$$\ $$ |
|
||||
\$$$$$$ |
|
||||
\______/
|
||||
*/
|
||||
|
||||
#header{
|
||||
width: 100vw; height: fit-content;
|
||||
position: fixed; top: 0vh;
|
||||
|
||||
padding-top: 2vh; padding-left: 4vw; padding-right: 4vw; padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex; justify-content: space-between;
|
||||
z-index: 100;
|
||||
|
||||
background-color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#name{
|
||||
width: 32vw; height: fit-content;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.nav-home {
|
||||
background-color: transparent; border: none; margin-left: -0.5vw; margin-top: -0.1vh; padding: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
align-items: center; text-align: left;
|
||||
width: 100%; height: 100%;
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#navigation{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#archives-button, #apropos-button{
|
||||
width: 22vw; height: 2vh;
|
||||
}
|
||||
|
||||
#archives-button{
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background-color: transparent; border: none; margin-left: -0.4vw; margin-top: -0.1vh; padding: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
align-items: center; text-align: left;
|
||||
width: 100%; height: 100%;
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#archives-button.active, #apropos-button.active {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#archives-button.active button, #apropos-button.active button{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#apropos{
|
||||
text-align: right; margin-right: 0vw;
|
||||
}
|
||||
|
||||
#player{
|
||||
width: 92vw; height: fit-content; margin-right: 0vw;
|
||||
position: fixed; top: 5vh; left: 4vw;
|
||||
|
||||
font-size: 3.7vw;
|
||||
z-index: 100;
|
||||
|
||||
border: 0.2vh solid var(--main-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#info-player{
|
||||
width: 100%; height: 3vh;
|
||||
display: flex;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#info-player #second-title{
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#info-player #title{
|
||||
width: 57%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#info-player .controls {
|
||||
width: 5%; height: 3vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
height: fit-content;
|
||||
border: none;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.play-btn:hover {
|
||||
color: var(--interactive-color);
|
||||
}
|
||||
|
||||
.seek-container {
|
||||
position: relative;
|
||||
width: 100%; height: 3vh;
|
||||
background-color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#seekSlider {
|
||||
-webkit-appearance: none;
|
||||
width: 75vw;
|
||||
height: fit-content;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#seekSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 75vw;
|
||||
height: fit-content;
|
||||
background: transparent;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.progress-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: var(--interactive-color);
|
||||
border-right: 0.2vw solid var(--main-color);
|
||||
z-index: 1;
|
||||
pointer-events: none; /* important pour que l'utilisateur puisse cliquer sur le slider */
|
||||
}
|
||||
|
||||
#home-box, #apropos-box, #archives-box{
|
||||
width: 100vw; height: fit-content;
|
||||
position: absolute; top: 15vh;
|
||||
|
||||
padding-left: 4vw; padding-right: 4vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 4vw;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#home-box h2{
|
||||
width: 60vw; height: 2vh;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#image-text{
|
||||
width: fit-content; height: 80vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#image-legende{
|
||||
width: 7.5vw; height: 100%;
|
||||
margin-right: 0.5vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#image-legende img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#text-new{
|
||||
width: 100%; height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
#info-apropos{
|
||||
height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex; flex-direction: column;
|
||||
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#presentation{
|
||||
width: 100%; height: fit-content;
|
||||
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
#gestionmaintenance{
|
||||
width: 100%; height: fit-content;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
#contact{
|
||||
width: 100%; height: fit-content;
|
||||
}
|
||||
|
||||
.title-apropos{
|
||||
width: fit-content;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#presentation p, #gestionmaintenance p, #contact p{
|
||||
line-height: 2.5vh;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#contact a{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
|
||||
.audio-line{
|
||||
width: 100%; height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.audio-line:hover .audio-text p{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-info{
|
||||
width: 100%; height: fit-content;
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
|
||||
.und-audio-info{
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.und-audio-info h4{
|
||||
margin-bottom: 0.5vh;
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home-box .audio-info .button-box{
|
||||
height: fit-content; width: 30vw;
|
||||
text-align: right;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home-box .audio-info .listen-button{
|
||||
all: unset;
|
||||
width: fit-content; height: fit-content;
|
||||
}
|
||||
|
||||
.audio-line.active .button-box{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-text{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-text img{
|
||||
width: 7.7vw;
|
||||
margin-right: 0.5vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-text p{
|
||||
padding-bottom: 1vh;
|
||||
}
|
||||
|
||||
.audio-line.active .audio-text {
|
||||
display: block;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-line.active .und-audio-info{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#archives-box .audio-line.active .und-audio-info{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .date-desktop{
|
||||
width: 7vw;
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .date-mobile{
|
||||
width: 70vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .hour{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .title{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .autors{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .duration{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .button-box{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .date-desktop{
|
||||
width: 7vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .date-mobile{
|
||||
width: 70vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .second-title{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .title{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .autors{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .duration{
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
#archives-box .button-box{
|
||||
height: fit-content; width: 30vw;
|
||||
text-align: right;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#archives-box .audio-info .listen-button{
|
||||
all: unset;
|
||||
width: fit-content; height: fit-content;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
+514
@@ -0,0 +1,514 @@
|
||||
:root {
|
||||
--main-color: black ;
|
||||
--alternative-color: white ;
|
||||
--interactive-color: grey;
|
||||
}
|
||||
|
||||
a{
|
||||
color: var(--main-color);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#logoandcredits{
|
||||
height: fit-content; width: 98vw;
|
||||
position: fixed; bottom: 0vh;
|
||||
margin-top: 12vh; margin-bottom: 3vh;
|
||||
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
#logo{
|
||||
width: auto; height: 40vh;
|
||||
}
|
||||
|
||||
#credits{
|
||||
width: fit-content;
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logoandcredits p{
|
||||
width: 70vw;
|
||||
line-height: 2.5vh;
|
||||
}
|
||||
|
||||
#logoandcredits p a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#logoandcredits p a:hover{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
/* __ __ _______ _______ ______ _______ ______
|
||||
| | | || || _ || | | || _ |
|
||||
| |_| || ___|| |_| || _ || ___|| | ||
|
||||
| || |___ | || | | || |___ | |_||_
|
||||
| || ___|| || |_| || ___|| __ |
|
||||
| _ || |___ | _ || || |___ | | | |
|
||||
|__| |__||_______||__| |__||______| |_______||___| |_|
|
||||
*/
|
||||
|
||||
#header{
|
||||
width: 100vw; height: fit-content;
|
||||
position: fixed; top: 0vh;
|
||||
|
||||
padding-top: 2vh; padding-left: 1vw; padding-right: 1vw; padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex; justify-content: space-between;
|
||||
z-index: 100;
|
||||
|
||||
background-color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#name{
|
||||
width: 10vw; height: fit-content;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.nav-home {
|
||||
background-color: transparent; border: none; margin-left: -0.5vw; margin-top: -0.5vh; padding: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
align-items: center; text-align: left;
|
||||
width: 100%; height: 100%;
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
#navigation{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#archives-button, #apropos-button{
|
||||
width: 6vw; height: 2.1vh;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#archives-button{
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background-color: transparent; border: none; margin-left: -0.4vw; margin-top: -0.5vh; padding: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
align-items: center; text-align: left;
|
||||
width: 100%; height: 100%;
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
#archives-button.active, #apropos-button.active {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#archives-button.active button, #apropos-button.active button{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#apropos{
|
||||
text-align: right; margin-right: 0vw;
|
||||
}
|
||||
|
||||
/* _______ ___ _______ __ __ _______ ______
|
||||
| || | | _ || | | || || _ |
|
||||
| _ || | | |_| || |_| || ___|| | ||
|
||||
| |_| || | | || || |___ | |_||_
|
||||
| ___|| |___ | ||_ _|| ___|| __ |
|
||||
| | | || _ | | | | |___ | | | |
|
||||
|___| |_______||__| |__| |___| |_______||___| |_|
|
||||
*/
|
||||
|
||||
#player{
|
||||
width: 78vw; height: fit-content; margin-right: 0vw;
|
||||
position: fixed; top: 2.1vh; left: 8vw;
|
||||
|
||||
font-size: 0.9vw;
|
||||
z-index: 100;
|
||||
|
||||
border: 0.2vh solid var(--main-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#info-player{
|
||||
width: 100%; height: 2vh;
|
||||
display: flex;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#info-player #second-title{
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#info-player #title{
|
||||
width: 57%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#info-player .controls {
|
||||
width: 8%; height: 2vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
height: fit-content;
|
||||
border: none;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
.play-btn:hover {
|
||||
color: var(--interactive-color);
|
||||
}
|
||||
|
||||
.seek-container {
|
||||
position: relative;
|
||||
width: 100%; height: 2vh;
|
||||
background-color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#seekSlider {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 2vh;
|
||||
background: transparent;
|
||||
z-index: 2;
|
||||
margin-left: -0.1vw;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#seekSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 0.2vw;
|
||||
height: 2vh;
|
||||
background: transparent;
|
||||
margin-top: -0.9vh;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.progress-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2vh;
|
||||
background-color: var(--interactive-color);
|
||||
border-right: 0.2vw solid var(--main-color);
|
||||
z-index: 1;
|
||||
pointer-events: none; /* important pour que l'utilisateur puisse cliquer sur le slider */
|
||||
}
|
||||
|
||||
.audio-line{
|
||||
width: 100%; height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.audio-line:hover .audio-text p{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-info{
|
||||
width: 100%; height: fit-content;
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
|
||||
.und-audio-info{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.und-audio-info h4{
|
||||
margin-bottom: 0.5vh;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.und-audio-info .date-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-line.active .button-box{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-text{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-text img{
|
||||
width: 6.5vw;
|
||||
margin-right: 0.5vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.audio-text p{
|
||||
width: 100%;
|
||||
padding-bottom: 1vh;
|
||||
}
|
||||
|
||||
.audio-line.active .audio-text {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.audio-line.active .audio-text p{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
.audio-line.active .und-audio-info{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#archives-box .audio-line.active .und-audio-info{
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#home-box, #apropos-box, #archives-box{
|
||||
width: 100vw; height: fit-content;
|
||||
position: absolute; top: 10vh;
|
||||
|
||||
padding-left: 1vw; padding-right: 1vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 0.9vw;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ___ __ _ ______ _______ __ __
|
||||
| | | | | || | | || |_| |
|
||||
| | | |_| || _ || ___|| |
|
||||
| | | || | | || |___ | |
|
||||
| | | _ || |_| || ___| | |
|
||||
| | | | | || || |___ | _ |
|
||||
|___| |_| |__||______| |_______||__| |__|
|
||||
*/
|
||||
|
||||
#home-box h2{
|
||||
width: 14.8vw; height: 2vh;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#image-text{
|
||||
width: fit-content; height: 80vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#image-legende{
|
||||
width: 7.5vw; height: 100%;
|
||||
margin-right: 0.5vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#image-legende img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#text-new{
|
||||
width: 100%; height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--alternative-color);
|
||||
font-family: "covik-sans-mono", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .date-desktop{
|
||||
width: 7vw;
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .date-mobile{
|
||||
width: 70vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .hour{
|
||||
width: 9vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .title{
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .autors{
|
||||
width: 29.5vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .duration{
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
#home-box .und-audio-info .button-box{
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
#home-box .audio-info .button-box{
|
||||
height: fit-content; width: 30vw;
|
||||
text-align: right;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home-box .audio-info .listen-button{
|
||||
all: unset;
|
||||
width: fit-content; height: fit-content;
|
||||
}
|
||||
|
||||
/* _______ ______ _______ __ __ ___ __ __ _______ _______
|
||||
| _ || _ | | || | | || | | | | || || |
|
||||
| |_| || | || | || |_| || | | |_| || ___|| _____|
|
||||
| || |_||_ | || || | | || |___ | |_____
|
||||
| || __ || _|| || | | || ___||_____ |
|
||||
| _ || | | || |_ | _ || | | | | |___ _____| |
|
||||
|__| |__||___| |_||_______||__| |__||___| |___| |_______||_______|
|
||||
*/
|
||||
|
||||
#archives-box .und-audio-info .date-desktop{
|
||||
width: 7vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .date-mobile{
|
||||
width: 70vw;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .second-title{
|
||||
width: 27vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .title{
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .autors{
|
||||
width: 26.5vw;
|
||||
}
|
||||
|
||||
#archives-box .und-audio-info .duration{
|
||||
width: 6vw;
|
||||
}
|
||||
|
||||
#archives-box .button-box{
|
||||
height: fit-content; width: 8vw;
|
||||
text-align: left;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#archives-box .audio-info .listen-button{
|
||||
all: unset;
|
||||
width: fit-content; height: fit-content;
|
||||
}
|
||||
|
||||
#archives-button.active, #apropos-button.active {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#archives-button.active button, #apropos-button.active button{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
/* _______ _______ _______ __ __ _______
|
||||
| _ || _ || || | | || |
|
||||
| |_| || |_| || _ || | | ||_ _|
|
||||
| || || | | || |_| | | |
|
||||
| || _ | | |_| || | | |
|
||||
| _ || |_| || || | | |
|
||||
|__| |__||_______||_______||_______| |___|
|
||||
*/
|
||||
|
||||
#info-apropos{
|
||||
height: fit-content;
|
||||
padding-bottom: 0.5vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex; flex-direction: row;
|
||||
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
|
||||
#presentation{
|
||||
width: 100%; height: fit-content;
|
||||
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
#gestionmaintenance{
|
||||
width: 100%; height: fit-content;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
#contact{
|
||||
width: 100%; height: fit-content;
|
||||
}
|
||||
|
||||
.title-apropos{
|
||||
width: 100%;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#presentation p, #gestionmaintenance p, #contact p{
|
||||
line-height: 2.5vh;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#contact a{
|
||||
color: var(--alternative-color);
|
||||
}
|
||||
Reference in New Issue
Block a user