style pages and make them responsive

Co-authored-by: Steve Smodish <[email protected]>
grammerjam · Dec 18, 2024 · 003dde4 · 003dde4
1 parent 85b2f8d
commit 003dde4
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 29 deletions.
diff --git a/base-client/src/app/app.component.scss b/base-client/src/app/app.component.scss
@@ -13,25 +13,30 @@ main {
 
 .layout {
   display: grid;
+  grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr;
+  justify-items: center;
   gap: 0;
 
   @media (min-width: $breakpoint-desktop) {
     grid-template-rows: 1fr;
     grid-template-columns: 121px 1fr;
+    justify-items: start;
+    gap: 25px;
   }
 }
 
 .content-container {
-  margin-left: 16px;
   margin-top: 24px;
+  max-width: calc(100vw - 32px);
 
-  @media (min-width: $breakpoint-tablet) {
-    margin-left: 25px;
+  @media (min-width: $breakpoint-tablet) {    
     margin-top: 33px;
+    max-width: calc(100vw - 50px);
   }
 
   @media (min-width: $breakpoint-desktop) {
     margin-top: 64px;
+    max-width: calc(100vw - 191px);
   }
 }
diff --git a/base-client/src/app/components/navbar/navbar.component.html b/base-client/src/app/components/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <div class="nav-bar">
   <div class="nav-container">
     <img class="logo" src="./assets/logo.svg" alt="Logo">
-    <nav class="app-navbar">
+    <nav class="navbar-icons">
       <a [routerLink]="['/']" routerLinkActive="active" ariaCurrentWhenActive="page"><img
           class="navbar-icon" src="./assets/icon-nav-home.svg"></a>
       <a [routerLink]="['/movies']" routerLinkActive="active" ariaCurrentWhenActive="page"><img

diff --git a/base-client/src/app/components/navbar/navbar.component.scss b/base-client/src/app/components/navbar/navbar.component.scss
@@ -50,7 +50,7 @@
     }
   }
 
-  .app-navbar {
+  .navbar-icons {
     display: flex;
     align-content: center;
     justify-content: center;

diff --git a/base-client/src/app/components/regular-section/regular-section.component.scss b/base-client/src/app/components/regular-section/regular-section.component.scss
@@ -2,42 +2,35 @@
 @import "../styles/globals";
 
 .regular-section {
+  margin-bottom: 40px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  max-width: calc(100vw - 32px);
-  overflow: scroll;
-  margin-bottom: 24px;
-
-  @media (min-width: $breakpoint-tablet) {
-    max-width: calc(100vw - 50px);
-  }
-
-  @media (min-width: $breakpoint-desktop) {
-    max-width: calc(100vw - 171px);
-  }
+  justify-items: center;
 }
 
 .regular-selection-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 16px 15px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  justify-content: center;
+  gap: 14px;
+  max-width: calc(100vw - 32px);
 
   @media (min-width: $breakpoint-tablet) {
-    gap: 24px 29px;
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+    gap: 30px;
+    max-width: calc(100vw - 50px);
   }
 
-  @media (min-width: $breakpoint-desktop) {
-    justify-items: center;
-    gap: 32px;
-    width: 100%;
+  @media (min-width: $breakpoint-large-desktop) {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 40px;
+    max-width: calc(100vw - 191px);
   }
 }
 
 h2 {
   font-size: 20px;
+  margin-bottom: 24px;
 
   @media (min-width: $breakpoint-tablet) {
     font-size: 32px;

diff --git a/base-client/src/app/components/trending-section/trending-section.component.scss b/base-client/src/app/components/trending-section/trending-section.component.scss
@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: screen;
   overflow: scroll;
   margin-bottom: 24px;
 }

diff --git a/base-client/src/styles/_variables.scss b/base-client/src/styles/_variables.scss
@@ -5,4 +5,5 @@ $mango-semi-dark-blue: #161D2F;
 $mango-pure-white: #FFFFFF;
 
 $breakpoint-tablet: 767px;
-$breakpoint-desktop: 1023px;
+$breakpoint-desktop: 1023px;
+$breakpoint-large-desktop: 1439px;