Added Evillious guide website

README.md

@@ -5,9 +5,9 @@
 A truly proper website this time™
 
 **TODO**:
-- Redo the entire CSS with a framework
 - Change domain to quenten.nl and staging.quenten.nl
 - Dynamically make domains for other branches
+- Make a generic page component, so that you don't have to add the standard panels every time (such as navbar, leftbar, header, etc)
 
 
 This website will be done with this:

components/bannerpanel.go

@@ -5,3 +5,9 @@ import "github.com/maxence-charriere/go-app/v9/pkg/app"
 type bannerPanel struct {
 	app.Compo
 }
+
+func (b *bannerPanel) Render() app.UI {
+	return app.Div().
+		Class("leftbar").
+		Body()
+}

components/galaxiespage.go

@@ -15,6 +15,7 @@ func (f *GalaxiesPage) Render() app.UI {
 		&header{},
 		&navbar{},
 		&galaxiesPanel{},
+		&bannerPanel{},
 	).Class("main")
 }
 
@@ -36,7 +37,7 @@ func (b *galaxiesPanel) Render() app.UI {
 		app.Div().
 			Body(
 				app.P().
-					Class("p-h2 m-tb10").
+					Class("p-h2 mt-20 mb-10 bold").
 					Text("My friends!"),
 				app.Ul().Body(
 					app.Li().Body(
@@ -77,5 +78,31 @@ func (b *galaxiesPanel) Render() app.UI {
 					),
 				),
 			),
+		app.Div().
+			Body(
+				app.P().
+					Class("p-h2 mt-20 mb-10 bold").
+					Text("Neat webspaces"),
+				app.P().
+					Class("m-t5").
+					Style("margin-left", "10px").
+					Text(`Just very neat websites I found. Not necessarily by people I know.
+					I just thought it would be nice to share them here!`),
+				app.Ul().Body(
+					app.Li().Body(
+						app.Div().Body(
+							// TODO: Create a modal popup for each name!!!
+							app.A().Href("https://evillious.ylimegirl.com/").
+								Class("p-h3 m-t5").
+								Text("Evillious Chronicles fan guide"),
+							app.P().
+								Class("m-t5").
+								Text(`A VERY cool website made by Ylimegirl! They wrote a whole
+								website dedicated to Evillious Chronicles, which is a super 
+								good Japanese light novel and vocaloid series!! Definitely look it up!`),
+						),
+					),
+				),
+			),
 	).Class("content")
 }

components/homepage.go

@@ -36,6 +36,7 @@ func (p *Homepage) Render() app.UI {
 				p.showGuestbook = !p.showGuestbook
 			},
 		},
+		&bannerPanel{},
 		&guestbookForm{
 			OnSubmit: func(name, message string) {
 				var comment entity.Comment

web/static/style.css

@@ -17,6 +17,7 @@ body {
 	border: 3px solid;
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
+	margin-bottom: 5px;
 	background-color: rgb(54, 39, 48);
 	font-size: 5em;
 	font-family: anisha;
@@ -31,6 +32,7 @@ body {
 	border: 3px solid;
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
+	margin-bottom: 5px;
 	background-color: rgb(54, 39, 48);
 	position: relative;
 	float:left;
@@ -44,6 +46,17 @@ body {
 	color:rgb(252, 230, 255)
 }
 
+.leftbar {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	position: relative;
+	float:left;
+	width: 250px;
+	padding: 5px 0px;
+}
+
 .content {
 	border: 3px solid;
 	border-radius: 4px;
@@ -213,6 +226,18 @@ div.comment-message p{
 	margin-bottom: 10px;
 }
 
+.mt-20 {
+	margin-top: 20px;
+}
+
+.mb-10 {
+	margin-bottom: 10px;
+}
+
+.bold {
+	font-weight: 700;
+}
+
 .fit { 
 	width: fit-content;
 }