Template:Library homepage/style.css - Revision history

CriticalResist: card title: font size 1.2rem -> 1.1rem for new library

2026-06-14T19:15:23Z

card title: font size 1.2rem -> 1.1rem for new library

2025-09-23T16:00:22Z

mid cards sized down for mobile too. might still have to do some more fine-tuning

@@ Line 8: / Line 8: @@
 	gap:20px 8px;
 	margin-top:20px;
+}
@@ Line 322: / Line 326: @@
 		top:0!important;
 		left:0!important;
+	}

2025-09-23T15:41:31Z

some more mobile finicking

← Older revision		Revision as of 15:41, 23 September 2025
Line 311:		Line 311:
	.library-container{		.library-container{
	align-items:stretch;		align-items:stretch;
			gap:15px 2%;
	}		}

	.library-card{		.library-card{
	width:44%;		width:44%;
			box-shadow:2px 1px 4px 1px gray;
	}		}
	.library-card .library-card-image{		.library-card .library-card-image{

2025-09-23T15:36:22Z

46 to 44 width on mobile ensures 2 get displayed even on smallest scrrens

← Older revision		Revision as of 15:36, 23 September 2025
Line 314:		Line 314:

	.library-card{		.library-card{
	width:46%;		width:44%;
	}		}
	.library-card .library-card-image{		.library-card .library-card-image{

2025-09-23T15:30:17Z

all images on big cards now fit the container automatically so there is no need for custom offsetting

← Older revision		Revision as of 15:30, 23 September 2025
Line 320:		Line 320:
	top:0!important;		top:0!important;
	left:0!important;		left:0!important;
	}

	~~.library-card img{~~
	~~width:100%;~~
	~~height:100%;~~
	~~object-fit:cover;~~
	~~transform:scale(1); /undoing scale in non-mobile view/~~
	}		}

2025-09-23T15:29:11Z

let's try to handle all images with object-fit cover and not just on mobile.

← Older revision		Revision as of 15:29, 23 September 2025
Line 35:		Line 35:

	.library-card .library-card-image img{		.library-card .library-card-image img{
	width:~~auto~~;		width:100%;
	height:100%;		height:100%;
			object-fit:cover;
	transform: scale(1.1);		transform: scale(1.1);
	overflow:hidden;		overflow:hidden;

2025-09-23T15:27:45Z

image display fix on mobile

← Older revision		Revision as of 15:27, 23 September 2025
Line 319:		Line 319:
	top:0!important;		top:0!important;
	left:0!important;		left:0!important;
			}

			.library-card img{
			width:100%;
			height:100%;
			object-fit:cover;
			transform:scale(1); /undoing scale in non-mobile view/
	}		}

2025-09-23T15:25:06Z

big cards on mobile -> 2 per row instead of 1, height of card expressed as ratio to fit in with width

← Older revision		Revision as of 15:25, 23 September 2025
Line 308:		Line 308:
	/* MOBILE STYLING */		/* MOBILE STYLING */
	@media only screen and (max-width: 768px) {		@media only screen and (max-width: 768px) {
			.library-container{
			align-items:stretch;
			}

			.library-card{
			width:46%;
			}
			.library-card .library-card-image{
			height:50vw;
			top:0!important;
			left:0!important;
			}

	.library-container-mini > p{ /* the every other row bug happens here too, but they're just empty <p> tags. Fixed with this. */		.library-container-mini > p{ /* the every other row bug happens here too, but they're just empty <p> tags. Fixed with this. */
	display:none;		display:none;
	}		}

	.library-card-mini > p{ /* reduce space between mini cards on mobile so we can fit more in the viewport */		.library-card-mini > p{ /* reduce space between mini cards on mobile so we can fit more in the viewport */
	margin:0;		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 */		.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;		height:50px;

2025-09-11T19:15:27Z

2024-10-09T23:29:43Z