From 565103dda4ce0cad9f2576b5784dba579d98808f Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Mon, 27 May 2024 19:02:11 +0100 Subject: [PATCH] Add correct date formatting to certificate Adjust table styling Change accent colour from a shitty orange to a more woody orange Scrollbar theme --- src/components/Card.astro | 10 ++++-- src/components/Certificate.astro | 11 +++++-- src/layouts/Markdown.astro | 56 ++++++++++++++++++++++++-------- src/styles/_certificate.scss | 10 ++++-- src/styles/_reset.scss | 7 ++++ src/styles/vars.scss | 4 +-- 6 files changed, 76 insertions(+), 22 deletions(-) diff --git a/src/components/Card.astro b/src/components/Card.astro index 74c9661..0af2cdd 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -52,6 +52,8 @@ const date = new Date(post.data.pubDate); border: 2px solid $gray; background-color: $dark; color: $light; + + transition: background-color $corner-speed ease-in-out; } .link-card-corner { @@ -65,13 +67,16 @@ const date = new Date(post.data.pubDate); border-top-left-radius: $radius; border-top: 2px solid $gray; border-left: 2px solid $gray; + background-image: linear-gradient(135deg, rgba($accent, 0.03), darken($dark, 1%)); background-color: $dark; - background-image: linear-gradient(135deg, $dark, darken($dark, 1%)); color: $light; box-shadow: -4px -4px 0 rgba(#000, 0); - transition: right $corner-speed ease-in-out, bottom $corner-speed ease-in-out, box-shadow $corner-speed ease-in-out; + transition: + right $corner-speed ease-in-out, + bottom $corner-speed ease-in-out, + box-shadow $corner-speed ease-in-out; pointer-events: none; overflow: hidden; z-index: +3; @@ -97,6 +102,7 @@ const date = new Date(post.data.pubDate); &:hover, &:focus-within { > a { + background-color: rgba($accent, 0.03); outline: none; } diff --git a/src/components/Certificate.astro b/src/components/Certificate.astro index f9c9e1c..ba79fdf 100644 --- a/src/components/Certificate.astro +++ b/src/components/Certificate.astro @@ -1,5 +1,9 @@ --- +import { getMonth, getDaySuffix } from "../utils"; + const { certificate } = Astro.props; + +const date = new Date(certificate.data.achieved); ---
@@ -13,8 +17,9 @@ const { certificate } = Astro.props;

{certificate.data.title}

-

{certificate.data.achieved}

-

By: {certificate.data.provider}

+
+

{date.getDate()}{getDaySuffix(date)} {getMonth(date)} {date.getFullYear()}

+

Presented by {certificate.data.provider}

{certificate.data.skills && (
    @@ -22,6 +27,6 @@ const { certificate } = Astro.props;
)} - {certificate.data.link && ( View )} + {certificate.data.link && ( View Full )}
diff --git a/src/layouts/Markdown.astro b/src/layouts/Markdown.astro index 5e927aa..de998ed 100644 --- a/src/layouts/Markdown.astro +++ b/src/layouts/Markdown.astro @@ -102,17 +102,22 @@ const date = new Date(post.data.pubDate); } a { - text-decoration: none; + text-decoration: underline; + color: $accent; - transition: all 0.1s ease-in-out; &:hover, &:focus-visible { - text-decoration: underline; + color: $light; } - &:not([class]) { + &:focus-visible { + border-radius: $radius; + outline: 1px solid $light; + } + + &:is([class]) { text-decoration-skip-ink: auto; - color: currentColor; + text-decoration: none; } } @@ -150,33 +155,54 @@ const date = new Date(post.data.pubDate); table { width: 100%; - border: 1px solid $gray; + /*border: 1px solid $gray;*/ border-collapse: collapse; tr { - border-bottom: 1px solid $gray; + /*border-bottom: 1px solid $gray;*/ - &:last-of-type { - border: 0 solid transparent; + &:nth-child(even) td { + background-color: rgba($gray, 0.35); } - th, td { + &:last-of-type { + /*border: 0 solid transparent;*/ + } + + td { padding: 8px 16px; font-size: 13px; border-right: 1px solid $gray; + &:first-child { + border-bottom-left-radius: $radius; + } + &:last-child { + border-bottom-right-radius: $radius; + } &:last-of-type { - border: 0 solid transparent; + border-right: 0 solid transparent; } } th { - font-weight: bolder; + padding: 8px 16px; - background-color: $gray; + font-size: 13px; + font-weight: 500; + + background-color: rgba($accent, 0.3); + color: $light; + + &:first-child { + border-top-left-radius: $radius; + } + &:last-child { + border-top-right-radius: $radius; + } } } } @@ -221,6 +247,10 @@ const date = new Date(post.data.pubDate); background-color: $gray; color: $light; } + + &:focus-visible { + outline: 1px solid $light; + } } .footnotes { diff --git a/src/styles/_certificate.scss b/src/styles/_certificate.scss index 29b22be..3e84c5b 100644 --- a/src/styles/_certificate.scss +++ b/src/styles/_certificate.scss @@ -38,16 +38,22 @@ z-index: +2; - > h3 { - margin-bottom: 4px; + > hr { + margin: calc(16px - 4px) 0; + + border: 0 solid transparent; + border-bottom: 2px solid $gray; } + > .pill-list { margin-top: 4px; justify-content: center; } + > .button { margin-top: 4px; + padding: 0 32px; } } } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 436586a..b502ca2 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -3,6 +3,13 @@ *::after { margin: 0; padding: 0; + + scrollbar-color: $accent transparent; + ::-webkit-scrollbar { width: 8px } + ::-webkit-scrollbar-track { background: transparent } + ::-webkit-scrollbar-thumb { background: $accent } + ::-webkit-scrollbar-thumb:hover { background: $accent } + box-sizing: border-box; } diff --git a/src/styles/vars.scss b/src/styles/vars.scss index 38d219d..92e246d 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -1,7 +1,7 @@ $dark: #312620; $gray: #382e28; -$light: #f0e7e4; -$accent: #b7a997; +$light: #f0e9e4; +$accent: #A86338; $radius: 4px;