mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-03 18:35:07 +01:00
layout tweaks
This commit is contained in:
parent
5e189b9311
commit
209ac51701
GPG Key ID:
BD3C1F3EDD7831FC
@ -26,7 +26,7 @@ var Search = (function(w, d) {
|
||||
// show search field
|
||||
_config.searcharea
|
||||
.removeClass('is-ready animation-bounceOutUp')
|
||||
.addClass('is-ready animation-slideDown')
|
||||
.addClass('is-ready animation-slidedown')
|
||||
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
_config.body.addClass('has-search-open');
|
||||
});
|
||||
@ -93,7 +93,7 @@ var Search = (function(w, d) {
|
||||
searchReset: function() {
|
||||
// revert all search elements
|
||||
_config.searcharea
|
||||
.removeClass('animation-slideDown')
|
||||
.removeClass('animation-slidedown')
|
||||
.addClass('animation-bounceOutUp')
|
||||
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
_config.body.removeClass('has-search-open');
|
||||
|
||||
@ -16,19 +16,20 @@ gpuacceleration()
|
||||
gpuacceleration()
|
||||
|
||||
|
||||
// Loading Thingy
|
||||
// Slide Up
|
||||
////////////////////////////////////
|
||||
|
||||
.loading
|
||||
@extend .gpuacceleration
|
||||
animation: loadingThingy .2s infinite
|
||||
|
||||
@keyframes loadingThingy
|
||||
@keyframes slideUp
|
||||
0%
|
||||
opacity: 1
|
||||
100%
|
||||
transform: translate3d(0, 100px, 0)
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
.animation-slideup
|
||||
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
|
||||
|
||||
//
|
||||
// Bounce
|
||||
@ -39,18 +40,14 @@ gpuacceleration()
|
||||
|
||||
// Down
|
||||
@keyframes slideDown
|
||||
0%, 60%, 75%, 90%, 100%
|
||||
// http://cubic-bezier.com/#.06,.85,.54,1.39
|
||||
transition-timing-function: cubic-bezier(.06,.85,.54,1)
|
||||
|
||||
0%
|
||||
transform: translate3d(0, -100px, 0)
|
||||
|
||||
100%
|
||||
transform: none
|
||||
|
||||
.animation-slideDown
|
||||
animation: slideDown .2s both
|
||||
.animation-slidedown
|
||||
animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
|
||||
|
||||
// Up
|
||||
@keyframes bounceOutUp
|
||||
|
||||
@ -53,6 +53,7 @@ a.btn
|
||||
background-color: transparent
|
||||
box-shadow: 0 1px 0 #fff
|
||||
transition: none
|
||||
outline: 0
|
||||
|
||||
&:focus
|
||||
outline: 0
|
||||
@ -72,7 +73,7 @@ a.btn
|
||||
&.col3
|
||||
margin-bottom: ($spacer/2)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
margin-bottom: 0
|
||||
span
|
||||
font-size: .9em
|
||||
@ -156,7 +157,7 @@ a.btn-primary
|
||||
display: block
|
||||
margin-top: 0
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
display: flex
|
||||
margin-top: -($gutter-space)
|
||||
|
||||
|
||||
@ -30,28 +30,31 @@ kbd
|
||||
box-shadow: inset 0 1px 0 rgba(#fff, .4)
|
||||
|
||||
pre
|
||||
@extend .breakoutviewport
|
||||
display: block
|
||||
padding: 0
|
||||
margin: 0 0 $spacer
|
||||
margin-bottom: $spacer
|
||||
line-height: $line-height
|
||||
color: $code-color
|
||||
background-color: $code-bg
|
||||
border-radius: $border-radius-base
|
||||
|
||||
// make 'em scrollable
|
||||
overflow: scroll
|
||||
-webkit-overflow-scrolling: touch
|
||||
max-height: 300px
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
max-height: 500px
|
||||
|
||||
@media $screen-md
|
||||
border-radius: $border-radius-base
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code
|
||||
white-space: pre
|
||||
overflow: auto
|
||||
display: block
|
||||
padding: ($spacer/2) 12px
|
||||
padding: ($spacer/2) $spacer
|
||||
font-size: inherit
|
||||
color: inherit
|
||||
background-color: transparent
|
||||
|
||||
@ -5,38 +5,20 @@
|
||||
//
|
||||
|
||||
.featured
|
||||
@extend .breakoutviewport
|
||||
padding-bottom: ($spacer*2)
|
||||
|
||||
.grid
|
||||
margin-bottom: 0
|
||||
|
||||
.grid__col
|
||||
&:first-child
|
||||
margin-left: -($spacer)
|
||||
&:last-child
|
||||
margin-right: -($spacer)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
padding-bottom: ($spacer*3)
|
||||
.grid__col
|
||||
padding-top: 0
|
||||
&:first-child
|
||||
margin-left: -($spacer * 2)
|
||||
&:last-child
|
||||
margin-right: -($spacer * 2)
|
||||
|
||||
@media $breakpoint3
|
||||
.grid__col
|
||||
&:first-child
|
||||
margin-left: -($spacer * 4)
|
||||
&:last-child
|
||||
margin-right: -($spacer * 4)
|
||||
|
||||
.hentry__teaser
|
||||
picture
|
||||
margin: 0
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
padding: ($spacer/3) 0
|
||||
max-width: 70%
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
max-width: 50%
|
||||
|
||||
.permalink-link
|
||||
|
||||
@ -7,11 +7,6 @@
|
||||
.hentry.format-photo
|
||||
@extend .textcenter
|
||||
|
||||
.hentry__teaser
|
||||
picture
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
|
||||
figure
|
||||
@extend .aligncenter
|
||||
position: relative
|
||||
@ -36,10 +31,10 @@
|
||||
left: -($spacer)
|
||||
top: $spacer
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
left: -($spacer * 2)
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
left: -($spacer * 4)
|
||||
|
||||
opacity: 0
|
||||
@ -57,7 +52,7 @@
|
||||
padding-top: 0
|
||||
padding-bottom: ($spacer*3)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
padding-top: 0
|
||||
padding-bottom: ($spacer*6)
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
&:first-child
|
||||
padding-top: 0
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
padding-top: ($spacer*3)
|
||||
padding-bottom: ($spacer*3)
|
||||
|
||||
@ -56,25 +56,17 @@
|
||||
|
||||
.hentry__teaser
|
||||
picture
|
||||
@extend .breakoutviewport
|
||||
max-width: none
|
||||
display: block
|
||||
margin: ($spacer*1.5)
|
||||
margin-left: -($spacer)
|
||||
margin-right: -($spacer)
|
||||
|
||||
@media $breakpoint2
|
||||
margin-left: -($spacer * 2)
|
||||
margin-right: -($spacer * 2)
|
||||
|
||||
@media $breakpoint3
|
||||
margin-left: -($spacer * 4)
|
||||
margin-right: -($spacer * 4)
|
||||
margin-top: ($spacer*1.5)
|
||||
margin-bottom: ($spacer*1.5)
|
||||
|
||||
img
|
||||
@extend .media-frame
|
||||
border-radius: 0
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
border-radius: $border-radius-base
|
||||
|
||||
.hentry__teaser--link
|
||||
@ -131,6 +123,7 @@
|
||||
.time
|
||||
margin-bottom: ($spacer*2)
|
||||
|
||||
|
||||
// Categories & Tags
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -66,21 +66,21 @@
|
||||
> .grid__col
|
||||
padding: $gutter-space 0 0 $gutter-space
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
.grid-small--gutters
|
||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
||||
|
||||
> .grid__col
|
||||
padding: $gutter-space 0 0 $gutter-space
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
.grid-medium--gutters
|
||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
||||
|
||||
> .grid__col
|
||||
padding: $gutter-space 0 0 $gutter-space
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
.grid-large--gutters
|
||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
flex: 0 0 82.5%
|
||||
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
.grid-small--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
@ -154,7 +154,7 @@
|
||||
flex: 0 0 82.5%
|
||||
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
.grid-medium--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
@ -185,7 +185,7 @@
|
||||
> .grid__col
|
||||
flex: 0 0 82.5%
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
.grid-large--fit
|
||||
> .grid__col
|
||||
flex: 1
|
||||
|
||||
@ -5,23 +5,30 @@
|
||||
//
|
||||
|
||||
.site__header
|
||||
width: 100%
|
||||
background: $body-bg
|
||||
margin-top: ($spacer/2)
|
||||
margin-bottom: ($spacer/2)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
margin-top: $spacer
|
||||
margin-bottom: $spacer
|
||||
|
||||
.grid
|
||||
@extend .breakoutviewport
|
||||
padding-left: $spacer
|
||||
padding-right: $spacer
|
||||
position: relative
|
||||
|
||||
@media $screen-md
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
> .banner,
|
||||
> .nav-main
|
||||
padding-top: 0
|
||||
|
||||
|
||||
|
||||
// Logo
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -33,7 +40,7 @@
|
||||
width: 47px
|
||||
height: 31px
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
width: 183px
|
||||
|
||||
@media $highDPI
|
||||
|
||||
@ -10,17 +10,18 @@
|
||||
padding: 0 $spacer
|
||||
width: 100%
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
padding: 0 ($spacer * 2)
|
||||
|
||||
.container
|
||||
max-width: 35em
|
||||
margin: 0 auto
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.site__document
|
||||
padding-top: ($spacer*2)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
padding-top: ($spacer*4)
|
||||
|
||||
|
||||
@ -34,9 +35,9 @@
|
||||
border-bottom: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
|
||||
|
||||
transform: translate3d(0,-($spacer*6.5),0)
|
||||
transform: translate3d(0,-($spacer*7.2),0)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
transform: translate3d(0,-($spacer*5),0)
|
||||
|
||||
.has-menu-open &
|
||||
@ -45,13 +46,13 @@
|
||||
.site__footer
|
||||
margin-top: -($spacer*6.5)
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
margin-top: 0
|
||||
|
||||
.has-menu-open &
|
||||
margin-top: 0
|
||||
|
||||
@media $breakpoint2 and (min-height: 650px)
|
||||
@media $screen-sm and (min-height: 650px)
|
||||
.site
|
||||
position: relative
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ img.aligncenter
|
||||
display: block
|
||||
margin: $spacer auto
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
img.alignleft
|
||||
margin: 0 $spacer $spacer 0
|
||||
img.alignright
|
||||
|
||||
@ -184,6 +184,7 @@ transition()
|
||||
padding: ($spacer/2) $spacer ($spacer/2) 100%
|
||||
margin-left: -100%
|
||||
|
||||
|
||||
// Lead paragraph
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -192,6 +193,33 @@ transition()
|
||||
line-height: ($spacer*1.15)
|
||||
|
||||
|
||||
// Layout breakout
|
||||
/////////////////////////////////////
|
||||
|
||||
breakoutviewport()
|
||||
margin-left: calc(-50vw + 50%)
|
||||
margin-right: calc(-50vw + 50%)
|
||||
|
||||
@media $screen-md
|
||||
breakoutviewport--base()
|
||||
|
||||
breakoutviewport--base()
|
||||
margin-left: -($gutter-space * 4)
|
||||
margin-right: -($gutter-space * 4)
|
||||
|
||||
breakoutviewport--full()
|
||||
margin-left: calc(-50vw + 50%)
|
||||
margin-right: calc(-50vw + 50%)
|
||||
|
||||
.breakoutviewport
|
||||
breakoutviewport()
|
||||
|
||||
.breakoutviewport--base
|
||||
breakoutviewport--base()
|
||||
|
||||
.breakoutviewport--full
|
||||
breakoutviewport--full()
|
||||
|
||||
// Button sizing
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -12,9 +12,12 @@
|
||||
display: inline-block
|
||||
margin: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
right: $spacer
|
||||
top: -($spacer/4)
|
||||
|
||||
@media $screen-md
|
||||
right: 0
|
||||
|
||||
&:focus
|
||||
outline: 0
|
||||
|
||||
@ -47,7 +50,6 @@
|
||||
padding: $spacer 0
|
||||
margin-top: $spacer
|
||||
margin-bottom: 0
|
||||
width: 100%
|
||||
background: $body-bg
|
||||
display: flex // .nav-popver overwrite
|
||||
margin-left: 0 // .grid overwrite
|
||||
@ -64,7 +66,7 @@
|
||||
@extend .category
|
||||
font-size: $font-size-small
|
||||
text-shadow: 0 1px 0 rgba(#fff, .5)
|
||||
padding: $padding-base-vertical $padding-base-horizontal
|
||||
padding: $padding-base-horizontal
|
||||
margin-bottom: 0
|
||||
margin-top: 0
|
||||
display: block
|
||||
|
||||
@ -14,11 +14,11 @@
|
||||
pointer-events: none
|
||||
|
||||
.search-btn
|
||||
right: 50px
|
||||
right: 70px
|
||||
padding: .65em .85em
|
||||
|
||||
.site-search
|
||||
margin-right: 4%
|
||||
@media $screen-md
|
||||
right: 50px
|
||||
|
||||
.search-close
|
||||
position: absolute
|
||||
@ -31,17 +31,27 @@
|
||||
.search-area
|
||||
@extend .transition
|
||||
position: absolute
|
||||
width: 100%
|
||||
left: 0
|
||||
top: -7px
|
||||
z-index: 3
|
||||
margin-left: ($spacer / 2)
|
||||
margin-right: ($spacer / 2)
|
||||
width: "calc(100% - %s)" % $spacer
|
||||
|
||||
// hidden by default
|
||||
display: none
|
||||
|
||||
@media $screen-sm
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
width: 100%
|
||||
|
||||
&.is-ready
|
||||
display: block
|
||||
|
||||
.form-control
|
||||
background: #fff
|
||||
|
||||
|
||||
.search-popover
|
||||
position: absolute
|
||||
@ -55,7 +65,7 @@
|
||||
overflow: auto
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
top: ($spacer * 3)
|
||||
|
||||
.search-results
|
||||
|
||||
@ -46,7 +46,7 @@ table tbody tr:hover th
|
||||
overflow-x: auto
|
||||
min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
||||
|
||||
@media (max-width: $screen-small-min)
|
||||
@media (max-width: $screen-xs-min)
|
||||
width: 100%
|
||||
margin-bottom: ($spacer * 0.75)
|
||||
overflow-y: hidden
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
html
|
||||
font-size: $font-size-root
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
font-size: $font-size-root-lg
|
||||
|
||||
body
|
||||
@ -35,7 +35,7 @@ body
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-moz-font-feature-settings: 'liga', 'kern'
|
||||
|
||||
letter-spacing: -0.01em
|
||||
letter-spacing: -.01em
|
||||
|
||||
.wf-active &
|
||||
letter-spacing: normal
|
||||
@ -67,7 +67,7 @@ h1, h2, h3, h4, h5, h6,
|
||||
line-height: $headings-line-height
|
||||
color: $headings-color
|
||||
font-weight: 500
|
||||
letter-spacing: -.09em
|
||||
letter-spacing: -.04em
|
||||
|
||||
.wf-active &
|
||||
font-weight: $headings-font-weight
|
||||
@ -87,27 +87,27 @@ h6, .h6
|
||||
|
||||
h1, .h1
|
||||
font-size: $font-size-h2
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
font-size: $font-size-h1
|
||||
|
||||
h2, .h2
|
||||
font-size: $font-size-h3
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
font-size: $font-size-h2
|
||||
|
||||
h3, .h3
|
||||
font-size: $font-size-h4
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
font-size: $font-size-h3
|
||||
|
||||
h4, .h4
|
||||
font-size: $font-size-h5
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
font-size: $font-size-h4
|
||||
|
||||
h5, .h5
|
||||
font-size: $font-size-h6
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
font-size: $font-size-h5
|
||||
|
||||
h6, .h6
|
||||
@ -278,10 +278,10 @@ blockquote
|
||||
position: relative
|
||||
padding-left: 20px
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
padding-left: 40px
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
padding-left: 60px
|
||||
|
||||
// quotation marks
|
||||
@ -293,10 +293,10 @@ blockquote
|
||||
left: -10px
|
||||
top: -20px
|
||||
|
||||
@media $breakpoint1
|
||||
@media $screen-xs
|
||||
left: 0
|
||||
|
||||
@media $breakpoint3
|
||||
@media $screen-lg
|
||||
top: -30px
|
||||
|
||||
p:last-child
|
||||
|
||||
@ -139,13 +139,15 @@ $kbd-color = $code-color
|
||||
// Responsive breakpoints
|
||||
/////////////////////////////////////
|
||||
|
||||
$screen-small-min = 30em
|
||||
$screen-medium-min = 40.625em
|
||||
$screen-large-min = 87.500em
|
||||
$screen-xs-min = 30em
|
||||
$screen-sm-min = 40.625em
|
||||
$screen-md-min = 60em
|
||||
$screen-lg-min = 87.500em
|
||||
|
||||
$breakpoint1 = 'only screen and (min-width: 30em)'
|
||||
$breakpoint2 = 'only screen and (min-width: 40.625em)'
|
||||
$breakpoint3 = 'only screen and (min-width: 87.500em)'
|
||||
$screen-xs = 'only screen and (min-width: 30em)'
|
||||
$screen-sm = 'only screen and (min-width: 40.625em)'
|
||||
$screen-md = 'only screen and (min-width: 60em)'
|
||||
$screen-lg = 'only screen and (min-width: 87.500em)'
|
||||
|
||||
|
||||
// High dpi media query
|
||||
|
||||
@ -72,7 +72,7 @@ body.vex-open
|
||||
padding: 0
|
||||
position: relative
|
||||
width: 100%
|
||||
max-width: $screen-small-min
|
||||
max-width: $screen-xs-min
|
||||
border-radius: $border-radius-base
|
||||
border: 1px solid alpha($brand-grey-light, .2)
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
@extend .divider-bottom
|
||||
color: $text-color-light
|
||||
|
||||
@media $breakpoint2
|
||||
@media $screen-sm
|
||||
max-width: 60%
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
|
||||
// Core CSS
|
||||
@import '_kremalicious/typography'
|
||||
@import '_kremalicious/animations'
|
||||
@import '_kremalicious/grid'
|
||||
@import '_kremalicious/layout'
|
||||
@import '_kremalicious/forms'
|
||||
@ -25,7 +26,6 @@
|
||||
@import '_kremalicious/code'
|
||||
@import '_kremalicious/syntax'
|
||||
@import '_kremalicious/alerts'
|
||||
@import '_kremalicious/animations'
|
||||
@import '_kremalicious/vex'
|
||||
|
||||
// Content
|
||||
|
||||
Loading…
Reference in New Issue
Block a user