diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_details.scss | 71 | ||||
| -rw-r--r-- | design/sass/_footer.scss | 10 | ||||
| -rw-r--r-- | design/sass/_mixins.scss | 2 | ||||
| -rw-r--r-- | design/sass/_typography.scss | 10 | ||||
| -rw-r--r-- | design/sass/screenv9.scss | 3 | ||||
| -rw-r--r-- | design/templates/archives/homepage-light.html | 2 | ||||
| -rw-r--r-- | design/templates/base.html | 4 | ||||
| -rw-r--r-- | design/templates/jrnl/entry_detail.html | 26 | ||||
| -rw-r--r-- | design/templates/lib/img_archive.html | 2 |
9 files changed, 123 insertions, 7 deletions
diff --git a/design/sass/_details.scss b/design/sass/_details.scss index d5681c6..41afd04 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -246,6 +246,77 @@ h4.post-source { } } +.article-afterward { + @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 + } + } + .hedtinycaps { + display: inline-block; + margin-bottom: 2.5rem; + border-bottom: 2px solid #efefef; + } +} +.article-card-list { + padding: 0 !important; + margin: 0 !important; + list-style-type: none !important; +} +.article-card-mini, .detail .article-card-mini { + margin-left: 0; + margin-right: 0; + margin-bottom: 2rem; + max-width: 100%; + a { text-decoration: none;} + .post-title { + @include fontsize(24); + text-align: center; + line-height: 1; + margin: 0; + } + .post-subtitle { + @include fontsize(18); + text-align: center; + font-family: $fancy_serif; + font-style: italic; + font-weight: normal; + margin: .25rem auto 0; + } + .post-summary, .post-date{ + text-align: center; + display: inline-block; + line-height: 0.6 !important; + color: #b6b6b6; + } + @include breakpoint(omega) { + max-width: 200px; + margin-bottom: 0; + } + @include breakpoint(beta) { + max-width: 235px; + } +} +.post-mini-image { + max-height: 220px; + overflow: hidden; + @include breakpoint(beta) { + margin-bottom: 1rem; + } + img { + margin-top: -20%; + } +} + + .entry-footer { @extend %clearfix; @include constrain_narrow; diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss index ed1635c..08c9942 100644 --- a/design/sass/_footer.scss +++ b/design/sass/_footer.scss @@ -9,7 +9,9 @@ footer { margin-bottom: 1.2em; } } - ul { + .footer-nav { + list-style-type: none !important; + margin-left: 0 !important; border-top: 1px $brown dotted; border-bottom: 1px $brown dotted; padding: .5rem 0; @@ -73,3 +75,9 @@ footer { text-decoration: none; width: 70px; } +#license { + @include fancy_sans; + @include fontsize(12); + text-transform: none; + letter-spacing: normal; +} diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index dd6f257..8c936eb 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -14,7 +14,7 @@ $secondary-link-color: #838383; $archive_p_line_height: 1.6; //$light; -$narrow-beta-width: 640px; +$narrow-beta-width: 720px; $narrow-max-width: 750px; $max_width: 1440px; diff --git a/design/sass/_typography.scss b/design/sass/_typography.scss new file mode 100644 index 0000000..b4e3793 --- /dev/null +++ b/design/sass/_typography.scss @@ -0,0 +1,10 @@ +.hedtinycaps { + @include fontsize(16); + @include fancy_sans; + text-transform: uppercase; + letter-spacing: 1px; +} +.article-afterward > .hedtinycaps, p > .hedtinycaps { + text-align: left; +} + diff --git a/design/sass/screenv9.scss b/design/sass/screenv9.scss index d594e28..312018c 100644 --- a/design/sass/screenv9.scss +++ b/design/sass/screenv9.scss @@ -4,7 +4,6 @@ @import "_global.scss"; @import "_pagination.scss"; @import "_header.scss"; -@import "_footer.scss"; @import "_archives.scss"; @import "_details.scss"; @import "_images.scss"; @@ -16,3 +15,5 @@ @import "_photos.scss"; @import "_notes.scss"; @import "_forms.scss"; +@import "_typography.scss"; +@import "_footer.scss"; diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html index 1964795..1021885 100644 --- a/design/templates/archives/homepage-light.html +++ b/design/templates/archives/homepage-light.html @@ -2,7 +2,7 @@ {% load typogrify_tags %} {% block sitename %} <head itemscope itemtype="http://schema.org/WebSite"> - <title itemprop='name'>Luxagraf</title> + <title itemprop='name'>Luxagraf: thoughts on ecology, culture, travel, photography, walking and other ephemera</title> <link rel="canonical" href="https://luxagraf.net/" itemprop="url">{%endblock%} {%block extrahead%} diff --git a/design/templates/base.html b/design/templates/base.html index 495a496..bf78846 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -14,7 +14,7 @@ title="Luxagraf RSS feed" href="https://luxagraf.net/rss/"> {%block stylesheet%}<link rel="stylesheet" - href="/media/screenv9.css" + href="/media/screenv9.css?{% now "u" %}" media="screen">{%endblock%} <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="manifest" href="/manifest.webmanifest" /> @@ -44,7 +44,7 @@ {% block primary %}{% endblock %} {% block extrabody %}{% endblock %} <footer class="bl"> - <ul> + <ul class="footer-nav"> <li><a href="/blogroll" title="Sites that inspire us">Blogroll</a></li> <li><a href="/contact/" title="contact luxagraf">Contact</a></li> <li>Follow Along: diff --git a/design/templates/jrnl/entry_detail.html b/design/templates/jrnl/entry_detail.html index 7d7e2a3..c19add1 100644 --- a/design/templates/jrnl/entry_detail.html +++ b/design/templates/jrnl/entry_detail.html @@ -121,6 +121,32 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </ul> </nav>{%endwith%}{%endwith%} </div> + <div class="article-afterward related"> + <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}}"> + <div class="post-image post-mini-image"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {% elif object.image %} + {% include "lib/img_archive.html" with image=object.image nolightbox=True %} + {% else %} + <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%} + </div> + <h4 class="p-name entry-title post-title" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + {% if object.subtitle%}<h5 class="post-subtitle">{{object.subtitle|safe|smartypants}}</h5>{%endif%} + <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p> + <p class="post-summary"> + <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} + </span> + – + <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time> + </p> + </a> + </li> + {% endfor %}</ul> + </div> {% comment %} <div class="mailing-list--wrapper"> <h5>If you enjoyed this, you should join the mailing list…</h5> diff --git a/design/templates/lib/img_archive.html b/design/templates/lib/img_archive.html index c256ebe..a512930 100644 --- a/design/templates/lib/img_archive.html +++ b/design/templates/lib/img_archive.html @@ -2,4 +2,4 @@ srcset="{{image.get_featured_jrnl}} 520w, {{image.get_picwide_sm}} 720w" src="{{image.get_featured_jrnl}}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" - data-jslghtbx="{{image.get_image_by_size}}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}> + {% if not nolightbox %}data-jslghtbx="{{image.get_image_by_size}}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}{%endif%}> |