From c116db79cc232dc6c55a8f91d3e7775b830fff24 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 20 Dec 2022 00:16:45 +0800
Subject: [PATCH] Have fun with welcome page
---
src/pages/welcome.css | 57 ++++++++++++++++++++++---------------------
src/pages/welcome.jsx | 35 ++++++++++++++------------
2 files changed, 48 insertions(+), 44 deletions(-)
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>