reidlab/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make css fruity

Browse source
This commit is contained in:
Reid 2025-03-07 00:44:25 -08:00
parent 638096a8d4
commit ac3cb10634
Signed by: reidlab
GPG key ID: DAF5EAF6665839FD
6 changed files with 98 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Background.astro Normal file
View file

@ -0,0 +1,45 @@
<div class="background" aria-hidden="true">
<div class="layer1"></div>
<div class="layer2"></div>
</div>
<style>
.layer1 {
background: var(--gradient);
background-attachment: fixed;
}
.layer2 {
background: conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em;
background-attachment: fixed;
background-position: 0 0;
animation: scroll 10s linear infinite;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.background > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes scroll {
to {
background-position: 6em 3em;
}
}
@media screen and (prefers-reduced-motion: reduce) {
.layer2 {
animation: none;
}
}
</style>

18
src/components/Badges.astro
View file

@ -11,15 +11,15 @@ const badges = await getCollection("badges");
// ugh. // ugh.
// i wish we could dedupe this, but im not sure how // i wish we could dedupe this, but im not sure how
return <> return <>
{hasHref ? <a href={badge.data.href} target="_blank" rel="noreferrer noopener"> {hasHref ? <a class="badge" href={badge.data.href} target="_blank" rel="noreferrer noopener">
{typeof badge.data.path !== "string" {typeof badge.data.path !== "string"
? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/> ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
: <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/> : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
} }
</a> : <> </a> : <>
{typeof badge.data.path !== "string" {typeof badge.data.path !== "string"
? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/> ? <img class="badge" src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
: <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/> : <img class="badge" src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
} }
</>} </>}
</>; </>;
@ -41,4 +41,16 @@ const badges = await getCollection("badges");
height: 31px; height: 31px;
} }
} }
.badge {
transition:
transform 0.15s,
box-shadow 0.15s,
background 0.15s;
}
.badge:hover {
transform: scale(1.5);
box-shadow: 0 0 0.2em var(--foreground);
background: var(--foreground);
}
</style> </style>

15
src/layouts/Layout.astro
View file

@ -9,6 +9,7 @@ const { title, description } = Astro.props;
import { ClientRouter } from "astro:transitions"; import { ClientRouter } from "astro:transitions";
import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro"; import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
import Background from "../components/Background.astro";
import Sidebar from "../components/Sidebar.astro"; import Sidebar from "../components/Sidebar.astro";
import "modern-normalize"; import "modern-normalize";
@ -37,9 +38,9 @@ import "../styles/main.css";
<ReplacementSwap /> <ReplacementSwap />
</head> </head>
<body> <body>
<Background />
<Sidebar /> <Sidebar />
<!-- container is here b/c view transitions + background = bad -->
<div class="container">
<main <main
data-vtbot-replace="main" data-vtbot-replace="main"
transition:name="main" transition:name="main"
@ -47,7 +48,6 @@ import "../styles/main.css";
> >
<slot /> <slot />
</main> </main>
</div>
</body> </body>
</html> </html>
<style is:global> <style is:global>
@ -67,14 +67,9 @@ import "../styles/main.css";
} }
} }
.container {
background:
conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em,
var(--gradient);
background-attachment: fixed;
}
main { main {
/* needed due to background being fixed */
position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;

13
src/pages/about.astro
View file

@ -26,7 +26,18 @@ import fursonaImage from "../images/fursona.png";
max-width: 30%; max-width: 30%;
} }
.fursona img { .fursona img {
animation: 2s infinite ease-in-out alternate sway; animation:
popin 2s cubic-bezier(0.22, 1, 0.33, 1),
sway 2s ease-in-out infinite alternate 2s;
}
@keyframes popin {
from {
transform: scale(0) rotate(-1deg);
}
to {
transform: scale(1) rotate(1deg);
}
} }
@keyframes sway { @keyframes sway {

2
src/pages/index.astro
View file

@ -8,7 +8,7 @@ import Badges from "../components/Badges.astro";
<Layout title="landing"> <Layout title="landing">
<Card title="hello"> <Card title="hello">
<p>hi! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p> <p>hi! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p>
<p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress and i want to make it really feel like it is MY site in terms of styling <i>(we are failing at the moment)</i></p> <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress</p>
<p>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p> <p>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p>
</Card> </Card>
<Card title="buttons"> <Card title="buttons">

15
src/styles/main.css
View file

@ -74,10 +74,15 @@ a {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
color: var(--accent); color: var(--accent);
transition: color .1s; transition:
color .15s,
text-shadow .15s;
} }
a:hover { a:hover {
color: color-mix(in oklab, var(--accent), #ffffff 40%); --hover-color: color-mix(in oklab, var(--accent), #ffffff 40%);
color: var(--hover-color);
text-shadow: 0 0 0.2em var(--hover-color);
} }
figure { figure {
@ -113,3 +118,9 @@ summary::before {
details[open] summary::before { details[open] summary::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
@media screen and (prefers-reduced-motion: reduce) {
a {
transition: none;
}
}