diff --git a/.github/workflows/bd-fe.yml b/.github/workflows/bd-fe.yml index f0750e809..7b13062b0 100644 --- a/.github/workflows/bd-fe.yml +++ b/.github/workflows/bd-fe.yml @@ -81,22 +81,6 @@ jobs: echo "RELEASE_NAME=stg-${name/\//-}" >> $GITHUB_ENV echo "DIST=$(date +%y%m%d-%H%M%S)" >> $GITHUB_ENV - - name: ✍ Summarize - run: | - echo '# Summary' >> $GITHUB_STEP_SUMMARY - echo '## Run Initiator' - echo '- Actor: ${{ github.actor }}' >> $GITHUB_STEP_SUMMARY - echo '- Event: ${{ github.event_name }}' >> $GITHUB_STEP_SUMMARY - echo '## Run Details' >> $GITHUB_STEP_SUMMARY - echo '- Branch: [${{ env.BRANCH_NAME }}](https://github.com/dgrebb/dgrebb.com/tree/${{ env.BRANCH_NAME }})' >> $GITHUB_STEP_SUMMARY - if [ "${{ github.event_name }}" = "pull_request" ]; then - echo '- Pull Request: [#${{ github.event.number }}](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}) ${{ github.event.pull_request.title }}' >> $GITHUB_STEP_SUMMARY - echo '- ${{ github.event.pull_request.changed_files }} Files Changed: [ ${{ github.event.pull_request.commits }} Commits](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/commits) | [Diff](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/files)' >> $GITHUB_STEP_SUMMARY - fi - echo '## Release Details' >> $GITHUB_STEP_SUMMARY - echo '- Release: [${{ env.RELEASE_NAME }}](https://dgrebb.sentry.io/releases/${{ env.RELEASE_NAME }})' >> $GITHUB_STEP_SUMMARY - echo '- Dist: ${{ env.DIST }}' >> $GITHUB_STEP_SUMMARY - - name: 𐂷 Checkout uses: actions/checkout@v3 with: @@ -182,6 +166,22 @@ jobs: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + - name: ✍ Summarize + run: | + echo '# Summary' >> $GITHUB_STEP_SUMMARY + echo '## Run Initiator' + echo '- Actor: ${{ github.actor }}' >> $GITHUB_STEP_SUMMARY + echo '- Event: ${{ github.event_name }}' >> $GITHUB_STEP_SUMMARY + echo '## Run Details' >> $GITHUB_STEP_SUMMARY + echo '- Branch: [${{ env.BRANCH_NAME }}](https://github.com/dgrebb/dgrebb.com/tree/${{ env.BRANCH_NAME }})' >> $GITHUB_STEP_SUMMARY + if [ "${{ github.event_name }}" = "pull_request" ]; then + echo '- Pull Request: [#${{ github.event.number }}](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}) ${{ github.event.pull_request.title }}' >> $GITHUB_STEP_SUMMARY + echo '- ${{ github.event.pull_request.changed_files }} Files Changed: [ ${{ github.event.pull_request.commits }} Commits](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/commits) | [Diff](https://github.com/dgrebb/dgrebb.com/pull/${{ github.event.number }}/files)' >> $GITHUB_STEP_SUMMARY + fi + echo '## Release Details' >> $GITHUB_STEP_SUMMARY + echo '- Release: [${{ env.RELEASE_NAME }}](https://dgrebb.sentry.io/releases/${{ env.RELEASE_NAME }})' >> $GITHUB_STEP_SUMMARY + echo '- Dist: ${{ env.DIST }}' >> $GITHUB_STEP_SUMMARY + - name: Delete Previous deployments uses: actions/github-script@v6 with: @@ -206,4 +206,4 @@ jobs: deployment_id: deployment.id }); }) - ); + ); \ No newline at end of file diff --git a/.github/workflows/test-backstop.yml b/.github/workflows/test-backstop.yml index 6ca1530bb..4c9fd5401 100644 --- a/.github/workflows/test-backstop.yml +++ b/.github/workflows/test-backstop.yml @@ -110,8 +110,7 @@ jobs: cd _ci/backstop FAIL_TABLE=$(./_utils/parse-report.sh ${{ vars.REPORTS_DOMAIN }} $REPORT_PATH) echo "# Backstop Summary" >> $GITHUB_STEP_SUMMARY - echo "BackstopJS Report" >> $GITHUB_STEP_SUMMARY - echo "Lighthouse Report" >> $GITHUB_STEP_SUMMARY + echo "## 📋 View Report" >> $GITHUB_STEP_SUMMARY echo $FAIL_TABLE >> $GITHUB_STEP_SUMMARY - name: 🔥 Bummer. Uploading Failed Artifacts! diff --git a/front/src/lib/components/posts/Post.svelte b/front/src/lib/components/posts/Post.svelte index a8bc25a8e..c3482d858 100644 --- a/front/src/lib/components/posts/Post.svelte +++ b/front/src/lib/components/posts/Post.svelte @@ -31,7 +31,7 @@ }) : false; - let toc, postNavCheckbox, miniPostNav; + let toc; $: toc = []; function filterTokens(event) { const tokens = event.detail.tokens; diff --git a/front/src/lib/components/posts/PostNav.svelte b/front/src/lib/components/posts/PostNav.svelte deleted file mode 100644 index 84363bfb0..000000000 --- a/front/src/lib/components/posts/PostNav.svelte +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/front/src/lib/styles/base/layout.css b/front/src/lib/styles/base/layout.css index b36b96797..37f893952 100644 --- a/front/src/lib/styles/base/layout.css +++ b/front/src/lib/styles/base/layout.css @@ -22,20 +22,22 @@ .header, .footer { - @apply w-full - max-w-6xl - px-3 - lg:p-14; + width: 100%; + max-width: 72rem /* 1152px */; } .header { display: flex; position: relative; align-items: center; - padding: 1.25rem 1rem 0rem 1rem; - @screen sm { - padding-top: 2rem; - padding-bottom: 0.75rem; + z-index: 1; + padding: 1rem; + padding-bottom: 0; + @media screen and (min-width: 480px) { + padding-top: 1.25rem; + } + @media screen and (min-width: 640px) { + padding: 2.5rem 2.25rem 0 2.25rem; } } body.ready .header { diff --git a/front/src/lib/styles/base/theme.css b/front/src/lib/styles/base/theme.css index eea314f9e..9d7a4844b 100644 --- a/front/src/lib/styles/base/theme.css +++ b/front/src/lib/styles/base/theme.css @@ -49,12 +49,44 @@ } } +.privacy, +.post { + background: var(--rim-light-bg), var(--bg-clr); + @media screen and (min-width: 640px) { + box-shadow: var(--shadow-elevation-high); + } + &::before { + background: var(--rim-light-mask-bg); + } +} + +.category-posts-transition-container { + background: var(--rim-light-bg), var(--bg-clr); + @media screen and (min-width: 640px) { + box-shadow: var(--shadow-elevation-high); + } + &::before { + background: var(--rim-light-mask-bg); + } + @media screen and (min-width: 640px) { + background: var(--category-rim-light-bg), var(--bg-clr); + @media screen and (min-width: 640px) { + box-shadow: var(--shadow-elevation-high); + } + &::before { + background: var(--category-rim-light-mask-bg); + } + } +} + @layer utilities { .dg--light-theme { --bg-clr: var(--lemon-50); --fg-clr: var(--violet); --shadow-color: var(--sunshine-shadow-clr); --rim-clr: var(--sun); + --link-clr: var(--violet-a75); + --link-clr--hover: var(--jasper); --highlight-clr: var(--jasper); --rim-light-bg: linear-gradient( @@ -63,7 +95,18 @@ var(--bg-clr) 77%, var(--sunshine) 100% ); + --category-rim-light-bg: linear-gradient( + 35deg, + var(--bg-clr) 33%, + var(--bg-clr) 77%, + var(--rim-clr) 100% + ); --rim-light-mask-bg: linear-gradient(3deg, transparent, var(--rim-clr)); + --category-rim-light-mask-bg: linear-gradient( + 33deg, + transparent, + var(--rim-clr) + ); .nav-home, .nav-link { @@ -93,7 +136,7 @@ body { background: linear-gradient( - 3deg, + 10deg, transparent 0%, var(--sunshine) 77%, var(--sun) 123% @@ -108,12 +151,12 @@ .bio, .footer { a { - border-bottom-color: var(--violet-a75); - color: var(--violet-a75); + border-bottom-color: var(--link-clr); + color: var(--link-clr); &:hover, &:focus { border-bottom-color: var(--highlight-clr); - color: var(--violet); + color: var(--highlight-clr); } } } @@ -198,13 +241,13 @@ .post-article, .category-list { a:not(.heading-anchor-link) { - border-bottom: 1px solid var(--violet-a75); - color: var(--violet-a75); + border-bottom: 1px solid var(--link-clr); + color: var(--link-clr); &:hover, &:focus, &:focus-visible { border-bottom: 1px solid var(--highlight-clr); - color: var(--violet); + color: var(--highlight-clr); } } } @@ -388,6 +431,27 @@ } } + .category-posts-list { + .post-item { + .post-item-summary, + h3, + a, + p { + color: var(--violet-a75); + } + &:hover, + &:focus, + &:focus-within { + .post-item-image { + opacity: 1; + } + a h3 { + color: var(--jasper); + } + } + } + } + .page-navigation.mini { input#page-navigation-checkbox { ~ label { @@ -419,39 +483,59 @@ .page-navigation-list { a { - color: var(--violet-a75); + transition-duration: var(--transition-duration); + transition-property: color; + transition-timing-function: var(--transition-timing-function); + color: var(--fg-clr); &:hover, &:focus, - &:focus, - &:focus-visible, - &:active, - &.active { - color: var(--violet); + &:focus-visible { + color: var(--link-clr--hover); } - &.active::after { - color: var(--orange); + &.active { + &:hover, + &:focus, + &:focus-visible { + color: var(--fg-clr); + } + &::after { + color: var(--highlight-clr); + } } } } } - /* ----------------------- - ---------- Dark Theme ---- - ----------------------- */ + /* ------------------------------------------------------------------------------------- + ---------- Dark Theme ------------------------------------------------------------------ + -------------------------------------------------------------------------------------- */ .dg--dark-theme { --fg-clr: var(--moon); --bg-clr: var(--rich-black); --shadow-color: var(--moonshine-shadow-clr); --rim-clr: var(--moonshine); - --highlight-clr: var(--highlight-clr); + --link-clr: var(--celestial-a75); + --link-clr--hover: var(--celestial); + --highlight-clr: var(--orange); --rim-light-bg: linear-gradient( - 5deg, + 10deg, + var(--bg-clr) 33%, + var(--bg-clr) 90%, + var(--rim-clr) 100% + ); + --category-rim-light-bg: linear-gradient( + 35deg, var(--bg-clr) 33%, var(--bg-clr) 77%, var(--rim-clr) 100% ); --rim-light-mask-bg: linear-gradient(3deg, transparent, var(--rim-clr)); + --category-rim-light-mask-bg: linear-gradient( + 33deg, + transparent, + var(--rim-clr) + ); .nav-home, .nav-link { @@ -460,7 +544,7 @@ .nav-home { &:hover { - color: var(--orange); + color: var(--highlight-clr); } } @@ -468,11 +552,11 @@ opacity: 0.5; &:hover { opacity: 1; - border-bottom-color: var(--orange); + border-bottom-color: var(--highlight-clr); } &.active { opacity: 1; - border-bottom-color: var(--orange); + border-bottom-color: var(--highlight-clr); &.subactive:hover { opacity: 0.5; } @@ -481,7 +565,7 @@ body { background: linear-gradient( - 5deg, + 10deg, transparent 0%, var(--bg-clr) 35%, var(--moonshine) 100% @@ -513,7 +597,7 @@ .links { .link { a:hover { - color: var(--orange); + color: var(--highlight-clr); } } } @@ -561,13 +645,6 @@ .privacy, .post, .category-posts-transition-container { - background: var(--rim-light-bg), var(--bg-clr); - &::before { - background: var(--rim-light-mask-bg); - } - @media screen and (min-width: 640px) { - box-shadow: var(--shadow-elevation-high); - } h1, h2, h3, @@ -588,7 +665,7 @@ &:hover, &:focus, &:focus-visible { - border-bottom: 1px solid var(--orange); + border-bottom: 1px solid var(--highlight-clr); color: var(--celestial); } } @@ -604,7 +681,7 @@ background-color: var(--bg-clr); } .summary::first-letter { - color: var(--orange); + color: var(--highlight-clr); } .pubdate { color: var(--celestial-a75); @@ -615,7 +692,7 @@ &:focus, &:focus-visible, &:active { - color: var(--orange); + color: var(--highlight-clr); } } } @@ -748,6 +825,27 @@ } } + .category-posts-list { + .post-item { + .post-item-summary, + h3, + a, + p { + color: var(--fg-clr); + } + &:hover, + &:focus, + &:focus-within { + .post-item-image { + opacity: 1; + } + a h3 { + color: var(--orange); + } + } + } + } + .page-navigation { h2 { color: var(--fg-clr); @@ -795,17 +893,24 @@ .page-navigation-list { a { + transition-duration: var(--transition-duration); + transition-property: color; + transition-timing-function: var(--transition-timing-function); color: var(--celestial-a75); &:hover, &:focus, - &:focus, - &:focus-visible, - &:active, - &.active { - color: var(--celestial); + &:focus-visible { + color: var(--link-clr--hover); } - &.active::after { - color: var(--orange); + &.active { + &:hover, + &:focus, + &:focus-visible { + color: var(--fg-clr); + } + &::after { + color: var(--highlight-clr); + } } } } diff --git a/front/src/lib/styles/components/nav.css b/front/src/lib/styles/components/nav.css index fec0658b9..03271dc8a 100644 --- a/front/src/lib/styles/components/nav.css +++ b/front/src/lib/styles/components/nav.css @@ -1,7 +1,3 @@ -.header { - z-index: 1; -} - .site-title { @apply flex flex-grow; @@ -73,7 +69,7 @@ border-bottom-color: transparent; padding-top: 0.25rem; padding-bottom: 0.25rem; - font-size: 1rem; + font-size: 0.875rem; line-height: 1.25rem; letter-spacing: -0.025em; &:hover, @@ -96,4 +92,7 @@ } } } + @media screen and (min-width: 640px) { + font-size: 1rem; + } } diff --git a/front/src/lib/styles/components/page-nav.css b/front/src/lib/styles/components/page-nav.css index b03a5aaa2..ab0c21f4c 100644 --- a/front/src/lib/styles/components/page-nav.css +++ b/front/src/lib/styles/components/page-nav.css @@ -30,6 +30,7 @@ content: ''; } a.active { + cursor: default; padding-right: 1rem; &:after { top: calc(50% - 0.75rem); diff --git a/front/src/lib/styles/components/post-nav.css b/front/src/lib/styles/components/post-nav.css deleted file mode 100644 index 91b42b18c..000000000 --- a/front/src/lib/styles/components/post-nav.css +++ /dev/null @@ -1,102 +0,0 @@ -.post-navigation.mini { - -webkit-text-select: none; - position: absolute; - top: -2.67rem; - right: -1.83%; - z-index: 10; - padding: 0.33rem; - overflow: hidden; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - text-align: right; - @screen sm { - display: none; - } - .post-navigation-toggle { - display: inline-block; - transition: background-color, color; - cursor: pointer; - border-radius: 0.33rem; - background-color: rgba(var(--background-saturated), 0.5); - padding: 0.33rem; - @apply dg--transition-effect; - &:hover, - &:focus { - background-color: rgba(var(--background-saturated), 0.9); - color: rgb(var(--highlight-rgb)); - } - } - input#post-navigation-checkbox { - display: none; - border-radius: 0.77rem; - ~ label { - display: inline-block; - position: relative; - vertical-align: middle; - z-index: 1; - .post-navigation-open { - display: block; - } - .post-navigation-close { - display: none; - } - & + .post-navigation-list { - position: relative; - top: -1.85rem; - right: -333px; - opacity: 0; - backdrop-filter: blur(0.5rem); - transition: right, opacity; - margin-bottom: -1.85rem; - border-radius: 0.33rem; - background-color: rgba(var(--background-saturated), 0.9); - padding: 2rem; - overflow: hidden; - @apply dg--transition-effect; - label.bottom { - position: absolute; - right: 0; - bottom: 0; - .post-navigation-open { - display: block; - } - .post-navigation-close { - display: none; - } - } - } - } - &:checked { - ~ label, - label.bottom { - background-color: rgba(var(--background-saturated), 0); - .post-navigation-open { - display: none; - } - .post-navigation-close { - display: block; - } - & + .post-navigation-list { - right: 0; - opacity: 1; - & label.bottom { - background-color: rgba(var(--background-saturated), 0); - .post-navigation-open { - display: none; - } - .post-navigation-close { - display: block; - } - } - } - } - } - } - - ul { - li { - list-style-type: none; - } - } -} diff --git a/front/src/lib/styles/global.css b/front/src/lib/styles/global.css index 1dca0a2c7..2f2a7aa2f 100644 --- a/front/src/lib/styles/global.css +++ b/front/src/lib/styles/global.css @@ -174,7 +174,7 @@ body { &:focus, &:focus-visible, &:active { - color: rgba(var(--link-rgb), 1); + color: var(--highlight-clr); } svg { margin-top: 1.25rem; diff --git a/front/src/lib/styles/pages/category.css b/front/src/lib/styles/pages/category.css index 1b9a8e35a..0385546ca 100644 --- a/front/src/lib/styles/pages/category.css +++ b/front/src/lib/styles/pages/category.css @@ -11,7 +11,7 @@ flex-direction: column; align-items: center; h1.page-heading { - margin-bottom: 0.5rem; + padding-bottom: 0.5rem; } .category-name { max-width: 77%; @@ -19,9 +19,9 @@ } .page-navigation.mini.top { position: absolute; - top: 4rem; + top: 2.5rem; right: 0; - padding: 0; + padding: 0 0.5rem; } } .category-posts-list, @@ -36,10 +36,13 @@ } .category-posts-list { width: 100%; - @screen sm { + @media screen and (min-width: 640px) { float: left; width: 77%; } + @media screen and (min-width: 900px) { + width: 80%; + } .transition-elastic-fly-container { border-radius: 0.77rem; overflow: visible; @@ -61,29 +64,11 @@ } .post-item { list-style-type: none; - &:first-of-type { - } .post-item-summary, a { display: flex; flex-direction: row; - opacity: 0.67; - transition: opacity 0.5s; - &:hover, - &:focus { - opacity: 1; - } - } - &:hover, - &:focus { - .post-item-summary, - a { - opacity: 0.8; - } - a:hover, - a:focus { - opacity: 1; - } + transition: color 0.5s; } .post-item-heading { display: flex; @@ -101,7 +86,11 @@ flex-shrink: 0; flex-direction: column; align-self: start; + opacity: 0.77; z-index: 3; + transition-duration: var(--transition-duration); + transition-property: opacity; + transition-timing-function: var(--transition-timing-function); margin-left: 1.75rem; border-radius: 100%; width: 77px; @@ -118,9 +107,11 @@ right: 0; float: right; opacity: 0.8; - width: 20%; - @screen sm { + padding: 0 0 0 1rem; + @media screen and (min-width: 640px) { display: block; + } + @media screen and (min-width: 1024px) { padding-right: 1.5rem; } } diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css index ac4df6052..a51fbfea8 100644 --- a/front/src/lib/styles/pages/post.css +++ b/front/src/lib/styles/pages/post.css @@ -1,4 +1,3 @@ -@import '../components/post-nav.css'; .post { display: block; position: relative; diff --git a/front/src/routes/posts/category/[category]/+page.svelte b/front/src/routes/posts/category/[category]/+page.svelte index 52354c54d..2a1f9fd8e 100644 --- a/front/src/routes/posts/category/[category]/+page.svelte +++ b/front/src/routes/posts/category/[category]/+page.svelte @@ -33,12 +33,12 @@
Main Content -

{headline} /

- +

{headline}

+