responsive css, better styling

miermontoto · Sep 9, 2023 · 9f57de0 · 9f57de0
1 parent a92f9e8
commit 9f57de0
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/src/components/Timer.scss b/src/components/Timer.scss
@@ -8,40 +8,49 @@
 
 #timer {
 	flex-direction: row;
-}
 
-#timer span {
-	font-size: 4em;
-}
+	span {
+		font-size: min(10vw, 5em);
+	}
 
-div {
-	margin: 1em;
-}
+	> span:first-child {
+		margin-right: 0.5em;
+	}
 
-#timer > span:first-child {
-	margin-right: 0.5em;
-}
+	.stop { // not on schedule
+		color: gray;
+		font-style: italic;
+	}
 
-.stop {
-	color: gray;
-	font-style: italic;
+	.coffee { // coffee break
+		color: #b5651d;
+	}
 }
 
-.coffee {
-	color: #b5651d;
+div {
+	margin: 1em;
 }
 
 #info {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-left: 25%;
-	margin-right: 25%;
+	margin-left: 5svw;
+	margin-right: 5svw;
+	font-size: min(4vw, 1em);
+
+	> span {
+		margin: 0.25em;
+	}
+
+	> span:first-child {
+		margin-right: 1.5em;
+	}
 }
 
 .info-left {
 	font-weight: bolder;
-	margin-right: 1em;
+	margin-right: min(2em, 2vw);
 }
 
 .info-right {