Justin Edmund
a31291d69f
- Replace 802 instances of $grey- variables with $gray- across 106 files - Remove legacy color aliases from variables.scss - Maintain consistent naming convention throughout codebase This completes the migration to the new color scale system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
79 lines
1.3 KiB
Svelte
79 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
href?: string
|
|
title?: string
|
|
sourceType?: string
|
|
date?: string
|
|
source?: string
|
|
}
|
|
|
|
let { href = '', title = '', sourceType = '', date = '', source = '' }: Props = $props()
|
|
</script>
|
|
|
|
<li class="mention">
|
|
<a {href} target="_blank">
|
|
<h4>{title}</h4>
|
|
<footer>
|
|
{#if source}
|
|
<span class="source">{source}</span>
|
|
{/if}
|
|
<span class="source-type">{sourceType}</span>
|
|
<time>{date}</time>
|
|
</footer>
|
|
</a>
|
|
</li>
|
|
|
|
<style lang="scss">
|
|
$card-color: #f7f7f7;
|
|
$page-horz-padding: 20px;
|
|
$card-height: 200px;
|
|
$mention-padding: 15px;
|
|
$font-size: 16px;
|
|
$line-height: 1.5;
|
|
$font-weight-med: 500;
|
|
|
|
.mention {
|
|
background: $card-color;
|
|
border-radius: $corner-radius;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
background: darken($card-color, 2%);
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
padding: $unit-3x;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
h4 {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
flex-grow: 2;
|
|
margin: 0;
|
|
|
|
cite {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
color: $gray-50;
|
|
flex-grow: 0;
|
|
font-weight: $font-weight-med;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.source,
|
|
.source-type {
|
|
margin-right: $unit;
|
|
}
|
|
}
|
|
</style>
|