Improved styles

pages/anime/anime.pixy

@@ -4,6 +4,8 @@ component Anime(anime *arn.Anime)
 			.anime-image-container
 				img.anime-cover-image(src=anime.Image, alt=anime.Title.Romaji)
 		
+		.space
+
 		.anime-info
 			h2.anime-title(title=anime.Type)= anime.Title.Romaji
 
@@ -55,7 +57,7 @@ component Anime(anime *arn.Anime)
 		.light-button-group
 			each studio in anime.Studios
 				a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank")
-					i.fa.fa-building.fa-fw
+					Icon("building")
 					span= studio.Name
 
 	//- //-if crunchy

pages/anime/anime.scarlet

@@ -1,3 +1,6 @@
+.anime-section-name
+	font-weight bold
+
 .anime-header
 	horizontal
 
@@ -11,7 +14,7 @@
 	height auto
 	border-radius 3px
 	
-	transition all transition-speed ease
+	default-transition
 	object-fit cover
 
 	saturate-up
@@ -20,7 +23,10 @@
 .anime-info
 	vertical
 	flex 1
-	margin-left content-padding
+
+.space
+	width content-padding
+	height content-padding
 
 .anime-title
 	text-align left
@@ -48,3 +54,12 @@
 .relation-image
 	width 100px
 	height 141px
+	border-radius 3px
+	object-fit cover
+	default-transition
+	scale-up
+	shadow-up
+
+< 800px
+	.anime-header
+		vertical

pages/anime/anime.styl

@@ -60,7 +60,7 @@
 	border-radius 3px
 	box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
 	filter saturate(100%)
-	transition all transition-speed ease
+	default-transition
 	object-fit cover
 	:hover
 		filter saturate(130%)

pages/profile/profile.scarlet

@@ -13,7 +13,7 @@ profile-boot-duration = 2s
 	color white
 	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
 
-	transition all transition-speed ease
+	default-transition
 	animation-name appear
 	animation-duration transition-speed
 
@@ -37,7 +37,7 @@ profile-boot-duration = 2s
 	background-size cover
 	overflow hidden
 	
-	transition all transition-speed ease
+	default-transition
 	animation cover-animation profile-boot-duration
 	animation-fill-mode forwards
 

pages/profile/profile.styl

@@ -10,7 +10,7 @@ profileBootDuration = 2s
 	color white
 	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
 
-	transition all transition-speed ease
+	default-transition
 	animation-name appear
 	animation-duration transition-speed
 
@@ -38,7 +38,7 @@ profileBootDuration = 2s
 	background-size cover
 	overflow hidden
 	
-	transition all transition-speed ease
+	default-transition
 	animation cover-animation profileBootDuration
 	animation-fill-mode forwards
 

pages/search/popular.scarlet

@@ -14,3 +14,6 @@
 	width 100px !important
 	height 141px !important
 	border-radius 3px
+	object-fit cover
+	default-transition
+	shadow-up

styles/base.scarlet

@@ -12,7 +12,7 @@ body
 a
 	color link-color
 	text-decoration none
-	transition all transition-speed ease
+	default-transition
 
 	:hover
 		color link-hover-color

styles/config.scarlet

@@ -6,6 +6,7 @@ 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)
+post-highlight-color = rgba(248, 165, 130, 0.7)
 
 // UI
 ui-border = 1px solid rgba(0, 0, 0, 0.1)
@@ -15,12 +16,12 @@ ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0,
 
 // Shadow
 shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
-shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.15)
+shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.13)
 
 // Outline shadow
-outline-shadow-light = 0 0 6px alpha(black, 0.05)
+outline-shadow-light = 0 0 6px rgba(0, 0, 0, 0.05)
-outline-shadow-medium = 0 0 6px alpha(black, 0.13)
+outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13)
-outline-shadow-heavy = 0 0 6px alpha(black, 0.6)
+outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
 
 // Distances
 content-padding = 1.5rem

styles/forum.scarlet

