LA STORIA
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,700');
$white: #fff;
$black: #2e2e2e;
$gray: #787878;
$highlight: #ea8478;
$footer: #f7f7f7;
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
body {
font-family: 'Barlow', sans-serif;
font-size: 1.125rem;
line-height: 1.5;
color: $gray;
background: $white;
text-rendering: optimizeLegibility;
}
ul li {
margin: 0 1.5rem 0 0;
}
a {
color: $gray;
text-decoration: none;
transition: all 0.2s ease;
&:hover {
color: $black;
}
&.active {
color: $black;
}
}
nav {
padding: 2.5rem 0 2.5rem 0;
ul {
display: flex;
justify-content: flex-start;
}
li {
font-size: 1.25rem;
&:nth-child(2) {
margin: 0;
}
}
}
#highlight {
color: $highlight;
font-size: 1.25rem;
}
.gallery {
padding: 0 0 4rem 0;
}
.img-container {
width: 100%;
height: 500px;
cursor: pointer;
overflow: hidden;
&:hover .img-content-hover {
display: block;
}
}
img {
width: 100%;
height: 500px;
object-fit: cover;
transform: scale(1);
transition: all 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
}
}
.img-content-hover {
position: absolute;
z-index: 1;
white-space: nowrap;
display: none;
padding: 1rem;
background: $white;
font-weight: 400;
margin-top: 1.25rem;
margin-left: -2rem;
}
.title {
color: $black;
font-size: 1.5rem;
font-weight: 700;
}
.category {
font-size: 1rem;
color: $gray;
}
.img-content {
display: none;
}
.social, .copyright {
margin: 1rem;
}
.social li {
display: inline-block;
}
footer {
padding: 1rem 0;
background: $footer;
text-align: center;
}
@supports (display: grid) {
.gallery .grid {
grid-gap: 1rem;
}
}
@media(min-width: $md) {
nav ul {
justify-content: flex-end;
}
}
@media screen and (max-width: 1024px) {
img:hover {
transform: none;
}
.img-container {
height: 100%;
&:hover .img-content-hover {
display: none;
}
}
.img-content {
display: block;
padding: 1rem 0;
}
}