diff options
| -rw-r--r-- | assets/css/tailwind.css | 45 | ||||
| -rw-r--r-- | layouts/partials/post.html | 55 | ||||
| -rw-r--r-- | layouts/taxonomy/terms.html | 14 |
3 files changed, 68 insertions, 46 deletions
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 04fd52d..1ea0c9b 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -993,10 +993,6 @@ h6 { float: right; } -.float-left { - float: left; -} - .m-0 { margin: 0px; } @@ -1065,6 +1061,10 @@ h6 { margin-right: 0.5rem; } +.mr-4 { + margin-right: 1rem; +} + .mt-3 { margin-top: 0.75rem; } @@ -1216,10 +1216,19 @@ h6 { border-bottom-width: 1px; } +.border-b-2 { + border-bottom-width: 2px; +} + .border-t { border-top-width: 1px; } +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); +} + .border-current { border-color: currentColor; } @@ -1229,11 +1238,21 @@ h6 { border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); +} + .border-gray-500 { --tw-border-opacity: 1; border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); } +.border-slate-300 { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); @@ -1455,10 +1474,6 @@ h6 { font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } -.leading-none { - line-height: 1; -} - .leading-normal { line-height: 1.5; } @@ -1643,11 +1658,21 @@ blockquote::before { width: fit-content; } - .md\:shrink-0 { - flex-shrink: 0; + .md\:max-w-64 { + max-width: 16rem; } .md\:flex-row { flex-direction: row; } + + .md\:after\:clear-both::after { + content: var(--tw-content); + clear: both; + } + + .md\:after\:block::after { + content: var(--tw-content); + display: block; + } } diff --git a/layouts/partials/post.html b/layouts/partials/post.html index 2e99a7a..8ed64f8 100644 --- a/layouts/partials/post.html +++ b/layouts/partials/post.html @@ -1,35 +1,32 @@ -<article class="py-2 border-y border-gray-200"> +<article class="py-2 border-y border-slate-300"> {{ partial "meta_links.html" . }} <a class="block hover:opacity-50 text-slate-900" href="{{ .RelPermalink }}"> - <div class="md:flex"> - {{ $image := "" }} - {{ if (.Resources.ByType "image").GetMatch "featured*" }} - {{ $image = (.Resources.ByType "image").GetMatch "*featured*" }} - {{ else if resources.Get (index .Params.images 0) }} - {{ $image = resources.Get (index .Params.images 0) }} - {{ end }} - {{ with $image }} - <div class="md:shrink-0"> - <img - {{ if ne .MediaType.SubType "svg" }} - {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }} - width="{{ $image.Width }}" height="{{ $image.Height }}" - src="{{ $image.RelPermalink }}" class="mx-auto" - {{ else }} - src="{{ $image.RelPermalink }}" class="mx-auto max-w-64" - {{ end }} - loading="lazy" - alt="" - /> - </div> - {{ end }} - <div class="px-4"> - <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3> - <div class=""> - {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | plainify }} - </div> + {{ $image := "" }} + {{ if (.Resources.ByType "image").GetMatch "featured*" }} + {{ $image = (.Resources.ByType "image").GetMatch "*featured*" }} + {{ else if resources.Get (index .Params.images 0) }} + {{ $image = resources.Get (index .Params.images 0) }} + {{ end }} + {{ with $image }} + <div class="md:max-w-64 md:float-left mr-4"> + <img + {{ if ne .MediaType.SubType "svg" }} + {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }} + width="{{ $image.Width }}" height="{{ $image.Height }}" + src="{{ $image.RelPermalink }}" class="mx-auto" + {{ else }} + src="{{ $image.RelPermalink }}" class="mx-auto max-w-64" + {{ end }} + loading="lazy" + alt="" + /> </div> - </div> + {{ end }} + <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3> + + <p class="md:after:clear-both md:after:block"> + {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | plainify }} + </p> </a> {{ if .Params.metadata }} {{ partial "metadata.html" . }} diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html index 7f7cef9..4948a6a 100644 --- a/layouts/taxonomy/terms.html +++ b/layouts/taxonomy/terms.html @@ -7,7 +7,7 @@ <section class="mt-4"> {{ range .Data.Terms.ByCount }} <a - class="dib text-black transition hover:scale-105 hover-bg-white-80 hover-near-black p-2 ba m-1 br2" + class="inline-block text-black transition hover:scale-105 p-2 m-1 border border-black rounded" href="#{{ .Name | urlize }}-list" data-tag="{{ .Name | lower }}" > @@ -21,22 +21,22 @@ {{ range .Data.Terms.ByCount }} <div id="{{ .Name | urlize }}-list" - class="p-1 pa2-ns bb" + class="p-1 pa2-ns border-b-2 border-gray-300" data-tag="{{ .Name | lower }}" > - <h4 class="f4 bold mx-auto lh-title"> - <a class="hover:opacity-50 color-inherit" href="{{ .Name | urlize }}"> + <h4 class="mx-auto"> + <a class="hover:opacity-50" href="{{ .Name | urlize }}"> {{ .Name }} ({{ .Pages | len }}) </a> </h4> <ul class="list"> {{ range .Pages.ByDate }} - <li class="lh-copy transition hover:scale-105 stripe-dark p-2"> - <a class="hover:opacity-50 color-inherit block" href="{{ .RelPermalink }}"> + <li class="transition hover:scale-105 even:bg-gray-200 p-2"> + <a class="hover:opacity-50 block" href="{{ .RelPermalink }}"> {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }} <time datetime="{{ .Date.Format "2006-01-02" }}" - class="f6 fw3 fr ml-2" + class="text-sm float-right ml-2" > <i class="far fa-calendar"></i> {{ time.Format $dateFormat .Date }} |