kfj001/kmtnflower
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

minor style fixes

Browse Source
This commit is contained in:
kfj001
2026-06-23 07:31:57 +00:00
parent 2295f841c9
commit 3419b997eb
1 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/hero/hero.component.scss
+52 -15
View File
@@ -103,7 +103,7 @@
} }
.btn-hero-secondary { .btn-hero-secondary {
@include button-style(transparent, var(--color-white), rgba(255,255,255,0.15)); @include button-style(transparent, var(--color-white), rgba(255, 255, 255, 0.15));
border: 2px solid rgba(255, 255, 255, 0.4); border: 2px solid rgba(255, 255, 255, 0.4);
font-size: 1.1rem; font-size: 1.1rem;
padding: $spacing-sm $spacing-xl; padding: $spacing-sm $spacing-xl;
@@ -135,8 +135,17 @@
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(74, 158, 79, 0); } 0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 6px rgba(74, 158, 79, 0);
}
} }
.hero-divider { .hero-divider {
@@ -188,8 +197,13 @@
} }
@keyframes scroll-carousel { @keyframes scroll-carousel {
from { transform: translateX(0); } from {
to { transform: translateX(-50%); } transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} }
.carousel-slide { .carousel-slide {
@@ -202,6 +216,7 @@
outline: none; outline: none;
&:focus-visible { &:focus-visible {
.carousel-logo, .carousel-logo,
.carousel-badge { .carousel-badge {
outline: 2px solid $accent-orange; outline: 2px solid $accent-orange;
@@ -280,6 +295,7 @@
opacity: 0; opacity: 0;
transform: translateY(30px) scale(0.97); transform: translateY(30px) scale(0.97);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); transform: translateY(0) scale(1);
@@ -310,8 +326,8 @@
.takeover-logo { .takeover-logo {
display: block; display: block;
width: 140px; width: clamp(200px, 40vw, 380px);
height: 140px; height: clamp(200px, 40vw, 380px);
margin: 0 auto $spacing-md; margin: 0 auto $spacing-md;
border-radius: $radius-lg; border-radius: $radius-lg;
object-fit: contain; object-fit: contain;
@@ -346,16 +362,37 @@
// ── Responsive ────────────────────────────────────────────── // ── Responsive ──────────────────────────────────────────────
@media (max-width: #{$bp-md - 1px}) { @media (max-width: #{$bp-md - 1px}) {
.hero-line1 { font-size: 2.5rem; } .hero-line1 {
.hero-line2 { font-size: 2.2rem; } font-size: 2.5rem;
.hero-subtitle { font-size: 1rem; } }
.hero-flower { width: 70px; height: 70px; }
.hero-actions { flex-direction: column; align-items: center; } .hero-line2 {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-flower {
width: 70px;
height: 70px;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
// Carousel clamp() handles responsive sizing automatically // Carousel clamp() handles responsive sizing automatically
} }
@media (max-width: #{$bp-sm - 1px}) { @media (max-width: #{$bp-sm - 1px}) {
.hero-line1 { font-size: 2rem; } .hero-line1 {
.hero-line2 { font-size: 1.8rem; } font-size: 2rem;
} }
.hero-line2 {
font-size: 1.8rem;
}
}