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

Added short and ultrashort optimisations

Browse Source 
- Added short (max-height: 880px) and ultrashort (max-height: 670px)
  tailwind screens
- Optimised hero and about sections for shorter screens
This commit is contained in:
Cyril Šebek 2024-07-07 13:55:39 +02:00
parent 6ff8596301
commit e605fab161
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/About.astro
View File

@ -17,10 +17,10 @@ const t = useTranslations(getLangFromUrl(Astro.url));
image={t("about")[i].image}
flipped={i % 2}
>
<h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">
<h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-7">
{t("about")[i].title}
</h1>
<p class="text-content text-center text-md xl:text-lg xl:px-10">
<p class="text-content text-center text-md short:text-sm xl:text-lg xl:px-10">
{t("about")[i].content}
</p>
</AboutModule>

8
src/components/AboutModule.astro
View File

@ -7,15 +7,15 @@ const { row, flipped, image, alt } = Astro.props;
{
flipped ? (
<>
<div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 hover:bg-accentRed/85 ">
<div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 ultrashort:col-span-3 hover:bg-accentRed/85 ">
<slot />
</div>
<div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
<div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
</>
) : (
<>
<div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
<div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85">
<div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
<div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85 ultrashort:col-span-3">
<slot />
</div>
</>

12
src/components/Hero.astro
View File

@ -7,12 +7,12 @@ const t = useTranslations(getLangFromUrl(Astro.url))
<SinglePage>
<!-- Hero Image -->
<div class="w-full flex justify-center mt-20 ">
<div class="w-full flex justify-center mt-20 short:mt-10 ultrashort:mt-5">
<img src={t("hero")["image"]} alt="" class="rounded-full w-[200px] h-[200px]" />
</div>
<!-- Hero Text -->
<div class="mt-[6rem]">
<h1 class="text-accent text-4xl w-full text-center font-extrabold">
<div class="mt-[6rem] short:mt-[3rem]">
<h1 class="text-accent text-4xl w-full text-center font-extrabold ultrashort:text-3xl">
{t("hero")["title"]}
</h1>
<h2 class="text-content text-lg w-full text-center mt-[3.2rem]">
@ -20,18 +20,18 @@ const t = useTranslations(getLangFromUrl(Astro.url))
</h2>
</div>
<!-- Call action buttons -->
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
<div class="mt-[5.5rem] w-full grid justify-around grid-cols-2 short:mt-[3rem] ultrashort:mt-[1.5rem]">
<button
type="button"
onclick="scrollNext()"
class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2"
class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2 ultrashort:text-2xl"
>
{t("hero")["buttons"][0]}
</button>
<button
type="button"
onclick="linkToBlog()"
class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ultrashort:text-xl"
>
{t("hero")["buttons"][1]}
</button>

4
tailwind.config.mjs
View File

@ -28,7 +28,9 @@ module.exports = {
},
extend: {
screens: {
"3xl": "1900px"
"3xl": "1900px",
"short": { "raw": "(max-height: 880px)" },
"ultrashort": { "raw": "(max-height: 670px)" }
},
colors: {
bkg: withOpacity('--color-bkg'),