Filled inner section with a distinct background

2 files changed, 20 insertions, 16 deletions

diff --git a/index.html b/index.html
index 5879423..acc45fe 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,8 @@
 
 <title>Starshatter: The Open Source Project</title>
 
+<div class="wrapper">
+
 <header>
 <h1 class="hidden">Starshatter: The Open Source Project</h1>
 <div class="title">STAR<div class="star"><div></div></div>SHATTER <br><span class="subtitle">The Open Source Project</a></div>
@@ -86,4 +88,6 @@ us</a>.
 <p><a href="https://git.ignore.pl/starshatter/tree/NOTICE">Copyright notice</a>
 </footer>
 
+</div>
+
 <script src="https://stats.ignore.pl/track.js"></script>
diff --git a/style.css b/style.css
index 0ea2d93..3d80b9c 100644
--- a/style.css
+++ b/style.css
@@ -11,14 +11,20 @@
 body {
 	font-family: sans-serif;
 	font-size: 16px;
-	max-width: 48em;
-	min-width: 20em;
-	margin: 1em auto 8em auto;
-	padding: 0 2em;
+	padding: 0;
+	margin: 0;
 	background-color: #111;
 	color: #eee;
 }
 
+.wrapper {
+	max-width: 48em;
+	min-width: 20em;
+	margin: 0 auto;
+	padding: 1em 2em;
+	background-color: #171717;
+}
+
 header {
 	padding: 6em 0;
 	text-align: center;
@@ -73,7 +79,7 @@ header {
 }
 
 section {
-	padding: 1em 1em 1.5em 1em;
+	margin: 2em 0;
 }
 
 section > :first-child {
@@ -91,13 +97,6 @@ section .self {
 	transition: all 100ms;
 }
 
-#downloads {
-	margin-left: -0.2em;
-	border-left: 0.2em solid #0e84bb;
-	background-color: #171717;
-	margin-bottom: 1em;
-}
-
 section p,
 section ul,
 section ol {
@@ -110,13 +109,14 @@ h2, h3 {
 }
 
 footer {
-	margin-top: 3em;
-	text-align: center;
-	font-size: 80%;
+	display: flex;
+	justify-content: space-between;
+	margin-top: 4em;
+	font-size: 70%;
 	color: #aaa;
 }
 
-footer p {
+footer > * {
 	margin: 0;
 }