starting changes

This commit is contained in:
Sakooooo 2024-12-01 11:58:07 +04:00
parent 83148a5ac8
commit c4ce1558ac
Signed by: sako
GPG key ID: FE52FD65B76E4751
3 changed files with 56 additions and 58 deletions

28
src/components/nav.astro Normal file
View file

@ -0,0 +1,28 @@
---
---
<!doctype html>
<div class="nav">
<h1> sako </h1>
<a href="/home">home</a>
<a href="/blog">blog</a>
<a href="/services">services</a>
</div>
<style>
a {
color: white;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>

View file

@ -23,6 +23,6 @@ const { title } = Astro.props;
<style is:global>
html {
font-family: monospace;
background: #13151a;
background: #101010;
}
</style>

View file

@ -1,10 +1,18 @@
---
import Layout from '../layouts/Layout.astro';
import Nav from '../components/nav.astro';
---
<Layout title="sako.lol">
<main>
<h1>heh... <span class="text-gradient"><i><b>skibidi</b></i></span></h1>
<div class="center">
<!-- <div class="nav">
<a href="/">home</a>
<a href="blog">blog</a>
<a href="services">services</a>
</div> -->
<Nav/>
<div>
</main>
</Layout>
@ -17,50 +25,12 @@ import Layout from '../layouts/Layout.astro';
line-height: 1.6;
text-align: center;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
min-height: 95vh;
}
</style>