diff --git a/src/pages/welcome.css b/src/pages/welcome.css index 4bd7a456..578178bd 100644 --- a/src/pages/welcome.css +++ b/src/pages/welcome.css @@ -1,39 +1,40 @@ #welcome { text-align: center; + background-image: radial-gradient( + closest-side at 50% 50%, + var(--bg-faded-color), + transparent + ); } -#welcome img { - margin-top: 16px; - height: auto; +#welcome h1 { + margin: 0; + padding: 0; + font-size: 1.2em; } -@keyframes dance { +#welcome img { + vertical-align: top; +} + +#welcome h2 { + font-size: 3em; + letter-spacing: -0.05ex; + margin: 16px 0; + padding: 0; + /* gradiented text */ + background: linear-gradient(45deg, var(--purple-color), var(--red-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +@keyframes psychedelic { 0% { - transform: rotate(0deg); - } - 20% { - transform: rotate(5deg); - } - 40% { - transform: rotate(-5deg); - } - 60% { - transform: rotate(5deg); - } - 80% { - transform: rotate(-5deg); + filter: hue-rotate(0deg); } 100% { - transform: rotate(0deg); + filter: hue-rotate(360deg); } } -#welcome:hover img { - animation: dance 2s infinite 15s linear; +#welcome:hover h2 { + animation: psychedelic 60s infinite; } - -#welcome .warning { - font-weight: bold; - padding: 16px; - background: lemonchiffon; - color: chocolate; - border-radius: 16px; -} \ No newline at end of file diff --git a/src/pages/welcome.jsx b/src/pages/welcome.jsx index f9940a98..4ba7e7c2 100644 --- a/src/pages/welcome.jsx +++ b/src/pages/welcome.jsx @@ -6,22 +6,25 @@ import useTitle from '../utils/useTitle'; function Welcome() { useTitle(); return ( - <main id="welcome" class="box"> - <img - src={logo} - alt="" - width="140" - height="140" - style={{ - aspectRatio: '1/1', - }} - /> - <h1>Welcome</h1> - <p>Phanpy is a minimalistic opinionated Mastodon web client.</p> - <p class="warning"> - 🚧 This is an early ALPHA project. Many features are missing, many bugs - are present. Please report issues as detailed as possible. Thanks 🙏 - </p> + <main id="welcome"> + <h1> + <img + src={logo} + alt="" + width="24" + height="24" + style={{ + aspectRatio: '1/1', + }} + />{' '} + Phanpy + </h1> + <h2> + Trunk-tastic + <br /> + Mastodon Experience + </h2> + <p>A minimalistic opinionated Mastodon web client.</p> <p> <big> <b>