Estilos CSS Mobile-First da Portada.

2022-03-10 01:47:18 +01:00 · 2022-03-10 01:47:18 +01:00 · 97af59a60d
commit 97af59a60d
parent b12183c89f
44 changed files with 67515 additions and 8 deletions
--- a/site/templates/_foot.php
+++ b/site/templates/_foot.php
@ -1,2 +1,13 @@
 <?php namespace ProcessWire; ?>
        <footer id="pe">
            <div class="contedor">
                <p>&copy;2022 <?php echo $configuracion['nome_sitio'] 
                    . ' ' . $configuracion['descripcion_sitio']; ?>.</p>
                <p><?php echo _x('All rights reserved', 'copyright');?></p>
                <p><?php echo _x('Designed and Developed by', 'developer');?>
                    <a target="_blank" href="https://artabro.org">Codigo Artabro</a></p>
            </div>
        </footer>
        <script src="<?php echo $config->urls->templates?>js/main.js"></script>
    </body>
 </html>
--- a/site/templates/_func.php
+++ b/site/templates/_func.php
@ -53,6 +53,49 @@ function getSeccions($seccions, $mantemento = false)
    return $saida;
 }
 function renderMenu($paxinas, $maxDepth = 0, $id = 'nav')
 {
    if($paxinas instanceof Page)
    {
        $paxinas = array($paxinas);
    }
    $saida = '';
    foreach($paxinas as $paxina)
    {
        if($paxina->id == wire('page')->id)
        {
            $saida .= '<li class="activo">';
        }
        else
        {
            $saida .= '<li>';
        }
        $saida .= '<a href="' . $paxina->url . '">' . $paxina->title . '</a>';
        if($paxina->hasChildren() && $maxDepth)
        {
            if($id == 'nav')
            {
                $id = 'nav nav-tree';
            }
            $saida .= renderMenu($paxina->children, $maxDepth-1, $id);
        }
        $saida .= '</li>';
    }
    if($saida)
    {
        $saida = '<ul id="' . $id . '" class="contenedor columna separado fin">' . $saida . '</ul>';
    }
    return $saida;
 }
 function renderTexto($artigo)
 {
    $saida = '';
@ -104,8 +147,8 @@ function renderTextoImaxe($texto, $imaxe, $posicion)
            $saida .= '</section>';
            break;
        case 'mantemento':
-            $saida .= '<section>';
+            $saida .= '<section id="' . $posicion .'">';
-            $saida .= '<img class="' . $posicion .'" src="' . $imaxe->url . '" alt="">';
+            $saida .= '<img src="' . $imaxe->url . '" alt="">';
            $saida .= '<div>' . $texto . '</div>';
            $saida .= '</section>';
            break;
--- a/site/templates/_head.php
+++ b/site/templates/_head.php
@ -1,11 +1,55 @@
 <?php namespace ProcessWire;?><!DOCTYPE html>
-<html lang="en">
+<html lang="<?php echo _x('en', 'HTML language code'); ?>">
    <head>
        <title><?php echo $titulo; ?></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/style.css" />
+<?php if($inicio->descripcion_sitio): ?>
        <meta name="description" content="<?php echo $configuracion['nome_sitio'] . ' ' . $configuracion['descripcion_sitio']; ?>" />
 <?php endif; ?>
        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/reset.css" />
        <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/fonts.css" />
        <link title="Praia de Seselle" rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>css/style.css" />
 <?php foreach($languages as $idioma): ?>
 <?php if(!$page->viewable($idioma)): continue; endif; ?>
        <link rel="alternate" hreflang="<?php echo $inicio->getLanguageValue($idioma, 'name'); ?>" href="<?php echo $page->localHttpUrl($idioma); ?>" />
 <?php endforeach; ?>
    </head>
    <body>
-        <h1><?php echo $configuracion['nome_sitio']; ?></h1>
+        <a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
-        <p><?php echo $configuracion['descripcion_sitio']; ?></p>
+        <header id="cabeceira">
            <div class="contedor">
                <div id="logo">
                    <h1><?php echo $configuracion['nome_sitio']; ?></h1>
                    <p><?php echo $configuracion['descripcion_sitio']; ?></p>
                </div>
                <input type="checkbox" name="interruptor" id="interruptor">
                <div class="interruptor">
                    <span class="linna linna1"></span>
                    <span class="linna linna2"></span>
                    <span class="linna linna3"></span>
                </div>
                <nav id="menu">
                    <h2 class="visually-hidden"><?php echo _x('Menu', 'Navigation menu');?></h2>
                    <ul id="idiomas" class="contenedor columna separado fin">
                    <?php
 foreach($languages as $idioma)
 {
    if(!$page->viewable($idioma))
    {
        continue;
    }
 ?>
                        <li <?php echo $idioma->id == $user->language->id ? 'class="activo"' : ''; ?>>
 <?php
    $url = $page->localUrl($idioma); 
    $hreflang = $inicio->getLanguageValue($idioma, 'name');
 ?>
                            <a title="<?php echo $idioma->title; ?>" hreflang="<?php echo $hreflang;?>" href="<?php echo $url; ?>"><?php echo $hreflang; ?></a>
                        </li>
 <?php } ?>
                    </ul>
 <?php echo $menu; ?>
                </nav>
            </div>
        </header>
--- a/site/templates/_main.php
+++ b/site/templates/_main.php
@ -3,12 +3,15 @@
 include('./_head.php');
 ?>
            <main id="contido">
                <div class="contedor">
                    <h2 class="visually-hidden"><?php echo _x('Content', 'Main content');?></h2>
 <?php
    echo $contido;
 ?>
 <?php if($page->editable()): ?>
-                <p><a href="<?php echo $page->editURL; ?>">Edit</a></p>
+                    <p><a href="<?php echo $page->editURL; ?>">Edit</a></p>
 <?php endif; ?>
                </div>
            </main>
 <?php
 include('./_foot.php');
--- a/site/templates/css/fonts.css
+++ b/site/templates/css/fonts.css
@ -0,0 +1,154 @@
 /**
 * @FONTS
 * =============================================================================
 *
 * fonts.css v0.0.1 | GNU GPL License | 
 *
 */
 /*
    Compatibility
    ----------------------------------------------------------------------------
    1. IE9 Compat Modes
    2. IE6-IE8
    3. Super Modern Browsers
    4. Pretty Modern Browsers
    5. Safari, Android, iOS
    6. Legacy iOS
 */
@font-face
 {
    font-family: 'Ambarella';
    src: url('../fonts/Ambarella_Regular.eot'); /* 1 */
    src: url('../fonts/Ambarella_Regular.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/Ambarella_Regular.woff2') format('woff2'), /* 3 */
       url('../fonts/Ambarella_Regular.woff') format('woff'), /* 4 */
       url('../fonts/Ambarella_Regular.otf')  format('opentype'), /* 5 */
       url('../fonts/Ambarella_Regular.ttf')  format('truetype'), /* 5 */
       url('../fonts/Ambarella_Regular.svg#ambarella') format('svg'); /* 6 */
    font-weight: normal;
    font-style: normal;
 }
@font-face
 {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVu_Sans_Book.eot'); /* 1 */
    src: url('../fonts/DejaVu_Sans_Book.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/DejaVu_Sans_Book.woff2') format('woff2'), /* 3 */
       url('../fonts/DejaVu_Sans_Book.woff') format('woff'), /* 4 */
       url('../fonts/DejaVu_Sans_Book.otf')  format('opentype'), /* 5 */
       url('../fonts/DejaVu_Sans_Book.ttf')  format('truetype'), /* 5 */
       url('../fonts/DejaVu_Sans_Book.svg#dejavu_sans_book') format('svg'); /* 6 */
    font-weight: normal;
    font-style: normal;
 }
@font-face
 {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVu_Sans_Bold.eot'); /* 1 */
    src: url('../fonts/DejaVu_Sans_Bold.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/DejaVu_Sans_Bold.woff2') format('woff2'), /* 3 */
       url('../fonts/DejaVu_Sans_Bold.woff') format('woff'), /* 4 */
       url('../fonts/DejaVu_Sans_Bold.otf')  format('opentype'), /* 5 */
       url('../fonts/DejaVu_Sans_Bold.ttf')  format('truetype'), /* 5 */
       url('../fonts/DejaVu_Sans_Bold.svg#dejavu_sans_bold') format('svg'); /* 6 */
    font-weight: bold;
    font-style: normal;
 }
@font-face
 {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVu_Sans_Oblique.eot'); /* 1 */
    src: url('../fonts/DejaVu_Sans_Oblique.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/DejaVu_Sans_Oblique.woff2') format('woff2'), /* 3 */
       url('../fonts/DejaVu_Sans_Oblique.woff') format('woff'), /* 4 */
       url('../fonts/DejaVu_Sans_Oblique.otf')  format('opentype'), /* 5 */
       url('../fonts/DejaVu_Sans_Oblique.ttf')  format('truetype'), /* 5 */
       url('../fonts/DejaVu_Sans_Oblique.svg#dejavu_sans_oblique') format('svg'); /* 6 */
    font-weight: normal;
    font-style: oblique;
 }
@font-face
 {
    font-family: 'DejaVu Sans';
    src: url('../fonts/DejaVu_Sans_Bold_Oblique.eot'); /* 1 */
    src: url('../fonts/DejaVu_Sans_Bold_Oblique.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/DejaVu_Sans_Bold_Oblique.woff2') format('woff2'), /* 3 */
       url('../fonts/DejaVu_Sans_Bold_Oblique.woff') format('woff'), /* 4 */
       url('../fonts/DejaVu_Sans_Bold_Oblique.otf')  format('opentype'), /* 5 */
       url('../fonts/DejaVu_Sans_Bold_Oblique.ttf')  format('truetype'), /* 5 */
       url('../fonts/DejaVu_Sans_Bold_Oblique.svg#dejavu_sans_bold_oblique') format('svg'); /* 6 */
    font-weight: bold;
    font-style: oblique;
 }
@font-face
 {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot'); /* 1 */
    src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* 2 */
       url('../fonts/icomoon.woff2') format('woff2'), /* 3 */
       url('../fonts/icomoon.woff') format('woff'), /* 4 */
       url('../fonts/icomoon.otf')  format('opentype'), /* 5 */
       url('../fonts/icomoon.ttf')  format('truetype'), /* 5 */
       url('../fonts/icomoon.svg#icomoon') format('svg'); /* 6 */
    font-weight: normal;
    font-style: normal;
    font-display: block;
 }
 /**
 * Iconos
 *
 */
 [class^="im-"], [class*=" im-"]
 {
    font-family: 'icomoon' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-transform: none;
    line-height: 1;
 }
 .im-cheveron-right:before
 {
    content: "\e900";
 }
 .im-close:before
 {
    content: "\e901";
 }
 .im-compose:before
 {
    content: "\e902";
 }
 .im-envelope:before
 {
    content: "\e903";
 }
 .im-menu:before
 {
    content: "\e904";
 }
 .im-search:before
 {
    content: "\e905";
 }
 .im-user:before
 {
    content: "\e906";
 }
--- a/site/templates/css/reset.css
+++ b/site/templates/css/reset.css
@ -0,0 +1,286 @@
@charset "UTF-8";
 /**
 * @NORMALIZE
 * =============================================================================
 *
 * normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 *
 */
 /*
    Document
    ----------------------------------------------------------------------------
    1. Correct the line height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html
 {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
 }
 /*
    Sections
    ----------------------------------------------------------------------------
    1. Remove the margin in all browsers.
    2. Render the `main` element consistently in IE.
    3. Correct the font size and margin on `h1` elements within `section` and
       `article` contexts in Chrome, Firefox, and Safari.
 */
 body /* 1 */
 {
    margin: 0;
 }
 main /* 2 */
 {
    display: block;
 }
 h1 /* 3 */
 {
    font-size: 2rem;
    margin: 0.67rem 0;
 }
 /*
    Grouping content
    ----------------------------------------------------------------------------
    1. Add the correct box sizing in Firefox.
    2. Show the overflow in Edge and IE.
    3. Correct the inheritance and scaling of font size in all browsers.
    4. Correct the odd `rem` font sizing in all browsers.
 */
 hr
 {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
 }
 pre
 {
    font-family: monospace, monospace; /* 3 */
    font-size: 1rem; /* 4 */
 }
 /*
    Text-level semantics
    ----------------------------------------------------------------------------
    1. Remove the gray background on active links in IE 10.
    2. Remove the bottom border in Chrome 57-
    3. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    4. Add the correct font weight in Chrome, Edge, and Safari.
    5. Correct the inheritance and scaling of font size in all browsers.
    6. Correct the odd `em` font sizing in all browsers.
    7. Add the correct font size in all browsers.
    8. Prevent `sub` and `sup` elements from affecting the line height in all
       browsers.
 */
 a /* 1 */
 {
    background-color: transparent;
 }
 abbr[title]
 {
    border-bottom: none; /* 2 */
    text-decoration: underline; /* 1 */
    text-decoration: underline dotted; /* 1 */
 }
 b, strong /* 4 */
 {
    font-weight: bolder;
 }
 code, kbd, samp
 {
    font-family: monospace, monospace; /* 5 */
    font-size: 1em; /* 6 */
 }
 small /* 7 */
 {
    font-size: 80%;
 }
 sub, sup /* 8 */
 {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
 }
 sub
 {
    bottom: -0.25em;
 }
 sup
 {
    top: -0.5em;
 }
 /*
    Embedded content
    ----------------------------------------------------------------------------
    1. Remove the border on images inside links in IE 10.
 */
 img /* 1 */
 {
    border-style: none;
 }
 /*
    Forms
    ----------------------------------------------------------------------------
    1. Change the font styles in all browsers.
    2. Remove the margin in Firefox and Safari.
    3. Show the overflow in IE/Edge.
    4. Remove the inheritance of text transform in Edge, Firefox, and IE.
    5. Correct the inability to style clickable types in iOS and Safari.
    6. Remove the inner border and padding in Firefox.
    7. Restore the focus styles unset by the previous rule.
    8. Correct the padding in Firefox.
    9. Correct the text wrapping in Edge and IE.
    10. Correct the color inheritance from `fieldset` elements in IE.
    11. Remove the padding so developers are not caught out when they zero out
        `fieldset` elements in all browsers.
    12. Add the correct vertical alignment in Chrome, Firefox, and Opera.
    13. Remove the default vertical scrollbar in IE 10+.
    14. Add the correct box sizing in IE 10.
    15. Remove the padding in IE 10.
    16. Correct the cursor style of increment and decrement buttons in Chrome.
    17. Correct the odd appearance in Chrome and Safari.
    18. Correct the outline style in Safari.
    19. Remove the inner padding in Chrome and Safari on macOS.
    20. Correct the inability to style clickable types in iOS and Safari.
    21. Change font properties to `inherit` in Safari.
 */
 button, input, optgroup, select, textarea
 {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
 }
 button, input /* 3 */
 {
    overflow: visible;
 }
 button, select /* 4 */
 {
    text-transform: none;
 }
 button, [type="button"], [type="reset"], [type="submit"] /* 5 */
 {
    -webkit-appearance: button;
 }
 button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner /* 6 */
 {
    border-style: none;
    padding: 0;
 }
 button:-moz-focusring, [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring /* 7 */
 {
    outline: 1px dotted ButtonText;
 }
 fieldset /* 8 */
 {
    padding: 0.35em 0.75em 0.625em;
 }
 legend
 {
    box-sizing: border-box; /* 9 */
    color: inherit; /* 10 */
    display: table; /* 9 */
    max-width: 100%; /* 9 */
    padding: 0; /* 11 */
    white-space: normal; /* 9 */
 }
 progress /* 12 */
 {
    vertical-align: baseline;
 }
 textarea /* 13 */
 {
    overflow: auto;
 }
 [type="checkbox"], [type="radio"]
 {
    box-sizing: border-box; /* 14 */
    padding: 0; /* 15 */
 }
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button /* 16 */
 {
    height: auto;
 }
 [type="search"]
 {
    -webkit-appearance: textfield; /* 17 */
    outline-offset: -2px; /* 18 */
 }
 [type="search"]::-webkit-search-decoration /* 19 */
 {
    -webkit-appearance: none;
 }
 ::-webkit-file-upload-button
 {
    -webkit-appearance: button; /* 20 */
    font: inherit; /* 21 */
 }
 /*
    Interactive
    ----------------------------------------------------------------------------
    1. Add the correct display in Edge, IE 10+, and Firefox.
    2. Add the correct display in all browsers.
 */
 details /* 1 */
 {
    display: block;
 }
 summary /* 2 */
 {
    display: list-item;
 }
 /*
    Misc
    ----------------------------------------------------------------------------
    1. Add the correct display in IE 10+.
    2. Add the correct display in IE 10.
 */
 template /* 1 */
 {
    display: none;
 }
 [hidden] /* 2 */
 {
    display: none;
 }
--- a/site/templates/css/style.css
+++ b/site/templates/css/style.css
@ -6,18 +6,394 @@
 :root
 {
    font-size: 16px;
    --color_oscuro: 189, 186, 178;
    --fondo_principal: 242, 240, 241;
    --fondo_oscuro: 43, 44, 38;
    --sombra: 0.8;
 }
 body
 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
-    background-color: #f2f0f1;
+    font-family: 'DejaVu Sans', sans-serif;
    font-size: 1rem;
    background-color: rgb(var(--fondo_principal));
 }
 h1, h2, h3, h4, h5, h6
 {
    margin-top: 0;
 }
 h1
 {
    font-family: 'Ambarella', cursive;
    font-size: 2rem;
 }
 h2
 {
    font-size: 1.5rem;
    font-weight: normal;
    font-style: oblique;
 }
 h3
 {
    font-size: 1.17rem;
    font-weight: normal;
    font-style: oblique;
 }
 h4
 {
    font-size: 1rem;
    font-weight: normal;
    font-style: oblique;
 }
 h5
 {
    font-size: .83rem;
    font-weight: normal;
    font-style: oblique;
 }
 h6
 {
    font-size: .67rem;
    font-weight: normal;
    font-style: oblique;
 }
 p
 {
    margin: 0;
 }
 img
 {
    width: 100%;
 }
 header#cabeceira
 {
    margin-bottom: 0.625rem;
    padding: 0.625rem;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0px 0 0.625rem rgb(var(--fondo_oscuro), var(--sombra));
 }
 header#cabeceira input[type="checkbox"]
 {
    display: block;
    position: absolute;
    top: 1.563rem;
    right: 1.563rem;
    z-index: 5;
    height: 1.875rem;
    width: 1.875rem;
    opacity: 0;
 }
 header#cabeceira .interruptor
 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    height: 1.875rem;
    width: 1.875rem;
    margin: 5px;
 }
 header#cabeceira .interruptor .linna
 {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 0.625rem;
    background: rgb(var(--fondo_oscuro));
 }
 header#cabeceira .interruptor .linna1
 {
    transform-origin: 0% 0%;
    transition: all 0.4s ease-in-out;
 }
 header#cabeceira .interruptor .linna2
 {
    transition: all 0.2s ease-in-out;
 }
 header#cabeceira .interruptor .linna3
 {
  transform-origin: 0% 100%;
  transition: all 0.4s ease-in-out;
 }
 nav#menu
 {
    left: 0;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    padding-top: 15px;
    color: rgb(var(--color_oscuro));
    background-color: rgb(var(--fondo_oscuro));
    transform: translateX(-100%);
    transition: transform 0.5s;
 }
 nav#menu a
 {
    color: rgb(var(--color_oscuro));
 }
 ul#idiomas
 {
    display: flex;
    flex-direction: row;
    width: 75%;
    margin: 0;
    padding: 0 0 0 0.625rem;
 }
 ul#paxinas
 {
    display: flex;
    flex-direction: column;
    margin: 1.25rem 0 0;
    padding: 0;
 }
 ul#idiomas li, ul#paxinas li
 {
    list-style: none;
    text-transform: uppercase;
 }
 ul#idiomas li a
 {
    display: block;
    padding: 0.625rem;
    border: 1px solid rgb(var(--color_oscuro));
    text-decoration: none;
 }
 ul#idiomas li:first-child a
 {
    border-radius: 5px 0 0 5px;
 }
 ul#idiomas li:last-child a
 {
    border-radius: 0 5px 5px 0;
 }
 ul#idiomas li.activo a
 {
    color: rgb(var(--fondo_oscuro));
    background-color: rgb(var(--color_oscuro));
 }
 nav#menu li a:focus
 {
    outline: 2px dotted rgb(var(--color_oscuro));
 }
 ul#paxinas li
 {
    border-left: 0.625rem solid rgb(var(--fondo_oscuro));
 }
 ul#paxinas li:hover, ul#paxinas li.activo
 {
    border-left: 0.625rem solid rgb(var(--color_oscuro));
 }
 ul#paxinas li a
 {
    display: block;
    padding: 1.25rem;
    text-decoration: none;
 }
 header#cabeceira input[type="checkbox"]:checked ~ nav#menu
 {
    transform: translateX(0);
 }
 header#cabeceira input[type="checkbox"]:focus ~ .interruptor
 {
    outline: 2px dotted rgb(var(--fondo_oscuro));
 }
 header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna1
 {
    background: rgb(var(--color_oscuro));
    transform: rotate(45deg) scaleX(1.3);
 }
 header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna2
 {
    background: rgb(var(--color_oscuro));
    transform: scaleY(0);
 }
 header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna3
 {
    background: rgb(var(--color_oscuro));
    transform: rotate(-45deg) scaleX(1.3);
 }
 header#cabeceira input[type="checkbox"]:checked:focus ~ .interruptor
 {
    outline: 2px dotted rgb(var(--color_oscuro));
 }
 header#cabeceira div.contedor
 {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
 }
 main#contido
 {
    flex: 1 0 auto;
 }
 section#mantemento img
 {
    padding: 0.625rem;
 }
 section#mantemento div
 {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75%;
    margin: 1.25rem auto 0;
    text-align: center;
 }
 footer#pe
 {
    flex-shrink: 0;
    padding: 1.25rem 0.625rem;
    color: rgb(var(--color_oscuro));
    background-color: rgb(var(--fondo_oscuro));
 }
 footer#pe p
 {
    font-size: .83rem;
    text-align: center;
 }
 footer#pe a
 {
    color: rgb(var(--color_oscuro));
 }
 .contedor
 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
 }
 .visually-hidden
 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
 }
 .element-focusable:focus
 {
    clip: auto;
    overflow: visible;
    height: auto;
 }
 .bypass-to-main:focus
 {
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #333;
    color: #fff;
 }
