diff options
65 files changed, 4690 insertions, 1730 deletions
diff --git a/app/books/templates/books/book_detail.html b/app/books/templates/books/book_detail.html index 1dad0fc..6304562 100644 --- a/app/books/templates/books/book_detail.html +++ b/app/books/templates/books/book_detail.html @@ -1,21 +1,19 @@ {% extends 'base.html' %} {% load typogrify_tags %} -{%block bodyid%}class="detail"{%endblock%} +{%block bodyid%}class="detail center book-detail"{%endblock%} {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} - {% block primary %}<main itemprop="mainEntity" itemscope itemtype="http://schema.org/Book"> - <header class="tight"> - <h1 class="post-title book-title" itemprop="name">{{object.title|smartypants|widont|safe}}</h1> - <h2 class="post-subtitle" itemprop="author" itemscope itemtype="http://schema.org/Person"> - <meta itemprop="name" content="{{object.author_name}}"/>by {{object.author_name}}</h2> - - + {% block primary %}<main class="content" itemprop="mainEntity" itemscope itemtype="http://schema.org/Book"> + <header class="post-header"> + <h1 class="post-hed" itemprop="name">{{object.title|smartypants|widont|safe}}</h1> + <h2 class="post-subtitle-line" itemprop="author" itemscope itemtype="http://schema.org/Person"> + <meta itemprop="name" content="{{object.author_name}}"/>by {{object.author_name}}</h2> </header> + <div class="post-body"> <div class="book-cover-wrapper"> <img src="{{object.get_image_url}}" alt="{{object.title}} cover" /> </div> <div class="meta-cover"> <dl class="book-metadata"> - {% if object.rating %}<dt>Rating</dt><dd class="book-stars"> {% for i in object.ratings_range %}{% if i <= object.get_rating%}★{%else%}☆{%endif%}{%endfor%}</span></dd>{%endif%} {% if object.read_in %}<dt>Read</dt> @@ -33,7 +31,7 @@ </div> </div>{%if object.body_html%} <div class="thoughts" itemprop="review" itemscope itemtype="http://schema.org/Review"> - <h5>Notes</h5> + <h5 class="hedtinycaps">Notes</h5> <span class="hide" itemprop="reviewRating">{{object.rating}}</span> <meta itemprop="author" content="Scott Gilbertson" /> <meta itemprop="datePublished" content="{{object.read_date|date:"c"}}"> @@ -41,22 +39,21 @@ </div>{%endif%} {% if object.bookhighlight_set.all %} <div class="highlights"> - <h4>Highlights:</h4> + <h4 class="hedtinycaps">Highlights:</h4> {% for object in object.bookhighlight_set.all %}{% if object.is_public %} - <div class="h-entry hentry post--article book"> - <a class="highlink" id="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">¶</a> - <div class="book-highlight"> + <div class="h-entry hentry book-highlight"> + <a class="book-highlight-link" id="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">¶</a> + <div class="book-highlight-body"> {{object.body_html|safe|amp|smartypants}} + <span class="book-highlight-footer">– Page: {{object.page}} {% if object.location %}(Kindle location: {{object.location|cut:"["|cut:"]"}}){%endif%}</span> </div> - <p class="foot">– Page: {{object.page}} {% if object.location %}(Kindle location: {{object.location|cut:"["|cut:"]"}}){%endif%}</p> </div> {% endif %}{% endfor %} </div> {%endif%} + <p class="small dis"><em>When you buy a book using the link above, I may earn a small affiliate commission.</em></p> + </div> </main> {% endblock %} {% block disclaimer %} -<div class="highlights"> - <p class="dis"><em>When you buy a book using the link above, I may earn a small affiliate commission.</em></p> -</div> {% endblock %} diff --git a/app/books/templates/books/book_list.html b/app/books/templates/books/book_list.html index 96d4d1b..dbfa767 100644 --- a/app/books/templates/books/book_list.html +++ b/app/books/templates/books/book_list.html @@ -6,48 +6,24 @@ {% block metadescription %}Books I've read and thoughts on them. {% endblock %} {%block bodyid%}class="archive" id="books-archive"{%endblock%} {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} -{% block primary %}<main>{% autopaginate object_list 24 %} - <h1 class="hide">Books</h1> - <div class="intro"> - <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p> - <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p> - </div> - <nav class="pagination">{% paginate %} - </nav> - <div class="archive-grid book-grid"> {% for object in object_list %} - <article class="archive-card" itemscope itemtype="http://schema.org/Book"> +{% block primary %}<main role="main" class="archive-wrapper">{% autopaginate object_list 24 %} + <div class="archive-intro"> + <h1 class="archive-hed">Book Notes</h1>{% if page_obj.number == 1%} + <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p> + <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>{%endif%} + </div> + <div class="archive-grid archive-grid-quad">{% for object in object_list %} + <article class="archive-grid-card" itemscope itemtype="http://schema.org/Book"> {% if object.image %}<div class="img-wrapper"><a href="{{object.get_absolute_url}}"><img itemprop="image" src="{{object.get_image_url}}" alt="cover art for {{object.title}} by {{object.author_name}}"/></a></div>{%endif%} - <h2 class="post-title" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2> - <h4 class="author" itemprop="author">{{object.author_name}}</h4> - <div class="post-summary" itemprop="review" itemscope itemtype="http://schema.org/Review"> - {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}★{%else%}☆{%endif%}{%endfor%}</span>{%endif%} + <h2 class="card-hed card-hed-btm" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2> + <h4 class="card-smcaps" itemprop="author">{{object.author_name}}</h4> + <div class="card-summary" itemprop="review" itemscope itemtype="http://schema.org/Review"> + {% if object.rating %}<span class="card-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}★{%else%}☆{%endif%}{%endfor%}</span>{%endif%} <span class="hide" itemprop="author">Scott Gilbertson</span> - <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div> - </article> - {% endfor %}</div> + <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="card-dek read-in">Read in: {{object.read_date|date:"F Y"}}</span></div> + </article>{% endfor %} + </div> <nav aria-label="page navigation" class="pagination">{% paginate %} </nav> </main> {% endblock %} - - - title = models.CharField(max_length=200) - author_name = models.CharField(max_length=200) - slug = models.CharField(max_length=50) - year_pub = models.CharField(max_length=4, blank=True, null=True) - read_date = models.DateTimeField() - isbn = models.CharField(max_length=100, blank=True, null=True) - body_html = models.TextField(null=True, blank=True) - url = models.CharField(max_length=200, blank=True, null=True) - tags = TaggableManager() - RATINGS = ( - ('1', "1 Star"), - ('2', "2 Stars"), - ('3', "3 Stars"), - ('4', "4 Stars"), - ('5', "5 Stars"), - ) - rating = models.CharField(max_length=1, choices=RATINGS, null=True) - enable_comments = models.BooleanField(default=False) - image = models.FileField(upload_to='book-covers/', null=True, blank=True) - diff --git a/app/locations/templates/locations/location_detail.html b/app/locations/templates/locations/location_detail.html new file mode 100644 index 0000000..81aeb97 --- /dev/null +++ b/app/locations/templates/locations/location_detail.html @@ -0,0 +1,92 @@ +{% extends 'base.html' %} +{% load typogrify_tags %} +{% load get_image_by_size %} +{% load get_image_width %} +{% load pagination_tags %} + +{% block pagetitle %}{{object.name|title|smartypants|safe}} | Luxagraf, a travelogue | {% if object.country_name == "United States" %}{{object.location_name|smartypants|safe}}, {{object.state_name}}{%else%}{{object.location_name|smartypants|safe}}, {{object.country_name}}{%endif%}){% endblock %} + +{% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %} +{%block extrahead%} + <link rel="canonical" href="http://luxagraf.net{{object.get_absolute_url}}" /> +{%endblock%} +{%block bodyid%}id="location" class="archive"{%endblock%} +{% block primary %} + <main class="content"> + <header class="archive-intro"> + <h1>{{object.name}}</h1> + {{object.description_html}} + </header> + <div> + <h2 class="hedtinycaps">Journal entries from {{object.name}}</h2> + <div class="archive-grid">{% for object in entry_list %} + <article class="h-entry hentry archive-grid-card" itemscope itemType="http://schema.org/Article"> + <div class="card-image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image %} + {%else%} + <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a> + </div> + <h2 class="p-name card-hed-it" 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"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p> + <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <p class="card-summary card-dek"> + <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%} + </span> – + <span class="p-summary" itemprop="description"> + {{object.dek|safe}} + </span> + </p> + </article> {% endfor %} + </div> + </div> + {% if notes_list %}<section id="field-notes" class="archive-list"> + <h3 class="hedtinycaps">Field Notes</h3> + <ul class="fancy-archive-list">{% for object in notes_list %} + <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <a href="{{object.get_absolute_url}}" class="u-url"> + {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%} + <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> + <a href="{{object.get_absolute_url}}"> + <h2>{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + </a> + {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, + <span class="p-region">{{object.location.state_name}}</span>, + <span class="p-country-name">{{object.location.country_name}}</span> + <data class="p-latitude" value="{{object.latitude}}"></data> + <data class="p-longitude" value="{{object.longitude}}"></data> + </h4>{% endif %} + </li> + {%endfor%}</ul> + </section>{% endif %} + {% if sighting_list %} + <div class="section"> + <h2 class="hedtinycaps">Birds and Mammals seen in {{object}}</h2> {% for object in sighting_list %} + <ul class="archive-list"> + <li class="archive-list-card archive-list-card-sm">{% if object.ap.image%} + <div class="circle-img-wrapper"> + <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}"> + {% include "lib/img_archive.html" with image=object.ap.image %} + </a> + </div>{% endif %} + <h3 class="card-hed"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a></h3> + <p class="card-lede">{{object.ap.scientific_name}}</p> + <time class="card-smcaps" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + </li> + </ul> {% endfor %} + </div>{%endif%} + + {% comment %} + {% for entry in book_list %}{% if forloop.first %} + <div id="recommended-reading" > + <h3 class="hed">Recommended Reading</h3> + <ul>{% endif %}{% for obj in entry.books.all %} + <li><a href="{% url 'books:detail' slug=obj.slug %}"><img src="{{obj.get_small_image_url}}" /></a></li>{% endfor %} + {% if forloop.last%}</ul> + </div>{%endif%}{% endfor %} + {% endcomment %} + </main> +{% endblock %} diff --git a/app/lttr/templates/lttr/friends_detail.html b/app/lttr/templates/lttr/friends_detail.html index 52a2a2a..11520a6 100644 --- a/app/lttr/templates/lttr/friends_detail.html +++ b/app/lttr/templates/lttr/friends_detail.html @@ -52,43 +52,41 @@ } </script> {%endblock%} -{%block bodyid%}id="home" class="archive"{%endblock%} -{% block breadcrumbs %} -<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a> → +{%block bodyid%}id="home" class="friends"{%endblock%} +{% block breadcrumbs %}<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> + <span class="nav-item" itemprop="item"> + <a href="/" itemprop="name">Home</a> <meta itemprop="position" content="1" /> - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a href="/newsletter/" itemprop="item"><span itemprop="name">Friends of a Long Year</span></a> - <meta itemprop="position" content="3" />→ - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <span itemprop="item"> - <span itemprop="name">{{object.get_issue_str}}</span> - </span> - <meta itemprop="position" content="4" /> - </li> - </ol> + </span> + <span class="nav-item" itemprop="item"> + <a href="/newsletter/friends/" itemprop="name">Friends of a Long Year</a> + <meta itemprop="position" content="2" /> + </span> + <span class="nav-item" itemprop="item"> + <span itemprop="name">{{object.get_issue_str}}</span> + <meta itemprop="position" content="3" /> + </span> + </nav> {% endblock %} {% block primary %} <main> - <figure class="large-top-image"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=object.featured_image%} - <img class="u-photo" itemprop="image" sizes="(max-width: 960px) 100vw" - srcset="{{image.get_srcset}}" - src="{{image.get_src}}" - alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> - </a>{%endwith%} - </figure> - <article class="h-entry hentry entry-content content lttr" itemscope itemType="http://schema.org/BlogPosting"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> - <div class="post-linewrapper"> + <figure class="large-top-image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=object.featured_image%} + <img class="u-photo" itemprop="image" sizes="(max-width: 960px) 100vw" + srcset="{{image.get_srcset}}" + src="{{image.get_src}}" + alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> + </a>{%endwith%} + </figure> + <article class="h-entry hentry content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> + <div class="post-dateline"> <time class="dt-published published dt-updated post-date lttr-box" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Transmission {{object.get_issue_str}} – {{object.pub_date|date:"F, Y"}}</span></time> <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> {{object.body_html|safe|smartypants}} </div> {%if object.books.all %}<div class="entry-footer"> @@ -133,23 +131,15 @@ {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <div class="nav-wrapper"> - <nav id="page-navigation" class="page-nav-photo{%if wildlife or object.field_notes.all or object.books.all %}{%else%} page-border-top"{%endif%}> - <h4>Next / Previous</h4> - <ul>{% if next %} - <li id="next"> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}"> - <img class="prev-next-img" src="{%get_image_by_size next.featured_image "navigation_thumb"%}" alt="{{next.featured_image.alt}}" /> - <div class="nav-title">{{next.get_issue_str}} – {{next.title|safe}}</div> - </a> - </li>{%endif%}{% if prev%} - <li id="prev"> - <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}"> - <img src="{%get_image_by_size prev.featured_image "navigation_thumb"%}" /> - <div class="nav-title">{{prev.get_issue_str}} – {{prev.title|safe}}</div> - </a> - </li>{%endif%} - </ul> + <nav class="page-navigation"> + <div>{% if prev%} + <span class="label">Previous:</span> + <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> + </div>{%endif%}{% if next%} + <div> + <span class="label">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </div>{%endif%} </nav>{%endwith%}{%endwith%} </div> {% if object.related.all %}<div class="article-afterward related"> diff --git a/app/lttr/templates/lttr/friends_list.html b/app/lttr/templates/lttr/friends_list.html index def730e..635492d 100644 --- a/app/lttr/templates/lttr/friends_list.html +++ b/app/lttr/templates/lttr/friends_list.html @@ -3,29 +3,25 @@ {% block pagetitle %}Luxagraf | Friends of a Long Year {% endblock %} {% block metadescription %}An infrequesnt mailing list about travel, photography, tools, walking, the natural world and other ephemera.{% endblock %} - -{% block primary %}<ul class="bl" 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>Lttr</li> - </ul> - <main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} +{% block primary %} + <main role="main" class="archive-wrapper"> + <div class="archive-intro"> <h1 class="list-hed">Join the <em>Friends of a Long Year</em>.</h1> <iframe target='_parent' style="border:none; background:white; width:100%;" title="embedded form for subscribing the the Friends of a Long Year newsletter" src="{% url 'lttr:subscribe' slug='friends' %}"></iframe> - <h2 class="subhead">Say what? </h2> + <h2 class="list-subhed">Say what? </h2> <p><em>Friends of a Long Year</em> is a monthly letter about living outdoors, travel, literature, music, vintage vehicles, and other ephemera. Unsubscribing is easy. It's all <a href="/src/building-your-own-mailing-list-software">self-hosted</a>, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p> <p>The name <em>Friends of a Long Year</em> comes from the early 20th century explorer and desert rat, Mary Hunter Austin, whose collected essays, <a href="https://archive.org/details/lostbordersillu00brotgoog/page/n8"><cite>Lost Borders</cite></a> is dedicated to the "Friends of a Long Year".</p> <p>While I came up with this name last year, it seems particularly fitting in 2020, which is shaping up to be a long year. If you like to travel with friends, mentally for now, please, join us.</p> </div> - <h3 class="list-title">Letters</h3> - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <h3 class="archive-sans">Letters</h3> + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card" itemscope itemType="http://schema.org/Article"> <a href="{{object.get_absolute_url}}" class="u-url"> {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%} - <span class="date dt-published">issue {{object.get_issue_str}} – {{object.pub_date|date:"M y"}}</span> - <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + <span class="date dt-published card-smcaps">issue {{object.get_issue_str}} – {{object.pub_date|date:"M y"}}</span> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-lede">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} </a> </li> {%endfor%}</ul> diff --git a/app/lttr/templates/lttr/newslettermailing_detail.html b/app/lttr/templates/lttr/newslettermailing_detail.html index 71aa294..1a89200 100644 --- a/app/lttr/templates/lttr/newslettermailing_detail.html +++ b/app/lttr/templates/lttr/newslettermailing_detail.html @@ -64,8 +64,9 @@ alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> </a>{%endwith%} </figure> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} <div class="post-linewrapper"> {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -76,7 +77,7 @@ <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> + <div id="article" class="e-content post-body" itemprop="articleBody"> {{object.body_html|safe|smartypants}} </div> {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %} diff --git a/app/pages/templates/pages/luxagraf/homepage.html b/app/pages/templates/pages/luxagraf/homepage.html index c8075ea..7a768f9 100644 --- a/app/pages/templates/pages/luxagraf/homepage.html +++ b/app/pages/templates/pages/luxagraf/homepage.html @@ -18,8 +18,8 @@ {% block primary %}<div class="banner">{% with object=homepage.featured %} <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <figure class="post-image"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=homepage.featured_image%} + <figure class="large-top-image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=object.featured_image%} <img class="u-photo" itemprop="image" sizes="(max-width: 960px) 100vw" srcset="{{image.get_srcset}}" src="{{image.get_src}}" @@ -29,10 +29,11 @@ <div class="hero-text-wrapper"> <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{homepage.tag_line|safe|smartypants}}{%endif%}</h2> - <aside class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - <div class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</div> - </aside> - <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <div class="post-dateline"> + {% if object.location %}<div class="p-location h-adr adr post-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + <div class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</div> + </div>{%endif%} + <time class="dt-published published dt-updated hide" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> <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> @@ -40,58 +41,54 @@ </figure> </article>{% endwith %} </div> - <section class="bio-short"> + <section class="homepage-bio-section"> <h2 class="homepage-section-header">About Luxagraf</h2> + <div class="homepage-bio-wrapper"> <img src="/media/img/usa-resize.svg" alt="map of travels" class="homepage-map-img" /> + <div> <p>We’re a family of five living full time in a vintage 1969 Dodge Travco motorhome. We’ve been at it for three years now. People always ask: <a href="https://luxagraf.net/1969-dodge-travco-motorhome">What's it like for five people to live in a 26ft RV</a>? <a href="https://luxagraf.net/essay/why-a-vintage-rv">Why do we live this way</a>?</p> <p>The short answer is simple: because we like it and we can. If you want more than a soundbite, <a href="/jrnl/">read through the journal</a>. If you like it, sign up for the newsletter, <a href="/newsletter/friends/"><em>Friends of a Long Year</em></a>. I'd also <a href="/feed.xml">subscribe to the RSS feed</a>, but that's just <a href="/about">me</a>. <!-- If you’re interested there’s a guide section with some <a href="/guides/">advice, tips and tricks for those who’d aspire to live full time in a van or RV</a> --></p> + </div> + </div> </section> <section class="recent-popular"> <div class="recent"> <h2 class="homepage-section-header">Recent</h2> - <div class="archive-grid">{% for object in object_list %} - <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article"> - <div class="post-image"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image %} - {%else%} - <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a> + <div class="archive-grid archive-grid-double">{% for object in object_list %} + <article class="h-entry hentry archive-grid-card archive-grid-card-simple" itemscope itemType="http://schema.org/Article"> + <div class="card-image-sm"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + {% include "lib/img_archive.html" with image=object.featured_image %}</a> </div> - <h3 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></h3> + <h3 class="p-name card-hed-smit" 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></h3> <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> - <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-summary"> - <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%} </span> - </p> </article> {% endfor %} </div> </div> <div class="popular"> <h2 class="homepage-section-header">Popular</h2> - <div class="archive-grid">{% for object in homepage.popular.all %} - <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article"> - <div class="post-image"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image %} - {%else%} - <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a> + <div class="archive-grid archive-grid-single">{% for object in homepage.popular.all %} + <article class="h-entry hentry archive-grid-card archive-grid-card-simple" itemscope itemType="http://schema.org/Article"> + <div class="card-image-sm"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + {% include "lib/img_archive.html" with image=object.featured_image %}</a> </div> - <h3 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></h3> + <h3 class="p-name card-hed-smit" 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></h3> <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> - <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-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" %}<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.location.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.location.country.slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%} - </span> - </p> + <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%} + </span> </article> {% endfor %} </div> </div> </section> - <section> - <h5 class="homepage-next"><a href="/jrnl/">Browse the Archives</a></h5> + <section class="homepage-next"> + <h5><a href="/jrnl/">Browse the Archives</a></h5> </section> {% endblock %} diff --git a/app/pages/templates/pages/luxagraf/page_detail.html b/app/pages/templates/pages/luxagraf/page_detail.html index 4644386..fc66917 100644 --- a/app/pages/templates/pages/luxagraf/page_detail.html +++ b/app/pages/templates/pages/luxagraf/page_detail.html @@ -7,7 +7,7 @@ {%block bodyid%}id="{{object.title|slugify}}"{%endblock%} {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %}<main> - <article> + <article class="content"> <header class="post-header"> <h1 class="post-title">{{object.title}}</h1> {%if object.sub_title %}<h2 class="post-subtitle">{{object.sub_title}}</h2>{%endif%} diff --git a/app/posts/templates/posts/essay_detail.html b/app/posts/templates/posts/essay_detail.html index 3902e33..b6a0db8 100644 --- a/app/posts/templates/posts/essay_detail.html +++ b/app/posts/templates/posts/essay_detail.html @@ -32,9 +32,9 @@ {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %} <main> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} @@ -46,7 +46,7 @@ <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-essay" itemprop="articleBody"> + <div id="article" class="e-content post-body" itemprop="articleBody"> {% if object.prologue_html %}<div class="afterward"> {{object.prologue_html|smartypants|safe}} </div>{%endif%} @@ -148,6 +148,7 @@ document.addEventListener("DOMContentLoaded", function(event) { {%endif%}{%endwith%} } + {%comment%} lightbox.onload = function() { var opts= { //nextOnClick: false, @@ -165,6 +166,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var lightbox = new Lightbox(); lightbox.load(opts); } + {%endcomment%} {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} diff --git a/app/posts/templates/posts/essay_list.html b/app/posts/templates/posts/essay_list.html index 8a35225..cdd272f 100644 --- a/app/posts/templates/posts/essay_list.html +++ b/app/posts/templates/posts/essay_list.html @@ -4,21 +4,39 @@ {% block pagetitle %}Collected Essays of Scott Gilbertson {% endblock %} {% block metadescription %}Collected writing: essays, articles and stories on travel, photography, tools, walking, the natural world and other ephemera.{% endblock %} {% block breadcrumbs %}{% if breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{%endif%}{% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Essays & Articles</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Essays & Articles</h2> <p>Topics include travel, writing, photography, free software, culture, and once, Del Taco.</p> <p>Some essays below were previously published in: <em><a href="https://www.wired.com/author/scott-gilbertson/" rel="me">WIRED</a></em>, <em><a href="https://www.budgettravel.com/article/0902_HTTN_SocialNetwork_5488">Budget Travel</a></em>, <em><a href="https://arstechnica.com/">Ars Technica</a></em>, <em><a href="https://www.epicurious.com/contributors/scott-gilbertson" rel="me">Epicurious</a></em>, <em><a href="https://web.archive.org/web/20100904114555/http://one.longshotmag.com/article/going-for-seconds">Longshot Magazine</a>,</em> <em><a href="https://web.archive.org/web/20150506051746/http://1888.center/scott-gilbertson/" rel="me">The Cost of Paper</a></em> and elsewhere.</a></p> </div> - <h1 class="topic-hed">Essays</h1> - <ul>{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span> + <h1 class="archive-sans">Essays</h1> + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card archive-list-card-sm" itemscope itemType="http://schema.org/Article"> + <span class="date dt-published card-smcaps">{{object.pub_date|date:"F Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - <p class="p-summary">{% if object.subtitle %}{{object.subtitle|safe|smartypants}}{%else%}{{object.meta_description}}{%endif%}</p> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> </a> </li> {%endfor%}</ul> </main> {%endblock%} + + + <ul class="article-card-list">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article"> + <span class="date"></span><span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> + <a href="{{object.get_absolute_url}}"> + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + </a> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, + <span class="p-region">{{object.location.state_name}}</span>, + <span class="p-country-name">{{object.location.country_name}}</span> + <data class="p-latitude" value="{{object.latitude}}"></data> + <data class="p-longitude" value="{{object.longitude}}"></data> + </h4>{% endif %} + </li> + {%endfor%}</ul> diff --git a/app/posts/templates/posts/fieldnote_archive_list_date.html b/app/posts/templates/posts/fieldnote_archive_list_date.html index 5d6865f..9294867 100644 --- a/app/posts/templates/posts/fieldnote_archive_list_date.html +++ b/app/posts/templates/posts/fieldnote_archive_list_date.html @@ -12,21 +12,21 @@ <li>{% if not month %}{{year|date:"Y"}}{%else%}<a href="/field-notes/{{month|date:"Y"}}/">{{month|date:"Y"}}</a> →{%endif%}</li> {% if month %}<li itemprop="title">{{month|date:"F"}}</li>{% endif %} </ul> - <main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Field Notes {% if month or year %}{% if month %} from {{month|date:"F"}} {{month|date:"Y"}}{%else%} from {{year|date:"Y"}}{%endif%}{%endif%}</h2> + <main role="main" id="essay-archive" class="archive-list"> + <div class="archive-intro"> + <h2 class="post-title">Field Notes {% if month or year %}{% if month %} from {{month|date:"F"}} {{month|date:"Y"}}{%else%} from {{year|date:"Y"}}{%endif%}{%endif%}</h2> <p>Quick notes, sketches and images from the road. This is the semi-orgnized brain dump that comes before the more organized <a href="/jrnl/" title="read the journal">journal entries</a> and <a href="/essays/" title="read essays">essays</a>. If I used social media this is the stuff I'd probably put there, but I prefer to put it here, even if it means a lot few people read it.</p> </div> - <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <a href="{{object.get_absolute_url}}"> - {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" /></div>{%endif%} - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> + <ul class="article-card-list article-card-list-circle">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article"> + <a href="{{object.get_absolute_url}}" class="u-url"> + {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%} + <span class="date"></span><span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> @@ -34,7 +34,7 @@ <data class="p-longitude" value="{{object.longitude}}"></data> </h4>{% endif %} </li> - {%endif%}{%endfor%}</ul> + {%endfor%}</ul> </main> {% endblock %} diff --git a/app/posts/templates/posts/fieldnote_detail.html b/app/posts/templates/posts/fieldnote_detail.html index 3368c56..0cb8dd1 100644 --- a/app/posts/templates/posts/fieldnote_detail.html +++ b/app/posts/templates/posts/fieldnote_detail.html @@ -34,9 +34,10 @@ </ol> {% endblock %} {% block primary %}<main role="main"> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/BlogPosting"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> + <article class="h-entry hentry" itemscope itemType="http://schema.org/BlogPosting"> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name entry-title post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} <div class="post-linewrapper"> {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -47,37 +48,9 @@ <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div class="e-content"> - {{object.body_html|safe|smartypants}} + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> + {{object.body_html|safe|smartypants}} </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> - {%comment%}<p class="note--date"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.pub_date|html5_datetime}}">{{object.pub_date|date:"F j, Y"}}</time></a> - </p>{%endcomment%} - {% comment %} {% if object.twitter_id %} - <ul class="note--actions"> - <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li> - <li> - <indie-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></indie-action> - </li> - <li> - <indie-action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> - <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> - </indie-action> - </li> - <li> - <indie-action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> - <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> - </indie-action> - </li> - </ul>{% endif %}{% endcomment %} - </footer> - - {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} <nav id="page-navigation"> diff --git a/app/posts/templates/posts/fieldnote_list.html b/app/posts/templates/posts/fieldnote_list.html index 14d61c0..cd7601e 100644 --- a/app/posts/templates/posts/fieldnote_list.html +++ b/app/posts/templates/posts/fieldnote_list.html @@ -20,22 +20,22 @@ </li> </ol> {% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Field Notes</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Field Notes</h2> <p>Quick notes, sketches, and images from the road. This is the semi-organized brain dump that comes before the more organized <a href="/jrnl/" title="read the journal">journal entries</a>. If I used social media this is the stuff I'd probably put there, but I prefer to put it here, even if it means a lot fewer people read it.</p> </div> {% autopaginate object_list 24 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <a href="{{object.get_absolute_url}}" class="u-url"> - {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%} - <span class="datei"></span><span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> - <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} - </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card" itemscope itemType="http://schema.org/Article"> + {% if object.featured_image %}<a href="{{object.get_absolute_url}}" class="u-url"> + <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%} + <span class="date dt-published card-smcaps">{{object.pub_date|date:"F Y"}}</span> + <a href="{{object.get_absolute_url}}"> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> + </a> + {% if object.location %}<h4 class="p-location h-adr card-location card-smcaps" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> diff --git a/app/posts/templates/posts/guide_base.html b/app/posts/templates/posts/guide_base.html index e7764db..0f1f482 100644 --- a/app/posts/templates/posts/guide_base.html +++ b/app/posts/templates/posts/guide_base.html @@ -9,26 +9,26 @@ <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> <li itemprop="title">guide</li> </ul> - <main role="main" id="guide-archive" class="essay-archive guide-archive archive-list"> - <div class="essay-intro"> - <h2>Roaming Guide</h2> - <h3>Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.</h3> + <main role="main" id="guide-archive" class="archive-list"> + <div class="archive-intro"> + <h2 class="post-title">Roaming Guide</h2> + <h3 class="post-subtitle">Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.</h3> <p>I don't want to tell you how to travel. Everyone is different. Besides, even after twenty some odd years of travel, I am still learning. </p> <p>I've always been most inspired by wandering monks and nuns, those who walked or sailed with next to nothing and survived. Mostly. Today most of us are not that skilled or strong of will, but keeping that example in mind is helpful. The less stuff you travel with the better off you are. Up to a point. Having the right tools is important. The right tools make life easier and more fun.</p> <p>I put this together to help you find the tools you need. These aren't casual reviews. These are things I have spent years seeking out, using, and refining. In the end what you need are not things, but strategies and tools that allow you to create solutions to problems. </p> </div> - <h1 class="topic-hed">Reviews</h1> + <h1 class="archive-hed">Reviews</h1> {% autopaginate object_list 30 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <ul class="article-card-list article-card-list-circle">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article"> <a href="{{object.get_absolute_url}}" class="u-url"> <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div> - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> + <span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> diff --git a/app/posts/templates/posts/guide_by_topic.html b/app/posts/templates/posts/guide_by_topic.html index 625ac5e..1cafaa1 100644 --- a/app/posts/templates/posts/guide_by_topic.html +++ b/app/posts/templates/posts/guide_by_topic.html @@ -10,30 +10,29 @@ <li><a href="/guides/" title="luxagraf guides" itemprop="url"><span itemprop="title">Guides</span></a> → </li> <li itemprop="title">{{topic}}</li> </ul> - <main role="main" id="guide-archive" class="essay-archive guide-archive archive-list"> - <div class="essay-intro"> - <h2>{{topic}} Guides</h2> - <h3>{{topic.description|safe|smartypants|widont}}</h3> + <main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">{{topic}} Guides</h2> + <h3 class="archive-lede">{{topic.description|safe|smartypants|widont}}</h3> {{topic.intro_html|safe|smartypants|widont}} </div> {% autopaginate object_list 30 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <a href="{{object.get_absolute_url}}" class="u-url"> - <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div> - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> - <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} - </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> - <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, - <span class="p-region">{{object.location.state_name}}</span>, - <span class="p-country-name">{{object.location.country_name}}</span> - <data class="p-latitude" value="{{object.latitude}}"></data> - <data class="p-longitude" value="{{object.longitude}}"></data> - </h4>{% endif %} - </li> - {%endfor%}</ul> + <h3 class="archive-sans">Guides</h3> + <ul class="archive-grid">{% for object in object_list %} + <li class="archive-grid-card"><a href="{{object.get_absolute_url}}" title="{{object.title}}"> + {% if object.featured_image %}{% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %}{%endif%} + <h2 class="p-name entry-title card-hed-it" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h2> + <span class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></span> + <span class="post-summary"> + {% if object.location %}<span class="p-location h-adr adr card-smcaps" 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>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:"F Y"}}</span></time>{%endif%} + </span> + </a> + </li> + {% endfor %}</ul> + </main> {%endblock%} diff --git a/app/posts/templates/posts/guide_detail.html b/app/posts/templates/posts/guide_detail.html index 7e5df74..998d6ce 100644 --- a/app/posts/templates/posts/guide_detail.html +++ b/app/posts/templates/posts/guide_detail.html @@ -37,13 +37,13 @@ <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">Field-Tests</span></a> → </li> <li itemprop="title">{{object.short_title|smartypants|safe}}</li> </ul> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a> </span> <meta itemprop="image" content="https://images.luxagraf.net/header.gif" /> <!--{{self.featured_image.url}}" />--> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} @@ -55,7 +55,7 @@ <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Last Updated: {{object.last_updated|date:"F"}} <span>{{object.last_updated|date:"j, Y"}}</span></time> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-guide" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-body post-guide" itemprop="articleBody"> {% if object.preamble %}<div class="afterward"> {{object.preamble_html|smartypants|safe}} </div>{%endif%} diff --git a/app/posts/templates/posts/jrnl_detail.html b/app/posts/templates/posts/jrnl_detail.html index 7801f6a..09e6b5f 100644 --- a/app/posts/templates/posts/jrnl_detail.html +++ b/app/posts/templates/posts/jrnl_detail.html @@ -54,31 +54,30 @@ } </script> {%endblock%} -{%block htmlclass%}{% with object.template_name as t %} -class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}{%if t == 4 or t == 5 %} black{%endif%}"{%endwith%}{%endblock%} - - {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} -{% block primary %} - <main> - <article class="h-entry hentry entry-content content{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/BlogPosting"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> + {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} + {% block primary %}<main> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} - <div class="post-linewrapper"> + <div class="post-dateline"> {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - <h3 class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</h3> + <span class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %} + <span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%} + <span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%} + </span> – <a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a> </div>{%endif%} <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> - {{object.body_html|safe|smartypants}} - </div> + <div class="e-content entry-content post-body" itemprop="articleBody"> + {{object.body_html|safe|smartypants}} + </div> {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %} <aside id="wildlife"> - <h3>Fauna and Flora</h3> + <h3 class="hedtinycaps">Fauna and Flora</h3> {% regroup wildlife by ap.apclass.get_kind_display as wildlife_list %} <ul> {% for object_list in wildlife_list %} @@ -90,14 +89,14 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </aside> {% endif %}{%if object.field_notes.all %} <aside {% if wildlife %}class="margin-left-none" {%endif%}id="field_notes"> - <h3>Field Notes</h3> + <h3 class="hedtinycaps">Field Notes</h3> <ul>{% for obj in object.field_notes.all %} <li><a href="{% url 'fieldnotes:detail' year=obj.pub_date.year month=obj.pub_date|date:"m" slug=obj.slug %}">{{obj}}</a></li> {% endfor %}</ul> </aside>{% endif %} {%if object.books.all %} <aside id="recommended-reading" {%if object.field_notes.all and wildlife %}class="rr-clear{%endif%}" > - <h3>Recommended Reading</h3> + <h3 class="hedtinycaps">Recommended Reading</h3> <ul>{% for obj in object.books.all %} <li><a href="{% url 'books:detail' slug=obj.slug %}"><img src="{{obj.get_small_image_url}}" /></a></li> {% endfor %}</ul> @@ -106,40 +105,39 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </article> {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <div class="nav-wrapper"> - <nav id="page-navigation" {%if wildlife or object.field_notes.all or object.books.all %}{%else%}class="page-border-top"{%endif%}> - <ul>{% if prev%} - <li id="prev"><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="next"><span class="bl">Next:</span> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> - </li>{%endif%} - </ul> + <nav class="page-navigation"> + <div>{% if prev%} + <span class="label">Previous:</span> + <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> + </div>{%endif%}{% if next%} + <div> + <span class="label">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </div>{%endif%} </nav>{%endwith%}{%endwith%} - </div> {% if object.related.all %}<div class="article-afterward related"> - <div class="related-bottom"> + <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}}"> - <div class="post-image post-mini-image"> - {% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} - {%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> - <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"> - {% if object.location %}<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>{%endif%} - {% if object.location and object.model_name.model != 'page' %}–{%endif%} - {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} - </p> + <div class="archive-grid-quad">{% for object in related %} + <div class="archive-grid-card archive-grid-card-simple"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + <div class="card-image-tiny"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {%endif%} + </div> + <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + <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> + <span class="card-smcaps"> + {% if object.location %}<span class="p-location h-adr adr card-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>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} + </span> </a> - </li> - {% endfor %}</ul> + </div> + {% endfor %}</div> </div> </div>{%endif%} @@ -150,6 +148,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} +<div class="comment-wrapper"> <p class="comments--header">{{comment_count}} Comment{{ comment_count|pluralize }}</p> {% render_comment_list for object %} {%endif%} @@ -159,6 +158,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i {% else %} <p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p> {%endif%} +</div> </main> {% endblock %} {% block js %} @@ -181,7 +181,7 @@ document.addEventListener("DOMContentLoaded", function(event) { } {%endif%}{%endwith%} } - + {%comment%} lightbox.onload = function() { var opts= { //nextOnClick: false, @@ -199,6 +199,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var lightbox = new Lightbox(); lightbox.load(opts); } + {%endcomment%} {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} @@ -208,7 +209,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var c = dataattr[i].parentNode; var img = document.createElement("img"); img.src = 'https://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg'; - img.className += "gravatar"; + img.className += "comment-card-image"; img.alt = "gravatar icon"; c.insertBefore(img, c.childNodes[3]); } diff --git a/app/posts/templates/posts/jrnl_list.html b/app/posts/templates/posts/jrnl_list.html index 6eefe10..6b4411f 100644 --- a/app/posts/templates/posts/jrnl_list.html +++ b/app/posts/templates/posts/jrnl_list.html @@ -7,18 +7,18 @@ {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %}<main class="archive-grid"> <h1 class="hide">{% if region %}Journal entries from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Journal {%endif%}</h1>{% autopaginate object_list 24 %} {% for object in object_list %} - <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article"> - <div class="post-image"> + <article class="h-entry hentry archive-grid-card" itemscope itemType="http://schema.org/Article"> + <div class="card-image"> <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %} {% include "lib/img_archive.html" with image=object.featured_image %} {%else%} <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</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> + <h2 class="p-name card-hed-it" 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"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></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-summary"> - <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <p class="card-summary card-dek"> + <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%} </span> – <span class="p-summary" itemprop="description"> diff --git a/app/posts/templates/posts/post_detail.html b/app/posts/templates/posts/post_detail.html index 9e82786..4c897fc 100644 --- a/app/posts/templates/posts/post_detail.html +++ b/app/posts/templates/posts/post_detail.html @@ -37,10 +37,10 @@ <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">{{object.get_post_type_display}}</span></a> → </li> <li itemprop="title">{{object.short_title|smartypants|safe}}</li> </ul> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1> - <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> + {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -51,7 +51,7 @@ <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-essay" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> {% if object.preamble %}<div class="afterward"> {{object.preamble_html|smartypants|safe}} </div>{%endif%} diff --git a/app/posts/templates/posts/src_detail.html b/app/posts/templates/posts/src_detail.html index 8e58b3b..179bb68 100644 --- a/app/posts/templates/posts/src_detail.html +++ b/app/posts/templates/posts/src_detail.html @@ -22,26 +22,13 @@ {% block bodyid %}class="src detail single"{% endblock %} {%block sitesubtitle %}Code Slowly{% endblock%} -{% block breadcrumbs %}<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a itemprop="item" href="/"> - <span itemprop="name">Home</span> - </a> → - <meta itemprop="position" content="1" /> - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a href="/src/" itemprop="item"> - <span itemprop="name">Src</span> - </a> - <meta itemprop="position" content="2" /> - </li> - </ol>{% endblock %} +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %}<main role="main"> - <article class="hentry post-article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|safe|smartypants}}{%else%}{{object.title|safe|smartypants|widont}}{%endif%}</h1> - <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</h2> - <div class="post-linewrapper"> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> + <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</h2> + <div class="post-dateline"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span> @@ -49,12 +36,12 @@ </header> - <div id="article" class="e-content entry-content post-body post-body-{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-article post-body-{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> {{object.body_html|safe|smartypants|widont}} </div> </article> <div class="entry-footer"> - <aside id="donate"> + <aside class="donate"> <h3>Donate</h3> <p>I've had several people ask about tipping for the articles here. That's not necessary, but if this article saved you some time and you feel like that's worth some money, I won't turn it down. You can donate here:</p> <div class="donate-btn"> @@ -69,42 +56,41 @@ </div> </aside> </div> - {% if object.slug != 'about' %} {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <nav id="page-navigation"> - <ul>{% if prev%} - <li id="prev"><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="next"><span class="bl">Next:</span> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> - </li>{%endif%} - </ul> + <nav class="page-navigation"> + <div>{% if prev%} + <span class="label">Previous:</span> + <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> + </div>{%endif%}{% if next%} + <div> + <span class="label">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </div>{%endif%} </nav>{%endwith%}{%endwith%} - {%endif%} {% 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}}"> - <div class="post-image post-mini-image"> - {% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} - {%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> - <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"> - {% if object.location %}<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>{%endif%} - {% if object.location and object.model_name.model != 'page' %}–{%endif%} - {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:"F Y"}}</span></time>{%endif%} - </p> + <div class="archive-grid-quad">{% for object in related %} + <div class="archive-grid-card archive-grid-card-simple"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + <div class="card-image-tiny"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {%endif%} + </div> + <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + <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> + <span class="card-smcaps"> + {% if object.location %}<span class="p-location h-adr adr card-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>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} + </span> </a> - </li> - {% endfor %}</ul> + </div> + {% endfor %}</div> </div> </div>{%endif%} </main> diff --git a/app/posts/templates/posts/src_list.html b/app/posts/templates/posts/src_list.html index 21a8c4e..dd8ff24 100644 --- a/app/posts/templates/posts/src_list.html +++ b/app/posts/templates/posts/src_list.html @@ -1,30 +1,35 @@ {% extends 'base.html' %} {% load typogrify_tags %} +{% load pagination_tags %} {% load comments %} {% block pagetitle %}Tutorials and tools for building great things{% endblock %} {% block metadescription %}Tutorials and tools for building great things on the web - by Scott Gilbertson.{% endblock %} {%block sitesubtitle %}Code Slowly{% endblock%} {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Tutorials and tools for building great things on the web.</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Tutorials and tools for building great things on the web.</h2> <p>The indie web is an amazing democratic publishing platform unlike anything in history. The catch is, to avoid serving at the pleasure of the corporate king, you need to know <em>how</em> to publish. That's what these articles are here for, to help you learn how to use independent, community supported open source tools. The web won't last forever, let's build something cool while we can.</p> <p>Topics include HTML, CSS, Django, Linux, Nginx, Python, Postgresql, free software, and, once, the evil that is Google AMP.</p> <p>A few of the articles below were previously published in: <em><a href="https://arstechnica.com/">Ars Technica</a></em>, <em><a href="https://www.wired.com/author/scott-gilbertson/">Wired</a></em>, and <em><a href="https://www.theregister.co.uk/Author/Scott-Gilbertson/">The Register</a></em></p> </div> - <h1 class="topic-hed">Articles</h1> - <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span> + <h1 class="archive-sans">Articles</h1>{% autopaginate object_list 24 %} + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card archive-list-card-sm" itemscope itemType="http://schema.org/Article"> + <span class="date dt-published card-smcaps">{{object.pub_date|date:"F Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - <p class="p-summary">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> </a> </li> - {%endif%}{%endfor%}</ul> + {%endfor%}</ul> + <nav aria-label="page navigation" class="pagination"> + {% paginate %} + </nav> </main> {%endblock%} + diff --git a/app/sightings/templates/sightings/ap_detail.html b/app/sightings/templates/sightings/ap_detail.html new file mode 100644 index 0000000..72c3666 --- /dev/null +++ b/app/sightings/templates/sightings/ap_detail.html @@ -0,0 +1,57 @@ +{% extends 'base.html' %} +{% load typogrify_tags %} +{% block extrahead %} +<style> +#detail-map-canvas { height: 100%;} +</style> +{% endblock %} +{% block bodyid %}class="detail center"{%endblock%} +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} +{% block primary %}<main> + <article class="content"> + <header class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.common_name}}</h1> + <h2 class="post-subtitle post-subtitle-line">{{object.scientific_name}}</h2> + <h3 class="post-smcaps">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3> + </header> + <div class="post-body"> + {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%} + {%if recording %} + <div class="audio-figure"> + <audio autoplay="autoplay" controls="controls"> + <source src="/media/{{recording.audio}}" /> + </audio> + <small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">© {{recording.copyright}}</a></small> + </div> + {%endif%} + {% if field_notes %} + <h4>Field Notes</h4>{% for note in field_notes %} + {{note.body_html|safe|smartypants}} + <p class="post-subtitle-segundo">– <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p> + <hr /> + {%endfor%} + {%endif%} + <div> + <h5 class="hedtinycaps">Seen at</h5> + <ul class="list-sm">{%for sight in sighting %} + <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li> + {%endfor%}</ul> + </div> + </div> +</article> +</main> +{% endblock %} + +{% block js %} +<script src="/media/js/leaflet-master/leaflet-mod.js"></script> +<script src="/media/js/detail.js"></script> +<script type="text/javascript"> +sightings = []; +{% for s in sighting %} +sightings.push(['{{s.latitude}}', '{{s.longitude}}']); +{% endfor %} +window.onload = function() { + createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false; +} +</script> +{% endblock %} diff --git a/design/templates/sightings/sighting_list.html b/app/sightings/templates/sightings/sighting_list.html index d778cb2..0264bda 100644 --- a/design/templates/sightings/sighting_list.html +++ b/app/sightings/templates/sightings/sighting_list.html @@ -4,27 +4,20 @@ {% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %} {% block metadescription %}Plants and Animals seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %} -{%block bodyid%}id="birds" class="archive"{%endblock%} - - -{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> - <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> - {% if region %}{%if region.name == 'United States'%} <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Plants and Animals</span></a> →</li> - <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> →</li> - <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%} - </ul> - <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%} +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} +{% block primary %} + <main class="archive-grid">{% autopaginate object_list 24%} <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %} - <article class="archive-card">{% if object.ap.image%} + <article class="archive-grid-card">{% if object.ap.image%} <div class="post--image"> <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}"> {% include "lib/img_archive.html" with image=object.ap.image %} </a> </div>{% endif %} - <h2 class="post-title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h2> - <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> - <div class="post-summary"> - <span class="post-location" itemscope itemtype="http://schema.org/Place"> + <h2 class="card-hed-smit"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}} (<span class="sci">{{object.ap.scientific_name}}</span>)</a></h2> + <time class="card-smcaps" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> + <div class="card-dek"> + <span class="card-smcaps" itemscope itemtype="http://schema.org/Place"> {% if object.country_name == "United States" %}<span class="p-locality locality">{{object.location_name|smartypants|safe}}</span>, {{object.state_name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location_name|smartypants|safe}}</span>, {{object.country_name}}</a>{%endif%} </span> </div> diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss index 39c7930..4807397 100644 --- a/design/sass/_comments.scss +++ b/design/sass/_comments.scss @@ -1,17 +1,17 @@ //### COMMENTS AND FORMS ### -.comments--header { - @include constrain_narrow; +.comments--wrapper { + @include constrain_narrow(); @include fancy_sans; + text-align: left; + margin-top: -2em; +} +.comments--header { + @include constrain_narrow(); line-height: 6em; @include fontsize(16); font-style: italic; margin-top: 2em; } -.comments--wrapper { - @include constrain_narrow(); - text-align: left; - margin-top: -2em; -} .comment { margin-top: 2.5em; margin-bottom: 2.5em; @@ -20,7 +20,15 @@ margin-top: none; } &:after { - @include faded_line_after; + display: block; + content: ""; + margin-top: 3em; + height: 1px; + 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)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); } &:last-child:after { display: none; @@ -29,15 +37,16 @@ .comment--head, .comment--body { @include breakpoint(alpha) { margin-left: 80px; - margin-top: -2rem; + margin-top: -1rem; } } .comment--head { - margin-bottom: 1em; + margin-bottom: 1rem; } .comment--body { margin-bottom: 3em; @include fontsize(22); + font-family: $fancy_serif; hr { width: 20%; overflow: visible; @@ -49,30 +58,25 @@ } } .who { - @include fancy_sans; @include fontsize(22); } .when { - @include fancy_sans; @include fontsize(15); color: #999; margin-left: 1em; } - .gravatar { border: 2px $brown solid; background: transparent; max-width: 100%; padding: 0; float: left; - margin-top: 5px; + margin-top: -7px; margin-right: 8px; @include breakpoint(alpha) { margin-right: 0; } } - - .comment--form--wrapper { @include constrain_narrow(); p { @@ -119,4 +123,3 @@ margin-bottom: 0; } } - diff --git a/design/sass/_details.scss b/design/sass/_details.scss index 53e819f..74965fd 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -1,601 +1,521 @@ -.detail { - #article { - padding-bottom: 2rem; - border-bottom: 3px double #efefef; - } - article { - font-family: $fancy_serif; - @include constrain_narrow; - margin-top: 4rem; - h1 { - font-family: $fancy_serif; - line-height: 1em; - letter-spacing: -1px; - @include fontsize(48); - font-weight: normal; - margin-bottom: .25rem - } - ul { - text-align: left; - @include fontsize(18); - } - } - .post-subtitle { - font-style: italic; - font-size: 1.4rem; - line-height: 1.25; - margin-top: 0; - margin-bottom: 0; - } - .post-subtitle-segundo { - @include fancy_sans; - @include smcaps; - @include fontsize(13); - font-weight: bold; - color: #999; - - } - .post-linewrapper { - margin-top: 1rem; - padding-top: 1rem; - display: inline-block; - border-top: 1px solid #efefef; - } - .post-location { - color: #b6b6b6; - text-align: center; - a { - color: #b6b6b6; - text-decoration: underline; - text-decoration-color: $orange; - } - @include breakpoint(gamma) { - text-align: left; - } - } - .post-date { - text-align: center; - @include breakpoint(alpha) { - text-align: left; - } - } - .map { - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; - } - .post-header { - @include fancy_sans; - @include fontsize(18); - color: lighten($body_font_color, 20); - padding-bottom: 2.6rem; - border-bottom: 1px solid #efefef; - @include breakpoint(alpha) { - text-align: left; - } - time { - } - } - p:first-of-type { - margin-top: 2.6rem; - } - h4, h5 { - @include fancy_sans; - margin: 3rem 0 0 0; - } - h4 + p, .afterward h4 + p { - margin-top: .125rem; +.content { + margin-top: 3rem; +} +//************** archive grids **********************************{{{ +.archive-grid { + margin-top: 2rem; + list-style-type: none; + padding: 0; + @include constrain_wide; + @include breakpoint(alpha) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + row-gap: 1rem; } - h5 { - margin: 0 +} +.archive-grid-quad { + //used for books and related posts in detail pages + list-style-type: none; + padding: 0; + @include breakpoint(alpha) { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 15px; } - .afterward { - p {font-style: italic;} - h4 { - margin-bottom: 0; - } + @include breakpoint(beta) { + grid-template-columns: 1fr 1fr 1fr; } - p.small { - @include fontsize(18); + @include breakpoint(epsilon) { + grid-template-columns: 1fr 1fr 1fr 1fr; } - .sci { - text-align: center; - @include fontsize(24); - font-weight: 400; - margin: 0; - +} +.related .archive-grid-quad { + //there's only 4 related items so override the + //3-grid at breakpoint beta + @include breakpoint(beta) { + grid-template-columns: 1fr 1fr; } - .sci:nth-child(3) { - @include fontsize(18); - margin-bottom: 2rem; +} +.archive-grid-double { + // homepage recent + @include breakpoint(alpha) { + grid-template-columns: 1fr 1fr; + row-gap: 1rem; + grid-gap: 16px; } - ul { - list-style: circle; - margin-left: 2.5em; - list-style-position: outside; - margin-bottom: 2.4em; +} +.archive-grid-single { + // homepage popular + @include breakpoint(alpha) { + grid-template-columns: 1fr; + row-gap: 1rem; + grid-gap: 16px; } - // Ack, id selector, so wrong, but easy handles the slightly different footer - // in the dialogue section that lists all the sightings - #endnode { - h5 { - @include fontsize(14); - @include smcaps; - @include fancy_sans; - margin-bottom: 1rem; - margin-top: 2rem; - } - ul { - margin-bottom: 2em; - list-style-type: none; - padding: 0; - li { - color: lighten($body_font_color, 30); - margin-bottom: 0; - margin-top: 0; - &:before { - content: "\2022"; - color: lighten($body_font_color, 30); - margin-right: .35rem; - } - } +} +.recent-popular { + // get popular and recent lined up + // side by side on the hompage + @include constrain_wide; + @include breakpoint(alpha) { + display: flex; + flex-direction: row; + width: calc(100% + 30px); + .popular { + margin-left: 30px; } } - #detail-map-canvas { - height: 400px; - width: 98vw; - position: relative; - left: 49%; - right: 49%; - margin-left: -48vw; - margin-right: -49vw; +} +.archive-grid-card { + //container object for cards (usually an article tag) + a { + text-decoration: none; } } -.post-dateline { - display: inline-block; - margin-top: 0em; - padding-top: 1rem; - padding-bottom: 2.6rem; - border-top: 1px solid #efefef; +.archive-grid-card-simple { + //container object for cards with no dek + line-height: 1; + margin-bottom: 1.4rem; } -header.tight { - margin-bottom: 3rem; - * { - margin: 0; - text-align: center; - } - h1 { - margin-bottom: 1rem; +.related { + //special rules for related post grid + //on detail pages in jrnl and src + ul { + list-style-type: none; + padding: 0; } - h2 { - display: inline-block; - border-top: 1px solid darken(#efefef, 10); - padding-top: 1rem; + .card-hed { + text-align: center; + @include fancy_sans; + @include fontsize(20); + margin: 1rem auto .25rem; } - h3 { - margin-top: .35rem; + .card-smcap { + text-align: center; } } -h4.post-source { - @include fontsize(14); +//}}} +//************** archive cards **********************************{{{ +.card-smcaps, .post-smcaps { + // formats date and location lines as small caps @include smcaps; - padding-bottom: 0em; - margin-bottom: 0; - margin-top: 0; + @include fontsize(13); font-weight: bold; - color: #b6b6b6; - a { - color: #b6b6b6; - &:hover { - color: $link_color; - } - } + margin: 0; + color: $body_font_light; +} +.card-hed { + // main headline of the card + @include fontsize(32); + color: darken($body_font_light,15); + margin: 0; + line-height: 1; } -.post-location { - h3 { - display: inline; - @include fontsize(14); +.card-hed-it { + // italic variant of card hed + // used on jrnl archives + @include fontsize(26); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-smit { + // smaller italic variant of card hed + // used on homepage + @include fontsize(22); + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-btm { + // hed with a little bottom margin + // used in book list + margin-bottom: .5rem; +} +.card-image-sm { + // smaller card image + // used on homepage + max-height: 180px; + overflow: hidden; + margin-bottom: .5rem; + img { + margin-top: -20%; } - a { - color: $secondary_link_color; - text-decoration: none; +} +.card-image-tiny { + // even smaller card image used for + // related posts on detail pages + max-height: 120px; + overflow: hidden; + margin-bottom: .5rem; + img { + width: 100%; + margin-top: -20%; } } -.post-essay ~ p:first-child:first-letter { - @include fancy_sans; - font-size: 75px; - line-height: 60px; - padding-top: 4px; - padding-right: 8px; - padding-left: 3px; +.card-lede { + // subtitle or lede + @include fontsize(20); + color: darken($body_font_light,5); + font-style: italic; + line-height: 1.6; + margin: 0; } -//### GUIDE STUFF ### -.product-card { - margin: 5rem 0; +.card-dek { + // used for p test on jrnl page and elsewhere + @include fontsize(16); + line-height: 1.6; + margin: 0 0 .5rem; } -.detail .product-link { - a { - display: block; - padding: 1rem; - background: #249bd6; - color: white; - text-transform: uppercase; - font-size: 16px; - text-decoration: none; - } +.card-stars { + // ratings on books + @include fontsize(16); + display: block; } -.buy-btn { - @include fancy_sans; +.read-in { + // makes read in date in books look good display: block; - padding: .5rem 1rem; - background: #249bd6; - color: white; - text-transform: uppercase; - @include fontsize(16); - text-decoration: none; - margin-right: 1rem; } -.buy-btn-wrapper { - display: flex; - justify-content: start; - align-items: center; - align-content: space-between; - h4 { - margin: 0 1.5rem 0 0; - line-height: normal; - &:after { - content: ":"; - } +.circle-img-wrapper { + // small images next to archive lists + border-radius: 50%; + width: 106px; + height: 106px; + overflow: hidden; + float: left; + border: 3px solid #666; + img { + width: 160px; + max-width: 160px; } - h5 { - margin-right: 1rem; + @include breakpoint(beta) { + margin-left: -128px; + margin-top: -2px; } } -.post-guide .buy-btn-wrapper { - margin-top: 4rem; - justify-content: center; -} -.detail .post-guide { - h3 { - @include fontsize(27); - margin: 4rem 0 .5rem 0; - & + p { - margin-top: 0; - } +//}}} +//************** header, dateline and expanding map **************{{{ +.post-header { + @include constrain_narrow; + color: #555; + padding-bottom: 2.6rem; + margin-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + text-align: center; + @include breakpoint(beta) { + text-align: left; } } -//### PAGE NAVIGATION ### -.nav-wrapper { - @include constrain_narrow(); - border-bottom: 3px double #efefef; +.post-linewrapper { + border-top: 1px solid #efefef; } -#page-navigation { - margin: 2em auto; +.post-linewrapper, .post-linewrapper h3 { + color: lighten($secondary-link-color, 15); + margin-top: 1rem; + padding-top: 1rem; + display: inline-block; + @include smcaps; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; text-align: center; - display: table; - ul { - list-style-type: none; - margin: 0 auto; - width: 100%; - text-align: center; - padding: 0; + a { + color: lighten($secondary-link-color, 15); } - li { - margin: 6px auto; - clear: both; - line-height: 24px; - text-align: center; + time { + color: $secondary-link-color } - span { - @include fancy_sans; - @include fontsize(14); - min-width: 70px; - display: block; - text-align: right; - margin-right: 10px; - float: left; + @include breakpoint(beta) { + text-align: left; } - a { - display: block; - float: left; - font-family: $fancy_serif; +} +.post-linewrapper h3 { + display: inline; +} +.post-source { + @include smcaps; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; + margin: 0; +} +.map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} +#detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -48vw; + margin-right: -49vw; +} +.lttr .post-header, .lttr .post-linewrapper, .lttr .post-linewrapper h3 { + text-align: center; +} +.post-title { + letter-spacing: -1px; + margin-bottom: .25rem; +} +.post-subtitle { + @include fontsize(22); + font-style: italic; + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + text-align: center; + @include breakpoint(beta) { text-align: left; - font-style: italic; - color: $brown; - text-decoration: none; } } - -.article-afterward { - @extend %clearfix; +//}}} +//************** post detail *************************************{{{ +.post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) { @include constrain_narrow; - padding-bottom: 2rem; - .article-card-mini { - margin-bottom: 0 - } - .hedtinycaps { - display: inline-block; - margin-bottom: 2.5rem; - border-bottom: 2px solid #efefef; +} +.post-body .picwide, .post-body .cluster { + @include constrain_wide; +} +.post-article { + h3 { + @include fancy_sans; + @include fontsize(26); + font-weight: bold; } - @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; - margin-right: 0; - margin-bottom: 2rem; - max-width: 100%; - a { text-decoration: none;} - .post-title { - @include fontsize(20); - text-align: center; - line-height: 1.2; - margin: 0; + h4, h3 { + margin: 3rem 0 0 0; + line-height: 1.4; } - .post-subtitle { - @include fontsize(18); - text-align: center; - font-family: $fancy_serif; - font-style: italic; - font-weight: normal; - margin: .25rem auto 0; + h4+p, h3+p { + margin-top: .125rem; } - .post-summary, .post-date{ - text-align: center; - display: inline-block; - line-height: 0.6 !important; - color: #b6b6b6; + h5 { + @include fancy_sans; + @include fontsize(20); } - @include breakpoint(omega) { - margin: 0 auto; - max-width: 70%; - margin-bottom: 0; + ul { + @include fontsize(22); + list-style: circle; + margin-left: 2.5em; + list-style-position: outside; + margin-bottom: 2.4em; } +} +.picwide { @include breakpoint(alpha) { - max-width: 50%; } - @include breakpoint(beta) { - max-width: 47%; - float: left; - margin-right: 1rem; - margin-bottom: 1.5rem; - } - @include breakpoint(gamma) { - max-width: 230px; - float: left; - margin-right: .5rem; +} +.picwide img { + max-width: 98%; + @include breakpoint(alpha) { + max-width: 100%; } } -.post-mini-image { - max-height: 220px; - overflow: hidden; - @include breakpoint(beta) { - margin-bottom: 1rem; +p + .picwide { + margin-top: 1.75rem; + @include breakpoint(alpha) { + margin-top: 2.6rem; } - img { - margin-top: -20%; +} +.row-2 { + display: flex; + flex-direction: row; + gap: .5rem; + * > { + margin-left: 5px; } } - - +//}}} +//************** post footer *************************************{{{ .entry-footer { - @extend %clearfix; @include constrain_narrow; + border-top: 3px double #efefef; border-bottom: 3px double #efefef; - margin-top: 2em; - text-align: left; + margin-top: 3rem; + padding: 2rem; h3 { + font-weight: 600; @include smcaps; @include fontsize(16); } - h3 + ul { + ul { padding: 0; - } - li { - margin: .25em 0; + font-size: 96%; list-style-type: none; + ul { + list-style-type: disc; + padding-left: 2rem; + li { + color: $secondary-link-color; + } + } } - li ul { - columns: 2 auto; - list-style-type: none; - margin-left: .5rem; - padding: 0; - } - li ul li:before { - content: "\2022"; - margin-right: .45rem; - color: lighten($body_font_color, 40); - } - .grouper { - margin-top: 1em; + @include breakpoint(gamma) { + display: flex; + flex-direction: row; + ul { + display: flex; + flex-direction: column; + font-size: 92%; + } } - a { - text-decoration: none; - color: lighten($body_font_color, 20); +} +//}}} +//************** next/previous / you might also / footnotes ******{{{ +//}}} +//************** homepage banner and other special elements*******{{{ +.homepage-section-header { + @include fontsize(28); + @include fancy_sans; +} +.banner { + .post-image { + position: relative; + max-height: 900px; + overflow: hidden; } - #wildlife li ul li { - color: lighten($body_font_color, 40); - a { - color: lighten($body_font_color, 10); + + @include breakpoint(beta) { + figcaption { + position: absolute; + margin: 0; + bottom: 0; + width: 100%; + z-index: 100; + background: rgba(0,0,0,0.6); } } - @include breakpoint(beta) { - padding-bottom: 2rem; - #wildlife { - max-width: 55%; - float: left; - margin-right: 1.2rem; + .large-top-image { + position: relative; + max-height: 900px; + overflow: hidden; + max-width: 100%; + img { + margin: 0; } - #recommended-reading{ - ul { - list-style-type: none; - } + @include breakpoint(beta) { img { - max-width: 180px; + margin-top: -120px; } } } - aside { - @extend %clearfix; - } } -#field_notes { +.hero-text-wrapper { + text-align: center; + margin-bottom: 1rem; + .post-title { + @include fontsize(36); + } @include breakpoint(beta) { - max-width: 33%; - float: left; - margin-top: .15em; - margin-left: 7em; + color: white; + .post-title { + @include fontsize(42); + margin-bottom: .5rem; + } + .post-subtitle, .post-date, .post-location { + text-align: center; + a { + text-decoration: none; + @include fontsize(14); + padding: 0; + border: none; + } + } } - li:before { - content: "\2022"; - margin-right: .35rem; - color: $body_font_light; + .post-date { + display: none; } -} -.rr-clear { - clear: left; -} - -//### FOOTNOTES ### -.footnote { - margin: 1em auto 0 auto; - padding: 0; - list-style-type: none; - p { - font-size: 1rem; - line-height: 1.4; - margin-top: 0 !important; + .post-linewrapper { + border-color: #6a6a6a; + text-align: center; + margin-top: .25rem; + padding-top: .25rem; } - hr {display: none;} - ol { - padding-left: 1em; - @include breakpoint(alpha) { - margin-left: 1em; - } + .btn { + color: white; + text-align: center; + margin: .5rem auto; } } -sup { - line-height: 1; - .footnote-ref { - padding: 4px 3px; - +.homepage-bio { + margin: 3rem auto; + @include constrain_wide; + @include breakpoint(alpha) { + margin: 6rem auto; } } - -//### Figments ### -.downloads { - list-style-type: none; -} - -// ### Books ### -.book { - &:after { - display: block; - content: ''; - height: 30px; - border-bottom: 3px solid #efefef; - width: 200px; - margin: 0 auto 3rem auto; - padding-left: 30px; - } -} -.book-metadata { - text-align: left; - @include fancy_sans; - dd { - display: inline; - margin: 0; - } - dd:after{ - display: block; - content: ''; - } - dt{ - display: inline-block; - } - dt:after { - content: ":"; +.homepage-map-img { + @include breakpoint(alpha) { + float: left; + width: 350px; + margin-right: 2rem; } } -.thoughts, .highlights, .meta-cover, .dis { - @include constrain_narrow; - font-family: $fancy_serif; - text-align: left; - p { - max-width: 100%; +.homepage-next { + margin-top: 3rem; + @include constrain_wide; + h5 { + text-align: center; + } + a { + @include fontsize(14); + @include fancy_sans; + @include smcaps; + font-weight: 500; + text-decoration: none; + padding: 12px 10px 12px; + border: $link_color 1px solid; + &:after { + content: "\21E2"; + margin-left: 4px; + } + &:hover { + background: $link_color; + color: white; + } } } -.book-cover-wrapper { - @include constrain_wide; - img { +// About page +#about-luxagraf .circle-pic { + margin: 0 auto; + display: block; + @include breakpoint(gamma) { float: left; - max-width: 20rem; + margin-left: -250px; } } -.thoughts { - margin-top: 4rem; - p:first-of-type { - margin-top: 0; - } +.circle-pic { + border-radius: 50%; + border: 3px solid #000; } -.thoughts h5, .highlights h4 { - font-weight: 500; - letter-spacing: 1px; - margin: 3em 0 .5em 0; - @include fancy_sans; - @include smcaps; - @include fontsize(14); +//}}} +//A few Mailing list specific styles +.large-top-image{ + background: #f7f7f7; + img { + max-width: 100%; + margin: 4rem 0; + } } -.highlights div:first-of-type p:first-of-type { - margin-top: 0; +.list-hed{ + @include fontsize(32); } -.book-highlight p:last-of-type { +.list-subhed { + @include fontsize(26); + font-style: italic; margin-bottom: 0; + } -.book p:last-of-type, .highlights div:first-of-type p:last-of-type{ - margin-top: 8px; -} -.highlink { - @include fontsize(20); - margin-right: .5rem; - float: left; - line-height: 1.6; - text-decoration: none; - color: lighten($body_font_color, 60); - @include breakpoint(alpha) { - margin-top: 1px; - } - &:visited { - color: lighten($body_font_color, 60); - } -} -.foot { - margin-top: 16px; - @include fancy_sans; - @include fontsize(16); -} -.dis { - @include fontsize(16); - text-align: center; +// +.section { + margin-top: 6rem; } + diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss index 1ae40f8..e69de29 100644 --- a/design/sass/_fonts.scss +++ b/design/sass/_fonts.scss @@ -1,43 +0,0 @@ -@font-face { - font-family: 'carrois_gothicregular'; - src: url('/media/fonts/carroisgothic-regular-webfont.eot'); - src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'), - url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'mffweb'; - src: url('/media/fonts/ffmpb.woff2') format('woff2'); - src: url('/media/fonts/ffmpb.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'mffweb'; - src: url('/media/fonts/ffmbi.woff2') format('woff2'); - src: url('/media/fonts/ffmbi.woff') format('woff'); - font-weight: 400; - font-style: italic; - font-display: swap; -} -@font-face { - font-family: 'mffnweb'; - src: url('/media/fonts/ffmn.woff2') format('woff2'); - src: url('/media/fonts/ffmn.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: 'mffnbweb'; - src: url('/media/fonts/ffmn.woff2') format('woff2'); - src: url('/media/fonts/ffmn.woff') format('woff'); - font-weight: 700; - font-style: normal; - font-display: swap; -} - diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss index 08c9942..9e20f8b 100644 --- a/design/sass/_footer.scss +++ b/design/sass/_footer.scss @@ -1,83 +1,43 @@ -footer { - margin-top: 5em; - @include breakpoint(gamma) { - max-width: 960; - } - &:before { - @include breakpoint(beta) { - @include faded_line_after; - margin-bottom: 1.2em; - } - } - .footer-nav { - list-style-type: none !important; - margin-left: 0 !important; - border-top: 1px $brown dotted; - border-bottom: 1px $brown dotted; - padding: .5rem 0; - @include breakpoint(beta) { - border: none; - } - } - li { - display: inline; - margin: 0 .25em; - &:after { - content: "\00b7"; - color: #999999; - padding-left: 0.75em; - } - a { - color: $secondary-link-color; - text-decoration: none; - } - ul { display:inline;} - } - li:last-of-type { - margin-right: 0; - &:after { - content: " "; - } - } - p { - @include fontsize(10); - text-align: center; - margin-top: 1.5em; - margin-bottom: 1.5em; - } -} -.black footer, .dark footer { - &:before { - @include light_faded_line_after; - } - a { - color: $body_font_light; +.page-footer { + margin: 0 auto; + border-top: 1px #f3efef solid; + margin-top: 5rem; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + text-align: center; } +.page-footer ul { + margin: 1.5rem 0 .5rem 0; + list-style-type: none; + padding: 0; } -.donate-btn { - display: inline-block; - margin-left: .5rem; - input[type="submit"] { - background: url("img/pp_donate.gif") 0 0 no-repeat; - border: none; - width: 100px; - text-indent: -9999em; - line-height: 19px; - padding: 2px 7px 10px; +@media screen and (min-width: 750px) { + .page-footer { + text-align: right; + max-width: 96%; } } -.liberapay-btn { - background: url("img/lpdonate.svg") 0 0 no-repeat; - text-indent: -9999em; - display: inline-block; - line-height: 25px; - padding: 5px 7px 3px; - text-decoration: none; - width: 70px; +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .page-footer { + max-width: 1440px; + } } #license { - @include fancy_sans; - @include fontsize(12); text-transform: none; + text-align: center; letter-spacing: normal; + font-size: 14px; + font-size: .875rem; + font-weight: 300; +} +@media screen and (min-width: 750px) { + #license { + text-align: right; + } } diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index 4e0227b..93a283d 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -1,113 +1,48 @@ .generic-form { margin: 2rem 0; @extend %clearfix; - fieldset { - padding: 0; - border: none; - width: 100%; - position: relative; - } - input[type=email] { - width: 210px; - @include fontsize(18); - background-color: #fff; - border: 2px solid darken(#efefef, 10); - border-radius: 5px; - height: 2.2rem; - padding: 4px 4px 4px 8px; - margin-right: .5rem; - @include breakpoint(omega){ - width: 92%; - } - @include breakpoint(alpha){ - width: 96%; - } - } - label { - display: block; - visibility: hidden; - width: 0; - height: 0; - } - .btn-hollow { - @include fontsize(16); - display: inline-block; - padding: 10px 15px; - margin-bottom: 0; - line-height: 20px; - text-align: center; - vertical-align: middle; - cursor: pointer; - color: #ddd; - border: 0; - border-radius: 5px; - font-weight: bold; - transition: all 0.2s ease; - background: $orange; - &:hover { - color: white; - } - } } -.flex { - display: flex; - .btn, .btn-hollow { - flex-basis: 10%; - } -} - - -form fieldset { - margin: 1rem 0; +.generic-form fieldset { padding: 0; border: none; width: 100%; position: relative; } -form fieldset label { - position: absolute; - -webkit-transform: translate3d(10px, 100%); - -moz-transform: translate3d(10px, 100%); - -ms-transform: translate3d(10px, 100%); - -o-transform: translate3d(10px, 100%); - transform: translate3d(10px, 100%); - @include fontsize(14); - @include fancy_sans; - color: lighten($body_font_color, 25); - line-height: 14px; - top: .7rem; - left: .75rem; - z-index: 1; +.generic-form input[type=email] { + width: 210px; + @include fontsize(18); + background-color: #fff; + border: 2px solid darken(#efefef, 10); + border-radius: 5px; + height: 2.2rem; + padding: 4px 4px 4px 8px; + margin-right: .5rem; + @include breakpoint(alpha){ + width: 96%; + } } -input, .textarea-rounded textarea { - border: 1px solid #dedddd; - border-radius: 4px; - padding: 2.2rem 0 .75rem .75rem; - width: 96%; - @include fontsize(24); - @include fancy_sans; +.generic-form label { + display: block; + visibility: hidden; + width: 0; + height: 0; } - -.btn { - @include fontsize(15); +.btn-hollow { + @include fontsize(16); display: inline-block; - border-radius: 4px; - -webkit-appearance: none; - text-decoration: none; + padding: 10px 15px; + margin-bottom: 0; + line-height: 20px; + text-align: center; + vertical-align: middle; cursor: pointer; - background: $link_color; - color: #fff; - border: 1px solid $link_color; - padding: 7px 14px; - white-space: nowrap; + color: #ddd; + border: 0; + border-radius: 5px; + font-weight: bold; + transition: all 0.2s ease; + background: $orange; &:hover { - background: $link_color; - border: 1px solid $link_color; - } -} -.newsletter-subscribe { - margin: 3rem 0; - fieldset { - margin: 0; + color: white; } } diff --git a/design/sass/_global.scss b/design/sass/_global.scss index 5030dbf..c2c1cc0 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -1,82 +1,75 @@ -html { - border-top: 0.25em solid $brown; -} - +//font-size: 20px +//font-size: 1.25rem +//alpha = 720px +//beta = 960px +//gamma = 1170px +//delta = 1440px +// *************************** Basic element styles ***********************{{{ body { + font-size: 20px; + font-size: 1.25rem; + font-family: $fancy_serif; margin: 0 auto; padding: 0; - overflow-x: hidden; - font:$body_p_font; - color: $body_font_color; - text-align: center; - background-color: transparent + color: #222; + text-align: left; + max-width: 96%; + line-height: 1.5; } -ul { - padding: 0; +@media screen and (min-width: 1170px) { + body { + font-size: 24px; + font-size: 1.5rem; + max-width: 100%; + } } // eliminate touch delay on mobile safari a, button, input, select, textarea, label, summary { touch-action: manipulation; } +// links a { - color: $body_font_color; - -webkit-transition: all 0.1s ease; - -moz-transition: all 0.1s ease; - -ms-transition: all 0.1s ease; + color: #222; transition: all 0.1s ease; text-decoration-color: $orange; - &:hover { - text-decoration: none; - } - &:visited { - color: $body_font_color; - } } +a:hover { + text-decoration: none; +} +a:visited { + color: #222; +} + p { text-align: left; - font-family: $fancy_serif; - @include fontsize(20); - @include breakpoint(alpha){ - @include fontsize(22); - line-height: 1.5; - } - @include breakpoint(beta){ - @include fontsize(24); +} +@media screen and (min-width: 1170px) { + p { line-height: 1.6; } } time { - @include smcaps; - @include fontsize(11); display: block; - span { - @include fontsize(13); - } } abbr { cursor: help; } pre { text-align: left; - @include breakpoint(alpha){ - @include fontsize(18); - line-height: 1.5; - } } -object, embed, video { +object, embed, video, img { max-width: 100%; - width: 100%; height: auto; } audio { max-width: 100%; - width: 100%; } blockquote { - @include fontsize(18); + font-size: 18px; + font-size: 1.125rem; display: block; - border-top: 4px solid lighten($body_font_light, 20); - border-bottom: 4px solid lighten($body_font_light, 20); + border-top: 4px solid #e6e6e6; + border-bottom: 4px solid #e6e6e6; margin: 3rem 0; position: relative; text-align: left; @@ -85,183 +78,128 @@ blockquote { display: block; text-align: right; } - @include breakpoint(alpha){ - @include fontsize(20); - line-height: 1.5; - } - @include breakpoint(beta){ - @include fontsize(22); - line-height: 1.6; - } -} -blockquote:before { - @include fancy_sans; - @include fontsize(68); - content: '\201C'; - position: absolute; - top: -1.35rem; - left: 50%; - transform: translate(-50%, -50%); - width: 3rem; - height: 2rem; - color: #666; - text-align: center; } hr { border: 0; - height: 1px; - @include faded_line_after; margin: 3rem 0; -} -img { - max-width: 100%; + display: block; + content: ""; + height: 1px; + 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)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); } figure { margin: 0; } figcaption { - text-align: left; -} -figcaption, figcaption a { - @include fancy_sans; - @include fontsize(16); + font-family: mffnweb, Helvetica, sans-serif; + font-size: 16px; + font-size: 1rem; text-align: left; line-height: 1.9; padding: .3rem .5rem .3rem 0; color: #666; - border-bottom: 1px lighten($body_font_light, 20) solid; + border-bottom: 1px #e6e6e6 solid; margin-bottom: 1rem; } -figcaption a:visited { +figcaption a, figcaption a:visited { color: #666; } h1 { - font-family: $headline_font_serif; - @include fontsize(36); + font-size: 48px; + font-size: 3rem; font-weight: normal; + margin-bottom: 0; + line-height: 1; } h2 { - font-family: $headline_font_serif; - @include fontsize(28); + font-size: 28px; + font-size: 1.75rem; font-weight: normal; - text-align: left; - @include breakpoint(gamma){ - @include fontsize(30); - line-height: 1.6; - } } h3 { - font-family: $fancy_sans; - @include fontsize(24); - text-align: left; - @include breakpoint(gamma){ - @include fontsize(28); - line-height: 1.4; - } + font-size: 24px; + font-size: 1.5rem; + font-weight: normal; } h4 { - @include fontsize(20); - text-align: left; - @include breakpoint(gamma){ - @include fontsize(22); - line-height: 1.4; - } + font-size: 22px; + font-size: 1.375rem; } h5 { - @include fontsize(16); - text-align: left; - @include breakpoint(gamma){ - @include fontsize(18); - line-height: 1.4; - } + font-size: 16px; + font-size: 1rem; } -.subhead { - font-size: 26px !important; - font-style: italic; - margin-top: 0; - margin-bottom: 0; +dd { + display: inline; + margin: 0; } -.subhead + p { - margin-top: .75rem !important; +dd:after{ + display: block; + content: ''; } -.essay-intro .subhead + p:first-of-type { - margin-top: .75rem !important; +dt{ + display: inline-block; } -//************** Universals ************************ -.hide { - display: none; +dt:after { + content: ":"; } +//************** Global layout ************************ +.content { + margin-left: auto; + margin-right: auto; + max-width: 96%; -.strike { - text-decoration: line-through; } - -.yes { - background: green !important; - color: white; +@media screen and (min-width: 1170px) { + .content { + max-width: 100%; + } } - -.no { - background: red !important; - color: white; +@media screen and (min-width: 1440px) { + .content { + max-width: 1440px; + } +} +//************** Universals ************************ +.hide { + display: none; } - .alert { color: red !important; } -//************** other global classes ************************ -.sans { - @include generic_sans; -} -.bl { - @include smcaps; - @include fontsize(12); - font-weight: 600; - color: $secondary-link-color; -} -.italic { - font-style: italic; -} .small { - font-size: 90%; -} -.divide-after:after { - margin-bottom: 3em; - @include faded_line_after; + font-size: 85%; } -.margin-left-none { - margin-left: 0 !important; +.buy-btn { + font-family: mffnweb, Helvetica, sans-serif; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + font-size: 1rem; + text-decoration: none; + margin-right: 1rem; } -//**************** Page Breadcrumbs ************************ - -#breadcrumbs { - @include constrain_wide(); - padding: 0; - list-style-type: none; - text-align: center; - li { - display: inline; - } - a { - color: $secondary-link-color; - } - @include breakpoint(gamma) { - text-align: left; - } +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; } - -.black #breadcrumbs a, .dark #breadcrumbs a { - color: $body_font_light; +.buy-btn-wrapper h4 { + margin: 0 1.5rem 0 0; + line-height: normal; } -//************* Dark Pages ********************* - -.dark body { - background: $brown; - color: $body_font_light +.buy-btn-wrapper h4:after { + content: ":"; } - -.black body { - background: #000; - color: $body_font_light +.buy-btn-wrapper h5 { + margin-right: 1rem; } - +//}}} diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 87cd180..9824ddd 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -1,189 +1,120 @@ -.header-wrapper { - @include breakpoint(beta) { - border-bottom: 1px #f3efef solid; - } +///********** class for header and footer menus *********{{{ +.menu-item { + color: lighten($secondary_link_color, 20); + display: inline-block; + margin: 0 0.25rem; } -.site-banner { - @extend %clearfix; - margin: 0 auto; - @include constrain_wide; - @include smcaps; - #logo { - a { - @include fontsize(32); - text-decoration: none; - display: block; - font-weight: 300; - font-family: 'carrois_gothicregular', Helvetica, sans-serif; - color: $brown; - &:before { - display: block; - content: "home-icon"; - text-indent: -9999em; - background: url("logo-new-@2x-treeonly.png") center top no-repeat; - width: 95px; - height: 65px; - background-size: 95px; - background-size: 85px; - //if sox - //background: url("img/soxlogo.svg") center top no-repeat; - //background-size: 60px; - display: block; - margin: 5px auto 0; - } - } - .sitesubtitle { - display: block; - margin-top: -8px; - font-family: $fancy_serif; - font-style: italic; - font-weight: 300; - @include fontsize(12); - } - } - nav { - border-top: 1px #444444 dotted; - border-bottom: 1px #444444 dotted; - //box-shadow: 0 3px 8px 0 #e6e6e6 - padding-left: 20px; - padding-right: 20px; - margin-right: -20px; - margin-left: -20px; - margin-top: 1em; - padding: 0.25em 0.5em; - a { - text-decoration: none; - color: lighten(#505050, 5); - &:visited { - color: lighten(#505050, 5); - } - } - ul { - @include smcaps; - @include fancy_sans; - @include fontsize(13); - max-width: 100%; - font-weight: 600; - margin-top: 0.5em; - margin-bottom: 0.5em !important; - padding: 0; - @include constrain(85%); - } - li { - display: inline; - margin: 0 0.25em; - color: lighten(#505050, 30); - &:after { - content: "\00b7"; - color: #999999; - padding-left: 0.75em; - } - &:last-of-type { - margin-right: 0; - &:after { - content: " "; - } - } - } - @include breakpoint(beta) { - } - } - @include breakpoint(beta) { - height: 90px; - position: relative; - #logo { - float: left; - position: absolute; - bottom: 8px; - text-align: left; - a { - width: 360px; - line-height: 2.5em; - &:before { - display: inline-block; - background-size: 102px; - //if sox - //background: url("img/soxlogo.svg") center bottom no-repeat; - //background-size: 70px; - height: 85px; - width: 105px; - //if sox - //width: 80px; - margin-right: 10px; - } - } - .sitesubtitle { - margin-left: 116px; - //if sox - //margin-left: 90px; - margin-top: -30px; - } - } - nav { - float: right; - border: none; - margin: 42px 0 0 0; - padding: 0; - ul { - max-width: 50em; - } - } - } +.menu-item:after { + content: "\00b7"; + color: #9d9d9d; + padding-left: 0.5rem; } - -.black header h1 a, .dark header h1 a { - color: $body_font_light; - &:before { - background: url("logo-new-@2x-treeonly.png") center -75px no-repeat; - background-size: 92px; - } - @include breakpoint(gamma) { - &:before { - background-position-y: -65px; - } - } +.menu-item:first-of-type { + margin-left: 0; +} +.menu-item:last-of-type { + margin-right: 0; } - - -.black nav[role="navigation"] a, .dark nav[role="navigation"] a { - color: $body_font_light; +.menu-item:last-of-type:after { + content: " "; } - - +.menu-item a, .menu-item a:visited { + text-decoration: none; + color: $secondary_link_color; +} +//}}} +///********** Header Styles *****************************{{{ .header-wrapper { - @extend %clearfix; - margin-bottom: 1em; - @include breakpoint(beta) { + padding-top: 6px; + margin: 0 auto; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-family: mffnweb, Helvetica, sans-serif; + text-align: center; +} +.header-wrapper a { + text-decoration: none; +} +.header-wrapper ul { + list-style-type: none; + padding: 0; +} +.header-wrapper nav { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + margin: 1rem 0; + padding: 0 0.5em; + font-weight: 600; + font-size: .8125rem;; + line-height: 1.2; +} +// Rules for wider Layout +@media screen and (min-width: 750px) { + .header-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; border-bottom: 1px #f3efef solid; - position: relative; - } - @include breakpoint(gamma) { - max-width: $breakpoint-gamma; - margin-left: auto; - margin-right: auto; + margin-top: 1.25rem; + max-width: 96%; } - @include breakpoint(delta) { - margin-top: 1.3rem; - max-width: $breakpoint-delta; + .header-wrapper nav { + border: none; + margin-top: 1.7rem; } - @include breakpoint(epsilon) { - margin-top: 1.3rem; - max-width: $max_width; +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .header-wrapper { + max-width: 1440px; } } -.detail .header-wrapper, .detail #breadcrumbs { - transition: opacity .5s; - @include breakpoint(epsilon) { - opacity: .8; - &:hover { - opacity: 1; - } +//Logo styles +.logo-link { + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + color: $secondary_link_color; + font-size: 2rem; +} +.logo-link:before { + display: block; + content: "home-icon"; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + margin: 5px auto; + text-indent: -9999em; +} +@media screen and (min-width: 750px) { + .logo-link { + text-align: left; + margin-top: 1.25rem; } + .logo-link:before { + float: left; + height: 85px; + width: 105px; + background-size: 102px; + margin: -1rem 10px -4px 0; + } +} +//handle the funky text of the subtitle +.sitesubtitle { + display: block; + margin-top: -8px; + margin-bottom: 10px; + font-family: mffweb, Georgia, 'Times New Roman', serif; + font-style: italic; + font-weight: 300; + font-size: .75rem; } - -.black .header-wrapper, .dark .header-wrapper { - @include breakpoint(beta) { - border-bottom: 1px $body_font_light solid; +@media screen and (min-width: 750px) { + .sitesubtitle { + text-align: left; } } - +//}}} diff --git a/design/sass/_lttr.scss b/design/sass/_lttr.scss index 46abc21..7f50f2a 100644 --- a/design/sass/_lttr.scss +++ b/design/sass/_lttr.scss @@ -1,10 +1,7 @@ -.large-top-image{ - background: #f7f7f7; - img { - max-width: 94%; - margin: 4rem 0; - } +.list-hed{ + @include fontsize(32); } + .lttr { @include constrain_narrow; margin-top: 6rem; diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss index 9ccd750..111c281 100644 --- a/design/sass/_mixins.scss +++ b/design/sass/_mixins.scss @@ -1,6 +1,5 @@ $brown: #201a11; $brown: #222; -$light: #ccc; $orange: #b53a04; $link_color: #b53a04; @@ -9,57 +8,26 @@ $fancy_serif: mffweb, Georgia, 'Times New Roman', serif; $fancy_sans: mffnweb, Helvetica, sans-serif; -$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif; $body_font_color: $brown; -$body_font_light: #b3aeae; -$secondary-link-color: #838383; - -$archive_p_line_height: 1.6; -//$light; -$narrow-beta-width: 720px; -$narrow-max-width: 750px; -$max_width: 1440px; +$body_font_light: #737373; +$secondary-link-color: #757575; @mixin smcaps { @include fancy_sans; text-transform: uppercase; letter-spacing: 1px; } -@mixin plain_a { - border: none; - text-decoration: none; - color: $body_font_color; -} - @function calc-rem($size) { $remsize: $size/16; @return #{$remsize}rem; } - @mixin fontsize($size) { font-size: $size + px; font-size: calc-rem($size); } - -@function calc-em($target-px, $context) { - @return $target-px / $context * 1em; -} - -@mixin img_plain { - padding: 0; - max-width: 100%; - background: none; -} -@mixin generic-sans { - font-family: sans-serif; -} @mixin fancy-sans { font-family: mffnweb, Helvetica, sans-serif; } -@mixin fancy-sans-bold { - font-family: mffnbweb, Helvetica, sans-serif; - font-weight: 700; -} @mixin fancy-serif { font-family: Georgia, Palatino, serif; } @@ -75,77 +43,20 @@ $max_width: 1440px; clear: both; } } - -@mixin transparent_class { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; - filter: alpha(opacity = 90); - opacity: 0.9; -} - -@mixin faded_line_after { - display: block; - content: ""; - margin-top: 3em; - height: 1px; - 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)); - background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); - background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); -} - -//for overriding the above on dark pages: -@mixin light_faded_line_after { - background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); - background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); - background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); - background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); -} - -@mixin lighter_faded_line_after { - background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1)); - background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); - background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); - background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); -} - -//generic constrain function -@mixin constrain($size) { - max-width: $size; - margin-left: auto; - margin-right: auto; -} - //set an element to centered, narrowish column width //used mostly on columns of text @mixin constrain_narrow() { - max-width: 90%; margin-left: auto; margin-right: auto; @include breakpoint(beta) { - max-width: $narrow-beta-width; - } - @include breakpoint(gamma) { - max-width: $narrow-max-width; - } -} - -@mixin constrain_archive() { - max-width: 94%; - margin-left: auto; - margin-right: auto; - @include breakpoint(alpha) { - max-width: 380px; - float: left; + max-width: 720px; } @include breakpoint(gamma) { - max-width: 680px; + max-width: 750px; } } - //set an element to centered, wideish column width @mixin constrain_wide() { - max-width: 90%; margin-left: auto; margin-right: auto; @include breakpoint(gamma) { @@ -155,9 +66,8 @@ $max_width: 1440px; max-width: $breakpoint-delta; } @include breakpoint(epsilon) { - max-width: $max_width; + max-width: 1440px; } } - - - +@mixin blockmenuitem() { +} diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 8a0eec2..3e563aa 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -1,23 +1,16 @@ -$breakpoint-omega: 420px; //728 -$breakpoint-alpha: 728px; //728 +$breakpoint-alpha: 750px; //728 $breakpoint-beta: 824px; //784 $breakpoint-gamma: 960px; $breakpoint-delta: 1170px; -$breakpoint-epsilon: $max_width; +$breakpoint-epsilon: 1440px; @mixin breakpoint($point) { - @if $point == "omega" { - @media screen and (min-width:$breakpoint-omega ){ @content; } - } @if $point == "alpha" { @media screen and (min-width:$breakpoint-alpha ){ @content; } } @else if $point == "beta" { @media screen and (min-width: $breakpoint-beta) { @content; } } - @else if $point == "beta-2" { - @media screen and (min-width: $breakpoint-beta-2) { @content; } - } @else if $point == "gamma" { @media screen and (min-width: $breakpoint-gamma) { @content; } } diff --git a/design/sass/screenv10.scss b/design/sass/screenv10.scss new file mode 100644 index 0000000..470c111 --- /dev/null +++ b/design/sass/screenv10.scss @@ -0,0 +1,1447 @@ +//font-size: 20px +//font-size: 1.25rem +//alpha = 720px +//beta = 960px +//gamma = 1170px +//delta = 1440px +//$orange = #b53a04 +//@media screen and (min-width: 1170px) + +//*********** custom fonts ******************************{{{ +@font-face { + font-family: 'carrois_gothicregular'; + src: url('/media/fonts/carroisgothic-regular-webfont.eot'); + src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'), + url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmpb.woff2') format('woff2'); + src: url('/media/fonts/ffmpb.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmbi.woff2') format('woff2'); + src: url('/media/fonts/ffmbi.woff') format('woff'); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'mffnweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffnbweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; +} +//}}} +//*********** Basic element styles **********************{{{ +body { + font-size: 20px; + font-size: 1.25rem; + font-family: mffweb, Georgia, 'Times New Roman', serif; + margin: 0 auto; + padding: 0; + color: #222; + text-align: left; + max-width: 96%; + line-height: 1.5; +} +@media screen and (min-width: 1170px) { + body { + font-size: 24px; + font-size: 1.5rem; + max-width: 100%; + } +} +// eliminate touch delay on mobile safari +a, button, input, select, textarea, label, summary { + touch-action: manipulation; +} +// links +a { + color: #222; + transition: all 0.1s ease; + text-decoration-color: #b53a04; +} +a:hover { + text-decoration: none; +} +a:visited { + color: #222; +} + +p { + text-align: left; +} +@media screen and (min-width: 1170px) { + p { + line-height: 1.6; + } +} +time { + display: block; +} +abbr { + cursor: help; +} +pre { + text-align: left; +} +object, embed, video, img { + max-width: 100%; + height: auto; +} +audio { + max-width: 100%; +} +blockquote { + font-size: 18px; + font-size: 1.125rem; + display: block; + border-top: 4px solid #e6e6e6; + border-bottom: 4px solid #e6e6e6; + margin: 3rem 0; + position: relative; + text-align: left; + font-style: italic; + cite { + display: block; + text-align: right; + } +} +hr { + border: 0; + margin: 3rem 0; + display: block; + content: ""; + height: 1px; + 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)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); +} +figure { + margin: 0; +} +figcaption { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 16px; + font-size: 1rem; + text-align: left; + line-height: 1.9; + padding: .3rem .5rem .3rem 0; + color: #666; + border-bottom: 1px #e6e6e6 solid; + margin-bottom: 1rem; +} +figcaption a, figcaption a:visited { + color: #666; +} +h1 { + font-size: 48px; + font-size: 3rem; + font-weight: normal; + margin-bottom: 0; + line-height: 1; +} +h2 { + font-size: 28px; + font-size: 1.75rem; + font-weight: normal; + margin: 0; +} +h3 { + font-size: 24px; + font-size: 1.5rem; + font-weight: normal; +} +h4 { + font-size: 22px; + font-size: 1.375rem; +} +h5 { + font-size: 16px; + font-size: 1rem; +} +dd { + display: inline; + margin: 0; +} +dd:after{ + display: block; + content: ''; +} +dt{ + display: inline-block; +} +dt:after { + content: ":"; +} +form fieldset { + margin: 1rem 0; + padding: 0; + border: none; + width: 100%; + position: relative; +} +form fieldset label { + position: absolute; + font-size: 14px; + font-size: .875rem; + font-family: mffnweb, Helvetica, sans-serif; + color: #666; + line-height: 14px; + top: .7rem; + left: .75rem; + z-index: 1; +} +input, .textarea-rounded textarea { + border: 1px solid #dedddd; + border-radius: 4px; + padding: 2.2rem 0 .75rem .75rem; + width: 96%; + font-size: 24px; + font-size: 1.5rem; + font-family: mffnweb, Helvetica, sans-serif; +} + +//}} +//*********** Global layout **************************** {{{ +.content { + margin-left: auto; + margin-right: auto; + max-width: 96%; + +} +@media screen and (min-width: 1170px) { + .content { + max-width: 100%; + } +} +@media screen and (min-width: 1440px) { + .content { + max-width: 1440px; + } +} +@media screen and (min-width: 750px) { + .post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) { + margin-left: auto; + margin-right: auto; + max-width: 750px; + } +} +//}}} +//*********** Universals ******************************* {{{ +.hide { + display: none; +} +.alert { + color: red !important; +} +.small { + font-size: 85%; +} +.btn { + font-size: 15px; + font-size: .9375rem; + display: inline-block; + border-radius: 4px; + -webkit-appearance: none; + text-decoration: none; + cursor: pointer; + background: #b53a04; + color: #fff; + border: 1px solid #b53a04; + padding: 4px 14px; + white-space: nowrap; +} +.btn:hover { + background: #b53a04; + border: 1px solid #b53a04; +} + +.flex { + display: flex; +} +.flex .btn, .flex .btn-hollow { + flex-basis: 10%; +} +.buy-btn { + font-family: mffnweb, Helvetica, sans-serif; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + font-size: 1rem; + text-decoration: none; + margin-right: 1rem; +} +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; +} +.buy-btn-wrapper h4 { + margin: 0 1.5rem 0 0; + line-height: normal; +} +.buy-btn-wrapper h4:after { + content: ":"; +} +.buy-btn-wrapper h5 { + margin-right: 1rem; +} +.hedtinycaps { + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 16px; + font-size: 1rem; + line-height: 1.2; + font-weight: 600; + display: inline-block; + margin-bottom: 2rem; + border-bottom: 2px solid #efefef; + text-align: center; +} +//}}} +//*********** Header Styles *****************************{{{ +//*********** <header> wrapper **************************{{{ +.header-wrapper { + padding-top: 6px; + margin: 0 auto; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-family: mffnweb, Helvetica, sans-serif; + text-align: center; +} +.header-wrapper a { + text-decoration: none; +} +.header-wrapper nav { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + margin: 1rem 0 .5rem 0; + padding: 0 0 .25rem 0; +} +// Rules for wider Layout +@media screen and (min-width: 750px) { + .header-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: 1px #f3efef solid; + margin-top: 1.25rem; + max-width: 96%; + } + .header-wrapper nav { + border: none; + margin-top: 1.8rem; + } +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .header-wrapper { + max-width: 1440px; + } +} +//}}} +//*********** Logo styles *******************************{{{ +.logo-link { + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + font-size: 2rem; +} +.logo-link:before { + display: block; + content: "home-icon"; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + margin: 5px auto; + text-indent: -9999em; +} +@media screen and (min-width: 750px) { + .logo-link { + text-align: left; + margin-top: 1.25rem; + } + .logo-link:before { + float: left; + height: 85px; + width: 105px; + background-size: 102px; + margin: -1rem 10px -4px 0; + } +} +//}}} +//*********** Subtitle styles *******************************{{{ +.sitesubtitle { + display: block; + margin-top: -8px; + margin-bottom: 10px; + font-family: mffweb, Georgia, 'Times New Roman', serif; + font-style: italic; + font-weight: 300; + font-size: .75rem; +} +@media screen and (min-width: 750px) { + .sitesubtitle { + text-align: left; + } +} +//}}} +///********** class for header and footer menus *********{{{ +.nav-item, .nav-item:visited { + color: #757575; + margin: 0 0.25rem; + font-family: mffnweb, Helvetica, sans-serif; + text-decoration: none; + font-weight: 600; + font-size: .8125rem;; + line-height: 1.2; + text-transform: uppercase; +} +.nav-item:after { + content: "\00b7"; + color: #9d9d9d; + padding-left: 0.75rem; +} +.nav-item:last-of-type:after { + content: " "; +} +//}}} +//}}} +//*********** Page Breadcrumbs **************************{{{ +.breadcrumbs { + font-family: mffnweb, Helvetica, sans-serif; + margin: 0 auto; + text-align: center; +} +@media screen and (min-width: 750px) { + .breadcrumbs { + max-width: 96%; + text-align: left; + } +} +@media screen and (min-width: 1440px) { + .breadcrumbs { + max-width: 1440px; + } +} +.breadcrumbs .nav-item { + margin: 0; +} +.breadcrumbs .nav-item, .breadcrumbs .nav-item a { + color: #808080; + text-decoration: none; +} +.breadcrumbs .nav-item:after { + content: "\2192"; + padding: 0; +} +.breadcrumbs .nav-item:last-of-type:after { + content: ""; +} +//}}} +//*********** images ************************************{{{ +.picwide img { + max-width: 98%; +} +@media screen and (min-width: 750px) { + .picwide img { + max-width: 100%; + } +} + +p + .picwide { + margin-top: 1.75rem; +} +@media screen and (min-width: 750px) { + p + .picwide { + margin-top: 2.6rem; + } +} + +.row-2 { + display: flex; + flex-direction: row; + gap: .5rem; +} +.row-2 > *:last-of-type { + margin-left: 10px; +} +//}}} +//*********** archive grids *****************************{{{ +.archive-grid { + max-width: 96%; + margin-top: 2rem; + margin-left: auto; + margin-right: auto; + list-style-type: none; + padding: 0; +} +.archive-grid-quad { + //used for books and related posts in detail pages + list-style-type: none; + padding: 0; +} +@media screen and (min-width: 750px) { + .archive-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + row-gap: 1rem; + } + // homepage recent + .archive-grid-double { + grid-template-columns: 1fr 1fr; + row-gap: 1rem; + grid-gap: 16px; + } + .archive-grid-quad { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 15px; + } +} +@media screen and (min-width: 860px) { + .archive-grid-quad { + grid-template-columns: 1fr 1fr 1fr; + } + //there's only 4 related items so override the + //3-grid at breakpoint beta + .related .archive-grid-quad { + grid-template-columns: 1fr 1fr; + } +} +@media screen and (min-width: 1170px) { + .archive-grid-quad, .related .archive-grid-quad { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} +@media screen and (min-width: 1440px) { + .archive-grid { + max-width: 1440px; + } +} +.archive-grid-single { + grid-template-columns: 1fr; + row-gap: 1rem; + grid-gap: 16px; +} +@media screen and (min-width: 750px) { + // get popular and recent lined up + // side by side on the hompage + .recent-popular { + display: flex; + flex-direction: row; + width: calc(100% + 30px); + } + .recent-popular .popular { + margin-left: 30px; + } +} +.archive-grid-card a { + text-decoration: none; +} +.archive-grid-card .card-smcaps a { + color: #747474; +} +.archive-grid-card-simple { + //container object for cards with no dek + line-height: 1; + margin-bottom: 1.4rem; +} +//}}} +//*********** archive cards *****************************{{{ +.card-smcaps, .post-smcaps { + // formats date and location lines as small caps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + color: #747474; + font-weight: bold; + font-size: 13px; + font-size: .8125rem; + margin: 0; +} +.card-hed { + // main headline of the card + font-size: 32px; + font-size: 2rem; + color: #555; + margin: 0; + line-height: 1; +} +.card-hed-it { + // italic variant of card hed + // used on jrnl archives + font-size: 26px; + font-size: 1.625rem; + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-smit { + // smaller italic variant of card hed + // used on homepage + font-size: 22px; + font-size: 1.375rem; + line-height: 1.3; + font-style: italic; + margin: .25rem 0 .5rem; + +} +.card-hed-btm { + // hed with a little bottom margin + // used in book list + margin-bottom: .5rem; +} +.card-image-sm { + // smaller card image + // used on homepage + max-height: 180px; + overflow: hidden; + margin-bottom: .5rem; +} +.card-image-sm img { + margin-top: -20%; +} +.card-image-tiny { + // even smaller card image used for + // related posts on detail pages + max-height: 120px; + overflow: hidden; + margin-bottom: .5rem; + img { + width: 100%; + margin-top: -20%; + } +} +.card-lede { + // subtitle or lede + font-size: 20px; + font-size: 1.25rem; + color: #747474; + font-style: italic; + line-height: 1.6; + margin: 0; +} +.card-dek { + // used for p test on jrnl page and elsewhere + font-size: 16px; + font-size: 1rem; + line-height: 1.6; + margin: 0 0 .5rem; +} +.card-stars { + // ratings on books + font-size: 16px; + font-size: 1rem; + display: block; +} +.read-in { + // makes read in date in books look good + display: block; +} +.circle-img-wrapper { + // small images next to archive lists + border-radius: 50%; + width: 106px; + height: 106px; + overflow: hidden; + float: left; + border: 3px solid #666; +} +@media screen and (min-width: 750px) { + .circle-img-wrapper { + margin-left: -128px; + margin-top: -2px; + } +} +.circle-img-wrapper img { + width: 160px; + max-width: 160px; +} +//}}} +//*********** archive lists ****************************{{{ +.archive-wrapper{ + //page content wrapper +} +.archive-hed { + //title of an archive page + font-size: 38px; + font-size: 2.375rem; + line-height: 1.1; + margin-bottom: .5rem; + text-align: center; +} +@media screen and (min-width: 750px) { + .archive-hed { + text-align: left; + } +} +.archive-lede { + // second headline below the intro + font-size: 22px; + font-size: 1.375rem; + line-height: 1.3; + font-style: italic; + color: #999; + margin-top: .5rem; + text-align: center; + border-bottom: 1px solid #efefef; +} +@media screen and (min-width: 750px) { + .archive-lede { + text-align: left; + margin-bottom: 2.4rem; + padding-bottom: 2.4rem; + } +} +.archive-intro { + //text at the top of the list/card page + max-width: 96%; + margin: 3rem auto 4rem auto; + border-bottom: 3px double #efefef; + padding-bottom: 3rem; +} +@media screen and (min-width: 750px) { + .archive-intro { + max-width: 750px; + } +} +.archive-intro p, .archive-intro ul { + font-size: 20px; + font-size: 1.25rem; + line-height: 1.5; +} +.archive-sans { + // second headline below the intro + max-width: 96%; + margin: 0 auto; + font-family: mffnweb, Helvetica, sans-serif; + font-size: 36px; + font-size: 2.25rem; + letter-spacing: -.5px; +} +@media screen and (min-width: 750px) { + .archive-sans { + max-width: 750px; + } +} +.archive-list{ + //the ul tag for archive lists + max-width: 96%; + margin: 0 auto; + list-style-type: none; + padding: 0; +} +@media screen and (min-width: 750px) { + .archive-list { + max-width: 750px; + } +} +.archive-list-card { + // the li tag within archive lists + // used to control spacing + margin-bottom: 4rem; +} +.archive-list-card a { + text-decoration: none; +} +.archive-list-card-sm { + // less spacing in lists with no images + // used on essay pages and src + margin-bottom: 1.5rem; +} +//}}} +//*********** archive pagination ************************{{{ +.pagination { + margin: 3rem auto 0 auto; + font-family: sans-serif; + font-size: 16px; + font-size: 1rem; +} +.pagination ul { + list-style-type: none; + padding: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} +.pagination li { + padding: 6px; +} +.pagination a { + text-decoration: none; + padding: 6px; + color: #333; + border: 1px solid #333; +} +.pagination a:hover { + color: white; + background: #b53a04; +} +.pagination .prev:before { + content: "\2190"; +} +.pagination .next:after{ + content: "\2192"; +} +.pagination-top { + // currently unused but adds spacing to + // page nav when it's at the top + margin: 1rem auto 3rem; +} +//}}} +//*********** header, dateline and expanding map ********{{{ +.post-header { + margin: 0 auto 2.6rem; + padding-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + text-align: center; + color: #555; +} +@media screen and (min-width: 750px) { + .post-header { + text-align: left; + max-width: 750px; + } +} +.post-dateline { + display: inline-block; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #efefef; + font-size: 14px; + font-size: .875rem; + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + color: #747474; +} +.post-dateline a { + color: #747474; +} +.post-subtitle { + font-style: italic; + font-size: 22px; + font-size: 1.4rem; + line-height: 1.25; +} + +.map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} +#detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -49vw; + margin-right: -49vw; +} +//}}} +//*********** post main elements ************************{{{ +.post-article p { + margin-bottom: 1.5rem; +} +.post-article h3 { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 26px; + font-size: 1.625rem; + font-weight: bold; +} +.post-article h4, h3 { + margin: 3rem 0 0 0; + line-height: 1.4; +} +.post-article h4+p, .post-article h3+p { + margin-top: .125rem; +} +.post-article h5 { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px; + font-size: 1.25rem; +} +.post-title { + margin-bottom: .25rem; +} +.post-location, .post-location a { + color: #adadad +} +//}}} +//*********** post footer, related, footnotes ***********{{{ +.entry-footer { + margin: 0 auto; + max-width: 96%; + border-top: 3px double #efefef; + border-bottom: 3px double #efefef; + margin-top: 3rem; + padding: 2rem; + font-size: 90%; +} +@media screen and (min-width: 750px) { + .entry-footer { + max-width: 750px; + display: flex; + flex-direction: row; + } +} + +.entry-footer .hedtinycaps { + margin-bottom: 0; +} +.related { + //slightly wider column for related posts with + //images on most detail pages + margin: 0 auto; + max-width: 96%; + text-align: center; +} +@media screen and (min-width: 960px) { + .related { + max-width: 960px; + } +} +.related time { display: inline;} +.related a { text-decoration: none;} + +.related .card-hed { + text-align: center; + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px;; + font-size: 1.25rem; + margin: 1rem auto .25rem; + color: #222; +} +.related .card-smcap { + text-align: center; + color: #999; +} + + + +.footnote { + line-height: 1; +} + + +//}}} +//*********** jrnl interpage nav ************************{{{ +.page-navigation { + max-width: 96%; + margin: 1rem auto; + border-bottom: 3px double #efefef; + padding: 1rem 0 2rem 0; + text-align: center; +} +@media screen and (min-width: 750px) { + .page-navigation { + max-width: 750px; + } +} +.page-navigation div { + line-height: 1; +} +.page-navigation .label { + display: inline-block; + font-size: 14px; + font-size: .875rem; + text-transform: uppercase; + font-weight: bold; + font-family: mffnweb, Helvetica, sans-serif; + color: #838383; + letter-spacing: 1px; + text-align: right; + min-width: 80px; +} +.page-navigation a { + text-decoration: none; + font-size: 16px; + font-size: 1rem; + font-style: italic; +} +//}}} +//*********** sighting and book specific tweaks *********{{{ +.center .post-header { + // centers the hed + text-align: center; + color: #222; +} +.center .post-smcaps { + text-align: center; +} +.post-subtitle-line{ + font-size: 22px; + font-size: 1.375rem; + text-align: center; + display: inline-block; + border-top: #333 solid 1px; + margin-top: 1rem; + padding-top: 1rem; +} +.list-sm { + font-size: 20px; + font-size: 1.25rem; +} +.book-detail .post-hed { + font-size: 34px; + font-size: 2.125rem; +} +.book-detail .post-subtitle-line { + font-style: italic; +} +.book-cover-wrapper { + float:left; + padding-right: .5rem; +} +.book-cover-wrapper img { + margin-left: -.5rem; +} +.book-metadata { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 18px; + font-size: 1.125rem; +} +.book-highlight:after { + display: block; + content: ''; + height: 30px; + border-bottom: 3px solid #efefef; + width: 200px; + margin: 0 auto 3rem auto; + padding-left: 30px; +} +.book-highlight-link { + font-size: 20px; + font-size: 1.25rem; + margin-right: .5rem; + margin-left: -1.2rem; + float: left; + line-height: 1.6; + text-decoration: none; + color: #bbb; +} +.book-highlight-body p:last-of-type { + margin-bottom: 0; +} +.book-highlight-footer { + font-size: 16px; + font-size: 1rem; + display: inline; +} +//}}} +//*********** src specific tweaks and code styling ******{{{ +.highlight { + margin: 0 auto; + max-width: 96%; + padding: 1rem; + margin-bottom: 1em; + font-size: 20px; + font-size: 1.25rem; +} +@media screen and (min-width: 1170px) { + .highlight { + max-width: 960px; + } +} +.go:before { + content: "$ "; +} +code > .comment::after { + display:none; +} +pre{ + white-space: pre-wrap; +} +//}}} +//*********** begging buttons ***************************{{{ +.donate { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 20px; + font-size: 1.25rem; + p { + line-height: 1.3; + } +} +.donate-btn { + display: inline-block; + margin-left: .5rem; +} +.donate-btn input[type="submit"] { + background: url("img/pp_donate.gif") 0 0 no-repeat; + border: none; + width: 100px; + text-indent: -9999em; + line-height: 19px; + padding: 2px 7px 10px; +} +.liberapay-btn { + background: url("img/lpdonate.svg") 0 0 no-repeat; + text-indent: -9999em; + display: inline-block; + line-height: 25px; + padding: 2px 7px 3px; + text-decoration: none; + width: 70px; +} +//}}} +//*********** Footer Styles *****************************{{{ +.page-footer { + margin: 0 auto; + border-top: 1px #f3efef solid; + margin-top: 5rem; + //smcaps + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + text-align: center; +} +.page-footer nav { + margin: 1.5rem 0 .5rem 0; +} +@media screen and (min-width: 750px) { + .page-footer { + text-align: right; + max-width: 96%; + } +} +//Slight adjust for full width +@media screen and (min-width: 1440px) { + .page-footer { + max-width: 1440px; + } +} +#license { + text-transform: none; + text-align: center; + font-family: mffnweb, Helvetica, sans-serif; + letter-spacing: normal; + font-size: 14px; + font-size: .875rem; + font-weight: 300; +} +#license a { + text-decoration: none; +} +@media screen and (min-width: 750px) { + #license { + text-align: right; + } +} +//}}} +//*********** A few Mailing list specific styles ********{{{ +.large-top-image{ + background: #f7f7f7; +} +.large-top-image img { + max-width: 100%; + margin: 4rem 0; +} +.list-hed{ + font-size: 32px; + font-size: 2rem; +} +.list-subhed { + font-size: 26px; + font-size: 1.625rem; + font-style: italic; + margin-bottom: 0; + +} + +.newsletter-subscribe { + margin: 3rem 0; +} +.newsletter-subscribefieldset { + margin: 0; +} + +// +.section { + margin-top: 6rem; +} +//}}} +//*********** comments **********************************{{{ +.comment-wrapper { + margin: 0 auto; + max-width: 96%; +} +@media screen and (min-width: 750px) { + .comment-wrapper { + max-width: 750px; + } +} +.comment-card-wrapper:after { + display: block; + margin: 4rem auto; + content: " "; + height: 1px; + width: 96%; + 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)); + background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); +} +.comment-card-hed { + border-bottom: 1px solid #ececec; + padding-bottom: .75rem; +} +.comment-card-commenter { + font-family: mffnweb, Helvetica, sans-serif; + font-weight: bold; + font-size: 22px; + font-size: 1.375rem; + display: block; + line-height: 1.2 + +} +.comment-card-image { + border: 2px #222 solid; + float: left; + margin-right: 1rem; +} +//}}} +//*********** homepage **********************************{{{ +.homepage-section-header { + font-family: mffnweb, Helvetica, sans-serif; + font-size: 28px; + font-size: 1.75rem; +} +.banner .large-top-image { + position: relative; + max-height: 900px; + overflow: hidden; +} +.banner .large-top-image img { + margin: 0; +} +@media screen and (min-width: 750px) { + .banner .large-top-image img { + margin-top: -120px; + } +} + +@media screen and (min-width: 750px) { + .banner figcaption { + position: absolute; + margin: 0; + bottom: 0; + width: 100%; + z-index: 100; + background: rgba(0,0,0,0.6); + } +} +.hero-text-wrapper { + font-family: mffweb, Georgia, 'Times New Roman', serif; + text-align: center; + color: white; + padding-bottom: 1.5rem; +} +.hero-text-wrapper .post-dateline { + border-top: 1px solid #484848; +} +.hero-text-wrapper .post-smcaps, .hero-text-wrapper .post-smcaps a { + color: #bbb; +} +.hero-text-wrapper .btn { + margin-top: 18px; + color: white; +} +.recent-popular, .homepage-bio-section, .homepage-next { + margin: 6rem auto; + max-width: 96%; +} +@media screen and (min-width: 1440px) { + .recent-popular, .homepage-bio-section, .homepage-next { + max-width: 1440px; + } +} + +@media screen and (min-width: 600px) { + .homepage-map-img { + display: block; + height: auto; + margin: 2rem 2rem auto 0; + min-width: 350px; + } + .homepage-bio-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + } +} +.homepage-next { + margin-top: 3rem; +} +.homepage-next h5 { + text-align: center; +} +.homepage-next a { + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 14px; + font-size: .875rem; + line-height: 1.2; + font-weight: 600; + text-decoration: none; + padding: 12px 10px 12px; + border: #b53a04 1px solid; +} +.homepage-next a:after { + content: "\21E2"; + margin-left: 4px; +} +.homepage-next a:hover { + background: #b53a04; + color: white; +} +//}} +//*******************Leaflet Styles *********************{{{ +.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666} + +//}}} +//*********** print stylesheet **************************{{{ +@media print { +body { + background: white; + color: black; + max-width: 660px; + font-size: 11pt; + margin: 0 auto; + line-height: 1.6; +} +.header-wrapper, #breadcrumbs, #page-navigation, .post-subtitle, .comment--form--wrapper, footer { + display: none; +} +.post-source { display: none;} +.highlight { + background: #f7f5f5 !important; +} +code, pre { + background: #f7f5f5 !important; + font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; +} +a { +} +pre { + background: #f7f5f5 !important; + padding: .5cm .25cm; +} +p code { + padding: 0 .25cm; +} +.cluster img, .picwide img, .picfull img { + width: 80%; + margin: 0 auto; + filter: grayscale(100%); +} +.row-2 img { + width: 50%; + margin: 0; + float:left; + filter: grayscale(100%); +} +.post-body p { + font-size: 11pt; +} +.post-body h3 { + font-size: 19pt; +} +.post-body h5 { + font-size: 14pt; +} +.go:before { + content: "$ "; +} +@page { + @bottom-right{ + //smcaps + font-family: mffnweb, Helvetica, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 13px; + font-size: .8125rem; + line-height: 1.2; + font-weight: 600; + content: "Page " counter(page) " of " counter(pages); + font-size: 6pt; + color: #666; + width: 2cm; + } +} +main .post--body { + max-width: 660px; + margin: 0; +} +figure { + width: 100%; + margin: 0; +} +figcaption { + font-family: mffnweb, Helvetica, sans-serif; + color: #999; + font-size: 9pt; + margin-top: 0; +} +.post-location { + font-family: mffnweb, Helvetica, sans-serif; + color: #333; + font-size: 12pt; + a { + text-decoration: none; + display: none; + } + .region { + display: inline; + color: #333 !important; + } +} +.entry-footer, .article-afterward, .jslghtbx { + display: none; +} +} +//}}} diff --git a/design/sass/_archives.scss b/design/sassold/_archives.scss index e690bf4..b5cb4af 100644 --- a/design/sass/_archives.scss +++ b/design/sassold/_archives.scss @@ -43,6 +43,13 @@ text-decoration-color: $orange !important; } + ul { + padding-left: 1rem !important; + list-style-type: disc !important; + } + li { + margin-bottom: 4px !important; + } } .archive-list .essay-intro { h2 { @@ -65,9 +72,12 @@ vertical-align: top; } .archive-grid { - margin-top: 3rem; + list-style-type: none; + margin: 0; + padding: 0; @include constrain_wide; display: grid; + margin-top: 3rem; @include breakpoint(alpha){ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-gap: .75rem; @@ -77,6 +87,36 @@ grid-gap: .75rem; } } +.archive-circle-grid { + grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); + grid-gap: 4rem; + grid-row-gap: 3rem; + margin-top: 5rem; + img { + width: 220px; + height: 220px; + border-radius: 50%; + border: 6px solid #333; + object-fit: cover; + } +} + +// wrapper for archive pages, makes sure there isn't a narrow col width +.meta-archive { + @include constrain_wide; +} +.archive-intro { + @include constrain_narrow; + border-bottom: 3px double #efefef; + padding-bottom: 3rem; + margin-bottom: 4rem; + margin-top: 3rem; + ul { + font-family: $fancy_serif; + @include fontsize(24); + } +} + @supports (display:grid) { .archive-grid > article { width: auto; diff --git a/design/sassold/_comments.scss b/design/sassold/_comments.scss new file mode 100644 index 0000000..39c7930 --- /dev/null +++ b/design/sassold/_comments.scss @@ -0,0 +1,122 @@ +//### COMMENTS AND FORMS ### +.comments--header { + @include constrain_narrow; + @include fancy_sans; + line-height: 6em; + @include fontsize(16); + font-style: italic; + margin-top: 2em; +} +.comments--wrapper { + @include constrain_narrow(); + text-align: left; + margin-top: -2em; +} +.comment { + margin-top: 2.5em; + margin-bottom: 2.5em; + padding-top: 3rem; + &:first-child { + margin-top: none; + } + &:after { + @include faded_line_after; + } + &:last-child:after { + display: none; + } +} +.comment--head, .comment--body { + @include breakpoint(alpha) { + margin-left: 80px; + margin-top: -2rem; + } +} +.comment--head { + margin-bottom: 1em; +} +.comment--body { + margin-bottom: 3em; + @include fontsize(22); + hr { + width: 20%; + overflow: visible; + padding: 0; + border: none; + border-top: 2px solid #d4d4d4; + color: #efefef; + background: none; + } +} +.who { + @include fancy_sans; + @include fontsize(22); +} +.when { + @include fancy_sans; + @include fontsize(15); + color: #999; + margin-left: 1em; +} + +.gravatar { + border: 2px $brown solid; + background: transparent; + max-width: 100%; + padding: 0; + float: left; + margin-top: 5px; + margin-right: 8px; + @include breakpoint(alpha) { + margin-right: 0; + } +} + + +.comment--form--wrapper { + @include constrain_narrow(); + p { + font-family: $fancy_serif; + } + input[type="submit"] { + display: inline-block; + @include fancy_sans; + @include fontsize(14); + font-weight: 600; + width: auto; + text-transform: uppercase; + padding: 8px 12px 7px; + } + .submit { + @extend %clearfix; + display: block; + margin-right: 0; + } + .submit .btn { + float: right; + &:first-of-type { + margin-left: 5px; + } + } + label { + left: 1.2rem !important; + } +} +.comment-form-border{ + border-top: 3px double #efefef; +} +.comment--form--header { + margin-top: 2em; + .hed { + @include fontsize(28); + margin: 0; + } + .subhed { + font-style: italic; + @include fontsize(20); + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + } +} + diff --git a/design/sassold/_details.scss b/design/sassold/_details.scss new file mode 100644 index 0000000..53e819f --- /dev/null +++ b/design/sassold/_details.scss @@ -0,0 +1,601 @@ +.detail { + #article { + padding-bottom: 2rem; + border-bottom: 3px double #efefef; + } + article { + font-family: $fancy_serif; + @include constrain_narrow; + margin-top: 4rem; + h1 { + font-family: $fancy_serif; + line-height: 1em; + letter-spacing: -1px; + @include fontsize(48); + font-weight: normal; + margin-bottom: .25rem + } + ul { + text-align: left; + @include fontsize(18); + } + } + .post-subtitle { + font-style: italic; + font-size: 1.4rem; + line-height: 1.25; + margin-top: 0; + margin-bottom: 0; + } + .post-subtitle-segundo { + @include fancy_sans; + @include smcaps; + @include fontsize(13); + font-weight: bold; + color: #999; + + } + .post-linewrapper { + margin-top: 1rem; + padding-top: 1rem; + display: inline-block; + border-top: 1px solid #efefef; + } + .post-location { + color: #b6b6b6; + text-align: center; + a { + color: #b6b6b6; + text-decoration: underline; + text-decoration-color: $orange; + } + @include breakpoint(gamma) { + text-align: left; + } + } + .post-date { + text-align: center; + @include breakpoint(alpha) { + text-align: left; + } + } + .map { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + } + .post-header { + @include fancy_sans; + @include fontsize(18); + color: lighten($body_font_color, 20); + padding-bottom: 2.6rem; + border-bottom: 1px solid #efefef; + @include breakpoint(alpha) { + text-align: left; + } + time { + } + } + p:first-of-type { + margin-top: 2.6rem; + } + h4, h5 { + @include fancy_sans; + margin: 3rem 0 0 0; + } + h4 + p, .afterward h4 + p { + margin-top: .125rem; + } + h5 { + margin: 0 + } + .afterward { + p {font-style: italic;} + h4 { + margin-bottom: 0; + } + } + p.small { + @include fontsize(18); + } + .sci { + text-align: center; + @include fontsize(24); + font-weight: 400; + margin: 0; + + } + .sci:nth-child(3) { + @include fontsize(18); + margin-bottom: 2rem; + } + ul { + list-style: circle; + margin-left: 2.5em; + list-style-position: outside; + margin-bottom: 2.4em; + } + // Ack, id selector, so wrong, but easy handles the slightly different footer + // in the dialogue section that lists all the sightings + #endnode { + h5 { + @include fontsize(14); + @include smcaps; + @include fancy_sans; + margin-bottom: 1rem; + margin-top: 2rem; + } + ul { + margin-bottom: 2em; + list-style-type: none; + padding: 0; + li { + color: lighten($body_font_color, 30); + margin-bottom: 0; + margin-top: 0; + &:before { + content: "\2022"; + color: lighten($body_font_color, 30); + margin-right: .35rem; + } + } + } + } + #detail-map-canvas { + height: 400px; + width: 98vw; + position: relative; + left: 49%; + right: 49%; + margin-left: -48vw; + margin-right: -49vw; + } +} +.post-dateline { + display: inline-block; + margin-top: 0em; + padding-top: 1rem; + padding-bottom: 2.6rem; + border-top: 1px solid #efefef; +} +header.tight { + margin-bottom: 3rem; + * { + margin: 0; + text-align: center; + } + h1 { + margin-bottom: 1rem; + } + h2 { + display: inline-block; + border-top: 1px solid darken(#efefef, 10); + padding-top: 1rem; + } + h3 { + margin-top: .35rem; + } +} +h4.post-source { + @include fontsize(14); + @include smcaps; + padding-bottom: 0em; + margin-bottom: 0; + margin-top: 0; + font-weight: bold; + color: #b6b6b6; + a { + color: #b6b6b6; + &:hover { + color: $link_color; + } + } +} +.post-location { + h3 { + display: inline; + @include fontsize(14); + } + a { + color: $secondary_link_color; + text-decoration: none; + } +} +.post-essay ~ p:first-child:first-letter { + @include fancy_sans; + font-size: 75px; + line-height: 60px; + padding-top: 4px; + padding-right: 8px; + padding-left: 3px; +} +//### GUIDE STUFF ### +.product-card { + margin: 5rem 0; +} +.detail .product-link { + a { + display: block; + padding: 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + font-size: 16px; + text-decoration: none; + } +} +.buy-btn { + @include fancy_sans; + display: block; + padding: .5rem 1rem; + background: #249bd6; + color: white; + text-transform: uppercase; + @include fontsize(16); + text-decoration: none; + margin-right: 1rem; +} +.buy-btn-wrapper { + display: flex; + justify-content: start; + align-items: center; + align-content: space-between; + h4 { + margin: 0 1.5rem 0 0; + line-height: normal; + &:after { + content: ":"; + } + } + h5 { + margin-right: 1rem; + } +} +.post-guide .buy-btn-wrapper { + margin-top: 4rem; + justify-content: center; +} +.detail .post-guide { + h3 { + @include fontsize(27); + margin: 4rem 0 .5rem 0; + & + p { + margin-top: 0; + } + } +} +//### PAGE NAVIGATION ### +.nav-wrapper { + @include constrain_narrow(); + border-bottom: 3px double #efefef; +} +#page-navigation { + margin: 2em auto; + text-align: center; + display: table; + ul { + list-style-type: none; + margin: 0 auto; + width: 100%; + text-align: center; + padding: 0; + } + li { + margin: 6px auto; + clear: both; + line-height: 24px; + text-align: center; + } + span { + @include fancy_sans; + @include fontsize(14); + min-width: 70px; + display: block; + text-align: right; + margin-right: 10px; + float: left; + } + a { + display: block; + float: left; + font-family: $fancy_serif; + text-align: left; + font-style: italic; + color: $brown; + text-decoration: none; + } +} + +.article-afterward { + @extend %clearfix; + @include constrain_narrow; + padding-bottom: 2rem; + .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; + margin-right: 0; + margin-bottom: 2rem; + max-width: 100%; + a { text-decoration: none;} + .post-title { + @include fontsize(20); + text-align: center; + line-height: 1.2; + 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) { + margin: 0 auto; + max-width: 70%; + margin-bottom: 0; + } + @include breakpoint(alpha) { + max-width: 50%; + } + @include breakpoint(beta) { + 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 { + max-height: 220px; + overflow: hidden; + @include breakpoint(beta) { + margin-bottom: 1rem; + } + img { + margin-top: -20%; + } +} + + +.entry-footer { + @extend %clearfix; + @include constrain_narrow; + border-bottom: 3px double #efefef; + margin-top: 2em; + text-align: left; + h3 { + @include smcaps; + @include fontsize(16); + } + h3 + ul { + padding: 0; + } + li { + margin: .25em 0; + list-style-type: none; + } + li ul { + columns: 2 auto; + list-style-type: none; + margin-left: .5rem; + padding: 0; + } + li ul li:before { + content: "\2022"; + margin-right: .45rem; + color: lighten($body_font_color, 40); + } + .grouper { + margin-top: 1em; + } + a { + text-decoration: none; + color: lighten($body_font_color, 20); + } + #wildlife li ul li { + color: lighten($body_font_color, 40); + a { + color: lighten($body_font_color, 10); + } + } + @include breakpoint(beta) { + padding-bottom: 2rem; + #wildlife { + max-width: 55%; + float: left; + margin-right: 1.2rem; + } + #recommended-reading{ + ul { + list-style-type: none; + } + img { + max-width: 180px; + } + } + } + aside { + @extend %clearfix; + } +} +#field_notes { + @include breakpoint(beta) { + max-width: 33%; + float: left; + margin-top: .15em; + margin-left: 7em; + } + li:before { + content: "\2022"; + margin-right: .35rem; + color: $body_font_light; + } +} +.rr-clear { + clear: left; +} + +//### FOOTNOTES ### +.footnote { + margin: 1em auto 0 auto; + padding: 0; + list-style-type: none; + p { + font-size: 1rem; + line-height: 1.4; + margin-top: 0 !important; + } + hr {display: none;} + ol { + padding-left: 1em; + @include breakpoint(alpha) { + margin-left: 1em; + } + } +} +sup { + line-height: 1; + .footnote-ref { + padding: 4px 3px; + + } +} + +//### Figments ### +.downloads { + list-style-type: none; +} + +// ### Books ### +.book { + &:after { + display: block; + content: ''; + height: 30px; + border-bottom: 3px solid #efefef; + width: 200px; + margin: 0 auto 3rem auto; + padding-left: 30px; + } +} +.book-metadata { + text-align: left; + @include fancy_sans; + dd { + display: inline; + margin: 0; + } + dd:after{ + display: block; + content: ''; + } + dt{ + display: inline-block; + } + dt:after { + content: ":"; + } +} +.thoughts, .highlights, .meta-cover, .dis { + @include constrain_narrow; + font-family: $fancy_serif; + text-align: left; + p { + max-width: 100%; + } +} +.book-cover-wrapper { + @include constrain_wide; + img { + float: left; + max-width: 20rem; + } +} +.thoughts { + margin-top: 4rem; + p:first-of-type { + margin-top: 0; + } +} +.thoughts h5, .highlights h4 { + font-weight: 500; + letter-spacing: 1px; + margin: 3em 0 .5em 0; + @include fancy_sans; + @include smcaps; + @include fontsize(14); +} +.highlights div:first-of-type p:first-of-type { + margin-top: 0; +} +.book-highlight p:last-of-type { + margin-bottom: 0; +} +.book p:last-of-type, .highlights div:first-of-type p:last-of-type{ + margin-top: 8px; +} +.highlink { + @include fontsize(20); + margin-right: .5rem; + float: left; + line-height: 1.6; + text-decoration: none; + color: lighten($body_font_color, 60); + @include breakpoint(alpha) { + margin-top: 1px; + } + &:visited { + color: lighten($body_font_color, 60); + } +} +.foot { + margin-top: 16px; + @include fancy_sans; + @include fontsize(16); +} +.dis { + @include fontsize(16); + text-align: center; +} diff --git a/design/sassold/_fonts.scss b/design/sassold/_fonts.scss new file mode 100644 index 0000000..1ae40f8 --- /dev/null +++ b/design/sassold/_fonts.scss @@ -0,0 +1,43 @@ +@font-face { + font-family: 'carrois_gothicregular'; + src: url('/media/fonts/carroisgothic-regular-webfont.eot'); + src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'), + url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmpb.woff2') format('woff2'); + src: url('/media/fonts/ffmpb.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffweb'; + src: url('/media/fonts/ffmbi.woff2') format('woff2'); + src: url('/media/fonts/ffmbi.woff') format('woff'); + font-weight: 400; + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'mffnweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'mffnbweb'; + src: url('/media/fonts/ffmn.woff2') format('woff2'); + src: url('/media/fonts/ffmn.woff') format('woff'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + diff --git a/design/sassold/_footer.scss b/design/sassold/_footer.scss new file mode 100644 index 0000000..08c9942 --- /dev/null +++ b/design/sassold/_footer.scss @@ -0,0 +1,83 @@ +footer { + margin-top: 5em; + @include breakpoint(gamma) { + max-width: 960; + } + &:before { + @include breakpoint(beta) { + @include faded_line_after; + margin-bottom: 1.2em; + } + } + .footer-nav { + list-style-type: none !important; + margin-left: 0 !important; + border-top: 1px $brown dotted; + border-bottom: 1px $brown dotted; + padding: .5rem 0; + @include breakpoint(beta) { + border: none; + } + } + li { + display: inline; + margin: 0 .25em; + &:after { + content: "\00b7"; + color: #999999; + padding-left: 0.75em; + } + a { + color: $secondary-link-color; + text-decoration: none; + } + ul { display:inline;} + } + li:last-of-type { + margin-right: 0; + &:after { + content: " "; + } + } + p { + @include fontsize(10); + text-align: center; + margin-top: 1.5em; + margin-bottom: 1.5em; + } +} +.black footer, .dark footer { + &:before { + @include light_faded_line_after; + } + a { + color: $body_font_light; +} +} +.donate-btn { + display: inline-block; + margin-left: .5rem; + input[type="submit"] { + background: url("img/pp_donate.gif") 0 0 no-repeat; + border: none; + width: 100px; + text-indent: -9999em; + line-height: 19px; + padding: 2px 7px 10px; + } +} +.liberapay-btn { + background: url("img/lpdonate.svg") 0 0 no-repeat; + text-indent: -9999em; + display: inline-block; + line-height: 25px; + padding: 5px 7px 3px; + text-decoration: none; + width: 70px; +} +#license { + @include fancy_sans; + @include fontsize(12); + text-transform: none; + letter-spacing: normal; +} diff --git a/design/sassold/_forms.scss b/design/sassold/_forms.scss new file mode 100644 index 0000000..4e0227b --- /dev/null +++ b/design/sassold/_forms.scss @@ -0,0 +1,113 @@ +.generic-form { + margin: 2rem 0; + @extend %clearfix; + fieldset { + padding: 0; + border: none; + width: 100%; + position: relative; + } + input[type=email] { + width: 210px; + @include fontsize(18); + background-color: #fff; + border: 2px solid darken(#efefef, 10); + border-radius: 5px; + height: 2.2rem; + padding: 4px 4px 4px 8px; + margin-right: .5rem; + @include breakpoint(omega){ + width: 92%; + } + @include breakpoint(alpha){ + width: 96%; + } + } + label { + display: block; + visibility: hidden; + width: 0; + height: 0; + } + .btn-hollow { + @include fontsize(16); + display: inline-block; + padding: 10px 15px; + margin-bottom: 0; + line-height: 20px; + text-align: center; + vertical-align: middle; + cursor: pointer; + color: #ddd; + border: 0; + border-radius: 5px; + font-weight: bold; + transition: all 0.2s ease; + background: $orange; + &:hover { + color: white; + } + } +} +.flex { + display: flex; + .btn, .btn-hollow { + flex-basis: 10%; + } +} + + +form fieldset { + margin: 1rem 0; + padding: 0; + border: none; + width: 100%; + position: relative; +} +form fieldset label { + position: absolute; + -webkit-transform: translate3d(10px, 100%); + -moz-transform: translate3d(10px, 100%); + -ms-transform: translate3d(10px, 100%); + -o-transform: translate3d(10px, 100%); + transform: translate3d(10px, 100%); + @include fontsize(14); + @include fancy_sans; + color: lighten($body_font_color, 25); + line-height: 14px; + top: .7rem; + left: .75rem; + z-index: 1; +} +input, .textarea-rounded textarea { + border: 1px solid #dedddd; + border-radius: 4px; + padding: 2.2rem 0 .75rem .75rem; + width: 96%; + @include fontsize(24); + @include fancy_sans; +} + +.btn { + @include fontsize(15); + display: inline-block; + border-radius: 4px; + -webkit-appearance: none; + text-decoration: none; + cursor: pointer; + background: $link_color; + color: #fff; + border: 1px solid $link_color; + padding: 7px 14px; + white-space: nowrap; + &:hover { + background: $link_color; + border: 1px solid $link_color; + } +} +.newsletter-subscribe { + margin: 3rem 0; + fieldset { + margin: 0; + } +} diff --git a/design/sassold/_global.scss b/design/sassold/_global.scss new file mode 100644 index 0000000..5030dbf --- /dev/null +++ b/design/sassold/_global.scss @@ -0,0 +1,267 @@ +html { + border-top: 0.25em solid $brown; +} + +body { + margin: 0 auto; + padding: 0; + overflow-x: hidden; + font:$body_p_font; + color: $body_font_color; + text-align: center; + background-color: transparent +} +ul { + padding: 0; +} +// eliminate touch delay on mobile safari +a, button, input, select, textarea, label, summary { + touch-action: manipulation; +} +a { + color: $body_font_color; + -webkit-transition: all 0.1s ease; + -moz-transition: all 0.1s ease; + -ms-transition: all 0.1s ease; + transition: all 0.1s ease; + text-decoration-color: $orange; + &:hover { + text-decoration: none; + } + &:visited { + color: $body_font_color; + } +} +p { + text-align: left; + font-family: $fancy_serif; + @include fontsize(20); + @include breakpoint(alpha){ + @include fontsize(22); + line-height: 1.5; + } + @include breakpoint(beta){ + @include fontsize(24); + line-height: 1.6; + } +} +time { + @include smcaps; + @include fontsize(11); + display: block; + span { + @include fontsize(13); + } +} +abbr { + cursor: help; +} +pre { + text-align: left; + @include breakpoint(alpha){ + @include fontsize(18); + line-height: 1.5; + } +} +object, embed, video { + max-width: 100%; + width: 100%; + height: auto; +} +audio { + max-width: 100%; + width: 100%; +} +blockquote { + @include fontsize(18); + display: block; + border-top: 4px solid lighten($body_font_light, 20); + border-bottom: 4px solid lighten($body_font_light, 20); + margin: 3rem 0; + position: relative; + text-align: left; + font-style: italic; + cite { + display: block; + text-align: right; + } + @include breakpoint(alpha){ + @include fontsize(20); + line-height: 1.5; + } + @include breakpoint(beta){ + @include fontsize(22); + line-height: 1.6; + } +} +blockquote:before { + @include fancy_sans; + @include fontsize(68); + content: '\201C'; + position: absolute; + top: -1.35rem; + left: 50%; + transform: translate(-50%, -50%); + width: 3rem; + height: 2rem; + color: #666; + text-align: center; +} +hr { + border: 0; + height: 1px; + @include faded_line_after; + margin: 3rem 0; +} +img { + max-width: 100%; +} +figure { + margin: 0; +} +figcaption { + text-align: left; +} +figcaption, figcaption a { + @include fancy_sans; + @include fontsize(16); + text-align: left; + line-height: 1.9; + padding: .3rem .5rem .3rem 0; + color: #666; + border-bottom: 1px lighten($body_font_light, 20) solid; + margin-bottom: 1rem; +} +figcaption a:visited { + color: #666; +} +h1 { + font-family: $headline_font_serif; + @include fontsize(36); + font-weight: normal; +} +h2 { + font-family: $headline_font_serif; + @include fontsize(28); + font-weight: normal; + text-align: left; + @include breakpoint(gamma){ + @include fontsize(30); + line-height: 1.6; + } +} +h3 { + font-family: $fancy_sans; + @include fontsize(24); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(28); + line-height: 1.4; + } +} +h4 { + @include fontsize(20); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(22); + line-height: 1.4; + } +} +h5 { + @include fontsize(16); + text-align: left; + @include breakpoint(gamma){ + @include fontsize(18); + line-height: 1.4; + } +} +.subhead { + font-size: 26px !important; + font-style: italic; + margin-top: 0; + margin-bottom: 0; +} +.subhead + p { + margin-top: .75rem !important; +} +.essay-intro .subhead + p:first-of-type { + margin-top: .75rem !important; +} +//************** Universals ************************ +.hide { + display: none; +} + +.strike { + text-decoration: line-through; +} + +.yes { + background: green !important; + color: white; +} + +.no { + background: red !important; + color: white; +} + +.alert { + color: red !important; +} +//************** other global classes ************************ +.sans { + @include generic_sans; +} +.bl { + @include smcaps; + @include fontsize(12); + font-weight: 600; + color: $secondary-link-color; +} +.italic { + font-style: italic; +} +.small { + font-size: 90%; +} +.divide-after:after { + margin-bottom: 3em; + @include faded_line_after; +} +.margin-left-none { + margin-left: 0 !important; +} +//**************** Page Breadcrumbs ************************ + +#breadcrumbs { + @include constrain_wide(); + padding: 0; + list-style-type: none; + text-align: center; + li { + display: inline; + } + a { + color: $secondary-link-color; + } + @include breakpoint(gamma) { + text-align: left; + } +} + +.black #breadcrumbs a, .dark #breadcrumbs a { + color: $body_font_light; +} +//************* Dark Pages ********************* + +.dark body { + background: $brown; + color: $body_font_light +} + +.black body { + background: #000; + color: $body_font_light +} + diff --git a/design/sassold/_header.scss b/design/sassold/_header.scss new file mode 100644 index 0000000..4bba7a7 --- /dev/null +++ b/design/sassold/_header.scss @@ -0,0 +1,187 @@ +.header-wrapper { + @include breakpoint(beta) { + border-bottom: 1px #f3efef solid; + } +} +.site-banner { + @extend %clearfix; + margin: 0 auto; + @include constrain_wide; + @include smcaps; + #logo { + a { + @include fontsize(32); + text-decoration: none; + display: block; + font-weight: 300; + font-family: 'carrois_gothicregular', Helvetica, sans-serif; + color: $brown; + &:before { + display: block; + content: "home-icon"; + text-indent: -9999em; + background: url("logo-new-@2x-treeonly.png") center top no-repeat; + width: 95px; + height: 65px; + background-size: 95px; + background-size: 85px; + //if sox + //background: url("img/soxlogo.svg") center top no-repeat; + //background-size: 60px; + display: block; + margin: 5px auto 0; + } + } + .sitesubtitle { + display: block; + margin-top: -8px; + font-family: $fancy_serif; + font-style: italic; + font-weight: 300; + @include fontsize(12); + } + } + nav { + border-top: 1px #444444 dotted; + border-bottom: 1px #444444 dotted; + //box-shadow: 0 3px 8px 0 #e6e6e6 + padding-left: 20px; + padding-right: 20px; + margin-right: -20px; + margin-left: -20px; + margin-top: 1em; + padding: 0.25em 0.5em; + a { + text-decoration: none; + color: lighten(#505050, 5); + &:visited { + color: lighten(#505050, 5); + } + } + ul { + @include smcaps; + @include fancy_sans; + @include fontsize(13); + max-width: 100%; + font-weight: 600; + margin-top: 0.5em; + margin-bottom: 0.5em !important; + padding: 0; + @include constrain(85%); + } + li { + display: inline; + margin: 0 0.25em; + color: lighten(#505050, 30); + &:after { + content: "\00b7"; + color: #999999; + padding-left: 0.75em; + } + &:last-of-type { + margin-right: 0; + &:after { + content: " "; + } + } + } + @include breakpoint(beta) { + } + } + @include breakpoint(beta) { + height: 90px; + position: relative; + #logo { + float: left; + text-align: left; + a { + width: 360px; + line-height: 2.5em; + &:before { + display: inline-block; + background-size: 102px; + //if sox + //background: url("img/soxlogo.svg") center bottom no-repeat; + //background-size: 70px; + height: 85px; + width: 105px; + //if sox + //width: 80px; + margin-right: 10px; + } + } + .sitesubtitle { + margin-left: 116px; + //if sox + //margin-left: 90px; + margin-top: -30px; + } + } + nav { + float: right; + border: none; + margin: 42px 0 0 0; + padding: 0; + ul { + max-width: 50em; + } + } + } +} + +.black header h1 a, .dark header h1 a { + color: $body_font_light; + &:before { + background: url("logo-new-@2x-treeonly.png") center -75px no-repeat; + background-size: 92px; + } + @include breakpoint(gamma) { + &:before { + background-position-y: -65px; + } + } +} + + +.black nav[role="navigation"] a, .dark nav[role="navigation"] a { + color: $body_font_light; +} + + +.header-wrapper { + @extend %clearfix; + margin-bottom: 1em; + @include breakpoint(beta) { + border-bottom: 1px #f3efef solid; + position: relative; + } + @include breakpoint(gamma) { + max-width: $breakpoint-gamma; + margin-left: auto; + margin-right: auto; + } + @include breakpoint(delta) { + margin-top: 1.3rem; + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + margin-top: 1.3rem; + max-width: $max_width; + } +} +.detail .header-wrapper, .detail #breadcrumbs { + transition: opacity .5s; + @include breakpoint(epsilon) { + opacity: .8; + &:hover { + opacity: 1; + } + } +} + +.black .header-wrapper, .dark .header-wrapper { + @include breakpoint(beta) { + border-bottom: 1px $body_font_light solid; + } +} + diff --git a/design/sass/_images.scss b/design/sassold/_images.scss index 4c0951c..4c0951c 100644 --- a/design/sass/_images.scss +++ b/design/sassold/_images.scss diff --git a/design/sassold/_leaflet.scss b/design/sassold/_leaflet.scss new file mode 100644 index 0000000..b65ffb8 --- /dev/null +++ b/design/sassold/_leaflet.scss @@ -0,0 +1 @@ +.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666} diff --git a/design/sassold/_lttr.scss b/design/sassold/_lttr.scss new file mode 100644 index 0000000..ea59eec --- /dev/null +++ b/design/sassold/_lttr.scss @@ -0,0 +1,63 @@ +.large-top-image { + background: #f7f7f7; + img { + max-width: 100%; + margin: 4rem 0; + } +} +.lttr { + @include constrain_narrow; + margin-top: 6rem; + header { + padding-bottom: 3rem; + border-bottom: 1px #f0edeb solid + } +} +.lttr-box { + //background: #faf7f5; + text-align: center; + padding: .5rem; + display: inline-block; + //border: 1px #e0dedc solid; +} +.lttr-cover { + margin-right: 1.2rem; +} +#recommended-reading { + .book-title { + @include fontsize(28); + font-weight: 400; + margin-bottom: 0; + } + h6 { + margin-top: 0; + @include fontsize(18); + font-weight: 400; + } +} + +#page-navigation img { + width: 300px; + height: 160px; + object-fit: cover; +} +#page-navigation h4 { + text-align: center; + @include fontsize(22); + @include fancy_sans; + color: #333; +} +#page-navigation .nav-title { + @include fontsize(22); + line-height: 1.5; +} +#page-navigation .photo-arrow-next { + text-align: left; +} +.page-nav-photo li { + display: inline-block; + margin: 0 0 0 3rem !important; + &:first-of-type { + margin-left: 0 !important; + } +} diff --git a/design/sass/_map.scss b/design/sassold/_map.scss index e4bd5e4..e4bd5e4 100644 --- a/design/sass/_map.scss +++ b/design/sassold/_map.scss diff --git a/design/sassold/_mixins.scss b/design/sassold/_mixins.scss new file mode 100644 index 0000000..9ccd750 --- /dev/null +++ b/design/sassold/_mixins.scss @@ -0,0 +1,163 @@ +$brown: #201a11; +$brown: #222; +$light: #ccc; +$orange: #b53a04; +$link_color: #b53a04; + +$headline_font_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_serif: mffweb, Georgia, 'Times New Roman', serif; +$fancy_sans: mffnweb, Helvetica, sans-serif; + + +$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif; +$body_font_color: $brown; +$body_font_light: #b3aeae; +$secondary-link-color: #838383; + +$archive_p_line_height: 1.6; +//$light; +$narrow-beta-width: 720px; +$narrow-max-width: 750px; +$max_width: 1440px; + +@mixin smcaps { + @include fancy_sans; + text-transform: uppercase; + letter-spacing: 1px; +} +@mixin plain_a { + border: none; + text-decoration: none; + color: $body_font_color; +} + +@function calc-rem($size) { + $remsize: $size/16; + @return #{$remsize}rem; +} + +@mixin fontsize($size) { + font-size: $size + px; + font-size: calc-rem($size); +} + +@function calc-em($target-px, $context) { + @return $target-px / $context * 1em; +} + +@mixin img_plain { + padding: 0; + max-width: 100%; + background: none; +} +@mixin generic-sans { + font-family: sans-serif; +} +@mixin fancy-sans { + font-family: mffnweb, Helvetica, sans-serif; +} +@mixin fancy-sans-bold { + font-family: mffnbweb, Helvetica, sans-serif; + font-weight: 700; +} +@mixin fancy-serif { + font-family: Georgia, Palatino, serif; +} +%clearfix { + *zoom: 1; + &:before { + content: " "; + display: table; + } + &:after { + content: " "; + display: table; + clear: both; + } +} + +@mixin transparent_class { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity = 90); + opacity: 0.9; +} + +@mixin faded_line_after { + display: block; + content: ""; + margin-top: 3em; + height: 1px; + 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)); + background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); + background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); +} + +//for overriding the above on dark pages: +@mixin light_faded_line_after { + background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); +} + +@mixin lighter_faded_line_after { + background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1)); + background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); + background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0)); +} + +//generic constrain function +@mixin constrain($size) { + max-width: $size; + margin-left: auto; + margin-right: auto; +} + +//set an element to centered, narrowish column width +//used mostly on columns of text +@mixin constrain_narrow() { + max-width: 90%; + margin-left: auto; + margin-right: auto; + @include breakpoint(beta) { + max-width: $narrow-beta-width; + } + @include breakpoint(gamma) { + max-width: $narrow-max-width; + } +} + +@mixin constrain_archive() { + max-width: 94%; + margin-left: auto; + margin-right: auto; + @include breakpoint(alpha) { + max-width: 380px; + float: left; + } + @include breakpoint(gamma) { + max-width: 680px; + } +} + +//set an element to centered, wideish column width +@mixin constrain_wide() { + max-width: 90%; + margin-left: auto; + margin-right: auto; + @include breakpoint(gamma) { + max-width: $breakpoint-gamma; + } + @include breakpoint(delta) { + max-width: $breakpoint-delta; + } + @include breakpoint(epsilon) { + max-width: $max_width; + } +} + + + diff --git a/design/sass/_notes.scss b/design/sassold/_notes.scss index 1386751..1386751 100644 --- a/design/sass/_notes.scss +++ b/design/sassold/_notes.scss diff --git a/design/sass/_pagination.scss b/design/sassold/_pagination.scss index 7dc9cb1..7dc9cb1 100644 --- a/design/sass/_pagination.scss +++ b/design/sassold/_pagination.scss diff --git a/design/sass/_photos.scss b/design/sassold/_photos.scss index 95d6c45..95d6c45 100644 --- a/design/sass/_photos.scss +++ b/design/sassold/_photos.scss diff --git a/design/sassold/_queries.scss b/design/sassold/_queries.scss new file mode 100644 index 0000000..8a0eec2 --- /dev/null +++ b/design/sassold/_queries.scss @@ -0,0 +1,30 @@ +$breakpoint-omega: 420px; //728 +$breakpoint-alpha: 728px; //728 +$breakpoint-beta: 824px; //784 +$breakpoint-gamma: 960px; +$breakpoint-delta: 1170px; +$breakpoint-epsilon: $max_width; + +@mixin breakpoint($point) { + @if $point == "omega" { + @media screen and (min-width:$breakpoint-omega ){ @content; } + } + @if $point == "alpha" { + @media screen and (min-width:$breakpoint-alpha ){ @content; } + } + @else if $point == "beta" { + @media screen and (min-width: $breakpoint-beta) { @content; } + } + @else if $point == "beta-2" { + @media screen and (min-width: $breakpoint-beta-2) { @content; } + } + @else if $point == "gamma" { + @media screen and (min-width: $breakpoint-gamma) { @content; } + } + @else if $point == "delta" { + @media screen and (min-width: $breakpoint-delta) { @content; } + } + @else if $point == "epsilon" { + @media screen and (min-width: $breakpoint-epsilon) { @content; } + } +} diff --git a/design/sass/_resume.scss b/design/sassold/_resume.scss index 41fc8e1..41fc8e1 100644 --- a/design/sass/_resume.scss +++ b/design/sassold/_resume.scss diff --git a/design/sass/_src.scss b/design/sassold/_src.scss index 1896979..1896979 100644 --- a/design/sass/_src.scss +++ b/design/sassold/_src.scss diff --git a/design/sass/_typography.scss b/design/sassold/_typography.scss index b4e3793..b4e3793 100644 --- a/design/sass/_typography.scss +++ b/design/sassold/_typography.scss diff --git a/design/sassold/pdf_gen.scss b/design/sassold/pdf_gen.scss new file mode 100644 index 0000000..b5072cd --- /dev/null +++ b/design/sassold/pdf_gen.scss @@ -0,0 +1,140 @@ +@import "_fonts.scss"; +@import "_mixins.scss"; + +body { + @include fancy_sans; +} +.subhead { + text-align: right; + width: 4cm; + float: right; + @extend %clearfix; + > * { + margin: 0; + font-weight: 400; + } +} +header, .row { + @extend %clearfix; + margin-top: 1cm; +} +.print-box { + width: 49%; + float: left; + > * { + padding: .125cm; + margin: 0; + } + h5, h4 { + @include smcaps; + font-size: 9pt; + line-height: .5; + } + h4 { + margin-top: -10pt; + font-size: 16pt; + line-height: 1.5; + } +} +#bill-from, #bill { + border: none; + width: 47%; + float: left; +} +#bill { + float: right; +} +#bill-to { + width: 47%; + float: right; +} +table { + font-family: "Open Sans", sans-serif; + line-height: 1; + border: 1px solid #ccc; + border-collapse: collapse; + margin: 1cm 0 0 0; + padding: 0; + width: 625px; +} +table caption { + text-align: left; + font-size: 10pt; + text-transform: uppercase; + font-weight: 600; + margin: .5em 0 .75em; + &:after { + content: ":"; + } +} +table tr { + border: 1px solid #ddd; + padding: .35em; +} +table tr.odd { background: #f6f4f4cc;} +thead {display: table-header-group; } +table th, +table td { + padding: .625em .625em .625em 1em; + text-align: left; + border-right: 1px solid #ddd; +} +table td { + white-space: -o-pre-wrap; + word-wrap: break-word; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + font-size: 8pt; +} +table th { + font-size: 7pt; + letter-spacing: .1em; + text-transform: uppercase; + background: #f6f4f4; +} + +table .blank { + white-space: normal; + td { + padding: 1rem; + white-space: normal; + &:last-of-type { + text-align: left; + min-width: 1.2cm; + } + } +} +table .right { + text-align: right; +} +table th a { + text-decoration: none; + position: relative; + span { + position: absolute; + top: -2px; + } +} +.smfield { min-width: 50pt;} +table .total { font-size: 9pt !important;} +.thanks { + margin-top: 40pt; + font-family: times, times new roman; + font-style: italic; + font-weight: 300; + text-align: center; + color: #333; +} + +@page { + @bottom-right{ + @include fancy_sans; + @include smcaps; + content: "Page " counter(page) " of " counter(pages); + font-size: 6pt; + color: #666; + width: 2cm; + } +} + diff --git a/design/sassold/print.scss b/design/sassold/print.scss new file mode 100644 index 0000000..666a797 --- /dev/null +++ b/design/sassold/print.scss @@ -0,0 +1,95 @@ +@import "_fonts.scss"; +@import "_mixins.scss"; + +body { + font-family: $fancy_serif; + background: white; + color: black; + max-width: 660px; + font-size: 11pt; + margin: 0 auto; + line-height: 1.6; +} +.header-wrapper, #breadcrumbs, #page-navigation, .post-subtitle, .comment--form--wrapper, footer { + display: none; +} +.post-source { display: none;} +.highlight { + background: #f7f5f5 !important; +} +code, pre { + background: #f7f5f5 !important; + font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; +} +a { +} +pre { + background: #f7f5f5 !important; + padding: .5cm .25cm; +} +p code { + padding: 0 .25cm; +} +.cluster img, .picwide img, .picfull img { + width: 80%; + margin: 0 auto; + filter: grayscale(100%); +} +.row-2 img { + width: 50%; + margin: 0; + float:left; + filter: grayscale(100%); +} +.post-body p { + font-size: 11pt; +} +.post-body h3 { + font-size: 19pt; +} +.post-body h5 { + font-size: 14pt; +} +.go:before { + content: "$ "; +} +@page { + @bottom-right{ + @include fancy_sans; + @include smcaps; + content: "Page " counter(page) " of " counter(pages); + font-size: 6pt; + color: #666; + width: 2cm; + } +} +main .post--body { + max-width: 660px; + margin: 0; +} +figure { + width: 100%; + margin: 0; +} +figcaption { + @include fancy_sans; + color: #999; + font-size: 9pt; + margin-top: 0; +} +.post-location { + @include fancy_sans; + color: #333; + font-size: 12pt; + a { + text-decoration: none; + display: none; + } + .region { + display: inline; + color: #333 !important; + } +} +.entry-footer, .article-afterward, .jslghtbx { + display: none; +} diff --git a/design/sassold/screenv10.scss b/design/sassold/screenv10.scss new file mode 100644 index 0000000..dadd9ee --- /dev/null +++ b/design/sassold/screenv10.scss @@ -0,0 +1,24 @@ +@import "_fonts.scss"; + + + + +//@import "_mixins.scss"; +//@import "_queries.scss"; +//@import "_global.scss"; +//@import "_pagination.scss"; +//@import "_header.scss"; +//@import "_images.scss"; +//@import "_comments.scss"; +//@import "_leaflet.scss"; +//@import "_map.scss"; +//@import "_forms.scss"; +//@import "_typography.scss"; +//@import "_lttr.scss"; +//@import "_footer.scss"; +//@import "_archives.scss"; +//@import "_details.scss"; +//@import "_src.scss"; +//@import "_resume.scss"; +//@import "_photos.scss"; +//@import "_notes.scss"; diff --git a/design/sass/screenv9.scss b/design/sassold/screenv9.scss index e8666ca..e8666ca 100644 --- a/design/sass/screenv9.scss +++ b/design/sassold/screenv9.scss diff --git a/design/templates/base.html b/design/templates/base.html index 06313ea..3b9dd31 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{%comment%}?{% now "u" %}{%endcomment%}" + href="/media/screenv10.css{%comment%}?{% now "u" %}{%endcomment%}" media="screen">{%endblock%} <link rel="stylesheet" href="/media/print.css" media="print" title="print" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> @@ -23,56 +23,33 @@ {%block extrahead%}{%endblock%} </head> <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}> - <div class="wrapper" id="wrapper"> - <div class="header-wrapper"> - <header class="site-banner"> - <div id="logo"> - <a href="/" title="Home">Luxagraf</a> - <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span> - </div> - <nav> - <ul> - <li><a href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a> & <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a></li> - <!--<li><a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a></li>--> - <li><a href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a></li> - <li><a href="/about" title="About Scott">About</a></li> - </ul> - </nav> - </header> - </div> + <header class="header-wrapper"> + <div id="logo"> + <a class="logo-link" href="/" title="Home">Luxagraf</a> + <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span> + </div> + <nav> + <a class="nav-item" href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a>{%comment%} & <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a> + <a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a>{%endcomment%} + <a class="nav-item" href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a> + <a class="nav-item" href="/about" title="About Scott">About</a> + </nav> + </header> {% block breadcrumbs %}{% endblock %} {% block primary %}{% endblock %} {% block extrabody %}{% endblock %} {% block disclaimer %}{% endblock%} - <footer class="bl"> - <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: - <ul> - <li><a href="/jrnl/feed.xml" title="RSS feed">RSS</a></li> - <li><a href="/newsletter/friends/" title="Luxagraf Email Updates">Email</a></li> - <li><a href="https://www.instagram.com/luxagraf" rel="me" title="luxagraf on Instagram">Instagram</a></li> - </ul> - </ul> - <div class="support">Support luxagraf: - <div class="donate-btn"> - <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> - <input type="hidden" name="cmd" value="_s-xclick"> - <input type="hidden" name="hosted_button_id" value="HYJFZQSBGJ8QQ"> - <input type="submit" name="submit" title="Donate to luxagraf via PayPal"> - </form> - </div> - <div class="donate-btn"> - <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a> - </div> - </div> + <footer class="page-footer"> + <nav> + <a class="nav-item" href="/blogroll" title="Sites that inspire us">Blogroll</a> + <a class="nav-item" href="/contact/" title="contact luxagraf">Contact</a> + <a class="nav-item" href="/jrnl/feed.xml" title="RSS feed">RSS</a> + </nav> <p id="license"> © 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>. </p> </footer> - </div> {% block js %}{% endblock%} <script> <!-- diff --git a/design/templates/comments/list.html b/design/templates/comments/list.html index d3fe441..c320209 100644 --- a/design/templates/comments/list.html +++ b/design/templates/comments/list.html @@ -4,18 +4,18 @@ {% load bleach_tags %} {% load nofollow %} {% load comments %} - <div class="comments--wrapper"> + <div class="comment-wrapper"> {% for comment in comment_list %} - <div id="comment-{{ comment.id }}" class="comment"> + <div id="comment-{{ comment.id }}" class="comment-card-wrapper"> + <div class="comment-card-hed"> <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}}" /> + <img class="comment-card-image" {% 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> - <span class="when">{{comment.submit_date|date:"F d, Y"}} at {{comment.submit_date|date:"g:i a"}}</span> + <span class="comment-card-commenter">{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</span> + <span class="card-smcaps">{{comment.submit_date|date:"F d, Y"}} at {{comment.submit_date|date:"g:i a"}}</span> </div> - <div class="comment--body"> + <div class="comment-card-body"> {% if comment.user_email == "sng@luxagraf.net" %} {{comment.comment|markdown|safe|smartypants}} {%else%} diff --git a/design/templates/lib/breadcrumbs.html b/design/templates/lib/breadcrumbs.html index ac47d5a..025b8e4 100644 --- a/design/templates/lib/breadcrumbs.html +++ b/design/templates/lib/breadcrumbs.html @@ -1,14 +1,14 @@ -<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a> → +<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> + <span class="nav-item" itemprop="item"> + <a href="/" itemprop="name">Home</a> <meta itemprop="position" content="1" /> - </li> - {% for crumb in breadcrumbs %}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - {% if crumb_url %} - <a href="{{crumb_url}}" itemprop="item"><span itemprop="name">{{crumb}}</span></a> - <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />{% else %} - <span itemprop="item"> - <span itemprop="name">{{crumb}}</span> - </span>{% endif %} + </span>{% for crumb in breadcrumbs %}{% if crumb_url %} + <span class="nav-item" itemprop="item"> + <a href="{{crumb_url}}" itemprop="name">{{crumb}}</a> + <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" /> + </span>{% else %} + <span class="nav-item" itemprop="item"> + <span itemprop="name">{{crumb}}</span> <meta itemprop="position" content="2" /> - </li>{%endfor%} - </ol> + </span>{% endif %}{%endfor%} + </nav> diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html index 48b9b99..9e7d8a3 100644 --- a/design/templates/lib/img_cluster.html +++ b/design/templates/lib/img_cluster.html @@ -1,8 +1,6 @@ -{% load get_image_by_size %} -{% if caption or exif %} -<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%} +{% load get_image_by_size %}{% if caption or exif %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%} <a href="{%get_image_by_size image "original"%}" title="view larger image {% if image.photo_credit_source%}(photo by {{image.photo_credit_source}}){%endif%}"> - <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}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.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> + <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}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.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"></a> {% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption> </figure> {% endif %} diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html index 2c9b17b..9f98020 100644 --- a/design/templates/lib/img_picwide.html +++ b/design/templates/lib/img_picwide.html @@ -1,6 +1,4 @@ -{% load get_image_by_size %} -{% if caption or exif or image.photo_credit_source %} -<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%} +{% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%} <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%} " title="view larger image"> <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}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.slug %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}> </a> diff --git a/design/templates/locations/location_detail.html b/design/templates/locationsold/location_detail.html index 334fa9d..334fa9d 100644 --- a/design/templates/locations/location_detail.html +++ b/design/templates/locationsold/location_detail.html diff --git a/design/templates/sightings/ap_detail.html b/design/templates/sightings/ap_detail.html deleted file mode 100644 index 154d7ac..0000000 --- a/design/templates/sightings/ap_detail.html +++ /dev/null @@ -1,59 +0,0 @@ -{% extends 'base.html' %} -{% load typogrify_tags %} -{% block extrahead %} -<style> -#detail-map-canvas { height: 100%;} -</style> -{% endblock %} -{% block bodyid %}class="detail"{%endblock%} -{% block primary %} -<ul class="bl" 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="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Dialogues</span></a>→ </li> - <li><span itemprop="title">{{object.common_name}}</span></li> - </ul> - - <main> - <article> - <header class="tight"> - <h1 class="hed">{{object.common_name}}</h1> - <h2 class="post-subtitle">{{object.scientific_name}}</h2> - <h3 class="post-subtitle-segundo">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3> - </header> - {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%} -{%if recording %} -<div class="audio-figure"> -<audio autoplay="autoplay" controls="controls"> - <source src="/media/{{recording.audio}}" /> -</audio> -<small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">© {{recording.copyright}}</a></small> -</div> -{%endif%} - {% if field_notes %} - <h4>Field Notes</h4>{% for note in field_notes %} - {{note.body_html|safe|smartypants}} - <p class="post-subtitle-segundo">– <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p> - <hr /> - {%endfor%} -{%endif%} - <h5>Seen at</h5> - <ul>{%for sight in sighting %} - <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li> - {%endfor%} -</article> -</main> -{% endblock %} - -{% block js %} -<script src="/media/js/leaflet-master/leaflet-mod.js"></script> -<script src="/media/js/detail.js"></script> -<script type="text/javascript"> -sightings = []; -{% for s in sighting %} -sightings.push(['{{s.latitude}}', '{{s.longitude}}']); -{% endfor %} -window.onload = function() { - createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false; -} -</script> -{% endblock %} |