Estilos das seccions de contido.

site/templates/_func.php

@@ -29,9 +29,11 @@ function getSeccions($seccions)
                     case 'galeria':
                         $saida .= renderGaleria($seccion->titular, $seccion->galeria);
                         break;
-                    case 'texto_imaxe_lateral':
+                    case 'imaxe_texto_lateral':
                         $saida .= renderTextoImaxe($seccion->titular, $seccion->artigo, $seccion->imaxe, $seccion->posicion_imaxe->value);
                         break;
+                    case 'reixa':
+                        $saida .= renderReixa($seccion->titular, $seccion->reixa);
                 }
                 break;
             case 'repeater_mensaxe_mantemento':
@@ -111,9 +113,14 @@ function renderTexto($titulo, $texto)
 {
     $saida = '';
 
-    $saida .= '<section>' . "\n";
+    $saida .= '                   <div class="celda">' . "\n";
-    $saida .= $texto . "\n";
+    $saida .= '                       ' . $texto  . "\n";
-    $saida .= '</section>' . "\n";
+    $saida .= '                   </div>'  . "\n";
+
+    if($titulo)
+    {
+        $saida = '<section>' . "\n" . '                   <h3>' . $titulo . '</h3>' . "\n" . $texto . "\n" . '               </section>';
+    }
 
     return $saida;
 }
@@ -152,30 +159,53 @@ function renderGaleria($titulo, $galeria)
     return $saida;
 }
 
+function renderReixa($titulo, $reixa)
+{
+    $saida = '';
+
+    $saida .= '<section class="contedor">' . "\n";
+    $saida .= '                   <h3 class="visually-hidden">';
+    if($titulo)
+    {
+        $saida .= $titulo;
+    }
+    else
+    {
+        $saida .= 'Reixa de imaxes';
+    }
+    $saida .= '</h3>' . "\n";
+    $saida .= '    <div class="reixa ' . $posicion . '">' . "\n";
+    foreach($reixa as $imaxe)
+    {
+        $saida .= '                           <figure>' . "\n";
+        $saida .= '                               <img src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
+        $saida .= '                               <figcaption>' . $imaxe->description . '</figcaption>' . "\n";
+        $saida .= '                           </figure>' . "\n";
+    }
+    $saida .= '                   </div>'  . "\n";
+    $saida .= '               </section>';
+
+    return $saida;
+}
+
 function renderTextoImaxe($titulo, $texto, $imaxe, $posicion)
 {
     $saida = '';
 
-    switch ($posicion)
+    $saida .= '    <div class="celda ' . $posicion . '">' . "\n";
+    $saida .= '                       <figure>' . "\n";
+    $saida .= '                           <img src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
+    $saida .= '                           <figcaption>' . $imaxe->description . '</figcaption>' . "\n";
+    $saida .= '                       </figure>' . "\n";
+    if($texto)
     {
-        case 'esquerda':
+        $saida .= '                       ' . $texto  . "\n";
-            $saida .= '<section>';
+    }
-            $saida .= '<img class="' . $posicion .'" src="' . $imaxe->url . '" alt="">';
+    $saida .= '                   </div>'  . "\n";
-            $saida .= '<div>' . $texto . '</div>';
+
-            $saida .= '</section>';
+    if($titulo)
-            break;
+    {
-        case 'dereita':
+        $saida = '<section>' . "\n" . '                   <h3>' . $titulo . '</h3>' . "\n" . $saida . '               </section>';
-            $saida .= '<section>';
-            $saida .= '<div>' . $texto . '</div>';
-            $saida .= '<img class="' . $posicion .'" src="' . $imaxe->url . '" alt="">';
-            $saida .= '</section>';
-            break;
-        case 'superior':
-            $saida .= '<section>';
-            $saida .= '<img class="' . $posicion .'" src="' . $imaxe->url . '" alt="">';
-            $saida .= '<div>' . $texto . '</div>';
-            $saida .= '</section>';
-            break;
     }
 
     return $saida;

site/templates/css/style.css

@@ -78,9 +78,6 @@ img
 figure
 {
     margin: 0;
-
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 figure figcaption
@@ -92,7 +89,7 @@ figure figcaption
     font-size: 2.5rem;
 }
 
-figure figcaption p
+figure figcaption
 {
     text-align: center;
 }
@@ -102,11 +99,9 @@ figure img
     display: block;
 
     width: 100%;
-    height: 100%;
+    height: auto;
     object-fit: cover;
 
-    padding: 10px;
-
     background-color: rgb(var(--color_60));
 }
 
