Reverted forum style, used for genres now

main.go

@@ -8,6 +8,7 @@ import (
 	"github.com/animenotifier/notify.moe/pages/anime"
 	"github.com/animenotifier/notify.moe/pages/dashboard"
 	"github.com/animenotifier/notify.moe/pages/forum"
+	"github.com/animenotifier/notify.moe/pages/forums"
 	"github.com/animenotifier/notify.moe/pages/genre"
 	"github.com/animenotifier/notify.moe/pages/genres"
 	"github.com/animenotifier/notify.moe/pages/threads"
@@ -38,7 +39,7 @@ func main() {
 	app.Ajax("/anime/:id", anime.Get)
 	app.Ajax("/genres", genres.Get)
 	app.Ajax("/genres/:name", genre.Get)
-	app.Ajax("/forum", forum.Get)
+	app.Ajax("/forum", forums.Get)
 	app.Ajax("/forum/:tag", forum.Get)
 	app.Ajax("/threads/:id", threads.Get)
 

mixins/Icon.pixy

@@ -1,2 +1,5 @@
 component Icon(name string)
 	i(class="fa fa-fw fa-" + name)
+
+component GridIcon(name string)
+	span(class="fa fa-" + name + " grid-icon")

pages/forum/forum.go

@@ -25,5 +25,5 @@ func Get(ctx *aero.Context) string {
 		thread.Init()
 	}
 
-	return ctx.HTML(components.Forum(threads))
+	return ctx.HTML(components.Forum(tag, threads))
 }

pages/forum/forum.pixy

@@ -1,25 +1,10 @@
-component Forum(threads []*arn.Thread)
+component Forum(tag string, threads []*arn.Thread)
-	h2 Forum
+	h2.forum-header Forum
-	ForumHeader
+	ForumTags
+	
 	each thread in threads
 		ThreadLink(thread)
 
-component ForumHeader
-	.forum-tags
-		a.ajax(href="/forum") All
-		span  | 
-		a.ajax(href="/forum/general") General
-		span  | 
-		a.ajax(href="/forum/news") News
-		span  | 
-		a.ajax(href="/forum/anime") Anime
-		span  | 
-		a.ajax(href="/forum/update") Updates
-		span  | 
-		a.ajax(href="/forum/suggestion") Suggestions
-		span  | 
-		a.ajax(href="/forum/bug") Bugs
-
 component ThreadLink(thread *arn.Thread)
 	.thread-link(data-sticky=thread.Sticky)
 		.post-author.thread-author

pages/forum/forum.styl

@@ -1,3 +1,6 @@
+.forum-header
+	text-align left
+
 .forum-tags
 	text-align left
 	margin-bottom 1.5rem

pages/forums/forums.go

@@ -0,0 +1,11 @@
+package forums
+
+import (
+	"github.com/aerogo/aero"
+	"github.com/animenotifier/notify.moe/pages/forum"
+)
+
+// Get ...
+func Get(ctx *aero.Context) string {
+	return forum.Get(ctx)
+}

pages/forums/forums.pixy

@@ -0,0 +1,26 @@
+component Forums
+	h2.forum-header Forum
+	ForumTags
+
+component ForumTags
+	.forum-tags
+		ForumCategory("All", "")
+		span  | 
+		ForumCategory("General", "/general")
+		span  | 
+		ForumCategory("News", "/news")
+		span  | 
+		ForumCategory("Anime", "/anime")
+		span  | 
+		ForumCategory("Updates", "/update")
+		span  | 
+		ForumCategory("Suggestions", "/suggestion")
+		span  | 
+		ForumCategory("Bugs", "/bug")
+
+component ForumCategory(title string, suffix string)
+	a.ajax(href="/forum" + suffix)= title
+	//- a.grid-cell.ajax(href="/forum/" + category)
+	//- 	.grid-text
+	//- 		GridIcon(arn.GetForumIcon(category))
+	//- 		span= title

pages/genre/genre.pixy

@@ -2,5 +2,5 @@ component Genre(genre string, animeList []*arn.Anime)
 	h2.genre-header= arn.Capitalize(genre)
 	.grid
 		each anime in animeList
-			a.grid-cell.ajax(href="/anime/" + toString(anime.ID))
+			a.grid-cell.grid-anime.ajax(href="/anime/" + toString(anime.ID))
-				img.anime-image.grid-cell-content.grid-cell-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")
+				img.anime-image.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")

pages/genre/genre.styl

@@ -1,28 +0,0 @@
-.grid
-	display flex
-	flex-flow row wrap
-	float none !important
-	justify-content center
-
-.grid-cell
-	margin 0.5em
-	flex-grow 0
-	flex-shrink 0
-
-.grid-cell-content
-	width 16vw
-	height 9vw
-	min-width 90px
-	min-height 127px
-	max-width 200px
-	max-height 282px
-
-.grid-cell-image
-	object-fit cover
-
-.grid-cell-text
-	display flex
-	flex-flow column
-	align-items center
-	justify-content center
-	padding 0.75em

pages/genres/genres.pixy

@@ -1,9 +1,9 @@
 component Genres
-	h2.genre-header Genres
+	h2 Genres
 	
 	.grid
 		each genre in arn.Genres
-			a.grid-cell.light-button.ajax(href="/genres/" + arn.FixGenre(genre))
+			a.grid-cell.ajax(href="/genres/" + arn.FixGenre(genre))
-				.genre.grid-cell-content.grid-cell-text
+				.grid-text
-					Icon(arn.GetGenreIcon(genre))
+					GridIcon(arn.GetGenreIcon(genre))
 					span= genre

pages/genres/genres.styl

@@ -1,9 +0,0 @@
-.genre-header
-	text-align center
-
-.genre
-	font-size 1rem
-	.fa
-		font-size 2rem
-		margin-right 0
-		margin-bottom 1rem

styles/colors.styl

@@ -1,5 +1,5 @@
 html, body
-	color rgb(60, 60, 60)
+	color textColor
 	background-color rgb(254, 254, 254)
 
 a

styles/config.styl

@@ -1,8 +1,13 @@
+textColor = rgb(60, 60, 60)
 mainColor = rgb(248, 165, 130)
 hoverColor = darken(mainColor, 10%)
 linkColor = darken(mainColor, 15%)
 linkHoverColor = darken(hoverColor, 20%)
 activeLinkColor = rgb(100, 149, 237)
 uiBorder = 1px solid rgba(0, 0, 0, 0.1)
-uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%)
+uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15)
-uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.03) 100%)
+uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
+uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
+outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
+outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
+outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)

