diff options
author | Leonardo Faria <leonardofaria@gmail.com> | 2020-11-03 08:17:08 +0300 |
---|---|---|
committer | Leonardo Faria <leonardofaria@gmail.com> | 2020-11-03 08:17:08 +0300 |
commit | 63e6624cb984a8c74d55948091b846f0632b4a1d (patch) | |
tree | 32feb912d3f10fdfa38f3b4ab148d08d21086d9d | |
parent | 3bc1080f9dad8d291abb4bb1285bfdc918d4829e (diff) |
Refactor styles
-rw-r--r-- | assets/css/site.css | 75 | ||||
-rw-r--r-- | layouts/_default/single.html | 16 | ||||
-rw-r--r-- | layouts/partials/post-summary.html | 20 |
3 files changed, 37 insertions, 74 deletions
diff --git a/assets/css/site.css b/assets/css/site.css index 33c0683..5c89cc8 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -18,6 +18,7 @@ html { background-color: #4fafed; } +/* Home page header - with triangle effect */ .header { position: relative; min-height: 400px; @@ -48,28 +49,18 @@ html { border-right: 0; } -/* .article styles */ +/* + * These styles are needed since the markup is + * created dynamically from MD files + */ + .article { @apply px-5; @apply pb-5; @apply text-gray-600; } -.article__header { - @apply text-right; - @apply pb-6; -} - -.artitle__title { - @apply leading-tight; - @apply mb-4; -} - -.article__content > p:first-of-type { - @apply tracking-tight; - @apply text-2xl; -} - +/* Make images/videos wider than post width, like Medium */ @screen lg { .article__content > p > img, .article__content > video, @@ -82,7 +73,6 @@ html { } .article a { - @apply text-gray-700; @apply transition; @apply duration-300; @apply ease-in-out; @@ -92,8 +82,8 @@ html { @apply underline; } -.article a:hover, -.article a:focus { +.article a:not([class^="text-"]):hover, +.article a:not([class^="text-"]):focus { @apply text-blue-600; } @@ -165,9 +155,8 @@ html { @apply text-xl; } - -.article ol, -.article ul { +.article ol:not(.list-none), +.article ul:not(.list-none) { @apply ml-1; @apply list-inside; list-style-type: initial; @@ -318,47 +307,7 @@ html { @apply text-2xl; } -.author { - @apply my-5; - @apply pt-10; - @apply pb-5; - @apply border-t; - @apply border-gray-400; - @apply flex; - @apply items-center; -} - -.author .author__avatar { - @apply border; - @apply border-gray-400; - @apply p-1; - @apply w-10; - @apply h-10; - @apply rounded-full; - @apply mr-3; -} - -.author .author__bio { - @apply flex-grow; -} - -.author .author__share { - @apply text-white; - @apply text-xs; - @apply font-bold; - @apply rounded-md; - @apply no-underline; - @apply flex; - @apply items-center; - @apply px-3; - @apply py-2; -} - -.author .author__share:hover { - @apply text-white; -} - -.comments, +/* .pagination is created by Hugo */ .pagination { @apply my-5; @apply py-5; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4248f25..42ebd9f 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -5,7 +5,7 @@ <h1><a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a></h1> {{if not .Params.hideMetadata }} - <header class="article__header"> + <header class="text-right pb-6"> {{ $readTime := cond (gt .ReadingTime 1) "minutes" "minute" }} <span class=""> Read in {{ .ReadingTime }} {{ $readTime }} · @@ -16,24 +16,24 @@ </header> {{ end }} - <div class="article__content py-5"> + <div class="article__content"> {{ .Content }} </div> {{if not .Params.hideAuthorBio }} - <section class="author"> + <section class="my-5 pt-10 pb-5 border-t border-gray-400 flex items-center"> {{if or (eq (substr .Site.Params.avatar 0 7) "http://") (eq (substr .Site.Params.avatar 0 8) "https://")}} - <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar}}"> + <img alt="Avatar photo" class="border border-gray-400 p-1 w-10 h-10 rounded-full mr-3" src="{{.Site.Params.avatar}}"> {{ else }} - <img alt="Avatar photo" class="author__avatar" src="{{.Site.Params.avatar | relURL}}"> + <img alt="Avatar photo" class="border border-gray-400 p-1 w-10 h-10 rounded-full mr-3" src="{{.Site.Params.avatar | relURL}}"> {{ end }} - <span class="author__bio">{{ .Site.Params.authorBio | safeHTML }}</span> + <span class="flex-grow">{{ .Site.Params.authorBio | safeHTML }}</span> {{ $title := .Title }} {{ $url := printf "%s" .URL | absLangURL }} {{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }} - <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Params.twitter }}{{ . }}{{ end }}" class="author__share bg-twitter hover:color-white hover:opacity-75"> + <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Params.twitter }}{{ . }}{{ end }}" class="text-white text-xs font-bold rounded-md no-underline flex items-center px-3 py-2 bg-twitter hover:color-white hover:opacity-75 no-underline"> <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <title>Twitter</title> <path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path> @@ -45,7 +45,7 @@ {{ end }} {{if not .Params.hideComments }} - <section class="comments "> + <section class="my-5 py-5 "> <h2>Comments</h2> {{ template "_internal/disqus.html" . }} </section> diff --git a/layouts/partials/post-summary.html b/layouts/partials/post-summary.html index 8fe9d04..3d96551 100644 --- a/layouts/partials/post-summary.html +++ b/layouts/partials/post-summary.html @@ -1,10 +1,24 @@ <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"> + <ol class="md:pt-3 mb-4 list-none"> {{ range where .Pages "Type" "ne" "page" -}} - <li> - <a href="{{ .RelPermalink }}" class="tracking-tight">{{ .Title }}</a> + <li class="mb-8 flex flex-wrap"> + <a href="{{ .RelPermalink }}" class="tracking-tight no-underline flex-grow w-full text-blue-600"> + {{ .Title }} + </a> + + <small class="mt-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> + + {{ 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> </li> {{- end }} </ol> |