Improved layout

This commit is contained in:
Eduard Urbach 2018-04-20 10:55:58 +02:00
parent dd10b8e1e4
commit 3aabd3003a
7 changed files with 47 additions and 37 deletions

View File

@ -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

View File

@ -1,2 +1,7 @@
.amvs-page
justify-content space-evenly !important
> 500px
.amvs-page
.amv
margin-bottom media-bottom-margin

View File

@ -1,2 +1,8 @@
.anime-amvs
horizontal-wrap
> 500px
.anime-amvs
.amv
max-width 200px
margin calc(content-padding / 2)

View File

@ -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

View File

@ -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

View File

@ -13,6 +13,7 @@ const soundtrack-margin = 1rem
> 500px
.soundtrack
margin soundtrack-margin
margin-bottom media-bottom-margin
.soundtrack-content
horizontal

View File

@ -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