Modelo:Library homepage/style.css

/* STYLING FULL AND MID LIBRARY CARD CONTAINER */ .library-container{ width:100%; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; gap:20px 10px; margin-top:20px; }

/* styling full-size library cards */ .library-card{ width:200px; padding:0; border:1px gray solid;

   border-radius:10px 10px 4px 4px;
   overflow:hidden;
   z-index:10;
   box-shadow: 3px 1px 8px 1px gray;

transition: box-shadow 0.4s, transform 0.4s; }

.library-card:hover{ box-shadow: 5px 4px 11px 3px #666; transform:scale(1.02); }

.library-card .library-card-image { height:300px; padding:0; margin:0; z-index:-1; }

.library-card .library-card-image img{ width:auto; height:100%; transform: scale(1.1); overflow:hidden; padding:0; margin:0; transition: transform 0.4s, filter 0.4s; z-index:-1; filter:grayscale(1); }

.library-card .library-card-image img:hover{ transform:scale(1.15); filter:grayscale(0.3); }

/*Common to full and mid size*/ .library-card-TOC{

 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 visibility: hidden;

}

.library-card-content{ padding:15px 2px; margin:0; text-align:center; display:block; z-index:10; overflow:hidden; position:relative; }

.library-card .library-card-content{ border-top:1px solid gray; }

.library-card-content p{ line-height:0.1rem; }

.library-card-title{ font-size:1.2rem; font-weight:normal; }

.library-card-works{ font-size:0.8rem; }

.library-card-works,.library-card-title, .library-card p, .library-card-mid p{ display:inline; }

/*styling mid-size library card*/ .library-card-mid{ width:150px; padding:0; /*border:1px gray solid;*/

   /*border-radius:10px 10px 4px 4px;*/
   overflow:hidden;
   z-index:10;
   /*box-shadow: 3px 1px 6px 1px gray;*/

transition: box-shadow 0.4s, transform 0.4s; }

.library-card-mid:hover{ /*box-shadow: 5px 4px 11px 3px #666;*/ transform:scale(1.02); }

.library-card-mid .library-card-image { height:150px; padding:0; margin:0; z-index:-1; display:flex; align-items:center; justify-content:center; clip-path: inset(0 round 10px); /*makes rounded edges, for some reason border-radius doesn't want to work*/ }

.library-card-mid .library-card-image img{ width:100%; height:auto; transform: scale(1.1); overflow:hidden; padding:0; margin:0; transition: transform 0.4s, filter 0.4s; z-index:-1; filter:grayscale(1); }

.library-card-mid .library-card-image img:hover{ filter:grayscale(0.3); }

.library-card-mid .library-card-works{ font-size:1rem; }

/* STYLING MINI LIBRARY CARD CONTAINER */ .library-container-mini{ display: flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; width:100%; margin-top:20px; gap:30px 40px; }

/* styling mini library cards */ .library-card-mini{ width:100px; }

.library-card-mini-content{ height:75px; overflow:hidden; /* you get three lines of text, no more */ }

.library-card-mini-image{ width:100%; height:50px; overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:5px; gap:0; }

.library-card-mini img{ height:auto; width:100px; object-fit:cover; overflow:hidden; padding:0; margin:0; transition: filter 0.4s; z-index:-1; filter:grayscale(1); transform:scale(1); /* cancels any scale-in effect that may apply*/ }

.library-card-mini img:hover{ filter:grayscale(0.3); }

.library-card-mini-text{ text-align:center; }

.library-card-mini-title{ height:0; width:0; position:relative; }

.library-card-mini-TOC{

 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
 visibility: hidden;

}

/* MOBILE STYLING */ /*should've really done mobile first so I don't repeat code all over but oh well*/ @media only screen and (max-width: 768px) {

.library-container-mini > p{ /* the every other row bug happens here too, but they're just empty

tags. Fixed with this. */ display:none; } .library-card-mini > p{ /* reduce space between mini cards on mobile so we can fit more in the viewport */ margin:0; } .library-card-mini-content{ /* also reduces space between mini cards now that there is no margin. Calculated to fit 3 lines of text */ height:50px; line-height:1; } }