diff options
| -rw-r--r-- | assets/scss/input.css | 22 | ||||
| -rw-r--r-- | assets/scss/tailwind.css | 78 | ||||
| -rw-r--r-- | layouts/404.html | 4 | ||||
| -rw-r--r-- | layouts/_default/search.html | 2 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/index.html | 8 | ||||
| -rw-r--r-- | layouts/partials/metadata.html | 15 | ||||
| -rw-r--r-- | layouts/partials/post.html | 28 | ||||
| -rw-r--r-- | layouts/project/single.html | 2 |
9 files changed, 111 insertions, 50 deletions
diff --git a/assets/scss/input.css b/assets/scss/input.css index f9bf4b2..6e02371 100644 --- a/assets/scss/input.css +++ b/assets/scss/input.css @@ -2,9 +2,8 @@ @tailwind components; @tailwind utilities; -/* HERO */ -#hero { - text-shadow: 2px 2px 3px black; +.baskerville { + font-family: baskerville, serif; } blockquote::before { @@ -18,18 +17,17 @@ blockquote::before { top: -15px; } -.baskerville { - font-family: baskerville, serif; -} -.w3-theme-border { - border-color: #79c753; -} - @layer base { blockquote { - @apply border-l-4 p-6 pb-1 mx-8 relative w3-theme-border baskerville; + @apply border-l-4 p-6 pb-1 mx-8 relative border-lime-500 baskerville; } blockquote p:last-of-type { - @apply text-center uppercase mt-4; + @apply text-center uppercase mt-4 tracking-wide; + } +} + +@layer components { + #hero { + text-shadow: 2px 2px 3px black; } } diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css index d6b07ae..f6418e1 100644 --- a/assets/scss/tailwind.css +++ b/assets/scss/tailwind.css @@ -579,16 +579,22 @@ blockquote { margin-left: 2rem; margin-right: 2rem; border-left-width: 4px; + --tw-border-opacity: 1; + border-color: rgb(132 204 22 / var(--tw-border-opacity, 1)); padding: 1.5rem; padding-bottom: 0.25rem; font-family: baskerville, serif; - border-color: #79c753; } blockquote p:last-of-type { margin-top: 1rem; text-align: center; text-transform: uppercase; + letter-spacing: 0.025em; +} + +#hero { + text-shadow: 2px 2px 3px black; } .absolute { @@ -644,6 +650,11 @@ blockquote p:last-of-type { margin-bottom: 1rem; } +.my-6 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; +} + .ml-2 { margin-left: 0.5rem; } @@ -692,6 +703,16 @@ blockquote p:last-of-type { overflow: hidden; } +.border-y { + border-top-width: 1px; + border-bottom-width: 1px; +} + +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); @@ -728,6 +749,16 @@ blockquote p:last-of-type { padding-right: 0.5rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -743,6 +774,10 @@ blockquote p:last-of-type { padding-bottom: 0.5rem; } +.pb-2 { + padding-bottom: 0.5rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -774,6 +809,11 @@ blockquote p:last-of-type { line-height: 1; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .font-bold { font-weight: 700; } @@ -786,15 +826,23 @@ blockquote p:last-of-type { line-height: 1.5; } +.text-lime-500 { + --tw-text-opacity: 1; + color: rgb(132 204 22 / var(--tw-text-opacity, 1)); +} + +.text-slate-900 { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; } -/* HERO */ - -#hero { - text-shadow: 2px 2px 3px black; +.baskerville { + font-family: baskerville, serif; } blockquote::before { @@ -808,10 +856,22 @@ blockquote::before { top: -15px; } -.baskerville { - font-family: baskerville, serif; +.odd\:bg-white:nth-child(odd) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } -.w3-theme-border { - border-color: #79c753; +.even\:bg-gray-200:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); +} + +@media (min-width: 768px) { + .md\:flex { + display: flex; + } + + .md\:shrink-0 { + flex-shrink: 0; + } } diff --git a/layouts/404.html b/layouts/404.html index 0e11279..2d722bb 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -10,7 +10,7 @@ {{ $query := where (where (where (where site.RegularPages.ByDate.Reverse "Title" "!=" "") "Kind" "in" (slice "page" "section")) "Params.private" "!=" true) "Permalink" "!=" "" }} {{ $count := len $query }} {{ if gt $count 0 }} - <h3 class="lh-title f3 baskerville">{{ T "recent_pages" }}</h3> + <h3 class="lh-title text-2xl baskerville">{{ T "recent_pages" }}</h3> <ul class="list"> {{ range first 10 $query }} <li class="lh-copy grow stripe-dark p-2"> @@ -31,7 +31,7 @@ </ul> {{ end }} <a href="/search" class="color-inherit dim"> - <h3 class="lh-title f3 baskerville"> + <h3 class="lh-title text-2xl baskerville"> <i class="fas fa-magnifying-glass"></i> {{ T "try_search" }} </h3> diff --git a/layouts/_default/search.html b/layouts/_default/search.html index e297398..726ae68 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -29,7 +29,7 @@ <article class="py-2 bt bb b--black-10 search_summary"> <a class="dim near-black search_link" href=""> <time class="fr f6 lh-copy ph4 search_time"></time> - <h3 class="f3 baskerville my-1 lh-title search_title"></h3> + <h3 class="text-2xl baskerville my-1 lh-title search_title"></h3> <div class="f5 lh-copy search_snippet"></div> </a> </article> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 00132c3..66f67ea 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -5,7 +5,7 @@ </h1> {{ with .Params.subtitle }} - <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3> + <h3 class="text-2xl baskerville my-4 p-1">{{ . }}</h3> {{ end }} {{ partial "meta_links.html" . }} diff --git a/layouts/index.html b/layouts/index.html index fd160ce..7f7b5dd 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -5,20 +5,20 @@ {{ define "main" }} {{ range (where .Pages "Type" "in" .Site.Params.mainSections).ByWeight }} {{ if gt (len .Pages) 0 }} - <div class="stripe-dark"> + <div class="odd:bg-white even:bg-gray-200"> <div class="max-w-screen-md mx-auto p-1"> <h2 id="{{ anchorize .Title | safeURL }}" - class="baskerville lh-title f2" + class="baskerville text-4xl my-6 font-bold" > {{ .Title }} </h2> {{ range first 3 .Pages.ByPublishDate.Reverse }} {{ partial "post.html" . }} {{ end }} - <div class="tc p-4"> + <div class="text-center p-4"> <i class="fas fa-angle-right"></i> - <a href="{{ .Type }}" class="f3 near-black" + <a href="{{ .Type }}" class="text-2xl" >{{ T "see_all" | humanize }}</a > </div> diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html index 668ac20..8679be6 100644 --- a/layouts/partials/metadata.html +++ b/layouts/partials/metadata.html @@ -1,13 +1,13 @@ {{ $dateTime := .PublishDate.Format "2006-01-02" }} {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }} -<div class="f6 lh-copy my-0 ph4 py-2"> +<div class="text-sm my-0 px-8 py-2"> {{ T "author_by" }} — {{ range .Params.authors }} {{ $name := . }} {{ $path := printf "/%s/%s" "authors" ( $name | urlize ) }} {{ with $.GetPage $path }} {{ if isset .Params "name" }} - <a class="underline color-inherit" href="{{ .RelPermalink }}"> + <a class="underline" href="{{ .RelPermalink }}"> {{- default $name .Params.name -}} </a> {{ else }} @@ -30,17 +30,18 @@ {{ end }} {{ if eq .Section "post" }} - | {{ .ReadingTime }} + | + {{ .ReadingTime }} {{ i18n "minute_read" }} {{ end }} {{ with .GetTerms "tags" }} | - <a href="/tags" class="w3-text-theme px-1"> + <a href="/tags" class="text-lime-500 px-1"> <i class="fas fa-tags"></i> </a> {{ range . }} - <a class="underline color-inherit" href="{{ .RelPermalink }}"> + <a class="underline" href="{{ .RelPermalink }}"> {{- .Title -}} </a> {{ end }} @@ -48,11 +49,11 @@ {{ with .GetTerms "categories" }} | - <a href="/categories" class="w3-text-theme px-1"> + <a href="/categories" class="text-lime-500 px-1"> <i class="fas fa-folder-open"></i> </a> {{ range . }} - <a class="underline color-inherit" href="{{ .RelPermalink }}"> + <a class="underline" href="{{ .RelPermalink }}"> {{- .Title -}} </a> {{ end }} diff --git a/layouts/partials/post.html b/layouts/partials/post.html index 637381b..a7e62ef 100644 --- a/layouts/partials/post.html +++ b/layouts/partials/post.html @@ -1,7 +1,7 @@ -<article class="py-2 bt bb b--black-10"> +<article class="py-2 border-y border-gray-200"> {{ partial "meta_links.html" . }} - <a class="block dim near-black" href="{{ .RelPermalink }}"> - <div class="cf"> + <a class="block dim text-slate-900" href="{{ .RelPermalink }}"> + <div class="md:flex"> {{ $image := "" }} {{ if (.Resources.ByType "image").GetMatch "featured*" }} {{ $image = (.Resources.ByType "image").GetMatch "*featured*" }} @@ -9,24 +9,26 @@ {{ $image = resources.Get (index .Params.images 0) }} {{ end }} {{ with $image }} - <div class="fl-ns mb4 mb-0-ns pr3-ns"> + <div class="md:shrink-0"> <img - src="{{ if ne .MediaType.SubType "svg" }} + {{ if ne .MediaType.SubType "svg" }} {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }} - {{ $image.RelPermalink }} + width="{{ $image.Width }}" height="{{ $image.Height }}" + src="{{ $image.RelPermalink }}" {{ else }} - {{ $image.RelPermalink }} - {{ end }}" - class="mw-20-ns block mx-auto" + src="{{ $image.RelPermalink }}" + {{ end }} loading="lazy" alt="" /> </div> {{ end }} - <h3 class="f3 baskerville my-1 lh-title">{{ .Title }}</h3> - <div class="f5 lh-copy"> - <!-- {{ .Summary }} --> - {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | safeHTML }} + <div class="px-4"> + <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3> + <div class=""> + <!-- {{ .Summary }} --> + {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | safeHTML }} + </div> </div> </div> </a> diff --git a/layouts/project/single.html b/layouts/project/single.html index c48a2cf..a177a10 100644 --- a/layouts/project/single.html +++ b/layouts/project/single.html @@ -5,7 +5,7 @@ </h2> {{ with .Params.subtitle }} - <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3> + <h3 class="text-2xl baskerville my-4 p-1">{{ . }}</h3> {{ end }} {{ partial "meta_links.html" . }} |