m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-03 23:57:46 +01:00
Code

fix teaser/photo display

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-09-26 22:47:34 +02:00
parent 57562ad222
commit bdf9065e9b
6 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
_src/_assets/styl/content.styl
View File

@ -60,16 +60,23 @@
// Post/photo teaser // Post/photo teaser
///////////////////////////////////// /////////////////////////////////////
.hentry picture:not(.related-photo picture):not(.masonry picture), .hentry__teaser
.featured picture picture
display: block display: block
margin-left: -8% margin: ($line-height-computed*1.5) -8%
margin-right: -8%
@media $breakpoint2 @media $breakpoint2
margin-left: -16% margin-left: -16%
margin-right: -16% margin-right: -16%
.featured &
picture
@media $breakpoint1
margin-left: 0
margin-right: 0
.hentry__teaser
img img
box-shadow: 0 1px 3px rgba(0,0,0,.2) box-shadow: 0 1px 3px rgba(0,0,0,.2)
border-radius: 0 border-radius: 0
@ -77,14 +84,6 @@
@media $breakpoint2 @media $breakpoint2
border-radius: $border-radius-base 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 // Post Content
///////////////////////////////////// /////////////////////////////////////
@ -97,12 +96,9 @@
h1 h1
font-size: ceil($font-size-base * 2.5) font-size: ceil($font-size-base * 2.5)
img:not(.teaser) img:not(.hentry__teaser img)
margin-bottom: ($line-height-computed/2) margin-bottom: ($line-height-computed/2)
.teaser
box-shadow: 0 1px 3px rgba(0,0,0,.2)
p:last-child p:last-child
margin-bottom: 0 margin-bottom: 0

5
_src/_assets/styl/media.styl
View File

@ -21,11 +21,6 @@ figure, img, svg, video, audio, embed, canvas
img img
vertical-align: middle vertical-align: middle
.teaser,
.teaser img
margin-top: ($line-height-computed*1.5)
margin-bottom: ($line-height-computed*1.5)
// Media Positioning // Media Positioning
///////////////////////////////////// /////////////////////////////////////

8
_src/_includes/articles.html
View File

@ -36,9 +36,9 @@
<article class="hentry format-photo"> <article class="hentry format-photo">
<a class="photo-link" href="{{ post.url }}"> <a class="photo-link" href="{{ post.url }}">
<figure class="hmedia"> <figure class="hentry__teaser hmedia">
{% picture phototeaser {{ post.image }} class="teaser-photo" %} {% picture phototeaser {{ post.image }} %}
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption> <figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
</figure> </figure>
@ -56,8 +56,8 @@
<section class="entry-content"> <section class="entry-content">
{% if post.image %} {% if post.image %}
<a href="{{ post.url }}"> <a class="hentry__teaser" href="{{ post.url }}">
{% picture {{ post.image }} class="teaser" %} {% picture {{ post.image }} %}
</a> </a>
{% endif %} {% endif %}

2
_src/_includes/featured.html
View File

@ -4,7 +4,7 @@
{% for post in site.posts %} {% for post in site.posts %}
{% if post.featured %} {% if post.featured %}
<article class="grid__col"> <article class="grid__col">
<a class="featured-link" href="{{ post.url }}" title="{{ post.title }}"> <a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
{% picture featured {{ post.image }} %} {% picture featured {{ post.image }} %}
<h1 class="featured-title">{{ post.title | titlecase }}</h1> <h1 class="featured-title">{{ post.title | titlecase }}</h1>
</a> </a>

2
_src/_layouts/photo.html
View File

@ -6,7 +6,7 @@ layout: base
<article class="hentry format-photo col6"> <article class="hentry format-photo col6">
<figure class="hmedia"> <figure class="hentry__teaser hmedia">
{% picture {{ page.image }} %} {% picture {{ page.image }} %}

4
_src/_layouts/post.html
View File

@ -11,7 +11,9 @@ layout: base
<section class="entry-content"> <section class="entry-content">
{% if page.image %} {% if page.image %}
{% picture {{ page.image }} class="teaser" %} <figure class="hentry__teaser">
{% picture {{ page.image }} %}
</figure>
{% endif %} {% endif %}
{{ content }} {{ content }}