blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

sync

Browse Source
This commit is contained in:
Blboun3 2024-04-03 15:55:35 +02:00
parent ea0de50abe
commit 0fe4b9b5cf
No known key found for this signature in database
4 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Hero.astro
View File

@ -1,4 +1,27 @@
<!--<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6"> ---
import SinglePage from "../layouts/SinglePage.astro"
---
<SinglePage>
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 h-full p-2 sm:p-6">
<!-- Hero Image -->
<div class="w-full flex justify-center mt-20">
<img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
</div>
<!-- Hero Text -->
<div class="mt-[6rem]">
<h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
<h2 class="text-content text-lg w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
</div>
<!-- Call action buttons -->
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
<button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
<button type="button" class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
</div>
</div>
</div>
</SinglePage>
{/* <div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
<div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg"> <div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg">
<h1 class="text-4xl text-accent">Lorem Ipsum</h1> <h1 class="text-4xl text-accent">Lorem Ipsum</h1>
<h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2> <h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2>
@ -8,22 +31,4 @@
</div> </div>
<div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div> <div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
</div>--> </div>- */}
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6">
<!-- Hero Image -->
<div class="w-full flex justify-center mt-20">
<img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
</div>
<!-- Hero Text -->
<div class="mt-[6rem]">
<h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
<h2 class="text-content text-md w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
</div>
<!-- Call action buttons -->
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
<button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
<button type="button" class="text-xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
</div>
</div>
</div>

8
src/layouts/MainLayout.astro
View File

@ -4,15 +4,17 @@ import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang={lang} data-theme={themeOverride ? themeOverride : undefined}> <html lang={lang} data-theme={themeOverride ? themeOverride : undefined} class="overflow-hidden">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content={description}> <meta name="description" content={description}>
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="bg-bkg h-dvh w-full"> <body class="bg-bkg h-dvh w-full overflow-hidden">
<!--<Navbar /> --> <!--<Navbar /> -->
<slot/> <div class="snap-mandatory snap-y">
<slot />
</div>
</body> </body>
</html> </html>

3
src/layouts/SinglePage.astro Normal file
View File

@ -0,0 +1,3 @@
<div class="snap-center w-screen h-screen">
<slot />
</div>

2
src/pages/[lang]/index.astro
View File

@ -14,4 +14,6 @@ export async function getStaticPaths() {
--- ---
<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark"> <MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
<Hero /> <Hero />
<Hero />
<Hero />
</MainLayout> </MainLayout>