From 1fb770080ddc9333f728f04e55200a8c2d813267 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Fri, 18 Mar 2022 19:11:05 +0100
Subject: [PATCH] Tweak some mobile styles

---
 src/styles/components/_form-elements.scss | 21 +++++++++++++++++----
 src/styles/components/_markup.scss        |  4 ++--
 src/styles/lib/_layout.scss               |  9 +++++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/styles/components/_form-elements.scss b/src/styles/components/_form-elements.scss
index c83b5aa..0aad0f2 100644
--- a/src/styles/components/_form-elements.scss
+++ b/src/styles/components/_form-elements.scss
@@ -6,7 +6,13 @@
 %form-item {
 	@extend %narrow-content-gutter;
 	display: flex;
-	align-items: center;
+	flex-direction: column;
+	align-items: stretch;
+
+	@media screen and (min-width: layout.$breakpoint) {
+		flex-direction: row;
+		align-items: center;
+	}
 }
 
 %form-label {
@@ -42,14 +48,22 @@
 	> span {
 		@extend %form-label;
 		flex-grow: 1;
-		text-align: right;
+
+		@media screen and (min-width: layout.$breakpoint) {
+			text-align: right;
+		}
 	}
 
 	> input,
 	> textarea {
 		@extend %form-input;
 		flex-basis: 60%;
-		margin-left: layout.$normal-gap;
+		margin-top: layout.$small-gap;
+
+		@media screen and (min-width: layout.$breakpoint) {
+			margin-top: 0;
+			margin-left: layout.$normal-gap;
+		}
 	}
 }
 
@@ -95,7 +109,6 @@
 .form-submit {
 	@extend %form-item;
 	justify-content: flex-end;
-	margin: layout.$huge-gap auto;
 
 	> input {
 		@extend %form-input;
diff --git a/src/styles/components/_markup.scss b/src/styles/components/_markup.scss
index 96330e1..edf9a77 100644
--- a/src/styles/components/_markup.scss
+++ b/src/styles/components/_markup.scss
@@ -9,7 +9,7 @@ body {
 }
 
 %title {
-	@extend %content;
+	@extend %content-gutter;
 	margin-top: layout.$huge-gap;
 	margin-bottom: layout.$large-gap;
 	font-size: typography.$title-size;
@@ -22,7 +22,7 @@ h1 {
 }
 
 %heading {
-	@extend %content;
+	@extend %content-gutter;
 	margin-top: layout.$large-gap;
 	margin-bottom: layout.$large-gap;
 	font-size: typography.$heading-size;
diff --git a/src/styles/lib/_layout.scss b/src/styles/lib/_layout.scss
index f1e65cc..58b4cac 100644
--- a/src/styles/lib/_layout.scss
+++ b/src/styles/lib/_layout.scss
@@ -17,8 +17,13 @@ $wide-content-width: 80rem;
 }
 
 %narrow-content-gutter {
-	margin: $normal-gap auto;
-	max-width: $narrow-content-width;
+	margin: $normal-gap $normal-gap;
+
+	@media screen and (min-width: $breakpoint) {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: $narrow-content-width;
+	}
 }
 
 %content {