Botón añadido al nav para abrir y cerrar el menú

[salamandradevs.site/.git] / themes / droda / assets / css / main.css

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index e664029e07643254827c6e6f8038c28d5e5ed8b5..52014616a6683b68a54d97f082b6ec275664774c 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -13,14 +13,17 @@
 
 * {
    box-sizing: border-box;
+   margin: 0;
+   padding: 0;
 }
 
 :root {
-   --bgColorDark: #242930;
+   --bgColorDark: #0e0e0e;
    --bgColorMidDark: #353b43;
    --bgColorLightDark: #4f5864;
    --bgColorLight: #D2D2D2;
    --globalScale: 1;
+   
 }
 
 h1 {
@@ -59,6 +62,7 @@ a:active {
 html {
    font-size: calc(62.5% * var(--globalScale));
    background-color: var(--bgColorLight);
+   height: 100%;
 }
 
 /* REGLAS DEL HOME */
@@ -71,8 +75,7 @@ body {
       "navbar"
       "main"
       "footer";
-   height: 100vh;
-   margin: 0;
+   height: 100%;
 }
 
 aside {
@@ -97,20 +100,88 @@ aside .item {
 }
 
 nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
    grid-area: navbar;
+   background-color: var(--bgColorDark);
+   width: 100%;
+}
+
+nav div:first-child {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
-   justify-content: space-between;
+   justify-content: flex-start;
    width: 100%;
-   padding: 0 2rem;
-   background-color: var(--bgColorLightDark);
+   margin-left: 1rem;
 }
 
+nav div img:first-child {
+   width: 3rem;
+}
+
+nav ul {
+   display: flex;
+   flex-flow: row nowrap;
+   align-items: center;
+   justify-content: flex-end;
+   list-style-type: none;
+   width: 100%;
+   height: 100%;
+   margin: 0;
+   padding: 0;
+   overflow: hidden;
+}
+
+.hover {
+   --c:linear-gradient(#1482c8 0 0); /* update the color here */
+
+   padding-bottom: .15em;
+   background: var(--c), var(--c);
+   background-size: .3em .1em;
+   background-position:50% 100%;
+   background-repeat: no-repeat;
+   transition: .3s linear, background-size .3s .2s linear;
+}
+
+.hover:hover {
+   background-size: 50% .1em;
+   background-position: 10% 100%, 90% 100%;
+}
+
+nav li {
+   display: flex;
+   align-items: center;
+   height: 100%;
+ }
+ 
+nav a {
+   display: block;
+   color: white;
+   text-align: center;
+   padding: 1rem 1.5rem;
+   text-decoration: none;
+ }
+
 main {
    grid-area: main;
    padding: 2rem;
    background-color: var(--bgColorMidDark);
+   background-image: url('../images/salamandra_margin.svg');
+   background-size: 10rem;
+   background-position-x: right;
+   background-position-y: bottom;
+   background-repeat: no-repeat;
+}
+
+/* Regla que aplica solo a firefox */
+@-moz-document url-prefix() {
+   main {
+      background-image: url('../images/salamandra.svg');
+      background-position-x: right 1rem;
+      background-position-y: bottom 1rem;
+   }
 }
 
 main hr {
@@ -145,6 +216,11 @@ main hr {
    padding: 0 0.3rem;
 }
 
+.content .highlight code {
+   white-space: pre-wrap;
+   overflow-x: auto;
+}
+
 footer {
    grid-area: footer;
    display: flex;
@@ -155,12 +231,34 @@ footer {
 }
 
 .greetings {
-   background-color: var(--bgColorMidDark);
    width: 80%;
    height: 80%;
    margin: 0 auto;
 }
 
+.boton-movil {
+   display: flex;
+   position: relative;
+   width: 4rem;
+   height: 4rem;
+   right: 0.4rem;
+
+   background-image: url('../images/menu.png');
+   background-color: transparent; /* Cuando usamos background-image se pone el background-color en blanco por default por eso le indicamos que sea transparente para que se pueda ver la imagen. */
+   background-position: top left;
+   background-repeat: no-repeat;
+   background-size: cover;
+
+   border: none;
+
+   transition: background-image ease 0.2s;
+
+}
+
+.boton-movil[data-visible="true"] {
+   background-image: url('../images/menu-abierto.png');
+}
+
 @media screen and (min-width: 780px) {
    :root {
       --globalScale: 1.5;
@@ -177,6 +275,11 @@ footer {
    aside {
       display: flex;
    }
+
+   .boton-movil {
+      display: none;
+   }
+   
 }
 
 @media screen and (min-width: 1280px) {