Skip to content

Commit

Permalink
Worked on margin-based styling removal for responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZainGS
ZainGS committed Apr 13, 2024
1 parent b959efc commit 3e7cd81
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 17 deletions.
14 changes: 7 additions & 7 deletions ClientApp/src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
-->
</mat-sidenav>

<mat-sidenav-content class="base-sidenav-pattern" style="white-space: nowrap; overflow: hidden;">
<mat-sidenav-content class="base-sidenav-pattern" style="overflow: hidden;">

<!-- Background Video -->
<video #videoPlayer id="vid" autoplay muted loop onloadedmetadata="this.muted=true" preload="auto" class="bgVideo">
Expand Down Expand Up @@ -163,7 +163,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
<span class="shadow-text glow-anim sub-title-text" style="margin-left: 7vw;">POWERED BY // GAMESTOP</span>

</div>
<span class="faded-repeat-text" style="margin-left: 7vw; position: absolute; opacity: .2; font-size: 30px; margin-top: -48px;">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
<span class="faded-repeat-text" style="margin-left: 7vw; position: absolute; opacity: .2; font-size: 30px; margin-top: -48px; white-space: nowrap; ">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
</div>

<!-- SELECTED ITEMS CELL -->
Expand Down Expand Up @@ -298,7 +298,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
<!-- Tools -->
<div class="flex-item" style="align-content: end; text-align: -webkit-right; white-space: nowrap; overflow: hidden;">
<div style="position: absolute; left: 78%; top: 11vw; margin-top: 10px;">
<div class="randomizer-container">
<div class="randomizer-container-mobile">
<!-- Randomizer -->
<button class="mat-elevation-z1" (click)="randomize()" style="z-index: 100; max-width: 80px; max-height: 80px; width: 60px; height: 60px; transform: scale(.95); background-color: transparent; border: 5px solid rgba(255,255,255,.05); border-radius: 10px; backdrop-filter: blur(10px); ">
<img [@rotate-jump]="rotateJumpState" src="assets/dice.svg" alt="randomize icon" style="opacity: .6; margin-left: -6px; transform-origin: center;" width="50" />
Expand Down Expand Up @@ -358,15 +358,15 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
<div class="flex-container-mobile">
<!-- Row 0 -->
<!-- TITLE CELL -->
<div class="flex-item-mobile special-overflow" style="border-bottom: double 20px rgba(1,1,1,.1); margin-top: -10px; margin-left: -10px;">
<div class="flex-item-mobile special-overflow" style="border-bottom: double 20px rgba(1,1,1,.1); margin-top: -10px; ">
<div class="noselect nodrag title-container-mobile">
<span class="glow" style="color: #FF0095; font-weight:500; white-space:nowrap;">CANDY CON LAB</span>
</div>
<div class="noselect nodrag sub-title-container-mobile">
<span class="shadow-text glow-anim-mobile sub-title-text" style="margin-left: 7vw;">BUILD YOUR CONTROLLER</span>

</div>
<span class="faded-repeat-text" style="margin-left: 7vw; position: absolute; opacity: .2; font-size: 30px; margin-top: -48px;">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
<span class="faded-repeat-text" style="position: absolute; opacity: .2; font-size: 30px; margin-top: -48px;">CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT. CREATE. PLAY. REPEAT.</span>
</div>

<!-- SELECTED ITEMS CELL -->
Expand Down Expand Up @@ -472,7 +472,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
</div>

<!-- CONTROLLER AND BRANDING-->
<div class="flex-item-mobile" style="align-content: center; margin-top: 8vh;">
<div class="flex-item-mobile" style="align-content: center;">
<div class="controller-container-mobile">
<div class="floating-anim">

Expand Down Expand Up @@ -505,7 +505,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>

<!-- CANDY CON Branding: Logo + Slogan -->
<div class="submit-box-mobile">
<button (click)="lockedIn()" class="lockin-button-text"
<button (click)="lockedIn()" class="lockin-button-text-mobile"
[ngStyle]="{'color' : selectedCount === 4 ? 'deeppink' : 'white',
'opacity' : selectedCount=== 4 ? '1' : '.5'}">
LOCK IN
Expand Down
29 changes: 19 additions & 10 deletions ClientApp/src/app/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -896,17 +896,14 @@ margin-top: 40vh;
text-shadow: none;
white-space: nowrap;
overflow: hidden;
max-width: 322px;
font-size: 30px;
margin-left: 60px;
margin-top: 10px;
}

sub-title-container-mobile {
margin-top: -10px;
margin-bottom: 6px;
text-align: start;
margin-left: 60px;
}

.selection-container-mobile {
Expand All @@ -933,10 +930,10 @@ sub-title-container-mobile {
align-content: center;
text-align: center;
backdrop-filter: blur(10px);
min-width: 50px;
min-height: 50px;
max-width: 7vw;
max-height: 7vw;
min-width: 8vw;
min-height: 8vw;
max-width: 8vw;
max-height: 8vw;
width: 100%;
}

Expand Down Expand Up @@ -1032,6 +1029,15 @@ sub-title-container-mobile {
margin-right: 10vh;
}

.lockin-button-text-mobile {
font-size: 100px !important;
text-shadow: 4px 4px 2px rgba(255, 0, 157, 1);
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 100;
border: none;
background-color: transparent;
}

@media (width: 390px) and (height: 844px) {

.versioning {
Expand Down Expand Up @@ -1062,12 +1068,12 @@ sub-title-container-mobile {
.candycon-logo {
margin-top: 100px;
width: 100px;
margin-right: 85px;
margin-right: 3vh;
}

.candycon-slogan {
margin-top: -20px !important;
margin-right: 85px;
margin-right: 3vh;
display: inherit;
transform: scale(.7);
}
Expand Down Expand Up @@ -1113,7 +1119,10 @@ sub-title-container-mobile {
}

.randomizer-container {
margin-left: -380px;
transform: scale(.7);
}

.randomizer-container-mobile {
margin-top: 150px;
transform: scale(.7);
}
Expand Down

0 comments on commit 3e7cd81

Please sign in to comment.