Improved character page design
This commit is contained in:
parent
07ab02fbd1
commit
c7f482c525
@ -32,8 +32,7 @@
|
|||||||
> 800px
|
> 800px
|
||||||
.anime-header
|
.anime-header
|
||||||
horizontal
|
horizontal
|
||||||
padding-bottom content-padding
|
page-header
|
||||||
border-bottom 1px solid rgba(0, 0, 0, 0.05)
|
|
||||||
|
|
||||||
.anime-title
|
.anime-title
|
||||||
text-align left
|
text-align left
|
||||||
|
@ -37,21 +37,24 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
|
|||||||
|
|
||||||
.character-description.mountable!= markdown.Render(character.Description)
|
.character-description.mountable!= markdown.Render(character.Description)
|
||||||
|
|
||||||
h3.mountable Anime
|
.character-main-column
|
||||||
|
if len(characterAnime) > 0
|
||||||
|
.character-section
|
||||||
|
h3.character-section-name.mountable Anime
|
||||||
|
|
||||||
.character-anime.mountable
|
.character-anime.mountable
|
||||||
each anime in characterAnime
|
each anime in characterAnime
|
||||||
a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
|
a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
|
||||||
img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
|
img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
|
||||||
|
|
||||||
if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
|
if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])
|
||||||
h3.mountable Quotes
|
.character-section
|
||||||
|
h3.character-section-name.mountable Quotes
|
||||||
|
|
||||||
.character-quotes.mountable
|
.quotes.character-quotes.mountable
|
||||||
each quote in quotes
|
each quote in quotes
|
||||||
if mainQuote == nil || quote.ID != mainQuote.ID
|
if mainQuote == nil || quote.ID != mainQuote.ID
|
||||||
.character-quote
|
Quote(quote, user)
|
||||||
Quote(quote, user)
|
|
||||||
|
|
||||||
.character-sidebar
|
.character-sidebar
|
||||||
if len(character.Attributes) > 0
|
if len(character.Attributes) > 0
|
||||||
|
@ -16,7 +16,6 @@
|
|||||||
vertical
|
vertical
|
||||||
justify-content flex-start
|
justify-content flex-start
|
||||||
align-items center
|
align-items center
|
||||||
margin-bottom 1rem
|
|
||||||
|
|
||||||
.character-image-large
|
.character-image-large
|
||||||
width 219px
|
width 219px
|
||||||
@ -50,9 +49,9 @@
|
|||||||
anime-mini-item-image
|
anime-mini-item-image
|
||||||
|
|
||||||
.character-quotes
|
.character-quotes
|
||||||
vertical
|
justify-content flex-start
|
||||||
|
|
||||||
.character-quote
|
.character-quotes
|
||||||
footer,
|
footer,
|
||||||
.quote-footer
|
.quote-footer
|
||||||
display none
|
display none
|
||||||
@ -64,12 +63,19 @@
|
|||||||
.relevant-characters
|
.relevant-characters
|
||||||
horizontal-wrap
|
horizontal-wrap
|
||||||
|
|
||||||
|
.character-section
|
||||||
|
margin-top 1rem
|
||||||
|
|
||||||
|
.character-section-name
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
> 1250px
|
> 1250px
|
||||||
.character-page
|
.character-page
|
||||||
horizontal
|
horizontal
|
||||||
|
|
||||||
.character-header
|
.character-header
|
||||||
horizontal
|
horizontal
|
||||||
|
page-header
|
||||||
|
|
||||||
.character-name
|
.character-name
|
||||||
text-align left
|
text-align left
|
||||||
|
3
styles/mixins/page-header.scarlet
Normal file
3
styles/mixins/page-header.scarlet
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
mixin page-header
|
||||||
|
padding-bottom content-padding
|
||||||
|
border-bottom 1px solid rgba(0, 0, 0, 0.05)
|
Loading…
Reference in New Issue
Block a user