diff --git a/config.json b/config.json index 99d3e563..18013953 100644 --- a/config.json +++ b/config.json @@ -7,7 +7,13 @@ "styles": [ "include/config", "include/dark", - "include/mixins", + "mixins/layout", + "mixins/utils", + "mixins/effects", + "mixins/ui", + "mixins/sidebar", + "mixins/anime-grid", + "mixins/feature-card", "reset", "base", "typography", diff --git a/pages/editor/editor.pixy b/pages/editor/editor.pixy index 134c1c58..d4be2d3d 100644 --- a/pages/editor/editor.pixy +++ b/pages/editor/editor.pixy @@ -12,6 +12,16 @@ component Editor(url string, score int, scoreTitle string, scoreTypes map[string .feature-card-icon RawIcon("tv") p.feature-card-text Anime + + a.feature-card.mountable(href="/editor/tracks") + .feature-card-icon + RawIcon("music") + p.feature-card-text SoundTracks + + a.feature-card.mountable(href="/editor/companies") + .feature-card-icon + RawIcon("building-o") + p.feature-card-text Companies //- .footer //- for objectType, score := range scoreTypes diff --git a/pages/support/support.scarlet b/pages/support/support.scarlet index e2475350..25d095bf 100644 --- a/pages/support/support.scarlet +++ b/pages/support/support.scarlet @@ -53,9 +53,7 @@ font-weight bold .payment-amount-converted - font-size 0.9rem - opacity 0.5 - margin-top 0 + feature-card-footer .feature-cards-alternative-color .feature-card-icon, diff --git a/styles/include/mixins.scarlet b/styles/include/mixins.scarlet deleted file mode 100644 index 18444a10..00000000 --- a/styles/include/mixins.scarlet +++ /dev/null @@ -1,136 +0,0 @@ -mixin default-transition - transition all transition-speed ease - -mixin horizontal - display flex - flex-direction row - -mixin horizontal-wrap - display flex - flex-flow row wrap - -mixin horizontal-wrap-center - horizontal-wrap - justify-content center - -mixin vertical - display flex - flex-direction column - -mixin vertical-wrap - display flex - flex-flow column wrap - -mixin vertical-wrap-center - horizontal-wrap - align-items center - -mixin noise-light - background-image url("//media.notify.moe/images/elements/noise-light.png") - -mixin noise-strong - background-image url("//media.notify.moe/images/elements/noise-strong.png") - -mixin ui-element - border 1px solid ui-border-color - background ui-background - border-radius ui-element-border-radius - default-transition - :hover - border-color ui-hover-border-color - // background ui-hover-background - // box-shadow outline-shadow-medium - -mixin ui-disabled - background-color ui-disabled-color - cursor not-allowed - -mixin clip-long-text - overflow hidden - white-space nowrap - text-overflow ellipsis - -mixin anime-mini-item - margin 0.25rem - -mixin anime-generic-item-image - object-fit cover - border-radius 2px - filter none - transition filter transition-speed ease, opacity transition-speed ease - - :hover - filter saturate(1.3) - -mixin anime-mini-item-image - width anime-image-small-width !important - height anime-image-small-height !important - anime-generic-item-image - - // Make it easier for the browser to layout by specifying max size as well - max-width anime-image-small-width - max-height anime-image-small-height - -mixin anime-list-item-image - width anime-image-tiny-width - height anime-image-tiny-height - border-radius 2px - object-fit cover - - // Make it easier for the browser to layout by specifying max size as well - max-width anime-image-tiny-width - max-height anime-image-tiny-height - -mixin sidebar - vertical - margin-left 0 - margin-top 1rem - flex-shrink 0 - -mixin sidebar-medium - margin-left content-padding - margin-top 0 - flex-basis 270px - -mixin sidebar-big - flex-basis 300px - -mixin bg-dark-up - background-color transparent - :hover - background-color rgba(0, 0, 0, 0.015) - -mixin bg-light-up - background-color transparent - :hover - background-color rgba(255, 255, 255, 0.015) - -mixin light-up - filter brightness(0.4) saturate(1) - :hover - filter brightness(1) saturate(1.3) - -mixin saturate-up - filter saturate(1) - :hover - filter saturate(1.3) - -mixin saturate-up - filter saturate(1) - :hover - filter saturate(1.3) - -mixin scale-up - transform scale(1) - :hover - transform scale(1.056338) - -mixin shadow-up - box-shadow shadow-light - :hover - box-shadow shadow-medium - -mixin outline-shadow-up - box-shadow outline-shadow-light - :hover - box-shadow outline-shadow-medium diff --git a/styles/mixins/anime-grid.scarlet b/styles/mixins/anime-grid.scarlet new file mode 100644 index 00000000..ced3df5b --- /dev/null +++ b/styles/mixins/anime-grid.scarlet @@ -0,0 +1,30 @@ +mixin anime-mini-item + margin 0.25rem + +mixin anime-generic-item-image + object-fit cover + border-radius 2px + filter none + transition filter transition-speed ease, opacity transition-speed ease + + :hover + filter saturate(1.3) + +mixin anime-mini-item-image + width anime-image-small-width !important + height anime-image-small-height !important + anime-generic-item-image + + // Make it easier for the browser to layout by specifying max size as well + max-width anime-image-small-width + max-height anime-image-small-height + +mixin anime-list-item-image + width anime-image-tiny-width + height anime-image-tiny-height + border-radius 2px + object-fit cover + + // Make it easier for the browser to layout by specifying max size as well + max-width anime-image-tiny-width + max-height anime-image-tiny-height \ No newline at end of file diff --git a/styles/mixins/effects.scarlet b/styles/mixins/effects.scarlet new file mode 100644 index 00000000..48dcade6 --- /dev/null +++ b/styles/mixins/effects.scarlet @@ -0,0 +1,39 @@ +mixin bg-dark-up + background-color transparent + :hover + background-color rgba(0, 0, 0, 0.015) + +mixin bg-light-up + background-color transparent + :hover + background-color rgba(255, 255, 255, 0.015) + +mixin light-up + filter brightness(0.4) saturate(1) + :hover + filter brightness(1) saturate(1.3) + +mixin saturate-up + filter saturate(1) + :hover + filter saturate(1.3) + +mixin saturate-up + filter saturate(1) + :hover + filter saturate(1.3) + +mixin scale-up + transform scale(1) + :hover + transform scale(1.056338) + +mixin shadow-up + box-shadow shadow-light + :hover + 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/mixins/feature-card.scarlet b/styles/mixins/feature-card.scarlet new file mode 100644 index 00000000..8566b767 --- /dev/null +++ b/styles/mixins/feature-card.scarlet @@ -0,0 +1,4 @@ +mixin feature-card-footer + font-size 0.9rem + opacity 0.5 + margin-top 0 \ No newline at end of file diff --git a/styles/mixins/layout.scarlet b/styles/mixins/layout.scarlet new file mode 100644 index 00000000..72fc1257 --- /dev/null +++ b/styles/mixins/layout.scarlet @@ -0,0 +1,23 @@ +mixin horizontal + display flex + flex-direction row + +mixin horizontal-wrap + display flex + flex-flow row wrap + +mixin horizontal-wrap-center + horizontal-wrap + justify-content center + +mixin vertical + display flex + flex-direction column + +mixin vertical-wrap + display flex + flex-flow column wrap + +mixin vertical-wrap-center + horizontal-wrap + align-items center diff --git a/styles/mixins/sidebar.scarlet b/styles/mixins/sidebar.scarlet new file mode 100644 index 00000000..7e4ffb40 --- /dev/null +++ b/styles/mixins/sidebar.scarlet @@ -0,0 +1,13 @@ +mixin sidebar + vertical + margin-left 0 + margin-top 1rem + flex-shrink 0 + +mixin sidebar-medium + margin-left content-padding + margin-top 0 + flex-basis 270px + +mixin sidebar-big + flex-basis 300px \ No newline at end of file diff --git a/styles/mixins/ui.scarlet b/styles/mixins/ui.scarlet new file mode 100644 index 00000000..0593295f --- /dev/null +++ b/styles/mixins/ui.scarlet @@ -0,0 +1,13 @@ +mixin ui-element + border 1px solid ui-border-color + background ui-background + border-radius ui-element-border-radius + default-transition + :hover + border-color ui-hover-border-color + // background ui-hover-background + // box-shadow outline-shadow-medium + +mixin ui-disabled + background-color ui-disabled-color + cursor not-allowed \ No newline at end of file diff --git a/styles/mixins/utils.scarlet b/styles/mixins/utils.scarlet new file mode 100644 index 00000000..a51bc234 --- /dev/null +++ b/styles/mixins/utils.scarlet @@ -0,0 +1,13 @@ +mixin default-transition + transition all transition-speed ease + +mixin noise-light + background-image url("//media.notify.moe/images/elements/noise-light.png") + +mixin noise-strong + background-image url("//media.notify.moe/images/elements/noise-strong.png") + +mixin clip-long-text + overflow hidden + white-space nowrap + text-overflow ellipsis \ No newline at end of file