Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Respect reduced motion #10

Closed
wants to merge 4 commits into from
Closed

Respect reduced motion #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
568ecff
WIP: main page tweaks
lo2dev Feb 12, 2025
8d7e3d7
Make h1 font size react to viewport size
lo2dev Feb 21, 2025
f17e3e7
Add color & basic animation to the hero logo
lo2dev Feb 21, 2025
6540b84
Respect reduced motion
lo2dev Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/components/HeaderBar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const { variant, isFilled } = Astro.props;
aria-label="Page Header"
>
<a href="/" aria-label="Go back home">
<Icon id="logo" size={24} fill="currentColor" name="logo/mc" />
<Icon id="logo" size={36} fill="currentColor" name="logo/mc" />
<Icon
fill="hsl(var(--accent-hue), 100%, 95%);"
size={96}
Expand All @@ -26,28 +26,28 @@ const { variant, isFilled } = Astro.props;
<a class="fedi" href="https://lea.pet/@upryzing" aria-label="Upryzing's Fediverse account">
<Icon
fill="hsl(var(--accent-hue), 100%, 95%);"
size={24}
size={36}
name="ph:fediverse-logo"
/>
</a>
<a class="bluesky" href="https://bsky.app/profile/upryzing.app" aria-label="Upryzing's Bluesky account">
<Icon
fill="hsl(var(--accent-hue), 100%, 95%);"
size={24}
size={36}
name="ph:butterfly"
/>
</a>
<a class="github" href="https://github.com/upryzing" aria-label="Upryzing's GitHub organisation">
<Icon
fill="hsl(var(--accent-hue), 100%, 95%);"
size={24}
size={36}
name="ph:github-logo"
/>
</a>
<a class="discord" href="https://discord.gg/Zst96h5ABV" aria-label="Upryzing's Discord server">
<Icon
fill="hsl(var(--accent-hue), 100%, 95%);"
size={24}
size={36}
name="ph:discord-logo"
/>
</a>
Expand All @@ -61,7 +61,8 @@ const { variant, isFilled } = Astro.props;
position: absolute;
top: 0;
left: 0;
padding: 10px;
padding: 2rem;
padding-top: 3rem;

width: 100%;
height: 4rem;
Expand Down
125 changes: 81 additions & 44 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,35 @@ import TBDPlaceholder from "../../public/assets/tbd_placeholder.webp";
role="presentation"
/>
</div>
<div class="slogan">
<h1>Your conversations,<br />your way.</h1>
</div>
<div class="buttons">
<a href="https://cloud.disroot.org/apps/forms/s/FM44AkPn9wdHgXM2DPj3oTHY"
><button id="signup" class="ripple"
>Sign up for early access <Icon
name="material-symbols:arrow-forward"
/></button
></a
>
<!-- TODO: uncomment after launch
<a href="#"
><button id="login" class="ripple"
>Log in <Icon
name="material-symbols:arrow-forward"
/></button
></a
>
-->
<div class="hero-container">
<div class="slogan-container">
<Icon id="logo" class="hero-logo narrow" size={128} fill="currentColor" name="logo/mc" />
<div class="slogan">
<h1>Your conversations,<br />your way.</h1>
</div>
<div class="buttons">
<a href="https://cloud.disroot.org/apps/forms/s/FM44AkPn9wdHgXM2DPj3oTHY"
><button id="signup" class="ripple"
>Sign up for early access <Icon
name="material-symbols:arrow-forward"
/></button
></a
>
<!-- TODO: uncomment after launch
<a href="#"
><button id="login" class="ripple"
>Log in <Icon
name="material-symbols:arrow-forward"
/></button
></a
>
-->
</div>
</div>

<Icon id="logo" class="hero-logo wide" size={256} fill="currentColor" name="logo/mc" />
</div>

</section>
<!-- TODO: rewrite as needed, get actual images
<FeatureSection
Expand Down Expand Up @@ -92,13 +100,37 @@ import TBDPlaceholder from "../../public/assets/tbd_placeholder.webp";
border-radius: 25px 25px 0 0;
}

.hero-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.slogan > h1 {
font-size: 5em;
font-size: 6vmin;
margin: unset;

white-space: nowrap;
}

.slogan-container {
display: flex;
gap: 2rem;
flex-direction: column;
}

.hero-logo {
color: var(--accent);
}

.hero-logo.narrow {
display: none;
}

.hero-logo.wide {
margin-right: 15vw;

transition: font-size 0.5s cubic-bezier(0.44, -0.2, 0.23, 1.11);
animation: float 3s ease-in-out alternate infinite;
}

section#tag div.buttons {
Expand Down Expand Up @@ -194,15 +226,16 @@ import TBDPlaceholder from "../../public/assets/tbd_placeholder.webp";
width: 100%;
height: 100vh;

padding-left: 2rem;
padding-left: 8%;
padding-right: 8%;
gap: 2rem;

transition: all 500ms ease-in-out;
overflow: visible;
}

.thingy {
--size: 400px;
--size: 780px;
--timing: 50s;
display: block;
width: var(--size);
Expand Down Expand Up @@ -242,13 +275,19 @@ import TBDPlaceholder from "../../public/assets/tbd_placeholder.webp";
animation-direction: normal;
}

@media screen and (max-width: 802px) {
.slogan > h1 {
font-size: 4em;
@media screen and (max-width: 1600px) {
.hero-logo.wide {
display: none;
}

.hero-logo.narrow {
display: block;
}
}

@media screen and (max-width: 870px) {
.thingy {
--size: 256px;
--size: 500px;
--timing: 30s;
}

Expand All @@ -264,39 +303,37 @@ import TBDPlaceholder from "../../public/assets/tbd_placeholder.webp";
font-size: 1em;
}
}
@media screen and (max-width: 650px) {
.slogan > h1 {
font-size: 3em;
}

@media screen and (max-width: 690px) {
section#tag div.buttons button {
font-size: 1em;
}
}

@media screen and (max-width: 490px) {
.slogan > h1 {
font-size: 2.5em;
}

section#tag div.buttons button {
font-size: 1em;
}
}

@media screen and (max-width: 490px) {
.slogan > h1 {
font-size: 2.5em;
}

section#tag div.buttons button {
font-size: 1em;
}
}

@media screen and (max-width: 425px) {
.slogan > h1 {
font-size: 2em;
@media (prefers-reduced-motion: reduce) {
.thingy {
animation-play-state: paused;
transition: none;
}
}

@keyframes float {
from {
transform: translatey(0px);
}
to {
transform: translatey(-25px);
}
}

Expand Down