This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/homepage in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit f3df4c3d03f62e345b5c68aa956ce7fd506ec811 Author: Leonard <[email protected]> AuthorDate: Tue Jul 4 15:51:22 2023 +0200 Update features component --- src/components/features/index.tsx | 8 +++++- src/components/features/style.module.css | 44 +++++++++++++++++++++++++++++--- 2 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/components/features/index.tsx b/src/components/features/index.tsx index 44bb0a7..24e08b8 100644 --- a/src/components/features/index.tsx +++ b/src/components/features/index.tsx @@ -8,6 +8,9 @@ import styles from './style.module.css'; export function Feature({ medium, large, + full, + square, + squareLarge, plain, centered, children, @@ -27,6 +30,9 @@ export function Feature({ styles.feature, medium && styles.medium, large && styles.large, + full && styles.full, + square && styles.square, + squareLarge && styles['square-large'], plain && styles.plain, centered && styles.centered, lightOnly && styles['light-only'], @@ -36,7 +42,7 @@ export function Feature({ > {children} {href ? ( - <Link className={styles.link} href={href} target="_blank"> + <Link className={styles.link} href={href}> <svg xmlns="http://www.w3.org/2000/svg"; width="1.5em" diff --git a/src/components/features/style.module.css b/src/components/features/style.module.css index 76a6c17..611126c 100644 --- a/src/components/features/style.module.css +++ b/src/components/features/style.module.css @@ -6,18 +6,35 @@ overflow: hidden; border-radius: 0.75em; } -.feature.medium { + +.feature.large { grid-column: span 2; } -.feature.large { + +.feature.full { grid-column: span 3; } -.feature.plain { - padding: 0; + +.feature.square { + grid-column: span 1; + grid-row: span 1; + aspect-ratio: 1 / 1; } + +.feature.square-large { + grid-column: span 2; + grid-row: span 2; + aspect-ratio: 1 / 1; +} + .feature.centered { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; text-align: center; } + .feature h3 { position: relative; font-size: 34px; @@ -27,18 +44,22 @@ letter-spacing: -0.02rem; z-index: 2; } + :global(.dark) .feature:not(.light-only) { color: #fff; background-color: #202020; } + .feature { box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%), 0 0 0 1px rgb(0 0 0 / 3%); transition: box-shadow 0.3s ease; } + :global(.dark) .feature { box-shadow: 0 0 0 1px rgb(82 82 82 / 60%); } + .feature .link { position: absolute; right: 1em; @@ -57,6 +78,7 @@ transition: all 0.2s ease; -webkit-user-drag: none; } + @media (hover: hover) { .feature .link { opacity: 0; @@ -97,6 +119,13 @@ .feature.large { grid-column: span 1; } + .feature.full { + grid-column: span 1; + } + .feature.square-large { + grid-column: span 1; + grid-row: span 1; + } .features { grid-template-columns: 1fr; grid-gap: 3em; @@ -117,6 +146,13 @@ .feature.large { grid-column: span 1; } + .feature.full { + grid-column: span 1; + } + .feature.square-large { + grid-column: span 1; + grid-row: span 1; + } .features { grid-template-columns: 1fr; grid-gap: 3em;