styles/grid.styl

@@ -0,0 +1,59 @@
+.grid
+	display flex
+	flex-flow row wrap
+	justify-content center
+	float none !important
+
+.grid-cell
+	flex-grow 0
+	flex-shrink 0
+
+	width 16vw
+	height 9vw
+	min-width 90px
+	min-height 127px
+	max-width 200px
+	max-height 282px
+	border-radius 3px
+	background-size cover
+	background-position 50% 50%
+
+	margin 0.5rem
+	border uiBorder
+	background uiBackground
+
+	&:hover
+		border uiHoverBorder
+		background uiHoverBackground
+		box-shadow outlineShadowMedium
+		transform scale(1.04)
+		// .grid-icon
+		// 	transform scale(1.3)
+
+.grid-anime
+	border none
+	&:hover
+		border none
+
+.grid-text
+	width 100%
+	height 100%
+	display flex
+	flex-flow column
+	align-items center
+	justify-content center
+	font-size 1rem
+	color rgb(160, 160, 160)
+
+.grid-icon
+	font-size 2.5rem
+	margin-top 2rem
+	margin-bottom 0.7rem
+	color linkColor
+	transition transform 200ms ease-in-out
+
+.grid-image
+	width 100%
+	height 100%
+	margin 0
+	object-fit cover

styles/headers.styl

@@ -7,6 +7,7 @@ h2
 	font-size 2em
 	line-height 1.5em
 	font-weight bold
+	text-align center
 	width 100%
 	&:first-of-type
 		margin-top 0

styles/user.styl

@@ -14,7 +14,7 @@ avatarSize = 50px
 	margin 0.2em
 	&:hover
 		.user-image
-			box-shadow 0 0 8px rgb(0, 0, 0)
+			box-shadow outlineShadowHeavy
 
 .user-image
 	opacity 0