diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_480.sass | 32 | ||||
| -rw-r--r-- | design/sass/_768.sass | 17 | ||||
| -rw-r--r-- | design/templates/archives/notes.html | 29 | ||||
| -rw-r--r-- | design/templates/archives/notes_date.html | 32 | ||||
| -rw-r--r-- | design/templates/base.html | 3 | ||||
| -rw-r--r-- | design/templates/details/note.html | 26 |
6 files changed, 95 insertions, 44 deletions
diff --git a/design/sass/_480.sass b/design/sass/_480.sass index 5bef89e..3d426ca 100644 --- a/design/sass/_480.sass +++ b/design/sass/_480.sass @@ -204,39 +204,53 @@ article[role="main"] //**************** Notes Structure ************************ +.notes main + margin-top: 3em .notes .h-entry border: none padding: 0 margin-top: 3em &:after + display: block + content: "" margin-top: 3em height: 1px - visibility: visible - background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)) - &:last-child:after - background: none + width: 100% + background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)) + background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)) + //&:last-child:after + // background: none .notes .e-content a color: $orange -.notes .u-url +.notes time font-family: sans-serif -.notes .twitter +.notes .note--twitter font-size: .75em - a:after + action a:after, a:first-child:after content: "\2219" margin-left: .25em padding-right: .35em padding-left: .35em - a:last-child:after + action:last-child a:after content: "" + padding-right: 0 + padding-left: 0 + margin-left: 0 + +.notes--location + text-align: left +.month--divider + margin-top: 2em .month--header font-size: .75em margin: 0 letter-spacing: 1px text-transform: uppercase border-bottom: 1px dotted rgba(0,0,0,0.2) - +.permalink .h-entry:after + background: none //******************* Footer ********************** diff --git a/design/sass/_768.sass b/design/sass/_768.sass index f9ff3f1..9c4f8b8 100644 --- a/design/sass/_768.sass +++ b/design/sass/_768.sass @@ -211,20 +211,27 @@ width: 100% main max-width: 600px - margin: 0 auto + margin-left: auto + margin-right: auto + margin-bottom: 5em article footer margin-top: 1em article p float: none - .twitter + .note--location + float: left + .note--date + float: right + .note--twitter + clear: both float: right padding-top: 1em + time + display: inline + float: right .permalink main margin-top: 5em - #license - text-align: center - float: none //map #map-canvas diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html index 9eb55f3..b39dab3 100644 --- a/design/templates/archives/notes.html +++ b/design/templates/archives/notes.html @@ -3,7 +3,7 @@ {% load html5_datetime %} {% block pagetitle %} Notes | luxagraf {% endblock %} {% block metadescription %} The LongHandPixels Blog Archive, covering HTML, CSS and other web nerdery.{% endblock %} -{%block bodyid%}class="archive notes" id="notes-archive"{%endblock%} +{%block bodyid%}class="notes" id="notes-archive"{%endblock%} {% block primary %} <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> @@ -17,24 +17,35 @@ <div class="p-name e-content"> {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> + <span class="p-author h-card"> + <data class="p-name" value="Scott Gilbertson"></data> + <data class="u-url" value="https://luxagraf.net/"></data> + </span> <footer> - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> - </p>{% if object.twitter_id %} - <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <p class="note--date"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a> + </p>{% if object.location %} + <p class="p-location note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %}{% if object.location %} - <p class="meta twitter"> - View on <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> + </p>{% endif %}{% if object.twitter_id %} + <p class="note--twitter"> + <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> + <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> + </action> + <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> + </action> + <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> - </p>{% endif %} + </action> + </p>{% endif %} </footer> + </article> {% endfor %} </main> diff --git a/design/templates/archives/notes_date.html b/design/templates/archives/notes_date.html index aabd996..ac38af0 100644 --- a/design/templates/archives/notes_date.html +++ b/design/templates/archives/notes_date.html @@ -3,7 +3,7 @@ {% load html5_datetime %} {% load month_number_to_name %} {% block pagetitle %} Notes Published in {% if month %}{{month|month_number_to_name}}{%endif%} {{year}} | luxagraf{% endblock %} -{% block bodyid %}class="archive notes" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} +{% block bodyid %}class="notes" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} {% block primary %}<ul class="bl crumbs" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> <li><a href="/notes/" itemprop="url"><span itemprop="title">Notes</span></a> →</li> @@ -14,31 +14,41 @@ <h1>Notes Published in {% if month %}{{month|month_number_to_name}}{%endif%} {{year}}</h1>{% if month %}{% for object in object_list %} <article class="h-entry"> <div class="p-name e-content"> - {{object.link_twitter_names|safe|urlizetrunc:45|amp|smartypants }} + {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> + <span class="p-author h-card"> + <data class="p-name" value="Scott Gilbertson"></data> + <data class="u-url" value="https://luxagraf.net/"></data> + </span> <footer> - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + <p class="note--date"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a> </p>{% if object.location %} - <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <p class="p-location note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %}{% if object.twitter_id %} - <p class="meta twitter"> + </p>{% endif %}{% if object.twitter_id %} + <p class="note--twitter"> <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> + <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> + </action> + <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> + </action> + <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> + </action> </p>{% endif %} </footer> </article> {% endfor %} {% else %} {% regroup object_list by date_created.month as entries_by_month %}{% for month in entries_by_month %} - <section> + <section class="month--divider"> <h2 class="month--header">{{ month.list.0.date_created|date:"F Y" }}</h2>{% for object in month.list|dictsortreversed:"date_created" %} <article class="h-entry"> <div class="p-name e-content"> @@ -48,7 +58,7 @@ <p class="meta"> <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> </p>{% if object.location %} - <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <p class="p-location meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> @@ -66,8 +76,6 @@ {% endfor %} </section> {% endfor %} - </ul> {% endif %} - - </section> + </main> {% endblock%} diff --git a/design/templates/base.html b/design/templates/base.html index 98be112..c3d0b72 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -53,7 +53,8 @@ </ul> </nav> <p id="license"> - © 2003-{% now "Y" %} Scott Gilbertson, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>). + © 2003-{% now "Y" %} + <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>). </p> </footer> {% block js %}{% endblock%} diff --git a/design/templates/details/note.html b/design/templates/details/note.html index f0d5cb0..0a0d3d9 100644 --- a/design/templates/details/note.html +++ b/design/templates/details/note.html @@ -12,7 +12,7 @@ <meta name="geo.placename" content="{% if object.location.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> <meta name="geo.region" content="{{object.country.iso2}}{%if object.state.code != '' %}-{{object.state.code}}{%endif%}"> {%endblock%} -{% block bodyid %}class="archive notes permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} +{% block bodyid %}class="notes permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} {% block primary %} @@ -21,22 +21,32 @@ <div class="p-name e-content"> {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> + <span class="p-author h-card"> + <data class="p-name" value="Scott Gilbertson"></data> + <data class="u-url" value="https://luxagraf.net/"></data> + </span> <footer> - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + <p class="note--date"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a> </p>{% if object.location %} - <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <p class="p-location note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> </p>{% endif %}{% if object.twitter_id %} - <p class="meta"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> + <p class="note--twitter"> + <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> + <action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> + </action> + <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> + </action> + <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> + </action> </p>{% endif %} </footer> @@ -44,10 +54,10 @@ {% with object.get_previous_published as prev %} <nav id="page-navigation"> <ul>{% if prev%} - <li id="next"><span class="bl">Previous:</span> + <li rel="previous" id="next"><span class="bl">Previous:</span> <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> </li>{%endif%}{% if next%} - <li id="prev"><span class="bl">Next:</span> + <li rel="next" id="prev"><span class="bl">Next:</span> <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> </li>{%endif%} </ul> |