1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

fixes, full width teasers

This commit is contained in:
Matthias Kretschmann 2015-08-20 20:06:14 +02:00
parent 4285ca87dc
commit c3d0732f97
11 changed files with 101 additions and 49 deletions

View File

@ -84,23 +84,47 @@ picture:
presets:
default:
ppi: [1, 2]
attr:
itemprop: "image"
source_large:
media: "(min-width: 87.500em)"
width: "1000"
source_medium:
media: "(min-width: 35.556em)"
width: "640"
media: "(min-width: 40.625em)"
width: "800"
source_small:
media: "(min-width: 26.667em)"
width: "480"
media: "(min-width: 30em)"
width: "600"
source_default:
width: "320"
width: "400"
phototeaser:
ppi: [1, 2]
source_large:
media: "(min-width: 87.500em)"
width: "1000"
height: "600"
source_medium:
media: "(min-width: 40.625em)"
width: "800"
height: "500"
source_small:
media: "(min-width: 30em)"
width: "600"
height: "400"
source_default:
width: "400"
height: "200"
featured:
ppi: [1, 2]
attr:
class: "featured-image"
itemprop: "image"
source_medium:
media: "(min-width: 40.625em)"
width: "275"
source_small:
media: "(min-width: 30em)"
width: "160"
source_default:
width: "190"
width: "480"
photothumb:
ppi: [1, 2]
attr:

View File

@ -6,21 +6,22 @@
.featured
@extend .divider-bottom
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
@media $breakpoint2
padding-top: ($line-height-computed*3)
padding-bottom: ($line-height-computed*3)
.grid
margin-bottom: 0
@media $breakpoint2
.grid__col
padding-top: 0
.featured-link
display: block
@media $breakpoint2
&:hover
transform: scale(1.03)

View File

@ -16,15 +16,9 @@
figcaption
margin-bottom: 0
img
max-height: 540px
width: auto
box-shadow: 0 1px 3px rgba(0,0,0,.2)
figcaption
@extend .transition
position: absolute
left: 0
top: 25%
min-width: 45%
text-align: right
@ -38,6 +32,11 @@
color: #fff
text-shadow: 0 1px 0 #000
left: -8%
@media $breakpoint2
left: -16%
opacity: 0
transform: translate(0, -20px)

View File

@ -11,8 +11,7 @@
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: ($line-height-computed*2)
margin-bottom: ($line-height-computed/2)
margin: 0
@media $breakpoint2
margin-left: -108%
@ -38,13 +37,9 @@
.page-index &:first-child
padding-top: ($line-height-computed*3)
.page-title + &,
.paginator-title + &
padding-top: ($line-height-computed*2)
.page-single &
border: none
padding-top: ($line-height-computed*2)
padding-top: 0
&:before
@extend .hide
@ -62,6 +57,35 @@
@extend .h3
// Post/photo teaser
/////////////////////////////////////
.hentry picture:not(.related-photo picture):not(.masonry picture),
.featured picture
display: block
margin-left: -8%
margin-right: -8%
@media $breakpoint2
margin-left: -16%
margin-right: -16%
img
box-shadow: 0 1px 3px rgba(0,0,0,.2)
border-radius: 0
@media $breakpoint2
border-radius: $border-radius-base
.featured picture
@media $breakpoint1
margin-left: 0
margin-right: 0
@media $breakpoint2
margin-left: 0
margin-right: 0
// Post Content
/////////////////////////////////////

View File

@ -17,6 +17,12 @@
max-width: 35em
margin: 0 auto
.site__document
padding-top: ($line-height-computed*2)
@media $breakpoint2
padding-top: ($line-height-computed*4)
// topbar and footer as fixed
// site background
@ -30,6 +36,9 @@
transform: translate3d(0,-200px,0)
@media $breakpoint1
transform: translate3d(0,-160px,0)
.menu-open &
transform: translate3d(0,0,0)

View File

@ -75,8 +75,8 @@
/////////////////////////////////////
.paginator
padding-top: $line-height-computed
padding-bottom: $line-height-computed
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
.icon
margin-bottom: -3px

View File

@ -43,7 +43,7 @@
.search-popover
position: absolute
left: 0
top: 71px
top: 80px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
@ -51,7 +51,7 @@
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
@media only screen and (min-width: 40.625em) and (min-height: 650px)
top: 0

View File

@ -146,9 +146,14 @@ $code-color = #C1C2C3
$kbd-bg = $code-bg
$kbd-color = $code-color
// Responsive breakpoints
/////////////////////////////////////
$screen-small-min = 30em
$screen-medium-min = 40.625em
$screen-large-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)'

View File

@ -38,7 +38,7 @@
<a class="photo-link" href="{{ post.url }}">
<figure class="hmedia">
{% picture {{ post.image }} %}
{% picture phototeaser {{ post.image }} class="teaser-photo" %}
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
</figure>

View File

@ -35,7 +35,7 @@
</aside>
<section class="footer-copyright">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>&copy; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">

View File

@ -133,18 +133,10 @@ gulp.task('css', function() {
src + '/_assets/styl/kremalicious3.styl',
src + '/_assets/styl/poststyle-2300.styl'
])
.pipe($.stylus({
'include css': true
})).on('error', onError)
.pipe($.stylus({ 'include css': true })).on('error', onError)
.pipe(gulp.dest(dist + '/assets/css/'))
.pipe($.autoprefixer({
browsers: 'last 2 versions'
})).on('error', onError)
.pipe($.autoprefixer({ browsers: 'last 2 versions' })).on('error', onError)
.pipe($.combineMq({ beautify: false }))
// .pipe($.uncss({
// html: [dist + '/**/*.html'],
// ignore: ['.in', '.collapsing']
// }))
.pipe($.cssmin())
.pipe($.rename({ suffix: '.min' }))
.pipe($.header(banner, { pkg: pkg }))
@ -163,10 +155,8 @@ gulp.task('js-libraries', function() {
return merge(picturefill)
.pipe($.uglify()).on('error', onError)
.pipe($.rename({
suffix: '.min'
}))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe($.rename({ suffix: '.min'}))
.pipe(gulp.dest(dist + '/assets/js/'));
});
// Project js
@ -181,11 +171,11 @@ gulp.task('js-project', function() {
'bower_components/time-elements/time-elements.js',
src + '/_assets/js/*.js'
])
.pipe($.concat('kremalicious3.js'))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe($.uglify()).on('error', onError)
.pipe($.concat('kremalicious3.min.js'))
.pipe($.header(banner, {
pkg: pkg
}))
.pipe($.rename({ suffix: '.min'}))
.pipe($.header(banner, { pkg: pkg }))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe($.connect.reload());
});
@ -221,7 +211,7 @@ gulp.task('icons', function() {
gulp.task('svg-fallbacks', function() {
return gulp.src(dist + '/assets/img/*.svg')
.pipe($.svg2png())
.pipe(gulp.dest(dist + '/assets/img/png/'))
.pipe(gulp.dest(dist + '/assets/img/'))
});