web/notify.moe
Code Issues Pull Requests Activity

Improved scarlet styles

Browse Source
This commit is contained in:
Eduard Urbach 2016-11-30 00:50:50 +09:00
parent 125d200d2f
commit 5fe5c4a37d
13 changed files with 112 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config.json
View File

@ -15,6 +15,7 @@
"navigation",
"headers",
"forms",
"grid",
"colors",
"animelist",
"forum",

6
mixins/AnimeGrid.pixy
View File

@ -1,5 +1,5 @@
component AnimeGrid(animeList []*arn.Anime)
.grid
.anime-grid
each anime in animeList
a.grid-cell.grid-anime.ajax(href="/anime/" + toString(anime.ID))
img.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")
a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
img.anime-grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")

8
mixins/AnimeGrid.scarlet Normal file
View File

@ -0,0 +1,8 @@
.anime-grid
grid
.anime-grid-cell
grid-cell
.anime-grid-image
grid-image

4
mixins/Icon.pixy
View File

@ -1,5 +1,5 @@
component Icon(name string)
i(class="fa fa-fw fa-" + name)
component GridIcon(name string)
span(class="fa fa-" + name + " grid-icon")
component RawIcon(name string)
span(class="fa fa-" + name)

2
pages/anime/anime.pixy
View File

@ -2,7 +2,7 @@ component Anime(anime *arn.Anime)
.anime-header(data-id=anime.ID)
if anime.Image != ""
.anime-image-container
img.anime-image(src=anime.Image, alt=anime.Title.Romaji)
img.anime-cover-image(src=anime.Image, alt=anime.Title.Romaji)
.anime-info
h2.anime-title(title=anime.Type)= anime.Title.Romaji

2
pages/anime/anime.scarlet
View File

@ -7,7 +7,7 @@
justify-content center
align-items flex-start
.anime-image
.anime-cover-image
width 230px
height auto
border-radius 3px

16
pages/genres/genres.pixy
View File

@ -1,13 +1,13 @@
component Genres(genres []*arn.Genre)
h2 Genres
.grid
.genres
each genre in genres
a.grid-cell.ajax(href="/genres/" + genre.ID)
.backside-card.ui
.grid-text.front
GridIcon(arn.GetGenreIcon(genre.Name))
span= genre.Name
a.genre.ajax(href="/genres/" + genre.ID)
.genre-text.front
.genre-icon
RawIcon(arn.GetGenreIcon(genre.Name))
span= genre.Name
if len(genre.AnimeList) > 0
img.grid-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji + "\n" + genre.Name + " #1")
if len(genre.AnimeList) > 0
img.genre-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji + "\n" + genre.Name + " #1")

16
pages/genres/genres.scarlet Normal file
View File

@ -0,0 +1,16 @@
.genres
grid
.genre
grid-cell
flip-card
ui-element
.genre-text
grid-text
.genre-icon
grid-icon
.genre-image
grid-image

16
pages/search/popular.scarlet Normal file
View File

@ -0,0 +1,16 @@
.popular-title
text-align center
.popular-anime-list
display flex
flex-flow row wrap
justify-content center
.popular-anime
padding 0.5em
display block
.popular-anime-image
width 100px !important
height 141px !important
border-radius 3px

2
pages/search/search.styl
View File

@ -1,2 +0,0 @@
.popular-title
text-align center

11
styles/config.scarlet
View File

@ -7,6 +7,17 @@ header-color = rgb(60, 60, 60)
nav-link-color = rgb(160, 160, 160)
nav-link-hover-color = rgb(255, 255, 255)
// UI
ui-border = 1px solid rgba(0, 0, 0, 0.1)
ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
// Outline shadow
outline-shadow-light = 0 0 6px alpha(black, 0.05)
outline-shadow-medium = 0 0 6px alpha(black, 0.13)
outline-shadow-heavy = 0 0 6px alpha(black, 0.6)
// Distances
content-padding = 1.5rem
hover-line-size = 2px

77
styles/grid.scarlet
View File

@ -1,8 +1,8 @@
.grid
mixin grid
horizontal-wrap
justify-content center
.grid-cell
mixin grid-cell
position relative
flex-grow 0
@ -21,41 +21,7 @@
margin 0.5rem
:hover
.backside-card
transform rotateY(180deg)
.front
opacity 0
.back
opacity 1
.backside-card
width 100%
height 100%
transition all transition-speed ease-in-out
.front
position absolute
left 0
top 0
opacity 1
transition opacity transition-speed ease
.back
position absolute
left 0
top 0
opacity 0
transition opacity transition-speed ease
transform rotateY(180deg)
.grid-anime
border none
:hover
border none
.grid-text
mixin grid-text
vertical
width 100%
height 100%
@ -64,15 +30,38 @@
font-size 1rem
color rgb(160, 160, 160)
.grid-icon
mixin grid-image
width 100%
height 100%
border-radius 3px
object-fit cover
mixin grid-icon
font-size 2.5rem
margin-top 2rem
margin-bottom 0.7rem
color link-color
.grid-image
width 100%
height 100%
margin 0
border-radius 3px
object-fit cover
mixin flip-card
:hover
.front
transform rotateY(180deg)
opacity 0
.back
transform rotateY(0deg)
opacity 1
.front
position absolute
left 0
top 0
opacity 1
transition all transition-speed ease
.back
position absolute
left 0
top 0
opacity 0
transition all transition-speed ease
transform rotateY(180deg)

13
styles/mixins.scarlet
View File

@ -12,4 +12,15 @@ mixin vertical
mixin vertical-wrap
display flex
flex-flow column wrap
flex-flow column wrap
mixin ui-element
border ui-border
background ui-background
border-radius 3px
transition all transition-speed ease
&:hover
border ui-hover-border
background ui-hover-background
box-shadow outline-shadow-medium