* {
box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
:root {
- --bgColorDark: #242930;
+ --bgColorDark: #0e0e0e;
--bgColorMidDark: #353b43;
--bgColorLightDark: #4f5864;
--bgColorLight: #D2D2D2;
"main"
"footer";
height: 100%;
- margin: 0;
}
aside {
}
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%;
margin: 0;
padding: 0;
overflow: hidden;
- background-color: #333;
+}
+
+.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: block;
color: white;
text-align: center;
- padding: 14px 16px;
+ padding: 1rem 1.5rem;
text-decoration: none;
}
-
- nav li:hover {
- background-color: #111;
- }
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%;
}
padding: 0 0.3rem;
}
+.content .highlight code {
+ white-space: pre-wrap;
+ overflow-x: auto;
+}
+
footer {
grid-area: footer;
display: flex;