diff --git a/frontend/public/open-bokeron-logo.png b/frontend/public/open-bokeron-logo.png new file mode 100644 index 0000000..17e0bdb Binary files /dev/null and b/frontend/public/open-bokeron-logo.png differ diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 983e0aa..67281fc 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -389,5 +389,50 @@

No hay precios que mostrar.

{/if} + +
+
+
+

Open Bokeron

+

Asociación de software libre

+
+ openbokeron.org +
+ +
+
+

+ 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. +

+
    +
  • Usamos Linux y te juzgamos duramente si te vemos con un Windows.
  • +
  • A veces hacemos cosas, #HazCosas dicen aquí en la ETSII.
  • +
  • ¡Encuesta! Anda, rellena esta encuesta de satisfacción del taller no me seas: [URL].
  • +
+ +
+ +
+
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 4512e09..00636fc 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -184,6 +184,23 @@ button.outline { border: 1px solid rgba(255, 255, 255, 0.05); } +.openbokeron-card { + background: + radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.22), transparent 26%), + radial-gradient(circle at 85% -5%, rgba(124, 58, 237, 0.2), transparent 28%), + linear-gradient(180deg, #0b1224, #0e1530); + position: relative; + overflow: hidden; +} + +.openbokeron-card::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 55%); + pointer-events: none; +} + .card-head { display: flex; justify-content: space-between; @@ -211,6 +228,21 @@ button.outline { font-size: 0.85rem; } +.tag.link-tag { + text-decoration: none; + border: 1px solid rgba(165, 180, 252, 0.4); + transition: + border-color 120ms ease, + color 120ms ease, + background 120ms ease; +} + +.tag.link-tag:hover { + border-color: rgba(165, 180, 252, 0.8); + background: rgba(165, 180, 252, 0.16); + color: #c7d2fe; +} + .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -368,6 +400,93 @@ li { align-items: flex-end; } +.openbokeron-body { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr); + gap: 1rem; + align-items: center; +} + +.openbokeron-copy { + display: flex; + flex-direction: column; + gap: 0.65rem; +} + +.openbokeron-text { + margin: 0; + color: #e2e8f0; + line-height: 1.5; +} + +.openbokeron-list { + margin: 0; + padding-left: 1.1rem; + color: #cbd5f5; + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.openbokeron-actions { + display: flex; + gap: 0.6rem; + align-items: center; + flex-wrap: wrap; +} + +.button-link { + display: inline-flex; + align-items: center; + gap: 0.35rem; + background: linear-gradient(120deg, #22d3ee, #38bdf8); + color: #0b1224; + text-decoration: none; + font-weight: 800; + padding: 0.65rem 1rem; + border-radius: 12px; + box-shadow: 0 12px 26px rgba(34, 211, 238, 0.25); + transition: + transform 120ms ease, + box-shadow 120ms ease; +} + +.button-link:hover { + transform: translateY(-1px); + box-shadow: 0 14px 28px rgba(56, 189, 248, 0.3); +} + +.openbokeron-logo { + display: flex; + flex-direction: column; + gap: 0.4rem; + align-items: center; + text-align: center; +} + +.logo-bubble { + width: 100%; + min-height: 170px; + border-radius: 16px; + border: 1px dashed rgba(148, 163, 184, 0.38); + 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); +} + +.logo-bubble img { + display: block; + max-width: 160px; + width: 100%; + height: auto; + filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.32)); +} + .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); @@ -455,6 +574,16 @@ li { } } +@media (max-width: 780px) { + .openbokeron-body { + grid-template-columns: 1fr; + } + + .openbokeron-actions { + justify-content: flex-start; + } +} + @media (min-width: 980px) { .menu-card { grid-column: span 2;