chore: Merge latest changes from the main branch

sass/main.scss

@@ -197,7 +197,7 @@ article {
 }
 
 .section-title {
-    display: block;
+    display: flex;
     margin: 0;
     margin-top: -0.15em;
     color: var(--text-color-high-contrast);

sass/parts/_code.scss

@@ -45,6 +45,7 @@ code {
 
 a:hover code {
     background-color: inherit;
+    padding-block: 0;
 }
 
 pre {

sass/parts/_header.scss

@@ -98,11 +98,11 @@ header {
     .tag {
         margin-inline-end: 0;
     }
+}
 
-    .separator {
-        margin-inline-end: 0.2rem;
-        user-select: none;
-    }
+.separator {
+    margin-inline-end: 0.2rem;
+    user-select: none;
 }
 
 .language-switcher {

sass/parts/_misc.scss

@@ -48,6 +48,9 @@ ul {
 
 .title-container {
     padding-bottom: 8px;
+    .social {
+        margin-inline-start: 0.5rem;
+    }
 }
 
 .bottom-divider {
@@ -85,30 +88,21 @@ a {
 // External link styles with `external_links_class = "external"`.
 main {
     --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E");
-    a.external:not(:has(img, svg, video, picture, figure)) {
-        display: inline-block;
-        padding-inline-end: 0.9em;
-    }
 
     a.external:not(:has(img, svg, video, picture, figure))::after {
-        -webkit-mask-image: var(--external-link-icon);
-        -webkit-mask-size: 100% 100%;
         display: inline-block;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        mask-image: var(--external-link-icon);
-        mask-size: 100% 100%;
-        margin-inline-start: 0.2em;
-        inset-inline-end: 0;
+        vertical-align: -0.05em;
+        margin-inline-start: 0.1em;
         background-color: currentColor;
         width: 0.8em;
         height: 0.8em;
         content: '';
+        -webkit-mask-image: var(--external-link-icon);
+        -webkit-mask-size: 100% 100%;
     }
 
     &:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after {
-        transform: translateY(-50%) rotate(-90deg);
+        transform: rotate(-90deg);
     }
 
     .meta a.external:not(:has(img, svg, video, picture, figure))::after {

sass/parts/_posts_list.scss

@@ -126,7 +126,7 @@ $padding: 2.5rem;
 
 @media only screen and (max-width: 1100px) {
     .bloglist-container {
-        grid-template-columns: 1fr;
+        display: block;
     }
 
     .pinned-label svg {