mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-22 16:46:28 +01:00
Have fun with welcome page
This commit is contained in:
parent
ad2bebec0e
commit
c116db79cc
2 changed files with 48 additions and 44 deletions
|
@ -1,39 +1,40 @@
|
|||
#welcome {
|
||||
text-align: center;
|
||||
background-image: radial-gradient(
|
||||
closest-side at 50% 50%,
|
||||
var(--bg-faded-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
#welcome h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#welcome img {
|
||||
margin-top: 16px;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
@keyframes dance {
|
||||
|
||||
#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 .warning {
|
||||
font-weight: bold;
|
||||
padding: 16px;
|
||||
background: lemonchiffon;
|
||||
color: chocolate;
|
||||
border-radius: 16px;
|
||||
#welcome:hover h2 {
|
||||
animation: psychedelic 60s infinite;
|
||||
}
|
|
@ -6,22 +6,25 @@ import useTitle from '../utils/useTitle';
|
|||
function Welcome() {
|
||||
useTitle();
|
||||
return (
|
||||
<main id="welcome" class="box">
|
||||
<main id="welcome">
|
||||
<h1>
|
||||
<img
|
||||
src={logo}
|
||||
alt=""
|
||||
width="140"
|
||||
height="140"
|
||||
width="24"
|
||||
height="24"
|
||||
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>
|
||||
/>{' '}
|
||||
Phanpy
|
||||
</h1>
|
||||
<h2>
|
||||
Trunk-tastic
|
||||
<br />
|
||||
Mastodon Experience
|
||||
</h2>
|
||||
<p>A minimalistic opinionated Mastodon web client.</p>
|
||||
<p>
|
||||
<big>
|
||||
<b>
|
||||
|
|
Loading…
Reference in a new issue