Skip to content

Commit f83125b

Browse files
hedgertronichedgertronic
committed
Update mobile display
1 parent a247bdc commit f83125b

8 files changed

Lines changed: 181 additions & 57 deletions

File tree

‎css/layout.css‎

Lines changed: 79 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -430,6 +430,34 @@ nav.container {
430430
box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-primary) 12%, transparent);
431431
}
432432

433+
/* Evolution CTA button - styled like resume-cta but with gold */
434+
.hero-intro .social-links a.evolution-cta {
435+
--evolution-gold: #d4af37;
436+
width: auto;
437+
padding: 0 0.75rem;
438+
display: flex;
439+
align-items: center;
440+
gap: 0.5rem;
441+
background: color-mix(in srgb, var(--evolution-gold) 8%, transparent);
442+
border-color: color-mix(in srgb, var(--evolution-gold) 50%, var(--border-color));
443+
color: color-mix(in srgb, var(--evolution-gold) 85%, var(--text-primary));
444+
font-weight: 600;
445+
font-size: 0.875rem;
446+
letter-spacing: 0.02em;
447+
text-decoration: none;
448+
}
449+
450+
.hero-intro .social-links a.evolution-cta::before {
451+
background: var(--evolution-gold);
452+
}
453+
454+
.hero-intro .social-links a.evolution-cta:hover {
455+
background: color-mix(in srgb, var(--evolution-gold) 15%, transparent);
456+
border-color: var(--evolution-gold);
457+
color: var(--evolution-gold);
458+
box-shadow: 0 6px 20px color-mix(in srgb, var(--evolution-gold) 12%, transparent);
459+
}
460+
433461
.hero-nav {
434462
display: flex;
435463
flex-wrap: wrap;
@@ -794,59 +822,80 @@ footer:empty {
794822
display: none;
795823
}
796824

797-
/* Fluid hero sizing - scales with viewport height, max values at 700px */
825+
/* Fluid hero sizing - scales with viewport height, starts shrinking at 800px */
798826
.hero-intro {
799-
margin-bottom: clamp(1rem, calc(2.5rem - (700px - 100svh) * 0.16), 2.5rem);
827+
margin-bottom: clamp(0.75rem, calc(1.75rem - (800px - 100svh) * 0.08), 1.75rem);
800828
}
801829

802830
.hero-headshot {
803-
width: clamp(56px, calc(90px - (700px - 100svh) * 0.23), 90px);
804-
height: clamp(56px, calc(90px - (700px - 100svh) * 0.23), 90px);
805-
margin-bottom: clamp(0.5rem, calc(1.25rem - (700px - 100svh) * 0.08), 1.25rem);
831+
width: clamp(52px, calc(90px - (800px - 100svh) * 0.16), 90px);
832+
height: clamp(52px, calc(90px - (800px - 100svh) * 0.16), 90px);
833+
margin-bottom: clamp(0.5rem, calc(1.25rem - (800px - 100svh) * 0.06), 1.25rem);
806834
animation-delay: 0s;
807835
}
808836

809837
.hero-name {
810-
font-size: clamp(1.5rem, calc(2rem - (700px - 100svh) * 0.053), 2rem);
811-
margin-bottom: clamp(0.35rem, calc(0.75rem - (700px - 100svh) * 0.043), 0.75rem);
838+
font-size: clamp(1.4rem, calc(2rem - (800px - 100svh) * 0.04), 2rem);
839+
margin-bottom: clamp(0.3rem, calc(0.75rem - (800px - 100svh) * 0.03), 0.75rem);
812840
animation-delay: 0.1s;
813841
}
814842

815843
.hero-description {
816-
font-size: clamp(0.8rem, calc(0.95rem - (700px - 100svh) * 0.016), 0.95rem);
817-
margin-bottom: clamp(0.75rem, calc(1.5rem - (700px - 100svh) * 0.08), 1.5rem);
844+
font-size: clamp(0.78rem, calc(0.95rem - (800px - 100svh) * 0.011), 0.95rem);
845+
margin-bottom: clamp(0.6rem, calc(1.5rem - (800px - 100svh) * 0.06), 1.5rem);
818846
line-height: 1.7;
819847
animation-delay: 0.15s;
820848
}
821849

822850
.hero-intro .social-links {
823851
animation-delay: 0.2s;
824-
min-height: clamp(30px, calc(36px - (700px - 100svh) * 0.04), 36px);
852+
justify-content: center;
853+
min-height: clamp(28px, calc(36px - (800px - 100svh) * 0.032), 36px);
854+
}
855+
856+
/* Two rows when Evolution button present (homepage) */
857+
.hero-intro .social-links:has(.evolution-cta) {
858+
min-height: clamp(54px, calc(72px - (800px - 100svh) * 0.06), 72px);
859+
row-gap: clamp(0.25rem, calc(0.5rem - (800px - 100svh) * 0.016), 0.5rem);
825860
}
826861

827862
.hero-intro .social-links a {
828-
width: clamp(30px, calc(36px - (700px - 100svh) * 0.04), 36px);
829-
height: clamp(30px, calc(36px - (700px - 100svh) * 0.04), 36px);
863+
width: clamp(28px, calc(36px - (800px - 100svh) * 0.032), 36px);
864+
height: clamp(28px, calc(36px - (800px - 100svh) * 0.032), 36px);
830865
}
831866

832-
.hero-intro .social-links a.resume-cta {
867+
/* CTA button sizing on mobile */
868+
.hero-intro .social-links a.resume-cta,
869+
.hero-intro .social-links a.evolution-cta {
833870
width: auto;
834-
height: clamp(30px, calc(36px - (700px - 100svh) * 0.04), 36px);
871+
height: clamp(28px, calc(36px - (800px - 100svh) * 0.032), 36px);
835872
padding: 0 0.65rem;
836-
font-size: clamp(0.7rem, calc(0.8rem - (700px - 100svh) * 0.011), 0.8rem);
873+
font-size: clamp(0.68rem, calc(0.8rem - (800px - 100svh) * 0.008), 0.8rem);
874+
}
875+
876+
/* Only force second row when Evolution button is present (homepage) */
877+
.hero-intro .social-links:has(.evolution-cta)::before {
878+
content: '';
879+
flex-basis: 100%;
880+
order: 1;
881+
}
882+
883+
.hero-intro .social-links:has(.evolution-cta) a.resume-cta,
884+
.hero-intro .social-links:has(.evolution-cta) a.evolution-cta {
885+
order: 2;
837886
}
838887

839888
/* Hero nav on mobile - stack vertically, full width capsules */
840889
.hero-nav {
841890
flex-direction: column;
842891
align-items: stretch;
843892
max-width: 100%;
844-
gap: clamp(0.25rem, calc(0.5rem - (700px - 100svh) * 0.027), 0.5rem);
893+
gap: clamp(0.2rem, calc(0.5rem - (800px - 100svh) * 0.02), 0.5rem);
845894
}
846895

847896
.hero-nav-item {
848897
justify-content: flex-start;
849-
padding: clamp(0.3rem, calc(0.55rem - (700px - 100svh) * 0.027), 0.55rem) 1rem clamp(0.3rem, calc(0.55rem - (700px - 100svh) * 0.027), 0.55rem) 0.65rem;
898+
padding: clamp(0.25rem, calc(0.55rem - (800px - 100svh) * 0.02), 0.55rem) 1rem clamp(0.25rem, calc(0.55rem - (800px - 100svh) * 0.02), 0.55rem) 0.65rem;
850899
width: 100%;
851900
}
852901

@@ -859,21 +908,21 @@ footer:empty {
859908
}
860909

861910
.hero-nav-icon {
862-
width: clamp(26px, calc(36px - (700px - 100svh) * 0.067), 36px);
863-
height: clamp(26px, calc(36px - (700px - 100svh) * 0.067), 36px);
911+
width: clamp(24px, calc(36px - (800px - 100svh) * 0.05), 36px);
912+
height: clamp(24px, calc(36px - (800px - 100svh) * 0.05), 36px);
864913
}
865914

866915
.hero-nav-icon svg {
867-
width: clamp(14px, calc(16px - (700px - 100svh) * 0.013), 16px);
868-
height: clamp(14px, calc(16px - (700px - 100svh) * 0.013), 16px);
916+
width: clamp(13px, calc(16px - (800px - 100svh) * 0.01), 16px);
917+
height: clamp(13px, calc(16px - (800px - 100svh) * 0.01), 16px);
869918
}
870919

871920
.hero-nav-label {
872-
font-size: clamp(0.75rem, calc(0.85rem - (700px - 100svh) * 0.011), 0.85rem);
921+
font-size: clamp(0.72rem, calc(0.85rem - (800px - 100svh) * 0.009), 0.85rem);
873922
}
874923

875924
.hero-nav-subtitle {
876-
font-size: clamp(0.65rem, calc(0.75rem - (700px - 100svh) * 0.011), 0.75rem);
925+
font-size: clamp(0.62rem, calc(0.75rem - (800px - 100svh) * 0.009), 0.75rem);
877926
}
878927

879928
.content-section {
@@ -1168,6 +1217,13 @@ footer:empty {
11681217
transform: none;
11691218
}
11701219

1220+
.hero-intro .social-links a.evolution-cta:hover,
1221+
.hero-intro .social-links a.evolution-cta:focus {
1222+
background: color-mix(in srgb, var(--evolution-gold) 8%, transparent);
1223+
box-shadow: none;
1224+
transform: none;
1225+
}
1226+
11711227
.hero-nav-item:hover,
11721228
.hero-nav-item:focus {
11731229
border-color: var(--border-color);

‎evolution/script.js.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)