diff options
| -rw-r--r-- | design/sass/_details.scss | 45 | ||||
| -rw-r--r-- | design/templates/jrnl/entry_detail.html | 2 |
2 files changed, 34 insertions, 13 deletions
diff --git a/design/sass/_details.scss b/design/sass/_details.scss index f23ae7c..5f5ebdc 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -272,26 +272,33 @@ h4.post-source { @extend %clearfix; @include constrain_narrow; padding-bottom: 2rem; - border-bottom: 3px double #efefef; - @include breakpoint(alpha) { - .article-card-list { - display: flex; - justify-content: space-between - } - .article-card-mini { - margin-bottom: 0 - } + .article-card-mini { + margin-bottom: 0 } .hedtinycaps { display: inline-block; margin-bottom: 2.5rem; border-bottom: 2px solid #efefef; } + @include breakpoint(gamma) { + @include constrain(960px); + } +} +.related-bottom { + @extend %clearfix; + &:after { + display: block; + content: ''; + @include constrain_narrow; + height: 30px; + border-bottom: 3px double #efefef; + } } .article-card-list { padding: 0 !important; margin: 0 !important; list-style-type: none !important; + margin: 0 auto !important; } .article-card-mini, .detail .article-card-mini { margin-left: 0; @@ -300,9 +307,9 @@ h4.post-source { max-width: 100%; a { text-decoration: none;} .post-title { - @include fontsize(24); + @include fontsize(20); text-align: center; - line-height: 1; + line-height: 1.2; margin: 0; } .post-subtitle { @@ -320,11 +327,23 @@ h4.post-source { color: #b6b6b6; } @include breakpoint(omega) { - max-width: 200px; + margin: 0 auto; + max-width: 70%; margin-bottom: 0; } + @include breakpoint(alpha) { + max-width: 50%; + } @include breakpoint(beta) { - max-width: 235px; + max-width: 47%; + float: left; + margin-right: 1rem; + margin-bottom: 1.5rem; + } + @include breakpoint(gamma) { + max-width: 230px; + float: left; + margin-right: .5rem; } } .post-mini-image { diff --git a/design/templates/jrnl/entry_detail.html b/design/templates/jrnl/entry_detail.html index cb23a54..fd7e05a 100644 --- a/design/templates/jrnl/entry_detail.html +++ b/design/templates/jrnl/entry_detail.html @@ -119,6 +119,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </nav>{%endwith%}{%endwith%} </div> {% if object.related.all %}<div class="article-afterward related"> + <div class="related-bottom"> <h6 class="hedtinycaps">You might also enjoy</h6> <ul class="article-card-list">{% for object in related %} <li class="article-card-mini"><a href="{{object.get_absolute_url}}" title="{{object.title}}"> @@ -142,6 +143,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </a> </li> {% endfor %}</ul> + </div> </div>{%endif%} {% comment %} <div class="mailing-list--wrapper"> |