joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Update] Post: Style related posts for smaller viewports

Browse source
This commit is contained in:
0xfff 2016-11-05 17:03:31 +01:00
parent f167fef8d6
commit 3173f4d360
3 changed files with 45 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

9
_layouts/post.html
View file

@ -6,7 +6,7 @@ layout: default
<div class="page page--post"> <div class="page page--post">
<section class="section section--post"> <div class="section section--post">
<div class="section__content content"> <div class="section__content content">
<div class="section__main"> <div class="section__main">
<div class="postcontent"> <div class="postcontent">
@ -15,7 +15,8 @@ layout: default
{% include author.html %} {% include author.html %}
</div> </div>
<div class="section__sidebar"> <aside class="section__sidebar">
<h3 class="section__sidebar-title">Related</h3>
{% for post in site.related_posts limit:5 %} {% for post in site.related_posts limit:5 %}
<article class="featurepost featurepost--sidebar"> <article class="featurepost featurepost--sidebar">
<div class="featurepost__preview {% if post.image %}featurepost__preview--image{% else %}featurepost__preview--no-image{% endif %}"> <div class="featurepost__preview {% if post.image %}featurepost__preview--image{% else %}featurepost__preview--no-image{% endif %}">
@ -32,8 +33,8 @@ layout: default
<div class="featurepost__divider"></div> <div class="featurepost__divider"></div>
</article> </article>
{% endfor %} {% endfor %}
</div> </aside>
</div> </div>
</section> </div>
</div> </div>

2
src/scss/_featurepost.scss
View file

@ -61,7 +61,7 @@ $m: 'featurepost';
margin: 0 pxToRem(-20px); margin: 0 pxToRem(-20px);
.featurepost { .featurepost {
display: block; display: block;
width: 100%; width: 100%;
@include mq($from: small) { @include mq($from: small) {

44
src/scss/_section.scss
View file

@ -65,22 +65,56 @@ $m: 'section';
&--post { &--post {
.#{$m} { .#{$m} {
&__sidebar { &__sidebar {
display: inline-block; display: block;
width: 30%; width: 100%;
vertical-align: top; margin-top: pxToRem(120px);
padding-left: pxToRem(40px); margin-left: pxToRem(-20px);
margin-right: pxToRem(-20px);
.featurepost { .featurepost {
max-width: 100%; max-width: 100%;
@include mq($from: small, $to: medium) {
width: 49%;
}
margin-bottom: pxToReM(60px);
@include mq($to: medium) {
&__preview {
display: block;
height: 1px;
}
}
} }
&-title {
@include font-claim();
text-align: center;
margin-bottom: pxToRem(40px);
@include mq($from: medium) {
@include visuallyhidden();
}
}
@include mq($from: medium) {
display: inline-block;
width: 30%;
vertical-align: top;
margin: 0;
padding-left: pxToRem(40px);
}
} }
&__main { &__main {
display: inline-block; display: inline-block;
width: 69%; width: 69%;
vertical-align: top; vertical-align: top;
@include mq($to: medium) {
width: 100%;
}
} }
} }
} }