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

starting changes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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>

2
src/layouts/Layout.astro
View file

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

60
src/pages/index.astro
View file

@ -1,10 +1,18 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import Nav from '../components/nav.astro';
--- ---
<Layout title="sako.lol"> <Layout title="sako.lol">
<main> <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> </main>
</Layout> </Layout>
@ -17,50 +25,12 @@ import Layout from '../layouts/Layout.astro';
line-height: 1.6; line-height: 1.6;
text-align: center; text-align: center;
} }
.astro-a { .center {
position: absolute; display: flex;
top: -32px; flex-direction: column;
left: 50%; justify-content: center;
transform: translatex(-50%); align-items: center;
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center; text-align: center;
} min-height: 95vh;
.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;
} }
</style> </style>