Change layout and texts

frontend/src/App.svelte

@@ -99,8 +99,8 @@
                 está inspirada en la de nuestra querida escuela.
             </p>
             <div class="actions">
-                <button on:click={() => fetchMenu()} class="ghost">Refrescar menú</button>
+                <button on:click={() => fetchMenu()}>Refrescar menú</button>
-                <button on:click={() => fetchPrices()}>Recalcular desayunos</button>
+                <button on:click={() => fetchPrices()} class="ghost">Recalcular desayunos</button>
             </div>
             <p class="meta">
                 Backend: {API_BASE} · Endpoints: /menu · /prices · /prices/:item · /health
@@ -255,11 +255,42 @@
             {/if}
         </article>
 
+        <article class="card">
+            <div class="card-head">
+                <div class="label">Desayunos</div>
+                {#if loadingPrices}
+                    <span class="tag">cargando...</span>
+                {/if}
+            </div>
+
+            {#if prices.length}
+                <div class="price-grid">
+                    {#each prices as price}
+                        <div class="price-card">
+                            <p class="item">{prettify(price.item)}</p>
+                            <p class="value">{price.price} €</p>
+                            <p class="timestamp">{price.generated_at}</p>
+                        </div>
+                    {/each}
+                </div>
+                <p class="meta">
+                    Dependiendo de si vas por la mañana o por la tarde los precios cambian. No sé,
+                    como no ponen los precios al público... :p
+                </p>
+            {:else if !loadingPrices}
+                <p>No hay precios que mostrar.</p>
+            {/if}
+        </article>
+
         <article class="card ci-card">
             <div class="card-head">
                 <div>
                     <p class="label">Estado del sistema</p>
-                    <p class="sub">Información de build y backend</p>
+                    <p class="sub">
+                        Información de build y backend. Tanto el Build, Commit y Autor lo
+                        recuperamos gracias a Jenkins, inyectando ciertas variables a la hora de
+                        hacer despliegue del backend.
+                    </p>
                 </div>
                 {#if loadingCiStatus}
                     <span class="tag">comprobando...</span>
@@ -309,7 +340,11 @@
             <div class="card-head">
                 <div>
                     <p class="label">Historial</p>
-                    <p class="sub">Builds recientes en Jenkins</p>
+                    <p class="sub">
+                        Builds recientes en Jenkins. Esto lo conseguimos gracias a que Jenkins nos
+                        expone una API REST muy maja para consultar información de los jobs y
+                        builds.
+                    </p>
                 </div>
                 {#if loadingHistory}
                     <span class="tag">actualizando...</span>
@@ -363,33 +398,6 @@
             {/if}
         </article>
 
-        <article class="card">
-            <div class="card-head">
-                <div class="label">Desayunos</div>
-                {#if loadingPrices}
-                    <span class="tag">cargando...</span>
-                {/if}
-            </div>
-
-            {#if prices.length}
-                <div class="price-grid">
-                    {#each prices as price}
-                        <div class="price-card">
-                            <p class="item">{prettify(price.item)}</p>
-                            <p class="value">{price.price} €</p>
-                            <p class="timestamp">{price.generated_at}</p>
-                        </div>
-                    {/each}
-                </div>
-                <p class="meta">
-                    Dependiendo de si vas por la mañana o por la tarde los precios cambian. No sé,
-                    como no ponen los precios al público... :p
-                </p>
-            {:else if !loadingPrices}
-                <p>No hay precios que mostrar.</p>
-            {/if}
-        </article>
-
         <article class="card openbokeron-card">
             <div class="card-head">
                 <div>
@@ -413,8 +421,8 @@
                     </p>
 
                     <p class="openbokeron-text subtle">
-                Este tinglado lo hemos montado nosotros, así que sí: esta tarjeta se queda todo el
+                        Este tinglado lo hemos montado nosotros, así que sí: esta tarjeta se queda
-                taller
+                        todo el taller
                     </p>
 
                     <ul class="openbokeron-list">
@@ -445,6 +453,5 @@
                 </div>
             </div>
         </article>
-
     </section>
 </main>

frontend/src/styles/app.css

@@ -429,8 +429,6 @@ li {
     font-size: 0.9rem;
 }
 
-
-
 .openbokeron-list {
     margin: 0.2rem 0 0;
     padding-left: 1.1rem;
@@ -442,7 +440,6 @@ li {
     gap: 0.3rem;
 }
 
-
 .openbokeron-actions {
     display: flex;
     gap: 0.6rem;
@@ -482,7 +479,6 @@ li {
     background: rgba(255, 255, 255, 0.14);
 }
 
-
 .openbokeron-logo {
     display: flex;
     align-items: center;
@@ -507,7 +503,6 @@ li {
     opacity: 0.9;
 }
 
-
 .price-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));