Lekcja 3 czy coś
This commit is contained in:
Dark Steveneq
@@ -1,9 +1,9 @@
|
||||
---
|
||||
import { House, Image, Phone } from '@lucide/astro'
|
||||
import { House, Image, Phone, Table2 } from '@lucide/astro'
|
||||
---
|
||||
|
||||
<header class="
|
||||
flex flex-row justify-between
|
||||
<header style="animation: wsun 0.1s ease-in-out" class="
|
||||
flex flex-row justify-between z-20
|
||||
mb-3 py-0.5 px-3 rounded-md h-14
|
||||
bg-slate-100 drop-shadow-slate-300 drop-shadow-md
|
||||
">
|
||||
@@ -24,6 +24,10 @@ import { House, Image, Phone } from '@lucide/astro'
|
||||
<House class="mx-auto" stroke-width={1} />
|
||||
Strona główna
|
||||
</a>
|
||||
<a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/uslugi">
|
||||
<Table2 class="mx-auto" stroke-width={1} />
|
||||
Uslugi
|
||||
</a>
|
||||
<a class="flex flex-col hover:text-shadow-sm text-shadow-slate-50 hover:scale-110 hover:text-slate-700 not-motion-reduce:transition-all hover:mx-1" href="/portfolio">
|
||||
<Image class="mx-auto" stroke-width={1} />
|
||||
Portfolio
|
||||
|
||||
14
src/content.config.ts
Normal file
14
src/content.config.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
import { glob, file } from 'astro/loaders';
|
||||
|
||||
const uslugi = defineCollection({
|
||||
loader: glob({ pattern: "*.md", base: "./src/content/uslugi" }),
|
||||
schema: z.object({
|
||||
tytul: z.string().default("Domyślny tytuł"),
|
||||
cena: z.number().default(-1),
|
||||
jednostka: z.string().optional()
|
||||
})
|
||||
});
|
||||
|
||||
export const collections = { uslugi };
|
||||
4
src/content/uslugi/dron.md
Normal file
4
src/content/uslugi/dron.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
tytul: Ujęcia z drona
|
||||
---
|
||||
Nie wiem co tutaj dać
|
||||
5
src/content/uslugi/plener.md
Normal file
5
src/content/uslugi/plener.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
tytul: Zdjęcia plenerowe
|
||||
cena: 30
|
||||
---
|
||||
Nie wiem co tu dać ale daje tu coś żeby coś było (logika)
|
||||
4
src/content/uslugi/slublne.md
Normal file
4
src/content/uslugi/slublne.md
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
tytul: Zdjęcia ślubne
|
||||
---
|
||||
lorem
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import Header from '../components/Header.astro'
|
||||
import '../styles/global.css'
|
||||
|
||||
const { tytul, bezTla } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -8,23 +10,22 @@ import '../styles/global.css'
|
||||
m-0 w-svw h-svh
|
||||
text-slate-950 bg-slate-200 select-none
|
||||
" lang="pl">
|
||||
<!-- dark:text-slate-100 dark:bg-slate-950 -->
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro Basics</title>
|
||||
<title>{tytul ? `${tytul} - Jakiś Fotograf` : 'Jakiś Fotograf'}</title>
|
||||
</head>
|
||||
<body class="flex flex-col p-2">
|
||||
<body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2">
|
||||
<Header />
|
||||
<main class="
|
||||
<main class=`
|
||||
grow
|
||||
2xl:mx-auto p-4 rounded-md
|
||||
w-[92rem] max-w-full
|
||||
bg-slate-100 drop-shadow-slate-300 drop-shadow-md
|
||||
mx-auto p-4 rounded-md
|
||||
w-368 max-w-full
|
||||
${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}
|
||||
block
|
||||
">
|
||||
`>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -2,5 +2,27 @@
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout bezTla={true}>
|
||||
<section class="lg:mx-10 flex flex-row justify-between">
|
||||
<!-- "portret" -->
|
||||
<div class="text-white bg-black drop-shadow-slate-300 drop-shadow-md rounded-md p-4 aspect-[2.5/4] w-96 hidden lg:flex">
|
||||
<span class="m-auto">[ktoś]</span>
|
||||
</div>
|
||||
<!-- Opis/Przyciski -->
|
||||
<div class="text-center lg:text-right my-auto mx-auto lg:mx-10 flex flex-col justify-start lg:justify-end">
|
||||
<h1 class="text-6xl my-3">Zdjęcia na zamówienie</h1>
|
||||
<pre class="font-sans text-xl lg:mr-3 text-gray-600 mx-auto lg:ml-auto lg:max-w-xl text-wrap">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt vero ipsa eaque repellat sequi, repudiandae officiis, temporibus fugiat ducimus officia iure ad voluptate aspernatur dolorum commodi iste, voluptatum voluptatem odio.
|
||||
</pre>
|
||||
<a class="
|
||||
mx-auto py-2.5 px-4 rounded-full
|
||||
drop-shadow-slate-400 drop-shadow-md text-2xl bg-slate-900 text-slate-200
|
||||
hover:bg-slate-800 transition-all hover:text-white hover:underline underline-offset-4 hover:drop-shadow-slate-300
|
||||
" href="/uslugi">Dostępne usługi</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-slate-100 drop-shadow-slate-300 drop-shadow-md my-8 p-4 rounded-md">
|
||||
<h2 class="text-center text-2xl">Nie wiem co tu daććććć</h2>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
import { type AstroComponent } from "@lucide/astro"
|
||||
const { tytul, tresc, ikona } = Astro.props;
|
||||
const { className, tytul, tresc, ikona } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="
|
||||
<div style="animation: odwroc 1s cubic-bezier(0.16, 1, 0.3, 1)" class=`
|
||||
rounded-md size-36 flex flex-col text-center p-1.5
|
||||
bg-slate-100 drop-shadow-md drop-shadow-slate-400
|
||||
">
|
||||
${className}
|
||||
`}>
|
||||
<slot/>
|
||||
<h3>{tytul}</h3>
|
||||
<h4 class="text-sm text-slate-700">{tresc}</h4>
|
||||
|
||||
@@ -4,16 +4,17 @@ import { Phone, Mail } from "@lucide/astro"
|
||||
import Kafelek from "./Kafelek.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout tytul="Kontakt">
|
||||
<h2 class="text-xl mb-1">Kontakt</h2>
|
||||
<hr>
|
||||
Sposoby kontaktu ze mną
|
||||
<div class="
|
||||
flex flex-row flex-wrap m-3 gap-5
|
||||
flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
|
||||
">
|
||||
<Kafelek tytul="Telefon" tresc="+48 123 456 789">
|
||||
<Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789">
|
||||
<Phone class="grow m-auto" stroke-width={1} width={32}/>
|
||||
</Kafelek>
|
||||
<Kafelek tytul="E-mail" tresc="ja@jakisfotograf.xd">
|
||||
<Kafelek className="delay-100" tytul="E-mail" tresc="ja@jakisfotograf.xd">
|
||||
<Mail class="grow m-auto" stroke-width={1} width={32}/>
|
||||
</Kafelek>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
const { src } = Astro.props
|
||||
---
|
||||
|
||||
<div class="inline-block w-full">
|
||||
<div style="animation: wsun 0.5s ease-in-out" class="inline-block w-full">
|
||||
<img class="block w-full rounded-md" src={src}>
|
||||
</div>
|
||||
@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro"
|
||||
import Img from "./Img.astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Layout tytul="Portfolio">
|
||||
<h2 class="text-2xl mb-1">Portfolio</h2>
|
||||
<hr>
|
||||
Przejrzyj galerie ze zdjęciami które dotychczas zrobiłem
|
||||
|
||||
35
src/pages/uslugi/index.astro
Normal file
35
src/pages/uslugi/index.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro"
|
||||
import { getCollection, render } from 'astro:content';
|
||||
const uslugi = await getCollection('uslugi');
|
||||
---
|
||||
|
||||
<Layout tytul="Usługi">
|
||||
<h2 class="text-2xl mb-1">Usługi</h2>
|
||||
<hr>
|
||||
<div class="flex flex-col gap-4">
|
||||
Lista udzielanych przezemnie usług
|
||||
{uslugi.map(async (usluga, indeks) => {
|
||||
const { Content } = await render(usluga);
|
||||
return (
|
||||
<div class={`
|
||||
rounded-md min-h-80 p-2
|
||||
bg-slate-100 drop-shadow-md drop-shadow-slate-400
|
||||
text-left flex-col
|
||||
flex ${indeks % 2 ? "lg:flex-row-reverse lg:text-right" : "lg:flex-row lg:text-left"}
|
||||
`}>
|
||||
<div class="mx-auto text-white bg-black drop-shadow-slate-300 drop-shadow-md rounded-md p-4 aspect-[2.5/4] w-54 flex">
|
||||
<span class="m-auto">[coś]</span>
|
||||
</div>
|
||||
<div class="grow lg:mx-4 flex flex-col">
|
||||
<h1 class="text-2xl my-1">{usluga.data.tytul}</h1>
|
||||
<div class="mx-0.5">
|
||||
<h3 class="text-xl"><span class="font-medium">Cena:</span> <span class="text-gray-700">{usluga.data.cena}</span> zł</h3>
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Layout>
|
||||
@@ -3,4 +3,34 @@
|
||||
|
||||
@theme {
|
||||
--default-font-family: "Montserrat"
|
||||
}
|
||||
|
||||
@keyframes wsun {
|
||||
0% {
|
||||
opacity: 40%;
|
||||
transform: translate(0px, 4rem);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes odwroc {
|
||||
0% {
|
||||
opacity: 40%;
|
||||
scale: 0.85;
|
||||
transform: rotateY(165deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
scale: 1;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading), var(--text-lg--line-height);
|
||||
}
|
||||
Reference in New Issue
Block a user