@media (min-width: 48rem)
 {
    .contedor
    {
        max-width: 70.5rem;
    }
 }
--- a/site/templates/fonts/Ambarella_Regular.eot
+++ b/site/templates/fonts/Ambarella_Regular.eot
--- a/site/templates/fonts/Ambarella_Regular.otf
+++ b/site/templates/fonts/Ambarella_Regular.otf
--- a/site/templates/fonts/Ambarella_Regular.svg
+++ b/site/templates/fonts/Ambarella_Regular.svg
--- a/site/templates/fonts/Ambarella_Regular.ttf
+++ b/site/templates/fonts/Ambarella_Regular.ttf
--- a/site/templates/fonts/Ambarella_Regular.woff
+++ b/site/templates/fonts/Ambarella_Regular.woff
--- a/site/templates/fonts/Ambarella_Regular.woff2
+++ b/site/templates/fonts/Ambarella_Regular.woff2
--- a/site/templates/fonts/DejaVu_Sans_Bold.eot
+++ b/site/templates/fonts/DejaVu_Sans_Bold.eot
--- a/site/templates/fonts/DejaVu_Sans_Bold.otf
+++ b/site/templates/fonts/DejaVu_Sans_Bold.otf
--- a/site/templates/fonts/DejaVu_Sans_Bold.svg
+++ b/site/templates/fonts/DejaVu_Sans_Bold.svg
--- a/site/templates/fonts/DejaVu_Sans_Bold.ttf
+++ b/site/templates/fonts/DejaVu_Sans_Bold.ttf
--- a/site/templates/fonts/DejaVu_Sans_Bold.woff
+++ b/site/templates/fonts/DejaVu_Sans_Bold.woff
--- a/site/templates/fonts/DejaVu_Sans_Bold.woff2
+++ b/site/templates/fonts/DejaVu_Sans_Bold.woff2
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.eot
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.eot
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.otf
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.otf
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.svg
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.svg
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.ttf
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.ttf
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.woff
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.woff
--- a/site/templates/fonts/DejaVu_Sans_Bold_Oblique.woff2
+++ b/site/templates/fonts/DejaVu_Sans_Bold_Oblique.woff2
--- a/site/templates/fonts/DejaVu_Sans_Book.eot
+++ b/site/templates/fonts/DejaVu_Sans_Book.eot
--- a/site/templates/fonts/DejaVu_Sans_Book.otf
+++ b/site/templates/fonts/DejaVu_Sans_Book.otf
--- a/site/templates/fonts/DejaVu_Sans_Book.svg
+++ b/site/templates/fonts/DejaVu_Sans_Book.svg
--- a/site/templates/fonts/DejaVu_Sans_Book.ttf
+++ b/site/templates/fonts/DejaVu_Sans_Book.ttf
--- a/site/templates/fonts/DejaVu_Sans_Book.woff
+++ b/site/templates/fonts/DejaVu_Sans_Book.woff
--- a/site/templates/fonts/DejaVu_Sans_Book.woff2
+++ b/site/templates/fonts/DejaVu_Sans_Book.woff2
--- a/site/templates/fonts/DejaVu_Sans_Oblique.eot
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.eot
--- a/site/templates/fonts/DejaVu_Sans_Oblique.otf
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.otf
--- a/site/templates/fonts/DejaVu_Sans_Oblique.svg
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.svg
--- a/site/templates/fonts/DejaVu_Sans_Oblique.ttf
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.ttf
--- a/site/templates/fonts/DejaVu_Sans_Oblique.woff
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.woff
--- a/site/templates/fonts/DejaVu_Sans_Oblique.woff2
+++ b/site/templates/fonts/DejaVu_Sans_Oblique.woff2
--- a/site/templates/fonts/icomoon.eot
+++ b/site/templates/fonts/icomoon.eot
--- a/site/templates/fonts/icomoon.otf
+++ b/site/templates/fonts/icomoon.otf
--- a/site/templates/fonts/icomoon.svg
+++ b/site/templates/fonts/icomoon.svg
@ -0,0 +1,17 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
 <font id="icomoon" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe900;" glyph-name="cheveron-right" d="M663.040 424.602l36.198 36.198-289.638 289.638-72.397-72.397 217.19-217.242-217.19-217.242 72.397-72.397 253.44 253.44z" />
 <glyph unicode="&#xe901;" glyph-name="close" d="M512 533.197l-362.035 362.035-72.397-72.397 362.035-362.035-362.035-362.035 72.397-72.397 362.035 362.035 362.035-362.035 72.397 72.397-362.035 362.035 362.035 362.035-72.397 72.397-362.035-362.035z" />
 <glyph unicode="&#xe902;" glyph-name="compose" d="M102.4 768v-716.8h716.8v307.2l102.4 102.4v-512h-921.6v921.6h512l-102.4-102.4h-307.2zM629.76 783.36l204.8-204.8-424.96-424.96h-204.8v204.8l424.96 424.96zM701.44 855.040l117.76 117.76 204.8-204.8-117.76-117.76-204.8 204.8z" />
 <glyph unicode="&#xe903;" glyph-name="envelope" d="M921.6 870.4c56.554 0 102.4-45.846 102.4-102.4v0-614.4c0-56.554-45.846-102.4-102.4-102.4v0h-819.2c-56.554 0-102.4 45.846-102.4 102.4v0 614.4c0 56.32 46.080 102.4 102.4 102.4h819.2zM697.856 404.48l326.144-250.88v102.4l-262.144 199.68 262.144 209.92v102.4l-512-409.6-512 409.6v-102.4l262.144-209.92-262.144-199.68v-102.4l326.144 250.88 185.856-148.48 185.856 148.48z" />
 <glyph unicode="&#xe904;" glyph-name="menu" d="M0 819.2h1024v-102.4h-1024v102.4zM0 512h1024v-102.4h-1024v102.4zM0 204.8h1024v-102.4h-1024v102.4z" />
 <glyph unicode="&#xe905;" glyph-name="search" d="M660.48 239.616c-68.622-53.712-156.164-86.131-251.277-86.131-226.216 0-409.6 183.384-409.6 409.6s183.384 409.6 409.6 409.6c226.216 0 409.6-183.384 409.6-409.6 0-95.113-32.419-182.654-86.809-252.177l0.678 0.9 273.92-272.896-72.704-72.704-272.896 273.408zM409.6 256c169.662 0 307.2 137.538 307.2 307.2s-137.538 307.2-307.2 307.2v0c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2v0z" />
 <glyph unicode="&#xe906;" glyph-name="user" d="M256 716.8c0 141.385 114.615 256 256 256s256-114.615 256-256v0-102.4c0-141.385-114.615-256-256-256s-256 114.615-256 256v0 102.4zM0 118.784c146.431 86.26 322.601 137.217 510.673 137.217 0.466 0 0.933 0 1.399-0.001h-0.072c186.368 0 361.472-49.664 512-137.216v-169.984h-1024v169.984z" />
 </font></defs></svg>
--- a/site/templates/fonts/icomoon.ttf
+++ b/site/templates/fonts/icomoon.ttf
--- a/site/templates/fonts/icomoon.woff
+++ b/site/templates/fonts/icomoon.woff
--- a/site/templates/fonts/icomoon.woff2
+++ b/site/templates/fonts/icomoon.woff2
--- a/site/templates/portada.php
+++ b/site/templates/portada.php
@ -5,6 +5,7 @@ $mantemento = $inicio->mantemento;
 if($mantemento && !$user->isLoggedin())
 {
    $menu = '';
    $menu = renderMenu($inicio, 0, 'paxinas');
    $contido = '';
    if(count($inicio->seccion_destacada))
@ -14,5 +15,6 @@ if($mantemento && !$user->isLoggedin())
 }
 else
 {
    $menu = renderMenu($inicio->and($inicio->children), 0, 'paxinas');
    $contido = '';
 }