@@ -0,0 +1,177 @@
+.forum-header
+	text-align left
+
+.post-content
+	ui-element
+	padding 0.4rem 1rem
+
+.thread-link
+	horizontal
+
+.thread-content-container
+	flex 1
+	vertical
+	justify-content center
+
+.thread-content
+	horizontal
+
+.forum-tags
+	margin-bottom content-padding
+
+// Toolbar
+
+.post-tool
+	opacity 0.7
+	&:hover
+		cursor pointer
+		opacity 1
+
+.post-likes
+	opacity 0.4
+	margin-right 0.4em
+	&:before
+		content "+"
+
+.post-permalink
+	color blue !important
+
+.post-delete
+	color rgb(255, 32, 12) !important
+
+.post-like
+	color green !important
+
+.post-unlike
+	color rgb(255, 32, 12) !important
+
+// Old
+
+// #posts
+// 	display flex
+// 	flex-flow column
+// 	flex 1
+// 	max-width 100%
+
+// .post
+// 	display flex
+// 	flex-flow column
+// 	margin 0.5rem 0
+
+// 	[data-highlight="true"]
+// 		.post-content
+// 			border 2px solid post-highlight-color
+
+// .post-author
+// 	text-align center
+// 	flex-grow 0
+// 	display flex
+// 	flex-flow row
+// 	justify-content center
+// 	margin-bottom -3px
+
+// 	img
+// 		margin 0 !important
+
+// #post-input,
+// .post-input
+// 	width 100%
+// 	min-height 150px
+// 	margin 0.5rem 0
+
+// .post-submit
+// 	margin-top 0.5rem
+// 	max-width 200px
+// 	align-items flex-end
+
+// .post-toolbar
+// 	display flex
+// 	flex-flow row
+// 	opacity 0
+// 	default-transition
+// 	position absolute
+// 	bottom 3px
+// 	right 0
+
+// .post-save
+// 	float right
+// 	:hover
+// 		cursor pointer
+
+// .post-input-toolbar
+// 	display flex
+// 	flex-flow row
+
+// .post-tool
+// 	opacity 0.7
+// 	:hover
+// 		cursor pointer
+// 		opacity 1
+
+// .post-likes
+// 	opacity 0.4
+// 	margin-right 0.4em
+// 	:before
+// 		content "+"
+
+// .post-permalink
+// 	color blue !important
+
+// .post-delete
+// 	color rgb(255, 32, 12) !important
+
+// .post-like
+// 	color green !important
+
+// .post-unlike
+// 	color rgb(255, 32, 12) !important
+
+// .post-content
+// 	ui-element
+// 	text-align left
+// 	flex-grow 1
+// 	padding 0.4rem 1rem
+// 	margin-left 0.3rem
+// 	border-radius 3px
+// 	position relative
+
+// 	:hover
+// 		.post-toolbar
+// 			opacity 1
+
+// 	h1
+// 		font-size 1.5rem
+// 		line-height 2em
+
+// 	h2
+// 		font-size 1.3rem
+// 		line-height 2em
+// 		font-weight normal
+
+// 	h3
+// 		font-size 1.1rem
+// 		line-height 2em
+// 		font-weight normal
+
+// .hidden
+// 	display none
+
+// .thread
+// 	display flex
+// 	flex-flow column
+// 	align-items center
+
+// .thread-title
+// 	width auto
+	
+// .posts
+// 	width 100%
+// 	max-width 830px
+
+// > 500px
+// 	.post
+// 		flex-flow row
+// 		justify-content center
+
+// 	.post-author
+// 		//

styles/grid.scarlet

@@ -55,7 +55,7 @@ mixin flip-card
 	left 0
 	top 0
 	opacity 1
-	transition all transition-speed ease
+	default-transition
 	transform rotateY(0)
 
 .back
@@ -63,5 +63,5 @@ mixin flip-card
 	left 0
 	top 0
 	opacity 0
-	transition all transition-speed ease
+	default-transition
 	transform rotateY(180deg)

styles/light-button.scarlet

@@ -0,0 +1,13 @@
+.light-button-group
+	horizontal-wrap
+	justify-content flex-start
+	font-size 0.9rem
+
+.light-button
+	display inline-block
+	padding 0.5rem 1rem
+	border-radius 3px
+
+	:hover
+		color white !important
+		background-color link-hover-color

styles/mixins.scarlet

@@ -1,3 +1,6 @@
+mixin default-transition
+	transition all transition-speed ease
+
 mixin horizontal
 	display flex
 	flex-direction row
@@ -18,8 +21,7 @@ mixin ui-element
 	border ui-border
 	background ui-background
 	border-radius 3px
-	transition all transition-speed ease
+	default-transition
-
 	:hover
 		border ui-hover-border
 		background ui-hover-background
@@ -49,3 +51,8 @@ mixin shadow-up
 	box-shadow shadow-light
 	:hover
 		box-shadow shadow-medium
+
+mixin outline-shadow-up
+	box-shadow outline-shadow-light
+	:hover
+		box-shadow outline-shadow-medium

styles/old/navigation.styl

@@ -16,7 +16,7 @@
 		margin-top 0
 		height 3px
 		width 0px
-		transition all transition-speed ease
+		default-transition
 	&.active
 	&:hover
 		cursor pointer

styles/user.scarlet

@@ -0,0 +1,6 @@
+.user-image
+	width 50px
+	height 50px
+	border-radius 100%
+	default-transition
+	outline-shadow-up