singularity/styles.css

72 lines
1.3 KiB
CSS
Raw Normal View History

2024-07-16 20:56:05 +02:00
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
@media only screen and (min-width: 800px) {
2024-07-11 21:41:34 +02:00
/* For bigger than phones */
2024-07-11 22:19:51 +02:00
#post-container {
max-width: 800px;
2024-07-11 22:19:51 +02:00
}
#loader {
max-width: 800px;
2024-07-11 21:41:34 +02:00
}
2024-07-11 21:13:17 +02:00
}
2024-07-11 23:53:45 +02:00
#post-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-inline: auto;
width: 100%;
}
2024-07-11 22:19:51 +02:00
.post {
2024-07-11 21:41:34 +02:00
width: calc(100% - 16px);
2024-07-11 21:13:17 +02:00
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
}
2024-07-11 22:19:51 +02:00
.post:hover {
2024-07-11 21:13:17 +02:00
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
2024-07-11 22:19:51 +02:00
.post-actions {
2024-07-11 21:13:17 +02:00
margin: 8px;
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#loader {
display: flex;
2024-07-11 22:19:51 +02:00
justify-content: center;
margin-inline: auto;
2024-07-11 21:13:17 +02:00
}
2024-07-11 22:19:51 +02:00
.skeleton-post {
2024-07-11 21:13:17 +02:00
height: 55vh;
2024-07-11 21:41:34 +02:00
width: calc(100% - 16px);
2024-07-11 21:13:17 +02:00
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
position: relative;
background-color: #eaeaea;
}
2024-07-11 22:19:51 +02:00
.skeleton-post::after {
2024-07-11 21:13:17 +02:00
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
}