Merge pull request #170 from StackExchange/feature/responsive-typography

Make the base font size responsive
StackExchange · Nov 12, 2018 · 28463db · 28463db
2 parents fc06783 + 6bf8f25
commit 28463db
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 103 deletions.
diff --git a/docs/_data/product/type-definitions.yaml b/docs/_data/product/type-definitions.yaml
@@ -1,45 +1,59 @@
 fontsize:
   - term: fine
     define: 11px
+    responsive: 11px
     label: Fine
   - term: caption
     define: 12px
+    responsive: 12px
     label: Caption
   - term: body1
     define: 13px
+    responsive: 13px
     label: Body 1
   - term: body2
     define: 15px
+    responsive: 13px
     label: Body 2
   - term: body3
     define: 17px
+    responsive: 14.45px
     label: Body 3
   - term: subheading
     define: 19px
+    responsive: 16.15px
     label: Subheading
   - term: title
     define: 21px
+    responsive: 17.85px
     label: Title
   - term: headline1
     define: 27px
+    responsive: 22.95px
     label: Headline 1
   - term: headline2
     define: 34px
+    responsive: 28.9px
     label: Headline 2
   - term: display1
     define: 43px
+    responsive: 36.55px
     label: Display 1
   - term: display2
     define: 55px
+    responsive: 46.75px
     label: Display 2
   - term: display3
     define: 69px
+    responsive: 58.65px
     label: Display 3
   - term: display4
     define: 99px
+    responsive: 84.15px
     label: Display 4
   - term: category
     define: 12px
+    responsive: 12px
     label: Category
 
 type-basic:

diff --git a/docs/_includes/navigation.html b/docs/_includes/navigation.html
@@ -1,5 +1,5 @@
 <div class="grid--cell fl-shrink0 ws2 sm:w100 md:w-auto md:d-none print:d-none js-navigation">
-    <div class="overflow-y-scroll overflow-x-hidden bg-white z-nav py12 ps-fixed wmn2 t64 b0 br bc-black-2 sm:w100 sm:pb0">
+    <div class="overflow-y-scroll overflow-x-hidden bg-white z-nav py12 fs-body1 ps-fixed wmn2 t64 b0 br bc-black-2 sm:w100 sm:pb0">
         <div class="d-none sm:d-block">
             <div class="grid gs24 ai-center jc-center">
                 {% if site.data.nav[0] %}

