From 59ef1f53f2b5742d2bc68e17036aa668f7523d69 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Fri, 2 Dec 2016 15:24:45 +0900 Subject: [PATCH] Implemented most of the styles in scarlet now --- config.json | 8 +- pages/dashboard/dashboard.pixy | 2 +- .../{dashboard.styl => dashboard.scarlet} | 11 +- pages/forum/forum.pixy | 7 +- pages/threads/threads.pixy | 4 +- pages/threads/threads.scarlet | 16 +++ run.sh | 2 + styles/base.scarlet | 8 +- styles/content.scarlet | 1 + styles/forum.scarlet | 58 +++++++- styles/icons.scarlet | 5 +- styles/{ => include}/config.scarlet | 4 +- styles/{ => include}/mixins.scarlet | 0 styles/{ => libs}/font-awesome.scarlet | 0 styles/{ => libs}/reset.scarlet | 0 styles/navigation.scarlet | 13 +- styles/old/animelist.styl | 101 -------------- styles/old/base.styl | 105 -------------- styles/old/colors.styl | 91 ------------- styles/old/config.styl | 28 ---- styles/old/elements.styl | 108 --------------- styles/old/embedded.styl | 8 -- styles/old/fade.styl | 7 - styles/old/forms.styl | 79 ----------- styles/old/forum.styl | 128 ------------------ styles/old/grid.styl | 89 ------------ styles/old/headers.styl | 19 --- styles/old/layout.styl | 86 ------------ styles/old/loading.styl | 95 ------------- styles/old/mobile.styl | 67 --------- styles/old/navigation.styl | 31 ----- styles/old/reset.styl | 60 -------- styles/old/settings.styl | 19 --- styles/old/staff.styl | 5 - styles/old/user.styl | 33 ----- styles/old/video.styl | 6 - styles/typography.scarlet | 9 +- styles/user.scarlet | 4 +- 38 files changed, 126 insertions(+), 1191 deletions(-) rename pages/dashboard/{dashboard.styl => dashboard.scarlet} (72%) create mode 100644 pages/threads/threads.scarlet create mode 100755 run.sh rename styles/{ => include}/config.scarlet (92%) rename styles/{ => include}/mixins.scarlet (100%) rename styles/{ => libs}/font-awesome.scarlet (100%) rename styles/{ => libs}/reset.scarlet (100%) delete mode 100644 styles/old/animelist.styl delete mode 100644 styles/old/base.styl delete mode 100644 styles/old/colors.styl delete mode 100644 styles/old/config.styl delete mode 100644 styles/old/elements.styl delete mode 100644 styles/old/embedded.styl delete mode 100644 styles/old/fade.styl delete mode 100644 styles/old/forms.styl delete mode 100644 styles/old/forum.styl delete mode 100644 styles/old/grid.styl delete mode 100644 styles/old/headers.styl delete mode 100644 styles/old/layout.styl delete mode 100644 styles/old/loading.styl delete mode 100644 styles/old/mobile.styl delete mode 100644 styles/old/navigation.styl delete mode 100644 styles/old/reset.styl delete mode 100644 styles/old/settings.styl delete mode 100644 styles/old/staff.styl delete mode 100644 styles/old/user.styl delete mode 100644 styles/old/video.styl diff --git a/config.json b/config.json index 205bbd19..2e895efb 100644 --- a/config.json +++ b/config.json @@ -5,10 +5,10 @@ "Ubuntu" ], "styles": [ - "reset", - "font-awesome", - "config", - "mixins", + "libs/reset", + "libs/font-awesome", + "include/config", + "include/mixins", "base", "typography", "layout", diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index f7758eef..116f1ff5 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -3,7 +3,7 @@ component Dashboard(posts []*arn.Post) .dashboard-widget each post in posts - a.dashboard-event.ui.ajax(href=post.Link()) + a.dashboard-event.ajax(href=post.Link()) .dashboard-event-author AvatarNoLink(post.Author()) .dashboard-event-text diff --git a/pages/dashboard/dashboard.styl b/pages/dashboard/dashboard.scarlet similarity index 72% rename from pages/dashboard/dashboard.styl rename to pages/dashboard/dashboard.scarlet index c796827b..e98ea0c5 100644 --- a/pages/dashboard/dashboard.styl +++ b/pages/dashboard/dashboard.scarlet @@ -1,23 +1,22 @@ .dashboard-widget - display flex - flex-flow column + vertical align-items center .dashboard-event - display flex - flex-flow column wrap + vertical-wrap + ui-element margin-bottom 1rem padding 0.75rem width 100% max-width 700px .dashboard-event-author - display flex + horizontal justify-content center width 100% .dashboard-event-text - display flex + horizontal justify-content center align-items center width 100% \ No newline at end of file diff --git a/pages/forum/forum.pixy b/pages/forum/forum.pixy index 422963d8..a78bcc2e 100644 --- a/pages/forum/forum.pixy +++ b/pages/forum/forum.pixy @@ -10,10 +10,11 @@ component ThreadLink(thread *arn.Thread) .post-author.thread-author Avatar(thread.Author()) .thread-content-container - .post-content.thread-content + .thread-content if thread.Sticky - i.fa.fa-thumb-tack.fa-fw.thread-icon - a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title + Icon("thumb-tack") + a.thread-link-title.ajax(href="/threads/" + thread.ID)= thread.Title + .spacer .thread-reply-count= thread.Replies .thread-icons Icon(arn.GetForumIcon(thread.Tags[0])) \ No newline at end of file diff --git a/pages/threads/threads.pixy b/pages/threads/threads.pixy index dc015422..83387f5b 100644 --- a/pages/threads/threads.pixy +++ b/pages/threads/threads.pixy @@ -1,7 +1,7 @@ component Thread(thread *arn.Thread, posts []*arn.Post) + h2.thread-title= thread.Title + .thread - h2.thread-title= thread.Title - .posts Postable(thread.ToPostable(), nil, thread.Author().ID) diff --git a/pages/threads/threads.scarlet b/pages/threads/threads.scarlet new file mode 100644 index 00000000..521ad88d --- /dev/null +++ b/pages/threads/threads.scarlet @@ -0,0 +1,16 @@ +.thread + horizontal + justify-content center + +.posts + vertical + width 100% + max-width 830px + +.post + vertical + margin-bottom 1rem + +> 600px + .post + horizontal \ No newline at end of file diff --git a/run.sh b/run.sh new file mode 100755 index 00000000..3bbaf011 --- /dev/null +++ b/run.sh @@ -0,0 +1,2 @@ +#!/bin/bash +pack && go build && ./notify.moe diff --git a/styles/base.scarlet b/styles/base.scarlet index edbbbe5d..05f76101 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -20,9 +20,15 @@ a :active transform translateY(3px) + + &.active + color link-active-color strong font-weight bold em - font-style italic \ No newline at end of file + font-style italic + +.spacer + flex 1 \ No newline at end of file diff --git a/styles/content.scarlet b/styles/content.scarlet index cff70750..2062384e 100644 --- a/styles/content.scarlet +++ b/styles/content.scarlet @@ -1,4 +1,5 @@ #content vertical padding content-padding + padding-top content-padding-top line-height 1.7em \ No newline at end of file diff --git a/styles/forum.scarlet b/styles/forum.scarlet index 381315ac..c3ebd5dd 100644 --- a/styles/forum.scarlet +++ b/styles/forum.scarlet @@ -1,26 +1,78 @@ .forum-header text-align left + margin-bottom 1rem .post-content + ui-element + flex-grow 1 + padding 0.8rem 1rem + position relative + + 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 + + :hover + .post-toolbar + opacity 1 + +.thread-content + horizontal ui-element padding 0.4rem 1rem + align-items center .thread-link horizontal +.thread-icons, +.thread-reply-count + opacity 0.5 + text-align right + font-size 0.9rem + +.thread-reply-count + margin-right 0.5rem + .thread-content-container flex 1 vertical justify-content center -.thread-content - horizontal +.thread-link-title + color text-color .forum-tags - margin-bottom content-padding + margin-bottom 1rem + +.post-author + horizontal + justify-content center + align-items flex-start + margin 0.25rem 0.5rem + margin-left 0 // Toolbar +.post-toolbar + horizontal + opacity 0 + position absolute + bottom 3px + right 0 + margin-right 0.5rem + default-transition + .post-tool opacity 0.7 &:hover diff --git a/styles/icons.scarlet b/styles/icons.scarlet index 97f17f53..424ea78d 100644 --- a/styles/icons.scarlet +++ b/styles/icons.scarlet @@ -1,2 +1,3 @@ -i.fa - margin-right 0.5em \ No newline at end of file +.fa + span, +.fa + a + margin-left 0.5em \ No newline at end of file diff --git a/styles/config.scarlet b/styles/include/config.scarlet similarity index 92% rename from styles/config.scarlet rename to styles/include/config.scarlet index 85b059d9..d3b62ce5 100644 --- a/styles/config.scarlet +++ b/styles/include/config.scarlet @@ -3,6 +3,7 @@ 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) +link-active-color = rgb(100, 149, 237) post-highlight-color = rgba(248, 165, 130, 0.7) // UI @@ -30,7 +31,8 @@ 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 +content-padding = 1.6rem +content-padding-top = 2rem hover-line-size = 2px nav-height = 3.11rem diff --git a/styles/mixins.scarlet b/styles/include/mixins.scarlet similarity index 100% rename from styles/mixins.scarlet rename to styles/include/mixins.scarlet diff --git a/styles/font-awesome.scarlet b/styles/libs/font-awesome.scarlet similarity index 100% rename from styles/font-awesome.scarlet rename to styles/libs/font-awesome.scarlet diff --git a/styles/reset.scarlet b/styles/libs/reset.scarlet similarity index 100% rename from styles/reset.scarlet rename to styles/libs/reset.scarlet diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index 2e28d113..f9db1598 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -4,6 +4,7 @@ height nav-height overflow hidden background-color nav-color + justify-content center // border-bottom ui-border .navigation-link @@ -33,4 +34,14 @@ .navigation-button font-size 1.1em line-height 1em - padding 0.75em 1em \ No newline at end of file + padding 0.75em 1em + +.navigation-text + display none + +> 930px + #navigation + justify-content flex-start + + .navigation-text + display inline-block \ No newline at end of file diff --git a/styles/old/animelist.styl b/styles/old/animelist.styl deleted file mode 100644 index b865c451..00000000 --- a/styles/old/animelist.styl +++ /dev/null @@ -1,101 +0,0 @@ -.anime-list-container - text-align left - -.embedded-anime-list-container - .anime-list - width calc(100% - 225px - 1em) - .anime-list-image - display block - -.anime-list - list-style-type none - margin 0 - width 100% - max-width 750px - -.anime-status-icon - margin 0 !important - -.anime-list-image - display none - position fixed - top 50% - right calc(16px + 1em) - z-index 9999 - width 225px - margin 0 - padding 0 - opacity 0 - border-radius 3px - box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4) - transform translate(10%, -50%) - transition all transitionSpeed ease - pointer-events none - -.anime - padding 0.25em 0.75em - border uiBorder - border-radius 3px - margin 0.25em 0 - background uiBackground - display flex - flex-direction row - transition all 200ms ease - &:hover - background uiHoverBackground - .anime-list-image - opacity 1 - transform translate(0, -50%) - -.anime-title -.anime-view-link - color darken(mainColor, 30%) !important - &:hover - color rgb(255, 32, 12) !important - -.anime-title - flex-grow 0 - flex-shrink 1 - white-space nowrap - text-overflow ellipsis - overflow hidden - -.spacer - flex 1 - -.anime-completed -.anime-warning -.anime-up-to-date -.anime-download-link - flex 0 0 32px - text-align right - -.anime-completed - color blue !important - opacity 0.25 - &:hover - opacity 0.7 - -.anime-warning - color red !important - opacity 0.2 - &:hover - opacity 0.7 - -.anime-up-to-date - color green !important - opacity 0.7 - -.airing-date -.episodes-behind - flex-grow 0 - flex-shrink 1 - opacity 0.5 - text-align right - white-space nowrap - -.episodes-behind - &:before - content '+' - &:after - content '' \ No newline at end of file diff --git a/styles/old/base.styl b/styles/old/base.styl deleted file mode 100644 index f7da1e4d..00000000 --- a/styles/old/base.styl +++ /dev/null @@ -1,105 +0,0 @@ -html - height 100% - -body - font-family "Ubuntu", "Trebuchet MS", sans-serif - font-size 1.05rem - tab-size 4 - overflow hidden - height 100% - -a - text-decoration none - transition all transitionSpeed ease - &:hover - text-decoration none - &:active - transform translateY(3px) - -/*.page - height 100vh*/ - -section - float left - width 100% - -.icon-list - margin-left 1px !important - list-style-type none - .fa - opacity 0.93 - -.powered-by - opacity 0.8 - font-size 0.9em - margin-top 1em - -.maintenance - width 100% - height 100% - text-align center - padding 1em - font-size 3em - line-height 1.5em - -.region-block - float left - width 100% - font-size 1.2em - padding 1em - p - text-align center - max-width none - -.editor-info - max-width 1200px - -// tooltipOffset = -10px -// -// .tooltip -// display inline-block -// position relative -// -// &:after -// display inline -// content attr(data-tooltip) -// opacity 0 -// transition opacity 250ms ease -// background rgb(48, 48, 48) -// border-radius 3px -// color rgb(255, 255, 255) -// // box-shadow 0 0 8px rgba(0, 0, 0, 0.2) -// padding 0.3rem 0.75rem -// width auto -// pointer-events none -// -// position absolute -// left 50% -// top tooltipOffset -// transform translate(-50%, -100%) -// z-index 100 -// -// margin 0 -// -// &:before -// content "" -// border solid -// border-color rgb(60, 60, 60) transparent -// border-width 6px 6px 0 6px -// opacity 0 -// transition opacity 250ms ease -// pointer-events none -// margin 0 -// padding 0 -// -// position absolute -// left 50% -// top tooltipOffset -// transform translateX(-50%) -// z-index 99 -// -// &:hover -// &:after -// opacity 1 -// &:before -// opacity 1 diff --git a/styles/old/colors.styl b/styles/old/colors.styl deleted file mode 100644 index 0092f888..00000000 --- a/styles/old/colors.styl +++ /dev/null @@ -1,91 +0,0 @@ -html, body - color textColor - background-color rgb(254, 254, 254) - -a - color mainColor - &:hover - color hoverColor - -#header - background-color rgb(245, 245, 245) - background-image url("/images/characters/pencil-girl.png") - background-repeat no-repeat - background-size auto 100% - background-position 100% 0% - -#slogan - color rgb(120, 120, 120) - -#content - background-color transparent - - a - color linkColor - &:hover - color linkHoverColor - - .active - color activeLinkColor - &:hover - color @color - -.navigation-link - color rgb(160, 160, 160) - &.active - &:hover - color rgb(80, 80, 80) - text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1) - -.saving - opacity 0.5 !important - -input[type="text"] -input[type="email"] -input[type="password"] -input[type="url"] -input[type="number"] -textarea - color rgb(32, 32, 32) - background-color rgb(255, 255, 255) - box-shadow none - border 1px solid rgba(0, 0, 0, 0.1) - &:focus - color rgb(0, 0, 0) - box-shadow 0 0 6px alpha(mainColor, 20%) - border 1px solid mainColor - &:disabled - background-color rgb(224, 224, 224) - cursor not-allowed - -button -select - border 1px solid rgb(170, 170, 170) - color rgb(32, 32, 32) - background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%) - box-shadow 0 0 2px rgb(255, 255, 255), 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 -.button:hover - cursor pointer - background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%) - text-decoration none - -button[disabled] - opacity 0.5 - &:hover - cursor not-allowed - color rgb(32, 32, 32) - background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%) - -.user-name - a - color rgb(16, 16, 16) - -.list-provider-name-highlight - color rgb(48, 48, 48) \ No newline at end of file diff --git a/styles/old/config.styl b/styles/old/config.styl deleted file mode 100644 index 757635fa..00000000 --- a/styles/old/config.styl +++ /dev/null @@ -1,28 +0,0 @@ -textColor = rgb(60, 60, 60) -mainColor = rgb(248, 165, 130) -hoverColor = darken(mainColor, 10%) -linkColor = darken(mainColor, 15%) -linkHoverColor = darken(hoverColor, 20%) -activeLinkColor = rgb(100, 149, 237) -uiBorder = 1px solid rgba(0, 0, 0, 0.1) -uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15) -uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) -uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) -outlineShadowLight = 0 0 6px alpha(black, 0.05) -outlineShadowMedium = 0 0 6px alpha(black, 0.13) -outlineShadowHeavy = 0 0 6px alpha(black, 0.6) -transitionSpeed = 290ms -fadeSpeed = 200ms -contentPadding = 1.5rem -contentPaddingMobile = 1rem - -uiElement() - border uiBorder - background uiBackground - border-radius 3px - transition all transitionSpeed ease - - &:hover - border uiHoverBorder - background uiHoverBackground - box-shadow outlineShadowMedium \ No newline at end of file diff --git a/styles/old/elements.styl b/styles/old/elements.styl deleted file mode 100644 index fbdad48c..00000000 --- a/styles/old/elements.styl +++ /dev/null @@ -1,108 +0,0 @@ -p, ul, ol, h3, dl, blockquote, label - line-height 1.7em - float left - width 100% - -p, ul, ol, pre, h2, dl, blockquote, label - text-align left - margin-top 0.4em - margin-bottom 0.4em - float left - -p - max-width 728px - clear both - -dl - max-width 728px - -dt - font-weight bold - font-size 1.4em - line-height 2.5em - -dd - margin-left 1em - margin-bottom 1em - -table - float left - width 100% - -iframe - float left - display block - margin 0 auto - -pre - border 1px solid rgb(128, 128, 128) - padding 1em - width 100% - box-shadow 1px 1px 16px rgba(0, 0, 0, 0.6) - color rgb(224, 224, 224) - background-color rgb(32, 32, 32) - border none - border-radius 3px - -pre, code - font-family 'Ubuntu Mono', Consolas, monospace - -ul - list-style-type square - -ol - list-style-type decimal - -ul, ol - list-style-position outside - padding 0 - margin-left 1.7em - width calc(100% - 1.7em) - -strong - font-weight bold - -em - font-style italic - -hr - clear both - height 4px - border-bottom 1px dotted #ccc - border-left none - border-right none - border-top none - -img - margin 0.5em auto - max-width 100% - height auto - -i.fa - margin-right 0.5em - -table - float left - width 100% - -th - font-size 120% - padding 5px 0 - text-align left - -tr - border-bottom-width 1px - border-bottom-style solid - border-bottom-color rgba(0, 0, 0, 0.05) - &:last-child - border none - -td - padding 0.5em - text-align left - vertical-align top - -tbody - tr - &:hover - background-color rgba(0, 0, 0, 0.03) \ No newline at end of file diff --git a/styles/old/embedded.styl b/styles/old/embedded.styl deleted file mode 100644 index ac297eb9..00000000 --- a/styles/old/embedded.styl +++ /dev/null @@ -1,8 +0,0 @@ -.embedded-header - position fixed - left 0 - bottom 0 - z-index 1 - -.embedded-content - margin-bottom 3em \ No newline at end of file diff --git a/styles/old/fade.styl b/styles/old/fade.styl deleted file mode 100644 index 7eeb8874..00000000 --- a/styles/old/fade.styl +++ /dev/null @@ -1,7 +0,0 @@ -.fade - opacity 1 - transition opacity fadeSpeed ease - will-change opacity - -.fade-out - opacity 0 \ No newline at end of file diff --git a/styles/old/forms.styl b/styles/old/forms.styl deleted file mode 100644 index bc8ebece..00000000 --- a/styles/old/forms.styl +++ /dev/null @@ -1,79 +0,0 @@ -maxWidth = 560px - -input[type="text"] -input[type="email"] -input[type="password"] -input[type="url"] -input[type="number"] -button - font-family inherit - font-size 1rem - border-radius 3px - transition all transitionSpeed ease - margin 0 0 10px - padding 0.4em 0.8em - width calc(100% - 1.6em) - max-width maxWidth - float left - &:focus - outline none - &:active - transform translateY(3px) - -input[type="submit"] -button -.button - font-family inherit - font-size 1em - color black - padding 0.5em 2em - border-radius 3px - box-shadow none - border none - text-align center - transition all transitionSpeed ease - width 100% - max-width none - -textarea - float left - border 1px solid rgba(0, 0, 0, 0.5) - border-radius 3px - padding 0.2em 0.4em - font-size 1em - font-family inherit - line-height 1.7em - outline none - resize vertical - overflow auto - -select - // Layout - float left - padding 0.5em - padding 5px 10px - width 100% - max-width 756px - - // Font - font-size 1em - font-weight normal - font-family inherit - - transition all 0.5s ease - -webkit-appearance none - -moz-appearance none - box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1) - user-select none - border-radius 2px - font-size inherit - overflow hidden - text-overflow ellipsis - white-space nowrap - -.error - padding 1em - background-color rgb(255, 64, 64) - color white - border-radius 5px - margin-bottom 1em \ No newline at end of file diff --git a/styles/old/forum.styl b/styles/old/forum.styl deleted file mode 100644 index f040c386..00000000 --- a/styles/old/forum.styl +++ /dev/null @@ -1,128 +0,0 @@ -#posts - display flex - flex-flow column - flex 1 - max-width 100% - -.post - display flex - flex-flow column - margin 0.5rem 0 - -.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 - transition opacity 250ms ease - 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 - uiElement() - 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 - -.post[data-highlight="true"] - .post-content - border 2px solid alpha(mainColor, 70%) - -.hidden - display none - -.thread - display flex - flex-flow column - align-items center - -.thread-title - width auto - -.posts - width 100% - max-width 830px - -@media only screen and (min-width: 500px) - .post - flex-flow row - justify-content center - - .post-author - // \ No newline at end of file diff --git a/styles/old/grid.styl b/styles/old/grid.styl deleted file mode 100644 index 6fe4522e..00000000 --- a/styles/old/grid.styl +++ /dev/null @@ -1,89 +0,0 @@ -.grid - display flex - flex-flow row wrap - justify-content center - float none !important - -.grid-cell - position relative - - flex-grow 0 - flex-shrink 0 - - width 16vw - height 9vw - min-width 90px - min-height 127px - max-width 200px - max-height 282px - border-radius 3px - background-size cover - background-position 50% 50% - - margin 0.5rem - - &:hover - .backside-card - transform rotateY(180deg) - - .front - opacity 0 - .back - opacity 1 - // .grid-icon - // transform scale(1.3) - -.ui - uiElement() - -.scale-out - &:hover - transform scale(1.02) - -.backside-card - width 100% - height 100% - transition all transitionSpeed ease-in-out - -.front - position absolute - left 0 - top 0 - opacity 1 - transition opacity transitionSpeed ease - -.back - position absolute - left 0 - top 0 - opacity 0 - transition opacity transitionSpeed ease - transform rotateY(180deg) - -.grid-anime - border none - &:hover - border none - -.grid-text - width 100% - height 100% - display flex - flex-flow column - align-items center - justify-content center - font-size 1rem - color rgb(160, 160, 160) - -.grid-icon - font-size 2.5rem - margin-top 2rem - margin-bottom 0.7rem - color linkColor - -.grid-image - width 100% - height 100% - margin 0 - border-radius 3px - object-fit cover \ No newline at end of file diff --git a/styles/old/headers.styl b/styles/old/headers.styl deleted file mode 100644 index e025c4b0..00000000 --- a/styles/old/headers.styl +++ /dev/null @@ -1,19 +0,0 @@ -h1 - display inline-block - font-size 3em - line-height 3em - -h2 - font-size 2em - line-height 1.5em - font-weight bold - text-align center - width 100% - &:first-of-type - margin-top 0 -h3 - line-height 2em - font-size 1.5em - font-weight bold - text-align left - margin-top 0.6em \ No newline at end of file diff --git a/styles/old/layout.styl b/styles/old/layout.styl deleted file mode 100644 index 5dc6f7b4..00000000 --- a/styles/old/layout.styl +++ /dev/null @@ -1,86 +0,0 @@ -#container - width 100% - height 100% - float left - overflow-x hidden - overflow-y scroll - position absolute - top 0 - left 0 - z-index 0 - -#emergency - float left - width 100% - background-color rgb(255, 32, 32) - color black - padding 0.7em - box-sizing border-box - -#header-container - display block - float left - width 100% - height auto - background-color transparent - -#header - display block - margin 0 auto - width 100% - overflow hidden - -#title, #slogan - display block - margin 0 auto - width calc(100% - 3em) - height auto - text-align left - -#title - padding 1.5em - padding-bottom 0.5em - text-transform uppercase - //letter-spacing 1px - //opacity 0 - letter-spacing 6px - h1 - line-height inherit - a - text-decoration none - -#slogan - padding 1.5em - padding-top 0.5em - line-height 1.3em - -#content-container - display block - float left - width 100% - height auto - background-color transparent - -#content - width 100% - height 100% - min-height 100% - padding contentPadding - line-height 1.7em - text-align center - display flex - flex-flow column - & > div - width 100% - -.header-logged-in - background-image none !important - -.navigation-link-left - float left - -.navigation-link-right - float right - -.navigation-icon-no-title - margin-right 0 !important \ No newline at end of file diff --git a/styles/old/loading.styl b/styles/old/loading.styl deleted file mode 100644 index b3e9a672..00000000 --- a/styles/old/loading.styl +++ /dev/null @@ -1,95 +0,0 @@ -duration = 0.8s -size = 24px - -#loading-animation - display block - position fixed - bottom 1.15rem - right 1.15rem - pointer-events none - -.sk-cube-grid - width size - height size - transform rotateZ(0deg) - animation sk-rotate duration infinite linear - - .sk-cube - width 33.3% - height 33.3% - background-color alpha(linkHoverColor, 70%) - box-shadow 0 0 size alpha(linkHoverColor, 80%) - float left - animation sk-cube-grid duration infinite linear - border-radius 100% - - .sk-cube5 - background-color linkHoverColor - box-shadow 0 0 size alpha(linkHoverColor, 90%) - - .sk-cube1 - .sk-cube3 - .sk-cube7 - .sk-cube9 - visibility hidden - -@keyframes sk-cube-grid - 0%, 100% - transform scale3D(0.4, 0.4, 0.4) - 50% - transform scale3D(0.9, 0.9, 0.9) - -@keyframes sk-rotate - 0% - transform rotateZ(0deg) - 100% - transform rotateZ(360deg) - -// Anime list loading -.sk-folding-cube - margin 20px auto - width 40px - height 40px - position relative - transform rotateZ(45deg) - .sk-cube - float left - width 50% - height 50% - position relative - transform scale(1.1) - &:before - content '' - position absolute - top 0 - left 0 - width 100% - height 100% - background-color mainColor - animation sk-foldCubeAngle 2.4s infinite linear both - transform-origin 100% 100% - .sk-cube2 - transform scale(1.1) rotateZ(90deg) - &:before - animation-delay 0.3s - .sk-cube3 - transform scale(1.1) rotateZ(180deg) - &:before - animation-delay 0.6s - .sk-cube4 - transform scale(1.1) rotateZ(270deg) - &:before - animation-delay 0.9s - -@keyframes sk-foldCubeAngle - 0%, 10% - transform perspective(140px) rotateX(-180deg) - opacity 0 - - 25%, 75% - transform perspective(140px) rotateX(0deg) - opacity 1 - - 90%, 100% - transform perspective(140px) rotateY(180deg) - opacity 0 \ No newline at end of file diff --git a/styles/old/mobile.styl b/styles/old/mobile.styl deleted file mode 100644 index d6ed030f..00000000 --- a/styles/old/mobile.styl +++ /dev/null @@ -1,67 +0,0 @@ -@media only screen and (max-width: 1024px) - #header - background-image none - -@media only screen and (max-width: 930px) - #title, #slogan - display none - - .navigation-text - display none - - .navigation-button i.fa - margin-right 0 - - .episodes-behind - &:before - content '+' - &:after - content '' - - #content - padding contentPaddingMobile - - #header - text-align center - - #navigation - float none - display inline-block - width auto - - .profile - left contentPaddingMobile * -1 !important - top contentPaddingMobile * -1 !important - min-width calc(100% + 2rem) !important - -@media only screen and (min-width: 1100px) - .anime-list-image - display block - -@media only screen and (max-width: 560px) - #navigation - padding 0 - - .navigation-link-right - display none - - .navigation-button i.fa - font-size 1.5em - -// Remove admin icon -@media only screen and (max-width: 612px) - .navigation-link-right[href='/admin'] - display none - -@media only screen and (max-width: 320px) - .navigation-button i.fa - font-size 1.4em - -@media only screen and (max-height: 700px) - .anime-list-image - top 0.5em - transform translate(10%, 0) - - .anime:hover - .anime-list-image - transform translate(0, 0) \ No newline at end of file diff --git a/styles/old/navigation.styl b/styles/old/navigation.styl deleted file mode 100644 index 5199a50c..00000000 --- a/styles/old/navigation.styl +++ /dev/null @@ -1,31 +0,0 @@ -#navigation - width 100% - height 100% - padding 0 content-padding - box-sizing border-box - -.navigation-link - display inline-block - height 100% - text-decoration none - position relative - &:after - content "" - display block - margin auto - margin-top 0 - height 3px - width 0px - default-transition - &.active - &:hover - cursor pointer - text-decoration none - &:after - width 100% - background-color rgb(248, 165, 130) - -.navigation-button - padding 0.75em 1em - font-size 1.1em - line-height 1em \ No newline at end of file diff --git a/styles/old/reset.styl b/styles/old/reset.styl deleted file mode 100644 index 7908532a..00000000 --- a/styles/old/reset.styl +++ /dev/null @@ -1,60 +0,0 @@ -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video, main - outline 0 - border 0 - font-size 100% - font inherit - vertical-align baseline - background transparent - -html - box-sizing border-box - -textarea - resize vertical - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section - display block - -body - line-height 1 - -webkit-font-smoothing antialiased - -moz-osx-font-smoothing grayscale - -ol, ul - list-style none - -blockquote, q - quotes none - -blockquote:before, blockquote:after, -q:before, q:after - content '' - content none - -table - border-collapse collapse - border-spacing 0 - -audio, canvas, img, video, input, select - vertical-align middle - -:focus - outline 0 - -* - margin 0 - padding 0 - box-sizing inherit \ No newline at end of file diff --git a/styles/old/settings.styl b/styles/old/settings.styl deleted file mode 100644 index 9bdd7e89..00000000 --- a/styles/old/settings.styl +++ /dev/null @@ -1,19 +0,0 @@ -.category - flex 1 - min-width 300px - max-width 100% - -.categories - display flex - flex-flow row wrap - -.field - float left - width 100% - padding 0 0.5em - box-sizing border-box - -.value - margin-left 0.5em - font-weight bold - font-size 1.1em \ No newline at end of file diff --git a/styles/old/staff.styl b/styles/old/staff.styl deleted file mode 100644 index 36f652c4..00000000 --- a/styles/old/staff.styl +++ /dev/null @@ -1,5 +0,0 @@ -#staff-info - display none - float left - width 100% - text-align left \ No newline at end of file diff --git a/styles/old/user.styl b/styles/old/user.styl deleted file mode 100644 index e93b640d..00000000 --- a/styles/old/user.styl +++ /dev/null @@ -1,33 +0,0 @@ -avatarSize = 50px - -.user-list - width 100% - display flex - flex-flow row wrap - -.user - display block - transform scale(1.0) - width avatarSize - height avatarSize - border-radius 100% - margin 0.2em - &:hover - .user-image - box-shadow outlineShadowHeavy - -.user-image - opacity 0 - transition all 250ms ease - border-radius 100% - margin 0 !important - width avatarSize - height avatarSize - object-fit cover - -svg.user-image - circle.body, circle.head - fill textColor - text - fill white - font-size 0.65rem \ No newline at end of file diff --git a/styles/old/video.styl b/styles/old/video.styl deleted file mode 100644 index ee4c11d3..00000000 --- a/styles/old/video.styl +++ /dev/null @@ -1,6 +0,0 @@ -.video-container - width 100% - -.video - width 100% - height 100vh \ No newline at end of file diff --git a/styles/typography.scarlet b/styles/typography.scarlet index 84b477aa..a9bcb6bc 100644 --- a/styles/typography.scarlet +++ b/styles/typography.scarlet @@ -5,4 +5,11 @@ p, h1, h2, h3, h4, h5, h6 margin-top 0 :last-child - margin-bottom 0 \ No newline at end of file + margin-bottom 0 + +h2 + margin-bottom content-padding + +p > img + max-width 100% + border-radius 3px \ No newline at end of file diff --git a/styles/user.scarlet b/styles/user.scarlet index a721deaa..e78e315a 100644 --- a/styles/user.scarlet +++ b/styles/user.scarlet @@ -2,5 +2,7 @@ width 50px height 50px border-radius 100% + object-fit cover default-transition - outline-shadow-up \ No newline at end of file + :hover + box-shadow outline-shadow-heavy \ No newline at end of file