m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 11:25:07 +01:00
Code

layout tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-06-09 19:25:01 +02:00
parent 5e189b9311
commit 209ac51701
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
21 changed files with 133 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/js/_search.js
View File

@ -26,7 +26,7 @@ var Search = (function(w, d) {
// show search field // show search field
_config.searcharea _config.searcharea
.removeClass('is-ready animation-bounceOutUp') .removeClass('is-ready animation-bounceOutUp')
.addClass('is-ready animation-slideDown') .addClass('is-ready animation-slidedown')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){ .on('animationend webkitAnimationEnd oAnimationEnd', function(){
_config.body.addClass('has-search-open'); _config.body.addClass('has-search-open');
}); });
@ -93,7 +93,7 @@ var Search = (function(w, d) {
searchReset: function() { searchReset: function() {
// revert all search elements // revert all search elements
_config.searcharea _config.searcharea
.removeClass('animation-slideDown') .removeClass('animation-slidedown')
.addClass('animation-bounceOutUp') .addClass('animation-bounceOutUp')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){ .on('animationend webkitAnimationEnd oAnimationEnd', function(){
_config.body.removeClass('has-search-open'); _config.body.removeClass('has-search-open');

25
_src/_assets/styl/_kremalicious/animations.styl
View File

@ -16,19 +16,20 @@ gpuacceleration()
gpuacceleration() gpuacceleration()
// Loading Thingy // Slide Up
//////////////////////////////////// ////////////////////////////////////
.loading @keyframes slideUp
@extend .gpuacceleration
animation: loadingThingy .2s infinite
@keyframes loadingThingy
0% 0%
opacity: 1 transform: translate3d(0, 100px, 0)
100%
opacity: 0 opacity: 0
100%
transform: translate3d(0, 0, 0)
opacity: 1
.animation-slideup
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
// //
// Bounce // Bounce
@ -39,18 +40,14 @@ gpuacceleration()
// Down // Down
@keyframes slideDown @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% 0%
transform: translate3d(0, -100px, 0) transform: translate3d(0, -100px, 0)
100% 100%
transform: none transform: none
.animation-slideDown .animation-slidedown
animation: slideDown .2s both animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
// Up // Up
@keyframes bounceOutUp @keyframes bounceOutUp

5
_src/_assets/styl/_kremalicious/buttons.styl
View File

@ -53,6 +53,7 @@ a.btn
background-color: transparent background-color: transparent
box-shadow: 0 1px 0 #fff box-shadow: 0 1px 0 #fff
transition: none transition: none
outline: 0
&:focus &:focus
outline: 0 outline: 0
@ -72,7 +73,7 @@ a.btn
&.col3 &.col3
margin-bottom: ($spacer/2) margin-bottom: ($spacer/2)
@media $breakpoint2 @media $screen-sm
margin-bottom: 0 margin-bottom: 0
span span
font-size: .9em font-size: .9em
@ -156,7 +157,7 @@ a.btn-primary
display: block display: block
margin-top: 0 margin-top: 0
@media $breakpoint1 @media $screen-xs
display: flex display: flex
margin-top: -($gutter-space) margin-top: -($gutter-space)

11
_src/_assets/styl/_kremalicious/code.styl
View File

@ -30,28 +30,31 @@ kbd
box-shadow: inset 0 1px 0 rgba(#fff, .4) box-shadow: inset 0 1px 0 rgba(#fff, .4)
pre pre
@extend .breakoutviewport
display: block display: block
padding: 0 padding: 0
margin: 0 0 $spacer margin-bottom: $spacer
line-height: $line-height line-height: $line-height
color: $code-color color: $code-color
background-color: $code-bg background-color: $code-bg
border-radius: $border-radius-base
// make 'em scrollable // make 'em scrollable
overflow: scroll overflow: scroll
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch
max-height: 300px max-height: 300px
@media $breakpoint2 @media $screen-sm
max-height: 500px max-height: 500px
@media $screen-md
border-radius: $border-radius-base
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code code
white-space: pre white-space: pre
overflow: auto overflow: auto
display: block display: block
padding: ($spacer/2) 12px padding: ($spacer/2) $spacer
font-size: inherit font-size: inherit
color: inherit color: inherit
background-color: transparent background-color: transparent

24
_src/_assets/styl/_kremalicious/content-featured.styl
View File

@ -5,38 +5,20 @@
// //
.featured .featured
@extend .breakoutviewport
padding-bottom: ($spacer*2) padding-bottom: ($spacer*2)
.grid .grid
margin-bottom: 0 margin-bottom: 0
.grid__col @media $screen-sm
&:first-child
margin-left: -($spacer)
&:last-child
margin-right: -($spacer)
@media $breakpoint2
padding-bottom: ($spacer*3) 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 .hentry__teaser
picture picture
margin: 0 margin: 0
@media $breakpoint1 @media $screen-xs
margin-left: 0 margin-left: 0
margin-right: 0 margin-right: 0

2
_src/_assets/styl/_kremalicious/content-link.styl
View File

@ -11,7 +11,7 @@
padding: ($spacer/3) 0 padding: ($spacer/3) 0
max-width: 70% max-width: 70%
@media $breakpoint2 @media $screen-sm
max-width: 50% max-width: 50%
.permalink-link .permalink-link

11
_src/_assets/styl/_kremalicious/content-photo.styl
View File

@ -7,11 +7,6 @@
.hentry.format-photo .hentry.format-photo
@extend .textcenter @extend .textcenter
.hentry__teaser
picture
margin-top: 0
margin-bottom: 0
figure figure
@extend .aligncenter @extend .aligncenter
position: relative position: relative
@ -36,10 +31,10 @@
left: -($spacer) left: -($spacer)
top: $spacer top: $spacer
@media $breakpoint2 @media $screen-sm
left: -($spacer * 2) left: -($spacer * 2)
@media $breakpoint3 @media $screen-lg
left: -($spacer * 4) left: -($spacer * 4)
opacity: 0 opacity: 0
@ -57,7 +52,7 @@
padding-top: 0 padding-top: 0
padding-bottom: ($spacer*3) padding-bottom: ($spacer*3)
@media $breakpoint2 @media $screen-sm
padding-top: 0 padding-top: 0
padding-bottom: ($spacer*6) padding-bottom: ($spacer*6)

19
_src/_assets/styl/_kremalicious/content.styl
View File

@ -28,7 +28,7 @@
&:first-child &:first-child
padding-top: 0 padding-top: 0
@media $breakpoint2 @media $screen-sm
padding-top: ($spacer*3) padding-top: ($spacer*3)
padding-bottom: ($spacer*3) padding-bottom: ($spacer*3)
@ -56,25 +56,17 @@
.hentry__teaser .hentry__teaser
picture picture
@extend .breakoutviewport
max-width: none max-width: none
display: block display: block
margin: ($spacer*1.5) margin-top: ($spacer*1.5)
margin-left: -($spacer) margin-bottom: ($spacer*1.5)
margin-right: -($spacer)
@media $breakpoint2
margin-left: -($spacer * 2)
margin-right: -($spacer * 2)
@media $breakpoint3
margin-left: -($spacer * 4)
margin-right: -($spacer * 4)
img img
@extend .media-frame @extend .media-frame
border-radius: 0 border-radius: 0
@media $breakpoint2 @media $screen-sm
border-radius: $border-radius-base border-radius: $border-radius-base
.hentry__teaser--link .hentry__teaser--link
@ -131,6 +123,7 @@
.time .time
margin-bottom: ($spacer*2) margin-bottom: ($spacer*2)
// Categories & Tags // Categories & Tags
///////////////////////////////////// /////////////////////////////////////

12
_src/_assets/styl/_kremalicious/grid.styl
View File

@ -66,21 +66,21 @@
> .grid__col > .grid__col
padding: $gutter-space 0 0 $gutter-space padding: $gutter-space 0 0 $gutter-space
@media $breakpoint1 @media $screen-xs
.grid-small--gutters .grid-small--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col > .grid__col
padding: $gutter-space 0 0 $gutter-space padding: $gutter-space 0 0 $gutter-space
@media $breakpoint2 @media $screen-sm
.grid-medium--gutters .grid-medium--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col > .grid__col
padding: $gutter-space 0 0 $gutter-space padding: $gutter-space 0 0 $gutter-space
@media $breakpoint3 @media $screen-lg
.grid-large--gutters .grid-large--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space)) margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
@ -122,7 +122,7 @@
flex: 0 0 82.5% flex: 0 0 82.5%
@media $breakpoint1 @media $screen-xs
.grid-small--fit .grid-small--fit
> .grid__col > .grid__col
flex: 1 flex: 1
@ -154,7 +154,7 @@
flex: 0 0 82.5% flex: 0 0 82.5%
@media $breakpoint2 @media $screen-sm
.grid-medium--fit .grid-medium--fit
> .grid__col > .grid__col
flex: 1 flex: 1
@ -185,7 +185,7 @@
> .grid__col > .grid__col
flex: 0 0 82.5% flex: 0 0 82.5%
@media $breakpoint3 @media $screen-lg
.grid-large--fit .grid-large--fit
> .grid__col > .grid__col
flex: 1 flex: 1

13
_src/_assets/styl/_kremalicious/header.styl
View File

@ -5,23 +5,30 @@
// //
.site__header .site__header
width: 100%
background: $body-bg background: $body-bg
margin-top: ($spacer/2) margin-top: ($spacer/2)
margin-bottom: ($spacer/2) margin-bottom: ($spacer/2)
@media $breakpoint2 @media $screen-sm
margin-top: $spacer margin-top: $spacer
margin-bottom: $spacer margin-bottom: $spacer
.grid .grid
@extend .breakoutviewport
padding-left: $spacer
padding-right: $spacer
position: relative position: relative
@media $screen-md
padding-left: 0
padding-right: 0
> .banner, > .banner,
> .nav-main > .nav-main
padding-top: 0 padding-top: 0
// Logo // Logo
///////////////////////////////////// /////////////////////////////////////
@ -33,7 +40,7 @@
width: 47px width: 47px
height: 31px height: 31px
@media $breakpoint2 @media $screen-sm
width: 183px width: 183px
@media $highDPI @media $highDPI

15
_src/_assets/styl/_kremalicious/layout.styl
View File

@ -10,17 +10,18 @@
padding: 0 $spacer padding: 0 $spacer
width: 100% width: 100%
@media $breakpoint2 @media $screen-sm
padding: 0 ($spacer * 2) padding: 0 ($spacer * 2)
.container .container
max-width: 35em max-width: 35em
margin: 0 auto margin-left: auto
margin-right: auto
.site__document .site__document
padding-top: ($spacer*2) padding-top: ($spacer*2)
@media $breakpoint2 @media $screen-sm
padding-top: ($spacer*4) padding-top: ($spacer*4)
@ -34,9 +35,9 @@
border-bottom: 1px solid rgba(255,255,255,.7) 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) 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) transform: translate3d(0,-($spacer*5),0)
.has-menu-open & .has-menu-open &
@ -45,13 +46,13 @@
.site__footer .site__footer
margin-top: -($spacer*6.5) margin-top: -($spacer*6.5)
@media $breakpoint2 @media $screen-sm
margin-top: 0 margin-top: 0
.has-menu-open & .has-menu-open &
margin-top: 0 margin-top: 0
@media $breakpoint2 and (min-height: 650px) @media $screen-sm and (min-height: 650px)
.site .site
position: relative position: relative

2
_src/_assets/styl/_kremalicious/media.styl
View File

@ -32,7 +32,7 @@ img.aligncenter
display: block display: block
margin: $spacer auto margin: $spacer auto
@media $breakpoint2 @media $screen-sm
img.alignleft img.alignleft
margin: 0 $spacer $spacer 0 margin: 0 $spacer $spacer 0
img.alignright img.alignright

28
_src/_assets/styl/_kremalicious/mixins.styl
View File

@ -184,6 +184,7 @@ transition()
padding: ($spacer/2) $spacer ($spacer/2) 100% padding: ($spacer/2) $spacer ($spacer/2) 100%
margin-left: -100% margin-left: -100%
// Lead paragraph // Lead paragraph
///////////////////////////////////// /////////////////////////////////////
@ -192,6 +193,33 @@ transition()
line-height: ($spacer*1.15) 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 // Button sizing
///////////////////////////////////// /////////////////////////////////////

8
_src/_assets/styl/_kremalicious/navigation.styl
View File

@ -12,9 +12,12 @@
display: inline-block display: inline-block
margin: 0 margin: 0
position: absolute position: absolute
right: 0 right: $spacer
top: -($spacer/4) top: -($spacer/4)
@media $screen-md
right: 0
&:focus &:focus
outline: 0 outline: 0
@ -47,7 +50,6 @@
padding: $spacer 0 padding: $spacer 0
margin-top: $spacer margin-top: $spacer
margin-bottom: 0 margin-bottom: 0
width: 100%
background: $body-bg background: $body-bg
display: flex // .nav-popver overwrite display: flex // .nav-popver overwrite
margin-left: 0 // .grid overwrite margin-left: 0 // .grid overwrite
@ -64,7 +66,7 @@
@extend .category @extend .category
font-size: $font-size-small font-size: $font-size-small
text-shadow: 0 1px 0 rgba(#fff, .5) text-shadow: 0 1px 0 rgba(#fff, .5)
padding: $padding-base-vertical $padding-base-horizontal padding: $padding-base-horizontal
margin-bottom: 0 margin-bottom: 0
margin-top: 0 margin-top: 0
display: block display: block

20
_src/_assets/styl/_kremalicious/search.styl
View File

@ -14,11 +14,11 @@
pointer-events: none pointer-events: none
.search-btn .search-btn
right: 50px right: 70px
padding: .65em .85em padding: .65em .85em
.site-search @media $screen-md
margin-right: 4% right: 50px
.search-close .search-close
position: absolute position: absolute
@ -31,17 +31,27 @@
.search-area .search-area
@extend .transition @extend .transition
position: absolute position: absolute
width: 100%
left: 0 left: 0
top: -7px top: -7px
z-index: 3 z-index: 3
margin-left: ($spacer / 2)
margin-right: ($spacer / 2)
width: "calc(100% - %s)" % $spacer
// hidden by default // hidden by default
display: none display: none
@media $screen-sm
margin-left: 0
margin-right: 0
width: 100%
&.is-ready &.is-ready
display: block display: block
.form-control
background: #fff
.search-popover .search-popover
position: absolute position: absolute
@ -55,7 +65,7 @@
overflow: auto overflow: auto
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch
@media $breakpoint2 @media $screen-sm
top: ($spacer * 3) top: ($spacer * 3)
.search-results .search-results

2
_src/_assets/styl/_kremalicious/tables.styl
View File

@ -46,7 +46,7 @@ table tbody tr:hover th
overflow-x: auto overflow-x: auto
min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) 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% width: 100%
margin-bottom: ($spacer * 0.75) margin-bottom: ($spacer * 0.75)
overflow-y: hidden overflow-y: hidden

24
_src/_assets/styl/_kremalicious/typography.styl
View File

@ -12,7 +12,7 @@
html html
font-size: $font-size-root font-size: $font-size-root
@media $breakpoint3 @media $screen-lg
font-size: $font-size-root-lg font-size: $font-size-root-lg
body body
@ -35,7 +35,7 @@ body
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
-moz-font-feature-settings: 'liga', 'kern' -moz-font-feature-settings: 'liga', 'kern'
letter-spacing: -0.01em letter-spacing: -.01em
.wf-active & .wf-active &
letter-spacing: normal letter-spacing: normal
@ -67,7 +67,7 @@ h1, h2, h3, h4, h5, h6,
line-height: $headings-line-height line-height: $headings-line-height
color: $headings-color color: $headings-color
font-weight: 500 font-weight: 500
letter-spacing: -.09em letter-spacing: -.04em
.wf-active & .wf-active &
font-weight: $headings-font-weight font-weight: $headings-font-weight
@ -87,27 +87,27 @@ h6, .h6
h1, .h1 h1, .h1
font-size: $font-size-h2 font-size: $font-size-h2
@media $breakpoint1 @media $screen-xs
font-size: $font-size-h1 font-size: $font-size-h1
h2, .h2 h2, .h2
font-size: $font-size-h3 font-size: $font-size-h3
@media $breakpoint1 @media $screen-xs
font-size: $font-size-h2 font-size: $font-size-h2
h3, .h3 h3, .h3
font-size: $font-size-h4 font-size: $font-size-h4
@media $breakpoint1 @media $screen-xs
font-size: $font-size-h3 font-size: $font-size-h3
h4, .h4 h4, .h4
font-size: $font-size-h5 font-size: $font-size-h5
@media $breakpoint1 @media $screen-xs
font-size: $font-size-h4 font-size: $font-size-h4
h5, .h5 h5, .h5
font-size: $font-size-h6 font-size: $font-size-h6
@media $breakpoint1 @media $screen-xs
font-size: $font-size-h5 font-size: $font-size-h5
h6, .h6 h6, .h6
@ -278,10 +278,10 @@ blockquote
position: relative position: relative
padding-left: 20px padding-left: 20px
@media $breakpoint1 @media $screen-xs
padding-left: 40px padding-left: 40px
@media $breakpoint3 @media $screen-lg
padding-left: 60px padding-left: 60px
// quotation marks // quotation marks
@ -293,10 +293,10 @@ blockquote
left: -10px left: -10px
top: -20px top: -20px
@media $breakpoint1 @media $screen-xs
left: 0 left: 0
@media $breakpoint3 @media $screen-lg
top: -30px top: -30px
p:last-child p:last-child

14
_src/_assets/styl/_kremalicious/variables.styl
View File

@ -139,13 +139,15 @@ $kbd-color = $code-color
// Responsive breakpoints // Responsive breakpoints
///////////////////////////////////// /////////////////////////////////////
$screen-small-min = 30em $screen-xs-min = 30em
$screen-medium-min = 40.625em $screen-sm-min = 40.625em
$screen-large-min = 87.500em $screen-md-min = 60em
$screen-lg-min = 87.500em
$breakpoint1 = 'only screen and (min-width: 30em)' $screen-xs = 'only screen and (min-width: 30em)'
$breakpoint2 = 'only screen and (min-width: 40.625em)' $screen-sm = 'only screen and (min-width: 40.625em)'
$breakpoint3 = 'only screen and (min-width: 87.500em)' $screen-md = 'only screen and (min-width: 60em)'
$screen-lg = 'only screen and (min-width: 87.500em)'
// High dpi media query // High dpi media query

2
_src/_assets/styl/_kremalicious/vex.styl
View File

@ -72,7 +72,7 @@ body.vex-open
padding: 0 padding: 0
position: relative position: relative
width: 100% width: 100%
max-width: $screen-small-min max-width: $screen-xs-min
border-radius: $border-radius-base border-radius: $border-radius-base
border: 1px solid alpha($brand-grey-light, .2) border: 1px solid alpha($brand-grey-light, .2)

2
_src/_assets/styl/_page-about.styl
View File

@ -19,7 +19,7 @@
@extend .divider-bottom @extend .divider-bottom
color: $text-color-light color: $text-color-light
@media $breakpoint2 @media $screen-sm
max-width: 60% max-width: 60%
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto

2
_src/_assets/styl/kremalicious3.styl
View File

@ -15,6 +15,7 @@
// Core CSS // Core CSS
@import '_kremalicious/typography' @import '_kremalicious/typography'
@import '_kremalicious/animations'
@import '_kremalicious/grid' @import '_kremalicious/grid'
@import '_kremalicious/layout' @import '_kremalicious/layout'
@import '_kremalicious/forms' @import '_kremalicious/forms'
@ -25,7 +26,6 @@
@import '_kremalicious/code' @import '_kremalicious/code'
@import '_kremalicious/syntax' @import '_kremalicious/syntax'
@import '_kremalicious/alerts' @import '_kremalicious/alerts'
@import '_kremalicious/animations'
@import '_kremalicious/vex' @import '_kremalicious/vex'
// Content // Content