aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBryan Brattlof <hello@bryanbrattlof.com>2020-05-01 20:49:02 -0400
committerBryan Brattlof <hello@bryanbrattlof.com>2020-05-03 15:12:15 -0400
commit91833cbc97c66ef8f62b023ada370d5ee0d7e15c (patch)
tree3f65255cf147fdfb92aaf21d4a9689bfc6a2d3cf
parent2ec0e323a2f3865b33c60868c4e6f35a3b1904d2 (diff)
downloadbryanbrattlof.com-91833cbc97c66ef8f62b023ada370d5ee0d7e15c.tar.gz
bryanbrattlof.com-91833cbc97c66ef8f62b023ada370d5ee0d7e15c.tar.bz2
refactor index page to support tag links
Allows tags to have links to their individual category index pages
-rw-r--r--stylesheets/index.scss59
-rw-r--r--templates/index.html22
-rw-r--r--templates/sections/list.html28
-rw-r--r--templates/tag.html23
4 files changed, 86 insertions, 46 deletions
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index 398fc9a..d27add0 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -16,61 +16,70 @@ main {
height: 100vh;
min-height: 500px;
- a {
- @extend %flexbox;
- }
-
@include breakpoint-min($max-page-width) {
- padding-top: 6 * $default-spacing;
+ padding-top: 3 * $default-spacing;
}
}
-h1 {
- @extend %flexbox;
+h1, h2 {
+ font-weight: $normal-font-weight;
+ line-height: 1.3;
font-family: $title-font;
color: $title-font-color;
+}
+
+h1 {
+ font-size: 200%;
+}
+
+h2 {
+ @extend %flexbox;
margin: $default-spacing 0 0;
padding: 0;
- font-weight: $normal-font-weight;
- line-height: 1.3;
font-size: 150%;
page-break-after: avoid;
}
span {
+
&.yr {
}
+
&.mo {
/* move the month to the right */
margin-left: auto;
}
-}
-
-
-p {
- @include flex(0, 1, auto);
-
- margin: 0;
&.tag {
- @extend %bold-font-extends;
+ @include order(1);
+ @extend %bold-font-extends;
}
+
&.title {
- }
- &.day {
+ @include order(2);
}
}
-hr {
- @include flex(1, 0, 1rem);
+time {
+ @include order(4);
+}
- border: none;
- border-bottom: 1px dotted $secondary-color;
+ul.article li {
+ @extend %flexbox;
- margin-left: 0.5rem;
- margin-right: 0.5rem;
+ margin: 0;
+ padding: 0;
+
+ &::after {
+ @include flex-grow(1);
+ @include order(3);
+
+ content: "";
+ border-bottom: 1px dotted $secondary-color;
+ margin: -0.5em 0.5em 0.5em;
+ }
}
diff --git a/templates/index.html b/templates/index.html
index 5f83623..9708927 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,26 +15,6 @@
{% endblock meta %}
{% block page %}
-<main>
- {% for yr, yr_group in articles|groupby('date.year')|sort(reverse=True) %}
- {% for mo, mo_group in yr_group|groupby('date.month')|sort(reverse=True) %}
- <h1>
- {%- if loop.first %}<span class="yr">{{yr}}</span>{% endif -%}
- <span class="mo">{{mo_group[0].date|strftime("%B")}}</span>
- </h1>
- {% for article in mo_group %}
- {% set d = article.date|strftime("%-d")|int %}
- {% set suff = 'th' if 11<=d<=13 else {1:'st',2:'nd',3:'rd'}.get(d % 10, 'th') %}
- <a href="{{SITEURL}}/{{article.url}}">
- {% if article.tags %}
- <p class="tag">{{article.tags[0].name}}:</p>&nbsp;
- {% endif %}
- <p class="title">{{article.title}}</p><hr>
- <p class="day">{{d}}{{suff}}</p>
- </a>
- {% endfor %}
- {% endfor %}
- {% endfor %}
-</main>
+<main><h1>&nbsp;</h1>{% include 'sections/list.html' with context %}</main>
{% include 'sections/footer.html' %}
{% endblock page %}
diff --git a/templates/sections/list.html b/templates/sections/list.html
new file mode 100644
index 0000000..f541103
--- /dev/null
+++ b/templates/sections/list.html
@@ -0,0 +1,28 @@
+{% for yr, yr_grp in articles|groupby('date.year')|sort(reverse=True) %}
+ {% for mo, mo_grp in yr_grp|groupby('date.month')|sort(reverse=True) %}
+ <h2>
+ {%- if loop.first %}<span class="yr">{{yr}}</span>{% endif -%}
+ <span class="mo">{{mo_grp[0].date|strftime("%B")}}</span>
+ </h2>
+ <ul class="article">
+ {% for article in mo_grp %}<li>
+ {% for t in article.tags|selectattr('name', 'ne', tag) %}
+ {% if loop.first %}
+ <span class="tag">
+ <a href="{{SITEURL}}/{{t.url}}">{{t.name}}:</a>&nbsp;
+ </span>
+ {% endif %}
+ {% endfor %}
+ <span class="title">
+ <a href="{{SITEURL}}/{{article.url}}">{{article.title}}</a>
+ </span>
+
+ {%- set d = article.date|strftime("%-d")|int %}
+ {% set f = 'th' if 11<=d<=13 else {1:'st',2:'nd',3:'rd'}.get(d%10,'th') %}
+ <time datetime="{{article.date.isoformat()}}">
+ <a href="{{SITEURL}}/{{article.url}}">{{d}}{{f}}</a>
+ </time>
+ </li>
+ {% endfor %}
+ {% endfor %}
+{% endfor %}
diff --git a/templates/tag.html b/templates/tag.html
new file mode 100644
index 0000000..fbab209
--- /dev/null
+++ b/templates/tag.html
@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+
+{% block css %}{{ css_asset('indexes_css') }}{% endblock css %}
+
+{% block meta %}
+{{super()}}
+{% import 'sections/meta.html' as meta with context %}
+{{ meta.title(tag.name + ' &laquo; ' + SITENAME) }}
+{{ meta.description(SITEDESC) }}
+{{ meta.image(TWITTER_IMAGE, SITENAME) }}
+{{ meta.url(SITEURL) }}
+{{ meta.og_site_name(SITENAME) }}
+{{ meta.twitter_card('summary') }}
+{{ meta.twitter_site(TWITTER_HANDLE) }}
+{% endblock meta %}
+
+{% block page %}
+ <main>
+ <h1>#{{tag|lower}}</h1>
+ {% include 'sections/list.html' with context %}
+ </main>
+ {% include 'sections/footer.html' %}
+{% endblock page %}