Translated the basic style files to scarlet

config.json

@@ -9,7 +9,7 @@
 		"font-awesome",
 		"config",
 		"base",
-		"elements",
+		"typography",
 		"layout",
 		"navigation",
 		"headers",

layout/layout.pixy

@@ -1,40 +1,19 @@
 component Layout(content string)
 	html
 		head
-			title ARN 4.0 - Beta
+			title notify.moe - Beta
 			meta(name="viewport", content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
 		body
 			#container
-				Header
+				#header
-				Content(content)
+					Navigation
+				#content-container
+					main#content.fade!= 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
-		NavigationButton("Dash", "/", "inbox")
-		NavigationButton("Anime", "/anime", "television")
-		NavigationButton("Forum", "/forum", "comment")
-		NavigationButton("Genres", "/genres", "tags")
-		NavigationButton("Airing", "/airing", "rss")
-
-component NavigationButton(name string, target string, icon string)
-	a.navigation-link.navigation-link-left.ajax(href=target)
-		.navigation-button
-			i(class="fa fa-" + icon)
-			span.navigation-text= name
-
 component LoadingAnimation
 	#loading-animation.sk-cube-grid.fade
 		.sk-cube.sk-cube1

main.go

@@ -2,7 +2,6 @@ package main
 
 import (
 	"io/ioutil"
-	"runtime"
 
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/notify.moe/components"
@@ -22,43 +21,15 @@ import (
 var app = aero.New()
 
 func main() {
+	// CSS
 	app.SetStyle(components.CSS())
 
-	// app.Sessions = sessions.New(sessions.Config{
+	// Layout
-	// 	Cookie:                      "sid",
-	// 	Expires:                     time.Duration(30) * time.Second,
-	// 	GcDuration:                  time.Duration(30) * time.Second,
-	// 	DecodeCookie:                false,
-	// 	DisableSubdomainPersistence: false,
-	// })
-
-	// user, _ := arn.GetUserByNick("Akyoto")
-	// user.CoverImage.URL = "https://www.pixelstalk.net/wp-content/uploads/2016/10/Hanyijie-sky-scenery-ship-anime-art-1920x1080.jpg"
-	// user.CoverImage.Position.X = "50%"
-	// user.CoverImage.Position.Y = "0%"
-	// user.Save()
-
-	scripts, _ := ioutil.ReadFile("temp/scripts.js")
-	js := string(scripts)
-
-	app.Get("/scripts.js", func(ctx *aero.Context) string {
-		ctx.SetHeader("Content-Type", "application/javascript")
-		return js
-	})
-
-	app.Get("/hello", func(ctx *aero.Context) string {
-		return ctx.Text("Hello World")
-	})
-
-	app.Get("/gc", func(ctx *aero.Context) string {
-		runtime.GC()
-		return ctx.Text("Ran garbage collector")
-	})
-
 	app.Layout = func(ctx *aero.Context, content string) string {
 		return components.Layout(content)
 	}
 
+	// Ajax routes
 	app.Ajax("/", dashboard.Get)
 	app.Ajax("/anime", search.Get)
 	app.Ajax("/anime/:id", anime.Get)
@@ -75,5 +46,20 @@ func main() {
 		return ctx.HTML(components.Test("Hello World"))
 	})
 
+	// Scripts
+	scripts, _ := ioutil.ReadFile("temp/scripts.js")
+	js := string(scripts)
+
+	app.Get("/scripts.js", func(ctx *aero.Context) string {
+		ctx.SetHeader("Content-Type", "application/javascript")
+		return js
+	})
+
+	// For testing
+	app.Get("/hello", func(ctx *aero.Context) string {
+		return ctx.Text("Hello World")
+	})
+
+	// Let's go
 	app.Run()
 }

mixins/AnimeGrid.pixy

@@ -2,4 +2,4 @@ component AnimeGrid(animeList []*arn.Anime)
 	.grid
 		each anime in animeList
 			a.grid-cell.grid-anime.ajax(href="/anime/" + toString(anime.ID))
-				img.anime-image.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")
+				img.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")

mixins/Navigation.pixy

@@ -0,0 +1,13 @@
+component Navigation
+	nav#navigation
+		NavigationButton("Dash", "/", "inbox")
+		NavigationButton("Anime", "/anime", "television")
+		NavigationButton("Forum", "/forum", "comment")
+		NavigationButton("Genres", "/genres", "tags")
+		NavigationButton("Airing", "/airing", "rss")
+
+component NavigationButton(name string, target string, icon string)
+	a.navigation-link.ajax(href=target)
+		.navigation-button
+			i(class="fa fa-" + icon)
+			span.navigation-text= name

pages/anime/anime.pixy

@@ -1,43 +1,40 @@
 component Anime(anime *arn.Anime)
-	section.anime-container(data-id=anime.ID)
+	.anime-header(data-id=anime.ID)
-		header.anime-header
 		if anime.Image != ""
 			.anime-image-container
 				img.anime-image(src=anime.Image, alt=anime.Title.Romaji)
 		
-			.info-column
+		.anime-info
-				h2.anime-title-db(title=anime.Type)= anime.Title.Romaji
+			h2.anime-title(title=anime.Type)= anime.Title.Romaji
 
 			//- if user && user.titleLanguage === "japanese"
-				//- 	p.second-title-container
 			//- 	span.second-title(title=anime.Title.English !== anime.Title.Romaji ? anime.Title.English : null)= anime.Title.Romaji
 			//- else
 			if anime.Title.Japanese != anime.Title.Romaji
-					p.second-title-container
+				a.anime-alternative-title(href="http://jisho.org/search/" + anime.Title.Japanese, target="_blank", title="Look up reading on jisho.org", rel="nofollow")= anime.Title.Japanese
-						a.second-title(href="http://jisho.org/search/" + anime.Title.Japanese, target="_blank", title="Look up reading on jisho.org", rel="nofollow")= anime.Title.Japanese
 
-				//- h3.anime-header.anime-summary-header Summary
+			//- h3.anime-section-name.anime-summary-header Summary
 			p.anime-summary= arn.FixAnimeDescription(anime.Description)
 	
 	if anime.YoutubeID != ""
-			h3.anime-header Video
+		h3.anime-section-name Video
 		.anime-trailer.video-container
 			iframe.video(src="https://www.youtube.com/embed/" + anime.YoutubeID + "?showinfo=0", allowfullscreen="allowfullscreen")
 
 	if anime.Tracks != nil && anime.Tracks.Opening != nil
-			h3.anime-header Tracks
+		h3.anime-section-name Tracks
 		iframe.anime-track(src="https://w.soundcloud.com/player/?url=" + anime.Tracks.Opening.URI + "?auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true")
 
 	//- if user && friendsWatching && friendsWatching.length > 0
 	//- 	include ../messages/avatar.pug
 		
-		//- 	h3.anime-header Watching
+	//- 	h3.anime-section-name Watching
 	//- 	.user-list
 	//- 		each watcher in friendsWatching
 	//- 			+avatar(watcher)
 
 	if len(anime.Relations) > 0
-			h3.anime-header Relations
+		h3.anime-section-name Relations
 		.relations
 			each relation in anime.Relations
 				a.relation.ajax(href="/anime/" + toString(relation.ID), title=relation.Anime().Title.Romaji)
@@ -45,7 +42,7 @@ component Anime(anime *arn.Anime)
 					span= arn.Capitalize(relation.Type)
 
 	if len(anime.Genres) > 0
-			h3.anime-header Genres
+		h3.anime-section-name Genres
 		.light-button-group
 			each genre in anime.Genres
 				if genre != ""
@@ -54,7 +51,7 @@ component Anime(anime *arn.Anime)
 						span= genre
 	
 	if len(anime.Studios) > 0
-			h3.anime-header Studios
+		h3.anime-section-name Studios
 		.light-button-group
 			each studio in anime.Studios
 				a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank")
@@ -62,11 +59,11 @@ component Anime(anime *arn.Anime)
 					span= studio.Name
 
 	//- //-if crunchy
-		//- //-	h3.anime-header Episodes
+	//- //-	h3.anime-section-name Episodes
 
 	//- if canEdit
 	//- 	#staff-info
-		//- 		h3.anime-header Links
+	//- 		h3.anime-section-name Links
 	//- 		table
 	//- 			tbody
 	//- 				tr
@@ -107,7 +104,7 @@ component Anime(anime *arn.Anime)
 	//- 						if providers.Nyaa && providers.Nyaa.episodes !== undefined
 	//- 							span(class=providers.Nyaa.episodes === 0 ? "entry-error" : "entry-ok")= providers.Nyaa.episodes + " eps"
 
-		h3.anime-header Links
+	h3.anime-section-name Links
 	.light-button-group
 		if anime.Links != nil
 			each link in anime.Links
@@ -134,7 +131,7 @@ component Anime(anime *arn.Anime)
 	//- 		if descriptionSource
 	//- 			span= " Summary by " + summarySource + "."
 	//- //-
-		//- 	h3.anime-header Synonyms
+	//- 	h3.anime-section-name Synonyms
 	//- 	if anime.title.synonyms
 	//- 		ul.anime-synonyms
 	//- 			li.anime-japanese-title= anime.title.japanese

pages/anime/anime.scarlet

@@ -0,0 +1,55 @@
+.anime-header
+	display flex
+	flex-flow row
+
+.anime-image-container
+	flex 1
+	display flex
+	flex-flow row
+	justify-content center
+	align-items flex-start
+
+.anime-image
+	width 230px
+	height auto
+	border-radius 3px
+	box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
+	filter saturate(100%)
+	transition all transition-speed ease
+	object-fit cover
+	:hover
+		filter saturate(150%)
+		box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
+
+.anime-info
+	flex 9999999
+	display flex
+	flex-flow column
+	margin-left content-padding
+
+.anime-title
+	text-align left
+
+.anime-alternative-title
+	font-size 0.9em
+	color rgba(60, 60, 60, 0.5) !important
+
+.sources
+	font-size 0.8em
+	opacity 0.5
+
+.relations
+	float left
+	display flex
+	flex-flow row wrap
+
+.relation
+	display flex
+	flex-flow column
+	font-size 0.9rem
+	align-items center
+	padding 0.5rem
+
+.relation-image
+	width 100px
+	height 141px

pages/anime/anime.styl

@@ -64,9 +64,9 @@
 	border-radius 3px
 	box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
 	filter saturate(100%)
-	transition all transitionSpeed ease
+	transition all transition-speed ease
 	object-fit cover
-	&:hover
+	:hover
 		filter saturate(130%)
 		box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
 

pages/dashboard/dashboard.pixy

@@ -1,6 +1,4 @@
 component Dashboard(posts []*arn.Post)
-	section
-		header
 	h2 Dash
 	
 	.dashboard-widget

pages/profile/profile.scarlet

@@ -0,0 +1,66 @@
+profile-boot-duration = 2s
+
+.profile
+	display flex
+	flex-flow row
+
+	position relative
+	left calc(content-padding * -1)
+	top calc(content-padding * -1)
+	min-width calc(100% + content-padding * 2)
+	padding calc(content-padding * 2)
+
+	color white
+	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
+
+	transition all transition-speed ease
+	animation-name appear
+	animation-duration transition-speed
+
+	overflow hidden
+
+// @keyframes appear
+// 	0%
+// 		transform rotateX(90deg)
+// 		filter opacity(0) saturate(0) blur(10px)
+// 	100%
+// 		transform rotateX(0)
+// 		filter opacity(1) saturate(1) blur(0)
+
+.profile-cover
+	position absolute
+	left 0
+	top 0
+	width 100%
+	height 100%
+	z-index -1
+	background-size cover
+	overflow hidden
+	
+	transition all transition-speed ease
+	animation cover-animation profile-boot-duration
+	animation-fill-mode forwards
+
+@keyframes cover-animation
+	0%
+		filter brightness(500%) blur(5px)
+	100%
+		filter brightness(35%) blur(0)
+
+.profile-image
+	border-radius 3px
+	width 320px !important
+	height 320px !important
+	object-fit cover
+
+.image-container
+	// ...
+
+.intro-container
+	display flex
+	flex-flow column
+	align-items flex-start
+	padding content-padding
+	padding-top 0
+	padding-left content-padding * 2
+	max-width 900px

pages/profile/profile.styl

@@ -2,17 +2,17 @@ profileBootDuration = 2s
 
 .profile
 	position relative
-	left contentPadding * -1
+	left content-padding * -1
-	top contentPadding * -1
+	top content-padding * -1
 	min-width calc(100% + 3rem)
-	padding contentPadding * 2
+	padding content-padding * 2
 
 	color white
 	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
 
-	transition all transitionSpeed ease
+	transition all transition-speed ease
 	animation-name appear
-	animation-duration transitionSpeed
+	animation-duration transition-speed
 
 	overflow hidden
 
@@ -38,7 +38,7 @@ profileBootDuration = 2s
 	background-size cover
 	overflow hidden
 	
-	transition all transitionSpeed ease
+	transition all transition-speed ease
 	animation cover-animation profileBootDuration
 	animation-fill-mode forwards
 
@@ -52,7 +52,7 @@ profileBootDuration = 2s
 	border-radius 3px
 	width 320px !important
 	height 320px !important
-	// padding contentPadding
+	// padding content-padding
 	object-fit cover
 
 #anime-list-container
@@ -74,7 +74,7 @@ profileBootDuration = 2s
 .image-container
 	float left
 	width auto
-	// padding contentPadding
+	// padding content-padding
 
 .intro-container
 	float left
@@ -82,9 +82,9 @@ profileBootDuration = 2s
 	display flex
 	flex-flow column
 	align-items center
-	padding contentPadding
+	padding content-padding
 	padding-top 0
-	padding-left contentPadding * 2
+	padding-left content-padding * 2
 	max-width 900px
 	// rotate-y()
 

styles/base.scarlet

@@ -0,0 +1,28 @@
+html
+	height 100%
+
+body
+	font-family "Ubuntu", "Trebuchet MS", sans-serif
+	font-size 1.05rem
+	tab-size 4
+	overflow hidden
+	height 100%
+	color text-color
+
+a
+	color link-color
+	text-decoration none
+	transition all transition-speed ease
+
+	:hover
+		color link-hover-color
+		text-decoration none
+	
+	:active
+		transform translateY(3px)
+
+strong
+	font-weight bold
+
+em
+	font-style italic

styles/config.scarlet

@@ -1 +1,17 @@
-fade-speed = 290ms
+// Colors
+text-color = rgb(60, 60, 60)
+main-color = rgb(248, 165, 130)
+link-color = rgb(245, 126, 76)
+link-hover-color = rgb(242, 93, 30)
+header-color = rgb(60, 60, 60)
+nav-link-color = rgb(160, 160, 160)
+nav-link-hover-color = rgb(255, 255, 255)
+
+// Distances
+content-padding = 1.5rem
+hover-line-size = 2px
+nav-height = 3.11rem
+
+// Timings
+fade-speed = 200ms
+transition-speed = 290ms

styles/content.scarlet

@@ -0,0 +1,5 @@
+#content
+	display flex
+	flex-flow column
+	padding content-padding
+	line-height 1.7em

styles/grid.scarlet

@@ -0,0 +1,80 @@
+.grid
+	display flex
+	flex-flow row wrap
+	justify-content center
+
+.grid-cell
+	position relative
+	
+	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
+
+	:hover
+		.backside-card
+			transform rotateY(180deg)
+			
+			.front
+				opacity 0
+			.back
+				opacity 1
+
+.backside-card
+	width 100%
+	height 100%
+	transition all transition-speed ease-in-out
+
+.front
+	position absolute
+	left 0
+	top 0
+	opacity 1
+	transition opacity transition-speed ease
+
+.back
+	position absolute
+	left 0
+	top 0
+	opacity 0
+	transition opacity transition-speed ease
+	transform rotateY(180deg)
+
+.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 link-color
+
+.grid-image
+	width 100%
+	height 100%
+	margin 0
+	border-radius 3px
+	object-fit cover

styles/headers.scarlet

@@ -0,0 +1,14 @@
+h1
+	font-size 3em
+
+h2
+	font-size 2em
+	font-weight bold
+	text-align center
+	line-height 1.2em
+
+h3
+	font-size 1.5em
+	line-height 1.6em
+	text-align left
+	margin-top 0.6em

styles/icons.scarlet

@@ -0,0 +1,2 @@
+i.fa
+	margin-right 0.5em

styles/layout.scarlet

@@ -0,0 +1,12 @@
+#container
+	height 100%
+	display flex
+	flex-flow column
+
+#header
+	background-color header-color
+
+#content-container
+	flex 1
+	overflow-x hidden
+	overflow-y scroll

styles/navigation.scarlet

@@ -0,0 +1,22 @@
+#navigation
+	display flex
+	flex-flow row
+	padding 0 content-padding
+	height nav-height
+	overflow hidden
+
+.navigation-link
+	color nav-link-color
+
+	:hover,
+	&.active
+		color nav-link-hover-color
+		cursor pointer
+
+	&.active
+		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
+
+.navigation-button
+	font-size 1.1em
+	line-height 1em
+	padding 0.75em 1em

styles/old/base.styl

@@ -5,8 +5,7 @@ body
 	font-family "Ubuntu", "Trebuchet MS", sans-serif
 	font-size 1.05rem
 	tab-size 4
-	overflow-x hidden
+	overflow hidden
-	overflow-y hidden
 	height 100%
 
 a

styles/old/navigation.styl

@@ -1,9 +1,7 @@
 #navigation
 	width 100%
 	height 100%
-	padding 0 contentPadding
+	padding 0 content-padding
-	margin 0 auto
-	z-index 0
 	box-sizing border-box
 
 .navigation-link
@@ -18,7 +16,7 @@
 		margin-top 0
 		height 3px
 		width 0px
-		transition all transitionSpeed ease
+		transition all transition-speed ease
 	&.active
 	&:hover
 		cursor pointer
@@ -31,4 +29,3 @@
 	padding 0.75em 1em
 	font-size 1.1em
 	line-height 1em
-	// transition all transitionSpeed ease

styles/old/video.styl

@@ -1,5 +1,4 @@
 .video-container
-	float left
 	width 100%
 
 .video

styles/typography.scarlet

@@ -0,0 +1,8 @@
+p, h1, h2, h3, h4, h5, h6
+	margin 0.4em 0
+
+	:first-child
+		margin-top 0
+
+	:last-child
+		margin-bottom 0

styles/video.scarlet

@@ -0,0 +1,6 @@
+.video-container
+	width 100%
+
+.video
+	width 100%
+	height calc(100vh - nav-height)