Fixed issues for large mac

VJAI · Feb 28, 2022 · 549bf33 · 549bf33
1 parent dad631c
commit 549bf33
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/src/posts.html b/src/posts.html
@@ -582,7 +582,7 @@ <h2 class="cmp__article-title">
 
       <!-- Archives & Tags -->
       <div class="cmp__responsive-flex cmp__responsive">
-        <section class="cmp__widget cmp__archives">
+        <section class="cmp__widget cmp__archives-widget">
           <div class="cmp__widget-header">
             <div class="cmp__widget-ribbon">
               <div class="cmp__widget-ribbon-content">
@@ -633,7 +633,7 @@ <h2 class="cmp__article-title">
           </div>
         </section>
 
-        <section class="cmp__widget cmp__tags">
+        <section class="cmp__widget cmp__tags-widget">
           <div class="cmp__widget-header">
             <div class="cmp__widget-ribbon">
               <div class="cmp__widget-ribbon-content">

diff --git a/src/scss/base/_media.scss b/src/scss/base/_media.scss
@@ -86,4 +86,10 @@
       }
     }
   }
+}
+
+@media only screen and (min-width: fibVars.$extra-large) {
+  :root {
+    --cmp-base-size: #{fibVars.$extra-large-screen-font-size};
+  }
 }
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
@@ -45,6 +45,7 @@ $purple-ribbon:                     rgb(186, 137, 182) !default;
 // Sizes.
 $small-screen-font-size:            16px !default;
 $large-screen-font-size:            19px !default;
+$extra-large-screen-font-size:      22px !default;
 $xs-size:                           var(--cmp-xs-size) !default;
 $sm-size:                           var(--cmp-sm-size) !default;
 $md-size:                           var(--cmp-md-size) !default;
@@ -86,6 +87,7 @@ $small-padding:                     $sm-size $lg-size !default;
 $mobile:                            576px !default; // Small devices (landscape phones, 576px and up).
 $tablet:                            768px !default; // Medium devices (tablets, 768px and up).
 $desktop:                           992px !default; // Large devices (desktops, 992px and up).
+$extra-large:                       1500px !default; // Extra Large devices.
 
 $breakpoint1:                       878px !default;  // Custom one.
 $breakpoint2:                       1260px !default; // Custom one.

diff --git a/src/scss/site/_article.scss b/src/scss/site/_article.scss
@@ -203,6 +203,10 @@
       img, .cmp__table-wrapper, iframe {
         border-radius: 0;
       }
+
+      img {
+        width: 100%;
+      }
     }
   }
 

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -13,7 +13,7 @@ module.exports = {
           MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
-            options: { url: false }
+            options: { import: false }
           },
           'sass-loader',
         ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,4 +86,10 @@ @@
           }
         }
       }
+    }
+    @media only screen and (min-width: fibVars.$extra-large) {
+      :root {
+        --cmp-base-size: #{fibVars.$extra-large-screen-font-size};
+      }
     }