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

assets/css/common/post-single.css

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

layouts/partials/social_links.html

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

layouts/shortcodes/social-quote-tweet.html

@@ -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>