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

From Space Station 14 Wiki
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
Aliser (talk | contribs)
make margin consistent
 
Line 10: Line 10:
.reagents-list > .reagent-card {
.reagents-list > .reagent-card {
box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
}


Line 21: Line 22:
.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: calc(50% - var(--gap) / 2);
flex-basis: var(--flex-basis);
flex-basis: var(--flex-basis);
}
}
}
}

Latest revision as of 18:39, 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;
	margin: 0;
}

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

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