improve and normalize microblog formatting
parent
ac62a9ed27
commit
d4d8437388
|
@ -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
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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" . }}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.flex-even {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue