Firq/fgo-ta-com-website
Firq/fgo-ta-com-website
1
0
Fork 0
Code Issues1 Pull requests Projects Releases70 Packages1 Wiki Activity Actions

Coloring of stuff

Browse source
This commit is contained in:
Firq 2024-07-15 15:28:08 +02:00
parent 9c2c7f7818
commit 9e61582456
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 15 additions and 10 deletions
src/components/listings
eventListingLine.astro

13
src/components/listings/eventListingLine.astro
View file

@ -3,7 +3,8 @@ export interface Props {
title: string
releaseDate: Date
shortdescription: string
link: string
link: string,
hlcolor: string,
}
const options_date: Intl.DateTimeFormatOptions = {
@ -12,7 +13,7 @@ const options_date: Intl.DateTimeFormatOptions = {
day: '2-digit',
}
const { shortdescription, releaseDate, title, link } = Astro.props
const { shortdescription, releaseDate, title, link, hlcolor } = Astro.props
const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
---
@ -25,7 +26,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
</article>
</a>
<style>
<style define:vars={{ hlcolor }}>
.circle {
display: none;
}
@ -47,7 +48,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
}
article > h2 {
margin: 0px 0.5rem;
color: var(--c-darkpurple);
color: var(--hlcolor);
font-size: 1.2rem;
line-height: normal;
text-decoration: none;
@ -67,7 +68,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
align-items: center;
align-content: center;
justify-content: center;
background-color: var(--c-duskgray);
background: var(--c-duskgray); /* linear-gradient(175deg, var(--c-duskgray), var(--c-duskgray), var(--c-duskgray), var(--hlcolor)); */
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
@ -104,7 +105,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
}
a:hover article {
border-color: var(--c-darkpurple);
border-color: var(--hlcolor);
}
article {