fix: typography layout #46

AlaskaAirlines · May 19, 2020 · 37b4989 · 37b4989
1 parent d08fa7f
commit 37b4989
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -193,13 +193,14 @@
   }
 }</code>" data-collapsed="#{$scope}#{$sym}#{$prefix}p { ... }"><code>#{$scope}#{$sym}#{$prefix}p { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set <code>&lt;p&gt;</code> element margin standard. This selector is not set by default, set the <code>$paragraph</code> flag to `true&#39; prior to import.</p><p>Other options are to use the <code>&lt;small&gt;</code> element or the <code>.baseParagraph</code> selector.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>p {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro p {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_p {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file with <code>$paragraph</code> flag set to true</p></div><pre class="example__code language-scss"><code>$paragraph: true;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/essentials&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="headings"><div class="container">headings</div></h1><section class="main__sub-section" id="headings-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading {
-  margin: $auro-text-heading-default-margin;
+  margin: calc(#{$auro-size-md} + #{$auro-size-sm}) 0;
   font-weight: $auro-text-heading-default-weight;
   letter-spacing: $auro-text-heading-default-spacing;
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading { ... }"><code>#{$scope}.#{$prefix}heading { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading--display"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading--display">#{$scope}.#{$prefix}heading--display</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading--display {
   font-weight: $auro-text-heading-display-weight;
   font-size: $auro-text-heading-display-size-breakpoint-sm;
   line-height: $auro-text-heading-display-height-breakpoint-sm;
+  margin-top: 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-display-size-breakpoint-md;
@@ -241,6 +242,7 @@
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading--700 { ... }"><code>#{$scope}.#{$prefix}heading--700 { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading--700 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading--700 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading--700 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--700&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading--600"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading--600">#{$scope}.#{$prefix}heading--600</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading--600 {
   font-size: $auro-text-heading-600-size-breakpoint-sm;
   line-height: $auro-text-heading-600-height-breakpoint-sm;
+  margin: $auro-size-md 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-600-size-breakpoint-md;
@@ -254,6 +256,7 @@
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading--600 { ... }"><code>#{$scope}.#{$prefix}heading--600 { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading--600 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading--600 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading--600 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--600&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading--500"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading--500">#{$scope}.#{$prefix}heading--500</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading--500 {
   font-size: $auro-text-heading-500-size-breakpoint-sm;
   line-height: $auro-text-heading-500-height-breakpoint-sm;
+  margin: $auro-size-md 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-500-size-breakpoint-md;
@@ -267,9 +270,11 @@
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading--500 { ... }"><code>#{$scope}.#{$prefix}heading--500 { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading--500 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading--500 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading--500 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--500&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading--400"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading--400">#{$scope}.#{$prefix}heading--400</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading--400 {
   font-size: $auro-text-heading-400-size;
   line-height: $auro-text-heading-400-height;
+  margin: $auro-size-sm 0;
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading--400 { ... }"><code>#{$scope}.#{$prefix}heading--400 { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading--400 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading--400 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading--400 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--400&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading--300"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading--300">#{$scope}.#{$prefix}heading--300</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading--300 {
   font-size: $auro-text-heading-300-size;
   line-height: $auro-text-heading-300-height;
+  margin: $auro-size-sm 0;
 }</code>" data-collapsed="#{$scope}.#{$prefix}heading--300 { ... }"><code>#{$scope}.#{$prefix}heading--300 { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.heading--300 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .heading--300 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_heading--300 {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--300&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="normalize"><div class="container">normalize</div></h1><section class="main__sub-section" id="normalize-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="normalize-css-html#{$scope}"><h3 class="item__heading"><a class="item__name" href="#css-html#{$scope}">html#{$scope}</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>html#{$scope} {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */

diff --git a/src/_headings.scss b/src/_headings.scss
@@ -26,7 +26,7 @@
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/headings";
 ///
 #{$scope}.#{$prefix}heading {
-  margin: $auro-text-heading-default-margin;
+  margin: calc(#{$auro-size-md} + #{$auro-size-sm}) 0;
   font-weight: $auro-text-heading-default-weight;
   letter-spacing: $auro-text-heading-default-spacing;
 }
@@ -52,6 +52,7 @@
   font-weight: $auro-text-heading-display-weight;
   font-size: $auro-text-heading-display-size-breakpoint-sm;
   line-height: $auro-text-heading-display-height-breakpoint-sm;
+  margin-top: 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-display-size-breakpoint-md;
@@ -150,6 +151,7 @@
 #{$scope}.#{$prefix}heading--600 {
   font-size: $auro-text-heading-600-size-breakpoint-sm;
   line-height: $auro-text-heading-600-height-breakpoint-sm;
+  margin: $auro-size-md 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-600-size-breakpoint-md;
@@ -182,6 +184,7 @@
 #{$scope}.#{$prefix}heading--500 {
   font-size: $auro-text-heading-500-size-breakpoint-sm;
   line-height: $auro-text-heading-500-height-breakpoint-sm;
+  margin: $auro-size-md 0;
 
   @include auro_breakpoint--md {
     font-size: $auro-text-heading-500-size-breakpoint-md;
@@ -214,6 +217,7 @@
 #{$scope}.#{$prefix}heading--400 {
   font-size: $auro-text-heading-400-size;
   line-height: $auro-text-heading-400-height;
+  margin: $auro-size-sm 0;
 }
 
 /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
@@ -236,4 +240,5 @@
 #{$scope}.#{$prefix}heading--300 {
   font-size: $auro-text-heading-300-size;
   line-height: $auro-text-heading-300-height;
+  margin: $auro-size-sm 0;
 }