feat(pagination): responsive styles

- removed linkless ellipses between page numbers and next/previous links
- hide first/previous/next/last text labels on smaller views
- hide non active page specific links on even smaller views

blog/content/about.md

@@ -6,4 +6,4 @@ draft: false
 this is a blog for 
 [friends of mineral town](https://friends.of.mineral.town), 
 a record of various objects and projects. any questions and concerns can be 
-directed to steven@mineral.town.
+directed to [steven [at] mineral [dot] town](mailto:steven@mineral.town).

blog/themes/mineral/layouts/partials/footer.html

@@ -1,14 +1,12 @@
 <hr/>
 <div class="row">
-    <ul class="nav">
+    <ul class="nav one-half column">
         <li class="mb-1"><a href="/" class="text-secondary">home</a></li>
         {{ range .Site.Menus.main }}
         <li class="mb-1"><a href="{{ .URL }}" class="text-secondary">{{ .Name }}</a></li>
         {{ end }}
     </ul>
-</div>
-<div class="row">
-    <div class="one-half column" style="margin-top: 2em">
+    <div class="one-half column">
         <p>{{ .Site.Title }} copyright 2021 {{ .Site.Copyright }}</p>
     </div>
 </div>

blog/themes/mineral/layouts/partials/pagination.html

@@ -3,35 +3,30 @@
     {{ $paginator = .Data }}
 {{ end }}
 {{ if gt $paginator.TotalPages 1 }}
-{{ $.Scratch.Set "dot_rendered" false }}
 <nav aria-label="page navigation">
     <ul class="pagination">
     {{ if and (ne $paginator.PageNumber 1) (ne $paginator.PageNumber 2) }}
-        <li class="page-item"><a href="{{ $paginator.First.URL }}" rel="first" class="page-link">« First</a></li>
+        <a href="{{ $paginator.First.URL }}" rel="first" class="page-link"><li class="page-item">«<span class="tablet-hidden"> First</span></li></a>
     {{ end }}
 
     {{ if $paginator.HasPrev  }}
-        <li class="page-item"><a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">‹ Prev</a></li>
+        <a href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link"><li class="page-item">‹<span class="tablet-hidden"> Prev</span></li></a>
     {{ end }}
 
 {{ range $paginator.Pagers }}
     {{ if eq . $paginator }}
-        <li class="page-item active"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
+        <a href="{{ .URL }}" class="page-link"><li class="page-item active">{{ .PageNumber }}</li></a>
     {{ else if and (ge .PageNumber (sub $paginator.PageNumber 2)) (le .PageNumber (add $paginator.PageNumber 2)) }}
-    {{ $.Scratch.Set "dot_rendered" false }}
-        <li class="page-item"><a href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li>
-    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
-    {{ $.Scratch.Set "dot_rendered" true }}
-        <li class="page-item disabled"><a class="page-link">...</a></li>
+        <a href="{{ .URL }}" class="page-link mobile-hidden"><li class="page-item">{{ .PageNumber }}</li></a>
     {{ end }}
 {{ end }}
 
     {{ if $paginator.HasNext }}
-        <li class="page-item"><a href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next ›</a></li>
+        <a href="{{ $paginator.Next.URL }}" rel="next" class="page-link"><li class="page-item"><span class="tablet-hidden">Next </span>›</li></a>
     {{ end }}
 
     {{ if and (ne $paginator.PageNumber $paginator.TotalPages) ((ne $paginator.PageNumber (sub $paginator.TotalPages 1))) }}
-        <li class="page-item"><a href="{{ $paginator.Last.URL }}" rel="last" class="page-link">Last »</a></li>
+        <a href="{{ $paginator.Last.URL }}" rel="last" class="page-link"><li class="page-item"><span class="tablet-hidden">Last </span>»</li></a>
     {{ end }}
     </ul>
 </nav>

blog/themes/mineral/static/css/mineral.css

@@ -7,8 +7,7 @@ article p img {
 .pagination {
     display: flex;
     list-style: none;
-    border-radius: .25rem;
-    margin: 20px 0;
+    margin: 20px -1px;
     padding: 0;
     justify-content: center;
 }
@@ -17,22 +16,42 @@ article p img {
     position: relative;
     display: block;
     padding: 0.5em;
-    margin: 0.25em;
+    margin: 0.15em;
     line-height: 1.25;
-    border: 1px dashed;
+    border: 1px dashed #6c757d;
     background: #fff;
 }
-
 .page-item.active {
     background: #1EAEDB;
 }
-
-.page-item.active .page-link {
+.page-item.active {
     color: #fff;
 }
-
-.page-item.disabled .page-link {
+.page-item.disabled {
     color: #6c757d;
     pointer-events: none;
     cursor: auto;
 }
+
+/* hide some pagination links on tablet/mobile-width views */
+@media (max-width: 420px) {
+    .mobile-hidden {
+        display: none;
+    }
+    .page-item {
+        margin: 0.08em;
+    }
+}
+@media (max-width: 550px) {
+    .tablet-hidden {
+        display: none;
+    }
+}
+
+/* automatically hyphenate long words in summaries on list pages */
+.summary {
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+

blog/themes/mineral/static/css/skeleton.css

@@ -134,12 +134,12 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 2rem;
   font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+h1 { font-size: 2.6rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.5rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.4rem; line-height: 1.6;  letter-spacing: 0; }
 
 /* Larger than phablet */
 @media (min-width: 550px) {