From c99b97d20968ab9995f4addfc27df0d080bc2251 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 10 Jun 2023 19:20:32 +0800 Subject: [PATCH] Revamp welcome page --- design/logo-text.svg | 37 ++++++++++ src/assets/logo-text.svg | 37 ++++++++++ src/pages/welcome.css | 151 ++++++++++++++++++++++++++------------- src/pages/welcome.jsx | 104 ++++++++++++--------------- 4 files changed, 221 insertions(+), 108 deletions(-) create mode 100644 design/logo-text.svg create mode 100644 src/assets/logo-text.svg diff --git a/design/logo-text.svg b/design/logo-text.svg new file mode 100644 index 0000000..f09092c --- /dev/null +++ b/design/logo-text.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo-text.svg b/src/assets/logo-text.svg new file mode 100644 index 0000000..f09092c --- /dev/null +++ b/src/assets/logo-text.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/welcome.css b/src/pages/welcome.css index fd9241e..0ed25ac 100644 --- a/src/pages/welcome.css +++ b/src/pages/welcome.css @@ -1,88 +1,139 @@ #welcome { text-align: center; background-image: radial-gradient( - closest-side at 50% 50%, - var(--bg-faded-color), - transparent - ); + circle at center, + var(--bg-color), + transparent 16em + ), + radial-gradient(circle at center, var(--bg-color), transparent 8em); + background-repeat: no-repeat; + background-attachment: fixed; padding: 16px; + cursor: default; +} +#welcome ~ * { + display: none; +} + +#welcome .hero-container { + padding-block: 60px; + height: 100vh; + height: 100dvh; + display: flex; + flex-direction: column; } #welcome h1 { margin: 0; padding: 0; - font-size: 1.2em; + font-size: 5em; + line-height: 1; + letter-spacing: -1px; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + mix-blend-mode: multiply; +} +@keyframes shine2 { + 0% { + left: -100%; + } + 20% { + left: 100%; + } + 100% { + left: 100%; + } +} +#welcome h1:before { + content: ''; + position: absolute; + z-index: 2; + width: 100%; + height: 100%; + background-image: linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 30%, + rgba(255, 255, 255, 0.4), + rgba(255, 255, 255, 0) 70% + ); + top: 0; + left: -100%; + pointer-events: none; + animation: shine2 5s ease-in-out 1s infinite; +} +@media (prefers-color-scheme: dark) { + #welcome { + background-image: none; + } + #welcome h1 { + mix-blend-mode: normal; + } + #welcome h1:before { + content: none; + } } #welcome img { vertical-align: top; + transition: transform 0.3s ease-out; } - -#welcome h2 { - font-size: 3em; - letter-spacing: -0.05ex; - margin: 16px 0; - padding: 0; - /* gradiented text */ - background: linear-gradient( - 45deg, - var(--blue-color) 30%, - var(--purple-color), - var(--red-color) 70% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +#welcome h1 img { + filter: drop-shadow(-1px -1px var(--bg-blur-color)) + drop-shadow(0 -1px 1px #fff) + drop-shadow(0 16px 32px var(--drop-shadow-color)); } - -@keyframes psychedelic { - 0% { - filter: hue-rotate(0deg); - } - 100% { - filter: hue-rotate(-90deg); +@media (prefers-color-scheme: dark) { + #welcome h1 img { + filter: none; } } -#welcome:hover h2 { - animation: psychedelic 10s infinite alternate; + +#welcome h1:hover img { + transform: scale(1.05); +} +#welcome .desc { + font-size: 1.4em; + text-wrap: balance; + opacity: 0.7; +} +#welcome .hero-container > p { + margin-top: 0; } -#why-container summary { - font-weight: bold; - margin: 16px 0; - padding: 0; - text-decoration: underline; - cursor: pointer; +#why-container .sections { + padding-inline: 16px; } -#why-container[open] summary { - text-decoration: none; - opacity: 0.5; -} - #why-container .sections section { text-align: start; max-width: 480px; background-color: var(--bg-color); - border-radius: 30px; - border: 1px solid var(--bg-color); - font-weight: 600; - font-size: 106.25%; + border-radius: 16px; overflow: hidden; - box-shadow: 0 0 0 1px var(--outline-color), - 0 4px 16px -8px var(--drop-shadow-color); - margin-bottom: 16px; + box-shadow: 17px 20px 40px var(--drop-shadow-color); + margin-bottom: 48px; } #why-container .sections section h4 { margin: 0; padding: 30px 30px 0; - font-size: 111.765%; - color: var(--blue-color); + font-size: 1.4em; font-weight: 600; } #why-container .sections section p { margin-inline: 30px; margin-bottom: 30px; + opacity: 0.7; + text-wrap: balance; } #why-container .sections section img { width: 100%; height: auto; - border-top: 1px solid var(--outline-color); + border-bottom: 1px solid var(--outline-color); +} +@media (prefers-color-scheme: dark) { + #why-container .sections section img { + filter: invert(0.85) hue-rotate(180deg); + } } diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx index e1997d7..edd212f 100644 --- a/src/pages/welcome.jsx +++ b/src/pages/welcome.jsx @@ -5,6 +5,7 @@ import groupedNotificationsUrl from '../assets/features/grouped-notifications.jp import multiColumnUrl from '../assets/features/multi-column.jpg'; import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg'; import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg'; +import logoText from '../assets/logo-text.svg'; import logo from '../assets/logo.svg'; import Link from '../components/link'; import states from '../utils/states'; @@ -14,101 +15,88 @@ function Welcome() { useTitle(null, ['/', '/welcome']); return (
-

- {' '} - Phanpy -

-

- Trunk-tastic -
- Mastodon Experience -

-

A minimalistic opinionated Mastodon web client.

-

- - - - Log in - - - -

-
- Why Phanpy? +
+

+ + Phanpy +

+

+ + + + Log in + + + +

+

A minimalistic opinionated Mastodon web client.

+
+
-

Boosts Carousel

-

- Visually separate original posts and re-shared posts (boosted - posts). -

Screenshot of Boosts Carousel +

Boosts Carousel

+

+ Visually separate original posts and re-shared posts (boosted + posts). +

-

Nested comments thread

-

Effortlessly follow conversations. Semi-collapsible replies.

Screenshot of nested comments thread +

Nested comments thread

+

Effortlessly follow conversations. Semi-collapsible replies.

-

Grouped notifications

-

- Similar notifications are grouped and collapsed to reduce clutter. -

Screenshot of grouped notifications +

Grouped notifications

+

+ Similar notifications are grouped and collapsed to reduce clutter. +

-

Single or multi-column

-

- By default, single column for zen-mode seekers. Configurable - multi-column for power users. -

Screenshot of multi-column UI +

Single or multi-column

+

+ By default, single column for zen-mode seekers. Configurable + multi-column for power users. +

-

Multi-hashtag timeline

-

Up to 5 hashtags combined into a single timeline.

Screenshot of multi-hashtag timeline with a form to add more hashtags +

Multi-hashtag timeline

+

Up to 5 hashtags combined into a single timeline.

-

Convinced yet?

-

- - - - Log in - - - -

-
+