Skip to content

Commit

Permalink
feat: landing page responsiveness (#97)
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinWu098 authored Apr 9, 2024
1 parent 185ccfc commit b34c2bb
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
& > .hero {
height: 100vh;
width: 100%;
background-color: black;
background-color: var(--des24-cream);
display: grid;
overflow: hidden;
place-content: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ const Splash = memo(() => {

<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />

<div className={cn.info}>
<SplashLogo ref={logoRef} className={cn.logo} />

<div className={clsx(cn.info, "wait")}>
<div className={cn.time}>
May 17th 6:30 PM - May 19th 4:30 PM
</div>
Expand All @@ -73,7 +75,6 @@ const Splash = memo(() => {
</div>
</div>
</div>
<SplashLogo ref={logoRef} className={cn.logo} />
</div>
);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@

.logo {
position: relative;
max-width: max(50vw, 360px);
max-width: max(70vw, 360px);
margin: 0 auto;
padding-bottom: 60%;
padding-bottom: 40%;

@media screen and (min-width: 800px) {
padding-bottom: 40%;
@media screen and (min-width: 1024px) {
max-width: max(60vw, 360px);
}

@media screen and (min-width: 1280px) {
max-width: max(45vw, 360px);
}

path {
Expand Down Expand Up @@ -42,11 +46,11 @@
z-index: 110;

.time {
font-size: min(4vw, 40px);
font-size: min(7vw, 40px);
grid-column: 1/3;
font-family: "Gluten", cursive;
font-weight: 600;
margin-bottom: 24px;
margin: 0 2rem 24px;
}

.wrapper {
Expand Down Expand Up @@ -125,19 +129,28 @@
top: 0;
left: 0;

max-width: 40%;
max-width: 60%;

@media screen and (min-width: 475px) {
max-width: 50%;
}

@media screen and (min-width: 640px) {
max-width: 25%;
}

@media screen and (min-width: 800px) {
@media screen and (min-width: 1024px) {
max-width: 20%;
}
}

.butterfly {
top: 55%;
bottom: 30%;
left: 0;

@media screen and (min-width: 800px) {
@media screen and (min-width: 1024px) {
top: 30%;
max-width: 25%;
}
}

Expand All @@ -149,13 +162,18 @@
.mr_cloud_stars {
top: unset;
bottom: 35%;

right: 0;
max-width: 40%;
max-width: 33.5%;

@media screen and (min-width: 800px) {
top: 20%;
@media screen and (min-width: 640px) {
bottom: 35%;
max-width: 20%;
}

@media screen and (min-width: 1024px) {
top: 20%;
}
}

.br_star_stripe {
Expand Down

0 comments on commit b34c2bb

Please sign in to comment.