CavyDev/my_portfolio
1
0
Fork 0
mirror of https://github.com/adam-benyekkou/my_portfolio.git synced 2026-01-15 20:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed hero text sizing on mobile

Browse Source
This commit is contained in:
AdamBtech
2025-05-23 18:24:55 +02:00
parent 35039d658f
commit 3b1f035d50
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/features/hero-display/hero-display.component.html
View File

@@ -4,26 +4,27 @@
videoSrc="cyber_hands.mp4" />
<!-- Changed from justify-center to justify-start with top padding -->
<div class="absolute inset-0 flex flex-col items-center justify-start pt-20 sm:pt-24 md:pt-28 lg:pt-32 xl:pt-36 2xl:pt-40 pointer-events-none px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
<div class="absolute inset-0 flex flex-col items-center justify-start pt-16 sm:pt-20 md:pt-24 lg:pt-28 xl:pt-32 2xl:pt-36 pointer-events-none px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20">
<div class="mb-8 sm:mb-12 md:mb-16 lg:mb-20 xl:mb-24 2xl:mb-32">
<div class="mb-6 sm:mb-8 md:mb-12 lg:mb-16 xl:mb-20 2xl:mb-24">
<h1 class="font-terminal-nier scramble-text-glow text-cyan-200
text-6xl sm:text-7xl md:text-8xl lg:text-9xl xl:text-[10rem] 2xl:text-[12rem]
text-4xl xs:text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl 2xl:text-[10rem]
text-center
leading-[1.1] sm:leading-[1.05] md:leading-[1.0] lg:leading-[0.95] xl:leading-[0.9] 2xl:leading-[0.85]
font-black tracking-[-0.02em] pointer-events-auto
drop-shadow-[0_0_30px_rgba(34,211,238,0.6)]
max-w-[90vw] sm:max-w-[85vw] md:max-w-[80vw] lg:max-w-none break-words whitespace-pre-line">
leading-[1.2] xs:leading-[1.15] sm:leading-[1.1] md:leading-[1.05] lg:leading-[1.0] xl:leading-[0.95] 2xl:leading-[0.9]
font-black tracking-[-0.01em] sm:tracking-[-0.02em] pointer-events-auto
drop-shadow-[0_0_20px_rgba(34,211,238,0.6)] sm:drop-shadow-[0_0_30px_rgba(34,211,238,0.6)]
max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-none break-words whitespace-pre-line">
{{ nameText }}
</h1>
</div>
<div class="max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-[80vw] xl:max-w-none">
<div class="max-w-[98vw] sm:max-w-[95vw] md:max-w-[90vw] lg:max-w-[85vw] xl:max-w-none">
<p class="font-terminal-nier scramble-text-glow text-cyan-100
text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl
text-center leading-[0.8] font-bold tracking-wide uppercase pointer-events-auto
drop-shadow-[0_0_25px_rgba(34,211,238,0.5)]
break-words px-4 sm:px-6 md:px-8 lg:px-10">
text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl
text-center leading-[0.9] sm:leading-[0.85] md:leading-[0.8] font-bold
tracking-wide uppercase pointer-events-auto
drop-shadow-[0_0_15px_rgba(34,211,238,0.5)] sm:drop-shadow-[0_0_25px_rgba(34,211,238,0.5)]
break-words px-2 sm:px-4 md:px-6 lg:px-8 xl:px-10">
{{ displayText }}
</p>
</div>