Added media icons to sidebar (closes #52)

layout/sidebar/sidebar.pixy

@@ -51,6 +51,9 @@ component Sidebar(user *arn.User)
 		else
 			SidebarButton("Login", "/login", "sign-in")
 
+		.sidebar-social-media
+			SocialMediaButtons
+
 component SidebarButton(name string, target string, icon string)
 	a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true")
 		.sidebar-button

mixins/SocialMedia.pixy

@@ -0,0 +1,36 @@
+component SocialMediaLinks
+	a.footer-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
+		Icon("microphone")
+		span Discord
+
+	a.footer-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
+		Icon("facebook")
+		span Facebook
+
+	a.footer-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
+		Icon("twitter")
+		span Twitter
+
+	a.footer-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
+		Icon("google-plus")
+		span Google+
+
+	a.footer-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
+		Icon("github")
+		span GitHub
+
+component SocialMediaButtons
+	a.social-media-button.circle-1(href="https://discord.gg/0kimAmMCeXGXuzNF", title="Discord", target="_blank", rel="noopener")
+		RawIcon("microphone")
+
+	a.social-media-button.circle-2(href="https://www.facebook.com/animenotifier", title="Facebook", target="_blank", rel="noopener")
+		RawIcon("facebook-square")
+
+	a.social-media-button.circle-3(href="https://twitter.com/animenotifier", title="Twitter", target="_blank", rel="noopener")
+		RawIcon("twitter-square")
+
+	a.social-media-button.circle-4(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", title="Google+", target="_blank", rel="noopener")
+		RawIcon("google-plus-square")
+
+	a.social-media-button.circle-5(href="https://github.com/animenotifier/notify.moe", title="GitHub", target="_blank", rel="noopener")
+		RawIcon("github")

pages/anime/anime.scarlet

@@ -189,17 +189,6 @@
 	.user-avatars
 		justify-content flex-start
 
-.footer
-	font-size 0.8rem
-	opacity 0.7
-	margin-top 0.5rem
-
-	&.mountable
-		opacity 0 !important
-
-	&.mounted
-		opacity 0.7 !important
-
 .relations
 	horizontal-wrap
 

pages/frontpage/frontpage.pixy

@@ -14,26 +14,5 @@ component FrontPage
 		source(src="//cdn-e2.streamable.com/video/mp4/e5mx7.mp4?token=1500414089_8b2b3b0665984dcf4dc8d33e534bc1c8881b2da1", type="video/mp4")
 
 component Footer
-	.footer.text-center.mountable
+	.footer.mountable
 		SocialMediaLinks
-
-component SocialMediaLinks
-	a.footer-element(href="https://discord.gg/0kimAmMCeXGXuzNF", target="_blank", rel="noopener")
-		Icon("microphone")
-		span Discord
-
-	a.footer-element(href="https://www.facebook.com/animenotifier", target="_blank", rel="noopener")
-		Icon("facebook")
-		span Facebook
-
-	a.footer-element(href="https://twitter.com/animenotifier", target="_blank", rel="noopener")
-		Icon("twitter")
-		span Twitter
-
-	a.footer-element(href="https://plus.google.com/+AnimeReleaseNotifierOfficial", target="_blank", rel="noopener")
-		Icon("google-plus")
-		span Google+
-
-	a.footer-element(href="https://github.com/animenotifier/notify.moe", target="_blank", rel="noopener")
-		Icon("github")
-		span GitHub

pages/inventory/inventory.pixy

@@ -14,5 +14,5 @@ component Inventory(inventory *arn.Inventory, viewUser *arn.User, user *arn.User
 					if slot.Quantity > 1
 						.inventory-slot-quantity= slot.Quantity
 
-	.footer.text-center.mountable
+	.footer.mountable
 		p You can consume items by double-clicking them.

pages/profile/stats.pixy

@@ -9,7 +9,7 @@ component ProfileStats(stats *utils.UserStats, viewUser *arn.User, user *arn.Use
 					span= pie.Title
 				PieChart(pie.Slices)
 
-	.footer.text-center
+	.footer
 		span= viewUser.Nick + " spent "
 		span= int(stats.AnimeWatchingTime / time.Hour / 24)
 		span  days watching anime.

pages/soundtrack/soundtrack.pixy

@@ -34,7 +34,7 @@ component Track(track *arn.SoundTrack, user *arn.User)
 				.tags
 					each tag in track.Tags
 						.tag= tag
-		.footer.text-center.mountable
+		.footer.mountable
 			if track.EditedBy != ""
 				span Edited
 				span.utc-date(data-date=track.Edited)

styles/footer.scarlet

@@ -0,0 +1,11 @@
+.footer
+	text-align center
+	font-size 0.8rem
+	opacity 0.7
+	margin-top 0.5rem
+
+	&.mountable
+		opacity 0 !important
+
+	&.mounted
+		opacity 0.7 !important

styles/social-media.scarlet

@@ -0,0 +1,52 @@
+.sidebar-social-media
+	horizontal
+	justify-content space-around
+	padding 0.6rem 0
+	border-top 1px solid rgba(0, 0, 0, 0.1)
+
+.social-media-button
+	opacity 0.25
+	color text-color
+
+	:hover
+		transform scale(1.1)
+		opacity 1
+
+// .sidebar-social-media
+// 	position relative
+// 	width 6rem
+// 	height 6rem
+// 	// border dashed 1px
+// 	// border-radius 50%
+// 	margin content-padding auto
+// 	default-transition
+
+// 	:hover
+// 		transform scale(1.2)
+
+// .social-media-button
+// 	display block
+// 	position absolute
+// 	left 50%
+// 	top 50%
+// 	width 4rem
+// 	height 4rem
+// 	margin -0.5rem
+// 	color text-color
+
+// circle-start = 160deg
+
+// .circle-1
+// 	transform rotate(circle-start) translate(2rem) rotate(calc(circle-start * -1))
+
+// .circle-2
+// 	transform rotate(calc(circle-start + 72deg)) translate(2rem) rotate(calc((circle-start + 72deg) * -1))
+
+// .circle-3
+// 	transform rotate(calc(circle-start + 144deg)) translate(2rem) rotate(calc((circle-start + 144deg) * -1))
+
+// .circle-4
+// 	transform rotate(calc(circle-start + 216deg)) translate(2rem) rotate(calc((circle-start + 216deg) * -1))
+
+// .circle-5
+// 	transform rotate(calc(circle-start + 288deg)) translate(2rem) rotate(calc((circle-start + 288deg) * -1))