nicer
This commit is contained in:
parent
c26c1ba0da
commit
8c52ef733a
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
const currentYear = new Date().getUTCFullYear();
|
||||
---
|
||||
|
||||
<footer class="fixed bottom-0 z-20 w-full">
|
||||
<footer class="fixed bottom-0 z-20 w-full backdrop-blur-sm">
|
||||
<div class="p-4 text-lg text-gray-50 mx-auto w-full max-w-screen-xl border-t border-[#ffffff10] shadow-lg">
|
||||
© Hri7566 {currentYear} All rights reserved
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ interface Props {
|
|||
const { title, href, center, color } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="m-2 rounded-2xl bg-[#ffffff00] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff05]">
|
||||
<div class="m-2 rounded-2xl bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08] transition-colors duration-300 ease-in-out hover:bg-[#ffffff10]">
|
||||
<div class="box-border">
|
||||
<h3 class={`text-2xl font-bold text-neutral-300 ${ center ? "ml-auto mr-auto text-center" : "" }`} style={{ color: color }}>
|
||||
{href ? (
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Image } from "astro:assets";
|
||||
---
|
||||
|
||||
<div id="main-header" class="sticky top-0 z-[100] h-24 p-3 border-b border-[#ffffff10] mx-auto w-full max-w-screen-xl shadow-lg">
|
||||
<div id="main-header" class="backdrop-blur-sm sticky top-0 z-[100] h-24 p-3 border-b border-[#ffffff10] mx-auto w-full max-w-screen-xl shadow-lg">
|
||||
<a href="/" class="float-left flex cursor-pointer items-end">
|
||||
<Image src="logo.png" alt="Logo" width=64 height=64 style="image-rendering: pixelated;" />
|
||||
<h1 class="text-5xl text-gray-50 transition-colors duration-300 ease-in-out hover:text-gray-300">hri7566.info</h1>
|
||||
|
|
|
|||
|
|
@ -9,37 +9,37 @@ import LinkBox from "~/components/LinkBox.astro";
|
|||
<div class="sm:ml-auto sm:mr-auto lg:w-1/2 sm:items-center">
|
||||
<div
|
||||
id="links"
|
||||
class="mx-5 my-3 grid grid-cols-1 items-center justify-evenly sm:flex"
|
||||
class="mx-auto my-3 grid grid-cols-1 items-center justify-evenly sm:flex w-2/3 sm:w-full sm:mx-5"
|
||||
>
|
||||
<LinkBox
|
||||
title="GitHub"
|
||||
href="https://github.com/Hri7566"
|
||||
center
|
||||
// color="#ffffff"
|
||||
color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="GitLab"
|
||||
href="https://gitlab.com/Hri7566"
|
||||
center
|
||||
// color="#ffffff"
|
||||
color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="Twitter"
|
||||
href="https://twitter.com/Hri7566"
|
||||
center
|
||||
// color="#ffffff"
|
||||
color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="YouTube"
|
||||
href="https://youtube.com/hri7566"
|
||||
center
|
||||
// color="#ffffff"
|
||||
color="#ffffff"
|
||||
/>
|
||||
<LinkBox
|
||||
title="Odysee"
|
||||
href="https://odysee.com/@hri7566:6"
|
||||
center
|
||||
// color="#ffffff"
|
||||
color="#ffffff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@ import LinkBox from "~/components/LinkBox.astro";
|
|||
<div class="sm:ml-auto sm:mr-auto sm:w-2/3">
|
||||
<div
|
||||
id="projects"
|
||||
class="mx-5 my-3 grid grid-cols-1 pb-20 xl:grid-cols-2"
|
||||
class="mx-5 my-3 grid grid-cols-1 pb-20 sm:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<LinkBox
|
||||
title="mpp-user-archive"
|
||||
|
|
@ -65,9 +65,9 @@ import LinkBox from "~/components/LinkBox.astro";
|
|||
Bot for Discord and MPP. Lots of baking involved.
|
||||
</LinkBox>
|
||||
<LinkBox
|
||||
title="mpp.hri7566.info"
|
||||
title="HMPP"
|
||||
href="https://mpp.hri7566.info"
|
||||
// color="#8d3f50"
|
||||
color="#8d3f50"
|
||||
>
|
||||
A clone of Multiplayer Piano with a completely
|
||||
original backend server with a fresh style.
|
||||
|
|
@ -77,7 +77,7 @@ import LinkBox from "~/components/LinkBox.astro";
|
|||
source and currently under development.
|
||||
</LinkBox> */}
|
||||
<LinkBox
|
||||
title="MPPClone Frontend"
|
||||
title="MPPClone"
|
||||
href="https://github.com/LapisHusky/mppclone"
|
||||
>
|
||||
I made some contributions to this site, such as the
|
||||
|
|
@ -90,6 +90,7 @@ import LinkBox from "~/components/LinkBox.astro";
|
|||
Mirror of BopItFreak's Mario site. Give it a minute
|
||||
to load. Audio doesn't like to work sometimes.
|
||||
</LinkBox> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Front>
|
||||
|
|
|
|||
Loading…
Reference in New Issue