mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-22 08:36:21 +01: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 {
|
#welcome {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-image: radial-gradient(
|
background-image: radial-gradient(
|
||||||
closest-side at 50% 50%,
|
circle at center,
|
||||||
var(--bg-faded-color),
|
var(--bg-color),
|
||||||
transparent
|
transparent 16em
|
||||||
);
|
),
|
||||||
|
radial-gradient(circle at center, var(--bg-color), transparent 8em);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
#welcome ~ * {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome .hero-container {
|
||||||
|
padding-block: 60px;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100dvh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#welcome h1 {
|
#welcome h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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 {
|
#welcome img {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
#welcome h1 img {
|
||||||
#welcome h2 {
|
filter: drop-shadow(-1px -1px var(--bg-blur-color))
|
||||||
font-size: 3em;
|
drop-shadow(0 -1px 1px #fff)
|
||||||
letter-spacing: -0.05ex;
|
drop-shadow(0 16px 32px var(--drop-shadow-color));
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
@keyframes psychedelic {
|
#welcome h1 img {
|
||||||
0% {
|
filter: none;
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
filter: hue-rotate(-90deg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#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 {
|
#why-container .sections {
|
||||||
font-weight: bold;
|
padding-inline: 16px;
|
||||||
margin: 16px 0;
|
|
||||||
padding: 0;
|
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
#why-container[open] summary {
|
|
||||||
text-decoration: none;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#why-container .sections section {
|
#why-container .sections section {
|
||||||
text-align: start;
|
text-align: start;
|
||||||
max-width: 480px;
|
max-width: 480px;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
border-radius: 30px;
|
border-radius: 16px;
|
||||||
border: 1px solid var(--bg-color);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 106.25%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 0 0 1px var(--outline-color),
|
box-shadow: 17px 20px 40px var(--drop-shadow-color);
|
||||||
0 4px 16px -8px var(--drop-shadow-color);
|
margin-bottom: 48px;
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
#why-container .sections section h4 {
|
#why-container .sections section h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 30px 30px 0;
|
padding: 30px 30px 0;
|
||||||
font-size: 111.765%;
|
font-size: 1.4em;
|
||||||
color: var(--blue-color);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
#why-container .sections section p {
|
#why-container .sections section p {
|
||||||
margin-inline: 30px;
|
margin-inline: 30px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
opacity: 0.7;
|
||||||
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
#why-container .sections section img {
|
#why-container .sections section img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
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 multiColumnUrl from '../assets/features/multi-column.jpg';
|
||||||
import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg';
|
import multiHashtagTimelineUrl from '../assets/features/multi-hashtag-timeline.jpg';
|
||||||
import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
|
import nestedCommentsThreadUrl from '../assets/features/nested-comments-thread.jpg';
|
||||||
|
import logoText from '../assets/logo-text.svg';
|
||||||
import logo from '../assets/logo.svg';
|
import logo from '../assets/logo.svg';
|
||||||
import Link from '../components/link';
|
import Link from '../components/link';
|
||||||
import states from '../utils/states';
|
import states from '../utils/states';
|
||||||
|
|
@ -14,101 +15,88 @@ function Welcome() {
|
||||||
useTitle(null, ['/', '/welcome']);
|
useTitle(null, ['/', '/welcome']);
|
||||||
return (
|
return (
|
||||||
<main id="welcome">
|
<main id="welcome">
|
||||||
<h1>
|
<div class="hero-container">
|
||||||
<img
|
<h1>
|
||||||
src={logo}
|
<img
|
||||||
alt=""
|
src={logo}
|
||||||
width="24"
|
alt=""
|
||||||
height="24"
|
width="200"
|
||||||
style={{
|
height="200"
|
||||||
aspectRatio: '1/1',
|
style={{
|
||||||
}}
|
aspectRatio: '1/1',
|
||||||
/>{' '}
|
marginBlockEnd: -16,
|
||||||
Phanpy
|
}}
|
||||||
</h1>
|
/>
|
||||||
<h2>
|
<img src={logoText} alt="Phanpy" width="250" />
|
||||||
Trunk-tastic
|
</h1>
|
||||||
<br />
|
<p>
|
||||||
Mastodon Experience
|
<big>
|
||||||
</h2>
|
<b>
|
||||||
<p>A minimalistic opinionated Mastodon web client.</p>
|
<Link to="/login" class="button">
|
||||||
<p>
|
Log in
|
||||||
<big>
|
</Link>
|
||||||
<b>
|
</b>
|
||||||
<Link to="/login" class="button">
|
</big>
|
||||||
Log in
|
</p>
|
||||||
</Link>
|
<p class="desc">A minimalistic opinionated Mastodon web client.</p>
|
||||||
</b>
|
</div>
|
||||||
</big>
|
<div id="why-container">
|
||||||
</p>
|
|
||||||
<details id="why-container">
|
|
||||||
<summary>Why Phanpy?</summary>
|
|
||||||
<div class="sections">
|
<div class="sections">
|
||||||
<section>
|
<section>
|
||||||
<h4>Boosts Carousel</h4>
|
|
||||||
<p>
|
|
||||||
Visually separate original posts and re-shared posts (boosted
|
|
||||||
posts).
|
|
||||||
</p>
|
|
||||||
<img
|
<img
|
||||||
src={boostsCarouselUrl}
|
src={boostsCarouselUrl}
|
||||||
alt="Screenshot of Boosts Carousel"
|
alt="Screenshot of Boosts Carousel"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<h4>Boosts Carousel</h4>
|
||||||
|
<p>
|
||||||
|
Visually separate original posts and re-shared posts (boosted
|
||||||
|
posts).
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h4>Nested comments thread</h4>
|
|
||||||
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
|
|
||||||
<img
|
<img
|
||||||
src={nestedCommentsThreadUrl}
|
src={nestedCommentsThreadUrl}
|
||||||
alt="Screenshot of nested comments thread"
|
alt="Screenshot of nested comments thread"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<h4>Nested comments thread</h4>
|
||||||
|
<p>Effortlessly follow conversations. Semi-collapsible replies.</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h4>Grouped notifications</h4>
|
|
||||||
<p>
|
|
||||||
Similar notifications are grouped and collapsed to reduce clutter.
|
|
||||||
</p>
|
|
||||||
<img
|
<img
|
||||||
src={groupedNotificationsUrl}
|
src={groupedNotificationsUrl}
|
||||||
alt="Screenshot of grouped notifications"
|
alt="Screenshot of grouped notifications"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<h4>Grouped notifications</h4>
|
||||||
|
<p>
|
||||||
|
Similar notifications are grouped and collapsed to reduce clutter.
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<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
|
<img
|
||||||
src={multiColumnUrl}
|
src={multiColumnUrl}
|
||||||
alt="Screenshot of multi-column UI"
|
alt="Screenshot of multi-column UI"
|
||||||
loading="lazy"
|
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>
|
||||||
<section>
|
<section>
|
||||||
<h4>Multi-hashtag timeline</h4>
|
|
||||||
<p>Up to 5 hashtags combined into a single timeline.</p>
|
|
||||||
<img
|
<img
|
||||||
src={multiHashtagTimelineUrl}
|
src={multiHashtagTimelineUrl}
|
||||||
alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
|
alt="Screenshot of multi-hashtag timeline with a form to add more hashtags"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
|
<h4>Multi-hashtag timeline</h4>
|
||||||
|
<p>Up to 5 hashtags combined into a single timeline.</p>
|
||||||
</section>
|
</section>
|
||||||
<p>Convinced yet?</p>
|
|
||||||
<p>
|
|
||||||
<big>
|
|
||||||
<b>
|
|
||||||
<Link to="/login" class="button">
|
|
||||||
Log in
|
|
||||||
</Link>
|
|
||||||
</b>
|
|
||||||
</big>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<p>
|
<p>
|
||||||
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue