diff options
| -rw-r--r-- | assets/css/default.css | 55 | ||||
| -rw-r--r-- | assets/js/index.js | 1 | ||||
| -rw-r--r-- | static/js/timeago.ts | 2 | ||||
| -rw-r--r-- | themes/default/layouts/_default/home.archives.html | 24 |
4 files changed, 74 insertions, 8 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 12d978d..52f2de1 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -2017,6 +2017,58 @@ item-list a:focus span:last-child { color: inherit; } +time-line h1 { + padding: 1rem; +} + +time-line ul { + padding: 0 0.5rem; +} + +time-line li:hover { + background-color: #eee; + background-color: var(--hover-background); +} + +time-line li a { + position: relative; + border-left: 1px solid; + border-color: #ccc; + border-color: var(--border-darker); + padding: 0.5rem; + display: flex; + text-decoration: none; +} + +time-line li a:before { + position: absolute; + background-color: #0149bc; + background-color: var(--link); + border-radius: 100%; + content: ""; + height: 0.85rem; + width: 0.85rem; + top: 0.9rem; + left: -0.425rem; +} + +time-line a:focus time, +time-line a:focus section p { + color: inherit; +} + +time-line time, +time-line section p { + color: #444; + color: var(--fade); +} + +time-line time { + text-transform: uppercase; + white-space: nowrap; + margin: 0 1rem; +} + tag-deck { display: flex; flex-wrap: wrap; @@ -2376,6 +2428,9 @@ nav[hidden] { micro-author micro-header > * { white-space: normal; } + time-line ul { + padding: 0 2rem; + } } @media screen and (max-width: 1080px) { diff --git a/assets/js/index.js b/assets/js/index.js index c2b6fb5..8e5cf48 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -582,6 +582,7 @@ if (update === "viewport" && (offscreen || hidden)) continue; (function(element) { try { + if (element.dataset.type === "disabled") return; const time = new Date(element.dateTime) || new Date(); const interval = (new Date().getTime() - time.getTime()) / 1000; const seconds = Math.round(interval); diff --git a/static/js/timeago.ts b/static/js/timeago.ts index 9cc5370..f794c4a 100644 --- a/static/js/timeago.ts +++ b/static/js/timeago.ts @@ -24,6 +24,8 @@ (function (element) { try { + if (element.dataset.type === "disabled") return; + const time: millisecond = new Date(element.dateTime) || new Date(); const interval: second = ((new Date().getTime() - time.getTime()) / 1000); diff --git a/themes/default/layouts/_default/home.archives.html b/themes/default/layouts/_default/home.archives.html index 3b5c94b..3040c86 100644 --- a/themes/default/layouts/_default/home.archives.html +++ b/themes/default/layouts/_default/home.archives.html @@ -22,10 +22,10 @@ {{- define "middle" -}} <archive-list> - <item-list> + <time-line> {{ range (.Paginator.Pages.GroupByDate "2006") }} {{ range (first 1 .Pages) }} - <h1>{{ .Date | time.Format "2006" }}</h1> + <h1>{{ .Date | time.Format "2006" }}</h1> {{ end }} <ul> {{ range .Pages }} @@ -35,17 +35,25 @@ title="{{ partial "meta-title.html" . }}" href="{{ .Permalink }}#{{ partial "card-id.html" . }}" > - <span> - <code title="{{ .Date | time.Format "Posted: Monday January 2 2006 at 15:04:05 MST" }}">{{ .Date | time.Format "02 Jan" }}</code> - </span> - <span>{{ partial "meta-title.html" . }}</span> - <span>@{{ $author.user }}</span> + <code> + <time + data-type="disabled" + datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}" + title="{{ .Date | time.Format "Posted: Monday January 2 2006 at 15:04:05 MST" }}" + > + {{ .Date | time.Format "02 Jan" }} + </time> + </code> + <section> + <h2>{{ partial "meta-title.html" . }}</h2> + <p>@{{ or .Params.feed.domain $author.user }}</p> + </section> </a> </li> {{ end }} </ul> {{ end }} - </item-list> + </time-line> </archive-list> {{- end -}} |