From 0c7ecb6f9dc64c8fe8e9156b1bd358662ca8b0cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Do=C4=9Fa=20G=C3=BCrdal?= Date: Wed, 18 Apr 2018 13:45:51 +0200 Subject: [PATCH] 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 --- .../BaseStyles/Mixins/_fontFace.styl | 4 +- .../DocumentDefault/BaseStyles/_buttons.styl | 44 ++++++---- .../DocumentDefault/BaseStyles/_forms.styl | 47 +++++------ .../DocumentDefault/BaseStyles/_layout.styl | 14 +++- .../BaseStyles/_typography.styl | 80 ++++++++++++++----- Components/DocumentDefault/Fonts/.gitkeep | 0 Components/DocumentDefault/functions.php | 10 +-- Components/DocumentDefault/index.twig | 2 - Components/LayoutMultiplePosts/style.styl | 2 - Components/LayoutSinglePost/style.styl | 2 - Components/_variables.styl | 24 +++--- 11 files changed, 137 insertions(+), 92 deletions(-) create mode 100644 Components/DocumentDefault/Fonts/.gitkeep delete mode 100644 Components/LayoutMultiplePosts/style.styl delete mode 100644 Components/LayoutSinglePost/style.styl diff --git a/Components/DocumentDefault/BaseStyles/Mixins/_fontFace.styl b/Components/DocumentDefault/BaseStyles/Mixins/_fontFace.styl index f9d4c3a1..2ad60ebb 100644 --- a/Components/DocumentDefault/BaseStyles/Mixins/_fontFace.styl +++ b/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) diff --git a/Components/DocumentDefault/BaseStyles/_buttons.styl b/Components/DocumentDefault/BaseStyles/_buttons.styl index 4478062c..72953416 100644 --- a/Components/DocumentDefault/BaseStyles/_buttons.styl +++ b/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% diff --git a/Components/DocumentDefault/BaseStyles/_forms.styl b/Components/DocumentDefault/BaseStyles/_forms.styl index 0ef152ce..5a804c6b 100644 --- a/Components/DocumentDefault/BaseStyles/_forms.styl +++ b/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 diff --git a/Components/DocumentDefault/BaseStyles/_layout.styl b/Components/DocumentDefault/BaseStyles/_layout.styl index 7db851c6..7a900cc5 100644 --- a/Components/DocumentDefault/BaseStyles/_layout.styl +++ b/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 diff --git a/Components/DocumentDefault/BaseStyles/_typography.styl b/Components/DocumentDefault/BaseStyles/_typography.styl index 094419b6..c325915a 100644 --- a/Components/DocumentDefault/BaseStyles/_typography.styl +++ b/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 diff --git a/Components/DocumentDefault/Fonts/.gitkeep b/Components/DocumentDefault/Fonts/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/Components/DocumentDefault/functions.php b/Components/DocumentDefault/functions.php index 8a738beb..419e8e04 100644 --- a/Components/DocumentDefault/functions.php +++ b/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); }); diff --git a/Components/DocumentDefault/index.twig b/Components/DocumentDefault/index.twig index c204b36a..0dca6b30 100644 --- a/Components/DocumentDefault/index.twig +++ b/Components/DocumentDefault/index.twig @@ -4,8 +4,6 @@ - - {{ wp_head }} diff --git a/Components/LayoutMultiplePosts/style.styl b/Components/LayoutMultiplePosts/style.styl deleted file mode 100644 index 6cf7a776..00000000 --- a/Components/LayoutMultiplePosts/style.styl +++ /dev/null @@ -1,2 +0,0 @@ -.flyntComponent[is='flynt-layout-multiple-posts'] - height: 100% diff --git a/Components/LayoutSinglePost/style.styl b/Components/LayoutSinglePost/style.styl deleted file mode 100644 index 26235422..00000000 --- a/Components/LayoutSinglePost/style.styl +++ /dev/null @@ -1,2 +0,0 @@ -.flyntComponent[is='flynt-layout-single-post'] - height: 100% diff --git a/Components/_variables.styl b/Components/_variables.styl index 7c4535d6..72999359 100644 --- a/Components/_variables.styl +++ b/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