Everything is scarlet now

.gitignore

@@ -38,4 +38,7 @@ debug
 /components
 
 # binaries
-/notify.moe
+/notify.moe
+
+# DB
+/db

pages/anime/anime.scarlet

@@ -1,9 +1,13 @@
-.anime-section-name
-	font-weight bold
-
 .anime-header
 	horizontal
 
+< 800px
+	.anime-header
+		vertical
+
+.anime-section-name
+	font-weight bold
+
 .anime-image-container
 	horizontal
 	justify-content center
@@ -58,8 +62,4 @@
 	object-fit cover
 	default-transition
 	scale-up
-	shadow-up
+	shadow-up
-
-< 800px
-	.anime-header
-		vertical

pages/profile/profile.scarlet

@@ -14,18 +14,17 @@ profile-boot-duration = 2s
 	text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
 
 	default-transition
-	animation-name appear
+	animation appear transition-speed
-	animation-duration transition-speed
 
 	overflow hidden
 
-// @keyframes appear
+animation appear
-// 	0%
+	0%
-// 		transform rotateX(90deg)
+		transform rotateX(90deg)
-// 		filter opacity(0) saturate(0) blur(10px)
+		filter opacity(0) saturate(0) blur(10px)
-// 	100%
+	100%
-// 		transform rotateX(0)
+		transform rotateX(0)
-// 		filter opacity(1) saturate(1) blur(0)
+		filter opacity(1) saturate(1) blur(0)
 
 .profile-cover
 	position absolute
@@ -41,7 +40,7 @@ profile-boot-duration = 2s
 	animation cover-animation profile-boot-duration
 	animation-fill-mode forwards
 
-@keyframes cover-animation
+animation cover-animation
 	0%
 		filter brightness(500%) blur(5px)
 	100%

pages/search/search.scarlet

@@ -0,0 +1,7 @@
+#search-container
+	horizontal
+	justify-content center
+
+#search
+	width 100%
+	max-width 560px

styles/config.scarlet

@@ -3,9 +3,6 @@ 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)
 post-highlight-color = rgba(248, 165, 130, 0.7)
 
 // UI
@@ -13,6 +10,15 @@ ui-border = 1px solid rgba(0, 0, 0, 0.1)
 ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
 ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
+ui-disabled-color = rgb(224, 224, 224)
+
+// Navigation
+nav-color = rgb(60, 60, 60)
+nav-link-color = rgb(160, 160, 160)
+nav-link-hover-color = rgb(255, 255, 255)
+// nav-color = rgb(245, 245, 245)
+// nav-link-color = rgb(160, 160, 160)
+// nav-link-hover-color = rgb(80, 80, 80)
 
 // Shadow
 shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)

styles/forms.scarlet

@@ -0,0 +1,37 @@
+input, textarea, button, select
+	font-family inherit
+	font-size 1rem
+	padding 0.4em 0.8em
+	border-radius 3px
+	color text-color
+	default-transition
+
+input, textarea
+	border ui-border
+	background-color white
+	box-shadow none
+	:focus
+		color black
+		border 1px solid main-color
+		// TODO: Replace with alpha(main-color, 20%) function
+		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
+	:disabled
+		ui-disabled
+
+// button, select
+// 	ui-element
+// 	box-shadow 0 0 2px white, 0 -2px 5px rgba(0, 0, 0, 0.08) inset
+// 	:focus
+// 		color rgb(0, 0, 0)
+// 		box-shadow 0 0 6px alpha(mainColor, 20%)
+// 		border 1px solid mainColor
+
+// input[type="submit"]:hover,
+// button:hover
+// 	cursor pointer
+// 	text-decoration none
+
+// button[disabled]
+// 	opacity 0.5
+// 	:hover
+// 		cursor not-allowed

styles/layout.scarlet

@@ -2,9 +2,6 @@
 	vertical
 	height 100%
 
-#header
-	background-color header-color
-
 #content-container
 	flex 1
 	overflow-x hidden

styles/mixins.scarlet

@@ -27,6 +27,10 @@ mixin ui-element
 		background ui-hover-background
 		box-shadow outline-shadow-medium
 
+mixin ui-disabled
+	background-color ui-disabled-color
+	cursor not-allowed
+
 mixin light-up
 	filter brightness(0.4) saturate(1)
 	:hover

styles/navigation.scarlet

@@ -3,17 +3,32 @@
 	padding 0 content-padding
 	height nav-height
 	overflow hidden
+	background-color nav-color
+	// border-bottom ui-border
 
 .navigation-link
 	color nav-link-color
 
+	:after
+		content ""
+		display block
+		height 3px
+		background-color main-color
+		transform scaleX(0)
+		opacity 0
+		default-transition
+
 	:hover,
 	&.active
 		color nav-link-hover-color
 		cursor pointer
+		:after
+			transform scaleX(1.0)
+			opacity 1
 
 	&.active
-		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
+		// text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
+		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1)
 
 .navigation-button
 	font-size 1.1em

styles/typography.scarlet

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