singularity/styles.css

93 lines
1.7 KiB
CSS
Raw Normal View History

2024-07-11 23:53:45 +02:00
#home {
position: fixed;
top: 0;
left: 0;
}
/* TODO: deal with visibility when screen cuts off left side */
/* TODO: how do we show the profile on mobile */
#profile {
/* profile starts hidden */
visibility: hidden;
position: fixed;
right: calc(50% + 300px + 8px);
left: auto;
top: 16px;
height: 600px;
2024-07-11 21:41:34 +02:00
width: 100%;
2024-07-11 23:53:45 +02:00
max-width: 300px;
background-color: red;
2024-07-11 21:41:34 +02:00
}
@media only screen and (min-width: 768px) {
/* For bigger than phones */
2024-07-11 23:53:45 +02:00
#profile {
visibility: visible;
}
2024-07-11 22:19:51 +02:00
#post-container {
max-width: 600px;
}
#loader {
max-width: 600px;
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: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;
}
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));
}