Template:Reagent cards/styles.css: Difference between revisions

From Space Station 14 Wiki
Aliser (talk | contribs)
typo
Aliser (talk | contribs)
media query between flex grow (1 col) and flex basis (2 (or more?) cols) - someone with a wide monitor or just big monitor but small scale please test that it looks okay
Line 10: Line 10:
.reagents-list > .reagent-card {
.reagents-list > .reagent-card {
box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
--flex-basis: calc(50% - var(--gap) / 2);
 
flex-basis: var(--flex-basis);
@media (max-width: 900px) {
.reagents-list > .reagent-card {
flex-grow: 1;
}
}
 
@media (min-width: 900px) {
.reagents-list > .reagent-card {
box-sizing: border-box;
margin: 0;
--flex-basis: calc(50% - var(--gap) / 2);
flex-basis: var(--flex-basis);
}
}
}

Revision as of 15:35, 26 May 2025

.reagents-list {
	--gap: 1rem;
	
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.reagents-list > .reagent-card {
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.reagents-list > .reagent-card {
		flex-grow: 1;
	}
}

@media (min-width: 900px) {
	.reagents-list > .reagent-card {
		box-sizing: border-box;
		margin: 0;
		--flex-basis: calc(50% - var(--gap) / 2);
		flex-basis: var(--flex-basis);
	}
}