bitlogic · julsh21 · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
@@ -14,7 +14,7 @@ const Banner = ({ data }) => {
   const imageDark = data?.imageDark
   const button = data?.button
   const diagonalReverseState =
-    variant === "diagonalReverse" ? "col-md-4" : "col-md-6"
+    variant === "diagonalReverse" ? "col-md-4" : "col-lg-6"
   return (
     <div
       className={`banner ${variant}`}

diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
@@ -112,8 +112,13 @@
     .imagen {
       display: flex;
       justify-content: flex-end;
+      overflow: hidden;
+      max-height: 300px;
+      align-items: center;
       img {
         width: 100%;
+        height: fit-content;
+        min-height: 100%;
       }
     }
     .title {
@@ -189,33 +194,7 @@
   }
 
   @media screen and (min-width: $breakpoint-md) {
-    flex-direction: row;
     align-items: flex-start;
-    &.hero {
-      height: 80vh;
-      position: relative;
-      .imagen {
-        max-height: 80vh;
-        overflow: hidden;
-        padding: 0;
-        justify-content: flex-end;
-      }
-
-      .title {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        h1 {
-          margin-bottom: 1rem;
-          padding-right: 3rem;
-        }
-        h3 {
-          font-weight: 400;
-          padding-right: 3rem;
-        }
-      }
-    }
     &.top {
       height: 400px;
       position: relative;
@@ -279,13 +258,15 @@
       }
     }
     &.diagonal {
+      flex-direction: row;
       height: 300px;
       position: relative;
       align-items: center;
       .imagen {
         -webkit-clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
         clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
-        height: 500px;
+        height: 300px;
+        max-height: 300px;
         overflow: hidden;
         padding: 0;
         justify-content: flex-end;
@@ -305,7 +286,7 @@
         h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
-          max-width: 400px;
+          max-width: 300px;
         }
         h3 {
           font-weight: 400;
@@ -349,8 +330,47 @@
     }
   }
   @media screen and (min-width: $breakpoint-lg) {
+    flex-direction: row;
+
+    &.hero {
+      height: 500px;
+      position: relative;
+      .imagen {
+        max-height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+      }
+
+      .title {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        h1 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
+      }
+    }
     &.diagonal {
       height: 400px;
+      .imagen {
+        height: 400px;
+        max-height: 400px;
+      }
+      .title {
+        h2 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+          max-width: 400px;
+        }
+      }
+
     }
     &.diagonalReverse {
       height: 400px;

diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
@@ -6,6 +6,9 @@
   & > a {
     margin: 1.5em 0 1em 50px;
   }
+  .logo{
+    max-width: 140px;
+  }
 }
 .NavBar__Logo {
   margin: 16px 28px;

diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
@@ -31,6 +31,7 @@ const NavBar = () => {
           <GatsbyImage
             image={theme === "dark" && logoDark ? logoDark : logoLight}
             alt={"bitlogic"}
+            className= "logo"
           />
         </Link>
         <Navbar.Toggle

diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -5,10 +5,9 @@
   position: relative;
   width: 100%;
   height: 150px;
-  margin: auto;
   overflow: hidden;
   z-index: 1;
-  margin-bottom: 3em;
+  margin: 2rem auto;
   &__title {
     display: flex;
     position: absolute;

diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
@@ -443,6 +443,99 @@ type StrapiBlogCategory implements Node {
     strapiId: Int
     title: String
     bannerHead: StrapiBlogPageBannerHead
+    banner: StrapiBlogPageBanner
+  }
+  type StrapiBlogPageBanner {
+    id: Int
+    title: String
+    variant: String
+    summary: String
+    button: StrapiBlogPageBannerButton
+    image: StrapiBlogPageBannerImage
+  }
+  type StrapiBlogPageBannerButton {
+    id: Int
+    content: String
+    url: String
+    landing_page: StrapiBlogPageBannerButtonLanding_page
+  }
+  type StrapiBlogPageBannerButtonLanding_page {
+    id: Int
+    name: String
+    slug: String
+    published_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    created_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    updated_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+  }
+
+  type StrapiBlogPageBannerImage {
+    id: Int
+    name: String
+    alternativeText: String
+    caption: String
+    width: Int
+    height: Int
+    formats: StrapiBlogPageBannerImageFormats
+    hash: String
+    ext: String
+    mime: String
+    size: Float
+    url: String
+    provider: String
+    created_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    updated_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    localFile: File
+  }
+
+  type StrapiBlogPageBannerImageFormats {
+    small: StrapiBlogPageBannerImageFormatsSmall
+    thumbnail: StrapiBlogPageBannerImageFormatsThumbnail
+  }
+  type StrapiBlogPageBannerImageFormatsSmall {
+    ext: String
+    url: String
+    hash: String
+    mime: String
+    name: String
+    size: Float
+    width: Int
+    height: Int
+  }
+
+  type StrapiBlogPageBannerImageFormatsThumbnail {
+    ext: String
+    url: String
+    hash: String
+    mime: String
+    name: String
+    size: Float
+    width: Int
+    height: Int
   }
 
   type StrapiBlogPageBannerHead {

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -121,22 +121,22 @@ body {
   p {
     line-height: 1.2;
     em {
-      font-size: 14px;
+      font-size: 16px;
       font-family: $secondary-font;
     }
     strong {
-      font-size: 14px;
+      font-size: 16px;
       font-family: $secondary-font;
     }
-    font-size: 14px;
+    font-size: 16px;
     font-family: $secondary-font;
   }
   button {
-    font-size: 14px;
+    font-size: 16px;
     font-family: $primary-font;
   }
   input {
-    font-size: 14px;
+    font-size: 16px;
     font-family: $primary-font;
   }
   h1 {