Contact
++ Pour toute demande de collaboration, production de podcast ou simple message, utilisez les liens ci-dessous. +
+Follow
+-
+
- SoundCloud +
- Bandcamp +
Gallery
-- Fragments of industrial landscapes, studio sessions, and visual experiments - related to the REDSCAPEFACTORY universe. -
-
+
+ -
+
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
- - + Others + + + +
- Gallery +
- About +
- Contact + + + + +
-
- Music
-
-
-
- Asceptic Siliceum -
- Asceptic -
- Arisi Namaz -
- PHYSICALSCIENCE -
- - - Others - - -
- Gallery -
- About -
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
-
- Music
-
-
-
- Asceptic Siliceum -
- Asceptic -
- Arisi Namaz -
- PHYSICALSCIENCE -
- - - Others - - -
- Gallery -
- About -
- Home + +
-
+ Music
+
-
+
- Asceptic Siliceum +
- Asceptic +
- Arisi Namaz +
- PHYSICALSCIENCE +
+
+ - + Others + + + +
- Gallery +
- About +
- Contact +
- "* ]]; then
- inside=true
- count=$((count + 1))
- echo "
- " > "temp_items/item_$count.xml" - continue - fi - if [[ "$line" == *"
"* ]]; then - echo " " >> "temp_items/item_$count.xml"
- inside=false
- continue
- fi
- if [ "$inside" = true ]; then
- echo "$line" >> "temp_items/item_$count.xml"
- fi
-done < "$RSS_FILE"
+mkdir -p "$IMAGE_DIR" "$EPISODE_DIR" "$ENCLOSURE_DIR"
-# 2. Traitement
-for f in temp_items/item_*.xml; do
- [ -e "$f" ] || continue
+# Nettoyage JSON compatible Mac
+clean_json_text() {
+ echo "$1" | sed 's///g; s/\\/\\\\/g; s/"/\\"/g' | tr -d '\n' | tr -d '\r'
+}
- # Extraction brute
- TITLE=$(grep " - /{n++}{print > "item_" n ".xml"}' temp_rss.xml
+
+echo "[" > "$EPISODE_JSON"
+FIRST_ITEM=true
+
+for f in item_*.xml; do
+ # On saute le premier fichier s'il ne contient pas d'item (en-tête du flux)
+ if ! grep -q "
- " "$f"; then rm "$f"; continue; fi + + # Extraction des données + TITLE=$(grep "
" "$f" | sed 's/.* <\/title>.*/\1/') + PUBDATE=$(grep " " "$f" | sed 's/.* \(.*\)<\/pubDate>.*/\1/' | cut -d',' -f2 | cut -d':' -f1,2) + REMOTE_AUDIO=$(grep " Episode : $ID" - echo "--- Épisode : $TITLE ---" + # Téléchargement AUDIO (Ajout de -L pour les redirections et -k au cas où) + curl -Lk -s -o "$ENCLOSURE_DIR/$ID.mp3" "$REMOTE_AUDIO" + # Téléchargement IMAGE + curl -Lk -s -o "$IMAGE_DIR/$ID.jpg" "$REMOTE_COVER" - # TELECHARGEMENT (La partie critique) - if [ -n "$REMOTE_AUDIO" ]; then - echo " > Récupération du média..." - # On utilise des doubles guillemets pour protéger l'URL - # On ajoute -k (ignore certificats si besoin) et -L (redirection) - curl -L -s -o "$REMOTE_AUDIO" -o "$ENCLOSURE_DIR/$ID.mp3" - - # VERIFICATION IMMEDIATE - if [ -f "$ENCLOSURE_DIR/$ID.mp3" ]; then - SIZE=$(stat -f%z "$ENCLOSURE_DIR/$ID.mp3" 2>/dev/null || stat -c%s "$ENCLOSURE_DIR/$ID.mp3" 2>/dev/null) - echo " [OK] Taille : $SIZE octets" - else - echo " [!] ERREUR : Le fichier n'a pas été créé." - fi - fi + # Description + DESC_HTML=$(sed -n '/ /,/<\/description>/p' "$f" | sed -e 's/ //g' -e 's/<\/description>//g' -e 's///g') - # GENERATION HTML - DESC_HTML=$(sed -n '/ /,/<\/description>/p' "$f" | sed -e 's/ //g' -e 's/<\/description>//g' -e 's///g' | tr -d '\n\r') + # --- GÉNÉRATION HTML --- + cat < "$EPISODE_DIR/$ID.html" + + + + + $TITLE | REDSCAPEFACTORY + + + ++ ++ + + ++ + + +EOF - python3 -c " -import sys -with open('$LAYOUT_FILE', 'r') as l: data = l.read() -data = data.replace('[[TITLE]]', \"$TITLE\") -data = data.replace('[[CONTENT]]', \"\"\"$DESC_HTML\"\"\") -data = data.replace('[[AUDIO]]', '../enclosure/$ID.mp3') -data = data.replace('[[IMAGE]]', '../images/$ID.jpg') -with open('$EPISODE_DIR/$ID.html', 'w') as out: out.write(data) -" + # JSON + if [ "$FIRST_ITEM" = false ]; then echo "," >> "$EPISODE_JSON"; fi + cat <+ +$PODCAST_NAME • $PUBDATE+$TITLE
++ ++$DESC_HTML+ ← RETOUR + +
> "$EPISODE_JSON" + { + "id": "$ID", + "title": "$(clean_json_text "$TITLE")", + "audio": "enclosure/$ID.mp3", + "cover": "images/$ID.jpg", + "file": "episodes/$ID.html" + } +EOF + FIRST_ITEM=false + rm "$f" done -rm -rf temp_items -echo "Terminé." \ No newline at end of file +echo "]" >> "$EPISODE_JSON" +rm temp_rss.xml +echo "--- TERMINÉ ---" \ No newline at end of file diff --git a/podcasts/layout.txt b/podcasts/layout.txt deleted file mode 100644 index 6e03f71..0000000 --- a/podcasts/layout.txt +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - [[TITLE]] | REDSCAPEFACTORY - - - - -- - -- - --
-
-
- Music
-
-
-
- Asceptic Siliceum -
- Asceptic -
- - Podcasts -
- About -
- - -- - - ----
- -- - - \ No newline at end of file diff --git a/podcasts/podcasts/deepseaproject/episodes.json b/podcasts/podcasts/deepseaproject/episodes.json new file mode 100644 index 0000000..0d4f101 --- /dev/null +++ b/podcasts/podcasts/deepseaproject/episodes.json @@ -0,0 +1,2 @@ +[ +] diff --git a/style.css b/style.css index 027b1e4..c197591 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,7 @@ +html { + scroll-behavior: smooth; +} + /* ========================================== 1. BASES & TYPOGRAPHIE (Le look "classe") ========================================== */ @@ -9,11 +13,19 @@ --accent-color: #ffffff; } +::selection { + background: #333; /* Un gris acier */ + color: #fff; +} + * { box-sizing: border-box; } body { + display: flex; + flex-direction: column; + min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); @@ -22,13 +34,17 @@ body { -webkit-font-smoothing: antialiased; } +main { + flex: 1; +} + /* ========================================== - 2. HEADER & NAVIGATION (Blanc pur) + 2. HEADER & NAVIGATION ========================================== */ header { background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); - padding: 30px 40px; /* On augmente légèrement le padding vertical */ + padding: 10px 40px; position: sticky; top: 0; z-index: 1000; @@ -41,49 +57,112 @@ nav { } .logo img { - height: 60px; /* On double presque la taille (était à 35px) */ + height: 60px; width: auto; display: block; transition: transform 0.3s ease; } -.logo img:hover { - transform: scale(1.02); -} - -nav ul { - list-style: none; +/* Configuration de la liste principale */ +.nav-links { display: flex; + list-style: none; gap: 30px; margin: 0; padding: 0; + align-items: center; } -nav a { +/* Style des liens principaux */ +.nav-links > li > a { text-decoration: none; color: var(--accent-color); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 2px; font-weight: 600; + position: relative; + padding-bottom: 5px; } -/* Dropdown */ -.dropdown { position: relative; } -.submenu { - display: none; +/* Effet de soulignement (uniquement sur les liens principaux) */ +.nav-links > li > a::after { + content: ''; + position: absolute; + width: 0; + height: 1px; + bottom: 0; + left: 0; + background-color: var(--accent-color); + transition: width 0.3s ease; +} + +.nav-links > li:hover > a::after { + width: 100%; +} + +/* --- Gestion du Dropdown --- */ +.has-dropdown { + position: relative; /* Référentiel pour le sous-menu */ +} + +.dropdown { position: absolute; top: 100%; left: 0; - background: #1a1a1a; + background-color: #000; border: 1px solid var(--border-color); - list-style: none; - padding: 15px 0; - min-width: 180px; + padding: 8px 0; /* Réduit (était à 15px) */ + margin: 0; + min-width: 200px; /* Plus étroit */ + display: none; + z-index: 999; + list-style: none; /* FORCE la suppression du point/puce */ +} + +/* On s'assure que les éléments internes n'ont pas de puce non plus */ +.dropdown li { + list-style: none; + margin: 0; + padding: 0; +} + +/* On crée un "pont" invisible pour que la souris ne quitte jamais la zone active */ +.has-dropdown::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 35px; /* Doit correspondre à la distance à combler */ + display: block; +} + +/* Affiche au survol */ +.has-dropdown:hover .dropdown { + display: block; +} + +.dropdown li a { + padding: 8px 20px; /* Moins d'espace vertical pour un menu plus fin */ + display: block; + color: #fff; + text-decoration: none; + font-size: 0.7rem; /* Taille plus discrète */ + letter-spacing: 1px; + text-transform: uppercase; + transition: background 0.3s; +} + +.dropdown li a:hover { + background-color: #111; + color: var(--accent-color); +} + +/* On désactive l'effet de soulignement dans le sous-menu */ +.dropdown li a::after { + display: none; } -.submenu li { padding: 5px 20px; } -.submenu a { font-size: 0.6rem; letter-spacing: 1px; } -.dropdown:hover .submenu { display: block; } /* ========================================== 3. STRUCTURES DE PAGES (Centrage & Largeur) @@ -106,16 +185,20 @@ nav a { } .hero-container { - display: grid; + display: flex; grid-template-columns: 1fr 1.1fr; gap: 80px; - align-items: center; + align-items: stretch; } .hero-description { + display: flex; + flex-direction: column; + justify-content: space-between; /* Centre le texte verticalement par rapport à l'image */ font-size: 1.1rem; font-weight: 300; line-height: 1.8; + margin: 0; /* Nettoie les marges par défaut */ } .hero-visual img { @@ -125,8 +208,8 @@ nav a { /* Liste Projets Horizontale */ .home-projects-list { - padding: 60px 40px; - margin-bottom: 40px; + padding: 60px 40px 20px 40px; + margin-bottom: 20px; } .projects-horizontal-container { @@ -182,7 +265,7 @@ nav a { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; /* Aération entre texte et image */ - padding: 0 40px 120px 40px; + padding: 0 40px 6cm 40px; align-items: start; } @@ -252,7 +335,7 @@ nav a { .zake-footer { grid-template-columns: 1fr; gap: 40px; } } -/* --- Grille des Podcasts (Covers) --- */ +/* --- Grille des Podcasts Unifiée --- */ .podcasts-grid-container { max-width: 1200px; margin: 0 auto 100px auto; @@ -261,125 +344,160 @@ nav a { .podcasts-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 30px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 40px; + padding: 60px 0; } .podcast-card { - position: relative; - display: block; - overflow: hidden; + background: #000; border: 1px solid var(--border-color); + text-decoration: none; + display: flex; + flex-direction: column; + transition: border-color 0.3s ease; + /* On enlève le transform global qui peut causer des bugs de collision */ +} + +/* Conteneur d'image pour isoler le zoom */ +.podcast-image-wrapper { + width: 100%; aspect-ratio: 1 / 1; + overflow: hidden; /* Important pour que le zoom ne dépasse pas */ + position: relative; } .podcast-card img { width: 100%; height: 100%; object-fit: cover; - transition: transform 0.5s ease; + filter: grayscale(20%); + transition: transform 0.5s ease, filter 0.5s ease; } -.podcast-overlay { - position: absolute; - inset: 0; - background: rgba(255, 255, 255, 0.9); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - opacity: 0; - transition: opacity 0.3s ease; +/* Effets au survol de la carte */ +.podcast-card:hover { + border-color: #666; } -.podcast-card:hover img { transform: scale(1.05); } -.podcast-card:hover .podcast-overlay { opacity: 1; } - -.podcast-overlay h3 { - font-size: 0.9rem; - letter-spacing: 2px; - margin-bottom: 15px; - text-transform: uppercase; +.podcast-card:hover img { + transform: scale(1.05); + filter: grayscale(0%); } -.view-btn { - font-size: 0.6rem; - letter-spacing: 1px; - border: 1px solid var(--text-color); - padding: 8px 15px; -} - -/* --- Styles liens et player --- */ -.podcast-links { - display: flex; - gap: 20px; - margin: 20px 0; -} - -.rss-link, .platform-link { - font-size: 0.65rem; - letter-spacing: 1px; - text-decoration: none; - color: var(--text-color); - font-weight: 600; -} - -.audio-player-box { - margin: 30px 0; +/* Infos sous l'image */ +.podcast-info { padding: 20px; - background: #151515; - border: 1px solid var(--border-color); + background: #0a0a0a; } -.audio-player-box audio { width: 100%; } +.podcast-info h3 { + font-size: 0.8rem; + letter-spacing: 2px; + text-transform: uppercase; + margin: 0 0 10px 0; + color: var(--accent-color); +} -/* --- Styles Galerie --- */ +.podcast-info p { + font-size: 0.7rem; + color: #666; + margin: 0; + line-height: 1.4; +} + +/* --- Styles de la Galerie --- */ .gallery-container { max-width: 1200px; - margin: 0 auto 100px auto; - padding: 0 40px; + margin: 60px auto; + padding: 0 20px; } .gallery-grid { - column-count: 3; /* Nombre de colonnes */ - column-gap: 20px; -} - -.gallery-item { - break-inside: avoid; /* Évite de couper une image entre deux colonnes */ - margin-bottom: 20px; - background-color: #111; - border: 1px solid var(--border-color); - overflow: hidden; - transition: border-color 0.3s ease; + display: grid; + /* Crée 3 colonnes de taille égale */ + grid-template-columns: repeat(3, 1fr); + gap: 20px; /* Espace entre les photos */ } .gallery-item img { width: 100%; height: auto; display: block; - filter: grayscale(30%); /* Petit effet désaturé pour le look industriel */ - transition: all 0.5s ease; + border: 1px solid var(--border-color); + transition: transform 0.3s ease; } -.gallery-item:hover { +.gallery-item img:hover { + transform: scale(1.02); border-color: #666; } -.gallery-item:hover img { - filter: grayscale(0%); - transform: scale(1.03); -} - -/* Responsive Galerie */ -@media (max-width: 900px) { +/* Version Mobile : 1 seule colonne */ +@media (max-width: 768px) { .gallery-grid { - column-count: 2; + grid-template-columns: 1fr; } } +/* --- Styles Contact --- */ +.contact-container { + max-width: 800px; + margin: 0 auto 100px auto; + padding: 0 40px; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + border-top: 1px solid var(--border-color); + padding-top: 40px; +} + +.contact-method h3 { + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 2px; + color: #666; + margin-bottom: 20px; +} + +.contact-link { + font-size: 1.5rem; + color: var(--accent-color); + text-decoration: none; + transition: opacity 0.3s; +} + +.contact-link:hover { + opacity: 0.7; +} + +.social-list { + list-style: none; + padding: 0; +} + +.social-list li { + margin-bottom: 10px; +} + +.social-list a { + color: var(--text-color); + text-decoration: none; + font-size: 1.1rem; + transition: color 0.3s; +} + +.social-list a:hover { + color: var(--accent-color); +} + +/* Responsive Contact */ @media (max-width: 600px) { - .gallery-grid { - column-count: 1; + .contact-grid { + grid-template-columns: 1fr; + gap: 40px; } } \ No newline at end of file - " "$f"; then rm "$f"; continue; fi + + # Extraction des données + TITLE=$(grep "
Gallery
++ Fragments of industrial landscapes, studio sessions, and visual experiments related to the REDSCAPEFACTORY universe. +
+ + +-
-
+
+ -
+
+
+ -
+
+ Arisi Namaz is the anagram of maiden name Redscape mother. With this project, it's a progressive house style +
+
+
+ -
+
+
+ -
+
+
+ -
+
-
-
+
+ -
+
- Le Trajet
- VIEW SERIES +
+ Le Trajet - 2019
+Podcast d'un seul épisode
- Hors Sons
- VIEW SERIES +
+ Hors Sons - 2022
+Un regard sur l'actualité, tout en sons
- Le TechCast
- VIEW SERIES +
+ Le TechCast - 2012
+Le podcast de l'act tech & gaming
- En Flux Libre
- VIEW SERIES +
+ En Flux Libre - 2011-2012
+L'actualité de Linux et du logiciel libre
- Parlons Sport Auto
- VIEW SERIES +
+ Parlons Sport Auto - 2016-2020 - Quentin & RedscapeFactory
+Du sport auto, un sujet et des chroniqueurs pour en débattre
+
+ LesAbyssales - 2014-
+Le Podcast de toutes les musiques électroniques
- L'Invité
- VIEW SERIES +
+ L'invité des Abyssales - 2015-2020
+Spin-off des Abyssales centré sur un invité.
- Deep Sea Project
- VIEW SERIES +
+ Deep Sea Project - 2017-2020
+Spin-off des Abyssales centré sur les musique électroniques extrêmes.
+
+
+ 