jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(Hero): center-align text and adjust flex properties

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-10 20:52:10 +01:00
parent 3e08b3e514
commit 3d892a44a8
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/sections/Hero.astro
View File

@ -65,33 +65,33 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
</div> </div>
<div class="border-t theme-border pt-8 mt-10"> <div class="border-t theme-border pt-8 mt-10">
<div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']"> <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-6 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans'] text-center">
<div class="sm:border-r theme-border last:border-r-0 px-4"> <div class="sm:border-r theme-border last:border-r-0 px-4 flex flex-col items-center justify-center">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4 w-full text-center">
<span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EMAIL</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">EMAIL</span>
</div> </div>
<a <a
href="mailto:jleibl@proton.me" href="mailto:jleibl@proton.me"
class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg" class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg block w-full"
> >
jleibl@proton.me jleibl@proton.me
</a> </a>
</div> </div>
<div class="sm:border-r theme-border last:border-r-0 px-4"> <div class="sm:border-r theme-border last:border-r-0 px-4 flex flex-col items-center justify-center">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4 w-full text-center">
<span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">ROLE</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">ROLE</span>
</div> </div>
<span class="theme-text-90 text-base sm:text-lg"> <span class="theme-text-90 text-base sm:text-lg block w-full">
Fullstack Developer Fullstack Developer
</span> </span>
</div> </div>
<div class="px-4"> <div class="px-4 flex flex-col items-center justify-center">
<div class="mb-3 sm:mb-4"> <div class="mb-3 sm:mb-4 w-full text-center">
<span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium">EXPERIENCE</span> <span class="theme-text-40 uppercase tracking-wider text-xs sm:text-sm font-medium block">EXPERIENCE</span>
</div> </div>
<span class="theme-text-90 text-base sm:text-lg"> <span class="theme-text-90 text-base sm:text-lg block w-full">
5+ Years 5+ Years
</span> </span>
</div> </div>
@ -113,4 +113,4 @@ import GermanyFlag from '../ui/GermanyFlag.astro';
.animate-button:active { .animate-button:active {
transform: scale(0.98); transform: scale(0.98);
} }
</style> </style>