Merge pull request #30 from lauechev/acerca-de

🥞 arreglos botones, margenes acerca de, color pagina menu activo, arreglo apagar luz

aplicaciones/www/fuente/componentes/Menu.astro

@@ -170,12 +170,13 @@ datosPaginas.set(paginas);
     right: 0;
     background-color: rgba(255, 245, 238, 0.6);
     opacity: 0;
-    z-index: 1;
+    z-index: -1;
     transition: opacity 0.45s ease-out;
+    pointer-events: none;
 
     &.visible {
-      //right: 100%;
       opacity: 1;
+      pointer-events: auto;
     }
   }
 
@@ -203,7 +204,9 @@ datosPaginas.set(paginas);
 
       &.actual {
         border: 1px dotted;
-        pointer-events: none;
+        background-color: var(--superficiePrimario);
+        color: var(--colorTexto);
+        //pointer-events: none;
       }
     }
 

aplicaciones/www/fuente/pages/index.astro

@@ -9,4 +9,9 @@ import Plantilla from '../plantillas/Plantilla.astro';
   </main>
 </Plantilla>
 
-<style lang="scss"></style>
+<style lang="scss">
+  main {
+    margin-left: 2vw;
+    pointer-events: auto;
+  }
+</style>

aplicaciones/www/fuente/scss/_componentes.scss

@@ -3,15 +3,19 @@
   font-family: var(--fuentePixeles);
   padding: 0.5em 1.3em;
   color: var(--colorTexto);
-  border: 4px solid var(--bordePrimario);
-  // border-bottom: 4px solid #a43dab;
-  // box-shadow: 0px 0px 0px 0px var(--bordeOscuro) inset;
+  border-right: 4px solid var(--bordeOscuro);
+  border-bottom: 4px solid var(--bordeOscuro);
+  background: var(--superficieClaro);
+  box-shadow: 2px 2px 0px 0px var(--bordePrimario) inset;
   cursor: pointer;
+  pointer-events: auto;
+  z-index: 10;
 
   &:active {
+    border-right: 4px solid var(--bordeOscuro);
+    border-bottom: 4px solid var(--bordeOscuro);
     background: var(--superficieOscura);
-    box-shadow: 4px 4px 0px 0px var(--bordeOscuro) inset;
-    border: 4px solid var(--bordePrimario);
+    box-shadow: 4px 4px 0px 0px #0e074a inset;
     color: var(--textoInvertido);
   }
 }

aplicaciones/www/fuente/scss/_variables.scss

@@ -1,18 +1,22 @@
 :root {
-  --colorTexto: var(--cobalto);
   --fuenteTitulos: 'Tourney', sans-serif;
   --fuentePixeles: 'Pixelify Sans', sans-serif;
   --fuenteIconos: 'Yarndings 12', system-ui;
   --fuenteTexto: 'Chivo Mono', monospace;
   --crema: #fff5ee;
   --cobalto: #0808ff;
   --blanco: #ffffff;
+  --azulOscuro: #0d0d96;
   --negro: #000000;
+  --azulMuyOscuro: #0e074a;
+  --colorTexto: var(--cobalto);
+  --textoInvertido: var(--crema);
   --superficiePrimario: var(--crema);
   --superficieClaro: var(--blanco);
   --superficieOscura: var(--cobalto);
   --bordePrimario: var(--cobalto);
   --bordeClaro: var(var(--blanco));
-  --textoInvertido: var(--crema);
-  --bordeOscuro: var(--negro);
+  --bordeOscuro: var(--azulOscuro);
+  --bordeNegro: var(--negro);
+  --bordeMuyOsucro: var(--azulMuyOscuro);
 }

aplicaciones/www/fuente/vistas/Predeterminada.astro

@@ -18,6 +18,8 @@ const { pagina } = Astro.props;
   .pagina {
     .contenidoPagina {
       padding: 2em;
+      margin-left: 15vw;
+      margin-right: 15vw;
     }
   }
 </style>