From b4e0a41991ac7550df6de73187c7786e7f3631e7 Mon Sep 17 00:00:00 2001 From: Severin Kaderli Date: Thu, 4 Jan 2024 19:28:16 +0100 Subject: [PATCH] Adjust some styling and improve responsiveness --- index.html | 14 ++++++------- styles.css | 58 +++++++++++++++++++++++++++++++++--------------------- 2 files changed, 43 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 31fd3b6..883d285 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
+

Organization

  • @@ -49,7 +49,7 @@
-
+

Entertainment

  • @@ -74,7 +74,7 @@
-
+

Social

  • @@ -91,7 +91,7 @@
-
+

Programming

  • @@ -108,7 +108,7 @@
-
+

Hosting

  • @@ -123,7 +123,7 @@
-
+

Gaming

  • @@ -133,7 +133,7 @@
-
+

Guild Wars 2

  • diff --git a/styles.css b/styles.css index 7652adf..3bcf76a 100644 --- a/styles.css +++ b/styles.css @@ -23,13 +23,16 @@ --color13: #ec7aca; --color14: #4ab0b9; --color15: #a4a0ac; + + --link-group-title-font-size: 1.5rem; + --link-group-item-font-size: 1.25rem; } :root { --spacing: 8px; --width: 900px; --font-family: "Iosevka", monospace; - font-size: 200%; + font-size: 100%; } * { @@ -59,11 +62,6 @@ input { padding: var(--spacing); } -.group { - width: 100%; - margin-bottom: calc(2 * var(--spacing)); -} - header { margin-bottom: calc(2 * var(--spacing)); } @@ -73,25 +71,34 @@ main { flex-wrap: wrap; } -ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - margin-left: var(--spacing); - flex-wrap: wrap; - gap: var(--spacing); +.link-group { + width: 100%; + margin-bottom: calc(2 * var(--spacing)); + + h2 { + margin-bottom: calc(0.5 * var(--spacing)); + font-size: var(--link-group-title-font-size); + } + + ul { + margin: 0; + padding: 0; + list-style: none; + display: grid; + grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); + flex-wrap: wrap; + gap: var(--spacing); + + a { + font-size: var(--link-group-item-font-size); + } + } } -li:not(:last-child):after { - content: "/"; - margin-left: -5px; -} -h2 { - margin-bottom: calc(0.5 * var(--spacing)); - font-size: 1rem; -} + + + a { color: inherit; @@ -101,3 +108,10 @@ a { a:hover { text-decoration: underline; } + + +@media screen and (max-width: 800px) { + ul { + margin-left: 0; + } +} \ No newline at end of file