mirror of https://github.com/garritfra/garrit.xyz
Garrit Franke
3 years ago
5 changed files with 61 additions and 236 deletions
@ -1,90 +1,16 @@
|
||||
a:hover { |
||||
opacity: 1; |
||||
.blog__list { |
||||
&__post { |
||||
margin-bottom: 3em; |
||||
&__date { |
||||
color: $color-text-dark; |
||||
font-weight: 300; |
||||
|
||||
@media (prefers-color-scheme: light) { |
||||
color: $color-text-light; |
||||
} |
||||
a:hover li div.hero_image img { |
||||
opacity: 0.8; |
||||
transition: opacity 0.3s ease; |
||||
} |
||||
a:hover li .blog__info h2, |
||||
a:hover li .blog__info h3, |
||||
a:hover li .blog__info p { |
||||
transform: translateX(10px); |
||||
transition: transform 0.5s ease-out; |
||||
} |
||||
@media (prefers-reduced-motion) { |
||||
a:hover li .blog__info h2, |
||||
a:hover li .blog__info h3, |
||||
a:hover li .blog__info p { |
||||
transform: translateX(0px); |
||||
} |
||||
} |
||||
.hero_image { |
||||
width: 100%; |
||||
height: 33vh; |
||||
overflow: hidden; |
||||
background-color: #000; |
||||
} |
||||
.hero_image img { |
||||
object-fit: cover; |
||||
object-position: 50% 50%; |
||||
opacity: 1; |
||||
transition: opacity 0.3s ease; |
||||
min-height: 100%; |
||||
} |
||||
.blog__info { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding: 1.5rem 1.25rem; |
||||
transform: translateX(0px); |
||||
transition: transform 0.3s ease-in; |
||||
} |
||||
.blog__info h2, |
||||
.blog__info h3, |
||||
.blog__info p { |
||||
transform: translateX(0px); |
||||
transition: transform 0.5s ease-out; |
||||
} |
||||
li { |
||||
opacity: inherit; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: 38vh; |
||||
margin-bottom: 0; |
||||
} |
||||
h2 { |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
h3 { |
||||
margin-bottom: 1rem; |
||||
} |
||||
p { |
||||
max-width: 900px; |
||||
} |
||||
@media (min-width: 768px) { |
||||
li { |
||||
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; |
||||
} |
||||
h3 { |
||||
margin-bottom: 1.2rem; |
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
@ -1,3 +1,4 @@
|
||||
@import "header"; |
||||
@import "page"; |
||||
@import "footer"; |
||||
@import "blog-list"; |
||||
|
Loading…
Reference in new issue