improve and normalize microblog formatting

uci-hugo-doc
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 - ENHANCEMENT
- remove `geekblogAnchorLeft`; - improve and normalize microblog formatting
for a better spacing left-side anchors were removed
- INTERNAL
- upgrade CI pipeline to use Hugo v0.74.3

View File

@ -1,21 +1,26 @@
{{ define "main" }} {{ define "main" }}
{{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }} {{ range .Paginator.Pages }}
{{ range sort .Paginator.Pages }}
<article class="gdoc-markdown gdoc-post"> <article class="gdoc-markdown gdoc-post">
<header> <header class="gdoc-post__header">
<h1 class="gdoc-post__title"> <h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
<a href="{{ .RelPermalink }}">{{ .Title }}</a> <div class="gdoc-post__date">
</h1> <svg class="icon date"><use xlink:href="#date"></use></svg>
<div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div> <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> </header>
<div> <section>
{{ .Summary }} {{ .Summary }}
{{ if .Truncated }} </section>
<a class="gdoc-post__readmore" title="Read full post" href="{{ .RelPermalink }}"> {{ if .Truncated }}
Read full post <div class="gdoc-post__readmore">
</a> <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
{{ end }}
</div> </div>
{{ end }}
</article> </article>
{{ end }} {{ end }}
{{ end }} {{ end }}

View File

@ -1,9 +1,16 @@
{{ define "main" }} {{ define "main" }}
{{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
<article class="gdoc-markdown gdoc-post"> <article class="gdoc-markdown gdoc-post">
<header> <header class="gdoc-post__header">
<h1 class="gdoc-post__title">{{ .Title }}</h1> <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> </header>
<div> <div>
{{ partial "content" . }} {{ partial "content" . }}

View File

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

View File

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

View File

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