From aa5bcf27b1cdec98c3c21ec2ce3bd916d2efa5b4 Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Sun, 6 Feb 2022 12:14:56 -0500
Subject: [PATCH] Mobile optimization

---
 site/index.html  |  1 +
 site/styles.scss | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index 15e4b04..e77aa09 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,6 +5,7 @@
 	<title>For Good, not Evil — An ELOS License Builder</title>
 	<script src="elm.min.js"></script>
 	<link rel="stylesheet" href="styles.css"/>
+	<meta name="viewport" content="width=736">
 	<meta property="og:description" content="The world of today is not the world our free software licenses were written for. The licenses we created to protect freedom are being taken advantage of by institutions like ICE and surveillance states to take away the freedom of others.  It's time to reclaim our software in the name of freedom." />
 <style>
 @font-face {
diff --git a/site/styles.scss b/site/styles.scss
index c317c87..47ea5e5 100644
--- a/site/styles.scss
+++ b/site/styles.scss
@@ -31,7 +31,7 @@ header {
 	font-size: 3.2rem;
 
 	padding: 0px 49px;
-	width: 600px;
+	max-width: 600px;
 	margin: 0 auto;
 
 	p {
@@ -129,15 +129,21 @@ header {
 #license-chooser {
 	max-width: 800px;
 	margin: 0 auto;
+	padding: 0 50px;
 
 	#selected-license {
 		border: 60px solid;
 		border-image: url("/assets/cool-border.svg") 60;
-		padding: 30px;
 		border-radius: 20px;
 		white-space: pre-wrap;
+
+		@media (min-width: 1000px) {
+			padding: 30px;
+		}
+
 		h2 {
 			margin-top: 0;
+			line-height: 120%;
 		}
 		p {
 			margin-bottom: 0;
@@ -180,11 +186,18 @@ header {
 
 #modules {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
 	gap: 50px;
 	max-width: 1070px;
 	margin: 0 auto;
 	margin-bottom: 50px;
+	padding: 0 50px;
+
+	@media (min-width: 968px) {
+		grid-template-columns: 1fr 1fr;
+	}
+	@media (max-width: 968px) {
+		padding: 0 100px;
+	}
 
 	.module-button > div {
 		box-sizing: border-box;
@@ -231,7 +244,7 @@ header {
 	grid-template-columns: 1fr 0fr 1fr;
 	align-items: center;
 	margin: 0 auto;
-	max-width: 900px;
+	max-width: min(900px, 90vw);
 	gap: 50px;
 	font-family: Resistance;
 	color: #e1c0ed;