From 31dfc47d5ca928eb161a00ecf15f3b329e95647a Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 2 Dec 2016 00:27:53 +0900 Subject: [PATCH] Everything is scarlet now --- .gitignore | 5 ++++- pages/anime/anime.scarlet | 16 +++++++-------- pages/profile/profile.scarlet | 19 +++++++++--------- pages/search/search.scarlet | 7 +++++++ styles/config.scarlet | 12 +++++++++--- styles/forms.scarlet | 37 +++++++++++++++++++++++++++++++++++ styles/layout.scarlet | 3 --- styles/mixins.scarlet | 4 ++++ styles/navigation.scarlet | 17 +++++++++++++++- styles/typography.scarlet | 2 +- 10 files changed, 95 insertions(+), 27 deletions(-) create mode 100644 pages/search/search.scarlet create mode 100644 styles/forms.scarlet diff --git a/.gitignore b/.gitignore index 5624a33a..fbec061f 100644 --- a/.gitignore +++ b/.gitignore @@ -38,4 +38,7 @@ debug /components # binaries -/notify.moe \ No newline at end of file +/notify.moe + +# DB +/db \ No newline at end of file diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index f25ef644..e9b6f8ac 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -1,9 +1,13 @@ -.anime-section-name - font-weight bold - .anime-header horizontal +< 800px + .anime-header + vertical + +.anime-section-name + font-weight bold + .anime-image-container horizontal justify-content center @@ -58,8 +62,4 @@ object-fit cover default-transition scale-up - shadow-up - -< 800px - .anime-header - vertical \ No newline at end of file + shadow-up \ No newline at end of file diff --git a/pages/profile/profile.scarlet b/pages/profile/profile.scarlet index 36516e4f..da4b6647 100644 --- a/pages/profile/profile.scarlet +++ b/pages/profile/profile.scarlet @@ -14,18 +14,17 @@ profile-boot-duration = 2s text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5) default-transition - animation-name appear - animation-duration transition-speed + animation appear transition-speed overflow hidden -// @keyframes appear -// 0% -// transform rotateX(90deg) -// filter opacity(0) saturate(0) blur(10px) -// 100% -// transform rotateX(0) -// filter opacity(1) saturate(1) blur(0) +animation appear + 0% + transform rotateX(90deg) + filter opacity(0) saturate(0) blur(10px) + 100% + transform rotateX(0) + filter opacity(1) saturate(1) blur(0) .profile-cover position absolute @@ -41,7 +40,7 @@ profile-boot-duration = 2s animation cover-animation profile-boot-duration animation-fill-mode forwards -@keyframes cover-animation +animation cover-animation 0% filter brightness(500%) blur(5px) 100% diff --git a/pages/search/search.scarlet b/pages/search/search.scarlet new file mode 100644 index 00000000..3c6d31ba --- /dev/null +++ b/pages/search/search.scarlet @@ -0,0 +1,7 @@ +#search-container + horizontal + justify-content center + +#search + width 100% + max-width 560px \ No newline at end of file diff --git a/styles/config.scarlet b/styles/config.scarlet index 028b3252..85b059d9 100644 --- a/styles/config.scarlet +++ b/styles/config.scarlet @@ -3,9 +3,6 @@ text-color = rgb(60, 60, 60) main-color = rgb(248, 165, 130) link-color = rgb(245, 126, 76) 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 @@ -13,6 +10,15 @@ 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%) +ui-disabled-color = rgb(224, 224, 224) + +// Navigation +nav-color = rgb(60, 60, 60) +nav-link-color = rgb(160, 160, 160) +nav-link-hover-color = rgb(255, 255, 255) +// nav-color = rgb(245, 245, 245) +// nav-link-color = rgb(160, 160, 160) +// nav-link-hover-color = rgb(80, 80, 80) // Shadow shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05) diff --git a/styles/forms.scarlet b/styles/forms.scarlet new file mode 100644 index 00000000..60a7c37b --- /dev/null +++ b/styles/forms.scarlet @@ -0,0 +1,37 @@ +input, textarea, button, select + font-family inherit + font-size 1rem + padding 0.4em 0.8em + border-radius 3px + color text-color + default-transition + +input, textarea + border ui-border + background-color white + box-shadow none + :focus + color black + border 1px solid main-color + // TODO: Replace with alpha(main-color, 20%) function + box-shadow 0 0 6px rgba(248, 165, 130, 0.2) + :disabled + ui-disabled + +// button, select +// ui-element +// box-shadow 0 0 2px white, 0 -2px 5px rgba(0, 0, 0, 0.08) inset +// :focus +// color rgb(0, 0, 0) +// box-shadow 0 0 6px alpha(mainColor, 20%) +// border 1px solid mainColor + +// input[type="submit"]:hover, +// button:hover +// cursor pointer +// text-decoration none + +// button[disabled] +// opacity 0.5 +// :hover +// cursor not-allowed \ No newline at end of file diff --git a/styles/layout.scarlet b/styles/layout.scarlet index 39706978..695f70ba 100644 --- a/styles/layout.scarlet +++ b/styles/layout.scarlet @@ -2,9 +2,6 @@ vertical height 100% -#header - background-color header-color - #content-container flex 1 overflow-x hidden diff --git a/styles/mixins.scarlet b/styles/mixins.scarlet index b26ebe6b..c6956678 100644 --- a/styles/mixins.scarlet +++ b/styles/mixins.scarlet @@ -27,6 +27,10 @@ mixin ui-element background ui-hover-background box-shadow outline-shadow-medium +mixin ui-disabled + background-color ui-disabled-color + cursor not-allowed + mixin light-up filter brightness(0.4) saturate(1) :hover diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index 5fedd7ba..2e28d113 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -3,17 +3,32 @@ padding 0 content-padding height nav-height overflow hidden + background-color nav-color + // border-bottom ui-border .navigation-link color nav-link-color + :after + content "" + display block + height 3px + background-color main-color + transform scaleX(0) + opacity 0 + default-transition + :hover, &.active color nav-link-hover-color cursor pointer + :after + transform scaleX(1.0) + opacity 1 &.active - text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5) + // text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5) + text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1) .navigation-button font-size 1.1em diff --git a/styles/typography.scarlet b/styles/typography.scarlet index 2036bede..84b477aa 100644 --- a/styles/typography.scarlet +++ b/styles/typography.scarlet @@ -1,5 +1,5 @@ p, h1, h2, h3, h4, h5, h6 - margin 0.4em 0 + margin 0.4rem 0 :first-child margin-top 0