summaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/sass/_archives.scss6
-rw-r--r--design/sass/_footer.scss4
-rw-r--r--design/sass/_forms.scss11
-rw-r--r--design/sass/_global.scss12
-rw-r--r--design/sass/_header.scss231
-rw-r--r--design/templates/archives/books.html2
-rw-r--r--design/templates/base.html76
-rw-r--r--design/templates/fieldnotes/fieldnote_list.html3
-rw-r--r--design/templates/jrnl/entry_list.html6
-rw-r--r--design/templates/lttr/subscriber_form.html11
-rw-r--r--design/templates/sightings/sighting_list.html2
11 files changed, 197 insertions, 167 deletions
diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss
index 36dca63..166d9c5 100644
--- a/design/sass/_archives.scss
+++ b/design/sass/_archives.scss
@@ -95,9 +95,11 @@
@include breakpoint(epsilon) {
}
text-align: left;
- h1 {
+ h1, .list-title {
text-align: left;
@include fancy_sans;
+ @include fontsize(36);
+ font-weight: normal;
}
span {
@include fancy_sans;
@@ -117,7 +119,7 @@
color: $link_color;
}
}
- h2 {
+ h2, .list-hed {
font-family: $fancy_serif;
@include fontsize(32);
margin: 0;
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index d5970b0..ed1635c 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -1,4 +1,4 @@
-footer[role="contentinfo"] {
+footer {
margin-top: 5em;
@include breakpoint(gamma) {
max-width: 960;
@@ -44,7 +44,7 @@ footer[role="contentinfo"] {
margin-bottom: 1.5em;
}
}
-.black footer[role="contentinfo"], .dark footer[role="contentinfo"] {
+.black footer, .dark footer {
&:before {
@include light_faded_line_after;
}
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 2511a7d..fd4e6e4 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -51,6 +51,9 @@
}
.flex {
display: flex;
+ .btn, .btn-hollow {
+ flex-basis: 10%;
+ }
}
@@ -95,10 +98,16 @@ input, .textarea-rounded textarea {
background: $link_color;
color: #fff;
border: 1px solid $link_color;
- padding: 7px 9px;
+ 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/sass/_global.scss b/design/sass/_global.scss
index 7ca7b9a..0d81bba 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -175,6 +175,18 @@ h5 {
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;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index d578e21..8070ae7 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -1,74 +1,135 @@
-header[role="banner"] {
+.header-wrapper {
+ @include breakpoint(beta) {
+ border-bottom: 1px #f3efef solid;
+ }
+}
+.site-banner {
+ @extend %clearfix;
margin: 0 auto;
+ @include constrain_wide;
@include smcaps;
- a {
- text-decoration: none;
- }
- h1 {
- margin: -10px 0 0 0;
- padding: 0;
- }
- h1 a {
- display: block;
- margin: 0.25em auto 0 auto;
- font-size: 0.875em;
- font-weight: 300;
- font-family: 'carrois_gothicregular', Helvetica, sans-serif;
- line-height: 0.75em;
- color: $brown;
- }
- h1 a:before {
- content: "home-icon";
- text-indent: -9999em;
- background: url("logo-new-@2x-treeonly.png") center top no-repeat;
- width: 95px;
- height: 75px;
- background-size: 95px;
- background-size: 85px;
- //if sox
- #background: url("img/soxlogo.svg") center top no-repeat;
- #background-size: 60px;
- display: block;
- margin: 0.75em auto 0;
+ #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);
+ }
}
- h2 {
- margin-top: 0.25em;
- font-size: 0.675em;
- font-style: italic;
- font-weight: 300;
- text-align: center;
+ 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, 20);
+ &:visited {
+ color: lighten(#505050, 20);
+ }
+ }
+ 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;
+ &:after {
+ content: "\00b7";
+ color: #999999;
+ padding-left: 0.75em;
+ }
+ &:last-of-type {
+ margin-right: 0;
+ &:after {
+ content: " ";
+ }
+ }
+ }
+ @include breakpoint(beta) {
+ }
}
@include breakpoint(beta) {
- float: left;
+ height: 90px;
position: relative;
- bottom: 0;
- h1, h2 {
+ #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;
+ }
}
- h1 {
- width: 360px;
- }
- h1 a { line-height: 2.5em;}
- h1 a: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;
- }
- h2 {
- 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 {
@@ -83,56 +144,6 @@ header[role="banner"] {
}
-nav[role="navigation"] {
- 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, 20);
- }
- ul {
- @include smcaps;
- @include fancy_sans;
- @include fontsize(13);
- max-width: 100%;
- font-weight: 600;
- margin-top: 0.5em;
- margin-bottom: 0.5em;
- padding: 0;
- @include constrain(85%);
- }
- li {
- display: inline;
- margin: 0 0.25em;
- &:after {
- content: "\00b7";
- color: #999999;
- padding-left: 0.75em;
- }
- }
- li.last {
- margin-right: 0;
- &:after {
- content: " ";
- }
- }
- @include breakpoint(beta) {
- float: right;
- border: none;
- margin: 52px 0 0 0;
- padding: 0;
- ul {
- max-width: 50em;
- }
- }
-}
.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
color: $body_font_light;
}
diff --git a/design/templates/archives/books.html b/design/templates/archives/books.html
index 59bac34..1862563 100644
--- a/design/templates/archives/books.html
+++ b/design/templates/archives/books.html
@@ -30,7 +30,7 @@
<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>
- <nav class="pagination">{% paginate %}
+ <nav aria-label="page navigation" class="pagination">{% paginate %}
</nav>
</main>
{% endblock %}
diff --git a/design/templates/base.html b/design/templates/base.html
index 4c7ddac..495a496 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -23,50 +23,50 @@
<body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
<div class="wrapper" id="wrapper">
<div class="header-wrapper">
- <header role="banner">
- <h1><a id="logo" href="/" title="home">Luxagraf</a></h1>
- <h2>{%block sitesubtitle %}Walk Slowly{% endblock%}</h2>
+ <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="/jrnl/" title="What I've been up to lately">Jrnl</a></li>
+ <li><a href="/essays/" title="longer essays and posts about non-travel related things">Essays</a></li>
+ <li><a href="/newsletter/" title="The 'friends of a long year' newsletter">Lttr</a></li>
+ <!--<li id="guide"><a href="/guides/" title="">Guides</a></li>-->
+ <li><a href="/src/" title="The indie web is awesome, learn how to built it">Src</a></li>
+ <li><a href="/about" title="About Scott">About</a></li>
+ <li><a href="/projects/" title="the less visible portions of the iceberg">More</a></li>
+ </ul>
+ </nav>
</header>
- <nav role="navigation" class="bl">
- <ul>
- <li id="laverdad"><a href="/jrnl/" title="What I've been up to lately">Jrnl</a></li>
- <li id="laverdad"><a href="/essays/" title="">Essays</a></li>
- <li id="lttr"><a href="/newsletter/" title="The 'friends of a long year' newsletter">Lttr</a></li>
- <!--<li id="guide"><a href="/guides/" title="">Guides</a></li>-->
- <li id="src"><a href="/src/" title="The indie web is awesome, learn how to built for it">Src</a></li>
- <li id="about"><a href="/about" title="About Scott">About</a></li>
- <li id="etc" class="last"><a href="/projects/" title="the less visible portions of the iceberg">More</a></li>
- </ul>
- </nav>
</div>
{% block primary %}{% endblock %}
{% block extrabody %}{% endblock %}
- <footer role="contentinfo">
- <nav class="bl">
- <ul>
- <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/" title="Luxagraf Email Updates">Email</a></li>
- <li><a href="https://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">Twitter</a></li>
- <li><a href="https://www.facebook.com/luxagraf" rel="me" title="luxagraf on Facebook">Facebook</a></li>
- </ul>
- </ul>
+ <footer class="bl">
+ <ul>
+ <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/" title="Luxagraf Email Updates">Email</a></li>
+ <li><a href="https://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">Twitter</a></li>
+ <li><a href="https://www.facebook.com/luxagraf" rel="me" title="luxagraf on Facebook">Facebook</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" alt="Donate to luxagraf via PayPal">
- </form>
+ <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>
- <div class="donate-btn">
- <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a>
- </div>
- </div>
- </nav>
<p id="license">
&copy; 2003-{% now "Y" %}
<span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>).
diff --git a/design/templates/fieldnotes/fieldnote_list.html b/design/templates/fieldnotes/fieldnote_list.html
index c667ef3..5c9c808 100644
--- a/design/templates/fieldnotes/fieldnote_list.html
+++ b/design/templates/fieldnotes/fieldnote_list.html
@@ -36,8 +36,7 @@
</li>
{%endif%}{%endfor%}</ul>
</main>
-
- <nav class="pagination">
+ <nav aria-label="page navigation" class="pagination">
{% paginate %}
</nav>
{% endblock %}
diff --git a/design/templates/jrnl/entry_list.html b/design/templates/jrnl/entry_list.html
index 2201e34..5aef750 100644
--- a/design/templates/jrnl/entry_list.html
+++ b/design/templates/jrnl/entry_list.html
@@ -34,11 +34,7 @@
</p>
</article> {% endfor %}
</main>
- <nav class="pagination">
+ <nav aria-label="page navigation" class="pagination">
{% paginate %}
</nav>
{% endblock %}
-
-
-
-{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}
diff --git a/design/templates/lttr/subscriber_form.html b/design/templates/lttr/subscriber_form.html
index 3fb906a..83e1e28 100644
--- a/design/templates/lttr/subscriber_form.html
+++ b/design/templates/lttr/subscriber_form.html
@@ -10,21 +10,22 @@
</ul>
<main role="main" id="essay-archive" class="essay-archive archive-list">
<div class="essay-intro">
- <h2>Join the <em>Friends of a Long Year</em>.</h2>
- <form action="" method="post" class="generic-form flex">{% csrf_token %}
+ <h1 class="list-hed">Join the <em>Friends of a Long Year</em>.</h1>
+ <form action="" method="post" class="generic-form flex newsletter-subscribe">{% csrf_token %}
{% for field in form %}
<fieldset>
{{field.label_tag}}
{{field}}
</fieldset>
- {% if forloop.last %}<input type="submit" name="post" class="submit-post btn btn-hollow" value="Subscribe" />{%endif%}
+ {% if forloop.last %}<input type="submit" name="post" class="btn" value="Subscribe" />{%endif%}
</form>
<small class="alert">{% if field.errors %}{{field.errors}}{% endif %}</small>
{%endfor%}
- <p>Say what? <em>Friends of a Long Year</em> is an infrequent mailing that will keep you up-to-date with luxagraf and offer some thoughts on topics like travel, photography, the natural world, tools, walking and other ephemera. It comes about twice a month, sometimes less, sometimes more. Unsubscribing is easy. It's all self-hosted, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p>
+ <h2 class="subhead">Say what? </h2>
+ <p><em>Friends of a Long Year</em> is an infrequent mailing that will keep you up-to-date with luxagraf and offer some thoughts on topics like travel, photography, the natural world, tools, walking and other ephemera. It comes about twice a month, sometimes less, sometimes more. Unsubscribing is easy. It's all self-hosted, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p>
<p>The name comes from the great 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". This somewhat inscrutable dedication grabbed me, and seemed like the perfect name for this mailing list.</p>
</div>
- <h1 class="topic-hed">Letters</h1>
+ <h3 class="list-title">Letters</h3>
<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>
diff --git a/design/templates/sightings/sighting_list.html b/design/templates/sightings/sighting_list.html
index 3ae33e5..d778cb2 100644
--- a/design/templates/sightings/sighting_list.html
+++ b/design/templates/sightings/sighting_list.html
@@ -30,7 +30,7 @@
</div>
</article> {% endfor %}
</main>
- <nav class="pagination">
+ <nav aria-label="page navigation" class="pagination">
{% paginate %}
</nav>
{% endblock %}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-16 11:38:17 +0000