diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 49fe67a7..bc4d6c80 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -4,6 +4,8 @@ component Anime(anime *arn.Anime) .anime-image-container img.anime-cover-image(src=anime.Image, alt=anime.Title.Romaji) + .space + .anime-info h2.anime-title(title=anime.Type)= anime.Title.Romaji @@ -55,7 +57,7 @@ component Anime(anime *arn.Anime) .light-button-group each studio in anime.Studios a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank") - i.fa.fa-building.fa-fw + Icon("building") span= studio.Name //- //-if crunchy diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 8adaa8ba..f25ef644 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -1,3 +1,6 @@ +.anime-section-name + font-weight bold + .anime-header horizontal @@ -11,7 +14,7 @@ height auto border-radius 3px - transition all transition-speed ease + default-transition object-fit cover saturate-up @@ -20,7 +23,10 @@ .anime-info vertical flex 1 - margin-left content-padding + +.space + width content-padding + height content-padding .anime-title text-align left @@ -47,4 +53,13 @@ .relation-image width 100px - height 141px \ No newline at end of file + height 141px + border-radius 3px + object-fit cover + default-transition + scale-up + shadow-up + +< 800px + .anime-header + vertical \ No newline at end of file diff --git a/pages/anime/anime.styl b/pages/anime/anime.styl index c51946e2..f66533ed 100644 --- a/pages/anime/anime.styl +++ b/pages/anime/anime.styl @@ -60,7 +60,7 @@ border-radius 3px box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12) filter saturate(100%) - transition all transition-speed ease + default-transition object-fit cover :hover filter saturate(130%) diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index a124e5d3..36516e4f 100644 --- a/pages/profile/profile.scarlet +++ b/pages/profile/profile.scarlet @@ -13,7 +13,7 @@ profile-boot-duration = 2s color white text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5) - transition all transition-speed ease + default-transition animation-name appear animation-duration transition-speed @@ -37,7 +37,7 @@ profile-boot-duration = 2s background-size cover overflow hidden - transition all transition-speed ease + default-transition animation cover-animation profile-boot-duration animation-fill-mode forwards diff --git a/pages/profile/profile.styl b/pages/profile/profile.styl index e9f28194..2d32ee0f 100644 --- a/pages/profile/profile.styl +++ b/pages/profile/profile.styl @@ -10,7 +10,7 @@ profileBootDuration = 2s color white text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5) - transition all transition-speed ease + default-transition animation-name appear animation-duration transition-speed @@ -38,7 +38,7 @@ profileBootDuration = 2s background-size cover overflow hidden - transition all transition-speed ease + default-transition animation cover-animation profileBootDuration animation-fill-mode forwards diff --git a/pages/search/popular.scarlet b/pages/search/popular.scarlet index 4a9cda82..fa3aa153 100644 --- a/pages/search/popular.scarlet +++ b/pages/search/popular.scarlet @@ -13,4 +13,7 @@ .popular-anime-image width 100px !important height 141px !important - border-radius 3px \ No newline at end of file + border-radius 3px + object-fit cover + default-transition + shadow-up \ No newline at end of file diff --git a/mixins/AnimeGrid.scarlet b/styles/anime-grid.scarlet similarity index 100% rename from mixins/AnimeGrid.scarlet rename to styles/anime-grid.scarlet diff --git a/styles/base.scarlet b/styles/base.scarlet index 11c4f7f4..edbbbe5d 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -12,7 +12,7 @@ body a color link-color text-decoration none - transition all transition-speed ease + default-transition :hover color link-hover-color diff --git a/styles/config.scarlet b/styles/config.scarlet index 19e70868..028b3252 100644 --- a/styles/config.scarlet +++ b/styles/config.scarlet @@ -6,6 +6,7 @@ link-hover-color = rgb(242, 93, 30) header-color = rgb(60, 60, 60) nav-link-color = rgb(160, 160, 160) nav-link-hover-color = rgb(255, 255, 255) +post-highlight-color = rgba(248, 165, 130, 0.7) // UI ui-border = 1px solid rgba(0, 0, 0, 0.1) @@ -15,12 +16,12 @@ ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, // Shadow shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05) -shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.15) +shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.13) // 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) +outline-shadow-light = 0 0 6px rgba(0, 0, 0, 0.05) +outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13) +outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6) // Distances content-padding = 1.5rem diff --git a/styles/forum.scarlet b/styles/forum.scarlet new file mode 100644 index 00000000..381315ac --- /dev/null +++ b/styles/forum.scarlet @@ -0,0 +1,177 @@ +.forum-header + text-align left + +.post-content + ui-element + padding 0.4rem 1rem + +.thread-link + horizontal + +.thread-content-container + flex 1 + vertical + justify-content center + +.thread-content + horizontal + +.forum-tags + margin-bottom content-padding + +// Toolbar + +.post-tool + opacity 0.7 + &:hover + cursor pointer + opacity 1 + +.post-likes + opacity 0.4 + margin-right 0.4em + &:before + content "+" + +.post-permalink + color blue !important + +.post-delete + color rgb(255, 32, 12) !important + +.post-like + color green !important + +.post-unlike + color rgb(255, 32, 12) !important + +// Old + +// #posts +// display flex +// flex-flow column +// flex 1 +// max-width 100% + +// .post +// display flex +// flex-flow column +// margin 0.5rem 0 + +// [data-highlight="true"] +// .post-content +// border 2px solid post-highlight-color + +// .post-author +// text-align center +// flex-grow 0 +// display flex +// flex-flow row +// justify-content center +// margin-bottom -3px + +// img +// margin 0 !important + +// #post-input, +// .post-input +// width 100% +// min-height 150px +// margin 0.5rem 0 + +// .post-submit +// margin-top 0.5rem +// max-width 200px +// align-items flex-end + +// .post-toolbar +// display flex +// flex-flow row +// opacity 0 +// default-transition +// position absolute +// bottom 3px +// right 0 + +// .post-save +// float right +// :hover +// cursor pointer + +// .post-input-toolbar +// display flex +// flex-flow row + +// .post-tool +// opacity 0.7 +// :hover +// cursor pointer +// opacity 1 + +// .post-likes +// opacity 0.4 +// margin-right 0.4em +// :before +// content "+" + +// .post-permalink +// color blue !important + +// .post-delete +// color rgb(255, 32, 12) !important + +// .post-like +// color green !important + +// .post-unlike +// color rgb(255, 32, 12) !important + +// .post-content +// ui-element +// text-align left +// flex-grow 1 +// padding 0.4rem 1rem +// margin-left 0.3rem +// border-radius 3px +// position relative + +// :hover +// .post-toolbar +// opacity 1 + +// h1 +// font-size 1.5rem +// line-height 2em + +// h2 +// font-size 1.3rem +// line-height 2em +// font-weight normal + +// h3 +// font-size 1.1rem +// line-height 2em +// font-weight normal + +// .hidden +// display none + +// .thread +// display flex +// flex-flow column +// align-items center + +// .thread-title +// width auto + +// .posts +// width 100% +// max-width 830px + +// > 500px +// .post +// flex-flow row +// justify-content center + +// .post-author +// // \ No newline at end of file diff --git a/styles/grid.scarlet b/styles/grid.scarlet index d8cd093e..aecfcee9 100644 --- a/styles/grid.scarlet +++ b/styles/grid.scarlet @@ -55,7 +55,7 @@ mixin flip-card left 0 top 0 opacity 1 - transition all transition-speed ease + default-transition transform rotateY(0) .back @@ -63,5 +63,5 @@ mixin flip-card left 0 top 0 opacity 0 - transition all transition-speed ease + default-transition transform rotateY(180deg) \ No newline at end of file diff --git a/styles/light-button.scarlet b/styles/light-button.scarlet new file mode 100644 index 00000000..dc5e46d7 --- /dev/null +++ b/styles/light-button.scarlet @@ -0,0 +1,13 @@ +.light-button-group + horizontal-wrap + justify-content flex-start + font-size 0.9rem + +.light-button + display inline-block + padding 0.5rem 1rem + border-radius 3px + + :hover + color white !important + background-color link-hover-color \ No newline at end of file diff --git a/styles/mixins.scarlet b/styles/mixins.scarlet index 1cab6d15..b26ebe6b 100644 --- a/styles/mixins.scarlet +++ b/styles/mixins.scarlet @@ -1,3 +1,6 @@ +mixin default-transition + transition all transition-speed ease + mixin horizontal display flex flex-direction row @@ -18,8 +21,7 @@ mixin ui-element border ui-border background ui-background border-radius 3px - transition all transition-speed ease - + default-transition :hover border ui-hover-border background ui-hover-background @@ -48,4 +50,9 @@ mixin scale-up mixin shadow-up box-shadow shadow-light :hover - box-shadow shadow-medium \ No newline at end of file + box-shadow shadow-medium + +mixin outline-shadow-up + box-shadow outline-shadow-light + :hover + box-shadow outline-shadow-medium \ No newline at end of file diff --git a/styles/old/navigation.styl b/styles/old/navigation.styl index f020ef45..5199a50c 100644 --- a/styles/old/navigation.styl +++ b/styles/old/navigation.styl @@ -16,7 +16,7 @@ margin-top 0 height 3px width 0px - transition all transition-speed ease + default-transition &.active &:hover cursor pointer diff --git a/styles/user.scarlet b/styles/user.scarlet new file mode 100644 index 00000000..a721deaa --- /dev/null +++ b/styles/user.scarlet @@ -0,0 +1,6 @@ +.user-image + width 50px + height 50px + border-radius 100% + default-transition + outline-shadow-up \ No newline at end of file