Change style

This commit is contained in:
jose-rZM
2025-12-15 18:59:45 +01:00
parent 2ae617797c
commit 9bc96e6f41
2 changed files with 87 additions and 54 deletions

View File

@@ -391,48 +391,60 @@
</article>
<article class="card openbokeron-card">
<div class="card-head">
<div>
<p class="label">Open Bokeron</p>
<p class="sub">Asociación de software libre</p>
</div>
<div class="card-head">
<div>
<p class="label">Open Bokeron</p>
<p class="sub">Quiénes estamos detrás del taller</p>
</div>
<a
class="tag link-tag"
href="https://openbokeron.org"
target="_blank"
rel="noreferrer"
>
openbokeron.org
</a>
</div>
<div class="openbokeron-body">
<div class="openbokeron-copy">
<p class="openbokeron-text">
Somos Open Bokeron, la asociación de software libre de la ETSII.
</p>
<p class="openbokeron-text subtle">
Este tinglado lo hemos montado nosotros, así que sí: esta tarjeta se queda todo el
taller
</p>
<ul class="openbokeron-list">
<li>Usamos Linux y te juzgamos severamente si vienes con Windows.</li>
<li>A veces hacemos cosas. #HazCosas dicen por aquí en la ETSII.</li>
</ul>
<div class="openbokeron-actions">
<a
class="tag link-tag"
class="button-link subtle"
href="https://openbokeron.org"
target="_blank"
rel="noreferrer"
>openbokeron.org</a
>
Conócenos
</a>
</div>
</div>
<div class="openbokeron-body">
<div class="openbokeron-copy">
<p class="openbokeron-text">
La peña que monta este tinglado. Y como esta es mi web pues hago spam gratis y así ves esta
tarjeta durante todo el taller. De nada.
</p>
<ul class="openbokeron-list">
<li>Usamos Linux y te juzgamos duramente si te vemos con un Windows.</li>
<li>A veces hacemos cosas, #HazCosas dicen aquí en la ETSII.</li>
<li>¡Encuesta! Anda, rellena esta encuesta de satisfacción del taller no me seas: [URL].</li>
</ul>
<div class="openbokeron-actions">
<a
class="button-link"
href="https://openbokeron.org"
target="_blank"
rel="noreferrer"
>
Pásate por la web
</a>
</div>
</div>
<div class="openbokeron-logo">
<div class="logo-bubble">
<img src="/open-bokeron-logo.png" alt="Logo de Open Bokeron" loading="lazy" />
</div>
</div>
<div class="openbokeron-logo">
<div class="logo-bubble">
<img
src="/open-bokeron-logo.png"
alt="Logo de Open Bokeron"
loading="lazy"
/>
</div>
</article>
</div>
</div>
</article>
</section>
</main>

View File

@@ -402,32 +402,47 @@ li {
.openbokeron-body {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.6fr);
gap: 1rem;
align-items: center;
align-items: flex-start;
}
.openbokeron-copy {
display: flex;
flex-direction: column;
gap: 0.65rem;
gap: 0.4rem;
}
.openbokeron-copy>*+* {
margin-top: 0.3rem;
}
.openbokeron-text {
margin: 0;
color: #e2e8f0;
line-height: 1.5;
font-size: 0.95rem;
}
.openbokeron-text.subtle {
opacity: 0.75;
font-size: 0.9rem;
}
.openbokeron-list {
margin: 0;
margin: 0.2rem 0 0;
padding-left: 1.1rem;
color: #cbd5f5;
font-size: 0.88rem;
opacity: 0.85;
display: flex;
flex-direction: column;
gap: 0.35rem;
gap: 0.3rem;
}
.openbokeron-actions {
display: flex;
gap: 0.6rem;
@@ -456,37 +471,43 @@ li {
box-shadow: 0 14px 28px rgba(56, 189, 248, 0.3);
}
.button-link.subtle {
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
box-shadow: none;
font-weight: 700;
}
.button-link.subtle:hover {
background: rgba(255, 255, 255, 0.14);
}
.openbokeron-logo {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: center;
text-align: center;
justify-content: center;
}
.logo-bubble {
width: 100%;
min-height: 170px;
border-radius: 16px;
border: 1px dashed rgba(148, 163, 184, 0.38);
min-height: 120px;
border-radius: 14px;
border: 1px dashed rgba(148, 163, 184, 0.35);
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
padding: 0.9rem;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 12px 28px rgba(0, 0, 0, 0.25);
padding: 0.8rem;
}
.logo-bubble img {
display: block;
max-width: 160px;
max-width: 120px;
width: 100%;
height: auto;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.32));
opacity: 0.9;
}
.price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));