Changed friends to galaxies and fixed CSS

components/aboutpage.go

@@ -29,7 +29,7 @@ type aboutPanel struct {
 func (a *aboutPanel) Render() app.UI {
 	return app.Div().Body(
 		app.Img().Src("/web/static/images/rin-1.gif").Styles(map[string]string{"width": "100px", "position": "absolute", "top": "10px", "right": "10px"}),
-		app.Raw(`<p>I am a 21 year old computer science student, living and studying in The Netherlands. I like Docker, Kubernetes and Golang!
+		app.Raw(`<p class="content-text">I am a 21 year old computer science student, living and studying in The Netherlands. I like Docker, Kubernetes and Golang!
 <br>
 I made this website because I was inspired again by the amazing Neocities pages that I discovered because of my friends.
 They also have their own pages (you can find them on the friends tab, do check them out!) and I just had to get a good website of my own!

components/friendspage.go

@@ -1,38 +0,0 @@
-package components
-
-import "github.com/maxence-charriere/go-app/v9/pkg/app"
-
-type FriendsPage struct {
-	app.Compo
-}
-
-func NewFriendsPage() *FriendsPage {
-	return &FriendsPage{}
-}
-
-func (f *FriendsPage) Render() app.UI {
-	return app.Div().Body(
-		&header{},
-		&navbar{},
-		&friendsPanel{},
-	).Class("main")
-}
-
-type friendsPanel struct {
-	app.Compo
-}
-
-func (f *friendsPanel) Render() app.UI {
-	return app.Div().Body(
-		app.P().
-			Text(`My friends!`).
-			Class("p-h1"),
-		app.Ul().Body(
-			app.Li().Body(
-				app.IFrame().
-					Src("https://forestofunix.xyz").
-					Class("friend-iframe"),
-			),
-		),
-	).Class("content")
-}

components/galaxiespage.go

@@ -0,0 +1,69 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type GalaxiesPage struct {
+	app.Compo
+}
+
+func NewGalaxiesPage() *GalaxiesPage {
+	return &GalaxiesPage{}
+}
+
+func (f *GalaxiesPage) Render() app.UI {
+	return app.Div().Body(
+		&header{},
+		&navbar{},
+		&galaxiesPanel{},
+	).Class("main")
+}
+
+type galaxiesPanel struct {
+	app.Compo
+}
+
+func (b *galaxiesPanel) Render() app.UI {
+	return app.Div().Body(
+		app.P().
+			Text(`Galaxies`).
+			Class("p-h1"),
+		app.P().
+			Class("content-text").
+			Text(`Here you can find some really really really cool pages that I found on the internet.
+			Some of these are blogs or even blogposts I found, but the ones on top are special!
+			They're the websites of friends of mine! Please visit them, because they worked really hard
+			on their websites as well!`),
+		app.Div().
+			Body(
+				app.P().
+					Class("p-h2 m-tb10").
+					Text("My friends!"),
+				app.Ul().Body(
+					app.Li().Body(
+						app.Div().Body(
+							// TODO: Create a modal popup for each name!!!
+							app.A().Href("https://forestofunix.xyz").
+								Class("p-h3 m-t5").
+								Text("Forest of Unix"),
+							app.P().
+								Class("m-t5").
+								Text(`A website by Sebastiaan. A massive Linux fanboy, runs Gentoo on his
+								ThinkPad. Absolutely based.`),
+						),
+					),
+					app.Li().Body(
+						app.Div().Body(
+							// TODO: Create a modal popup for each name!!!
+							app.A().Href("https://nymphali.neocities.org").
+								Class("p-h3 m-t5").
+								Text("Nymphali"),
+							app.P().
+								Class("m-t5").
+								Text(`The website made by ■■■■■■, whoops Nymphali. They have an awesome
+								minimalist website that's just lovely.`),
+						),
+					),
+				),
+			),
+	).Class("content")
+}

components/homepanel.go

@@ -16,16 +16,18 @@ func newHomePanel() *homePanel {
 func (p *homePanel) Render() app.UI {
 	return app.Div().Body(
 		app.P().Text("Welcome, internet surfer!").Class("p-h1"),
-		app.Raw(`<p>This website is my creative outlet and a way of expressing myself.
+		app.Raw(`<p class="content-text">This website is my creative outlet and a way of expressing myself.
 As of now, it's probably the most impressive thing I've ever coded.
 <br><br>
 Please enjoy yourself and do sign the guestbook!!</p>`),
 		app.If(p.updateAvailable,
 			app.Div().Body(
-				app.P().Text("An update is available! Reload to update!!"),
+				app.P().
+					Class("content-text").
+					Text("An update is available! Reload to update!"),
 			)),
 		app.Div().Body(
-			app.P().Text("Please sign my guestbook!").Style("font-size", "0.8em"),
+			app.P().Text("Please sign my guestbook!").Class("small"),
 			app.Img().Src("/web/static/images/email3.gif").Style("width", "40px").Style("position", "absolute").Style("bottom", "0px").Style("right", "0px"),
 		).Style("position", "absolute").Style("bottom", "5px").Style("right", "5px").
 			OnClick(func(ctx app.Context, e app.Event) {

components/navbar.go

@@ -18,7 +18,7 @@ func (n *navbar) Render() app.UI {
 				app.A().Href("/about").Text("About"),
 			),
 			app.Li().Body(
-				app.A().Href("/friends").Text("Friends"),
+				app.A().Href("/galaxies").Text("Galaxies"),
 			),
 		),
 	).Class("navbar")

main.go

@@ -21,10 +21,10 @@ const (
 func main() {
 	homepage := components.NewHomepage()
 	aboutpage := components.NewAboutPage()
-	friendspage := components.NewFriendsPage()
+	galaxiespage := components.NewGalaxiesPage()
 	app.Route("/", homepage)
 	app.Route("/about", aboutpage)
-	app.Route("/friends", friendspage)
+	app.Route("/galaxies", galaxiespage)
 
 	// This is executed on the client side only.
 	// It handles client side stuff

web/static/style.css

@@ -56,15 +56,23 @@ body {
 	padding: 10px;
 }
 
-.content p {
+.content-text {
-	width: 80%;
+	max-width: 80%;
 	margin-left: 10px;
 	margin-top: 5px;
 	margin-bottom: 5px;
 }
 
-.gbp {
+/*
+.content p {
+	max-width: 80%;
+	margin-left: 10px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}*/
 
+.gbp {
+	
 }
 
 .comment {
@@ -98,6 +106,20 @@ div .date {
 	color: black;
 }
 
+div.comment-header p {
+	width: 80%;
+    margin-left: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+div.comment-message p{
+	width: 80%;
+    margin-left: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 .comment-message {
 	color:white;
 	overflow-wrap: break-word;
@@ -156,9 +178,39 @@ div .date {
 .p-h1 {
 	font-family: anisha;
 	font-size: 3em;
+	margin-top:5px;
+	margin-bottom:5px;
+	margin-left: 10px;
 }
 
 .p-h2 {
-	font-family: adreena;
 	font-size: 1.5em;
+	margin-left: 10px;
+}
+
+.p-h3 {
+	font-size: 1.2em;
+}
+
+.small {
+	font-size: 0.8em;
+	width: 80%;
+	margin-left: 10px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+/*Margin top 5px*/
+.m-t5 {
+	margin-top: 5px;
+}
+
+/*Margin top-bottom 10px*/
+.m-tb10 {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.fit { 
+	width: fit-content;
 }