Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-01-14 02:25:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add correct date formatting to certificate

Browse source 
Adjust table styling
Change accent colour from a shitty orange to a more woody orange
Scrollbar theme
This commit is contained in:
Michał 2024-05-27 19:02:11 +01:00
parent 9138b06752
commit 565103dda4
6 changed files with 76 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Card.astro
View file

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

11
src/components/Certificate.astro
View file

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

56
src/layouts/Markdown.astro
View file

@ -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 {

10
src/styles/_certificate.scss
View file

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

7
src/styles/_reset.scss
View file

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

4
src/styles/vars.scss
View file

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