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;