update css

assets/app.css

@@ -28,8 +28,18 @@
   --hljs-bg: #282828;
 }
 
-html {
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
   height: 100%;
+}
+
+html {
   -webkit-tap-highlight-color: transparent;
   font-size: 8px;
 }
@@ -45,7 +55,6 @@ body {
 
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   padding-right: var(--gap);
   padding-left: var(--gap);
   margin: 0;
@@ -60,6 +69,7 @@ body {
 }
 
 body > * {
+  flex-shrink: 0;
   width: 100%;
   margin-inline: auto;
 }
@@ -77,11 +87,6 @@ body > * {
 
 /* Reset
 -------------------------------------------------- */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
 
 h1,
 h2,
@@ -170,24 +175,24 @@ img {
 
 .logo {
   display: flex;
-  min-width: calc(var(--side) - var(--gap));
-  margin-right: var(--gap);
-  overflow: auto;
+  min-width: var(--side);
+  padding-right: var(--gap);
 }
 
 .site-name {
+  max-width: calc(100% - 2rem - 3rem);
   padding-bottom: 0.3rem;
+  overflow: auto;
   font-size: 3.5rem;
   font-weight: 700;
+  white-space: nowrap;
 }
 
 .btn-theme {
-  align-self: center;
   width: 3rem;
-  height: 3rem;
   margin-left: 2rem;
   cursor: pointer;
-  background: url(./theme.png) left / cover no-repeat;
+  background: url(./theme.png) left / auto 3rem no-repeat;
   transition: background-position 0.4s steps(6);
 }
 
@@ -197,7 +202,6 @@ img {
 
 .menu {
   display: flex;
-  margin-right: var(--gap);
   overflow: auto;
 }
 
@@ -206,33 +210,21 @@ img {
 }
 
 .menu a.active {
-  opacity: 0.4;
+  opacity: 0.44;
 }
 
-.social-icon {
-  width: 3rem;
-  margin-left: 3rem;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.social-icon:first-of-type {
+.social {
+  display: flex;
   margin-left: auto;
 }
 
-.social-icon.twitter {
-  background-image: url('./twitter.svg');
+.social a {
+  width: 3rem;
+  margin-left: 3rem;
+  background: var(--img) center center no-repeat;
 }
 
-.social-icon.github {
-  background-image: url('./github.svg');
-}
-
-.social-icon.instagram {
-  background-image: url('./instagram.svg');
-}
-
-.dark .social-icon {
+.dark .social a {
   filter: invert(1);
 }
 
@@ -256,7 +248,6 @@ img {
   [data-menu='true'] .menu {
     position: absolute;
     inset: auto 0 0;
-    margin-right: 0;
     border-bottom: 1px solid var(--fog);
   }
 }
@@ -265,23 +256,24 @@ img {
  -------------------------------------------------- */
 .main {
   max-width: var(--narrow);
+  min-height: calc(100% - var(--header) - var(--footer));
   padding-top: var(--y-gap);
   padding-bottom: var(--y-gap);
 }
 
-.page-title {
+.main-title {
   margin-bottom: calc(var(--y-gap) - 1rem);
   font-size: 4rem;
   font-weight: 400;
   color: var(--air);
 }
 
-.page-nav {
+.main-nav {
   display: flex;
   margin-top: 5rem;
 }
 
-.page-nav a {
+.main-nav a {
   line-height: 5.5rem;
   color: var(--white);
   background: var(--black);
@@ -289,7 +281,7 @@ img {
   padding-inline: 2.5rem;
 }
 
-.page-nav .next {
+.main-nav .next {
   margin-left: auto;
 }
 
@@ -488,7 +480,8 @@ img {
 .post-content p,
 .post-content ul,
 .post-content ol,
-.post-content dl {
+.post-content dl,
+.post-content details {
   margin-bottom: 3rem;
 }
 
@@ -656,10 +649,10 @@ img {
 /* 404
  -------------------------------------------------- */
 .title-404 {
-  position: absolute;
-  inset: var(--header) 0 calc(var(--footer) * 2);
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
+  padding-bottom: 8rem;
   font-size: 16rem;
 }