fix: fix styling issues

ucsddesignco · Jun 2, 2024 · ba9bb38 · ba9bb38
1 parent f9d01c1
commit ba9bb38
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 10 deletions.
diff --git a/src/app/components/DesktopFruits/DesktopFruits.scss b/src/app/components/DesktopFruits/DesktopFruits.scss
@@ -7,10 +7,13 @@
   z-index: 0;
   pointer-events: none;
   overflow-x: hidden;
+  display: none;
 
-  .fruits-theme-section {
-    display: none;
+  @media (min-width: $tablet-breakpoint) {
+    display: block;
+  }
 
+  .fruits-theme-section {
     @media (min-width: $tablet-breakpoint) {
       display: block;
       position: relative;
@@ -65,7 +68,7 @@
       z-index: 0;
 
       .apricot {
-        transform: rotate(-10deg);
+        transform: rotate(-10deg) translateX(20%);
 
         &#desktop-apricot-1 {
           height: 15%;

diff --git a/src/app/components/Fruits/Fruits.scss b/src/app/components/Fruits/Fruits.scss
@@ -2,7 +2,7 @@
   svg {
     display: none;
   }
-  height: min(60dvh, 380px);
+  height: min(60dvh, 340px);
   width: calc(80dvw - 2 * $main-padding-mobile-inline);
   margin-inline: auto;
   margin-block: 2.5dvh;

diff --git a/src/app/components/Overview/Squash/Squash.scss b/src/app/components/Overview/Squash/Squash.scss
@@ -18,7 +18,7 @@
     transform: rotate(0deg);
     right: 0;
     left: 0;
-    bottom: -10%;
+    bottom: 0%;
   }
 
   @media (min-width: 1250px) {

diff --git a/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss b/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss
@@ -51,6 +51,7 @@
 
     .non-profit {
       a {
+        font-size: $p-size;
         text-decoration: none;
         font-family: $p-font;
         outline: none;

diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -33,7 +33,7 @@
 
   .dots {
     width: 100%;
-    padding: 10px 0;
+    padding: 20px 0;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -1,13 +1,12 @@
 #landing {
-  height: 100dvh;
   h1,
   h3 {
     text-transform: uppercase;
     text-wrap: nowrap;
   }
 
   h1 {
-    font-size: calc($h1-size + 2vw);
+    font-size: clamp(28px, calc(24px + 0.5vw), 44px);
     margin-block-end: calc($p-size * 0.5);
   }
 

diff --git a/src/app/pages/Landing/Landing.tsx b/src/app/pages/Landing/Landing.tsx
@@ -41,7 +41,7 @@ export default function Landing({ landingRef }: LandingProps) {
         <h1>up-grade 2024</h1>
         <p>UCSD Design Co</p>
         <p>San Diego, CA</p>
-        <h3>July 1st to September 6th</h3>
+        <h3>July 1st to Sept 6th</h3>
       </div>
       <p className="breadcrumb">.01 / Home</p>
 

diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
@@ -20,7 +20,7 @@ $nav-width: clamp(250px, 200px + 11vw, 470px);
 
 // Spacing
 $main-padding-mobile-block: clamp(20px, 30px + 1.2vw, 40px);
-$main-padding-mobile-inline: clamp(20px, 12px + 5vw, 40px);
+$main-padding-mobile-inline: clamp(20px, 18px + 5vw, 40px);
 $main-padding-desktop-block: clamp(40px, 22px + 1.7vw, 70px);
 $main-padding-desktop-inline: clamp(40px, 22px + 1.7vw, 70px);