feat: test dot as favicon
This commit is contained in:
parent
b512b29808
commit
f135fd62e2
GPG key ID:
DFC06C02ED3B4711
8 changed files with 53 additions and 27 deletions
|
|
@ -1,9 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M 31.999999,0 A 32,31.999999 0 0 0 0,31.999999 V 95.999997 A 32,31.999999 0 0 0 31.999999,128 h 64 A 32,31.999999 0 0 0 128,95.999997 V 31.999999 A 32,31.999999 0 0 0 95.999999,0 Z m 9.813477,32.85327 H 86.186522 V 44.373292 H 70.399903 V 95.146726 H 57.600098 V 44.373292 H 41.813476 Z" />
|
||||
<style>
|
||||
path { fill: black; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: white; }
|
||||
}
|
||||
</style>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="51mm" height="51mm" version="1.1" viewBox="0 0 51 51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="c" x1="85.455" x2="120.81" y1="158.91" y2="123.55" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fb5246" offset="0"/>
|
||||
<stop stop-color="#fb5246" offset=".5"/>
|
||||
<stop stop-color="#ff9068" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="77.63" x2="128.63" y1="141.23" y2="141.23" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fff" stop-opacity=".095618" offset="0"/>
|
||||
<stop stop-color="#fff" stop-opacity="0" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-77.63 -115.73)">
|
||||
<circle cx="103.13" cy="141.23" r="25" fill="url(#c)" stroke="url(#b)" stroke-opacity=".095618"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 827 B |
|
|
@ -5,7 +5,7 @@ import { SITE } from "@consts";
|
|||
<footer class="w-full">
|
||||
<span class="text-tertiary"
|
||||
>© {new Date().getFullYear()}
|
||||
<a href="/" class="hover:text-secondary transition-colors duration-300"
|
||||
<a href="#top" class="hover:text-secondary transition-colors duration-300"
|
||||
>{SITE.TITLE}</a
|
||||
>. All rights reserved.
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import { SITE } from "@consts";
|
||||
import Button from "@components/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const currentPath = pathname.replace(/\/$/, "");
|
||||
|
|
@ -10,10 +11,10 @@ const currentPath = pathname.replace(/\/$/, "");
|
|||
<nav class="flex w-full justify-between">
|
||||
<div class="flex w-fit items-center justify-between">
|
||||
<a href="/" aria-label={SITE.TITLE} title={SITE.TITLE} class="group">
|
||||
<div
|
||||
class="ring-secondary/10 size-8 rounded-full bg-linear-45 from-[#FF5907] from-50% to-[#FF8548] ring-1 transition-transform ease-in-out ring-inset group-hover:scale-105"
|
||||
>
|
||||
</div>
|
||||
<Icon
|
||||
name="icon"
|
||||
class="size-8 transition-transform ease-in-out group-hover:scale-105"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="flex w-fit flex-row items-center gap-4">
|
||||
|
|
|
|||
|
|
@ -5,33 +5,35 @@ import Link from "@components/Link.astro";
|
|||
|
||||
<section class="animate-reveal flex flex-col gap-6 opacity-0">
|
||||
<h1
|
||||
class="flex w-full flex-col text-start text-7xl leading-[1] font-medium tracking-[-2px] lowercase sm:tracking-[-4px]"
|
||||
class="flex w-full flex-col text-start text-7xl leading-[1] font-semibold tracking-[-2px] lowercase"
|
||||
>
|
||||
<span class="text-nowrap">Troy Lusty</span>
|
||||
<span class="text-tertiary text-pretty">Digital Designer</span>
|
||||
</h1>
|
||||
<div class="text-secondary/70 text-lg font-medium">
|
||||
I am in my final year of studying on a Game Arts and Design BA (Hons) degree
|
||||
and on the side I manage online operations for a
|
||||
<Link href="/projects/camouflage-store" class="underline underline-offset-2"
|
||||
>family run business</Link
|
||||
and on the side I manage online operations for a family run
|
||||
<a
|
||||
href="/projects/camouflage-store"
|
||||
class="hover:text-gradient-start hover:decoration-gradient-start underline decoration-wavy underline-offset-2 transition-colors duration-300"
|
||||
>outdoor apparel business</a
|
||||
>.
|
||||
</div>
|
||||
<div class="text-tertiary text-lg font-medium">
|
||||
Want to chat?
|
||||
Think I could help with a project you're working on?
|
||||
<Link
|
||||
href="mailto:hello@troylusty.com"
|
||||
class="lowercase underline underline-offset-2"
|
||||
class="hover:text-secondary lowercase underline decoration-wavy underline-offset-2 transition-colors duration-300"
|
||||
>
|
||||
Send me a message
|
||||
</Link>
|
||||
</div>
|
||||
<div id="social-links" class="flex flex-row gap-4">
|
||||
<div class="flex flex-row gap-4">
|
||||
{
|
||||
SITE.LINKS.map((i) => (
|
||||
<Link
|
||||
href={i.href}
|
||||
class="text-tertiary hover:text-accent text-lg font-medium lowercase underline-offset-2 hover:underline"
|
||||
class="text-tertiary hover:text-secondary text-lg font-medium lowercase decoration-wavy underline-offset-2 transition-colors duration-300 hover:underline"
|
||||
>
|
||||
{i.name}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
|
||||
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary/70 prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded-sm prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded-sm max-w-full"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const { collection } = Astro.props;
|
|||
</h3>
|
||||
<FormattedDate
|
||||
date={collection.data.date}
|
||||
className="text-accent block text-nowrap"
|
||||
className="text-tertiary block text-nowrap"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-tertiary text-pretty">{collection.data.description}</p>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M 31.999999,0 A 32,31.999999 0 0 0 0,31.999999 V 95.999997 A 32,31.999999 0 0 0 31.999999,128 h 64 A 32,31.999999 0 0 0 128,95.999997 V 31.999999 A 32,31.999999 0 0 0 95.999999,0 Z m 9.813477,32.85327 H 86.186522 V 44.373292 H 70.399903 V 95.146726 H 57.600098 V 44.373292 H 41.813476 Z" fill="currentColor" />
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="51mm" height="51mm" version="1.1" viewBox="0 0 51 51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="c" x1="85.455" x2="120.81" y1="158.91" y2="123.55" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fb5246" offset="0"/>
|
||||
<stop stop-color="#fb5246" offset=".5"/>
|
||||
<stop stop-color="#ff9068" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="77.63" x2="128.63" y1="141.23" y2="141.23" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#fff" stop-opacity=".095618" offset="0"/>
|
||||
<stop stop-color="#fff" stop-opacity="0" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-77.63 -115.73)">
|
||||
<circle cx="103.13" cy="141.23" r="25" fill="url(#c)" stroke="url(#b)" stroke-opacity=".095618"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 827 B |
|
|
@ -8,10 +8,12 @@
|
|||
--color-primary: var(--primary);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-tertiary: var(--tertiary);
|
||||
--color-accent: var(--accent);
|
||||
|
||||
--color-button: var(--button);
|
||||
--color-button-active: var(--button-active);
|
||||
|
||||
--color-gradient-start: #fb5246;
|
||||
--color-gradient-end: #ff9068;
|
||||
}
|
||||
|
||||
@theme {
|
||||
|
|
@ -39,7 +41,6 @@
|
|||
--primary: light-dark(var(--color-neutral-50), var(--color-black));
|
||||
--secondary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
|
||||
--tertiary: light-dark(var(--color-neutral-500), var(--color-neutral-500));
|
||||
--accent: light-dark(var(--color-neutral-700), var(--color-neutral-300));
|
||||
|
||||
--button: light-dark(var(--color-neutral-200), var(--color-neutral-800));
|
||||
--button-active: light-dark(
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue