Creando variables de colores y reasignando

[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 624e642d36b155c4783b30ca1e7fa7f7660eb25a..6c05dbec7782dbe5dece77360378b389c2624df7 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -13,6 +13,8 @@
 
 * {
    box-sizing: border-box;
+   margin: 0;
+   padding: 0;
 }
 
 :root {
@@ -20,7 +22,9 @@
    --bgColorMidDark: #353b43;
    --bgColorLightDark: #4f5864;
    --bgColorLight: #D2D2D2;
+   --navbarHoverColor: #111;
    --globalScale: 1;
+   
 }
 
 h1 {
@@ -59,6 +63,7 @@ a:active {
 html {
    font-size: calc(62.5% * var(--globalScale));
    background-color: var(--bgColorLight);
+   height: 100%;
 }
 
 /* REGLAS DEL HOME */
@@ -72,7 +77,6 @@ body {
       "main"
       "footer";
    height: 100%;
-   margin: 0;
 }
 
 aside {
@@ -98,19 +102,50 @@ aside .item {
 
 nav {
    grid-area: navbar;
+   background-color: var(--bgColorLightDark);
+   width: 100%;
+}
+
+nav ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
-   justify-content: space-between;
+   justify-content: flex-start;
+   list-style-type: none;
    width: 100%;
-   padding: 0 2rem;
-   background-color: var(--bgColorLightDark);
+   height: 100%;
+   margin: 0;
+   padding: 0;
+   overflow: hidden;
 }
 
+nav li {
+   display: flex;
+   align-items: center;
+   height: 100%;
+ }
+ 
+nav a {
+   display: block;
+   color: white;
+   text-align: center;
+   padding: 14px 16px;
+   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-size: 10rem;
+   background-position-x: right;
+   background-position-y: bottom;
+   background-repeat: no-repeat;
 }
 
 main hr {
@@ -155,7 +190,6 @@ footer {
 }
 
 .greetings {
-   background-color: var(--bgColorMidDark);
    width: 80%;
    height: 80%;
    margin: 0 auto;