diff --git a/site/templates/_func.php b/site/templates/_func.php
index 07cac1f..39096d1 100644
--- a/site/templates/_func.php
+++ b/site/templates/_func.php
@@ -90,7 +90,7 @@ function renderMenu($paxinas, $maxDepth = 0, $id = 'nav')
if($saida)
{
- $saida = '';
+ $saida = '';
}
return $saida;
diff --git a/site/templates/_head.php b/site/templates/_head.php
index 5773502..e1182f0 100644
--- a/site/templates/_head.php
+++ b/site/templates/_head.php
@@ -1,4 +1,13 @@
-
+
<?php echo $titulo; ?>
@@ -7,15 +16,15 @@
descripcion_sitio): ?>
-
-
+
+
viewable($idioma)): continue; endif; ?>
-
+
@@ -31,7 +40,8 @@
diff --git a/site/templates/css/style.css b/site/templates/css/style.css
index ef76cba..7a133c7 100644
--- a/site/templates/css/style.css
+++ b/site/templates/css/style.css
@@ -6,11 +6,6 @@
:root
{
font-size: 16px;
-
- --color_oscuro: 189, 186, 178;
- --fondo_principal: 255, 255, 255;
- --fondo_oscuro: 43, 44, 38;
- --sombra: 0.8;
}
body
@@ -22,11 +17,27 @@ body
margin: 0;
- color: var(--fondo_oscuro);
+ color: rgb(var(--color_realce));
font-family: 'DejaVu Sans', sans-serif;
font-size: 1rem;
- background-color: rgb(var(--fondo_principal));
+ background-color: rgb(var(--color_principal));
+}
+
+body.light
+{
+ --color_principal: 255, 255, 255;
+ --color_realce: 43, 44, 38;
+ --color-pe: 43, 44, 38;
+ --texto_realce: 189, 186, 178;
+}
+
+body.dark
+{
+ --color_principal: 43, 44, 38;
+ --color_realce: 255, 255, 255;
+ --color-pe: 24, 24, 18;
+ --texto_realce: 189, 186, 178;
}
h1, h2, h3, h4, h5, h6
@@ -87,14 +98,16 @@ img
header#cabeceira
{
- margin-bottom: 0.625rem;
+ margin-bottom: 1.125rem;
padding: 0.625rem;
- box-shadow: 0px 0 0.625rem rgb(var(--fondo_oscuro), var(--sombra));
+ box-shadow: 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
+ 0px 6px 30px 5px rgba(0, 0, 0, 0.12),
+ 0px 8px 10px -5px rgba(0, 0, 0, 0.2);
}
-header#cabeceira input[type="checkbox"]
+header#cabeceira input#interruptor
{
display: block;
@@ -135,7 +148,7 @@ header#cabeceira .interruptor .linna
border-radius: 0.625rem;
- background: rgb(var(--fondo_oscuro));
+ background: rgb(var(--color_realce));
}
header#cabeceira .interruptor .linna1
@@ -166,11 +179,11 @@ nav#menu
padding: 0;
- border-right: 2px solid rgb(var(--fondo_oscuro));
+ border-right: 2px solid rgb(var(--color_realce));
- color: var(--fondo_oscuro);
+ color: rgb(var(--color_realce));
- background-color: rgb(var(--fondo_principal));
+ background-color: rgb(var(--color_principal));
transform: translateX(-100%);
transition: transform 0.5s;
@@ -178,7 +191,13 @@ nav#menu
nav#menu a
{
- color: rgb(var(--fondo_oscuro));
+ color: rgb(var(--color_realce));
+}
+
+div#axustes
+{
+ display: flex;
+ flex-direction: column;
}
ul#idiomas
@@ -216,31 +235,31 @@ ul#idiomas li a
padding: 0.625rem;
- border: 1px solid rgb(var(--fondo_oscuro));
+ border: 1px solid rgb(var(--color_realce));
text-decoration: none;
}
ul#idiomas li.activo a
{
- color: rgb(var(--fondo_principal));
+ color: rgb(var(--color_principal));
- background-color: rgb(var(--fondo_oscuro));
+ background-color: rgb(var(--color_realce));
}
nav#menu li a:focus
{
- outline: 2px dotted rgb(var(--fondo_oscuro));
+ outline: 2px dotted rgb(var(--color_realce));
}
ul#paxinas li
{
- border-left: 0.625rem solid rgb(var(--fondo_principal));
+ border-left: 0.625rem solid rgb(var(--color_principal));
}
ul#paxinas li:hover, ul#paxinas li.activo
{
- border-left: 0.625rem solid rgb(var(--fondo_oscuro));
+ border-left: 0.625rem solid rgb(var(--color_realce));
}
ul#paxinas li a
@@ -252,34 +271,34 @@ ul#paxinas li a
text-decoration: none;
}
-header#cabeceira input[type="checkbox"]:checked ~ nav#menu
+header#cabeceira input#interruptor:checked ~ nav#menu
{
transform: translateX(0);
}
-header#cabeceira input[type="checkbox"]:focus ~ .interruptor
+header#cabeceira input#interruptor:focus ~ .interruptor
{
- outline: 2px dotted rgb(var(--fondo_oscuro));
+ outline: 2px dotted rgb(var(--color_realce));
}
-header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna1
+header#cabeceira input#interruptor:checked ~ .interruptor .linna1
{
transform: rotate(45deg) scaleX(1.3);
}
-header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna2
+header#cabeceira input#interruptor:checked ~ .interruptor .linna2
{
transform: scaleY(0);
}
-header#cabeceira input[type="checkbox"]:checked ~ .interruptor .linna3
+header#cabeceira input#interruptor:checked ~ .interruptor .linna3
{
transform: rotate(-45deg) scaleX(1.3);
}
-header#cabeceira input[type="checkbox"]:checked:focus ~ .interruptor
+header#cabeceira input#interruptor:checked:focus ~ .interruptor
{
- outline: 2px dotted rgb(var(--fondo_oscuro));
+ outline: 2px dotted rgb(var(--color_realce));
}
header#cabeceira div.contedor
@@ -290,6 +309,105 @@ header#cabeceira div.contedor
justify-content: center;
}
+div.tema
+{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ margin-top: 20px;
+}
+
+.toggle
+{
+ display: none;
+}
+
+.toggle::selection,
+.toggle:after::selection,
+.toggle:before::selection,
+.toggle *::selection,
+.toggle *:after::selection,
+.toggle *:before::selection,
+.toggle + .toggle-button::selection
+{
+ background: none;
+}
+
+.toggle + .toggle-button
+{
+ display: inline-block;
+
+ position: relative;
+
+ width: 4em;
+ height: 2em;
+
+ padding: 2px;
+
+ border: 2px solid rgb(var(--color_realce));
+ border-radius: 2em;
+
+ outline: 0;
+
+ cursor: pointer;
+
+ user-select: none;
+
+ transition: all .2s ease;
+}
+
+.toggle + .toggle-button:after,
+.toggle + .toggle-button:before
+{
+ display: block;
+
+ position: relative;
+
+ width: 50%;
+ height: 100%;
+
+ content: "";
+}
+
+.toggle + .toggle-button:after
+{
+ left: 0;
+
+ border-radius: 1em;
+
+ background: rgba(var(--color_realce, 0.27));
+
+ content: "";
+
+ transition: all .2s ease;
+}
+
+.toggle + .toggle-button:before
+{
+ display: none;
+}
+
+.toggle:checked + .toggle-button:after
+{
+ left: 50%;
+}
+
+#icono_dia, #icono_noche
+{
+ position: relative;
+ top: -3px;
+
+ width: 32px;
+ height: 32px;
+
+ margin: 0 7px;
+
+ cursor: pointer;
+
+ fill: rgb(var(--color_realce));
+}
+
main#contido
{
flex: 1 0 auto;
@@ -330,9 +448,9 @@ footer#pe
padding: 1.25rem 0.625rem;
- color: rgb(var(--color_oscuro));
+ color: rgb(var(--texto_realce));
- background-color: rgb(var(--fondo_oscuro));
+ background-color: rgb(var(--color-pe));
}
footer#pe p
@@ -343,7 +461,7 @@ footer#pe p
footer#pe a
{
- color: rgb(var(--color_oscuro));
+ color: rgb(var(--texto_realce));
}
.contedor
@@ -396,12 +514,23 @@ footer#pe a
justify-content: space-between;
}
- header#cabeceira input[type="checkbox"],
+ header#cabeceira input#interruptor,
header#cabeceira .interruptor
{
display: none;
}
+ div#axustes
+ {
+ flex-direction: row;
+ gap: 20px;
+ }
+
+ div.tema
+ {
+ margin-top: 5px;
+ }
+
nav#menu
{
position: initial;
diff --git a/site/templates/js/main.js b/site/templates/js/main.js
index f87af3c..1460624 100644
--- a/site/templates/js/main.js
+++ b/site/templates/js/main.js
@@ -1 +1,80 @@
-// Blank
+const selector_tema = document.querySelector("#selector_tema");
+const preferencia_escura = window.matchMedia("(prefers-color-scheme: dark)");
+
+function getCookie()
+{
+ let name = "tema=";
+
+ let spli = document.cookie.split(';');
+
+ for(var j = 0; j < spli.length; j++)
+ {
+ let char = spli[j];
+
+ while (char.charAt(0) == ' ')
+ {
+ char = char.substring(1);
+ }
+ if(char.indexOf(name) == 0)
+ {
+ return char.substring(name.length, char.length);
+ }
+ }
+ return "";
+}
+
+function checkCookie()
+{
+ var tema = getCookie();
+
+ if(tema != "")
+ {
+ switch(tema)
+ {
+ case 'dark':
+ selector_tema.checked = true;
+ document.body.classList.add("dark");
+ document.body.classList.remove("light");
+ break;
+
+ case 'light':
+ document.body.classList.add("light");
+ document.body.classList.remove("dark");
+ break;
+ }
+ document.cookie = "tema=" + tema + ";samesite=lax;path=/";
+ }
+ else
+ {
+ if(preferencia_escura.matches)
+ {
+ selector_tema.checked = true;
+ document.body.classList.add("dark");
+ document.body.classList.remove("light");
+ document.cookie = "tema=dark;samesite=lax;path=/";
+ }
+ }
+}
+
+checkCookie();
+
+selector_tema.addEventListener("change", function()
+{
+ var tema = '';
+
+ switch(selector_tema.checked)
+ {
+ case true:
+ tema = 'dark';
+ document.body.classList.add("dark");
+ document.body.classList.remove("light");
+ break;
+
+ case false:
+ tema = 'light';
+ document.body.classList.add("light");
+ document.body.classList.remove("dark");
+ break;
+ }
+ document.cookie = "tema=" + tema + ";samesite=lax;path=/";
+});
\ No newline at end of file