ktyl/singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: make cards single-column

Browse Source
This commit is contained in:
ktyl 2024-07-11 20:41:34 +01:00
parent 6731fe212c
commit ef58ed4af3
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -10,8 +10,6 @@
<!-- loader displays an animation before adding the next batch of cards --> <!-- loader displays an animation before adding the next batch of cards -->
<div id="loader"> <div id="loader">
<div class="skeleton-card"></div> <div class="skeleton-card"></div>
<div class="skeleton-card"></div>
<div class="skeleton-card"></div>
</div> </div>
<!-- card actions shows the card count and card total (we probably do not need this) --> <!-- card actions shows the card count and card total (we probably do not need this) -->

14
styles.css
View File

@ -1,11 +1,21 @@
#card-container { #card-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
margin-inline: auto;
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For bigger than phones */
#card-container {
max-width: 600px !important;
}
} }
.card { .card {
height: 55vh; height: 55vh;
width: calc((100% / 3) - 16px); width: calc(100% - 16px);
margin: 8px; margin: 8px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
@ -32,7 +42,7 @@
.skeleton-card { .skeleton-card {
height: 55vh; height: 55vh;
width: calc((100% / 3) - 16px); width: calc(100% - 16px);
margin: 8px; margin: 8px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;