Mix mobile styles

3 files changed, 33 insertions, 5 deletions

diff --git a/assets/css/base.scss b/assets/css/base.scss
index 6fa6990..ddfed8f 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -16,6 +16,7 @@ body {
 
 body {
 	min-height: 100vh;
+	max-width: 100vw;
 	display: flex;
 	flex-direction: column;
 }
diff --git a/assets/css/partials/article.scss b/assets/css/partials/article.scss
index b4fdda8..91c79db 100644
--- a/assets/css/partials/article.scss
+++ b/assets/css/partials/article.scss
@@ -1,9 +1,10 @@
 main {
-	max-width: 65ch;
 	margin: 0 auto 3rem;
-	width: 100%;
 	padding: 1rem;
-
+	box-sizing: border-box;
+	
+	max-width: 65ch;
+	width: 100%;
 	font-size: 1.25rem;
 
 	>* {
@@ -11,8 +12,14 @@ main {
 		margin-bottom: 1.75rem;
 	}
 
+	>p>code {
+		word-break: break-word;
+		font-size: 0.9em;
+		color: var(--accent-1);
+	}
+
 	h1 {
-		font-size: 3.5rem;
+		font-size: 2.25rem;
 		line-height: 1;
 		margin-bottom: 1rem;
 	}
@@ -22,4 +29,8 @@ main {
 		font-size: 0.85rem;
 		margin-bottom: 1rem;
 	}
+
+	pre {
+		overflow: scroll;
+	}
 }
\ No newline at end of file
diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss
index 65f71b4..16fb314 100644
--- a/assets/css/partials/header.scss
+++ b/assets/css/partials/header.scss
@@ -3,7 +3,7 @@ header {
 	color: black;
 
 	display: flex;
-	flex-direction: horizontal;
+	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
 
@@ -39,4 +39,20 @@ header {
 			color: var(--accent-dark);
 		}
 	}
+}
+
+@media (max-width: 768px) {
+	header {
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		h1 {
+			margin-bottom: 0.5rem;
+		}
+
+		p {
+			margin-bottom: 0;
+		}
+	}
 }
\ No newline at end of file