feat(Components): update DocumentDefault, Layouts and variables (#271)

* feat(DocumentDefault): add updated component

* refactor(LayoutMultiplePosts,LayoutSinglePost): remove style files

* feat(variables): add new and improved variables file

Components/DocumentDefault/BaseStyles/Mixins/_fontFace.styl

@@ -2,8 +2,8 @@ fontFace($family, $file, $weight = 'normal', $style = 'normal', $woff2 = true, $
   @font-face
     font-family: $family
     if $woff2
-      src: url($basePath + $file + '.woff2') format('woff2'), url($basePath + $file + '.woff') format('woff'), url($basePath + $file + '.ttf') format('truetype')
+      src: url($basePath + $file + '.woff2') format('woff2'), url($basePath + $file + '.woff') format('woff')
     else
-      src: url($basePath + $file + '.woff') format('woff'), url($basePath + $file + '.ttf') format('truetype')
+      src: url($basePath + $file + '.woff') format('woff')
     font-style: unquote($style)
     font-weight: unquote($weight)

Components/DocumentDefault/BaseStyles/_buttons.styl

@@ -1,28 +1,38 @@
-$colorBrand = lookup('$globalColorBrand') || #254fc7
-$colorText = lookup('$globalColorText') || #153cab
-
-[is='flynt-document-default']
-  .btn-primary
-    background-color: $colorBrand
-    color: $colorText
-
-    &:hover
-      background-color: $colorBrand
-      text-decoration: none
+$colorBackgroundPrimary = lookup('$globalColorAccent') || #F98928
+$colorTextPrimary = lookup('$globalColorText') || #000000
+$rupture.anti-overlap = lookup('$globalRuptureAntiOverlap') || -1px
+$rupture.scale = lookup('$globalRuptureScale') || (0 426px 576px 768px 992px 1200px)
 
+.flyntComponent[is='flynt-document-default']
   .btn
+    appearance: none
     border-radius: 5px
     border: 1px solid
+    cursor: pointer
     display: inline-block
-    margin: 5px 0
+    font-size: inherit
+    line-height: inherit
+    margin: 0
+    outline: 0
     padding: 10px 14px
+    text-decoration: none
     transition: background-color .3s ease
 
+    &--primary
+      background-color: $colorBackgroundPrimary
+      border-color: darken($colorBackgroundPrimary, 20)
+
+      &,
+      &:hover,
+      &:focus
+        color: $colorTextPrimary
+
+      &:hover,
+      &:focus
+        background-color: lighten($colorBackgroundPrimary, 10)
+
     &--block
       display: block
+      margin-bottom: 16px
       text-align: center
-
-    &:focus,
-    &:active
-      box-shadow: none
-      outline: 0
+      width: 100%

Components/DocumentDefault/BaseStyles/_forms.styl

@@ -1,37 +1,26 @@
+$rupture.anti-overlap = lookup('$globalRuptureAntiOverlap') || -1px
+$rupture.scale = lookup('$globalRuptureScale') || (0 426px 576px 768px 992px 1200px)
+
 .flyntComponent[is='flynt-document-default']
-  form
-    width: 100%
+  fieldset
+    margin: 0 0 16px
 
+  input,
   label,
+  select,
+  textarea
+    font-size: inherit
+    font-family: inherit
+
   input,
-  textarea,
-  select
+  select,
+  textarea
     display: inline-block
-    font-size: 12px
-    margin-bottom: 10px
     padding: 10px
-    width: 100%
+    margin: 0 0 16px
 
-  input[type='submit'],
-  select
-    width: auto
-
-  .checkbox
-    margin-bottom: 10px
-    margin-top: 0
-
-  input[type='checkbox']
+  input[type='checkbox'],
+  input[type='radio']
     cursor: pointer
-    height: 14px
-    left: 20px
-    outline: 0
-    padding: 0
-    top: -3px
-    width: 14px
-
-  .label
-    font-size: 12px
-    font-weight: normal
-    margin-left: 20px
-    padding: 0
-    white-space: normal
+    position: relative
+    top: -2px

Components/DocumentDefault/BaseStyles/_layout.styl

@@ -1,6 +1,18 @@
+$colorBackground = lookup('$globalColorBackground') || #ffffff
+$colorLine = lookup('$globalColorAccent') || #F98928
+$rupture.anti-overlap = lookup('$globalRuptureAntiOverlap') || -1px
+$rupture.scale = lookup('$globalRuptureScale') || (0 426px 576px 768px 992px 1200px)
+
 .flyntComponent[is='flynt-document-default']
   &,
   body
-    height: 100%
+    background-color: $colorBackground
     margin: 0
     padding: 0
+
+  hr
+    background-color: $colorLine
+    border: 0
+    display: block
+    height: 1px
+    margin: 24px 0

Components/DocumentDefault/BaseStyles/_typography.styl

@@ -1,45 +1,81 @@
-$colorBackground = lookup('$globalColorBackground') || #fff
-$colorBrand = lookup('$globalColorBrand') || #254fc7
-$colorHeadline = lookup('$globalColorHeadline') || #153cab
-$colorText = lookup('$globalColorText') || #153cab
+$colorHeadline = lookup('$globalColorHeadline') || #000000
+$colorLink = lookup('$globalColorAccent') || #F98928
+$colorText = lookup('$globalColorText') || #000000
+$rupture.anti-overlap = lookup('$globalRuptureAntiOverlap') || -1px
+$rupture.scale = lookup('$globalRuptureScale') || (0 426px 576px 768px 992px 1200px)
 
 .flyntComponent[is='flynt-document-default']
   body
-    background-color: $colorBackground
+    -moz-osx-font-smoothing: grayscale
+    -webkit-font-smoothing: antialiased
     color: $colorText
     font-family: Helvetica, Arial, sans-serif
-    font-size: 14px
-    line-height: 1.3
+    font-size: 16px
+    line-height: 1.375
 
   h1, .h1,
   h2, .h2,
   h3, .h3,
   h4, .h4,
-  h5, .h5
+  h5, .h5,
+  h6, .h6
     color: $colorHeadline
     font-weight: normal
+    margin: 0
 
   h1, .h1
-    font-size: 40px
+    font-size: 32px
+    margin-bottom: 12px
+    padding-top: 12px
+
+    +below('s')
+      font-size: 24px
 
   h2, .h2
-    font-size: 30px
+    font-size: 24px
+    margin-bottom: 8px
+    padding-top: 8px
 
-  h3, .h3
-    font-size: 25px
+    +below('s')
+      font-size: 18px
 
-  h4, .h4
+  h3, .h3
     font-size: 18px
+    margin-bottom: 6px
+    padding-top: 6px
 
-  h5, .h5
-    font-size: 14px
+    +below('s')
+      font-size: 16px
 
-  p, .paragraph
-    margin: 15px 0
+  h4, .h4,
+  h5, .h5,
+  h6, .h6
+    font-size: 16px
+    margin-bottom: 4px
+    padding-top: 4px
 
-  a, .link
-    color: $colorBrand
+  a
+    &, &:hover
+      color: $colorLink
 
-    &:hover
-      color: $colorBrand
-      text-decoration: underline
+  dt
+    font-weight: bold
+
+  p,
+  ul,
+  ol,
+  dl,
+  dd
+    margin: 0 0 16px
+
+  ul,
+  ol,
+  dd
+    padding-left: 20px
+
+  blockquote
+    margin: 0 0 16px
+    padding-left: 40px
+
+  small
+    font-size: 14px

Components/DocumentDefault/functions.php

@@ -38,12 +38,10 @@
 add_filter('Flynt/addComponentData?name=DocumentDefault', function ($data) {
     $context = Timber::get_context();
 
-    $output = array(
-    'appleTouchIcon180x180Path' => get_template_directory_uri() . '/apple-touch-icon-180x180.png',
-    'faviconPath' => get_template_directory_uri() . '/favicon.png',
-    'feedTitle' => $context['site']->name . ' ' . __('Feed', 'flynt-starter-theme'),
-    'dir' => is_rtl() ? 'rtl' : 'ltr'
-    );
+    $output = [
+        'feedTitle' => $context['site']->name . ' ' . __('Feed', 'flynt-starter-theme'),
+        'dir' => is_rtl() ? 'rtl' : 'ltr'
+    ];
 
     return array_merge($context, $data, $output);
 });

Components/DocumentDefault/index.twig

@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
-    <link href="{{ faviconPath | e('esc_url') }}" rel="shortcut icon" type="image/png">
-    <link rel="apple-touch-icon" href="{{ appleTouchIcon180x180Path | e('esc_url') }}">
     <link rel="alternate" type="application/rss+xml" title="{{ feedTitle }}" href="{{ site.rss2 | e('esc_url') }}">
     {{ wp_head }}
   </head>

Components/_variables.styl

@@ -1,12 +1,18 @@
-$rupture = rupture
+$rupture                  = rupture
 
-$globalRuptureScale = 0 575px 767px 991px 1199px
+$globalContainerMaxWidth  = 1140px
+$globalContainerPadding   = 15px
+$globalGutterWidth        = 2.5
 $globalRuptureAntiOverlap = -1px
-$globalContainerMaxWidth = 1140px
-$globalContainerPadding = 15px
-$globalGutterWidth = 1.5
+$globalRuptureScale       = 0 426px 576px 768px 992px 1200px
 
-$globalColorBackground = #fff
-$globalColorBrand = #254fc7
-$globalColorHeadline = #153cab
-$globalColorText = #000
+$globalColorBackground    = #ffffff
+$globalColorBrand         = #91C6C4
+$globalColorAccent        = #F98928
+$globalColorHeadline      = #000000
+$globalColorText          = #000000
+
+// set jeet defaults
+if $jeet
+  $jeet.gutter              = $globalGutterWidth
+  $jeet.max-width           = $globalContainerMaxWidth