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

@@ -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;
 			}
 

src/components/Certificate.astro

@@ -1,5 +1,9 @@
 ---
+import { getMonth, getDaySuffix } from "../utils";
+
 const { certificate } = Astro.props;
+
+const date = new Date(certificate.data.achieved);
 ---
 
 <div class="certificate">
@@ -13,8 +17,9 @@ const { certificate } = Astro.props;
     </svg>
     <div>
         <h3>{certificate.data.title}</h3>
-        <p>{certificate.data.achieved}</p>
+        <hr style="width: 100%">
-        <p>By: {certificate.data.provider}</p>
+        <p>{date.getDate()}{getDaySuffix(date)} {getMonth(date)} {date.getFullYear()}</p>
+        <p>Presented by {certificate.data.provider}</p>
 
         {certificate.data.skills && (
             <ul class="pill-list">
@@ -22,6 +27,6 @@ const { certificate } = Astro.props;
             </ul>
         )}
 
-        {certificate.data.link && ( <a href={certificate.data.link} class="button">View</a> )}
+        {certificate.data.link && ( <a href={certificate.data.link} class="button">View Full</a> )}
     </div>
 </div>

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 {
+                &:nth-child(even) td {
-                    border: 0 solid transparent;
+                    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 {

src/styles/_certificate.scss

@@ -38,16 +38,22 @@
 
         z-index: +2;
 
-        > h3 {
+        > hr {
-            margin-bottom: 4px;
+            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;
         }
     }
 }

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;
 }
 

src/styles/vars.scss

@@ -1,7 +1,7 @@
 $dark: #312620;
 $gray: #382e28;
-$light: #f0e7e4;
+$light: #f0e9e4;
-$accent: #b7a997;
+$accent: #A86338;
 
 $radius: 4px;