mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
fixes, full width teasers
This commit is contained in:
parent
4285ca87dc
commit
c3d0732f97
40
_config.yml
40
_config.yml
@ -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:
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
@ -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)'
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
</aside>
|
||||
|
||||
<section class="footer-copyright">
|
||||
<p>© 2007 – {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
|
||||
<p>© {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/kremalicious/kremalicious3">
|
||||
|
||||
28
gulpfile.js
28
gulpfile.js
@ -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/'))
|
||||
});
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user