diff options
author | Leonardo Faria <leonardofaria@gmail.com> | 2020-11-05 07:54:46 +0300 |
---|---|---|
committer | Leonardo Faria <leonardofaria@gmail.com> | 2020-11-05 07:54:46 +0300 |
commit | 031623d279f3cfe0a804c4dab5266e819e15f246 (patch) | |
tree | 7260d07de54a55ecdc6b12f1707ec3316b4731b6 | |
parent | c0464c75753840a6581cedcc73b879ef8877f419 (diff) |
Add dots effects; improve single post page
-rw-r--r-- | assets/css/site.css | 13 | ||||
-rw-r--r-- | layouts/_default/archives.html | 4 | ||||
-rw-r--r-- | layouts/_default/single.html | 32 | ||||
-rw-r--r-- | layouts/partials/intro.html | 5 | ||||
-rw-r--r-- | layouts/partials/post-summary.html | 8 |
5 files changed, 46 insertions, 16 deletions
diff --git a/assets/css/site.css b/assets/css/site.css index 5f8fdcb..c5772e8 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -312,10 +312,23 @@ html { @apply my-6; } +.dots { + background-color: transparent; + background-image: radial-gradient(#2C5282 1px, transparent 1px); + background-size: 20px 20px; + width: 140px; + height: 80px; + z-index: -1; + transform: translate(-70px, -50%); + position: absolute; + opacity: 0.3; +} + .intro p, .article__content > p:first-of-type { @apply tracking-tight; @apply text-xl; + @apply text-gray-800; } /* .pagination is created by Hugo */ diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html index 9b8182d..a2fb85e 100644 --- a/layouts/_default/archives.html +++ b/layouts/_default/archives.html @@ -6,7 +6,9 @@ <main class="flex-1 max-w-3xl mt-32 mx-auto text-gray-700 w-full"> <div id="reading-progress-bar" role="presentation" class="fixed z-10 top-0 left-0 h-1 bg-gray-700"></div> <article class="article"> - <h1><a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a></h1> + <h1 class="leading-9"> + <a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a> + </h1> <p class="intro"> I like to talk about: diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 20e0de5..b68facf 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,20 +2,32 @@ <div id="reading-progress-bar" role="presentation" class="fixed z-10 top-0 left-0 h-1 bg-gray-700"></div> <article class="article"> - <h1 class="leading-9"> - <a href="{{.Permalink}}" class="no-underline text-black">{{ .Title }}</a> - </h1> - {{if not .Params.hideMetadata }} - <header class="text-right pb-6"> - {{ $readTime := cond (gt .ReadingTime 1) "minutes" "minute" }} - <span class=""> - Read in {{ .ReadingTime }} {{ $readTime }} · - <time datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}"> + <header class="text-center pt-10 pb-6"> + <small class="text-center text-sm"> + <time class="text-gray-500" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}"> {{ dateFormat "January 2, 2006" (default .Date (.PublishDate)) }} </time> - </span> + + {{ range (.GetTerms "tags") }} + <a href="{{ .Permalink }}" class="inline-flex items-center px-4 py-1 rounded-full no-underline bg-orange-100 text-orange-800 hover:bg-orange-300 ml-4"> + {{ .LinkTitle }} + </a> + {{ end }} + </small> + + <h1 class="leading-9 text-center"> + <a href="{{.Permalink}}" class="no-underline inline-block text-black relative"> + <div class="dots"></div> + {{ .Title }} + </a> + </h1> </header> + + {{ else }} + + <h1 class="leading-9"><a href="{{.Permalink}}" class="no-underline text-black">{{ .Title }}</a></h1> + {{ end }} <div class="article__content"> diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html index 3330400..b024ba0 100644 --- a/layouts/partials/intro.html +++ b/layouts/partials/intro.html @@ -1,6 +1,9 @@ {{ if .Site.Params.intro }} <div class="intro"> - <h1>{{ .Site.Params.headline }}</h1> + <h1 class="relative"> + <div class="dots" aria-hidden="aria-hidden"></div> + {{ .Site.Params.headline }} + </h1> <p>{{ .Site.Params.description }}</p> </div> {{ end }} diff --git a/layouts/partials/post-summary.html b/layouts/partials/post-summary.html index 3d96551..0ec77d0 100644 --- a/layouts/partials/post-summary.html +++ b/layouts/partials/post-summary.html @@ -1,14 +1,14 @@ <div class="flex flex-col md:flex-row border-b border-gray-400"> <h2 class="text-3xl font-bold mb-2 md:w-32 flex-shrink-0 flex-grow-0">{{ .Key }}</h2> - <ol class="md:pt-3 mb-4 list-none"> + <ol class="md:pt-3 mb-4 list-none w-full"> {{ range where .Pages "Type" "ne" "page" -}} - <li class="mb-8 flex flex-wrap"> - <a href="{{ .RelPermalink }}" class="tracking-tight no-underline flex-grow w-full text-blue-600"> + <li class="mb-8 flex flex-col px-4 no-underline rounded-md hover:bg-white transition duration-300 ease-in-out"> + <a href="{{ .RelPermalink }}" class="tracking-tight no-underline text-blue-600"> {{ .Title }} </a> - <small class="mt-2 text-sm"> + <small class="my-2 text-sm"> <time class="text-gray-500" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}"> {{ dateFormat "January 2" (default .Date (.PublishDate)) }} </time> |