From 4f08cc45e5d940c256cc277ca96de6cc54953a6d Mon Sep 17 00:00:00 2001
From: Shipwreckt <Shipwreckt@mailfence.com>
Date: Wed, 5 Jun 2024 05:43:23 +0100
Subject: Fixed sidebar, hyperlinked Shipwreckt

---
 public/styles.css | 45 ++++++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 25 deletions(-)

(limited to 'public/styles.css')

diff --git a/public/styles.css b/public/styles.css
index 0a3d6d4..d628ffc 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -9,6 +9,8 @@ body {
 
 .sidebar {
     position: fixed;
+    top: 0;
+    left: 0;
     width: 240px; /* Default sidebar width */
     height: 100%;
     background-color: #141414;
@@ -18,12 +20,13 @@ body {
 }
 
 .sidebar:hover {
-    width: 280px; /* Width when hovered over */
+    width: 300px; 
 }
 
 .sidebar h2 {
     color: #7a4d7c;
     text-align: center;
+    margin-bottom: 20px;
 }
 
 .sidebar ul {
@@ -50,30 +53,30 @@ body {
 }
 
 .content {
-    margin-left: 240px;
+    margin-left: 240px; 
     padding: 20px;
-    transition: margin-left 0.3s ease;
     flex: 1;
 }
 
-.sidebar:hover ~ .content {
-    margin-left: 300px;
-}
-
 header {
     background-color: #1f1f1f;
     padding: 10px;
     text-align: center;
-    top: 0;
     z-index: 1000;
+    width: 100%;
 }
 
+header a {
+    color: #ffffff;
+    text-align: center;
+    text-decoration: none; 
+}
 
 header hr {
-    width:50%;
-    text-align:center;
+    width: 50%;
+    text-align: center;
 }
-             <hr style="width:50%;text-align:center;">
+
 header h1 {
     margin: 0;
     color: #ffffff;
@@ -117,15 +120,7 @@ main {
     margin-top: 20px;
 }
 
-main h1 {
-    color: #7a4d7c;
-}
-
-main h2 {
-    color: #7a4d7c;
-}
-
-main h3 {
+main h1, main h2, main h3 {
     color: #7a4d7c;
 }
 
@@ -152,17 +147,17 @@ main a:hover {
 .about-content {
     display: flex;
     align-items: center;
-    flex-direction: row-reverse; 
+    flex-direction: row-reverse;
 }
 
 .about-image {
-    margin-left: 20px; 
-    margin-right: 30px
+    margin-left: 20px;
+    margin-right: 30px;
 }
 
 .about-image img {
-    width: 200px; 
-    height: auto; 
+    width: 200px;
+    height: auto;
     border-radius: 50%;
     border: 5px solid #7a4d7c;
 }
-- 
cgit v1.2.3