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

7
_layouts/post.html
View file

@ -6,7 +6,7 @@ layout: default
<div class="page page--post">
<section class="section section--post">
<div class="section section--post">
<div class="section__content content">
<div class="section__main">
<div class="postcontent">
@ -15,7 +15,8 @@ layout: default
{% include author.html %}
</div>
<div class="section__sidebar">
<aside class="section__sidebar">
<h3 class="section__sidebar-title">Related</h3>
{% for post in site.related_posts limit:5 %}
<article class="featurepost featurepost--sidebar">
<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>
</article>
{% endfor %}
</aside>
</div>
</div>
</section>
</div>

44
src/scss/_section.scss
View file

@ -65,22 +65,56 @@ $m: 'section';
&--post {
.#{$m} {
&__sidebar {
display: inline-block;
width: 30%;
vertical-align: top;
padding-left: pxToRem(40px);
display: block;
width: 100%;
margin-top: pxToRem(120px);
margin-left: pxToRem(-20px);
margin-right: pxToRem(-20px);
.featurepost {
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 {
display: inline-block;
width: 69%;
vertical-align: top;
@include mq($to: medium) {
width: 100%;
}
}
}
}