diff --git a/.gitignore b/.gitignore index f44a745..e23656f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ /public/* /resources/_gen/* .vscode/ -.unlighthouse/ # ignored files .directory diff --git a/assets/scss/home.scss b/assets/scss/home.scss index 71a3a3a..0a31309 100644 --- a/assets/scss/home.scss +++ b/assets/scss/home.scss @@ -21,38 +21,30 @@ mask: var(--vriish-waves); -webkit-mask: var(--vriish-waves); padding: 5rem 1rem 8rem 1rem; - @media (max-width: 1140px) { height: 90vh; font-size: 1.5rem; } - h1 { letter-spacing: 0.5rem; font-size: 7rem; - @media (max-width: 1140px) { font-size: 4rem; } } - p { letter-spacing: 0.15rem; } - #scroll-down { - bottom: 2rem; - color: var(--vriish-gradient-text); - font-family: FreeSerif, serif; font-size: 4.8rem; position: absolute; + bottom: 2rem; + animation: 1s ease-in infinite alternate scrollDown; + font-family: FreeSerif, serif; text-decoration: none; + color: var(--vriish-gradient-text); + transition: color 0.2s ease-in-out; - @media (prefers-reduced-motion: no-preference) { - animation: 1s ease-in infinite alternate scrollDown; - transition: color 0.2s ease-in-out; - } - &:hover { color: var(--vriish-gradient-text-hover); } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index f518dcb..8d38bd4 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,9 +2,15 @@ box-sizing: border-box; scrollbar-color: var(--vriish-rose) var(--background); scrollbar-width: thin; - - @media (prefers-reduced-motion: no-preference) { - scroll-behavior: smooth; + scroll-behavior: smooth; + &::-webkit-scrollbar { + background: var(--background); + width: 6px; + } + &::-webkit-scrollbar-thumb { background: var(--vriish-rose); } + &::selection { + color: var(--text); + background-color: var(--link-underline); } } @@ -13,7 +19,6 @@ html { overflow-x: hidden; overflow-y: scroll; padding: 0; - body { background: var(--background); color: var(--text); @@ -24,7 +29,6 @@ html { line-height: 1.5; margin: 0; min-height: 100vh; - @media (max-width: 920px) { font-size: 1em; grid-template-areas: @@ -33,45 +37,33 @@ html { "footer"; grid-template-columns: 1fr; } - h1, h2, h3, h4, h5, h6 { line-height: 1em; margin: .8em 0; } - a { color: var(--text); text-decoration: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: 3px; text-underline-offset: 2px; - - @media (prefers-reduced-motion: no-preference) { - transition: text-decoration-color .2s; - } - - &:hover { - text-decoration-color: var(--link-underline-hover); - } + transition: text-decoration-color .2s; + &:hover { text-decoration-color: var(--link-underline-hover); } } - pre { border: 1px solid var(--vriish-rose); border-radius: 4px; overflow: auto; padding: 10px 15px; } - p { hyphens: auto; - img { border-radius: 1rem; display: block; margin: 0 auto; } } - hr { border: 1px solid var(--border); color: var(--border); @@ -90,8 +82,7 @@ html { justify-content: center; padding: 3em 0; z-index: 2; - - h1, p { + h1, p { margin: 0; } } @@ -104,10 +95,7 @@ main { padding: 30px; width: 100%; min-height: 85.6vh; - - span { - font-size: .8em; - } + span { font-size: .8em; } } p.date-published { diff --git a/assets/scss/markup/render-image.scss b/assets/scss/markup/render-image.scss index 9ce8496..d35be9a 100644 --- a/assets/scss/markup/render-image.scss +++ b/assets/scss/markup/render-image.scss @@ -2,16 +2,13 @@ display: flex; flex-direction: column; margin: 3rem auto; - img { border-radius: 0.5rem; margin: 0 auto; box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem; max-width: 100%; } - &.with-text img { margin-bottom: .75rem; } - &-text { font-size: .8em; font-weight: 300; diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss index 205f4f5..2d5b3cf 100644 --- a/assets/scss/partials/footer.scss +++ b/assets/scss/partials/footer.scss @@ -4,24 +4,18 @@ footer { margin: 1em auto; text-align: center; font-size: 1rem; - p { margin: .25em; - span { - &:not(:last-child) { - &::after { content: 'ยท'; padding: .25em; } } - a { color: var(--text-secondary); text-decoration-color: transparent; - &:hover { text-decoration: underline; text-decoration-color: var(--text-secondary); diff --git a/assets/scss/partials/moreposts.scss b/assets/scss/partials/moreposts.scss index 253c6a5..9807deb 100644 --- a/assets/scss/partials/moreposts.scss +++ b/assets/scss/partials/moreposts.scss @@ -1,27 +1,22 @@ .moreposts { hyphens: auto; margin-top: 4em; - .more{ font-size: .75em; font-weight: normal; hyphens: none; - &::after { content: "\27F6"; margin-left: .25em; transition: margin .5s; } - &:hover::after { margin-left: .5em !important; } } - &:hover .more::after { margin-left: .35em; } - .moreposts-wrapper { border-radius: .5em; display: flex; @@ -29,7 +24,6 @@ gap: 1em; overflow-x: scroll; scroll-snap-type: x proximity; - .post-group { color: var(--vriish-gradient-text); background: var(--vriish-gradient); @@ -39,18 +33,15 @@ scroll-snap-align: start; min-width: 15em; width: 33.333%; - .title { flex: auto; margin: 1em; } - aside { margin: 1em; } } } - a { text-decoration: none; } diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index e94e8c8..a720081 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -18,7 +18,6 @@ border-radius: 0 2rem 2rem 0; border: 1px solid var(--sidebar-border); border-left: 0; - @media (max-width: 1140px) { overflow: unset; border: 0; @@ -34,7 +33,7 @@ position: relative; &::before { - content: attr(aria-label); + content: attr(data-title); left: calc(100% + 0.5rem); position: absolute; top: 50%; @@ -45,13 +44,9 @@ border-radius: 0.5rem; pointer-events: none; opacity: 0%; + transition: opacity 0.3s ease-in-out; z-index: 201; - - @media (prefers-reduced-motion: no-preference) { - transition: opacity 0.3s ease-in-out; - } } - &::after { content: ""; transform: translate(-50%, -50%) rotate(45deg); @@ -66,14 +61,9 @@ left: calc(100% + 0.5rem); pointer-events: none; opacity: 0%; - - @media (prefers-reduced-motion: no-preference) { - transition: opacity 0.3s ease-in-out; - } + transition: opacity 0.3s ease-in-out; } - &:hover { - &::before, &::after { opacity: 100%; } @@ -85,21 +75,15 @@ text-align: center; user-select: none; padding: inherit; - #avatar { border-radius: 300% 500% / 500% 300%; max-width: 64px; - + transition: 0.4s border-radius ease-in-out; @media (max-width: 1140px) { position: absolute; top: 1rem; left: 1rem; } - - @media (prefers-reduced-motion: no-preference) { - transition: 0.4s border-radius ease-in-out; - } - &:hover { border-radius: 500% 300% / 300% 500%; } @@ -108,7 +92,6 @@ #sidebar-menu { user-select: none; text-align: center; - @media (max-width: 1140px) { position: fixed; width: 100vw; @@ -120,12 +103,10 @@ border: 1px solid var(--sidebar-border); border-bottom: 0; } - ul { list-style: none; padding: 0; margin: 0; - @media (max-width: 1140px) { display: flex; flex-direction: row; @@ -133,7 +114,6 @@ height: 100%; } } - li { border-radius: 0.5rem; margin: 0.5em 0; @@ -143,15 +123,10 @@ display: flex; align-items: center; justify-content: center; - + transition: background-color 0.2s linear; @media (max-width: 1140px) { margin: 0 0.5rem; } - - @media (prefers-reduced-motion: no-preference) { - transition: background-color 0.2s linear; - } - a { overflow: visible; display: flex; @@ -159,7 +134,6 @@ width: 100%; height: 100%; } - &::after { background-color: var(--sidebar-accent-1); bottom: 0; @@ -172,50 +146,37 @@ z-index: -1; opacity: 1; opacity: 0.5; + transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out; border-radius: 0.5rem; - @media (max-width: 1140px) { left: 0; top: 100%; } - - @media (prefers-reduced-motion: no-preference) { - transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out; - } } - &.active { background-color: var(--sidebar-accent-1); - &:hover { background-color: var(--sidebar-accent-2); } - &:active { background-color: var(--sidebar-accent-3); } } - &:hover { - &::after { left: 0; opacity: 1; - @media (max-width: 1140px) { top: 0; } } } - &:active { - &::after { background-color: var(--sidebar-accent-2); } } } - a { text-decoration: none; display: flex; @@ -233,11 +194,9 @@ aside { #social-links { text-align: center; - @media (max-width: 1140px) { display: none; } - a { display: flex; padding: 1rem; @@ -248,7 +207,6 @@ color: hsl(251.5, 58.9%, 51.4%); } } - .mastodon-icon { color: hsl(239.6, 100%, 69.4%); } @@ -256,18 +214,15 @@ .icon { height: 1.25rem; width: 1.25rem; + transition: color 0.2s ease-in-out; display: block; - - @media (prefers-reduced-motion: no-preference) { - transition: color 0.2s ease-in-out; - } } } } #languages { text-align: center; + transition: background-color 0.2s ease-in-out; border-radius: 0.5rem 0.5rem 1.85rem 0.5rem; - @media (max-width: 1140px) { border-radius: 4rem; position: absolute; @@ -283,25 +238,18 @@ justify-content: center; overflow: hidden; } - @media (prefers-reduced-motion: no-preference) { - transition: background-color 0.2s ease-in-out; - } - &:hover { background-color: var(--sidebar-accent-1); - @media (max-width: 1140px) { background-color: var(--sidebar-accent-2); } } &:active { background-color: var(--sidebar-accent-2); - @media (max-width: 1140px) { background-color: var(--sidebar-accent-3); } } - #language { display: block; text-decoration: none; diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 9b07a0a..73de7c4 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -21,7 +21,7 @@