Added GNU and rewrote page

src/galaxiespage.go

@@ -1,9 +1,16 @@
 package main
 
-import "github.com/maxence-charriere/go-app/v9/pkg/app"
+import (
+	"fmt"
+
+	"github.com/maxence-charriere/go-app/v9/pkg/app"
+)
 
 type GalaxiesPage struct {
 	app.Compo
+
+	gnuOver        bool
+	mousex, mousey int
 }
 
 func NewGalaxiesPage() *GalaxiesPage {
@@ -20,9 +27,156 @@ func (f *GalaxiesPage) Render() app.UI {
 				Src("/web/blocks/snippets/bannerpanel.html"),
 		).
 		Main(
-			newHTMLBlock().
+			/*
+				newHTMLBlock().
+					Class("right").
+					Class("contentblock").
+					Src("/web/blocks/pages/galaxies.html"),
+			*/
+			newUIBlock().
 				Class("right").
 				Class("contentblock").
-				Src("/web/blocks/pages/galaxies.html"),
+				UI(
+					app.Div().
+						Body(
+							app.P().
+								Class("p-h1").
+								Text("Galaxies"),
+							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").
+										Class("mt-20").
+										Class("mb-10").
+										Class("bold").
+										Text("My friends!"),
+									app.Ul().
+										Body(
+											app.Li().
+												Body(
+													app.Div().
+														Body(
+															app.A().
+																Href("https://forestofunix.xyz").
+																Class("p-h3").
+																Class("m-t5").
+																Text("Forest of Unix"),
+															app.P().
+																Class("m-t5").
+																Text("A website made by Sebastiaan. A massive Linux fanboy, runs Gentoo on his ThinkPad. Absolutely based."),
+														),
+												),
+											app.Li().
+												Body(
+													app.Div().
+														Body(
+															app.A().
+																Href("https://nymphali.neocities.org").
+																Class("p-h3").
+																Class("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."),
+														),
+												),
+											app.Li().
+												Body(
+													app.Div().
+														Body(
+															app.A().
+																Href("https://kristypixel.neocities.org").
+																Class("p-h3").
+																Class("m-t5").
+																Text("Kristy"),
+															app.P().
+																Class("m-t5").
+																Text("Website made by Kristy. Very cute website, I love it! Keep up the awesome work!"),
+														),
+												),
+										),
+								),
+							app.Div().
+								Body(
+									app.P().
+										Class("p-h2").
+										Class("mt-20").
+										Class("mb-10").
+										Class("bold").
+										Text("Neat webspaces"),
+									app.P().
+										Class("m-t5").
+										Style("margin-left", "10px").
+										Text("Just very neat websites I found and causes I support. Not necessarily by people I know. I just wanted to share them here!"),
+									app.Ul().
+										Body(
+											app.Li().
+												Body(
+													app.Div().
+														Body(
+															app.A().
+																Href("https://evillious.ylimegirl.com").
+																Class("p-h3").
+																Class("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!"),
+														),
+												),
+											app.Li().
+												Body(
+													app.Div().
+														Body(
+															app.A().
+																Href("https://www.gnu.org").
+																Class("p-h3").
+																Class("m-t5").
+																Text("The GNU Project").
+																OnMouseOver(func(ctx app.Context, e app.Event) {
+																	f.gnuOver = true
+																}).
+																OnMouseOut(func(ctx app.Context, e app.Event) {
+																	f.gnuOver = false
+																}).
+																OnMouseMove(func(ctx app.Context, e app.Event) {
+																	f.mousex, f.mousey = app.Window().CursorPosition()
+																}),
+															app.If(f.gnuOver,
+																app.Img().
+																	Src("/web/static/images/gnu-head-sm.png").
+																	Style("position", "fixed").
+																	Style("overflow", "hidden").
+																	Style("top", fmt.Sprintf("%dpx", f.mousey+20)).
+																	Style("left", fmt.Sprintf("%dpx", f.mousex+20)).
+																	Width(129).
+																	Height(122).
+																	Alt("GNU"),
+															),
+															app.Div().
+																Style("display", "flex").
+																Style("gap", "5px").
+																Body(
+																	app.P().
+																		Class("m-t5").
+																		Text("The official website of the GNU project. They advocate for free/libre software. This is not to be confused with 'open source' software. I highly recommend you read about them and their efforts."),
+																),
+														),
+												),
+										),
+								),
+						),
+				),
 		)
 }
+
+/*
+func (f *GalaxiesPage) onMouseOverGnu(ctx app.Context, e app.Event) {
+
+}*/

web/blocks/pages/galaxies.html

@@ -42,5 +42,24 @@
 					good Japanese light novel and vocaloid series!! Definitely look it up!</p>
 			</div>
 		</li>
+		<li>
+			<div>
+				<a href="https://www.gnu.org/" class="p-h3 m-t5">The GNU Project</a>
+				<div style="display:flex; gap:5px;">
+					<div style="flex:70%">
+						<p class="m-t5">
+							The official website of the GNU project.
+							They advocate for free/libre software.
+							This is not to be confused with 'open source' software.
+							I highly recommend you read about them and their efforts.
+						</p>
+					</div>
+					<div style="flex:30%">
+						<img src="/web/static/images/gnu-head-sm.png" alt="GNU" width="129" height="122" >
+					</div>
+
+				</div>
+			</div>
+		</li>
 	</ul>
 </div>