improve and normalize microblog formatting

This commit is contained in:
Robert Kaussow 2020-09-17 22:44:42 +02:00
parent ac62a9ed27
commit d4d8437388
No known key found for this signature in database
GPG Key ID: 65362AE74AF98B61
6 changed files with 82 additions and 52 deletions

View File

@ -1,5 +1,2 @@
- BREAKING
- remove `geekblogAnchorLeft`;
for a better spacing left-side anchors were removed
- INTERNAL
- upgrade CI pipeline to use Hugo v0.74.3
- ENHANCEMENT
- improve and normalize microblog formatting

View File

@ -1,21 +1,26 @@
{{ define "main" }}
{{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
{{ range sort .Paginator.Pages }}
{{ range .Paginator.Pages }}
<article class="gdoc-markdown gdoc-post">
<header>
<h1 class="gdoc-post__title">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h1>
<div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
</header>
<div>
{{ .Summary }}
{{ if .Truncated }}
<a class="gdoc-post__readmore" title="Read full post" href="{{ .RelPermalink }}">
Read full post
</a>
<header class="gdoc-post__header">
<h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
<div class="gdoc-post__date">
<svg class="icon date"><use xlink:href="#date"></use></svg>
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
Updated on
{{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }}
</time>
</div>
</header>
<section>
{{ .Summary }}
</section>
{{ if .Truncated }}
<div class="gdoc-post__readmore">
<a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
</div>
{{ end }}
</article>
{{ end }}
{{ end }}

View File

@ -1,9 +1,16 @@
{{ define "main" }}
{{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
<article class="gdoc-markdown gdoc-post">
<header>
<header class="gdoc-post__header">
<h1 class="gdoc-post__title">{{ .Title }}</h1>
<div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
<div class="gdoc-post__date">
<svg class="icon date"><use xlink:href="#date"></use></svg>
<time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
{{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
Updated on
{{ end }}
{{ .Lastmod.Format "Jan 2, 2006" }}
</time>
</div>
</header>
<div>
{{ partial "content" . }}

View File

@ -35,19 +35,12 @@ h6 {
font-weight: $body-font-weight;
display: flex;
align-items: center;
> code {
border-top: 3px solid $gray-300;
font-size: 0.75em !important;
}
}
h4,
h5,
h6 {
> code {
font-size: 0.8rem !important;
}
font-size: 1rem !important;
}
a {
@ -67,6 +60,14 @@ img {
vertical-align: middle;
}
.fake-link:hover {
background-image: linear-gradient($color-link, $color-link);
background-position: 0 100%;
background-size: 100% 1px;
background-repeat: no-repeat;
text-decoration: none;
}
.wrapper {
display: flex;
flex-direction: column;
@ -273,19 +274,37 @@ img {
.gdoc-post {
word-wrap: break-word;
border-top: 1px dashed $gray-600;
padding-bottom: 1em;
padding: $padding-32 0;
line-height: 1.5;
&__title {
&:first-of-type {
padding-top: 0;
}
&__header {
h1 {
margin-top: 0;
}
a,
a:visited {
color: $body-font-color;
text-decoration: none;
}
a:hover {
background: none;
text-decoration: underline;
color: $body-font-color;
}
}
&__date {
font-weight: bold;
margin: 1em 0;
.icon {
font-size: 1.2em;
}
}
&:first-child {
@ -297,16 +316,18 @@ img {
}
&__readmore {
margin-top: 1em;
color: $color-link;
display: block;
margin: 1.5rem 0 2rem 0;
&:visited {
color: $color-link;
a:after {
font-family: GeekdocIcons;
content: "\ea02";
}
&:after {
content: "\1f82a";
a,
a:hover,
a:visited {
color: $color-link;
text-decoration: none !important;
}
}
}

View File

@ -20,24 +20,20 @@
h4,
h5,
h6 {
font-weight: normal;
line-height: 1em;
margin-top: 1.5em;
margin-bottom: $padding-16;
font-weight: 600;
> code {
border-top: 3px solid $gray-300;
font-size: 0.75em !important;
}
}
h4,
h5,
h6 {
font-weight: bolder;
> code {
font-size: 0.8rem !important;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.75em;
}
b,

View File

@ -6,6 +6,10 @@
flex: 1 1 auto;
}
.flex-inline {
display: inline-flex;
}
.flex-even {
flex: 1 1;
}