diff --git a/components/aboutpage.go b/components/aboutpage.go index aa367e1..2ca4e30 100644 --- a/components/aboutpage.go +++ b/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(`

I am a 21 year old computer science student, living and studying in The Netherlands. I like Docker, Kubernetes and Golang! + app.Raw(`

I am a 21 year old computer science student, living and studying in The Netherlands. I like Docker, Kubernetes and Golang!
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! diff --git a/components/friendspage.go b/components/friendspage.go deleted file mode 100644 index 5ed88e4..0000000 --- a/components/friendspage.go +++ /dev/null @@ -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") -} diff --git a/components/galaxiespage.go b/components/galaxiespage.go new file mode 100644 index 0000000..ded3398 --- /dev/null +++ b/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") +} diff --git a/components/homepanel.go b/components/homepanel.go index 6e2fc72..fef2c62 100644 --- a/components/homepanel.go +++ b/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(`

This website is my creative outlet and a way of expressing myself. + app.Raw(`

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.

Please enjoy yourself and do sign the guestbook!!

`), 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) { diff --git a/components/navbar.go b/components/navbar.go index ba9fdb0..6bbea67 100644 --- a/components/navbar.go +++ b/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") diff --git a/main.go b/main.go index 8fc4e7e..1c9cd99 100644 --- a/main.go +++ b/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 diff --git a/web/static/style.css b/web/static/style.css index f964ad3..316f115 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -56,15 +56,23 @@ body { padding: 10px; } -.content p { - width: 80%; +.content-text { + 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; } \ No newline at end of file