From 003dde41b462fe06916fb194532f737a4ef16f30 Mon Sep 17 00:00:00 2001
From: alexvcs <alexcurtisslep@gmail.com>
Date: Wed, 18 Dec 2024 14:01:14 -0500
Subject: [PATCH] style pages and make them responsive

Co-authored-by: Steve Smodish <stevesmodish@gmail.com>
---
 base-client/src/app/app.component.scss        | 11 ++++--
 .../components/navbar/navbar.component.html   |  2 +-
 .../components/navbar/navbar.component.scss   |  2 +-
 .../regular-section.component.scss            | 37 ++++++++-----------
 .../trending-section.component.scss           |  1 -
 base-client/src/styles/_variables.scss        |  3 +-
 6 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/base-client/src/app/app.component.scss b/base-client/src/app/app.component.scss
index c02bdbe..d774054 100644
--- 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);
   }
 }
\ No newline at end of file
diff --git a/base-client/src/app/components/navbar/navbar.component.html b/base-client/src/app/components/navbar/navbar.component.html
index 372da45..3442fa0 100644
--- 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
index 06d1dce..cf2b265 100644
--- 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
index 10b2157..71d5321 100644
--- 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
index 9d2ccd3..ce3aeab 100644
--- 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
index 1fcbeca..9279ed8 100644
--- 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;
\ No newline at end of file
+$breakpoint-desktop: 1023px;
+$breakpoint-large-desktop: 1439px;
\ No newline at end of file