102 lines
1.6 KiB
CSS
102 lines
1.6 KiB
CSS
|
|
.post-card_main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
/* Style */
|
|
background-color: rgb(50, 50, 50);
|
|
border: 1px solid;
|
|
border-color: transparent;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
|
transition: 0.5s;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.post-card_main:hover {
|
|
box-shadow: 1px 3px 15px 2px black;
|
|
|
|
/* TODO: decide:
|
|
1. move up
|
|
transform:translate3d(0,-5px,0);
|
|
|
|
2. scale up
|
|
transform: scale(1.04);
|
|
|
|
3. scale down
|
|
transform: scale(0.96);
|
|
|
|
ATM: move up
|
|
*/
|
|
transform:translate3d(0,-5px,0);
|
|
}
|
|
|
|
.post-card_header {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
padding: 20px 30px 0;
|
|
}
|
|
|
|
.post-card_excerpt {
|
|
text-align: justify;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
a.post-card_main {
|
|
color: rgb(200, 200, 200);
|
|
}
|
|
|
|
.post-card_meta {
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
margin: 10px 5px 0;
|
|
color: rgb(180, 180, 180);
|
|
}
|
|
|
|
a.post-card_main:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer.post-card_footer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
margin-top: 20px;
|
|
justify-content: flex-end;
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
article {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.post-card_author-image {
|
|
border-radius: 100%;
|
|
margin-left: 10px;
|
|
max-width: 30px;
|
|
}
|
|
|
|
.post-card_feature-image {
|
|
|
|
/*
|
|
The following 3 statements are used
|
|
to make all images have the same size.
|
|
|
|
This has the downside of being relatively more difficult to scale,
|
|
so if you want to go back to normal viewing (full image)
|
|
only leave:
|
|
width: 100%;
|
|
*/
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 217px;
|
|
max-height: 100%;
|
|
|
|
|
|
border-radius: 5px;
|
|
}
|