Merge pull request #461 from IgniteUI/dTsvetkov/appbuilder-fixes-size…

…s-adjustments Update appbuilder theme font styles and fixes
IgniteUI · Apr 15, 2024 · d139ee6 · d139ee6
2 parents 1d4fffd + f2e34f3
commit d139ee6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 25 deletions.
diff --git a/src/app/services/rendering/article.ts b/src/app/services/rendering/article.ts
@@ -341,7 +341,7 @@ export class ArticleRenderingService extends RenderingService {
             imagePath = languageVersion === 'en' ? INDIGO_DESIGN_CTA_BANNER : JP_INDIGO_DESIGN_CTA_BANNER;
         } else if (productLink.includes("appbuilder")) {
             action = 'Learn More';
-            productLink = "https://www.infragistics.com/products/appbuilder";
+            productLink = "https://www.appbuilder.dev/help";
             imagePath = languageVersion === 'en' ? APP_BUILDER_CTA_BANNER : JP_APP_BUILDER_CTA_BANNER;
         } else if (productLink.includes("web-components")) {
             imagePath = languageVersion === 'en' ? WEB_COPONENTS_CTA_BANNER : JP_WEB_COPONENTS_CTA_BANNER;
@@ -360,7 +360,7 @@ export class ArticleRenderingService extends RenderingService {
 
             if ($(".article-container h2")[4]){
                 const builderImagePath = languageVersion === 'en' ? APP_BUILDER_CTA_BANNER : JP_APP_BUILDER_CTA_BANNER;
-                const аppbuilderLink = 'https://www.infragistics.com/products/appbuilder';
+                const аppbuilderLink = 'https://www.appbuilder.dev/help';
                 action = 'Learn More';
                 this.appendBanner(4, аppbuilderLink, builderImagePath, action, 'App Builder | CTA Banner');
             }

diff --git a/src/styles/appbuilder/_variables.scss b/src/styles/appbuilder/_variables.scss
@@ -15,23 +15,20 @@ $text-dim-light: #ddd;
 $black: #000;
 $text-dark: #222;
 $title-color: $text-base;
-
-// Toc
-$toc-font-size: rem(14px);
 
 // h1
-$h1-f-family: "Figtree", sans-serif;
-$h1-f-size: 56px;
+$h2-f-family: "Figtree", sans-serif;
+$h1-f-size: 36px;
 $h1-f-weight: bold;
-$h1-l-height: 56px;
+$h1-l-height: 42px;
 $h1-m-top: 36px;
 $h1-m-bottom: 30px;
 
 // h2
 $h2-f-family: "Figtree", sans-serif;
-$h2-f-size: 48px;
+$h2-f-size: 28px;
 $h2-f-weight: bold;
-$h2-l-height: 55px;
+$h2-l-height: 36px;
 $h2-m-top: 36px;
 $h2-m-bottom: 16px;
 
@@ -49,5 +46,5 @@ $h6-f-family: "Figtree", sans-serif;
 $h6-f-weight: normal;
 
 // Paragraph
-$p-l-height: 30px;
+$p-l-height: 1.5rem;
 $p-m-bottom: 1.5rem;
diff --git a/src/styles/appbuilder/main.scss b/src/styles/appbuilder/main.scss
@@ -14,7 +14,7 @@
   }
 }
 
-@media only screen and (min-width: 1281px) {
+@media only screen and (min-width: 1200px) {
     .mega-sticky-wrapper{
       height: 120px !important;
     }
@@ -23,7 +23,7 @@
     }
 }
 
-@media only screen and (max-width: 1281px) {
+@media only screen and (max-width: 1200px) {
   .mega-sticky-wrapper{
     height: unset !important;
   }
@@ -32,7 +32,7 @@
   }
 }
 
-@media only screen and (max-width: 1281px) {
+@media only screen and (max-width: 1200px) {
   #main{
       padding-top: rem(16px);
   }
@@ -47,23 +47,15 @@
   margin-top: unset;
 }
 
-@media only screen and (max-width: 1281px) {
+@media only screen and (max-width: 1200px) {
   .w-m-100 {
     width: 100% !important;
     padding-left: rem(16px) !important;
     padding-right: rem(16px) !important;
   }
 }
 
-.anchorjs-link {
-  font-size: rem(26px);
-}
-
 .affix ul > li > a {
-	font-size: rem(14px) !important;
-}
-
-.sidenav__header {
   font-size: rem(14px) !important;
 }
 
@@ -91,6 +83,6 @@
   text-align: center !important;
 }
 
-p {
-  font-size: rem(20px); 
+p, article > ol, article > ul, article ul ul {
+  font-size: rem(16px);
 }