From 6e7dd77a24fa3c279353a617cf3f9ed577ca3a80 Mon Sep 17 00:00:00 2001 From: Kiwi Date: Mon, 15 Jan 2024 13:54:43 -0500 Subject: [PATCH] Try fixing older ios devices (#45) * Try removing nests for older browsers * Try changing more * trying more * try fixing * Try adjusting more * Fix --- src/components/Blog.css | 16 ++++++--- src/components/Browse.css | 16 ++++++--- src/components/Community.css | 48 +++++++++++++++++---------- src/components/Community.tsx | 10 +++--- src/components/Derivatives.css | 26 ++++++++++----- src/components/Header.css | 20 ++++++++---- src/components/Hero.css | 4 ++- src/components/HeroBanners.css | 60 ++++++++++++++++++++++------------ src/components/HeroContent.css | 14 +++++--- src/components/Team.css | 32 +++++++++++++----- src/components/Why.css | 38 +++++++++++++++------ src/components/Why.tsx | 11 +++---- src/pages/derivatives.astro | 7 ++-- src/pages/gallery.astro | 7 ++-- 14 files changed, 208 insertions(+), 101 deletions(-) diff --git a/src/components/Blog.css b/src/components/Blog.css index 08761b1..a2fe082 100644 --- a/src/components/Blog.css +++ b/src/components/Blog.css @@ -5,8 +5,10 @@ display: flex; flex-direction: column; align-items: center; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .blog { padding: 6.4rem 2.4rem; } } @@ -16,8 +18,10 @@ font-size: 6.4rem; font-weight: 800; margin-bottom: 6.5rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .blog-header { font-size: 4.8rem; margin-bottom: 4.8rem; } @@ -31,8 +35,10 @@ width: 100%; max-width: 130rem; margin-bottom: 6.4rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .blog-posts { grid-template-columns: 1fr; grid-row-gap: 3.2rem; } @@ -65,8 +71,10 @@ flex: 1; border-bottom-right-radius: 2.4rem; border-bottom-left-radius: 2.4rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .blog-post-content { padding: 2.4rem; } } diff --git a/src/components/Browse.css b/src/components/Browse.css index 5ec7329..eaefc30 100644 --- a/src/components/Browse.css +++ b/src/components/Browse.css @@ -24,8 +24,10 @@ justify-content: flex-end; flex-direction: column; overflow: hidden; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .browse-content { padding: 4rem 2.4rem; } } @@ -47,8 +49,10 @@ background: rgba(255, 255, 255, 0.5); border-radius: 50%; filter: blur(200px); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .browse-highlight { left: 0; width: 100%; } @@ -62,8 +66,10 @@ letter-spacing: -0.088rem; margin-bottom: 2.4rem; max-width: 81.4rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .browse-header { font-size: 4.8rem; margin-bottom: 3.2rem; max-width: none; @@ -77,8 +83,10 @@ .browse-image { width: 100%; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .browse-image { transform: scale(2.5); transform-origin: top center; } diff --git a/src/components/Community.css b/src/components/Community.css index acea9b5..9a61a4c 100644 --- a/src/components/Community.css +++ b/src/components/Community.css @@ -9,8 +9,10 @@ align-items: center; justify-content: space-between; padding: 3rem 8rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community { padding: 6rem 0; } } @@ -52,8 +54,8 @@ ); } -.community-top-buffer { - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-top-buffer { display: none; } } @@ -64,19 +66,23 @@ display: flex; flex-direction: column; align-items: center; - padding-top: 10vh; + padding-top: 6vh; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-content { padding-bottom: 0px; } } .community-content-image { width: 25rem; - margin-bottom: 5rem; + margin-bottom: 1rem; +} - @media (max-width: 900px) { - width: 9.5; +@media (max-width: 900px) { + .community-content-image { + width: 16rem; } } @@ -87,23 +93,27 @@ width: 60rem; text-align: center; line-height: 100%; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-content-header { font-size: 4.8rem; - max-width: 90%; + width: 100%; } } .community-footer { position: absolute; bottom: 25px; - padding: 0 8rem; + padding: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-footer { flex-direction: column; } } @@ -111,8 +121,10 @@ .community-footer-text { font-size: 2rem; font-weight: 600; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-footer-text { margin-bottom: 0.6rem; } } @@ -151,12 +163,13 @@ border-radius: 50%; box-shadow: 0px 8px 24px 0px rgba(140, 213, 230, 0.5), 0px 12px 72px 0px rgba(140, 213, 230, 0.8); - transform: scale(0); transition: all 0.5s ease-in-out; overflow: hidden; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-desktop-uwu-container { display: none; } } @@ -167,12 +180,13 @@ border-radius: 50%; box-shadow: 0px 8px 24px 0px rgba(140, 213, 230, 0.5), 0px 12px 72px 0px rgba(140, 213, 230, 0.8); - transform: scale(0); transition: all 0.5s ease-in-out; overflow: hidden; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .community-mobile-uwu-container { display: block; } } diff --git a/src/components/Community.tsx b/src/components/Community.tsx index 5e2c232..8e61b53 100644 --- a/src/components/Community.tsx +++ b/src/components/Community.tsx @@ -122,19 +122,19 @@ const uwus: UwuType[] = [ const mobileUwus: UwuType[] = [ { - top: 0.3, - side: -0.05, + top: 0.1, + side: 0, size: 0.13, }, { - top: 0.63, + top: 0.60, side: 0, - size: 0.06, + size: 0.1, }, { top: 0.76, side: 0.02, - size: 0.07, + size: 0.09, }, ]; diff --git a/src/components/Derivatives.css b/src/components/Derivatives.css index 4ac54d0..f2f304b 100644 --- a/src/components/Derivatives.css +++ b/src/components/Derivatives.css @@ -33,8 +33,10 @@ margin: 0 auto; margin-bottom: 2rem; text-align: center; +} - @media (max-width: 720px) { +@media (max-width: 720px) { + .derivatives-count { margin-bottom: 1rem; } } @@ -46,8 +48,10 @@ width: 40vw; margin: auto; margin-top: 4rem; +} - @media (max-width: 800px) { +@media (max-width: 800px) { + .derivatives-grid { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%; } @@ -58,8 +62,10 @@ flex-direction: column; align-items: center; margin-bottom: 3rem; +} - @media (max-width: 720px) { +@media (max-width: 720px) { + .derivatives-filters { flex-direction: column; margin-bottom: 1rem; } @@ -69,8 +75,10 @@ display: flex; align-items: center; width: 100%; +} - @media (max-width: 720px) { +@media (max-width: 720px) { + .derivatives-filter { margin: 0.6rem 0; } } @@ -124,12 +132,12 @@ cursor: pointer; margin-right: 2rem; width: 100%; - -moz-appearance: textfield; - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - display: none; - } +} + +.derivatives-input::-webkit-outer-spin-button, +.derivatives-input::-webkit-inner-spin-button { + display: none; } .derivatives-images { diff --git a/src/components/Header.css b/src/components/Header.css index 05cd48a..2ff8706 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -4,8 +4,10 @@ display: flex; align-items: center; justify-content: space-between; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .header { padding: 1.6rem 2.4rem; } } @@ -18,8 +20,10 @@ .logo { height: 5rem; margin-right: 1.6rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .logo { height: 3.2rem; } } @@ -27,8 +31,10 @@ .nav-items { display: flex; align-items: center; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .nav-items { display: none; } } @@ -45,16 +51,18 @@ transform: scale(1.05); } -.header-buy-on-opensea { - @media (max-width: 900px) { +@media (max-width: 900px) { + .header-buy-on-opensea { display: none; } } .header-hamburger { display: none; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .header-hamburger { display: flex; } } diff --git a/src/components/Hero.css b/src/components/Hero.css index 84d27cc..a4a1f44 100644 --- a/src/components/Hero.css +++ b/src/components/Hero.css @@ -10,8 +10,10 @@ #fcfdff 88.02%, #f5dce8 100% ); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .hero { height: auto; } } diff --git a/src/components/HeroBanners.css b/src/components/HeroBanners.css index e60e64e..dddcd4e 100644 --- a/src/components/HeroBanners.css +++ b/src/components/HeroBanners.css @@ -4,8 +4,10 @@ flex-direction: column; padding-top: 4.6dvh; overflow: hidden; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .hero-banners { padding-top: 1.6rem; } } @@ -23,19 +25,20 @@ width: calc(((100dvh - 369px) * 0.4 + 2.4rem) * 40); display: flex; margin-bottom: 2.4rem; - animation: slide-right 90s linear infinite; - - @media (max-width: 900px) { - width: calc((17rem + 1.6rem) * 40); - margin-bottom: 1.6rem; - } } .banner-top:hover { animation-play-state: paused; } +@media (max-width: 900px) { + .banner-top { + width: calc((17rem + 1.6rem) * 40); + margin-bottom: 1.6rem; + } +} + @keyframes slide-left { from { transform: translateX(0); @@ -49,45 +52,60 @@ width: calc(((100dvh - 369px) * 0.4 + 2.4rem) * 40); display: flex; margin-bottom: 2.4rem; - animation: slide-left 90s linear infinite; - - @media (max-width: 900px) { - width: calc((17rem + 1.6rem) * 40); - margin-bottom: 1.6rem; - } } .banner-bottom:hover { animation-play-state: paused; } +@media (max-width: 900px) { + .banner-bottom { + width: calc((17rem + 1.6rem) * 40); + margin-bottom: 1.6rem; + } +} + .uwu-container { height: calc((100dvh - 369px) * 0.4); width: calc((100dvh - 369px) * 0.4); margin: 0 1.2rem; overflow: hidden; border-radius: 2.4rem; - transform: scale(1); transition: transform 0.3s ease-in-out; - - @media (max-width: 900px) { - height: 17rem; - width: 17rem; - margin: 0 0.8rem; - } } .uwu-container:hover { transform: scale(1.15); z-index: 10; +} + - @media (max-width: 900px) { +@media (max-width: 900px) { + .uwu-container { + height: 16rem; + width: 16rem; + margin: 0 0.8rem; + } + + .uwu-container:hover { transform: scale(1.15); } } +@media (max-width: 700px) { + .uwu-container { + height: 12rem; + width: 12rem; + margin: 0 0.8rem; + } + + .uwu-container:hover { + transform: scale(1.2); + } +} + .uwu { height: 100%; width: 100%; diff --git a/src/components/HeroContent.css b/src/components/HeroContent.css index b6d51cd..3115515 100644 --- a/src/components/HeroContent.css +++ b/src/components/HeroContent.css @@ -12,11 +12,13 @@ display: flex; align-items: center; justify-content: space-evenly; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .hero-content { flex-direction: column; margin: 0 2.4rem; - margin-top: 2rem; + margin-top: 1rem; } } @@ -31,8 +33,10 @@ font-weight: 700; line-height: 4.2rem; max-width: 41.6rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .hero-content-header { font-size: 2.4rem; line-height: 3.1rem; margin-bottom: 2rem; @@ -42,8 +46,10 @@ .socials-container { display: flex; align-items: center; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .socials-container { display: none; } } diff --git a/src/components/Team.css b/src/components/Team.css index 65bacd8..e92b610 100644 --- a/src/components/Team.css +++ b/src/components/Team.css @@ -5,8 +5,10 @@ align-items: center; padding: 13rem 8rem; background: linear-gradient(203deg, #f4f5f6 0%, #a7e6f1 100%); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team { padding: 6.4rem 2.4rem; background: linear-gradient( 180deg, @@ -23,8 +25,10 @@ font-size: 6.4rem; font-weight: 800; margin-bottom: 6.5rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-header { font-size: 4.8rem; margin-bottom: 4.8rem; } @@ -37,8 +41,10 @@ grid-row-gap: 9rem; width: 100%; max-width: 130rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-members { grid-template-columns: 1fr 1fr; grid-column-gap: 1.6rem; grid-row-gap: 4.8rem; @@ -63,8 +69,10 @@ border-radius: 2.4rem; overflow: hidden; margin-bottom: 1.5rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-member-image-container { grid-template-columns: 1fr 1fr; grid-column-gap: 1.6rem; border-radius: 1.12rem; @@ -148,8 +156,10 @@ font-size: 2.4rem; font-weight: 700; margin-bottom: 1rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-member-name { font-size: 2rem; margin-bottom: 0.8rem; } @@ -159,8 +169,10 @@ font-size: 2rem; font-weight: 600; margin-bottom: 1rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-member-title { font-size: 1.6rem; margin-bottom: 1.2rem; } @@ -169,8 +181,10 @@ .team-member-socials { display: flex; grid-gap: 0.6rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-member-socials { grid-gap: 1rem; } } @@ -186,8 +200,10 @@ .team-member-social-image { height: 2.4rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .team-member-social-image { height: 2rem; } } diff --git a/src/components/Why.css b/src/components/Why.css index dac52db..c7dba54 100644 --- a/src/components/Why.css +++ b/src/components/Why.css @@ -5,8 +5,10 @@ left: 0; background: var(--main); overflow: hidden; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-fixed { display: none; } } @@ -34,8 +36,10 @@ transparent 50%, transparent 100% ); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-cover { display: none; } } @@ -73,8 +77,10 @@ width: 50%; transform: translateX(100%); padding: 14rem 10%; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-content { width: 100%; transform: none; background: #141414; @@ -87,8 +93,10 @@ font-weight: 800; margin-bottom: 2rem; color: var(--primary); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-header { text-align: center; font-size: 4.8rem; margin-bottom: 4.8rem; @@ -103,8 +111,10 @@ margin-bottom: 3rem; margin-top: 16rem; color: var(--bg); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-sub-header { max-width: none; font-size: 2.4rem; line-height: 3.1rem; @@ -121,8 +131,10 @@ margin-bottom: 3rem; margin-top: 18rem; color: var(--bg); +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-mid-sub-header { max-width: none; font-size: 2.4rem; line-height: 3.1rem; @@ -150,8 +162,10 @@ max-height: 40rem; object-fit: cover; object-position: top; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-image { display: block; } } @@ -183,8 +197,10 @@ line-height: 2.8rem; color: var(--bg); opacity: 0.6; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-text { max-width: none; line-height: 2.8rem; margin-bottom: 4.8rem; @@ -192,9 +208,11 @@ } .why-buffer { - height: 30rem; + height: 36rem; +} - @media (max-width: 900px) { +@media (max-width: 900px) { + .why-buffer { display: none; } } diff --git a/src/components/Why.tsx b/src/components/Why.tsx index 95f635d..ec9d6eb 100644 --- a/src/components/Why.tsx +++ b/src/components/Why.tsx @@ -8,14 +8,13 @@ import uwu2 from "../assets/why/02.jpg"; import uwu3 from "../assets/why/03.jpg"; import useFixedStyles from "../hooks/use-scroll-data"; -const images = [uwu1, uwu3]; -const imageCredits = ["Chungus1", "Chungus2", "Chungus3"]; +const imageCredits = ["@edaelec", "@KRY_Peach", "@tsuru_oden"]; const Why = () => { const containerRef = useRef(null); const { fixedStyles, percentScrolled } = useFixedStyles(containerRef); - let image = percentScrolled < 0.25 ? 0 : percentScrolled < 0.75 ? 1 : 2; + let image = percentScrolled < 0.3 ? 0 : percentScrolled < 0.75 ? 1 : 2; return (
@@ -45,7 +44,7 @@ const Why = () => {

Why uwucrew?!

uwu -
Chungus1
+
{imageCredits[0]}

Uniting the world, through art 🌏

@@ -54,7 +53,7 @@ const Why = () => {

uwu -
Chungus2
+
{imageCredits[1]}

Join The Anime Art Revolution! 🚀 @@ -65,7 +64,7 @@ const Why = () => {

uwu -
Chungus3
+
{imageCredits[2]}

Enter... the uwuminati 😎

diff --git a/src/pages/derivatives.astro b/src/pages/derivatives.astro index b249f08..04564bf 100644 --- a/src/pages/derivatives.astro +++ b/src/pages/derivatives.astro @@ -6,7 +6,7 @@ import DerivativesComponent from "../components/Derivatives";

-
+
@@ -17,7 +17,6 @@ import DerivativesComponent from "../components/Derivatives"; width: 100vw; height: 100dvh; overflow-x: hidden; - background: linear-gradient( 180deg, #f5dce8 0%, @@ -25,8 +24,10 @@ import DerivativesComponent from "../components/Derivatives"; #fcfdff 88.02%, #f5dce8 100% ); + } - @media (max-width: 900px) { + @media (max-width: 900px) { + main { height: auto; } } diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro index b249f08..04564bf 100644 --- a/src/pages/gallery.astro +++ b/src/pages/gallery.astro @@ -6,7 +6,7 @@ import DerivativesComponent from "../components/Derivatives";
-
+
@@ -17,7 +17,6 @@ import DerivativesComponent from "../components/Derivatives"; width: 100vw; height: 100dvh; overflow-x: hidden; - background: linear-gradient( 180deg, #f5dce8 0%, @@ -25,8 +24,10 @@ import DerivativesComponent from "../components/Derivatives"; #fcfdff 88.02%, #f5dce8 100% ); + } - @media (max-width: 900px) { + @media (max-width: 900px) { + main { height: auto; } }