Responsive font-sizes implementation

_data/nav.yml

@@ -22,6 +22,7 @@
   pages:
     - title: Reboot
     - title: Typography
+    - title: Responsive font sizes
     - title: Code
     - title: Images
     - title: Tables

assets/scss/_ads.scss

@@ -9,7 +9,7 @@
   padding: 15px 15px 15px 160px;
   margin: 50px -15px 0;
   overflow: hidden;
-  font-size: 13px;
+  @include rfs(13px);
   line-height: 1.5;
   text-align: left;
   border: solid #866ab3;

assets/scss/_algolia.scss

@@ -45,7 +45,7 @@
   .algolia-docsearch-suggestion--category-header {
     padding: .125rem 1rem !important;
     margin-top: 0 !important;
-    font-size: .875rem !important;
+    @include rfs(14, true);
     font-weight: 500 !important;
     color: $bd-purple-bright !important;
     border-bottom: 0 !important;
@@ -93,14 +93,14 @@
     display: block;
     padding: .25rem 1rem !important;
     margin-bottom: 0 !important;
-    font-size: .875rem !important;
+    @include rfs(14, true);
     font-weight: 400 !important;
   }
 
   .algolia-docsearch-suggestion--text {
     padding: 0 1rem .5rem !important;
     margin-top: -.25rem;
-    font-size: .875rem !important;
+    @include rfs(14, true);
     font-weight: normal;
     line-height: 1.25 !important;
   }
@@ -110,7 +110,7 @@
     width: auto !important;
     height: auto !important;
     padding: .75rem 1rem 0;
-    font-size: .75rem !important;
+    @include rfs(12, true);
     line-height: 1 !important;
     color: #767676 !important;
     border-top: 1px solid rgba(0,0,0,.1);

assets/scss/_brand.scss

@@ -63,7 +63,7 @@
     border-left: 1px solid #fff;
   }
   .bd-brand-item h1 {
-    font-size: 4rem;
+    @include rfs(64);
   }
 }
 

assets/scss/_clipboard-js.scss

@@ -19,7 +19,7 @@
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  font-size: 75%;
+  @include rfs(75%);
   color: #818a91;
   cursor: pointer;
   background-color: transparent;

assets/scss/_component-examples.scss

@@ -410,6 +410,6 @@
   border: 0;
 }
 .highlight pre code {
-  font-size: inherit;
+  @include rfs(inherit);
   color: $gray-900; // Effectively the base text color
 }

assets/scss/_content.scss

@@ -89,19 +89,15 @@
   margin-top: 1rem;
   margin-bottom: .5rem;
   font-weight: 300;
-
-  @include media-breakpoint-up(sm) {
-    font-size: 3rem;
-  }
+  @include rfs(48);
 }
 
 .bd-lead {
-  font-size: 1.125rem;
+  @include rfs(18);
   font-weight: 300;
 
   @include media-breakpoint-up(sm) {
     max-width: 80%;
     margin-bottom: 1rem;
-    font-size: 1.5rem;
   }
 }

assets/scss/_featurettes.scss

@@ -1,7 +1,7 @@
 .bd-featurette {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  font-size: 1rem;
+  @include rfs(16);
   line-height: 1.5;
   color: #555;
   text-align: center;
@@ -16,14 +16,14 @@
     margin-right: auto;
     margin-bottom: 2rem;
     margin-left: auto;
-    font-size: 1rem;
+    @include rfs(16);
     text-align: center;
   }
 }
 
 .bd-featurette-title {
   margin-bottom: .5rem;
-  font-size: 2rem;
+  @include rfs(32);
   font-weight: normal;
   color: #333;
   text-align: center;
@@ -68,13 +68,6 @@
     padding-top: 6rem;
     padding-bottom: 6rem;
   }
-  .bd-featurette-title {
-    font-size: 2.5rem;
-
-    + .lead {
-      font-size: 1.5rem;
-    }
-  }
   .bd-featurette .lead {
     max-width: 80%;
   }

assets/scss/_footer.scss

@@ -5,7 +5,7 @@
 .bd-footer {
   padding: 4rem 0;
   margin-top: 4rem;
-  font-size: 85%;
+  @include rfs(14);
   text-align: center;
   background-color: #f7f7f7;
 

assets/scss/_masthead.scss

@@ -22,7 +22,7 @@
     margin-right: auto;
     margin-bottom: 2rem;
     margin-left: auto;
-    font-size: 1.25rem;
+    @include rfs(20);
     color: #fff;
   }
 
@@ -33,8 +33,8 @@
 
   .btn {
     width: 100%;
-    padding: 1rem 2rem;
-    font-size: 1.25rem;
+    padding: .8em 1.6em;
+    @include rfs(20);
     font-weight: 500;
   }
 
@@ -62,14 +62,6 @@
       margin-bottom: 4rem;
     }
 
-    h1 {
-      font-size: 4rem;
-    }
-
-    .lead {
-      font-size: 1.5rem;
-    }
-
     .carbonad {
       margin-top: 3rem !important;
     }
@@ -78,7 +70,6 @@
   @include media-breakpoint-up(lg) {
     .lead {
       width: 85%;
-      font-size: 2rem;
     }
   }
 }

assets/scss/_nav.scss

@@ -16,7 +16,6 @@
       height: 2.5rem;
       margin-top: .25rem;
       overflow: hidden;
-      font-size: .875rem;
 
       .navbar-nav {
         padding-bottom: 2rem;
@@ -61,7 +60,7 @@
   }
 
   .dropdown-menu {
-    font-size: .875rem;
+    @include rfs(14);
   }
 
   .dropdown-item.active {

assets/scss/_page-header.scss

@@ -12,14 +12,14 @@
   }
 
   h1 {
-    font-size: 3rem;
+    @include rfs(48);
     font-weight: normal;
     color: #fff;
   }
 
   p {
     margin-bottom: 0;
-    font-size: 1.25rem;
+    @include rfs(20);
     font-weight: 300;
   }
 
@@ -34,16 +34,6 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
-    h1 {
-      font-size: 4rem;
-    }
-
-    p {
-      font-size: 1.5rem;
-    }
-  }
-
   @include media-breakpoint-up(lg) {
     h1,
     p {

assets/scss/_sidebar.scss

@@ -14,7 +14,7 @@
   order: 2;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
-  font-size: .875rem;
+  @include rfs(14);
 }
 
 .section-nav {
@@ -148,7 +148,7 @@
 .bd-sidebar .nav > li > a {
   display: block;
   padding: .25rem 1.5rem;
-  font-size: 90%;
+  @include rfs(90%);
   color: rgba(0,0,0,.65);
 }