From 5fe5c4a37d81265cd9d655c02b50784c8c47f88c Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 30 Nov 2016 00:50:50 +0900 Subject: [PATCH] Improved scarlet styles --- config.json | 1 + mixins/AnimeGrid.pixy | 6 +-- mixins/AnimeGrid.scarlet | 8 ++++ mixins/Icon.pixy | 4 +- pages/anime/anime.pixy | 2 +- pages/anime/anime.scarlet | 2 +- pages/genres/genres.pixy | 16 ++++---- pages/genres/genres.scarlet | 16 ++++++++ pages/search/popular.scarlet | 16 ++++++++ pages/search/search.styl | 2 - styles/config.scarlet | 11 ++++++ styles/grid.scarlet | 77 ++++++++++++++++-------------------- styles/mixins.scarlet | 13 +++++- 13 files changed, 112 insertions(+), 62 deletions(-) create mode 100644 mixins/AnimeGrid.scarlet create mode 100644 pages/genres/genres.scarlet create mode 100644 pages/search/popular.scarlet delete mode 100644 pages/search/search.styl diff --git a/config.json b/config.json index 4cdf58b1..205bbd19 100644 --- a/config.json +++ b/config.json @@ -15,6 +15,7 @@ "navigation", "headers", "forms", + "grid", "colors", "animelist", "forum", diff --git a/mixins/AnimeGrid.pixy b/mixins/AnimeGrid.pixy index b4022d0f..268e4d17 100644 --- a/mixins/AnimeGrid.pixy +++ b/mixins/AnimeGrid.pixy @@ -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) + ")") \ No newline at end of file + 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) + ")") \ No newline at end of file diff --git a/mixins/AnimeGrid.scarlet b/mixins/AnimeGrid.scarlet new file mode 100644 index 00000000..87d4c552 --- /dev/null +++ b/mixins/AnimeGrid.scarlet @@ -0,0 +1,8 @@ +.anime-grid + grid + +.anime-grid-cell + grid-cell + +.anime-grid-image + grid-image \ No newline at end of file diff --git a/mixins/Icon.pixy b/mixins/Icon.pixy index b5594def..e46e2995 100644 --- a/mixins/Icon.pixy +++ b/mixins/Icon.pixy @@ -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") \ No newline at end of file +component RawIcon(name string) + span(class="fa fa-" + name) \ No newline at end of file diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 4ca603fc..49fe67a7 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -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 diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 9da8d796..c7159158 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -7,7 +7,7 @@ justify-content center align-items flex-start -.anime-image +.anime-cover-image width 230px height auto border-radius 3px diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy index c2927ced..4d44bfa8 100644 --- a/pages/genres/genres.pixy +++ b/pages/genres/genres.pixy @@ -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") \ No newline at end of file + 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") \ No newline at end of file diff --git a/pages/genres/genres.scarlet b/pages/genres/genres.scarlet new file mode 100644 index 00000000..92d4c1ca --- /dev/null +++ b/pages/genres/genres.scarlet @@ -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 \ No newline at end of file diff --git a/pages/search/popular.scarlet b/pages/search/popular.scarlet new file mode 100644 index 00000000..4a9cda82 --- /dev/null +++ b/pages/search/popular.scarlet @@ -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 \ No newline at end of file diff --git a/pages/search/search.styl b/pages/search/search.styl deleted file mode 100644 index 834626b9..00000000 --- a/pages/search/search.styl +++ /dev/null @@ -1,2 +0,0 @@ -.popular-title - text-align center \ No newline at end of file diff --git a/styles/config.scarlet b/styles/config.scarlet index 526a5fec..483f315d 100644 --- a/styles/config.scarlet +++ b/styles/config.scarlet @@ -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 diff --git a/styles/grid.scarlet b/styles/grid.scarlet index 29091522..7bb2eeb8 100644 --- a/styles/grid.scarlet +++ b/styles/grid.scarlet @@ -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 \ No newline at end of file +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) \ No newline at end of file diff --git a/styles/mixins.scarlet b/styles/mixins.scarlet index ea99260d..a5602944 100644 --- a/styles/mixins.scarlet +++ b/styles/mixins.scarlet @@ -12,4 +12,15 @@ mixin vertical mixin vertical-wrap display flex - flex-flow column wrap \ No newline at end of file + 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 \ No newline at end of file