hibby
/
PaperModX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new shortcode: social-quote-tweet; enhance h2, h3 margin

This commit is contained in:
Reorx 2022-05-18 13:46:15 +08:00
parent 570601c2a7
commit 7c253d3fee
3 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/css/common/post-single.css
View File

@ -34,12 +34,14 @@
color: var(--content); color: var(--content);
} }
.post-content h3,
.post-content h4, .post-content h4,
.post-content h5, .post-content h5,
.post-content h6 { .post-content h6 {
margin: 24px 0 16px; margin: 24px 0 16px;
} }
.post-content h3 {
margin: 32px 0 24px;
}
.post-content h1 { .post-content h1 {
margin: 40px auto 32px; margin: 40px auto 32px;
@ -47,7 +49,7 @@
} }
.post-content h2 { .post-content h2 {
margin: 32px auto 24px; margin: 40px auto 32px;
font-size: 32px; font-size: 32px;
} }
@ -243,7 +245,7 @@ h6:hover .anchor {
margin: 0 3px; margin: 0 3px;
padding: 4px 5px; padding: 4px 5px;
border-radius: 3px; border-radius: 3px;
font-size: 16px; font-size: .95em;
} }
.post-content pre code { .post-content pre code {
/* reset inline code */ /* reset inline code */
@ -492,26 +494,47 @@ h6:hover .anchor {
.social-links { .social-links {
margin: calc(var(--content-gap) * 2) 0; margin: calc(var(--content-gap) * 2) 0;
background-color: var(--code-bg); }
border-left: 3px solid var(--twitter-color); .social-quote {
padding: 1em; padding: 1em;
} }
.social-links .title { .social-quote.tweet {
background-color: var(--code-bg);
border-left: 3px solid var(--twitter-color);
}
.social-quote.tweet svg {
color: var(--twitter-color);
}
.social-quote .title {
margin-bottom: .5em; margin-bottom: .5em;
font-weight: 500; font-weight: 500;
} }
.social-quote .title svg {
.social-links blockquote { width: 20px;
font-size: .8em; height: 20px;
margin: 0 0 0 1em; vertical-align: text-bottom;
} }
.social-links blockquote a { .social-quote .title span {
margin-inline-start: .5em;
}
.social-quote p > a {
margin-inline-start: .5em;
}
.social-quote blockquote {
font-size: .8em;
/* reset for .post-content blockquote */
margin: 0 0 0 0;
padding: 0;
border-inline-start: 0;
}
.social-quote blockquote a {
font-weight: 500; font-weight: 500;
color: var(--primary); color: var(--primary);
box-shadow: var(--link-underline-shadow); box-shadow: var(--link-underline-shadow);
transition: var(--link-transition); transition: var(--link-transition);
} }
.social-links blockquote > a:hover { .social-quote blockquote > a:hover {
color: var(--twitter-color); color: var(--twitter-color);
box-shadow: 0 2px 0 var(--twitter-color); box-shadow: 0 2px 0 var(--twitter-color);
} }

2
layouts/partials/social_links.html
View File

@ -1,7 +1,7 @@
<div class="social-links"> <div class="social-links">
{{ with .Params.socialLinks.twitter }} {{ with .Params.socialLinks.twitter }}
{{ if (and .id .user) }} {{ if (and .id .user) }}
<div class="tweet-container"> <div class="tweet social-quote">
<div class="title"> <div class="title">
Discuss on twitter Discuss on twitter
</div> </div>

16
layouts/shortcodes/social-quote-tweet.html Normal file
View File

@ -0,0 +1,16 @@
<div class="tweet social-quote">
<div class="title">
{{ safeHTML (index $.Site.Data.svg "twitter-simple") }}
{{ with .Inner }}<span>{{ . }}</span>{{ end }}
</div>
{{ $user := .Get "user" }}
{{ $id := .Get "id" }}
{{ $dnt := true }}
{{- .Inner -}}{{/* not required, only to not break Obsidian highlight by adding `/` before `>` */}}
{{- $url := printf "https://twitter.com/%v/status/%v" $user $id -}}
{{- $query := querify "url" $url "dnt" $dnt -}}
{{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
{{- $json := getJSON $request -}}
{{- replaceRE "<script.+/script>" "" $json.html | safeHTML -}}
</div>