fix: use sticky property for header

Author: sekthor

assets/css/main.css

@@ -7,15 +7,16 @@ body {
 }
 
 header {
+  top: 0;
   margin: 0;
+  position: sticky;
+  width: 100%;
   padding: .75rem;
+  box-sizing: border-box;
   border-bottom: 1px solid #ddd;
   background-color: hsla(0, 0%, 100%, .8);
   -webkit-backdrop-filter: saturate(110%) blur(5px);
   backdrop-filter: saturate(110%) blur(5px);
-  position: fixed;
-  width: 100%;
-  top: 0;
 }
 
 header ul {
@@ -59,7 +60,7 @@ header a {
 
 main {
   max-width: 765px;
-  margin: 3em auto;
+  margin: auto;
   padding: 1em;
 }
 
@@ -78,8 +79,7 @@ h1 {
 h2, h3, h4 {
   border-bottom: 1px solid darkorange;
   font-weight: normal;
-  padding-top: 48px;
-  margin-top: -24px;
+  scroll-margin-top: 3em;
 }
 
 time {