alexandrump/andaquenosabesna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separa vídeos y Shorts con los feeds por tipo de YouTube; destacado = último vídeo

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TSyR5Zw5eGj6oPTRVjvP1b
This commit is contained in:
Alex
2026-10-20 16:38:18 +02:00
co-authored by Claude Sonnet 5.5
parent 7e1ae9841b
commit 1b93a2e2aa
3 changed files with 147 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.py
+50 -27
View File
@@ -9,11 +9,13 @@ import sys
import urllib.request import urllib.request
import xml.etree.ElementTree as ET import xml.etree.ElementTree as ET
from PIL import Image, ImageStat
OUT = os.environ.get('SITE_DIR', 'public') OUT = os.environ.get('SITE_DIR', 'public')
FEED = os.environ.get('FEED_URL', 'https://www.youtube.com/feeds/videos.xml?channel_id=UC8gVtzB3Lqm7nnfMhMvXGxQ') CHANNEL = 'UC8gVtzB3Lqm7nnfMhMvXGxQ'
MAX_VIDEOS = 15 # YouTube separa cada tipo en su propia lista: UULF = solo vídeos, UUSH = solo Shorts
FEED_VIDEOS = os.environ.get('FEED_VIDEOS_URL', f'https://www.youtube.com/feeds/videos.xml?playlist_id=UULF{CHANNEL[2:]}')
FEED_SHORTS = os.environ.get('FEED_SHORTS_URL', f'https://www.youtube.com/feeds/videos.xml?playlist_id=UUSH{CHANNEL[2:]}')
VIDEOS_SHOWN = 8 # además del destacado
SHORTS_SHOWN = 12
NS = {'a': 'http://www.w3.org/2005/Atom', 'y': 'http://www.youtube.com/xml/schemas/2015', NS = {'a': 'http://www.w3.org/2005/Atom', 'y': 'http://www.youtube.com/xml/schemas/2015',
'm': 'http://search.yahoo.com/mrss/'} 'm': 'http://search.yahoo.com/mrss/'}
MESES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'] MESES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic']
@@ -28,21 +30,27 @@ def fetch(url, timeout=20):
return urllib.request.urlopen(req, timeout=timeout).read() return urllib.request.urlopen(req, timeout=timeout).read()
def read_feed(url):
root = ET.fromstring(fetch(url))
out = []
for e in root.findall('a:entry', NS)[:15]:
d = e.find('a:published', NS).text[:10].split('-')
out.append({
'id': e.find('y:videoId', NS).text,
'title': e.find('a:title', NS).text,
'date': f'{int(d[2])} {MESES[int(d[1]) - 1]} {d[0]}',
'desc': e.find('m:group/m:description', NS).text or '',
})
return out
try: try:
root = ET.fromstring(fetch(FEED)) videos, shorts = read_feed(FEED_VIDEOS), read_feed(FEED_SHORTS)
except Exception as exc: # sin red o feed caído: se conserva la web anterior except Exception as exc: # sin red o feed caído: se conserva la web anterior
print('feed no disponible, se mantiene index.html:', exc, file=sys.stderr) print('feed no disponible, se mantiene index.html:', exc, file=sys.stderr)
sys.exit(0) sys.exit(0)
videos, shorts = videos[:VIDEOS_SHOWN + 1], shorts[:SHORTS_SHOWN]
videos = []
for e in root.findall('a:entry', NS)[:MAX_VIDEOS]:
d = e.find('a:published', NS).text[:10].split('-')
videos.append({
'id': e.find('y:videoId', NS).text,
'title': e.find('a:title', NS).text,
'date': f'{int(d[2])} {MESES[int(d[1]) - 1]} {d[0]}',
'desc': e.find('m:group/m:description', NS).text or '',
})
def sync_thumbs(vids): def sync_thumbs(vids):
img_dir = os.path.join(OUT, 'img') img_dir = os.path.join(OUT, 'img')
@@ -65,18 +73,14 @@ def sync_thumbs(vids):
return ok return ok
videos = sync_thumbs(videos) ok = sync_thumbs(videos + shorts)
okids = {v['id'] for v in ok}
videos = [v for v in videos if v['id'] in okids]
shorts = [v for v in shorts if v['id'] in okids]
if not videos: if not videos:
sys.exit(0) sys.exit(0)
def is_short(vid):
"""Los Shorts llevan barras laterales desenfocadas: poca textura en los laterales."""
im = Image.open(os.path.join(OUT, 'img', vid + '.jpg')).convert('L')
w, h = im.size
return ImageStat.Stat(im.crop((0, 0, int(w * .18), h))).stddev[0] < 25
# --- Temas: hashtags de las descripciones de YouTube ------------------------------------------- # --- Temas: hashtags de las descripciones de YouTube -------------------------------------------
STOP = {'podcast', 'podcastclips', 'andaquenosabesna', 'andaquenosabesna', 'aqnsn', 'shorts', 'short', 'fyp', STOP = {'podcast', 'podcastclips', 'andaquenosabesna', 'andaquenosabesna', 'aqnsn', 'shorts', 'short', 'fyp',
'viral', 'parati', 'galaxoide', 'youtube', 'video', 'clips'} 'viral', 'parati', 'galaxoide', 'youtube', 'video', 'clips'}
@@ -114,10 +118,10 @@ def topics(vids):
return out + PINNED return out + PINNED
chips = ''.join(f'<li>{html.escape(t)}</li>' for t in topics(videos)) chips = ''.join(f'<li>{html.escape(t)}</li>' for t in topics(videos + shorts))
esc = html.escape esc = html.escape
featured, rest = videos[0], videos[1:] # el feed viene del más nuevo al más antiguo featured, rest = videos[0], videos[1:] # el destacado es el último vídeo (no Short)
def url(v): def url(v):
@@ -127,12 +131,21 @@ def url(v):
def card(v, n): def card(v, n):
return f''' return f'''
<a class="card reveal" style="--d:{(n % 3) * 70}ms" href="{url(v)}" target="_blank" rel="noopener"> <a class="card reveal" style="--d:{(n % 3) * 70}ms" href="{url(v)}" target="_blank" rel="noopener">
<span class="thumb"><img src="img/{v['id']}.jpg" alt="" loading="lazy" width="480" height="360"{' class="short"' if is_short(v['id']) else ''}><span class="play" aria-hidden="true"></span></span> <span class="thumb"><img src="img/{v['id']}.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>{esc(v['date'])}</time><strong>{esc(v['title'])}</strong></span> <span class="meta"><time>{esc(v['date'])}</time><strong>{esc(v['title'])}</strong></span>
</a>''' </a>'''
def short_card(v, n):
return f'''
<a class="scard reveal" style="--d:{(n % 6) * 50}ms" href="https://www.youtube.com/shorts/{v['id']}" target="_blank" rel="noopener">
<span class="thumb"><img src="img/{v['id']}.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>{esc(v['title'])}</strong></span>
</a>'''
cards = ''.join(card(v, i) for i, v in enumerate(rest)) cards = ''.join(card(v, i) for i, v in enumerate(rest))
scards = ''.join(short_card(v, i) for i, v in enumerate(shorts))
page = f'''<!doctype html> page = f'''<!doctype html>
<html lang="es"> <html lang="es">
@@ -155,7 +168,8 @@ page = f'''<!doctype html>
<header class="top"> <header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a> <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal"> <nav aria-label="Principal">
<a href="#programas">Programas</a> <a href="#programas">Vídeos</a>
<a href="#shorts">Shorts</a>
<a href="#programa">El programa</a> <a href="#programa">El programa</a>
<a href="#quienes">Quiénes somos</a> <a href="#quienes">Quiénes somos</a>
<a href="#seguir">Seguir</a> <a href="#seguir">Seguir</a>
@@ -173,7 +187,7 @@ page = f'''<!doctype html>
<p class="lead">Charlas sobre lo que sabemos, lo que no, y lo que creemos saber.</p> <p class="lead">Charlas sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
<div class="cta"> <div class="cta">
<a class="btn primary" href="{YT}" target="_blank" rel="noopener">Ver en YouTube</a> <a class="btn primary" href="{YT}" target="_blank" rel="noopener">Ver en YouTube</a>
<a class="btn" href="#programas">Últimos programas</a> <a class="btn" href="#programas">Últimos vídeos</a>
</div> </div>
</div> </div>
<a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a> <a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
@@ -200,6 +214,15 @@ page = f'''<!doctype html>
</div> </div>
</section> </section>
<section id="shorts" class="wrap">
<div class="sec-head reveal">
<h2>Últimos <em>Shorts</em></h2>
<a class="more" href="{YT}/shorts" target="_blank" rel="noopener">Todos los Shorts →</a>
</div>
<div class="shorts">{scards}
</div>
</section>
<section id="programa" class="about wrap reveal"> <section id="programa" class="about wrap reveal">
<h2>De qué va</h2> <h2>De qué va</h2>
<p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p> <p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
public/index.html
+87 -53
View File
@@ -19,7 +19,8 @@
<header class="top"> <header class="top">
<a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a> <a class="brand" href="/" aria-label="Anda Que No Sabes Ná, inicio"><img src="img/avatar.jpg" alt="" width="40" height="40"><span>Anda que no sabes ná</span></a>
<nav aria-label="Principal"> <nav aria-label="Principal">
<a href="#programas">Programas</a> <a href="#programas">Vídeos</a>
<a href="#shorts">Shorts</a>
<a href="#programa">El programa</a> <a href="#programa">El programa</a>
<a href="#quienes">Quiénes somos</a> <a href="#quienes">Quiénes somos</a>
<a href="#seguir">Seguir</a> <a href="#seguir">Seguir</a>
@@ -37,19 +38,19 @@
<p class="lead">Charlas sobre lo que sabemos, lo que no, y lo que creemos saber.</p> <p class="lead">Charlas sobre lo que sabemos, lo que no, y lo que creemos saber.</p>
<div class="cta"> <div class="cta">
<a class="btn primary" href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener">Ver en YouTube</a> <a class="btn primary" href="https://www.youtube.com/@andaquenosabesna" target="_blank" rel="noopener">Ver en YouTube</a>
<a class="btn" href="#programas">Últimos programas</a> <a class="btn" href="#programas">Últimos vídeos</a>
</div> </div>
</div> </div>
<a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a> <a class="scroll" href="#destacado" aria-label="Bajar"><span></span></a>
</section> </section>
<section id="destacado" class="featured wrap reveal"> <section id="destacado" class="featured wrap reveal">
<a class="feat" href="https://www.youtube.com/watch?v=PxQHPd5YDLs" target="_blank" rel="noopener"> <a class="feat" href="https://www.youtube.com/watch?v=_-VaTy2fazY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/PxQHPd5YDLs.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span> <span class="thumb"><img src="img/_-VaTy2fazY.jpg" alt="" width="480" height="360"><span class="play big" aria-hidden="true"></span></span>
<span class="feat-text"> <span class="feat-text">
<span class="tag">Último vídeo</span> <span class="tag">Último vídeo</span>
<strong>La Tediosa Burocracia en la Educación</strong> <strong>DOMESTICAR ADOLESCENTES, PLANTAR TOMATES Y CONSTRUIR MINIATURAS | AQNSN Programa 3 - Galaxoide</strong>
<time>19 oct 2026</time> <time>18 oct 2026</time>
<span class="go">Ver el programa <i aria-hidden="true">→</i></span> <span class="go">Ver el programa <i aria-hidden="true">→</i></span>
</span> </span>
</a> </a>
@@ -61,69 +62,102 @@
<a class="more" href="https://www.youtube.com/@andaquenosabesna/videos" target="_blank" rel="noopener">Todos los vídeos →</a> <a class="more" href="https://www.youtube.com/@andaquenosabesna/videos" target="_blank" rel="noopener">Todos los vídeos →</a>
</div> </div>
<div class="grid"> <div class="grid">
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=rLFSEqe77OY" target="_blank" rel="noopener"> <a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=7zY2ey_ERlQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/rLFSEqe77OY.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>19 oct 2026</time><strong>¿Cómo dejas de comerte las uñas? El trauma útil de Palín</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=_-VaTy2fazY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/_-VaTy2fazY.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>18 oct 2026</time><strong>DOMESTICAR ADOLESCENTES, PLANTAR TOMATES Y CONSTRUIR MINIATURAS | AQNSN Programa 3 - Galaxoide</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=jmV_Ao85RvI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/jmV_Ao85RvI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>14 oct 2026</time><strong>¿Cómo de antiguo es el Árabe?</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=DLcn8i9lV6Q" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DLcn8i9lV6Q.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>13 oct 2026</time><strong>Todas las religiones son similares...</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=E_eULZSlWJs" target="_blank" rel="noopener">
<span class="thumb"><img src="img/E_eULZSlWJs.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>12 oct 2026</time><strong>La Vida de las Mujeres Egipcias en las zonas costeras</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=600_XwAHkv0" target="_blank" rel="noopener">
<span class="thumb"><img src="img/600_XwAHkv0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>12 oct 2026</time><strong>Clases religiosas separadas, la política de las escuelas egipcias</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=XKSVhuk_lQI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/XKSVhuk_lQI.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>11 oct 2026</time><strong>Poligamia en Egipto, de la antigüedad a la actualidad</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=voK4g7lIv4E" target="_blank" rel="noopener">
<span class="thumb"><img src="img/voK4g7lIv4E.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>11 oct 2026</time><strong>El Barrio Pijo de Egipto, Masr El Gedida, y sus tiendas de Oro</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=7zY2ey_ERlQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/7zY2ey_ERlQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span> <span class="thumb"><img src="img/7zY2ey_ERlQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>10 oct 2026</time><strong>Un Simple Teletransporte de Cartas...</strong></span> <span class="meta"><time>10 oct 2026</time><strong>Un Simple Teletransporte de Cartas...</strong></span>
</a> </a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=yzTMyAKQnDQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/yzTMyAKQnDQ.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>10 oct 2026</time><strong>Las Franquicias se extienden en EGIPTO...</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=Q7qYQbvjMxQ" target="_blank" rel="noopener"> <a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=Q7qYQbvjMxQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/Q7qYQbvjMxQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span> <span class="thumb"><img src="img/Q7qYQbvjMxQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>9 oct 2026</time><strong>El Mahshi y otras RECETAS EXÓTICAS de Egipto que PODRÍAN PERDERSE</strong></span> <span class="meta"><time>9 oct 2026</time><strong>El Mahshi y otras RECETAS EXÓTICAS de Egipto que PODRÍAN PERDERSE</strong></span>
</a> </a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=DgTa9qX4xH0" target="_blank" rel="noopener"> <a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=mxP0dvn2HD4" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DgTa9qX4xH0.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>9 oct 2026</time><strong>El barrio cristiano del Cairo que RECICLA BASURA</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=oAoEz2Kwmk8" target="_blank" rel="noopener">
<span class="thumb"><img src="img/oAoEz2Kwmk8.jpg" alt="" loading="lazy" width="480" height="360" class="short"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>8 oct 2026</time><strong>Tiendas QUE NO CIERRAN en Egipto 🌇</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=mxP0dvn2HD4" target="_blank" rel="noopener">
<span class="thumb"><img src="img/mxP0dvn2HD4.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span> <span class="thumb"><img src="img/mxP0dvn2HD4.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>6 oct 2026</time><strong>Árabe formal VS Árabe de la calle, ¿qué diferencias hay?</strong></span> <span class="meta"><time>6 oct 2026</time><strong>Árabe formal VS Árabe de la calle, ¿qué diferencias hay?</strong></span>
</a> </a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=f6UO6jtUgrU" target="_blank" rel="noopener">
<span class="thumb"><img src="img/f6UO6jtUgrU.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>5 oct 2026</time><strong>&quot;Así robaron el busto de Nefertiti...&quot; - El problema del EXPOLIO DE TESOROS de Egipto</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=A2v_T2CCupo" target="_blank" rel="noopener">
<span class="thumb"><img src="img/A2v_T2CCupo.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>4 oct 2026</time><strong>¿Cómo es la vida nocturna y callejera en Egipto?</strong></span>
</a>
<a class="card reveal" style="--d:140ms" href="https://www.youtube.com/watch?v=H_yHEe6skW4" target="_blank" rel="noopener">
<span class="thumb"><img src="img/H_yHEe6skW4.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>3 oct 2026</time><strong>EGIPTO NO ES COMO TE LO HAN CONTADO | AQNSN Programa 2 con Sara Yasser</strong></span>
</a>
<a class="card reveal" style="--d:0ms" href="https://www.youtube.com/watch?v=Ei_VnfM-uLY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/Ei_VnfM-uLY.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>30 sep 2026</time><strong>TANATOPRACTOR DE DÍA Y ANIMADOR TUPPER SEX DE NOCHE | AQNSN Programa 1 con Javi (Parte 2)</strong></span>
</a>
<a class="card reveal" style="--d:70ms" href="https://www.youtube.com/watch?v=g614maJ0998" target="_blank" rel="noopener">
<span class="thumb"><img src="img/g614maJ0998.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><time>30 sep 2026</time><strong>TANATOPRACTOR DE DÍA Y ANIMADOR TUPPER SEX DE NOCHE | AQNSN Programa 1 con Javi (Parte 1)</strong></span>
</a>
</div>
</section>
<section id="shorts" class="wrap">
<div class="sec-head reveal">
<h2>Últimos <em>Shorts</em></h2>
<a class="more" href="https://www.youtube.com/@andaquenosabesna/shorts" target="_blank" rel="noopener">Todos los Shorts →</a>
</div>
<div class="shorts">
<a class="scard reveal" style="--d:0ms" href="https://www.youtube.com/shorts/PxQHPd5YDLs" target="_blank" rel="noopener">
<span class="thumb"><img src="img/PxQHPd5YDLs.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>La Tediosa Burocracia en la Educación</strong></span>
</a>
<a class="scard reveal" style="--d:50ms" href="https://www.youtube.com/shorts/rLFSEqe77OY" target="_blank" rel="noopener">
<span class="thumb"><img src="img/rLFSEqe77OY.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>¿Cómo dejas de comerte las uñas? El trauma útil de Palín</strong></span>
</a>
<a class="scard reveal" style="--d:100ms" href="https://www.youtube.com/shorts/jmV_Ao85RvI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/jmV_Ao85RvI.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>¿Cómo de antiguo es el Árabe?</strong></span>
</a>
<a class="scard reveal" style="--d:150ms" href="https://www.youtube.com/shorts/DLcn8i9lV6Q" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DLcn8i9lV6Q.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>Todas las religiones son similares...</strong></span>
</a>
<a class="scard reveal" style="--d:200ms" href="https://www.youtube.com/shorts/E_eULZSlWJs" target="_blank" rel="noopener">
<span class="thumb"><img src="img/E_eULZSlWJs.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>La Vida de las Mujeres Egipcias en las zonas costeras</strong></span>
</a>
<a class="scard reveal" style="--d:250ms" href="https://www.youtube.com/shorts/600_XwAHkv0" target="_blank" rel="noopener">
<span class="thumb"><img src="img/600_XwAHkv0.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>Clases religiosas separadas, la política de las escuelas egipcias</strong></span>
</a>
<a class="scard reveal" style="--d:0ms" href="https://www.youtube.com/shorts/XKSVhuk_lQI" target="_blank" rel="noopener">
<span class="thumb"><img src="img/XKSVhuk_lQI.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>Poligamia en Egipto, de la antigüedad a la actualidad</strong></span>
</a>
<a class="scard reveal" style="--d:50ms" href="https://www.youtube.com/shorts/voK4g7lIv4E" target="_blank" rel="noopener">
<span class="thumb"><img src="img/voK4g7lIv4E.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>El Barrio Pijo de Egipto, Masr El Gedida, y sus tiendas de Oro</strong></span>
</a>
<a class="scard reveal" style="--d:100ms" href="https://www.youtube.com/shorts/yzTMyAKQnDQ" target="_blank" rel="noopener">
<span class="thumb"><img src="img/yzTMyAKQnDQ.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>Las Franquicias se extienden en EGIPTO...</strong></span>
</a>
<a class="scard reveal" style="--d:150ms" href="https://www.youtube.com/shorts/DgTa9qX4xH0" target="_blank" rel="noopener">
<span class="thumb"><img src="img/DgTa9qX4xH0.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>El barrio cristiano del Cairo que RECICLA BASURA</strong></span>
</a>
<a class="scard reveal" style="--d:200ms" href="https://www.youtube.com/shorts/oAoEz2Kwmk8" target="_blank" rel="noopener">
<span class="thumb"><img src="img/oAoEz2Kwmk8.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>Tiendas QUE NO CIERRAN en Egipto 🌇</strong></span>
</a>
<a class="scard reveal" style="--d:250ms" href="https://www.youtube.com/shorts/05m1CMyGyUA" target="_blank" rel="noopener">
<span class="thumb"><img src="img/05m1CMyGyUA.jpg" alt="" loading="lazy" width="480" height="360"><span class="play" aria-hidden="true"></span></span>
<span class="meta"><strong>¿Se parece la comida EGIPCIA a la ESPAÑOLA?</strong></span>
</a>
</div> </div>
</section> </section>
<section id="programa" class="about wrap reveal"> <section id="programa" class="about wrap reveal">
<h2>De qué va</h2> <h2>De qué va</h2>
<p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p> <p>Un programa de noche, con tertulia y sin prisa. Cada semana entra gente distinta, con su oficio y su manía, y se habla de lo que sale: de cómo se educa a un adolescente, de la vida en las calles de El Cairo, de si el árabe es tan antiguo como dicen, de qué tienen en común las religiones o de cómo se hace un truco de cartas.</p>
<ul class="chips" aria-label="Temas"><li>Egipto</li><li>Curiosidades</li><li>Educación</li><li>Lengua árabe</li><li>Agricultura</li><li>Burocracia</li><li>Comida egipcia</li><li>Economía</li><li>Gastronomía</li><li>Magia</li><li>Cultura granaína</li><li>Entrevistas</li></ul> <ul class="chips" aria-label="Temas"><li>Egipto</li><li>Curiosidades</li><li>Arqueologia</li><li>Educación</li><li>Gastronomía</li><li>Granada</li><li>Latenight</li><li>Lengua árabe</li><li>Tanatopraxia</li><li>Tuppersex</li><li>Cultura granaína</li><li>Entrevistas</li></ul>
</section> </section>
<section id="quienes" class="who wrap reveal"> <section id="quienes" class="who wrap reveal">
public/styles.css
+10
View File
@@ -212,3 +212,13 @@ footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--
} }
.invite h2 { margin: 0 0 4px; } .invite h2 { margin: 0 0 4px; }
.invite p { margin: 0; color: #c3d3e3; } .invite p { margin: 0; color: #c3d3e3; }
/* shorts */
.shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.scard { display: grid; gap: 8px; align-content: start; transition: transform .3s; }
.scard:hover { transform: translateY(-4px); }
.scard .thumb { aspect-ratio: 9 / 16; border-radius: 14px; }
.scard .meta strong { font-size: .88rem; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard:hover img { transform: scale(1.06); }
.scard:hover .play { opacity: 1; }
.scard .play::after { width: 44px; height: 44px; }