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;
- overflow-y: auto;
}
/* Regla que aplica solo a firefox */
}
.greetings {
+
width: 80%;
- height: 80%;
margin: 0 auto;
}
-.index {
- background-color: var(--bgColorMidDark);
- background-image: url('../images/salamandra_margin.svg');
- background-position-x: center;
- background-position-y: 2rem;
- background-repeat: no-repeat;
- background-size: var(--backgroundImageSize);
+.greetings img {
+ width: 8rem;
+ margin: 0 auto;
+}
+
+.greetings p {
+ padding-top: 3rem;
}
@media screen and (max-width: 480px) {
}
}
+/* Los media query aplican a partir de este temaño hacia arriba.
+ Recordemos que estamos aplicando filosofía de móviles primero */
@media screen and (min-width: 840px) {
:root {
--globalScale: 1.5;
main div > article {
max-width: 30rem;
}
+
+ .greetings img {
+ width:9rem;
+ }
}
main div article {
width: calc(30% - 2rem);
-
+
max-height: 15rem;
min-height: 15rem;
min-width: 10rem;
main div article p, a{
font-size: 1rem;
}
+
+ .greetings img {
+ width:10rem;
+ }
}
{{ "<!-- Partial block for navbar -->" | safeHTML }}
<nav>
{{ with .Site.GetPage "home" }}
- <div><img src="{{ .Params.homeIcon | absURL }}" alt=""><a class="nav-items" href="{{ .Permalink }}">{{ .Title }}</a></div>
+ <div><img src="{{ .Params.homeIcon | absURL }}" alt="Home icon"><a class="nav-items" href="{{ .Permalink }}">{{ .Title }}</a></div>
{{ end }}
<ul>
{{ range .Site.Sections }}