More languages
More actions
No edit summary |
No edit summary |
||
Line 9: | Line 9: | ||
} */ | } */ | ||
/* --------- grid | /* --------- grid styling -----------*/ | ||
/* it's weird but for some reason this grid specifically | /* it's weird but for some reason this grid specifically | ||
only wants to use 1 column out of 2, so I just added | only wants to use 1 column out of 2, so I just added | ||
Line 23: | Line 23: | ||
} | } | ||
/* resize grid on mobile so there's only one column */ | |||
@media only screen and (max-width: 720px) { | |||
.library-container-mini{ | |||
grid-template-columns:1fr; | |||
} | |||
} | |||
/* everything else for this template */ | |||
.library-card-mini-content{ | .library-card-mini-content{ | ||
display: inline-grid; | display: inline-grid; |
Revision as of 21:37, 21 July 2023
/* ----- flex styling ------ */
/*
.library-container-mini{
display: flex;
flex-flow: row wrap;
justify-content:space-between;
gap: 0 20px;
width:100%;
} */
/* --------- grid styling -----------*/
/* it's weird but for some reason this grid specifically
only wants to use 1 column out of 2, so I just added
empty columns in between the actual ones and reduced
the gap by half (10px instead of 20px) because these
empty columns still apply their gap. ¯\_(ツ)_/¯
*/
.library-container-mini{
display:grid;
grid-template-columns: repeat(4, 1fr 0fr);
grid-gap: 0 10px;
width:100%;
}
/* resize grid on mobile so there's only one column */
@media only screen and (max-width: 720px) {
.library-container-mini{
grid-template-columns:1fr;
}
}
/* everything else for this template */
.library-card-mini-content{
display: inline-grid;
grid-template-columns: 45px 155px;
grid-template-rows: 1fr;
height:75px;
overflow:hidden; /* you get three lines of text, no more */
align-items:center;
}
.library-card-mini img{
height:35px;
width:35px;
object-fit:cover;
border-radius:5px;
transform:scale(1); /* cancels the scale-in effect that the library cards have*/
}
.library-card-mini img:hover{
transform:scale(1);
}
.library-card-mini-text{
grid-column-start:2;
grid-column-end:3;
}
.library-card-mini-title{
height:0;
width:0;
position:relative;
}
.library-card-mini-TOC{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}