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-05 12:03:13 +02:00
parent c63ee04783
commit 00daf4222a
No known key found for this signature in database
5 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
astro.config.mjs
View File

@ -6,6 +6,7 @@ import sitemap from '@astrojs/sitemap';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
output: "hybrid",
site: 'https://cyrilsebek.cz', site: 'https://cyrilsebek.cz',
integrations: [tailwind(), mdx(), sitemap()], integrations: [tailwind(), mdx(), sitemap()],
i18n: { i18n: {

4
src/components/About.astro
View File

@ -7,7 +7,9 @@ const { title, description } = dictionary[Astro.currentLocale];
--- ---
<SinglePage> <SinglePage>
<div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4"> <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
<AboutModule row="0" image="/temp.jpg"/> <AboutModule row="0" image="/temp.jpg">
<h1 class="text-accent">Lorem</h1>
</AboutModule>
<AboutModule row="1" image="/temp.jpg" flipped /> <AboutModule row="1" image="/temp.jpg" flipped />
<AboutModule row="2" image="/temp.jpg" alt="image"/> <AboutModule row="2" image="/temp.jpg" alt="image"/>
</SinglePage> </SinglePage>

12
src/components/AboutModule.astro
View File

@ -7,19 +7,15 @@ const { row, flipped, image, alt } = Astro.props;
{ {
flipped ? ( flipped ? (
<> <>
<div class="bg-red-500 rounded-lg col-start-0 col-span-2 "> <div class="bg-accentRed rounded-lg col-start-0 col-span-2 ">
<slot /> <slot />
</div> </div>
<div class="bg-yellow-500 h-full rounded-lg col-start-3 pb-50"> <div class={`h-full rounded-lg col-start-3 bg-[url('${image}')] bg-no-repeat bg-cover`} />
<img src={image} alt={alt} class="object-cover h-full w-full rounded-lg"/>
</div>
</> </>
) : ( ) : (
<> <>
<div class="h-full rounded-lg col-start-0"> <div class={`h-full rounded-lg col-start-0 bg-[url('${image}')] bg-no-repeat bg-cover`} />
<img src={image} alt={alt} class="object-cover rounded-lg"/> <div class="bg-accentRed rounded-lg col-start-2 col-span-2">
</div>
<div class="bg-red-500 rounded-lg col-start-2 col-span-2">
<slot /> <slot />
</div> </div>
</> </>

4
src/style/index.css
View File

@ -12,6 +12,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-primary: 54deg, 100%, 50%; --color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;
--color-accent: 262deg, 73%, 47%; --color-accent: 262deg, 73%, 47%;
--color-accent-red: 0deg, 84%, 60%;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -21,6 +22,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
--color-accent-red: 0deg, 84%, 60%;
} }
} }
@ -30,6 +32,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
--color-accent: 54deg, 100%, 50%; --color-accent: 54deg, 100%, 50%;
--color-accent-red: 0deg, 84%, 60%;
} }
:root[data-theme="light"] { :root[data-theme="light"] {
@ -38,5 +41,6 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
--color-primary: 54deg, 100%, 50%; --color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;
--color-accent: 262deg, 73%, 47%; --color-accent: 262deg, 73%, 47%;
--color-accent-red: 0deg, 84%, 60%;
} }
} }

1
tailwind.config.mjs
View File

@ -18,6 +18,7 @@ export default {
primary: withOpacity('--color-primary'), primary: withOpacity('--color-primary'),
secondary: withOpacity('--color-secondary'), secondary: withOpacity('--color-secondary'),
accent: withOpacity('--color-accent'), accent: withOpacity('--color-accent'),
accentRed: withOpacity('--color-accent-red'),
}, },
}, },
}, },