fix responsiveness issues

Signed-off-by: Robert Günzler <r@gnzler.io>

2 files changed, 24 insertions, 9 deletions

diff --git a/links/hero.css b/links/hero.css
index 9dd4f77..924bb9d 100644
--- a/links/hero.css
+++ b/links/hero.css
@@ -1,12 +1,19 @@
 body {
 	width: 100vw;
 	height: 100vh;
+
+	display: grid;
+	place-items: center;
+}
+
+main.hero {
 	display: grid;
 	place-items: center;
 }
 
 main.hero>img {
 	max-height: 33vh;
+	max-width: 66vw;
 }
 
 main.hero>nav li+li {
diff --git a/links/main.css b/links/main.css
index aeaaf94..8b42d52 100644
--- a/links/main.css
+++ b/links/main.css
@@ -17,12 +17,12 @@ body {
 	color: var(--fg);
 	overflow-x: hidden;
 	font-family: sans-serif;
-	padding: 0;
+	padding: 45px;
 	margin: 0;
 }
 
-header {
-	padding: 25px;
+body>*+* {
+	margin-top: 45px;
 }
 
 header a {
@@ -52,14 +52,13 @@ header h1::before {
 }
 
 nav {
-	padding: 45px;
+	padding: 0 25px;
 	padding-top: 0;
-
 	float: right;
 }
 
 nav details summary {
-	margin-bottom: 30px
+	margin-bottom: 25px;
 }
 
 nav .site-nav section {
@@ -71,6 +70,10 @@ nav .site-nav section {
 	margin-left: -15px;
 }
 
+nav .site-nav section:first-child {
+	border-width: 2px;
+}
+
 nav .site-nav section h2 {
 	margin: 20px 0 20px 0;
 }
@@ -81,7 +84,6 @@ nav .site-nav section ul {
 }
 
 main {
-	padding: 45px;
 	float: left;
 	max-width: 700px;
 }
@@ -415,7 +417,6 @@ main>section#footnotes {
 footer {
 	line-height: 30px;
 	clear: both;
-	padding: 25px;
 	border-top: 1px solid var(--bg);
 }
 
@@ -475,8 +476,15 @@ ul.nobull li {
 /* Mobile */
 
 @media (max-width: 1100px) {
+	body {
+		padding: 25px;
+	}
+
+	body>*+* {
+		margin-top: 35px;
+	}
+
 	nav {
-		width: 100%;
 		float: none;
 	}