diff --git a/docs/assets/css/stacks-documentation.css b/docs/assets/css/stacks-documentation.css
@@ -411,7 +411,7 @@ template {
 .s-avatar .s-avatar--letter {
   display: block;
   color: #FFF;
-  font-size: 0.84615385rem;
+  font-size: 11px;
   font-weight: bold;
   line-height: 1.4545455;
   text-align: center;
@@ -482,7 +482,7 @@ template {
   padding: 0 6px;
   border: 1px solid transparent;
   border-radius: 3px;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   font-weight: normal;
   line-height: 2;
   text-decoration: none;
@@ -640,7 +640,7 @@ a.s-badge__rep-down:hover {
   align-self: flex-start;
   padding-right: 4px;
   padding-left: 3px;
-  font-size: 0.84615385rem;
+  font-size: 11px;
   line-height: 1.8;
   border-color: transparent;
   background-color: #07C;
@@ -676,7 +676,7 @@ a.s-badge__important:hover {
   margin-right: auto;
 }
 .s-empty-state p {
-  font-size: 1rem;
+  font-size: 13px;
   margin-bottom: 12px;
 }
 .s-empty-state p strong {
@@ -766,8 +766,9 @@ a.s-badge__important:hover {
   border: 1px solid #bbc0c4;
   border-radius: 3px;
   box-shadow: inset 0 0 1px rgba(145, 153, 161, 0.2), 0 0 0 rgba(255, 255, 255, 0);
+  font-size: 13px;
   font-family: inherit;
-  line-height: 1.30769231;
+  line-height: 1.02366864;
 }
 .s-input::-webkit-input-placeholder,
 .s-textarea::-webkit-input-placeholder {
@@ -812,7 +813,7 @@ legend.s-label {
   border-radius: 7px;
   background-color: #eff0f1;
   color: #6a737c;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   font-style: italic;
   font-weight: 400;
   vertical-align: text-bottom;
@@ -824,7 +825,7 @@ legend.s-label {
 .s-description {
   padding: 0 2px;
   color: #6a737c;
-  font-size: 0.92307692rem;
+  font-size: 12px;
 }
 .s-input-fill {
   padding: 0.7em;
@@ -835,7 +836,7 @@ legend.s-label {
   color: #3b4045;
   font-family: inherit;
   white-space: nowrap;
-  line-height: 1.30769231;
+  line-height: 1.02366864;
 }
 .s-input-fill.s-input-fill__clear {
   border-color: transparent;
@@ -888,8 +889,9 @@ legend.s-label {
   border-radius: 3px;
   background-color: #FFF;
   outline: 0;
+  font-size: 13px;
   font-family: inherit;
-  line-height: 1.30769231;
+  line-height: 1.02366864;
 }
 .s-select > select::-moz-focus-inner {
   outline: none !important;
@@ -1141,14 +1143,14 @@ legend.s-label {
 }
 .s-input-message {
   padding: 2px;
-  font-size: 0.92307692rem;
+  font-size: 12px;
 }
 .s-input__sm,
 .s-textarea__sm,
 .s-label__sm,
 .s-select__sm > select {
-  font-size: 0.92307692rem;
-  line-height: 1.33333333;
+  font-size: 12px;
+  line-height: 1.02564103;
 }
 .s-input__md,
 .s-textarea__md,
@@ -1297,7 +1299,7 @@ legend.s-label {
   height: 100%;
   border-radius: 5px;
   border: 1px solid transparent;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   line-height: 1;
   color: #0C0D0E;
   z-index: 2;
@@ -1349,6 +1351,7 @@ legend.s-label {
   max-width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
+  font-size: 13px;
 }
 .s-table th,
 .s-table td {
@@ -1381,7 +1384,7 @@ legend.s-label {
   letter-spacing: 0.05em;
 }
 .s-table thead th:not(.s-table--bulk) {
-  font-size: 0.84615385rem;
+  font-size: 11px;
 }
 .s-table tbody th {
   font-weight: normal;
@@ -1613,7 +1616,7 @@ legend.s-label {
   border: 1px solid #d6d9dc;
   border-radius: 3px;
   box-shadow: 0 2px 8px rgba(59, 64, 69, 0.1);
-  font-size: 1rem;
+  font-size: 13px;
 }
 .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action),
 .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):visited {
@@ -1658,12 +1661,12 @@ legend.s-label {
   font-weight: normal;
 }
 .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
-  font-size: 0.92307692rem;
+  font-size: 12px;
   font-weight: bold;
 }
 .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .-action {
   font-weight: normal;
-  line-height: 1.2rem;
+  line-height: 15.6px;
 }
 .s-sidebarwidget--header.s-sidebarwidget__collapsing-control {
   cursor: pointer;
@@ -1688,7 +1691,7 @@ legend.s-label {
   float: right;
   margin: 0 0 4px 8px;
   color: #07C;
-  font-size: 0.84615385rem;
+  font-size: 11px;
   line-height: 19.5px;
 }
 table.s-sidebarwidget--content.s-sidebarwidget__items {
@@ -6117,14 +6120,14 @@ p {
   font-size: 1.15384615rem !important;
 }
 .fs-body1 {
-  font-size: 1rem !important;
+  font-size: 13px !important;
 }
 .fs-caption,
 .fs-category {
-  font-size: 0.92307692rem !important;
+  font-size: 12px !important;
 }
 .fs-fine {
-  font-size: 0.84615385rem !important;
+  font-size: 11px !important;
 }
 .fs-category {
   font-weight: 700;
@@ -8196,6 +8199,12 @@ body {
   font-size: 13px;
   line-height: 1.30769231;
 }
+@media (max-width: 640px) {
+  html ,
+  html  body {
+    font-size: 11px;
+  }
+}
 body {
   box-sizing: border-box;
   min-height: 100%;
@@ -8222,6 +8231,7 @@ body *:after {
   border-radius: 0;
   box-shadow: none;
   color: #3b4045;
+  font-size: 13px;
 }
 .s-banner[aria-hidden="true"] {
   visibility: hidden;
@@ -8406,7 +8416,7 @@ body *:after {
   background-color: transparent;
   outline: none;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 13px;
   font-weight: 400;
   line-height: 1.15384615;
   text-decoration: none;
@@ -8503,7 +8513,7 @@ body *:after {
 .s-btn.s-btn__xs {
   padding-top: 0.6em;
   padding-bottom: 0.85em;
-  font-size: 0.84615385rem;
+  font-size: 11px;
 }
 .s-btn.s-btn__xs.s-btn__dropdown {
   padding-right: 1.5em;
@@ -8516,7 +8526,7 @@ body *:after {
   border-bottom-width: 0;
 }
 .s-btn.s-btn__sm {
-  font-size: 0.92307692rem;
+  font-size: 12px;
 }
 .s-btn.s-btn__sm.s-btn__dropdown {
   padding-right: 2.05em;
@@ -9816,6 +9826,7 @@ button.s-link:focus {
   border: 1px solid transparent;
   border-radius: 3px;
   color: #3b4045;
+  font-size: 13px;
 }
 .s-toast .s-notice {
   max-width: 44rem;
@@ -9941,7 +9952,7 @@ button.s-link:focus {
   border-style: solid;
   border-width: 1px;
   border-radius: 3px;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   line-height: 1.84615385;
   text-decoration: none;
   vertical-align: middle;
@@ -9967,7 +9978,7 @@ button.s-link:focus {
   text-decoration: none;
 }
 .s-tag.s-tag__sm {
-  font-size: 0.92307692rem;
+  font-size: 12px;
   line-height: 1.5;
 }
 .s-tag.s-tag__md {
@@ -10090,7 +10101,7 @@ button.s-link:focus {
   background-color: transparent;
   border-radius: 3px;
   border: 1px solid rgba(12, 13, 14, 0.15);
-  font-size: 1rem;
+  font-size: 13px;
   line-height: 1.92307692;
   color: #3b4045;
 }
@@ -10276,7 +10287,7 @@ button.s-link:focus {
   padding: 3px 5px 2px 4px;
   border-radius: 3px;
   background-color: #eff0f1;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
   color: #0C0D0E;
   line-height: 1;
@@ -10302,7 +10313,7 @@ button.s-link:focus {
 .stacks-preview .highlight,
 .stacks-preview .highlight pre {
   margin: 0;
-  font-size: 1rem;
+  font-size: 13px;
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
   line-height: 1.61538462;
   color: #C5C8C6;
@@ -10336,6 +10347,7 @@ button.s-link:focus {
   border-bottom-right-radius: 3px;
   border: 1px solid #d6d9dc;
   border-top-width: 0;
+  font-size: 13px;
 }
 .stacks-icon-preview {
   padding: 8px;
@@ -10351,7 +10363,7 @@ button.s-link:focus {
   border: 1px solid #fbd4b6;
   background-color: #fde3ce;
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
-  font-size: 0.92307692rem;
+  font-size: 12px;
   line-height: 1.15384615;
   color: #0C0D0E;
 }
@@ -10389,7 +10401,7 @@ pre.lineno {
   width: auto !important;
   height: auto !important;
   padding: 5px 8px;
-  font-size: 0.92307692rem !important;
+  font-size: 12px !important;
   line-height: 1 !important;
   color: #6a737c !important;
 }

diff --git a/docs/assets/css/stacks-documentation.min.css b/docs/assets/css/stacks-documentation.min.css
diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
@@ -207,6 +207,7 @@
     border-bottom-right-radius: @br-sm;
     border: 1px solid @black-100;
     border-top-width: 0;
+    font-size: @fs-body1;
 }