Premier commit
This commit is contained in:
odilon.ath
commit
b477d8e5d5
BIN
favicon.jpg
Normal file
BIN
favicon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
import/.DS_Store
vendored
Normal file
BIN
import/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/audio/.DS_Store
vendored
Normal file
BIN
import/audio/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/audio/Song-Of-The-Racle.mp3
Normal file
BIN
import/audio/Song-Of-The-Racle.mp3
Normal file
Binary file not shown.
BIN
import/images/.DS_Store
vendored
Normal file
BIN
import/images/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
import/images/radiogarage_logo.jpg
Normal file
BIN
import/images/radiogarage_logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
import/images/test-image.jpg
Normal file
BIN
import/images/test-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 699 KiB |
301
index.html
Normal file
301
index.html
Normal file
@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="style/reset.css">
|
||||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="stylesheet" media="screen and (max-width: 667px)" href="style/phone.css">
|
||||
<link rel="stylesheet" href="https://use.typekit.net/qpi5siq.css">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.jpg">
|
||||
|
||||
|
||||
<title>Radio Garage</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
___ __ _ ______ _______ __ __
|
||||
| | | | | || | | || |_| |
|
||||
| | | |_| || _ || ___|| |
|
||||
| | | || | | || |___ | |
|
||||
| | | _ || |_| || ___| | |
|
||||
| | | | | || || |___ | _ |
|
||||
|___| |_| |__||______| |_______||__| |__|
|
||||
-->
|
||||
|
||||
<div id="header">
|
||||
|
||||
<div id="name">
|
||||
<button class="nav-home" onclick="showPage('home', this)" >Radio Garage</button>
|
||||
</div>
|
||||
|
||||
<div id="navigation">
|
||||
<div id="archives-button">
|
||||
<button class="nav-btn" onclick="showPage('archives', this)">Archives</button>
|
||||
</div>
|
||||
|
||||
<div id="apropos-button">
|
||||
<button class="nav-btn" onclick="showPage('about', this)">À propos</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player">
|
||||
<div id="info-player">
|
||||
<h4 id="second-title">Il n’y a aucun direct en ce moment… dsl :(</h4>
|
||||
<h4 id="title">mais ça arrive !!</h4>
|
||||
<div class="controls">
|
||||
<div id="playPauseBtn" class="play-btn">Lecture</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="myAudio" src="import/audio/Song-Of-The-Racle.mp3"></audio>
|
||||
|
||||
<div class="seek-container">
|
||||
<input type="range" id="seekSlider" value="0" min="0" step="0.01">
|
||||
<div class="progress-overlay" id="progressOverlay"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="home" class="page">
|
||||
<div id="home-box">
|
||||
|
||||
<h2>Prochain rdv direct</h2>
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">22.05.2025</h4>
|
||||
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||
<h4 class="hour">10:30</h4>
|
||||
<h4 class="title">Titre de l'émission</h4>
|
||||
<h4 class="autors">Auteurice(s)</h4>
|
||||
<h4 class="duration">Durée inconnue</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Description de l’émission + liens utiles de la personne
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">22.05.2025</h4>
|
||||
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||
<h4 class="hour">10:30</h4>
|
||||
<h4 class="title">Titre de l'émission</h4>
|
||||
<h4 class="autors">Auteurice(s)</h4>
|
||||
<h4 class="duration">Durée inconnue</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Description de l’émission + liens utiles de la personne
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">22.05.2025</h4>
|
||||
<h4 class="date-mobile">Jeudi 22 mai 2025</h4>
|
||||
<h4 class="hour">10:30</h4>
|
||||
<h4 class="title">Titre de l'émission</h4>
|
||||
<h4 class="autors">Auteurice(s)</h4>
|
||||
<h4 class="duration">Durée inconnue</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Description de l’émission + liens utiles de la personne
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logoandcredits">
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
_______ _______ _______ __ __ _______
|
||||
| _ || _ || || | | || |
|
||||
| |_| || |_| || _ || | | ||_ _|
|
||||
| || || | | || |_| | | |
|
||||
| || _ | | |_| || | | |
|
||||
| _ || |_| || || | | |
|
||||
|__| |__||_______||_______||_______| |___|
|
||||
-->
|
||||
|
||||
<div id="about" class="page" style="display: none;">
|
||||
<div id="apropos-box">
|
||||
|
||||
<div id="info-apropos">
|
||||
|
||||
<div id="presentation">
|
||||
<h3 class="title-apropos">Présentation</h3>
|
||||
<p class="text-apropos">
|
||||
Web radio 100% auto-gérée par les étudiantxes et membres de l’ésadhar Le Havre–Rouen, créée en 2025. <br>
|
||||
Radio Garage encourage toutes les formes de création sonores et radiophoniques, la documentation et l’archivage des temps forts de l’école et est ouverte aux contributions ponctuelles comme longues durées.
|
||||
</p>
|
||||
</div>
|
||||
<div id="gestionmaintenance">
|
||||
<h3 class="title-apropos">Gestion et maintenance</h3>
|
||||
<p class="text-apropos">
|
||||
La gestion et la maintenance de Radio Garage se fait par cycle et par groupe<br>
|
||||
d’au moins 3 personnes.<br>
|
||||
Les missions sont les suivantes :<br>
|
||||
Maintient et actualisation du site web<br>
|
||||
Gestion de la mise en ligne des pièces sonores<br>
|
||||
Gestion et coordination des contributeurxices<br>
|
||||
Organisation d’événements<br>
|
||||
Gestion du compte Instagram et de la communication interne.<br>
|
||||
<br>
|
||||
Pour cette année de lancement, ces missions sont assurées par :<br>
|
||||
Méline Grellier (étudiante en 4ESP)<br>
|
||||
Louise Fantozzi (étudiante en 4DGI)
|
||||
</p>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<h3 class="title-apropos">Contact</h3>
|
||||
<p class="text-apropos">
|
||||
Pour toutes envie de contributions, de discussion ou autre, pour nous contacter c’est par ici : <a href="mailto:radio.garage@outlook.fr" target="_blank">radio.garage@outlook.fr</a> ou par là : <a href="https://www.instagram.com/radio__garage/" target="_blank">@radio__garage</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="logoandcredits">
|
||||
<p>
|
||||
Web design, logo et identité : <a href="">Méline Grellier</a> et <a href="">Louise Fantozzi</a><br>
|
||||
Développement : <a href="">Odilon Aouatah</a><br>
|
||||
Typographie : Covik Sans Mono
|
||||
</p>
|
||||
|
||||
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
_______ ______ _______ __ __ ___ __ __ _______ _______
|
||||
| _ || _ | | || | | || | | | | || || |
|
||||
| |_| || | || | || |_| || | | |_| || ___|| _____|
|
||||
| || |_||_ | || || | | || |___ | |_____
|
||||
| || __ || _|| || | | || ___||_____ |
|
||||
| _ || | | || |_ | _ || | | | | |___ _____| |
|
||||
|__| |__||___| |_||_______||__| |__||___| |___| |_______||_______|
|
||||
-->
|
||||
|
||||
<div id="archives" class="page" style="display: none;">
|
||||
<div id="archives-box">
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">08.02.2025</h4>
|
||||
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||
<h4 class="date-mobile">08.02.2025</h4>
|
||||
<h4 class="duration">xx'xx''</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||
|
||||
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">08.02.2025</h4>
|
||||
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||
<h4 class="date-mobile">08.02.2025</h4>
|
||||
<h4 class="duration">xx'xx''</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||
|
||||
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-line">
|
||||
<div class="audio-info">
|
||||
<div class="und-audio-info">
|
||||
<h4 class="date-desktop">08.02.2025</h4>
|
||||
<h4 class="second-title">Visite sonore d'atelier</h4>
|
||||
<h4 class="title">#01 Songs of serigraphy</h4>
|
||||
<h4 class="autors">Méline Grellier, Louise Fantozzi</h4>
|
||||
<h4 class="date-mobile">08.02.2025</h4>
|
||||
<h4 class="duration">xx'xx''</h4>
|
||||
</div>
|
||||
<div class="button-box">
|
||||
<button class="listen-button" data-src="import/audio/test-01.mp3" data-title="01" data-second-title="001">Écouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-text">
|
||||
<img src="import/images/test-image.jpg">
|
||||
<p>
|
||||
Dit voir est un programme court proposé par Sally Bonn qui donne la parole à ceux qui aiment les œuvres et les font voir par leurs mots.<br><br>
|
||||
|
||||
Sally Bonn est maître de conférences en Esthétique à l’Université de Picardie, critique d’art et commissaire d’exposition. Elle dirige la collection d’écrits d’artistes Les Indiscipliné.e.s aux éditions Macula. Son dernier ouvrage paru : Écrire, écrire, écrire, aux éditions Arléa, 2022.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logoandcredits">
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<img src="import/images/radiogarage_logo.jpg" id="logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="js/player-and-archiveplayer.js" defer></script>
|
||||
<script src="js/changement-page.js" defer></script>
|
||||
<script src="js/affichage-info-archives.js" defer></script>
|
||||
</html>
|
||||
BIN
js/.DS_Store
vendored
Normal file
BIN
js/.DS_Store
vendored
Normal file
Binary file not shown.
17
js/affichage-info-archives.js
Normal file
17
js/affichage-info-archives.js
Normal file
@ -0,0 +1,17 @@
|
||||
const audioLines = document.querySelectorAll('.audio-line');
|
||||
|
||||
audioLines.forEach(line => {
|
||||
const header = line.querySelector('.audio-info');
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isActive = line.classList.contains('active');
|
||||
|
||||
// Fermer tous les autres
|
||||
audioLines.forEach(l => l.classList.remove('active'));
|
||||
|
||||
// Si ce n'était pas déjà ouvert, on l'ouvre
|
||||
if (!isActive) {
|
||||
line.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
27
js/changement-page.js
Normal file
27
js/changement-page.js
Normal file
@ -0,0 +1,27 @@
|
||||
function showPage(pageId, button) {
|
||||
// Masquer toutes les sections avec la classe "page"
|
||||
document.querySelectorAll('.page').forEach(page => {
|
||||
page.style.display = 'none';
|
||||
});
|
||||
|
||||
// Afficher la section demandée
|
||||
const selectedPage = document.getElementById(pageId);
|
||||
if (selectedPage) {
|
||||
selectedPage.style.display = 'block';
|
||||
}
|
||||
|
||||
// Retirer la classe active de tous les conteneurs de boutons
|
||||
document.querySelectorAll('#archives-button, #apropos-button').forEach(div => {
|
||||
div.classList.remove('active');
|
||||
});
|
||||
|
||||
// Ajouter la classe active au conteneur du bouton cliqué
|
||||
if (button && button.parentElement) {
|
||||
button.parentElement.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Affiche la section home par défaut au chargement
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
showPage('home');
|
||||
});
|
||||
79
js/player-and-archiveplayer copie.js
Normal file
79
js/player-and-archiveplayer copie.js
Normal file
@ -0,0 +1,79 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const audio = document.getElementById('myAudio');
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const seekSlider = document.getElementById('seekSlider');
|
||||
const progressOverlay = document.getElementById('progressOverlay');
|
||||
const title = document.getElementById('title');
|
||||
const secondTitle = document.getElementById('second-title');
|
||||
|
||||
let isDragging = false;
|
||||
let animationFrameId = null;
|
||||
|
||||
// Détection mobile
|
||||
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
|
||||
|
||||
// Initialiser le texte du bouton Play/Pause au chargement
|
||||
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||
|
||||
// Synchronisation de la barre pendant la lecture
|
||||
function updateProgress() {
|
||||
if (!isDragging) {
|
||||
seekSlider.value = audio.currentTime;
|
||||
const percent = (audio.currentTime / audio.duration) * 100;
|
||||
progressOverlay.style.width = percent + "%";
|
||||
}
|
||||
animationFrameId = requestAnimationFrame(updateProgress);
|
||||
}
|
||||
|
||||
// Bouton Play/Pause
|
||||
playPauseBtn.addEventListener('click', () => {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||
updateProgress();
|
||||
} else {
|
||||
audio.pause();
|
||||
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
});
|
||||
|
||||
// Drag slider
|
||||
seekSlider.addEventListener('input', () => {
|
||||
isDragging = true;
|
||||
const percent = (seekSlider.value / audio.duration) * 100;
|
||||
progressOverlay.style.width = percent + "%";
|
||||
});
|
||||
|
||||
seekSlider.addEventListener('change', () => {
|
||||
audio.currentTime = seekSlider.value;
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
// Quand un bouton "Écouter" est cliqué
|
||||
document.querySelectorAll('.listen-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const newSrc = button.dataset.src;
|
||||
const mainTitle = button.dataset.title;
|
||||
const subTitle = button.dataset.secondTitle;
|
||||
|
||||
audio.pause();
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
|
||||
audio.src = newSrc;
|
||||
audio.load();
|
||||
|
||||
title.textContent = mainTitle;
|
||||
secondTitle.textContent = subTitle;
|
||||
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
seekSlider.max = audio.duration;
|
||||
seekSlider.value = 0;
|
||||
progressOverlay.style.width = "0%";
|
||||
audio.play();
|
||||
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||
updateProgress();
|
||||
}, { once: true });
|
||||
});
|
||||
});
|
||||
});
|
||||
79
js/player-and-archiveplayer.js
Normal file
79
js/player-and-archiveplayer.js
Normal file
@ -0,0 +1,79 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const audio = document.getElementById('myAudio');
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const seekSlider = document.getElementById('seekSlider');
|
||||
const progressOverlay = document.getElementById('progressOverlay');
|
||||
const title = document.getElementById('title');
|
||||
const secondTitle = document.getElementById('second-title');
|
||||
|
||||
let isDragging = false;
|
||||
let animationFrameId = null;
|
||||
|
||||
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
|
||||
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||
|
||||
// Met à jour la barre de progression
|
||||
function updateProgress() {
|
||||
if (!isDragging && !isNaN(audio.duration)) {
|
||||
seekSlider.value = audio.currentTime;
|
||||
const percent = (audio.currentTime / audio.duration) * 100;
|
||||
progressOverlay.style.width = percent + "%";
|
||||
}
|
||||
animationFrameId = requestAnimationFrame(updateProgress);
|
||||
}
|
||||
|
||||
// Play / Pause
|
||||
playPauseBtn.addEventListener('click', () => {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||
updateProgress();
|
||||
} else {
|
||||
audio.pause();
|
||||
playPauseBtn.textContent = isMobile ? '▶' : 'Lecture';
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
});
|
||||
|
||||
// Drag de la barre
|
||||
seekSlider.addEventListener('input', () => {
|
||||
isDragging = true;
|
||||
const percent = (seekSlider.value / audio.duration) * 100;
|
||||
progressOverlay.style.width = percent + "%";
|
||||
});
|
||||
|
||||
seekSlider.addEventListener('change', () => {
|
||||
isDragging = false;
|
||||
audio.currentTime = parseFloat(seekSlider.value);
|
||||
});
|
||||
|
||||
// Quand l'audio change (durée chargée)
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
seekSlider.max = audio.duration;
|
||||
});
|
||||
|
||||
// Quand un bouton "Écouter" est cliqué
|
||||
document.querySelectorAll('.listen-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const newSrc = button.getAttribute('data-src');
|
||||
const newTitle = button.getAttribute('data-title');
|
||||
const newSecondTitle = button.getAttribute('data-second-title');
|
||||
|
||||
if (audio.src !== location.href + newSrc) {
|
||||
audio.src = newSrc;
|
||||
title.textContent = newTitle || '';
|
||||
secondTitle.textContent = newSecondTitle || '';
|
||||
|
||||
audio.load();
|
||||
audio.play();
|
||||
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||
updateProgress();
|
||||
} else {
|
||||
// Si on reclique sur le même, on relance la lecture
|
||||
audio.currentTime = 0;
|
||||
audio.play();
|
||||
playPauseBtn.textContent = isMobile ? '⏸' : 'Pause';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
BIN
style/.DS_Store
vendored
Normal file
BIN
style/.DS_Store
vendored
Normal file
Binary file not shown.
466
style/phone.css
Normal file
466
style/phone.css
Normal file
@ -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;
|
||||
}
|
||||
48
style/reset.css
Normal file
48
style/reset.css
Normal file
@ -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
style/style.css
Normal file
514
style/style.css
Normal file
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user