finetuning segmented buttons

LukaHarambasic · Mar 4, 2024 · cfbd5d4 · cfbd5d4
1 parent e219a5d
commit cfbd5d4
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
@@ -40,6 +40,10 @@
 	border-radius: var(--border-radius-small);
 	background: var(--c-surface);
 	overflow: hidden;
+	@media screen and (max-width:30rem) {
+		width: 100%;
+		flex-direction: column;
+	}
 	.button {
 		transition: var(--transition);
 		margin: 0;
@@ -54,6 +58,7 @@
 		font-family: var(--font-family);
 		letter-spacing: var(--font-letter-spacing-headline);
 		text-decoration: none;
+		text-align: center;
 		&:hover {
 			cursor: pointer;
 			background: var(--c-surface-accent);
@@ -62,6 +67,13 @@
 		&:last-child {
 			border-right: none;
 		}
+		@media screen and (max-width:30rem) {
+			width: 100%;
+			border-right: none;
+			&:not(:last-child) {
+				border-bottom: 1px solid var(--c-surface-accent);
+			}
+		}
 	}
 }