From c20ea09b33c1f829c628edd845e96cc574afe825 Mon Sep 17 00:00:00 2001 From: Frankie Jarrett Date: Thu, 8 Sep 2016 18:11:07 -0500 Subject: [PATCH] Add post meta styles for mobile --- .dev/sass/partials/_posts-and-pages.scss | 77 +++++++++++++++--------- editor-style-rtl.css | 10 +++ editor-style.css | 10 +++ style-rtl.css | 10 +++ style.css | 10 +++ 5 files changed, 87 insertions(+), 30 deletions(-) diff --git a/.dev/sass/partials/_posts-and-pages.scss b/.dev/sass/partials/_posts-and-pages.scss index 36cbf94..9a4bd88 100644 --- a/.dev/sass/partials/_posts-and-pages.scss +++ b/.dev/sass/partials/_posts-and-pages.scss @@ -1,15 +1,16 @@ .sticky {} .no-results, -.not-found{ - .page-header{ +.not-found { + .page-header { margin-bottom: 1em; } } .hentry { margin-bottom: 3em; - .attachment-basis-featured{ + + .attachment-basis-featured { width: 100%; height: auto; } @@ -19,7 +20,7 @@ } } -.featured-image{ +.featured-image { margin-bottom: 1em; margin-bottom: 1.5rem; } @@ -63,12 +64,11 @@ } @media #{$large-up} { - font-size: rem-calc(35); + font-size: rem-calc(35); } - } -.entry-title, .archive-title{ +.entry-title, .archive-title { margin-bottom: .25em; font-size: rem-calc(25); font-weight: lighter; @@ -79,7 +79,7 @@ } @media #{$large-up} { - font-size: rem-calc(40); + font-size: rem-calc(40); } a { @@ -88,18 +88,19 @@ } } -.archive-title{ +.archive-title { margin-bottom: 1em; margin-bottom: 2rem; } -.entry-footer{ +.entry-footer { color: $small-font-color; font-family: $header-font-family; font-size: rem-calc(14); + @include clearfix; - a{ + a { color: $primary-color; &:hover, @@ -118,14 +119,13 @@ .comments-link { display: block; font-size: rem-calc(11.75px); - text-transform: uppercase; - letter-spacing: 1px; + text-transform: uppercase; + letter-spacing: 1px; } .comments-link a { vertical-align: top; } - } .entry-meta { @@ -135,20 +135,30 @@ font-family: $sans-font-family; text-transform: uppercase; letter-spacing: 1px; + @include clearfix; .posted-date, .posted-author, .comments-number { margin-right: 20px; + + &:last-child { + margin-right: 0; + } + + @media #{$small-only} { + display: block; + margin-right: 0; + } } - i{ + i { vertical-align: middle; line-height: .8; } - .has-post-thumbnail &{ + .has-post-thumbnail & { border-bottom-width: 0; } } @@ -158,7 +168,7 @@ margin-right: 1em; margin-right: 1rem; - @media #{$small-only}{ + @media #{$small-only} { margin-bottom: 10px; } } @@ -176,7 +186,6 @@ line-height: 2; } - span { -ms-word-wrap: break-word; word-wrap: break-word; @@ -187,7 +196,7 @@ } } -.post-format{ +.post-format { color: $primary-color; text-transform: uppercase; font-family: $sans-font-family; @@ -195,7 +204,7 @@ font-weight: bold; } -.more-link{ +.more-link { font-family: $header-font-family; font-weight: normal; border-radius: $global-radius; @@ -232,15 +241,16 @@ article.format-link { left: 0; right: 0; bottom: 0; - width: 100%!important; - height: 100%!important; + width: 100% !important; + height: 100% !important; } .mejs-container { - width: 100%!important; - height: 100%!important; + width: 100% !important; + height: 100% !important; } } + section > h2 { font-size: 20px; font-weight: lighter; @@ -252,30 +262,35 @@ section > h2 { @media #{$medium-up} { font-size: 24px; padding-bottom: 11px; - border-bottom: 2px solid rgba(117,117,117,0.28); + border-bottom: 2px solid rgba(117, 117, 117, 0.28); } @media #{$large-up} { - font-size: 30px; - padding-bottom: 18px + font-size: 30px; + padding-bottom: 18px; } } section.error-404 { text-align: center; padding: 50px; + p { color: $body-font-color; font-weight: lighter; } + @media #{$medium-up} { padding: 100px 0; + p { font-size: 20px; } + .search-form { padding: 0 100px; } + .search-field { font-size: 24px; line-height: 54px; @@ -283,12 +298,14 @@ section.error-404 { padding: 0 15px; background: #f9f9f9; } + .search-submit { font-size: 24px; - font-weight: bold; - line-height: 54px; - height: 56px; + font-weight: bold; + line-height: 54px; + height: 56px; background: #f9f9f9; + &:hover { background: $secondary-color; } diff --git a/editor-style-rtl.css b/editor-style-rtl.css index 11ca062..2dd0a59 100644 --- a/editor-style-rtl.css +++ b/editor-style-rtl.css @@ -903,6 +903,16 @@ legend { .entry-meta .posted-author, .entry-meta .comments-number { margin-left: 20px; } + .entry-meta .posted-date:last-child, + .entry-meta .posted-author:last-child, + .entry-meta .comments-number:last-child { + margin-left: 0; } + @media only screen and (max-width: 40em) { + .entry-meta .posted-date, + .entry-meta .posted-author, + .entry-meta .comments-number { + display: block; + margin-left: 0; } } .entry-meta i { vertical-align: middle; line-height: .8; } diff --git a/editor-style.css b/editor-style.css index 18be02d..ca297f7 100644 --- a/editor-style.css +++ b/editor-style.css @@ -903,6 +903,16 @@ legend { .entry-meta .posted-author, .entry-meta .comments-number { margin-right: 20px; } + .entry-meta .posted-date:last-child, + .entry-meta .posted-author:last-child, + .entry-meta .comments-number:last-child { + margin-right: 0; } + @media only screen and (max-width: 40em) { + .entry-meta .posted-date, + .entry-meta .posted-author, + .entry-meta .comments-number { + display: block; + margin-right: 0; } } .entry-meta i { vertical-align: middle; line-height: .8; } diff --git a/style-rtl.css b/style-rtl.css index 3c18def..8707ac0 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2694,6 +2694,16 @@ body.no-max-width .main-navigation { .entry-meta .posted-author, .entry-meta .comments-number { margin-left: 20px; } + .entry-meta .posted-date:last-child, + .entry-meta .posted-author:last-child, + .entry-meta .comments-number:last-child { + margin-left: 0; } + @media only screen and (max-width: 40em) { + .entry-meta .posted-date, + .entry-meta .posted-author, + .entry-meta .comments-number { + display: block; + margin-left: 0; } } .entry-meta i { vertical-align: middle; line-height: .8; } diff --git a/style.css b/style.css index fdfa7a2..b2eeed0 100644 --- a/style.css +++ b/style.css @@ -2694,6 +2694,16 @@ body.no-max-width .main-navigation { .entry-meta .posted-author, .entry-meta .comments-number { margin-right: 20px; } + .entry-meta .posted-date:last-child, + .entry-meta .posted-author:last-child, + .entry-meta .comments-number:last-child { + margin-right: 0; } + @media only screen and (max-width: 40em) { + .entry-meta .posted-date, + .entry-meta .posted-author, + .entry-meta .comments-number { + display: block; + margin-right: 0; } } .entry-meta i { vertical-align: middle; line-height: .8; }