troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: add interactivity with alpinejs (#34)

Browse source 
* first stages of implementing alpinejs

* add link to projects slideshow

* begin adding nav bar

* inpired hero from flaco theme

* fix posts showcase

fixed to publish current work to latest

* revert docker action

* update astro version
This commit is contained in:
Troy 2025-02-12 13:03:43 +00:00 • committed by GitHub
parent 37f4fa17b8
commit 8df8272d6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 379 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/styles/global.css
View file

@ -1,6 +1,6 @@
@import "@fontsource-variable/red-hat-mono";
@import "@fontsource-variable/outfit";
@import "@fontsource/borel";
@import "@fontsource/instrument-serif";
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@ -14,13 +14,10 @@
@theme {
--font-sans: "Outfit Variable", "sans-serif";
--font-serif: "Instrument Serif", "serif";
--font-mono: "Red Hat Mono Variable", "monospace";
--animate-reveal: reveal 0.3s forwards ease-in-out;
--animate-logo: logo 0.5s forwards ease-out;
--animate-gradient-x: gradient-x 6s ease infinite;
--animate-gradient-y: gradient-y 6s ease infinite;
--animate-gradient-xy: gradient-xy 6s ease infinite;
@keyframes reveal {
0% {
@ -34,49 +31,6 @@
filter: blur(0px);
}
}
@keyframes logo {
0% {
transform: translateY(100%);
color: var(--primary);
}
100% {
transform: translateY(0%);
color: var(--secondary);
}
}
@keyframes gradient-x {
0%,
100% {
background-size: 200% 200%;
background-position: left center;
}
50% {
background-size: 200% 200%;
background-position: right center;
}
}
@keyframes gradient-y {
0%,
100% {
background-size: 400% 400%;
background-position: center top;
}
50% {
background-size: 200% 200%;
background-position: center center;
}
}
@keyframes gradient-xy {
0%,
100% {
background-size: 400% 400%;
background-position: left center;
}
50% {
background-size: 200% 200%;
background-position: right center;
}
}
}
:root {
@ -98,6 +52,12 @@
}
}
@utility container {
margin-inline: auto;
padding-inline: 2rem;
margin-inline: auto;
}
@media print {
body {
background: none;
@ -113,3 +73,7 @@
display: none;
}
}
[x-cloak] {
display: none !important;
}