añadidas propiedades flexbox align items y justify content a nav div

[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 6c05dbec7782dbe5dece77360378b389c2624df7..3e3e54bb572621b2870cc64c20a15feeceb3f65a 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -18,11 +18,10 @@
 }
 
 :root {
-   --bgColorDark: #242930;
+   --bgColorDark: #0e0e0e;
    --bgColorMidDark: #353b43;
    --bgColorLightDark: #4f5864;
    --bgColorLight: #D2D2D2;
-   --navbarHoverColor: #111;
    --globalScale: 1;
    
 }
@@ -101,16 +100,27 @@ aside .item {
 }
 
 nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
    grid-area: navbar;
-   background-color: var(--bgColorLightDark);
+   background-color: var(--bgColorDark);
+   width: 100%;
+}
+
+nav div {
+   display: flex;
+   flex-flow: nowrap;
    width: 100%;
+   align-items: center;
+   justify-content: start;
 }
 
 nav ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
-   justify-content: flex-start;
+   justify-content: flex-end;
    list-style-type: none;
    width: 100%;
    height: 100%;
@@ -119,6 +129,22 @@ nav ul {
    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;
@@ -129,25 +155,30 @@ nav a {
    display: block;
    color: white;
    text-align: center;
-   padding: 14px 16px;
+   padding: 1rem 1.5rem;
    text-decoration: none;
  }
- 
- nav li:hover {
-   background-color: var(--navbarHoverColor);
- }
 
 main {
    grid-area: main;
    padding: 2rem;
    background-color: var(--bgColorMidDark);
-   background-image: url('../images/salamandra.svg');
+   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 {
    width: 100%;
 }
@@ -180,6 +211,11 @@ main hr {
    padding: 0 0.3rem;
 }
 
+.content .highlight code {
+   white-space: pre-wrap;
+   overflow-x: auto;
+}
+
 footer {
    grid-area: footer;
    display: flex;