diff options
Diffstat (limited to 'src/scss')
| -rwxr-xr-x | src/scss/components/_figure.scss | 59 | ||||
| -rwxr-xr-x | src/scss/components/_post-actions.scss | 6 | ||||
| -rwxr-xr-x | src/scss/components/_post-header-cover.scss | 11 | ||||
| -rwxr-xr-x | src/scss/components/_post.scss | 19 | ||||
| -rwxr-xr-x | src/scss/layouts/_bottom-bar.scss | 7 | ||||
| -rwxr-xr-x | src/scss/layouts/_header.scss | 7 | ||||
| -rwxr-xr-x | src/scss/tranquilpeak.scss | 20 | ||||
| -rwxr-xr-x | src/scss/utils/mixins/_bottom-bar.scss | 3 | ||||
| -rw-r--r-- | src/scss/utils/mixins/_figure.scss | 17 | ||||
| -rwxr-xr-x | src/scss/utils/mixins/_header.scss | 34 | ||||
| -rwxr-xr-x | src/scss/utils/mixins/_post-header-cover.scss | 3 | ||||
| -rwxr-xr-x | src/scss/utils/mixins/_sidebar.scss | 6 |
12 files changed, 166 insertions, 26 deletions
diff --git a/src/scss/components/_figure.scss b/src/scss/components/_figure.scss index 33ac0d9..77f998e 100755 --- a/src/scss/components/_figure.scss +++ b/src/scss/components/_figure.scss @@ -45,7 +45,10 @@ &.figure--fullWidth { width: 100%; .figure-img { + width: 100%; margin: 0 auto; + transition: transform width .25s ease-in-out; + -webkit-transition: width .25s ease-in-out; } } } @@ -57,4 +60,58 @@ display: none; } } -}
\ No newline at end of file +} + +@media #{$large-only} { + // main[data-behavior="x"] .post.pushed .figure.figure--fullWidth + + #main { + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="1"] .pushed .figure, + &[data-behavior="2"] .pushed .figure { + @include figure-pushed-lg; + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .pushed .figure { + @include figure-pushed-md; + } + // Display bottom bar in large size and push it from the size of the large sidebar + &[data-behavior="4"] .pushed .figure, + &[data-behavior="5"] .pushed .figure { + @include figure-pushed-lg; + } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] { + @include figure-pushed-md; + } + } +} + +@media #{$xlarge-and-up} { + .pushed .figure { + // Display bottom bar in extra small size and push it from the size of the extra large sidebar + &[data-behavior="1"] .pushed .figure { + @include figure-pushed-xlg; + } + // Display bottom bar in small size and push it from the size of the large sidebar + &[data-behavior="2"] .pushed .figure { + @include figure-pushed-lg; + } + // Display bottom bar in medium size and push it from the size of the medium sidebar + &[data-behavior="3"] .pushed .figure { + @include figure-pushed-md; + } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="4"] .pushed .figure { + @include figure-pushed-xlg; + } + // Display bottom bar in large size and push it from the size of the extra large sidebar + &[data-behavior="5"] .pushed .figure { + @include figure-pushed-lg; + } + // Display bottom bar in large size and push it from the size of the medium sidebar + &[data-behavior="6"] .pushed .figure { + @include figure-pushed-md; + } + } +} diff --git a/src/scss/components/_post-actions.scss b/src/scss/components/_post-actions.scss index 599873b..a2899d7 100755 --- a/src/scss/components/_post-actions.scss +++ b/src/scss/components/_post-actions.scss @@ -41,6 +41,10 @@ width: 65%; // On very small screen `.post-actions-nav` will be above `.post-actions-share` z-index: map-get($z-indexes, c-post-bottom-bar) + 1; + @include sidebar-slide-animation; + // Eliminate any flickering of elements while they are in a state of being animated + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; li.post-action { float: right; @@ -86,4 +90,4 @@ .post-actions-wrap { display: none; } -}
\ No newline at end of file +} diff --git a/src/scss/components/_post-header-cover.scss b/src/scss/components/_post-header-cover.scss index 2c330ad..ffb2d88 100755 --- a/src/scss/components/_post-header-cover.scss +++ b/src/scss/components/_post-header-cover.scss @@ -26,13 +26,8 @@ // 100% minus header high, minus padding-top, minus padding bottom and minus 4px for perfect pixels height: 100%; z-index: map-get($z-indexes, 'c-post-header-cover'); - // Sidebar animation - // Transition style (push) - transition: transform .25s ease-in-out; - -webkit-transition: -webkit-transform .25s ease-in-out; - // Eliminate any flickering of elements while they are in a state of being animated - -webkit-backface-visibility: hidden; - -webkit-perspective: 1000; + transition: transform .25s ease-in-out, width .25s ease-in-out; + -webkit-transition: -webkit-transform .25s ease-in-out, width .25s ease-in-out; .post-header { display: table-cell; @@ -216,4 +211,4 @@ @include post-header-cover-pushed-md; } } -}
\ No newline at end of file +} diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index b0a34bb..92a377d 100755 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -3,6 +3,7 @@ width: 100%; display: inline-block; vertical-align: top; + @include sidebar-slide-animation; .post-header { .post-title { @@ -69,6 +70,22 @@ } } +@media #{$large-only} { + .post { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + } +} + +@media #{$xlarge-and-up} { + .post { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width) / 2}, 0, 0), 'webkit' 'moz'); + } + } +} + // Increase font size of the post's title on large screen (only for single post view) @media #{$large-and-up} { .post { @@ -85,4 +102,4 @@ .post-content { font-size: 1.7rem; } -}
\ No newline at end of file +} diff --git a/src/scss/layouts/_bottom-bar.scss b/src/scss/layouts/_bottom-bar.scss index d765623..e428146 100755 --- a/src/scss/layouts/_bottom-bar.scss +++ b/src/scss/layouts/_bottom-bar.scss @@ -9,8 +9,11 @@ border-top: 1px solid #eef2f8; padding: 0 15px; z-index: map-get($z-indexes, c-post-bottom-bar); - transition: transform .25s ease-in-out; - -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out, width .25s ease-in-out; + -webkit-transition: -webkit-transform .25s ease-in-out, width .25s ease-in-out; + // Eliminate any flickering of elements while they are in a state of being animated + -webkit-backface-visibility: hidden; + -webkit-perspective: 1000; } @media #{$small-and-down} { diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss index 6008759..04a4553 100755 --- a/src/scss/layouts/_header.scss +++ b/src/scss/layouts/_header.scss @@ -10,10 +10,7 @@ // used to animate the header on small screen with javascript //@include prefix(transition, top 0.25s ease-in-out, 'webkit' 'moz' 'ms' 'o'); z-index: map-get($z-indexes, l-header); - // Sidebar animation - // Transition style (push) - transition: transform .25s ease-in-out; - -webkit-transition: -webkit-transform .25s ease-in-out; + @include sidebar-slide-animation; // Eliminate any flickering of elements while they are in a state of being animated -webkit-backface-visibility: hidden; -webkit-perspective: 1000; @@ -34,6 +31,7 @@ width: 30px; height: 30px; color: map-get($header, color); + @include sidebar-slide-animation; .header-picture { display: block; @@ -54,6 +52,7 @@ font-size: $font-size-base; line-height: 55px; margin: 0; + @include sidebar-slide-animation; .header-title-link { color: map-get($header, color); diff --git a/src/scss/tranquilpeak.scss b/src/scss/tranquilpeak.scss index 33bef81..f83e1bd 100755 --- a/src/scss/tranquilpeak.scss +++ b/src/scss/tranquilpeak.scss @@ -6,6 +6,7 @@ 'utils/mixins/bottom-bar', 'utils/mixins/button', 'utils/mixins/category', + 'utils/mixins/figure', 'utils/mixins/form', 'utils/mixins/header', 'utils/mixins/main', @@ -20,14 +21,15 @@ 'base/base', 'base/custom'; -@import 'layouts/about', -'layouts/blog', -'layouts/bottom-bar', -'layouts/cover', -'layouts/footer', -'layouts/header', -'layouts/main', -'layouts/sidebar'; +@import + 'layouts/about', + 'layouts/blog', + 'layouts/bottom-bar', + 'layouts/cover', + 'layouts/footer', + 'layouts/header', + 'layouts/main', + 'layouts/sidebar'; @import 'components/alert', @@ -64,4 +66,4 @@ @import 'themes/hljs-tranquilpeak', - 'themes/hljs-custom';
\ No newline at end of file + 'themes/hljs-custom'; diff --git a/src/scss/utils/mixins/_bottom-bar.scss b/src/scss/utils/mixins/_bottom-bar.scss index 4552f3b..0f207ca 100755 --- a/src/scss/utils/mixins/_bottom-bar.scss +++ b/src/scss/utils/mixins/_bottom-bar.scss @@ -29,6 +29,7 @@ @mixin bottom-bar-pushed-md { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, md-screen-width)} - 15px * 2); } } @@ -36,11 +37,13 @@ @mixin bottom-bar-pushed-lg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, lg-screen-width)} - 15px * 2); } } /// Mixin helper to pushed bottom bar from extra large sidebar size @mixin bottom-bar-pushed-xlg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, xlg-screen-width)} - 15px * 2); } } diff --git a/src/scss/utils/mixins/_figure.scss b/src/scss/utils/mixins/_figure.scss new file mode 100644 index 0000000..71c720a --- /dev/null +++ b/src/scss/utils/mixins/_figure.scss @@ -0,0 +1,17 @@ +@mixin figure-pushed-md { + &.figure--fullWidth img.figure-img { + width: calc(100% - #{map-get($sidebar, md-screen-width)}); + } +} + +@mixin figure-pushed-lg { + &.figure--fullWidth img.figure-img { + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); + } +} + +@mixin figure-pushed-xlg { + &.figure--fullWidth img.figure-img { + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); + } +} diff --git a/src/scss/utils/mixins/_header.scss b/src/scss/utils/mixins/_header.scss index 4b0cd2f..03664e9 100755 --- a/src/scss/utils/mixins/_header.scss +++ b/src/scss/utils/mixins/_header.scss @@ -3,6 +3,18 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); } + @media #{$medium-and-up} { + .header-title { + &.pushed { + @include prefix(transform, translate3d(-#{(map-get($sidebar, md-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); + } + } + .header-right-picture { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + } + } + } } /// Mixin helper to push header from large sidebar size @@ -10,10 +22,32 @@ &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); } + @media #{$small-and-up} { + .header-title { + &.pushed { + @include prefix(transform, translate3d(-#{(map-get($sidebar, lg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); + } + } + .header-right-picture { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + } + } + } } /// Mixin helper to push header from extra large sidebar size @mixin header-pushed-xlg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); } + .header-title { + &.pushed { + @include prefix(transform, translate3d(-#{(map-get($sidebar, xlg-screen-width) / 2) - 1}, 0, 0), 'webkit' 'moz'); + } + } + .header-right-picture { + &.pushed { + @include prefix(transform, translate3d(-#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + } + } } diff --git a/src/scss/utils/mixins/_post-header-cover.scss b/src/scss/utils/mixins/_post-header-cover.scss index b2af42d..0f1fd05 100755 --- a/src/scss/utils/mixins/_post-header-cover.scss +++ b/src/scss/utils/mixins/_post-header-cover.scss @@ -29,6 +29,7 @@ @mixin post-header-cover-pushed-md { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, md-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, md-screen-width)}); } } @@ -36,6 +37,7 @@ @mixin post-header-cover-pushed-lg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, lg-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, lg-screen-width)}); } } @@ -43,5 +45,6 @@ @mixin post-header-cover-pushed-xlg { &.pushed { @include prefix(transform, translate3d(#{map-get($sidebar, xlg-screen-width)}, 0, 0), 'webkit' 'moz'); + width: calc(100% - #{map-get($sidebar, xlg-screen-width)}); } } diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss index d5ca2ec..f4b9b65 100755 --- a/src/scss/utils/mixins/_sidebar.scss +++ b/src/scss/utils/mixins/_sidebar.scss @@ -1,3 +1,9 @@ +// Mixin helper to animate sidebar transition (slide) +@mixin sidebar-slide-animation { + transition: transform .25s ease-in-out; + -webkit-transition: -webkit-transform .25s ease-in-out; +} + /// Mixin helper to display the sidebar in medium size @mixin sidebar-md { width: map-get($sidebar, md-screen-width); |