181 lines
3.1 KiB
CSS
Executable File
181 lines
3.1 KiB
CSS
Executable File
@charset "utf-8";
|
|
/* CSS Document */
|
|
|
|
h1 {
|
|
font-size: 90px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.mind-site-title {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
|
background-size: 1000%, 100%;
|
|
animation: gradient 7s linear infinite;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
.mind-site-title h1 {
|
|
margin-top: 100px;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-secondary {
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
|
|
background-color: rgb(50, 50, 50);
|
|
}
|
|
|
|
.navbar-secondary li {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
font-family: 'Oswald', sans-serif;
|
|
font-weight: 300;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.navbar-secondary a {
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.mind-feed_main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 30px;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.post-card_main {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 400;
|
|
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: 18px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.post-card_tag {
|
|
color: #3fd5ff;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* ARROW BOUNCE */
|
|
@keyframes bounce {
|
|
0% { top: 94%; }
|
|
50% { top: 92%; }
|
|
100% { top: 94%; }
|
|
}
|