ewinderickx/Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated to Next.js 13

Browse Source
This commit is contained in:
Antonello Zanini
2022-11-18 13:54:54 +01:00
commit 0eae94dbe6
40 changed files with 6381 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
styles/BlogList.module.css Normal file
View File

@@ -0,0 +1,88 @@
.blog__link {
opacity: 0.7;
}
.blog__link:hover {
opacity: 1;
}
li .blog__link:hover div.hero_image img {
opacity: 0.8;
transition: opacity 0.3s ease;
}
li .blog__link:hover .blog__info h2,
li .blog__link:hover .blog__info h3,
li .blog__link:hover .blog__info p {
transform: translateX(10px);
transition: transform 0.5s ease-out;
}
.hero_image {
width: 100%;
height: 33vh;
overflow: hidden;
background-color: #000;
}
.hero_image img {
object-fit: cover;
opacity: 1;
min-height: 100%;
width: 100%;
transition: opacity 0.3s ease;
}
.blog__info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 1.25rem;
transform: translateX(0px);
transition: transform 0.3s ease-in;
border-bottom: 1px solid #ebebeb;
}
.blog__info h2,
.blog__info h3,
.blog__info p {
transform: translateX(0px);
transition: transform 0.5s ease-out;
}
li .blog__link {
opacity: inherit;
display: flex;
justify-content: center;
flex-direction: column;
min-height: 38vh;
margin-bottom: 0;
}
.blog__info h2 {
margin-bottom: 0.5rem;
}
.blog__info h3 {
margin-bottom: 1rem;
}
.blog__info p {
max-width: 900px;
}
@media (min-width: 768px) {
li .blog__link {
min-height: 250px;
height: 33.333vh;
flex-direction: row;
}
.hero_image {
height: 100%;
}
.hero_image img {
min-width: 100%;
height: 100%;
width: auto;
min-height: 0;
}
.blog__info {
min-width: 70%;
}
}
@media (min-width: 1280px) {
.blog__info {
padding: 3rem;
}
.blog__info h3 {
margin-bottom: 1.2rem;
}
}