Started working on company previews

pages/companies/popular.go

@@ -8,7 +8,7 @@ import (
 	"github.com/animenotifier/notify.moe/utils/infinitescroll"
 )
 
-const maxPopularCompanies = 50
+const maxPopularCompanies = 60
 
 // Popular renders the best companies.
 func Popular(ctx *aero.Context) string {

pages/companies/popular.pixy

@@ -3,7 +3,7 @@ component PopularCompanies(companies []*arn.Company, nextIndex int, user *arn.Us
 
 	h1.page-title Popular companies
 
-	ol#load-more-target.companies
+	ol#load-more-target.popular-companies
 		PopularCompaniesScrollable(companies, user)
 
 	if nextIndex != -1
@@ -12,6 +12,11 @@ component PopularCompanies(companies []*arn.Company, nextIndex int, user *arn.Us
 
 component PopularCompaniesScrollable(companies []*arn.Company, user *arn.User)
 	each company in companies
-		li.company.mountable
-			a.ajax(href=company.Link())= company.Name.English
+		li.popular-company.mountable
+			a.popular-company-name.ajax(href=company.Link())
+				.popular-company-icon
+					Icon("building")
+				
+				span= company.Name.English
+			
 			//- span= " (" + strconv.Itoa(popularity[company.ID]) + ")"

pages/companies/popular.scarlet

@@ -0,0 +1,31 @@
+.popular-companies
+	horizontal-wrap
+	justify-content space-evenly
+
+.popular-company
+	display flex
+	width 100%
+	max-width 500px
+	margin 0
+	margin-bottom calc(content-padding / 4)
+	padding 0.5rem 0.75rem
+	ui-element
+
+.popular-company-icon
+	//
+
+.popular-company-name
+	horizontal
+	align-items center
+	clip-long-text
+
+.popular-company-anime-preview
+	flex 1
+
+> 900px
+	.popular-company
+		height 50px
+		padding 0.75rem 1rem
+
+	.popular-company-name
+		font-size 1.3rem