Using constants for most CSS variables now

layout/sidebar/sidebar.scarlet

@@ -1,4 +1,4 @@
-sidebar-spacing-y = 0.7rem
+const sidebar-spacing-y = 0.7rem
 
 #sidebar
 	vertical

pages/frontpage/frontpage.scarlet

@@ -1,4 +1,4 @@
-frontpage-bg-color = rgb(32, 32, 32)
+const frontpage-bg-color = rgb(32, 32, 32)
 
 .frontpage-background
 	position absolute

pages/groups/groups.scarlet

@@ -1,5 +1,5 @@
-group-padding-y = 0.75rem
-group-padding-x = 0.75rem
+const group-padding-y = 0.75rem
+const group-padding-x = 0.75rem
 
 .groups
 	horizontal-wrap

pages/inventory/inventory.scarlet

@@ -1,4 +1,4 @@
-inventory-slot-size = 64px
+const inventory-slot-size = 64px
 
 .inventory
 	display grid

pages/profile/profile.scarlet

@@ -1,5 +1,3 @@
-profile-boot-duration = 2s
-
 .profile
 	vertical
 	align-items center
@@ -78,9 +76,7 @@ profile-boot-duration = 2s
 		padding content-padding
 		margin-top 0
 
-	// .profile-pro-status-text
-	// 	display none
-
+// const profile-boot-duration = 2s
 // animation appear
 // 	0%
 // 		transform rotateX(90deg)

pages/shop/shop.scarlet

@@ -1,5 +1,5 @@
-item-color-pro-account = hsl(0, 100%, 71%)
-item-color-anime-support-ticket = hsl(217, 64%, 50%)
+const item-color-pro-account = hsl(0, 100%, 71%)
+const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 
 .shop-items
 	horizontal-wrap

styles/embedded.scarlet

@@ -1,4 +1,4 @@
-remove-margin = 1.1rem
+const remove-margin = 1.1rem
 
 .embedded
 	// Put navigation to the bottom of the screen

styles/loading.scarlet

@@ -1,5 +1,5 @@
-loading-anim-duration = 0.8s
-loading-anim-size = 24px
+const loading-anim-duration = 0.8s
+const loading-anim-size = 24px
 
 #loading
 	position fixed

styles/video.scarlet

@@ -1,4 +1,4 @@
-video-padding = 56.25%
+const video-padding = 56.25%
 
 .video-container
 	position relative