diff --git a/onlylegs/static/sass/components/banner.sass b/onlylegs/static/sass/components/banner.sass index 483c071..a13604d 100644 --- a/onlylegs/static/sass/components/banner.sass +++ b/onlylegs/static/sass/components/banner.sass @@ -20,26 +20,10 @@ background-color: RGB($fg-black) color: RGB($fg-white) - &::after - content: '' - - width: $rad - height: calc(#{$rad} * 2) - - position: absolute - bottom: calc(#{$rad} * -2) - left: 0 - - background-color: RGB($bg-bright) - border-radius: $rad 0 0 0 - box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100) - .banner height: 30rem max-height: 69vh - background-color: RGB($bg-300) - img position: absolute inset: 0 @@ -125,7 +109,6 @@ .banner-small height: 3.5rem - background-color: RGB($bg-100) .banner-content padding: 0 0.5rem diff --git a/onlylegs/static/sass/components/buttons/block.sass b/onlylegs/static/sass/components/buttons/block.sass index 3891edd..f16f96e 100644 --- a/onlylegs/static/sass/components/buttons/block.sass +++ b/onlylegs/static/sass/components/buttons/block.sass @@ -59,6 +59,10 @@ &.black @include btn-block($black) + &.disabled, &:disabled + color: RGB($fg-dim) + cursor: unset + .input-checkbox padding: 0 display: flex diff --git a/onlylegs/static/sass/components/buttons/pill.sass b/onlylegs/static/sass/components/buttons/pill.sass index e9723f3..3767c01 100644 --- a/onlylegs/static/sass/components/buttons/pill.sass +++ b/onlylegs/static/sass/components/buttons/pill.sass @@ -68,6 +68,10 @@ color: RGB($primary) + &.disabled, &:disabled + color: RGB($fg-dim) + cursor: unset + .pill__critical color: RGB($critical) diff --git a/onlylegs/static/sass/components/gallery.sass b/onlylegs/static/sass/components/gallery.sass index 05f2c66..87d63ca 100644 --- a/onlylegs/static/sass/components/gallery.sass +++ b/onlylegs/static/sass/components/gallery.sass @@ -222,3 +222,7 @@ @media (max-width: 800px) .gallery-grid grid-template-columns: auto auto auto + + .gallery-item + margin: 0.35rem + position: relative \ No newline at end of file diff --git a/onlylegs/static/sass/components/image-view.sass b/onlylegs/static/sass/components/image-view.sass new file mode 100644 index 0000000..b5d459e --- /dev/null +++ b/onlylegs/static/sass/components/image-view.sass @@ -0,0 +1,260 @@ +.info-container + padding: 0.5rem 0 0 0.5rem + width: 27rem + position: absolute + top: 0 + left: 0 + bottom: 0 + background-image: linear-gradient(90deg, $bg-transparent, transparent) + overflow-y: auto + transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1) + z-index: 2 + -ms-overflow-style: none + scrollbar-width: none + &::-webkit-scrollbar + display: none + + &.collapsed + left: -27rem +@media (max-width: 1100px) + .info-container + padding: 0 0.5rem 0 0.5rem + width: 100% + position: relative + background: none + // While probably not the best way of doing this + // Not bothered to fight with CSS today + &.collapsed + left: 0 + +details + margin-bottom: 0.5rem + padding: 0.5rem + display: flex + flex-direction: column + background-color: RGB($bg-300) + color: RGB($fg-white) + border-radius: $rad + overflow: hidden + + summary + height: 1.5rem + display: flex + flex-direction: row + justify-content: flex-start + align-items: center + position: relative + color: RGB($primary) + + > i + margin-right: 0 + font-size: 1.25rem + + &.collapse-indicator + transition: transform 0.15s cubic-bezier(.79, .14, .15, .86) + + h2 + margin: 0 0.5rem + font-size: 1.1rem + font-weight: 500 + + &[open] + summary + margin-bottom: 0.5rem + + > i.collapse-indicator + transform: rotate(90deg) + + p + margin: 0 + padding: 0 + + font-size: 1rem + font-weight: 400 + + text-overflow: ellipsis + overflow: hidden + + .link + margin: 0 + padding: 0 + + color: RGB($primary) + + cursor: pointer + text-decoration: none + + &:hover + text-decoration: underline + + .pfp + width: 1.1rem + height: 1.1rem + + border-radius: $rad-inner + + object-fit: cover + + table + margin: 0 + padding: 0 + + width: 100% + + overflow-x: hidden + border-collapse: collapse + + tr + white-space: nowrap + + td + padding-bottom: 0.5rem + + max-width: 0 + + font-size: 1rem + font-weight: 400 + + vertical-align: top + + > * + vertical-align: top + + td:first-child + padding-right: 0.5rem + + width: 50% + + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + td:last-child + width: 50% + + white-space: normal + word-break: break-word + + tr:last-of-type td + padding-bottom: 0 + +.img-colours + width: 100% + + display: flex + gap: 0.5rem + + button + margin: 0 + padding: 0 + + width: 1.6rem + height: 1.6rem + + display: flex + justify-content: center + align-items: center + + border-radius: $rad-inner + border: none + + i + font-size: 1rem + opacity: 0 + transition: opacity 0.15s ease-in-out + + &:hover i + opacity: 1 + +.img-groups + width: 100% + display: flex + flex-wrap: wrap + gap: 0.5rem + +.image-container + padding: 0.5rem + position: absolute + top: 0 + left: 27rem + right: 0 + bottom: 0 + z-index: 2 + transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1), padding 0.3s cubic-bezier(0.76, 0, 0.17, 1) + + picture + margin: auto + width: 100% + height: 100% + display: flex + overflow: hidden + + img + margin: auto + padding: 0 + width: auto + height: auto + max-width: 100% + max-height: 100% + object-fit: contain + object-position: center + border-radius: $rad + + &.collapsed + padding: 0 + left: 0 + + picture img + border-radius: 0 +@media (max-width: 1100px) + .image-container + position: relative + left: 0 + + picture + margin: 0 auto + max-height: 69vh + + img + max-height: 69vh + + &.collapsed + padding: 0.5rem + left: 0 + + picture img + border-radius: $rad + +.background + position: absolute + inset: 0 + background-color: RGB($bg-300) + background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%) + background-size: 1000px 640px + animation: imgLoading 1.8s linear infinite forwards + user-select: none + overflow: hidden + z-index: 1 + + img + position: absolute + top: 0 + left: 0 + width: 100% + height: 100vh + background-color: RGB($fg-white) + filter: blur(1rem) saturate(1.2) + transform: scale(1.1) + object-fit: cover + object-position: center center + + &::after + content: '' + position: absolute + inset: 0 + width: 100% + height: 100% + z-index: +1 + +@media (max-width: 1100px) + #fullscreenImage + display: none \ No newline at end of file diff --git a/onlylegs/static/sass/components/image-view/background.sass b/onlylegs/static/sass/components/image-view/background.sass deleted file mode 100644 index e7478b5..0000000 --- a/onlylegs/static/sass/components/image-view/background.sass +++ /dev/null @@ -1,42 +0,0 @@ -.background - width: 100% - height: 100vh - - position: fixed - top: 0 - left: 0 - - background-color: RGB($bg-300) - background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%) - background-size: 1000px 640px - animation: imgLoading 1.8s linear infinite forwards - - user-select: none - overflow: hidden - z-index: 1 - - img - position: absolute - top: 0 - left: 0 - - width: 100% - height: 100% - - background-color: RGB($fg-white) - - filter: blur(1rem) saturate(1.2) - transform: scale(1.1) - - object-fit: cover - object-position: center center - - span - position: absolute - top: 0 - left: 0 - - width: 100% - height: 100% - - z-index: +1 \ No newline at end of file diff --git a/onlylegs/static/sass/components/image-view/image.sass b/onlylegs/static/sass/components/image-view/image.sass deleted file mode 100644 index ac7b9d7..0000000 --- a/onlylegs/static/sass/components/image-view/image.sass +++ /dev/null @@ -1,28 +0,0 @@ -.image-container, picture - margin: auto - - width: 100% - height: 100% - - display: flex - overflow: hidden - - img - margin: auto - padding: 0 - - width: auto - height: auto - max-width: 100% - max-height: 100% - - object-fit: contain - object-position: center - -@media (max-width: 1100px) - .image-container, picture - margin: 0 auto - max-height: 69vh - - img - max-height: 69vh \ No newline at end of file diff --git a/onlylegs/static/sass/components/image-view/info-tab.sass b/onlylegs/static/sass/components/image-view/info-tab.sass deleted file mode 100644 index c803159..0000000 --- a/onlylegs/static/sass/components/image-view/info-tab.sass +++ /dev/null @@ -1,232 +0,0 @@ -.info-container - padding: 0.5rem 0 0.5rem 0.5rem - - width: 27rem - height: 100vh - - position: absolute - top: 0 - left: 0 - - display: flex - flex-direction: column - gap: 0.5rem - - background-image: linear-gradient(90deg, $bg-transparent, transparent) - - overflow-y: auto - z-index: +4 - transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1) - -ms-overflow-style: none - scrollbar-width: none - &::-webkit-scrollbar - display: none - - &.collapsed - left: -27rem - -.info-tab - display: flex - flex-direction: column - - position: relative - - background-color: RGB($bg-300) - border-radius: $rad - - transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86) - - &.collapsed - height: 2.5rem - - .collapse-indicator - transform: rotate(90deg) - - .info-header - border-radius: $rad - - .info-table - display: none - -.collapse-indicator - margin: 0 - padding: 0 - - position: absolute - top: 0.6rem - right: 0.6rem - - background-color: transparent - color: RGB($primary) - border: none - - z-index: +2 - - transition: transform 0.15s cubic-bezier(.79, .14, .15, .86) - cursor: pointer - - > i - font-size: 1.1rem - color: RGB($primary) - -.info-header - padding: 0.5rem - - width: 100% - height: 2.5rem - - display: flex - justify-content: start - align-items: center - gap: 0.5rem - - background-color: RGB($bg-200) - border-radius: $rad $rad 0 0 - - > i - font-size: 1.25rem - color: RGB($primary) - - h2 - margin: 0 - - font-size: 1.1rem - font-weight: 500 - - color: RGB($primary) - - text-overflow: ellipsis - overflow: hidden - -.info-table - margin: 0 - padding: 0.5rem - - display: flex - flex-direction: column - gap: 1rem - - color: RGB($fg-white) - - overflow-x: hidden - - p - margin: 0 - padding: 0 - - font-size: 1rem - font-weight: 400 - - text-overflow: ellipsis - overflow: hidden - - .link - margin: 0 - padding: 0 - - color: RGB($primary) - - cursor: pointer - text-decoration: none - - &:hover - text-decoration: underline - - .pfp - width: 1.1rem - height: 1.1rem - - border-radius: $rad-inner - - object-fit: cover - - table - margin: 0 - padding: 0 - - width: 100% - - overflow-x: hidden - border-collapse: collapse - - tr - white-space: nowrap - - td - padding-bottom: 0.5rem - - max-width: 0 - - font-size: 1rem - font-weight: 400 - - vertical-align: top - - > * - vertical-align: top - - td:first-child - padding-right: 0.5rem - - width: 50% - - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - td:last-child - width: 50% - - white-space: normal - word-break: break-word - - tr:last-of-type td - padding-bottom: 0 - -.img-colours - width: 100% - - display: flex - gap: 0.5rem - - button - margin: 0 - padding: 0 - - width: 1.6rem - height: 1.6rem - - display: flex - justify-content: center - align-items: center - - border-radius: $rad-inner - border: none - - i - font-size: 1rem - opacity: 0 - transition: opacity 0.15s ease-in-out - - &:hover i - opacity: 1 - -.img-groups - width: 100% - display: flex - flex-wrap: wrap - gap: 0.5rem - -@media (max-width: 1100px) - .info-container - padding: 0.5rem - - width: 100% - height: 100% - - position: relative - - &.collapsed - left: unset - - .info-container - background: transparent diff --git a/onlylegs/static/sass/components/image-view/view.sass b/onlylegs/static/sass/components/image-view/view.sass deleted file mode 100644 index 8103d88..0000000 --- a/onlylegs/static/sass/components/image-view/view.sass +++ /dev/null @@ -1,59 +0,0 @@ -@import 'background' -@import 'info-tab' -@import 'image' - - -.image-grid - padding: 0 - - width: 100% - height: 100vh - - position: relative - - display: flex - flex-direction: column - z-index: 3 - - .image-block - margin: 0 0 0 27rem - padding: 0.5rem - - width: calc(100% - 27rem) - height: 100vh - - position: relative - - display: flex - flex-direction: column - gap: 0 - - z-index: 3 - transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1) - - .pill-row - margin-top: 0.5rem - - &.collapsed - .image-block - margin: 0 - width: 100% - -@media (max-width: 1100px) - .image-grid - height: auto - - .image-block - margin: 0 - padding: 0.5rem 0.5rem 0 0.5rem - - width: 100% - height: auto - - transition: margin 0s, width 0s - - .pill-row - #fullscreenImage - display: none - - diff --git a/onlylegs/static/sass/components/navigation.sass b/onlylegs/static/sass/components/navigation.sass index c58805e..c4d5412 100644 --- a/onlylegs/static/sass/components/navigation.sass +++ b/onlylegs/static/sass/components/navigation.sass @@ -1,36 +1,20 @@ -.navigation - margin: 0 - padding: 0 - +nav width: 3.5rem height: 100% height: 100dvh display: flex flex-direction: column - justify-content: space-between position: fixed top: 0 left: 0 - background-color: RGB($bg-100) - color: RGB($fg-white) + background-color: transparent + color: inherit z-index: 69 - .logo - margin: 0 - padding: 0 - - width: 3.5rem - height: 3.5rem - min-height: 3.5rem - - display: flex - flex-direction: row - align-items: center - .navigation-spacer height: 100% @@ -50,6 +34,7 @@ align-items: center background-color: transparent + color: inherit border: none text-decoration: none @@ -58,7 +43,7 @@ padding: 0.5rem font-size: 1.3rem border-radius: $rad-inner - color: RGB($fg-white) + color: inherit > .nav-pfp padding: 0.4rem @@ -115,25 +100,22 @@ left: 3.9rem &.selected - > i - color: RGB($primary) - &::before content: '' display: block position: absolute top: 3px - left: 0 + left: 3px width: 3px height: calc(100% - 6px) - background-color: RGB($primary) + background-color: currentColor border-radius: $rad-inner @media (max-width: $breakpoint) - .navigation + nav width: 100vw height: 3.5rem @@ -145,6 +127,8 @@ bottom: 0 left: 0 + background-color: RGB($background) + > span display: none diff --git a/onlylegs/static/sass/components/notification.sass b/onlylegs/static/sass/components/notification.sass index 3a468a2..feea589 100644 --- a/onlylegs/static/sass/components/notification.sass +++ b/onlylegs/static/sass/components/notification.sass @@ -22,23 +22,22 @@ margin: 0 padding: 0 - width: 450px + width: 24rem height: auto position: fixed - top: 0.3rem + bottom: 0.3rem right: 0.3rem display: flex - flex-direction: column + flex-direction: column-reverse z-index: 621 .sniffle__notification - margin: 0 0 0.3rem 0 + margin-top: 0.3rem padding: 0 - width: 450px height: auto max-height: 100px @@ -56,7 +55,7 @@ box-sizing: border-box overflow: hidden - transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55) + transition: opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55) &::after content: "" @@ -89,10 +88,8 @@ &.hide margin: 0 max-height: 0 - opacity: 0 transform: translateX(100%) - transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out .sniffle__notification-icon @@ -130,6 +127,7 @@ @media (max-width: $breakpoint) .notifications + bottom: 3.8rem width: calc(100vw - 0.6rem) height: auto @@ -138,7 +136,7 @@ &.hide opacity: 0 - transform: translateY(-5rem) + transform: translateY(1rem) .sniffle__notification-time width: 100% diff --git a/onlylegs/static/sass/style.sass b/onlylegs/static/sass/style.sass index 097346c..3302ef4 100644 --- a/onlylegs/static/sass/style.sass +++ b/onlylegs/static/sass/style.sass @@ -18,10 +18,9 @@ @import "components/buttons/pill" @import "components/buttons/block" -@import "components/image-view/view" +@import "components/image-view" @import "components/settings" -// Reset * box-sizing: border-box font-family: $font @@ -37,66 +36,49 @@ ::-webkit-scrollbar-thumb:hover background: RGB($fg-white) -html, body +html margin: 0 padding: 0 - - min-height: 100vh - max-width: 100vw - - background-color: RGB($fg-white) - scroll-behavior: smooth - overflow-x: hidden -.wrapper +body margin: 0 padding: 0 0 0 3.5rem + max-width: 100% min-height: 100vh + display: grid + grid-template-rows: auto 1fr auto + + background-color: RGB($background) + color: RGB($foreground) + + overflow-x: hidden +@media (max-width: $breakpoint) + body + padding: 0 0 3.5rem 0 + +main display: flex flex-direction: column - - background-color: RGB($bg-bright) - color: RGB($bg-100) - -.big-text - height: 20rem - - display: flex - flex-direction: column - justify-content: center - align-items: center - - color: RGB($bg-100) - - h1 - margin: 0 2rem - - font-size: 4rem - font-weight: 900 - text-align: center - - p - margin: 0 2rem - - max-width: 40rem - font-size: 1rem - font-weight: 400 - text-align: center + position: relative + background: RGBA($white, 1) + color: RGB($fg-black) + border-top-left-radius: $rad + overflow: hidden +@media (max-width: $breakpoint) + main + border-top-left-radius: 0 .error-page - width: 100% - height: 100vh + min-height: 100% display: flex flex-direction: column justify-content: center align-items: center - background-color: RGB($bg-bright) - h1 margin: 0 2rem @@ -113,23 +95,8 @@ html, body font-size: 1.25rem font-weight: 400 text-align: center - - color: $fg-black - - @media (max-width: $breakpoint) - .wrapper - padding: 0 0 3.5rem 0 - - .big-text - height: calc(75vh - 3.5rem) - - h1 - font-size: 3.5rem - .error-page - height: calc(100vh - 3.5rem) - h1 font-size: 4.5rem diff --git a/onlylegs/static/sass/variables.sass b/onlylegs/static/sass/variables.sass index bc1bd9f..e3fcd83 100644 --- a/onlylegs/static/sass/variables.sass +++ b/onlylegs/static/sass/variables.sass @@ -37,6 +37,11 @@ $font: 'Rubik', sans-serif $breakpoint: 800px +// New variables, Slowly moving over to them because I suck at planning ahead and coding reeee +$background: var(--bg-100) +$foreground: var(--fg-white) + + \:root --bg-dim: 16, 16, 16 --bg-bright: 232, 227, 227 @@ -66,7 +71,7 @@ $breakpoint: 800px --success: var(--green) --info: var(--blue) - --rad: 8px + --rad: 0.5rem --rad-inner: calc(var(--rad) / 2) --animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)