mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-02-25 09:18:51 +01:00
Slight relayout for Welcome page
This commit is contained in:
Lim Chee Aun
parent
90df455d6e
commit
180466160b
2 changed files with 194 additions and 145 deletions
|
|
@ -1,40 +1,3 @@
|
||||||
#welcome {
|
|
||||||
text-align: center;
|
|
||||||
background-image: radial-gradient(
|
|
||||||
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 .hero-container {
|
|
||||||
padding-block: 60px;
|
|
||||||
height: 100vh;
|
|
||||||
height: 100svh;
|
|
||||||
max-height: 800px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
#welcome h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
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 {
|
@keyframes shine2 {
|
||||||
0% {
|
0% {
|
||||||
left: -100%;
|
left: -100%;
|
||||||
|
|
@ -46,92 +9,176 @@
|
||||||
left: 100%;
|
left: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#welcome h1:before {
|
|
||||||
content: '';
|
#welcome {
|
||||||
position: absolute;
|
text-align: center;
|
||||||
z-index: 2;
|
background-image: radial-gradient(
|
||||||
width: 100%;
|
circle at center,
|
||||||
height: 100%;
|
var(--bg-color),
|
||||||
background-image: linear-gradient(
|
transparent 16em
|
||||||
100deg,
|
),
|
||||||
rgba(255, 255, 255, 0) 30%,
|
radial-gradient(circle at center, var(--bg-color), transparent 8em);
|
||||||
rgba(255, 255, 255, 0.4),
|
background-repeat: no-repeat;
|
||||||
rgba(255, 255, 255, 0) 70%
|
background-attachment: fixed;
|
||||||
);
|
cursor: default;
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
@media (prefers-color-scheme: dark) {
|
||||||
pointer-events: none;
|
|
||||||
animation: shine2 5s ease-in-out 1s infinite;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
#welcome {
|
|
||||||
background-image: none;
|
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 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));
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
#welcome h1 img {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#welcome h1:hover img {
|
.hero-container {
|
||||||
transform: scale(1.05);
|
padding: 16px;
|
||||||
}
|
height: 100vh;
|
||||||
#welcome .desc {
|
height: 100svh;
|
||||||
font-size: 1.4em;
|
max-height: 800px;
|
||||||
text-wrap: balance;
|
display: flex;
|
||||||
opacity: 0.7;
|
flex-direction: column;
|
||||||
}
|
|
||||||
#welcome .hero-container > p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#why-container .sections {
|
a {
|
||||||
padding-inline: 16px;
|
color: inherit;
|
||||||
}
|
|
||||||
#why-container .sections section {
|
&:hover {
|
||||||
text-align: start;
|
color: var(--link-text-color);
|
||||||
max-width: 480px;
|
}
|
||||||
background-color: var(--bg-color);
|
}
|
||||||
border-radius: 16px;
|
}
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 17px 20px 40px var(--drop-shadow-color);
|
h1 {
|
||||||
margin-bottom: 48px;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
#why-container .sections section h4 {
|
font-size: 5em;
|
||||||
margin: 0;
|
line-height: 1;
|
||||||
padding: 30px 30px 0;
|
letter-spacing: -1px;
|
||||||
font-size: 1.4em;
|
flex-grow: 1;
|
||||||
font-weight: 600;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
#why-container .sections section p {
|
justify-content: center;
|
||||||
margin-inline: 30px;
|
align-items: center;
|
||||||
margin-bottom: 30px;
|
position: relative;
|
||||||
opacity: 0.7;
|
mix-blend-mode: multiply;
|
||||||
text-wrap: balance;
|
|
||||||
}
|
@media (prefers-color-scheme: dark) {
|
||||||
#why-container .sections section img {
|
mix-blend-mode: normal;
|
||||||
width: 100%;
|
}
|
||||||
height: auto;
|
|
||||||
border-bottom: 1px solid var(--outline-color);
|
&:before {
|
||||||
}
|
content: '';
|
||||||
@media (prefers-color-scheme: dark) {
|
position: absolute;
|
||||||
#why-container .sections section img {
|
z-index: 2;
|
||||||
filter: invert(0.85) hue-rotate(180deg);
|
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) {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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));
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: top;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 1.4em;
|
||||||
|
text-wrap: balance;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-container > p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#why-container {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sections {
|
||||||
|
padding-inline: 16px;
|
||||||
|
|
||||||
|
section {
|
||||||
|
text-align: start;
|
||||||
|
max-width: 480px;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 17px 20px 40px var(--drop-shadow-color);
|
||||||
|
margin-bottom: 48px;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 30px 30px 0;
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-inline: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
opacity: 0.7;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-bottom: 1px solid var(--outline-color);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
filter: invert(0.85) hue-rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width > 40em) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100svh;
|
||||||
|
|
||||||
|
.hero-container {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#why-container {
|
||||||
|
padding: 32px;
|
||||||
|
overflow: auto;
|
||||||
|
mask-image: linear-gradient(to top, transparent 16px, black 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& ~ :is(#compose-button, #shortcuts) {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -98,31 +98,33 @@ function Welcome() {
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<footer>
|
||||||
<p>
|
<hr />
|
||||||
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
<p>
|
||||||
Built
|
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||||
</a>{' '}
|
Built
|
||||||
by{' '}
|
</a>{' '}
|
||||||
<a
|
by{' '}
|
||||||
href="https://mastodon.social/@cheeaun"
|
<a
|
||||||
target="_blank"
|
href="https://mastodon.social/@cheeaun"
|
||||||
onClick={(e) => {
|
target="_blank"
|
||||||
e.preventDefault();
|
onClick={(e) => {
|
||||||
states.showAccount = 'cheeaun@mastodon.social';
|
e.preventDefault();
|
||||||
}}
|
states.showAccount = 'cheeaun@mastodon.social';
|
||||||
>
|
}}
|
||||||
@cheeaun
|
>
|
||||||
</a>
|
@cheeaun
|
||||||
.{' '}
|
</a>
|
||||||
<a
|
.{' '}
|
||||||
href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
|
<a
|
||||||
target="_blank"
|
href="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
|
||||||
>
|
target="_blank"
|
||||||
Privacy Policy
|
>
|
||||||
</a>
|
Privacy Policy
|
||||||
.
|
</a>
|
||||||
</p>
|
.
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue