Improve padding and scaling

mutant-remix · Oct 16, 2023 · 84e5cba · 84e5cba
1 parent 27f74e3
commit 84e5cba
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 54 deletions.
diff --git a/config/global/style/images.css b/config/global/style/images.css
@@ -2,26 +2,8 @@ img {
 	width: 500px;
 }
 
-img#left {
-	float: left;
-	margin: 10px 10px 10px 0px;
-}
-
-img#right {
-	float: right;
-	margin: 10px 0px 10px 10px;
-}
-
-img.emoji {
-	display: inline;
-	height: 1.2rem;
-	width: auto;
-}
-
 @media (max-width: 700px) {
-img, img#right, img#left {
+img {
     width: 100%;
-	margin: 10px 0px;
-	float: none;
 }
 }
diff --git a/config/global/style/standard.css b/config/global/style/standard.css
@@ -30,7 +30,7 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-    margin: 0 3rem;
+    margin: 0 4rem;
 	background-color: var(--background);
 	min-height: 100%;
 }

diff --git a/config/global/style/type.css b/config/global/style/type.css
@@ -26,6 +26,7 @@ h1 {
 
 h2 {
 	font-size: 2rem;
+	line-height: 3rem;
 }
 
 h3 {
@@ -46,6 +47,7 @@ h6 {
 
 p {
 	font-size: 1.2rem;
+	line-height: 2rem;
 	margin-bottom: 1rem;
 }
 

diff --git a/config/pages/index/index.md b/config/pages/index/index.md
@@ -24,12 +24,9 @@
 		line-height: 4rem;
         margin-bottom: 1rem;
 	}
-
-	#bubble {
-		background: var(--orange);
-		border-radius: 35px;
-		padding: 20px 65px;
-	}
+    h2 {
+        margin-top: 1rem;
+    }
 
     #lists {
         display: flex;
@@ -48,8 +45,14 @@
     #donts {
         list-style-image: url("/assets/red_cross.svg");
     }
+
+    #bubble {
+		background: var(--orange);
+		border-radius: 35px;
+		padding: 20px 65px;
+	}
 
-    @media (max-width: 900px) {
+    @media (max-width: 1000px) {
     #lists {
         flex-direction: column;
     }
@@ -98,6 +101,9 @@ Mutant Remix is licensed under the Creative Commons Attribution-NonCommercial-Sh
 <img style="width: 250px; margin-left: auto; margin-right: auto;" src="assets/Copyright.svg"
 		alt="Emojis bursting from centre point">
 
+## Help us make it better.
+Think Mutant Remix is cool? Want to contribute to the project? Mutant Remix is always looking for contributors of all backgrounds. Get involved!
+
 ## So, what am I allowed to do with it?
 Here are a few ground rules regarding how you can use the emoji pack:
 

diff --git a/docs/index.html b/docs/index.html
@@ -83,12 +83,9 @@
 		line-height: 4rem;
         margin-bottom: 1rem;
 	}
-
-	#bubble {
-		background: var(--orange);
-		border-radius: 35px;
-		padding: 20px 65px;
-	}
+    h2 {
+        margin-top: 1rem;
+    }
 
     #lists {
         display: flex;
@@ -107,8 +104,14 @@
     #donts {
         list-style-image: url("/assets/red_cross.svg");
     }
+
+    #bubble {
+		background: var(--orange);
+		border-radius: 35px;
+		padding: 20px 65px;
+	}
 
-    @media (max-width: 900px) {
+    @media (max-width: 1000px) {
     #lists {
         flex-direction: column;
     }
@@ -150,6 +153,8 @@ <h2>Want it? Use it!</h2>
 <p>Mutant Remix is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Feel free to go crazy with it - as long as you respect the license.</p>
 <p><img style="width: 250px; margin-left: auto; margin-right: auto;" src="assets/Copyright.svg"
 		alt="Emojis bursting from centre point"></p>
+<h2>Help us make it better.</h2>
+<p>Think Mutant Remix is cool? Want to contribute to the project? Mutant Remix is always looking for contributors of all backgrounds. Get involved!</p>
 <h2>So, what am I allowed to do with it?</h2>
 <p>Here are a few ground rules regarding how you can use the emoji pack:</p>
 <div id="lists">

diff --git a/docs/style/images.css b/docs/style/images.css
@@ -2,26 +2,8 @@ img {
 	width: 500px;
 }
 
-img#left {
-	float: left;
-	margin: 10px 10px 10px 0px;
-}
-
-img#right {
-	float: right;
-	margin: 10px 0px 10px 10px;
-}
-
-img.emoji {
-	display: inline;
-	height: 1.2rem;
-	width: auto;
-}
-
 @media (max-width: 700px) {
-img, img#right, img#left {
+img {
     width: 100%;
-	margin: 10px 0px;
-	float: none;
 }
 }
diff --git a/docs/style/standard.css b/docs/style/standard.css
@@ -30,7 +30,7 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-    margin: 0 3rem;
+    margin: 0 4rem;
 	background-color: var(--background);
 	min-height: 100%;
 }

diff --git a/docs/style/type.css b/docs/style/type.css
@@ -26,6 +26,7 @@ h1 {
 
 h2 {
 	font-size: 2rem;
+	line-height: 3rem;
 }
 
 h3 {
@@ -46,6 +47,7 @@ h6 {
 
 p {
 	font-size: 1.2rem;
+	line-height: 2rem;
 	margin-bottom: 1rem;
 }