Cambiando nombre de clase hover a .nav-items

[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 1576bc9fda73731a80a22fc0661f101d0ba6f8c6..6e3c30cb25f31b8e8b726a80c02ee084d17c8638 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -22,8 +22,10 @@
    --bgColorMidDark: #353b43;
    --bgColorLightDark: #4f5864;
    --bgColorLight: #D2D2D2;
+   --bgColorBlue: #1b6694;
+   --bgColorSalamandra: rgb(236, 162, 143);
    --globalScale: 1;
-   
+   --navLinkColor: linear-gradient(#1482c8 0 0);
 }
 
 h1 {
@@ -57,6 +59,7 @@ a:hover,
 a:active {
    text-decoration: none;
    font-size: 1.5rem;
+   color: var(--bgColorSalamandra);
 }
 
 html {
@@ -78,20 +81,32 @@ body {
    height: 100%;
 }
 
+::-webkit-scrollbar {
+   width: 0.35rem;
+}
+
+::-webkit-scrollbar-thumb {
+   background-color: var(--bgColorBlue);
+}
+
 aside {
-   position: absolute;
-   inset: 0 50%;
+   position: fixed;
+   inset: 0 calc(100% - 18rem);
    grid-area: aside;
    display: none;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
-   width: 50%;
-   padding: 0 1rem;
+   width: 18rem;
+   height: calc(100% - 5rem);
+   margin-top: 5rem;
+   padding: 2rem 1rem;
    background-color: var(--bgColorDark);
+   overflow: auto;
 }
 
-aside .item {
+aside > div, li {
+   color: var(--bgColorLight);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
@@ -136,18 +151,16 @@ nav ul {
    overflow: hidden;
 }
 
-.hover {
-   --c:linear-gradient(#1482c8 0 0); /* update the color here */
-
+.nav-items {
    padding-bottom: .15em;
-   background: var(--c), var(--c);
+   background: var(--navLinkColor), var(--navLinkColor);
    background-size: .3em .1em;
    background-position:50% 100%;
    background-repeat: no-repeat;
    transition: .3s linear, background-size .3s .2s linear;
 }
 
-.hover:hover {
+.nav-items:hover {
    background-size: 50% .1em;
    background-position: 10% 100%, 90% 100%;
 }
@@ -180,6 +193,7 @@ nav button {
    background-size: cover;
 
    border: none;
+   cursor: pointer;
 
    transition: background-image ease 0.2s;
 
@@ -267,10 +281,10 @@ footer {
    }
 
    body {
-      grid-template-columns: 11rem 1fr;
+      grid-template-columns: 13rem 1fr;
       grid-template-areas: /* Tabletas se muestra el aside */
         "navbar navbar"
-        "aside main"
+        "main main"
         "footer footer";
    }
 
@@ -279,10 +293,7 @@ footer {
    }
 
    aside {
-      display: flex;
-      position: relative;
-      width: 100%;
-      inset: 0;
+      display: none;
    }
    
    nav button, aside li a {