New genre overview

components/genres.pixy

@@ -1,15 +1,20 @@
 component GenreOverview
+	// TODO: Add this to the stylus file later
+	style!= "h2{ text-align: center; } .light-button{ display: inline-block; }"
 	section
 		header
 			h2 Genres
 		
-		each genre in Genres
-			p
-				a(href="/genres/" + arn.FixGenre(genre))
+		div
+			each genre in Genres
+				a.light-button.ajax(href="/genres/" + arn.FixGenre(genre))
 					Icon(GenreIcons[genre])
 					span= genre
 
 component AnimeInGenre(genre string, animeList []*arn.Anime)
-	h2= genre
-	each anime in animeList
-		p= anime.Title.Romaji + " (" + s(anime.Watching) + ")"
+	style!= "h2 { text-align: center; } .genre-anime-list{ display: flex; flex-flow: row wrap; float: none !important; justify-content: center; } .genre-anime-image{ width: 16vw; height: 9vw; min-width: 100px; min-height: 141px; max-width: 200px; max-height: 282px; object-fit: cover; } .genre-anime-link{ margin: 0.5em; flex-grow: 0; flex-shrink: 0; }"
+	h2= "#" + genre
+	.genre-anime-list
+		each anime in animeList
+			a.genre-anime-link.ajax(href="/anime/" + s(anime.ID))
+				img.anime-image.genre-anime-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + s(anime.Watching) + ")")

components/layout.pixy

@@ -0,0 +1,41 @@
+component Layout(content string, css string)
+	html
+		head
+			title ARN 4.0 - Beta
+			style!= css
+		body
+			#container
+				Header
+				Content(content)
+			
+			LoadingAnimation
+			
+			script(src="/scripts.js")
+
+component Header
+	#header-container
+		#header.header-logged-in
+			Navigation
+
+component Content(content string)
+	#content-container
+		main#content.fade!= content
+
+component Navigation
+	nav#navigation
+		a.navigation-link.navigation-link-left.ajax(href="/")
+			.navigation-button
+				i.fa.fa-dashboard
+				span.navigation-text Dash
+
+component LoadingAnimation
+	#loading-animation.sk-cube-grid.fade
+		.sk-cube.sk-cube1
+		.sk-cube.sk-cube2
+		.sk-cube.sk-cube3
+		.sk-cube.sk-cube4
+		.sk-cube.sk-cube5
+		.sk-cube.sk-cube6
+		.sk-cube.sk-cube7
+		.sk-cube.sk-cube8
+		.sk-cube.sk-cube9