From 4fe76e19b7364a7fb3f140db99c8d1db3423e7f4 Mon Sep 17 00:00:00 2001 From: vrifox Date: Wed, 5 Apr 2023 23:23:32 +0200 Subject: [PATCH 1/5] add aria-label to menu entries --- layouts/partials/sidebar.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 6a1084f..73de7c4 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -12,9 +12,9 @@ -- 2.46.0 From e8f74110b5fd76965f6ec662d2286e5e650bcf46 Mon Sep 17 00:00:00 2001 From: vrifox Date: Wed, 17 May 2023 13:54:02 +0200 Subject: [PATCH 2/5] respect reduced motion preference --- assets/scss/home.scss | 18 +++++--- assets/scss/main.scss | 38 ++++++++++------ assets/scss/markup/render-image.scss | 3 ++ assets/scss/partials/footer.scss | 6 +++ assets/scss/partials/moreposts.scss | 9 ++++ assets/scss/partials/sidebar.scss | 66 +++++++++++++++++++++++++--- 6 files changed, 115 insertions(+), 25 deletions(-) diff --git a/assets/scss/home.scss b/assets/scss/home.scss index 0a31309..71a3a3a 100644 --- a/assets/scss/home.scss +++ b/assets/scss/home.scss @@ -21,30 +21,38 @@ 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 8d38bd4..f518dcb 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,15 +2,9 @@ box-sizing: border-box; scrollbar-color: var(--vriish-rose) var(--background); scrollbar-width: thin; - 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); + + @media (prefers-reduced-motion: no-preference) { + scroll-behavior: smooth; } } @@ -19,6 +13,7 @@ html { overflow-x: hidden; overflow-y: scroll; padding: 0; + body { background: var(--background); color: var(--text); @@ -29,6 +24,7 @@ html { line-height: 1.5; margin: 0; min-height: 100vh; + @media (max-width: 920px) { font-size: 1em; grid-template-areas: @@ -37,33 +33,45 @@ 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; - transition: text-decoration-color .2s; - &:hover { text-decoration-color: var(--link-underline-hover); } + + @media (prefers-reduced-motion: no-preference) { + 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); @@ -82,7 +90,8 @@ html { justify-content: center; padding: 3em 0; z-index: 2; - h1, p { + + h1, p { margin: 0; } } @@ -95,7 +104,10 @@ 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 d35be9a..9ce8496 100644 --- a/assets/scss/markup/render-image.scss +++ b/assets/scss/markup/render-image.scss @@ -2,13 +2,16 @@ 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 2d5b3cf..205f4f5 100644 --- a/assets/scss/partials/footer.scss +++ b/assets/scss/partials/footer.scss @@ -4,18 +4,24 @@ 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 9807deb..253c6a5 100644 --- a/assets/scss/partials/moreposts.scss +++ b/assets/scss/partials/moreposts.scss @@ -1,22 +1,27 @@ .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; @@ -24,6 +29,7 @@ gap: 1em; overflow-x: scroll; scroll-snap-type: x proximity; + .post-group { color: var(--vriish-gradient-text); background: var(--vriish-gradient); @@ -33,15 +39,18 @@ 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 a720081..12a7250 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -18,6 +18,7 @@ border-radius: 0 2rem 2rem 0; border: 1px solid var(--sidebar-border); border-left: 0; + @media (max-width: 1140px) { overflow: unset; border: 0; @@ -44,9 +45,13 @@ 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); @@ -61,9 +66,14 @@ left: calc(100% + 0.5rem); pointer-events: none; opacity: 0%; - transition: opacity 0.3s ease-in-out; + + @media (prefers-reduced-motion: no-preference) { + transition: opacity 0.3s ease-in-out; + } } + &:hover { + &::before, &::after { opacity: 100%; } @@ -75,15 +85,21 @@ 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%; } @@ -92,6 +108,7 @@ #sidebar-menu { user-select: none; text-align: center; + @media (max-width: 1140px) { position: fixed; width: 100vw; @@ -103,10 +120,12 @@ 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; @@ -114,6 +133,7 @@ height: 100%; } } + li { border-radius: 0.5rem; margin: 0.5em 0; @@ -123,10 +143,15 @@ 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; @@ -134,6 +159,7 @@ width: 100%; height: 100%; } + &::after { background-color: var(--sidebar-accent-1); bottom: 0; @@ -146,37 +172,50 @@ 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; @@ -194,9 +233,11 @@ aside { #social-links { text-align: center; + @media (max-width: 1140px) { display: none; } + a { display: flex; padding: 1rem; @@ -207,6 +248,7 @@ color: hsl(251.5, 58.9%, 51.4%); } } + .mastodon-icon { color: hsl(239.6, 100%, 69.4%); } @@ -214,15 +256,18 @@ .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; @@ -238,18 +283,25 @@ 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; -- 2.46.0 From 837664f4c5a2b6890a92f5885d56390e7022b155 Mon Sep 17 00:00:00 2001 From: vrifox Date: Wed, 17 May 2023 14:14:04 +0200 Subject: [PATCH 3/5] gitignore unlighthouse reports --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e23656f..be0f77c 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ /public/* /resources/_gen/* .vscode/ +.unglighthouse/ # ignored files .directory -- 2.46.0 From 2be07ae8dd8e5d87d8fa099bd312931db85c4e67 Mon Sep 17 00:00:00 2001 From: vrifox Date: Wed, 17 May 2023 14:30:00 +0200 Subject: [PATCH 4/5] improve accessability --- assets/scss/partials/sidebar.scss | 2 +- layouts/partials/sidebar.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 12a7250..e94e8c8 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -34,7 +34,7 @@ position: relative; &::before { - content: attr(data-title); + content: attr(aria-label); left: calc(100% + 0.5rem); position: absolute; top: 50%; diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 73de7c4..9b07a0a 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -21,7 +21,7 @@