From 74e8f35833cd0cb30e459353ac44691de0e232d0 Mon Sep 17 00:00:00 2001 From: Severin Kaderli Date: Mon, 26 Dec 2022 20:52:35 +0100 Subject: [PATCH] Update reddit link Signed-off-by: Severin Kaderli --- index.html | 350 ++++++++++++++++++++++++++--------------------------- styles.css | 103 ++++++++++++++++ 2 files changed, 274 insertions(+), 179 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index dc7bd6c..d61eafb 100644 --- a/index.html +++ b/index.html @@ -1,186 +1,178 @@ - - - - + + + Start - - - - +
-
-
- -
-
-
-
-

Organization

- -
-
-

Entertainment

- -
-
-

Social

- -
-
-

Programming

- -
-
-

Hosting

- -
-
-

Gaming

- -
-
-

Guild Wars 2

- -
-
+
+
+ +
+
+
+
+

Organization

+ +
+
+

Entertainment

+ +
+
+

Social

+ +
+
+

Programming

+ +
+
+

Hosting

+ +
+
+

Gaming

+ +
+
+

Guild Wars 2

+ +
+
- - + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4cb3658 --- /dev/null +++ b/styles.css @@ -0,0 +1,103 @@ +:root { + --wallpaper: url("None"); + + /* Special */ + --background: #18161d; + --foreground: #a4a0ac; + --cursor: #a4a0ac; + + /* Colors */ + --color0: #18161d; + --color1: #ff7780; + --color2: #68b183; + --color3: #bda014; + --color4: #54a5ff; + --color5: #da89b2; + --color6: #79a8c3; + --color7: #a4a0ac; + --color8: #bd9b87; + --color9: #ef873d; + --color10: #08b885; + --color11: #d39710; + --color12: #a294fe; + --color13: #ec7aca; + --color14: #4ab0b9; + --color15: #a4a0ac; +} + +:root { + --spacing: 8px; + --width: 500px; + --font-family: monospace; + font-size: 16px; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + background-color: var(--background); + color: var(--foreground); + font-family: var(--font-family); +} + +.page { + margin: calc(4 * var(--spacing)) auto 0; + padding: var(--spacing); + width: 100%; + max-width: var(--width); +} + +input { + width: 100%; + outline: none; + background-color: var(--background); + color: var(--foreground); + border: 1px solid var(--foreground); + padding: var(--spacing); +} + +.group { + width: 100%; + margin-bottom: calc(2 * var(--spacing)); +} + +header { + margin-bottom: calc(2 * var(--spacing)); +} + +main { + display: flex; + flex-wrap: wrap; +} + +ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + margin-left: var(--spacing); + flex-wrap: wrap; + gap: var(--spacing); +} + +li:not(:last-child):after { + content: "/"; + margin-left: var(--spacing); +} + +h2 { + margin-bottom: calc(0.5 * var(--spacing)); + font-size: 1rem; +} + +a { + color: inherit; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +}