feat: add responsive type scale (#51)

* feat: add responsive typography * fix: use breakpoint variable for media query * fix: shrink display also
openedx · May 15, 2019 · cd7e37f · cd7e37f
1 parent cd7841f
commit cd7e37f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 44 deletions.
diff --git a/scss/edx/overrides/_typography.scss b/scss/edx/overrides/_typography.scss
@@ -34,6 +34,30 @@ h6,
   font-weight: $font-weight-bold;
 }
 
+@media (max-width: map-get($grid-breakpoints, "sm")) {
+  .display-1,
+  .display-2,
+  .display-3,
+  .display-4,
+  h1, .h1 {
+    font-size: 2rem;
+    line-height: $headings-line-height;
+  }
+  h2, .h2 {
+    font-size: 1.75rem;
+  }
+  h3, .h3 {
+    font-size: 1.5rem;
+  }
+  h4, .h4 {
+    font-size: 1.375rem;
+  }
+}
+
+label {
+  line-height: $headings-line-height;
+  font-weight: $headings-font-weight;
+}
 
 small,
 .small {

diff --git a/src/index.scss b/src/index.scss
@@ -26,22 +26,11 @@
   }
 }
 
-.type-scale-row {
-  margin-bottom: 3rem;
-}
-.type-scale-cell-empty  {
-  background: transparent;
-  padding: $spacer*.5;
-  flex-basis: 66%;
-}
-
 .color-card {
   box-shadow: inset 0 0 1px rgba(0,0,0,.2);
 }
 
 .color-label {
-  // color: $text-muted;
-  // font-weight: 600;
   margin-bottom: .25rem;
 }
 .text-swatch-sample {

diff --git a/src/pages/Basics.Typography.js b/src/pages/Basics.Typography.js
@@ -55,39 +55,19 @@ export default function Typography() {
 
   return (
     <div>
-
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Display', tag: 'h1', tagClass: 'display-3'}) }</div>
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty" /></div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 1', tag: 'h1', tagClass: ''}) }</div>
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty" /></div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 2', tag: 'h2', tagClass: ''}) }</div>
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty " /></div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 3', tag: 'h3', tagClass: ''}) }</div>
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty " /></div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 4', tag: 'h4', tagClass: ''}) }</div>
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty " /></div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 5', tag: 'h5', tagClass: ''}) }</div>
-        <div className="col-6">{ renderTypeItem({name: 'Large Paragraph', tag: 'p', tagClass: 'lead'}) }</div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6">{ renderTypeItem({name: 'Heading 6', tag: 'h6', tagClass: ''}) }</div>
-        <div className="col-6">{ renderTypeItem({name: 'Paragraph', tag: 'p', tagClass: ''}) }</div>
-      </div>
-      <div className="row type-scale-row">
-        <div className="col-6 d-flex align-items-center"><div className="type-scale-cell-empty " /></div>
-        <div className="col-6">{ renderTypeItem({name: 'Small ', tag: 'p', tagClass: 'small'}) }</div>
-      </div>
+      <div className="mb-4">{renderTypeItem({name: 'Display', tag: 'h1', tagClass: 'display-3'})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 1', tag: 'h1', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 2', tag: 'h2', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 3', tag: 'h3', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 4', tag: 'h4', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 5', tag: 'h5', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Heading 6', tag: 'h6', tagClass: ''})}</div>
+      <hr />
+      <div className="mb-4">{renderTypeItem({name: 'Large Paragraph', tag: 'p', tagClass: 'lead'})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Paragraph', tag: 'p', tagClass: ''})}</div>
+      <div className="mb-4">{renderTypeItem({name: 'Small ', tag: 'p', tagClass: 'small'})}</div>
+      <hr />
+      <div className="mb-4">{renderTypeItem({name: 'Label ', tag: 'label'})}</div>
     </div>
   );
 }