diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_homepage.scss | 21 | ||||
| -rw-r--r-- | design/templates/archives/homepage-light.html | 100 | ||||
| -rw-r--r-- | design/templates/archives/homepage.html | 6 | ||||
| -rw-r--r-- | design/templates/comments/list.html | 8 | ||||
| -rw-r--r-- | design/templates/details/photo_gallery.html | 2 |
5 files changed, 129 insertions, 8 deletions
diff --git a/design/sass/_homepage.scss b/design/sass/_homepage.scss index 1a3df6a..6582da5 100644 --- a/design/sass/_homepage.scss +++ b/design/sass/_homepage.scss @@ -2,7 +2,7 @@ @include constrain_wide; @extend %clearfix; &:before { - @include faded_line_after; + margin-top: 3em; } } .homepage--arc-header { @@ -107,7 +107,6 @@ position: relative; z-index: 1; } - .post--image { margin-left: 5px;} .hero--wrapper { @include constrain_wide; position: relative; @@ -183,3 +182,21 @@ @include lighter_faded_line_after; } } +.v082016 { + .header-wrapper { + @include breakpoint(beta) { + border-bottom: none; + } + } + .banner .post--image { + @include breakpoint(gamma) { + max-height: 600px; + overflow: hidden; + } + } + .hero--wrapper { + @include breakpoint(gamma) { + margin-top: -222px; + } + } +} diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html new file mode 100644 index 0000000..fe41b25 --- /dev/null +++ b/design/templates/archives/homepage-light.html @@ -0,0 +1,100 @@ +{% extends 'base.html' %} +{% load get_image_by_size %} +{% load typogrify_tags %} +{% block sitename %} +<head itemscope itemtype="http://schema.org/WebSite"> + <title itemprop='name'>Luxagraf</title> + <link rel="canonical" href="https://luxagraf.net/" itemprop="url">{%endblock%} + + {%block extrahead%} +<style> + .homepage--hero { + margin-top: {{homepage.image_offset_vertical}}; + } +</style> +{%endblock%} +{%block bodyid%}id="home" class="has-hero v082016"{%endblock%} + +{% block primary %}<section class="banner">{% with object=homepage.featured %} + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <div class="post--image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + {%for image in homepage.images.all%} + <img class="u-photo post-image homepage--hero" itemprop="image" sizes="(max-width: 960px) 100vw" +srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%} + {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endfor%} + </a> + </div> + <div class="hero--wrapper"> + <h2 class="p-name entry-title post--title main--header" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants}}</a></h2> + <p class="p-author author hide" itemprop="author">Scott Gilbertson</p> + <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <p class="post--location main--location"> + <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%} + <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> + <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> + <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> + </span> + </span> + </p> + <p class="p-summary main--tag"> + {{homepage.tag_line}} + </p> + <a href="{{object.get_absolute_url}}" class="u-url btn" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">Read</a> + </div> + </article>{% endwith %} + </section> + <div class="homepage--about homepage--section"> + <h3 class="homepage--arc-header">About Luxagraf</h3> + <p>Luxagraf is my notebook. Something that, in an earlier age, I would have long ago lost in the backseat of a taxi. </p> + <p>Or something like that. It could just be a website. Except that I don’t do lists. And I’m not trying to make money off of it.</p><p>Whatever it is, whatever brought you here, I hope you enjoy it.</p> + </div> + <div class="homepage--section"> + <section class="archive homepage--archives"> + <h1 class="homepage--arc-header">Most Popular</h1> + {% for object in homepage.popular.all %} + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <div class="post--image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> + </div> + <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2> + <p class="p-author author hide" itemprop="author">Scott Gilbertson</p> + <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <p class="post--location"> + <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%} + <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> + <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> + <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> + </span> + </span> + </p> + </article> {% endfor %} + <p><a href="/jrnl/" class="homepage--next">Read More</a></p> + </section> + <section class="homepage--bright archive"> + <h1 class="homepage--arc-header">Most Recent</h1> + {% for object in recent %}{% if object.pk != homepage.featured.pk %} + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <div class="post--image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> + </div> + <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2> + <p class="p-author author hide" itemprop="author">Scott Gilbertson</p> + <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <p class="post--location"> + <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%} + <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> + <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> + <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> + </span> + </span> + </p> + </article> {%endif%}{% endfor %} + </section> + </div> +{% endblock %} + +{% block js %}{% comment %} <script async src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endcomment%}{% endblock%} diff --git a/design/templates/archives/homepage.html b/design/templates/archives/homepage.html index 573cf23..2741232 100644 --- a/design/templates/archives/homepage.html +++ b/design/templates/archives/homepage.html @@ -8,7 +8,7 @@ <link rel="canonical" href="https://luxagraf.net/" itemprop="url">{%endblock%} {%block bodyid%}id="home" class="has-hero"{%endblock%} -{% block primary %}<section class="banner">{% with object=homepage.banner %} +{% block primary %}<section class="banner">{% with object=homepage.featured %} <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> <div class="post--image"> <a href="{{object.get_absolute_url}}" title="{{object.title}}"> @@ -46,7 +46,7 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz <div class="homepage--section"> <section class="archive homepage--archives"> <h1 class="homepage--arc-header">Most Popular</h1> - {% for object in homepage.entry_list.all %} + {% for object in homepage.popular.all %} <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> <div class="post--image"> <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> @@ -68,7 +68,7 @@ srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{siz </section> <section class="homepage--bright archive"> <h1 class="homepage--arc-header">Most Recent</h1> - {% for object in recent %}{% if object.pk != homepage.banner.pk %} + {% for object in recent %}{% if object.pk != homepage.featured.pk %} <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> <div class="post--image"> <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a> diff --git a/design/templates/comments/list.html b/design/templates/comments/list.html index e8057dc..c311a7c 100644 --- a/design/templates/comments/list.html +++ b/design/templates/comments/list.html @@ -7,8 +7,8 @@ <div class="comments--wrapper"> {% for comment in comment_list %} <div id="comment-{{ comment.id }}" class="comment"> - <noscript class="datahashloader" data-hash="{% if comment.user_email = "sng@luxagraf.net" %}d64f4854965b2b1c3ecafee4b2a66fac{%else%}{%if comment.user_email|has_grav %}{%gravatar_hash comment.user_email %}{%else%}default{%endif%}{%endif%}"> - <img class="gravatar" {% if comment.user_email = "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" /> + <noscript class="datahashloader" data-hash="{% if comment.user_email == "sng@luxagraf.net" %}d64f4854965b2b1c3ecafee4b2a66fac{%else%}{%if comment.user_email|has_grav %}{%gravatar_hash comment.user_email %}{%else%}default{%endif%}{%endif%}"> + <img class="gravatar" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" /> </noscript> <div class="comment--head"> <span class="who"><b>{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</b></span> @@ -16,7 +16,11 @@ </div> <div class="comment--body"> + {% if comment.user_email == "sng@luxagraf.net" %} + {{comment.comment|removetags:"p"|markdown|safe|smartypants}} + {%else%} {{comment.comment|removetags:"p"|markdown|bleach|nofollow|safe|smartypants}} + {%endif%} </div> </div> {% endfor %} diff --git a/design/templates/details/photo_gallery.html b/design/templates/details/photo_gallery.html index b452f35..bf2db6d 100644 --- a/design/templates/details/photo_gallery.html +++ b/design/templates/details/photo_gallery.html @@ -43,7 +43,7 @@ <div class="caption" id="id-{{photo.id}}"> <h3 class="figcaption--title">{{photo.title}}</h3> <time class="figcaption--date" datetime="{{photo.exif_date|date:'c'}}">{{photo.exif_date|date:"M j, Y"}}</time> - {% if object.is_public %}<a class="map-link" href="#" data-latitude="{{photo.lat}}" data-longitude="{{photo.lon}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%} + {% if object.is_public %}<a class="map-link" href="#" data-latitude="{{photo.latitude}}" data-longitude="{{photo.longitude}}" data-imgid="id-{{photo.id}}">Map</a>{%endif%} {%if photo.caption%}<p class="figcaption--desc">{{photo.caption|safe}}</p> {%endif%} </div> <div class="photo-options"> |