Merge branch 'main' of github.com:uwu-labs/uwucrew-site-v2 into main

uwu-labs · Jan 15, 2024 · 4adcd0c · 4adcd0c
2 parents 36446ea + 6e7dd77
commit 4adcd0c
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 100 deletions.
diff --git 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
@@ -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
@@ -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,32 +93,38 @@
   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;
   }
 }
 
 .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
@@ -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
@@ -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
@@ -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,17 +20,21 @@
 .logo {
   height: 5rem;
   margin-right: 1.6rem;
+}
 
-  @media (max-width: 900px) {
+@media (max-width: 900px) {
+  .logo {
     height: 3.2rem;
   }
 }
 
 .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
@@ -10,8 +10,10 @@
     #fcfdff 88.02%,
     #f5dce8 100%
   );
+}
 
-  @media (max-width: 900px) {
+@media (max-width: 900px) {
+  .hero {
     height: auto;
   }
 }