mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-01-14 10:35:14 +00:00
Add correct date formatting to certificate
Adjust table styling Change accent colour from a shitty orange to a more woody orange Scrollbar theme
This commit is contained in:
parent
9138b06752
commit
565103dda4
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<p>By: {certificate.data.provider}</p>
|
||||
<hr style="width: 100%">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$dark: #312620;
|
||||
$gray: #382e28;
|
||||
$light: #f0e7e4;
|
||||
$accent: #b7a997;
|
||||
$light: #f0e9e4;
|
||||
$accent: #A86338;
|
||||
|
||||
$radius: 4px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue