Merge pull request #13 from hotosm/feature/prose-responsive

Feature/prose responsive

Author: danielfdsilva

assets/styles/oam-design-system/_base.scss

@@ -68,19 +68,6 @@ a:active {
 }
 
 
-/* Media
-   ========================================================================== */
-
-figure {
-  padding: 0;
-  margin: 0 0 1rem 0;
-}
-
-img {
-  vertical-align: middle;
-}
-
-
 /* Rows
    ========================================================================== */
 

assets/styles/oam-design-system/_drops.scss

@@ -204,7 +204,7 @@
     display: block;
     padding: 0.25rem 1rem;
     color: inherit;
-    transition: all 0.24s ease 0s;
+    transition: all 0.16s ease 0s;
     &:hover,
     &:focus {
       color: $link-color;

assets/styles/oam-design-system/_media.scss

@@ -2,6 +2,16 @@
    Media
    ========================================================================== */
 
+
+figure {
+  padding: 0;
+  margin: 0 0 $global-spacing 0;
+}
+
+img {
+  vertical-align: middle;
+}
+
 .image-fluid {
   max-width: 100%;
   height: auto;
@@ -24,7 +34,6 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   padding-top: 1rem;
-  max-width: 32rem;
   font-weight: $base-font-regular;
 }
 
@@ -38,28 +47,18 @@ figure.align-center {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
-
-  figcaption {
-    margin: 0 auto;
-  }
 }
 
 img.align-left,
 figure.align-left {
   float: left;
   margin-right: $global-spacing * 1.5;
-
-  figcaption {
-    text-align: left;
-  }
+  text-align: left;
 }
 
 img.align-right,
 figure.align-right {
   float: right;
   margin-left:  $global-spacing * 1.5;
-
-  figcaption {
-    text-align: right;
-  }
+  text-align: right;
 }

assets/styles/oam-design-system/_tables.scss

@@ -61,6 +61,17 @@
   }
 }
 
+/* Prose specific */
+
+.prose--responsive {
+  > .table thead th {
+    @include media(medium-up) {
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+  }
+}
+
 
 /* Responsive table wrapper
    ========================================================================== */

assets/styles/oam-design-system/_typography.scss

@@ -2,6 +2,38 @@
    Typography
    ========================================================================== */
 
+
+/* Prose
+   ========================================================================== */
+
+.prose {
+  font-size: $base-font-size;                           // 16px
+  line-height: $base-line-height;                       // 24px
+
+  > * {
+    margin-bottom: $base-font-size * $base-line-height; // same as line-height
+  }
+}
+
+.prose--responsive {
+  $prose-resp-font-size: 1.25rem;                       // 20px
+  $prose-resp-line-height: 1.6;                         // 32px
+
+  @include media(medium-up) {
+    font-size: $prose-resp-font-size;
+    line-height: $prose-resp-line-height;
+  
+    > * {
+      margin-bottom: $prose-resp-font-size * $prose-resp-line-height; // same as line-height
+    }
+  }
+}
+
+
+/* Common elements
+   ========================================================================== */
+
+
 p, ul, ol, dl, pre, blockquote {
   margin: 0 0 $global-spacing 0;
 }
@@ -16,6 +48,16 @@ p, ul, ol, dl, pre, blockquote {
   opacity: 0.64;
 }
 
+/* Prose specific */
+
+.prose--responsive {
+  > .lead {
+    @include media(medium-up) {
+      font-size: 1.5rem;
+      line-height: 1.6666667;
+    }
+  }
+}
 
 /* Lists
    ========================================================================== */
@@ -32,7 +74,6 @@ ol {
   list-style-type: decimal;
 }
 
-
 dt {
   @extend .heading-alt;
   font-size: 0.875rem;
@@ -64,6 +105,19 @@ dd {
   }
 }
 
+/* Prose specific */
+
+.prose--responsive {
+  > dl dt {
+    @include media(medium-up) {
+      padding-top: $global-spacing / 4;
+      padding-bottom: $global-spacing / 4;
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+  }
+}
+
 
 /* Blockquote
    ========================================================================== */
@@ -96,6 +150,24 @@ hr, .hr {
   margin: ($global-spacing * 2) auto;
 }
 
+/* Prose specific */
+
+.prose {
+  > hr,
+  >.hr {
+    margin: ($global-spacing * 3) auto;
+  }
+}
+
+.prose--responsive {
+  > hr,
+  > .hr {
+    @include media(medium-up) {
+      margin: ($global-spacing * 4) auto;
+    }
+  }
+}
+
 
 /* Emphasis
    ========================================================================== */
@@ -186,6 +258,35 @@ h4, h5, h6 {
   > h4:not(:first-child),
   > h5:not(:first-child),
   > h6:not(:first-child) {
-    margin-top: $global-spacing * 2;
+    margin-top: $global-spacing * 2.5;
+  }
+
+  > h1 + h2:not(:first-child),
+  > h2 + h3:not(:first-child),
+  > h3 + h4:not(:first-child),
+  > h4 + h5:not(:first-child),
+  > h5 + h6:not(:first-child) {
+    margin-top: 0;
+  }
+}
+
+.prose--responsive {
+  > h1 { @include heading(1.75rem, xlarge-up); }            // 28, 32, 36, 40
+  > h2 { @include heading(1.5rem, xlarge-up); }             // 24, 28, 32, 36
+  > h3 { @include heading(1.25rem, xlarge-up); }            // 20, 24, 28, 32
+  > h4,
+  > h5,
+  > h6 { @include heading(1rem, xlarge-up); }               // 16, 20, 24, 28
+  
+
+  @include media(medium-up) {
+    > h1:not(:first-child),
+    > h2:not(:first-child),
+    > h3:not(:first-child),
+    > h4:not(:first-child),
+    > h5:not(:first-child),
+    > h6:not(:first-child) {
+      margin-top: $global-spacing * 4;
+    }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oam-design-system",
-  "version": "0.1.5-alpha",
+  "version": "0.1.6-alpha",
   "description": "OpenAerialMap Design System",
   "repository": {
     "type": "git",