@@ -412,12 +407,39 @@ div.swiper-slide
     color: rgb(var(--color_10));
 }
 
+div.celda
+{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    justify-content: center;
+
+    margin-bottom: 30px;
+}
+
+div.celda.superior
+{
+    align-items: flex-start;
+    flex-direction: column;
+}
+
+div.celda.superior p
+{
+    padding-block: 20px;
+}
+
+div.reixa
+{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 1fr;
+}
+
 .contedor
 {
     width: 90%;
 
-    margin-left: auto;
+    margin: 0 auto 20px;
-    margin-right: auto;
 }
 
 .visually-hidden
@@ -474,14 +496,6 @@ div.swiper-slide
     }
 }
 
-@media (min-width:1024px)
-{
-    ul#paxinas li a
-    {
-        padding: 0;
-    }
-}
-
 @media (min-width: 1024px)
 {
     header#cabeceira div.contedor
@@ -536,6 +550,11 @@ div.swiper-slide
         border-left: 0;
     }
 
+    ul#paxinas li a
+    {
+        padding: 0;
+    }
+
     ul#paxinas li:hover, ul#paxinas li.activo
     {
         border-left: 0;
@@ -546,6 +565,36 @@ div.swiper-slide
         text-decoration: underline dotted;
     }
 
+    div.celda.esquerda
+    {
+        flex-direction: row;
+    }
+
+    div.celda.dereita
+    {
+        flex-direction: row-reverse;
+    }
+
+    div.celda.esquerda > *, div.celda.dereita > *
+    {
+        width: 50%;
+    }
+
+    div.celda.esquerda p
+    {
+        padding-left: 20px;
+    }
+
+    div.celda.dereita p
+    {
+        padding-right: 20px;
+    }
+
+    div.reixa
+    {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
     .contedor
     {
         width: 100%;

site/templates/pagina.php

@@ -4,8 +4,6 @@ $menu = '';
 $contido = '';
 
 $mantemento = $inicio->mantemento;
-$contido .= '<article id="' . $page->name . '">';
-$contido .= '<h2 class="visually-hidden">' . $page->title . '</h2>';
 
 if($mantemento && !$user->isLoggedin())
 {
@@ -13,11 +11,17 @@ if($mantemento && !$user->isLoggedin())
 }
 else
 {
+    
     $menu = renderMenu($inicio->and($inicio->children), 0, 'paxinas');
-    $contido .= renderMigasPan($page);
+
+    $contido .= '            ' . renderMigasPan($page) . "\n";
+    $contido .= '            <article id="inicio">' . "\n";
+    $contido .= '               <div class="contedor">' . "\n";
+    $contido .= '                   <h2>' . ucfirst($page->title) . '</h2>' . "\n";
     if(count($page->seccions))
     {
-        $contido .= getSeccions($page->seccions);
+        $contido .= '               ' . getSeccions($page->seccions) . "\n";
-    }
     }
+    $contido .= '               </div>' . "\n";
     $contido .= '</article>';
+}

site/templates/portada.php

@@ -4,9 +4,11 @@ $menu = '';
 $contido = '';
 
 $mantemento = $inicio->mantemento;
-$contido .= '            <article id="inicio" class="contedor">' . "\n";
+
-$contido .= '               <h2 class="visually-hidden">' . ucfirst($inicio->title) . '</h2>' . "\n";
 $contido .= '           ' . renderMigasPan($page) . "\n";
+$contido .= '            <article id="inicio">' . "\n";
+$contido .= '               <div class="contedor">' . "\n";
+$contido .= '                   <h2 class="visually-hidden">' . ucfirst($inicio->title) . '</h2>' . "\n";
 
 if($mantemento && !$user->isLoggedin())
 {
@@ -19,4 +21,5 @@ else
     
     $contido .= '               ' . getSeccions($inicio->seccions) . "\n";
 }
+$contido .= '               </div>' . "\n";
 $contido .= '            </article>' . "\n";