Styles: Update styles in the following files to fit new UI 'FileTabsN…

…avbar' component - src/styles/UI/LineCount.scss - src/styles/UI/Navbar.scss - src/styles/pages/AboutPage.scss - src/styles/pages/ContactPage.scss - src/styles/pages/ExpertiseSummaryPage.scss - src/styles/pages/ProjectsPage.scss
ITurres · Feb 5, 2024 · 882c68d · 882c68d
1 parent 3814c6d
commit 882c68d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 7 deletions.
diff --git a/src/styles/UI/LineCount.scss b/src/styles/UI/LineCount.scss
@@ -6,7 +6,9 @@ $light-gray: colors.$light-gray;
 .line-count {
   display: none;
 
-  @media (min-width: 630px) {
+  @media (min-width: 768px) {
+    margin-top: 2.6rem;
+
     & {
       display: flex;
       flex-direction: column;

diff --git a/src/styles/UI/Navbar.scss b/src/styles/UI/Navbar.scss
@@ -1,6 +1,6 @@
 @use '../variables/colors' as colors;
 
-$elementsInNavbar: 7;
+$elementsInNavbar: 8;
 
 $color2: colors.$color2;
 $color1: colors.$color1;

diff --git a/src/styles/pages/AboutPage.scss b/src/styles/pages/AboutPage.scss
@@ -66,10 +66,17 @@ $color1: colors.$color1;
   }
 
   @media (min-width: 768px) {
+    @include mixins.component-code-snippet(
+      'const About = () => {',
+      $color1,
+      $color1,
+      4
+    );
+
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    height: 100vh;
+    height: 90vh;
 
     &__about {
       width: 60%;

diff --git a/src/styles/pages/ContactPage.scss b/src/styles/pages/ContactPage.scss
@@ -32,9 +32,15 @@ body:has(.drone) {
     -2
   );
 
-  @media (min-width: 768px) {
+  @media screen and (min-width: 768px) {
     width: 90%;
-
-    @include mixins.component-code-snippet('const Contact = () => {');
+    min-height: 95vh;
+
+    @include mixins.component-code-snippet(
+      'const Contact = () => {',
+      colors.$color1,
+      colors.$color1,
+      4
+    );
   }
 }
diff --git a/src/styles/pages/ExpertiseSummaryPage.scss b/src/styles/pages/ExpertiseSummaryPage.scss
@@ -96,8 +96,23 @@ $font-family-regular: fonts.$font-family-regular;
     }
   }
 
+  @media screen and (min-width: 768px) {
+    @include mixins.component-code-snippet(
+      'const Expertise = () => {',
+      $dark,
+      $color1,
+      4,
+      // * top
+      1,
+      // * bottom
+      0 // * bottom-desktop
+    );
+
+    padding-top: 3rem;
+  }
+
   @media (min-width: 1366px) {
-    flex-direction: row;
+    // flex-direction: row;
     padding-left: 6rem;
 
     &__card {

diff --git a/src/styles/pages/ProjectsPage.scss b/src/styles/pages/ProjectsPage.scss
@@ -22,6 +22,17 @@ $font-family-regular: fonts.$font-family-regular;
     colors.$color1
   );
 
+  @media screen and (min-width: 768px) {
+    padding-top: 3rem;
+
+    @include mixins.component-code-snippet(
+      'const Projects = () => {',
+      colors.$color1,
+      colors.$color1,
+      4
+    );
+  }
+
   min-height: 100vh;
 
   // ! START of Splide Styles overrides.