From 3aabd3003a8fc369964b6c34023cc43250c5178e Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Fri, 20 Apr 2018 10:55:58 +0200
Subject: [PATCH] Improved layout

---
 pages/amv/amv.scarlet                 |  6 ++----
 pages/amvs/amvs.scarlet               |  7 +++++-
 pages/anime/amvs.scarlet              |  8 ++++++-
 pages/anime/anime.scarlet             | 31 ---------------------------
 pages/anime/soundtracks.scarlet       | 30 ++++++++++++++++++++++++++
 pages/soundtracks/soundtracks.scarlet |  1 +
 styles/include/config.scarlet         |  1 +
 7 files changed, 47 insertions(+), 37 deletions(-)
 create mode 100644 pages/anime/soundtracks.scarlet

diff --git a/pages/amv/amv.scarlet b/pages/amv/amv.scarlet
index e6768576..8d52a0a9 100644
--- a/pages/amv/amv.scarlet
+++ b/pages/amv/amv.scarlet
@@ -40,6 +40,8 @@ const amv-large-width = 854px
 
 	img
 		border-radius ui-element-border-radius
+		width anime-image-small-width
+		height anime-image-small-height
 
 .amv-links
 	//
@@ -53,10 +55,6 @@ const amv-large-width = 854px
 		justify-content flex-start
 		margin-top 0
 
-	.amv
-		max-width 200px
-		margin calc(content-padding / 2)
-
 	.amvs
 		.amv
 			max-width 520px
diff --git a/pages/amvs/amvs.scarlet b/pages/amvs/amvs.scarlet
index 7c9bf615..83ce701c 100644
--- a/pages/amvs/amvs.scarlet
+++ b/pages/amvs/amvs.scarlet
@@ -1,2 +1,7 @@
 .amvs-page
-	justify-content space-evenly !important
\ No newline at end of file
+	justify-content space-evenly !important
+
+> 500px
+	.amvs-page
+		.amv
+			margin-bottom media-bottom-margin
\ No newline at end of file
diff --git a/pages/anime/amvs.scarlet b/pages/anime/amvs.scarlet
index 48f541c7..a3fb6451 100644
--- a/pages/anime/amvs.scarlet
+++ b/pages/anime/amvs.scarlet
@@ -1,2 +1,8 @@
 .anime-amvs
-	horizontal-wrap
\ No newline at end of file
+	horizontal-wrap
+
+> 500px
+	.anime-amvs
+		.amv
+			max-width 200px
+			margin calc(content-padding / 2)
\ No newline at end of file
diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet
index 87629f7f..92d18c4a 100644
--- a/pages/anime/anime.scarlet
+++ b/pages/anime/anime.scarlet
@@ -70,37 +70,6 @@
 .anime-info-value
 	text-align right
 
-.anime-soundtracks
-	vertical
-
-	.soundtrack
-		margin 1rem 0
-
-	.soundtrack-content
-		border-bottom-left-radius ui-element-border-radius !important
-		border-top-left-radius ui-element-border-radius !important
-
-	.soundtrack-anime-image
-		display none
-
-> 500px
-	.anime-soundtracks
-		horizontal-wrap
-		justify-content flex-start
-
-		.soundtrack
-			max-width 200px
-			margin calc(content-padding / 2)
-
-		.soundtrack-content
-			min-height 112px
-			height 112px
-
-		.soundtrack-play-button
-			width 48px
-			height 48px
-			font-size 1rem
-
 .anime-section
 	margin-top 1rem
 
diff --git a/pages/anime/soundtracks.scarlet b/pages/anime/soundtracks.scarlet
new file mode 100644
index 00000000..e387a35e
--- /dev/null
+++ b/pages/anime/soundtracks.scarlet
@@ -0,0 +1,30 @@
+.anime-soundtracks
+	vertical
+
+	.soundtrack
+		margin 1rem 0
+
+	.soundtrack-content
+		border-bottom-left-radius ui-element-border-radius !important
+		border-top-left-radius ui-element-border-radius !important
+
+	.soundtrack-anime-image
+		display none
+
+> 500px
+	.anime-soundtracks
+		horizontal-wrap
+		justify-content flex-start
+
+		.soundtrack
+			max-width 200px
+			margin calc(content-padding / 2)
+
+		.soundtrack-content
+			min-height 112px
+			height 112px
+
+		.soundtrack-play-button
+			width 48px
+			height 48px
+			font-size 1rem
\ No newline at end of file
diff --git a/pages/soundtracks/soundtracks.scarlet b/pages/soundtracks/soundtracks.scarlet
index 938b4bb1..95d1692e 100644
--- a/pages/soundtracks/soundtracks.scarlet
+++ b/pages/soundtracks/soundtracks.scarlet
@@ -13,6 +13,7 @@ const soundtrack-margin = 1rem
 > 500px
 	.soundtrack
 		margin soundtrack-margin
+		margin-bottom media-bottom-margin
 
 .soundtrack-content
 	horizontal
diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet
index 9d2568d5..7ab7cf88 100644
--- a/styles/include/config.scarlet
+++ b/styles/include/config.scarlet
@@ -105,6 +105,7 @@ const content-padding = 1.6rem
 const content-padding-top = 1.6rem
 const content-line-height = 1.7em
 const typography-margin = 0.4rem
+const media-bottom-margin = 2rem
 
 // Sizes
 const anime-image-tiny-width = 39px