mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-12-03 17:48:14 +03:00
Revamp welcome page
This commit is contained in:
Lim Chee Aun
parent
e502b8e377
commit
c99b97d209
4 changed files with 221 additions and 108 deletions
37
design/logo-text.svg
Normal file
37
design/logo-text.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 102 28">
|
||||
<path fill="none" d="M0 0h101.5v27.5H0z"/>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="url(#a)" d="M2.32 21.85c1.4 0 2.21-.85 2.21-2.3v-4.64H8.5c4.45 0 7.54-2.9 7.54-7.24 0-4.35-2.98-7.24-7.32-7.24h-6.4C.93.43.11 1.28.11 2.73v16.82c0 1.45.82 2.3 2.21 2.3Zm2.21-10.4V3.94h3c2.54 0 4 1.34 4 3.75s-1.47 3.76-4 3.76h-3Z"/>
|
||||
<path fill="url(#b)" d="M20.52 21.88c1.25 0 2.13-.76 2.13-2.23v-7.04c0-2.07 1.2-3.49 3.21-3.49 1.95 0 2.95 1.23 2.95 3.25v7.28c0 1.47.89 2.23 2.13 2.23 1.26 0 2.14-.76 2.14-2.23v-8.18c0-3.64-1.99-5.9-5.48-5.9-2.38 0-4.1 1.12-4.93 3.1h-.09V2.3c0-1.38-.78-2.2-2.1-2.2-1.31 0-2.1.82-2.1 2.2v17.34c0 1.47.9 2.23 2.14 2.23Z"/>
|
||||
<path fill="url(#c)" d="M40.45 21.82c1.96 0 3.93-.98 4.8-2.65h.1v.8c.08 1.27.89 1.91 2.05 1.91 1.21 0 2.08-.73 2.08-2.15v-8.95c0-3.17-2.63-5.25-6.65-5.25-3.26 0-5.78 1.16-6.5 3.04-.15.32-.23.63-.23.96 0 .97.75 1.64 1.79 1.64.69 0 1.23-.26 1.7-.79.95-1.23 1.74-1.65 3.04-1.65 1.62 0 2.64.85 2.64 2.31v1.04l-3.95.24c-3.93.23-6.13 1.88-6.13 4.74 0 2.83 2.27 4.76 5.26 4.76Zm1.4-3.09c-1.43 0-2.4-.73-2.4-1.9 0-1.12.91-1.83 2.51-1.95l3.31-.2v1.14c0 1.7-1.54 2.91-3.41 2.91Z"/>
|
||||
<path fill="url(#d)" d="M54.37 21.88c1.26 0 2.14-.76 2.14-2.23v-7.09c0-2.03 1.21-3.44 3.13-3.44s2.89 1.17 2.89 3.22v7.31c0 1.47.88 2.23 2.14 2.23 1.24 0 2.13-.76 2.13-2.23v-8.2c0-3.68-1.96-5.87-5.45-5.87-2.41 0-4 1.07-4.83 3.01h-.09v-.87c0-1.35-.85-2.17-2.14-2.17-1.28 0-2.06.82-2.06 2.15v11.95c0 1.47.9 2.23 2.14 2.23Z"/>
|
||||
<path fill="url(#e)" d="M71.65 27.17c1.26 0 2.14-.76 2.14-2.23v-6h.09a5.15 5.15 0 0 0 4.88 2.88c3.92 0 6.35-3.05 6.35-8.1 0-5.07-2.44-8.1-6.43-8.1a5.12 5.12 0 0 0-4.86 2.99h-.09v-.85c0-1.45-.88-2.21-2.1-2.21-1.24 0-2.11.76-2.11 2.2v17.2c0 1.46.89 2.22 2.13 2.22Zm5.6-8.8c-2.1 0-3.47-1.8-3.47-4.65 0-2.81 1.37-4.67 3.47-4.67 2.14 0 3.49 1.83 3.49 4.67 0 2.86-1.35 4.66-3.5 4.66Z"/>
|
||||
<path fill="url(#f)" d="M89.61 27.39c3.44 0 5.26-1.5 6.73-5.55l4.81-13.1a4 4 0 0 0 .24-1.26c0-1.13-.85-1.93-2.08-1.93-1.1 0-1.71.51-2.07 1.7l-3.4 10.9h-.08L90.35 7.28c-.36-1.25-.94-1.73-2.07-1.73-1.26 0-2.21.83-2.21 1.99 0 .35.09.82.25 1.26l5 13.21-.21.56c-.52 1.1-1.32 1.42-2.07 1.42l-.75-.01c-.96 0-1.56.54-1.56 1.4 0 1.29 1 2 2.88 2Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
37
src/assets/logo-text.svg
Normal file
37
src/assets/logo-text.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 102 28">
|
||||
<path fill="none" d="M0 0h101.5v27.5H0z"/>
|
||||
<g fill-rule="nonzero">
|
||||
<path fill="url(#a)" d="M2.32 21.85c1.4 0 2.21-.85 2.21-2.3v-4.64H8.5c4.45 0 7.54-2.9 7.54-7.24 0-4.35-2.98-7.24-7.32-7.24h-6.4C.93.43.11 1.28.11 2.73v16.82c0 1.45.82 2.3 2.21 2.3Zm2.21-10.4V3.94h3c2.54 0 4 1.34 4 3.75s-1.47 3.76-4 3.76h-3Z"/>
|
||||
<path fill="url(#b)" d="M20.52 21.88c1.25 0 2.13-.76 2.13-2.23v-7.04c0-2.07 1.2-3.49 3.21-3.49 1.95 0 2.95 1.23 2.95 3.25v7.28c0 1.47.89 2.23 2.13 2.23 1.26 0 2.14-.76 2.14-2.23v-8.18c0-3.64-1.99-5.9-5.48-5.9-2.38 0-4.1 1.12-4.93 3.1h-.09V2.3c0-1.38-.78-2.2-2.1-2.2-1.31 0-2.1.82-2.1 2.2v17.34c0 1.47.9 2.23 2.14 2.23Z"/>
|
||||
<path fill="url(#c)" d="M40.45 21.82c1.96 0 3.93-.98 4.8-2.65h.1v.8c.08 1.27.89 1.91 2.05 1.91 1.21 0 2.08-.73 2.08-2.15v-8.95c0-3.17-2.63-5.25-6.65-5.25-3.26 0-5.78 1.16-6.5 3.04-.15.32-.23.63-.23.96 0 .97.75 1.64 1.79 1.64.69 0 1.23-.26 1.7-.79.95-1.23 1.74-1.65 3.04-1.65 1.62 0 2.64.85 2.64 2.31v1.04l-3.95.24c-3.93.23-6.13 1.88-6.13 4.74 0 2.83 2.27 4.76 5.26 4.76Zm1.4-3.09c-1.43 0-2.4-.73-2.4-1.9 0-1.12.91-1.83 2.51-1.95l3.31-.2v1.14c0 1.7-1.54 2.91-3.41 2.91Z"/>
|
||||
<path fill="url(#d)" d="M54.37 21.88c1.26 0 2.14-.76 2.14-2.23v-7.09c0-2.03 1.21-3.44 3.13-3.44s2.89 1.17 2.89 3.22v7.31c0 1.47.88 2.23 2.14 2.23 1.24 0 2.13-.76 2.13-2.23v-8.2c0-3.68-1.96-5.87-5.45-5.87-2.41 0-4 1.07-4.83 3.01h-.09v-.87c0-1.35-.85-2.17-2.14-2.17-1.28 0-2.06.82-2.06 2.15v11.95c0 1.47.9 2.23 2.14 2.23Z"/>
|
||||
<path fill="url(#e)" d="M71.65 27.17c1.26 0 2.14-.76 2.14-2.23v-6h.09a5.15 5.15 0 0 0 4.88 2.88c3.92 0 6.35-3.05 6.35-8.1 0-5.07-2.44-8.1-6.43-8.1a5.12 5.12 0 0 0-4.86 2.99h-.09v-.85c0-1.45-.88-2.21-2.1-2.21-1.24 0-2.11.76-2.11 2.2v17.2c0 1.46.89 2.22 2.13 2.22Zm5.6-8.8c-2.1 0-3.47-1.8-3.47-4.65 0-2.81 1.37-4.67 3.47-4.67 2.14 0 3.49 1.83 3.49 4.67 0 2.86-1.35 4.66-3.5 4.66Z"/>
|
||||
<path fill="url(#f)" d="M89.61 27.39c3.44 0 5.26-1.5 6.73-5.55l4.81-13.1a4 4 0 0 0 .24-1.26c0-1.13-.85-1.93-2.08-1.93-1.1 0-1.71.51-2.07 1.7l-3.4 10.9h-.08L90.35 7.28c-.36-1.25-.94-1.73-2.07-1.73-1.26 0-2.21.83-2.21 1.99 0 .35.09.82.25 1.26l5 13.21-.21.56c-.52 1.1-1.32 1.42-2.07 1.42l-.75-.01c-.96 0-1.56.54-1.56 1.4 0 1.29 1 2 2.88 2Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="rotate(28.51 .06 .22) scale(57.6252)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#a4bff7"/>
|
||||
<stop offset="1" stop-color="#6081e6"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</b>
|
||||
</big>
|
||||
</p>
|
||||
<details id="why-container">
|
||||
<summary>Why Phanpy?</summary>
|
||||
<div class="hero-container">
|
||||
<h1>
|
||||
<img
|
||||
src={logo}
|
||||
alt=""
|
||||
width="200"
|
||||
height="200"
|
||||
style={{
|
||||
aspectRatio: '1/1',
|
||||
marginBlockEnd: -16,
|
||||
}}
|
||||
/>
|
||||
<img src={logoText} alt="Phanpy" width="250" />
|
||||
</h1>
|
||||
<p>
|
||||
<big>
|
||||
<b>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</b>
|
||||
</big>
|
||||
</p>
|
||||
<p class="desc">A minimalistic opinionated Mastodon web client.</p>
|
||||
</div>
|
||||
<div id="why-container">
|
||||
<div class="sections">
|
||||
<section>
|
||||
<h4>Boosts Carousel</h4>
|
||||
<p>
|
||||
Visually separate original posts and re-shared posts (boosted
|
||||
posts).
|
||||
</p>
|
||||
<img
|
||||
src={boostsCarouselUrl}
|
||||
alt="Screenshot of Boosts Carousel"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4>Boosts Carousel</h4>
|
||||
<p>
|
||||
Visually separate original posts and re-shared posts (boosted
|
||||
posts).
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Nested comments thread</h4>
|
||||
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
|
||||
<img
|
||||
src={nestedCommentsThreadUrl}
|
||||
alt="Screenshot of nested comments thread"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4>Nested comments thread</h4>
|
||||
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Grouped notifications</h4>
|
||||
<p>
|
||||
Similar notifications are grouped and collapsed to reduce clutter.
|
||||
</p>
|
||||
<img
|
||||
src={groupedNotificationsUrl}
|
||||
alt="Screenshot of grouped notifications"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4>Grouped notifications</h4>
|
||||
<p>
|
||||
Similar notifications are grouped and collapsed to reduce clutter.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Single or multi-column</h4>
|
||||
<p>
|
||||
By default, single column for zen-mode seekers. Configurable
|
||||
multi-column for power users.
|
||||
</p>
|
||||
<img
|
||||
src={multiColumnUrl}
|
||||
alt="Screenshot of multi-column UI"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4>Single or multi-column</h4>
|
||||
<p>
|
||||
By default, single column for zen-mode seekers. Configurable
|
||||
multi-column for power users.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Multi-hashtag timeline</h4>
|
||||
<p>Up to 5 hashtags combined into a single timeline.</p>
|
||||
<img
|
||||
src={multiHashtagTimelineUrl}
|
||||
alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h4>Multi-hashtag timeline</h4>
|
||||
<p>Up to 5 hashtags combined into a single timeline.</p>
|
||||
</section>
|
||||
<p>Convinced yet?</p>
|
||||
<p>
|
||||
<big>
|
||||
<b>
|
||||
<Link to="/login" class="button">
|
||||
Log in
|
||||
</Link>
|
||||
</b>
|
||||
</big>
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||
|
|
|
|||
Loading…
Reference in a new issue