[pull] master from adityatelange:master

assets/css/common/footer.css

@@ -23,27 +23,28 @@
 
 .footer a {
     color: inherit;
-    border-bottom: 1px solid var(--secondary);
-}
-
-.footer a:hover {
-    border-bottom: 1px solid var(--primary);
+    text-underline-offset: 0.25rem;
+    text-decoration: underline;
 }
 
 .top-link {
-    visibility: hidden;
     position: fixed;
-    bottom: 60px;
-    right: 30px;
+    bottom: 4rem;
+    right: 2rem;
     z-index: 99;
     background: var(--tertiary);
-    width: 42px;
-    height: 42px;
+    width: 2.5rem;
+    height: 2.5rem;
     padding: 10px;
     border-radius: 64px;
     transition: visibility .3s, opacity .3s cubic-bezier(0.4, 0, 1, 1);
 }
 
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+}
+
 .top-link,
 .top-link svg {
     filter: drop-shadow(0px 0px 0px var(--theme));

assets/css/common/header.css

@@ -1,4 +1,4 @@
-.nav {
+.header-nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -8,7 +8,7 @@
     line-height: var(--header-height);
 }
 
-.nav a {
+.header-nav a {
     display: block;
 }
 
@@ -19,26 +19,27 @@
 }
 
 .logo {
-    flex-wrap: inherit;
+    align-items: center;
+    column-gap: 0.55rem;
+    flex-wrap: wrap;
 }
 
 .logo a {
     font-size: 24px;
     font-weight: 700;
+    display: flex;
+    align-items: center;
+    column-gap: 0.55rem;
 }
 
-.logo a img, .logo a svg {
-    display: inline;
-    vertical-align: middle;
+.logo a img,
+.logo a svg {
     pointer-events: none;
-    transform: translate(0, -10%);
     border-radius: 6px;
-    margin-inline-end: 8px;
 }
 
 .theme-toggle {
-    font-size: 26px;
-    margin: auto 4px;
+    padding: 0 0.4rem;
 }
 
 [data-theme="dark"] .moon {
@@ -49,14 +50,41 @@
     display: none;
 }
 
+.logo-switches {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: inherit;
+    min-height: stretch;
+    flex-wrap: inherit;
+}
+
+.logo-switches>* {
+    min-height: inherit;
+    align-items: center;
+    display: inline-flex;
+}
+
+.lang-menu * {
+    display: inherit;
+    min-height: inherit;
+    align-items: inherit;
+}
+
+.lang-menu a {
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0 0.4rem;
+    display: inline-flex
+}
+
 .menu {
     list-style: none;
     word-break: keep-all;
     overflow-x: auto;
     white-space: nowrap;
 }
 
-.menu li + li {
+.menu li+li {
     margin-inline-start: var(--gap);
 }
 
@@ -68,25 +96,3 @@
     font-weight: 500;
     border-bottom: 2px solid currentColor;
 }
-
-.lang-switch li,
-.lang-switch ul,
-.logo-switches {
-    display: inline-flex;
-    margin: auto 4px;
-}
-
-.lang-switch {
-    display: flex;
-    flex-wrap: inherit;
-}
-
-.lang-switch a {
-    margin: auto 3px;
-    font-size: 16px;
-    font-weight: 500;
-}
-
-.logo-switches {
-    flex-wrap: inherit;
-}

assets/css/common/md-content.css

@@ -32,15 +32,8 @@
 }
 
 .md-content a {
-    box-shadow: 0 1px 0;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-}
-
-.md-content a code {
-    margin: auto 0;
-    border-radius: 0;
-    box-shadow: 0 -1px 0 var(--primary) inset;
+    text-underline-offset: 0.3rem;
+    text-decoration: underline;
 }
 
 .md-content del {
@@ -115,7 +108,7 @@
 }
 
 .md-content .highlight:not(table) {
-    margin: 10px auto;
+    margin-bottom: var(--content-gap);
     background: var(--code-block-bg) !important;
     border-radius: var(--radius);
     direction: ltr;
@@ -150,13 +143,12 @@
     margin-bottom: 0;
 }
 
-.md-content code {
-    margin: auto 4px;
-    padding: 4px 6px;
+.post-content code {
+    padding: 0.2rem 0.3rem;
     font-size: 0.78em;
     line-height: 1.5;
     background: var(--code-bg);
-    border-radius: 2px;
+    border-radius: 0.2rem;
 }
 
 .md-content pre code {
@@ -171,9 +163,9 @@
 }
 
 .md-content blockquote {
-    margin: 20px 0;
-    padding: 0 14px;
-    border-inline-start: 3px solid var(--primary);
+    margin: 1rem 0;
+    padding-inline-start: 1rem;
+    border-inline-start: 0.3rem solid var(--primary);
 }
 
 .md-content hr {
@@ -188,7 +180,7 @@
 }
 
 .md-content img {
-    border-radius: 4px;
+    border-radius: var(--radius);
     margin: 1rem 0;
 }
 
@@ -213,12 +205,12 @@
     font-weight: normal;
 }
 
-h1:hover .anchor,
-h2:hover .anchor,
-h3:hover .anchor,
-h4:hover .anchor,
-h5:hover .anchor,
-h6:hover .anchor {
+.md-content h1:hover .anchor,
+.md-content h2:hover .anchor,
+.md-content h3:hover .anchor,
+.md-content h4:hover .anchor,
+.md-content h5:hover .anchor,
+.md-content h6:hover .anchor {
     display: inline-flex;
     color: var(--secondary);
     margin-inline-start: 8px;
@@ -227,7 +219,7 @@ h6:hover .anchor {
 }
 
 
-img.in-text {
+.md-content img.in-text {
     display: inline;
     margin: auto;
 }
@@ -238,8 +230,17 @@ mark {
 }
 
 audio {
-    width: stretch;
-    max-width: 100%;
+    display: block;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    height: 2.5rem;
+    margin-bottom: var(--content-gap);
+}
+
+audio::-webkit-media-controls-enclosure {
+    border-radius: 0;
 }
 
 video {

assets/css/common/post-entry.css

@@ -108,6 +108,10 @@
     font-size: 14px;
     margin-bottom: var(--gap);
     text-align: center;
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
 }
 
 .entry-cover img {
@@ -117,5 +121,6 @@
 }
 
 .entry-cover a {
-    box-shadow: 0 1px 0 var(--primary);
+    text-underline-offset: 0.3rem;
+    text-decoration: underline;
 }