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 .= '<img class="' . $posicion .'" src="' . $imaxe->url . '" alt="">';
+            $saida .= '<section id="' . $posicion .'">';
+            $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>
+        <a href="#contido" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
+        <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>
 <?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 = '';
 }