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.
// i wish we could dedupe this, but im not sure how
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"
? <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"/>
}
</a> : <>
{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} 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 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;
}
}
.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>

29
src/layouts/Layout.astro
View file

@ -9,6 +9,7 @@ const { title, description } = Astro.props;
import { ClientRouter } from "astro:transitions";
import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
import Background from "../components/Background.astro";
import Sidebar from "../components/Sidebar.astro";
import "modern-normalize";
@ -37,17 +38,16 @@ import "../styles/main.css";
<ReplacementSwap />
</head>
<body>
<Background />
<Sidebar />
<!-- container is here b/c view transitions + background = bad -->
<div class="container">
<main
data-vtbot-replace="main"
transition:name="main"
transition:animate="initial"
>
<slot />
</main>
</div>
<main
data-vtbot-replace="main"
transition:name="main"
transition:animate="initial"
>
<slot />
</main>
</body>
</html>
<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 {
/* needed due to background being fixed */
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;

13
src/pages/about.astro
View file

@ -26,7 +26,18 @@ import fursonaImage from "../images/fursona.png";
max-width: 30%;
}
.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 {

2
src/pages/index.astro
View file

@ -8,7 +8,7 @@ import Badges from "../components/Badges.astro";
<Layout title="landing">
<Card title="hello">
<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>
</Card>
<Card title="buttons">

15
src/styles/main.css
View file

@ -74,10 +74,15 @@ a {
text-decoration: underline;
cursor: pointer;
color: var(--accent);
transition: color .1s;
transition:
color .15s,
text-shadow .15s;
}
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 {
@ -113,3 +118,9 @@ summary::before {
details[open] summary::before {
transform: rotate(90deg);
}
@media screen and (prefers-reduced-motion: reduce) {
a {
transition: none;
}
}