deploy: 18bce0f2b548121e7298c164c463df00e2f9ff78

7 files changed, 78 insertions, 35 deletions

diff --git a/css/partials/footer.css b/css/partials/footer.css
index 7767cafc..e69de29b 100644
--- a/css/partials/footer.css
+++ b/css/partials/footer.css
@@ -1,8 +0,0 @@
-.footer {
-  margin-top: $margin-primary;
-  border: $line-secondary $color-text-primary solid;
-}
-.footer .footer-text {
-  margin-top: $margin-l-0;
-  margin-bottom: $margin-l-0;
-}
diff --git a/css/partials/header.css b/css/partials/header.css
index 01960f3c..6606b3f0 100644
--- a/css/partials/header.css
+++ b/css/partials/header.css
@@ -1,12 +1,24 @@
 .header {
-  border: $line-secondary solid $color-text-primary;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: $color-glass;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid $color-border;
+}
+@supports not (backdrop-filter: blur(12px)) {
+  .header {
+    background: $color-background;
+  }
 }
 .header-inner {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  margin-top: $margin-m-2;
-  margin-bottom: $margin-m-2;
+  height: $header-height;
 }
 .header-inner #menu-btn {
   display: none;
@@ -15,20 +27,24 @@
   flex-grow: 1;
   overflow-x: auto;
 }
+.site-brand-container a {
+  font-weight: $font-weight-semibold;
+  color: $color-text-primary;
+}
 .menu-list {
   text-align: right;
   display: flex;
 }
-.menu-list .menu-item {
-  position: relative;
-  margin-left: $margin-l-0;
-}
 .menu-list:before {
   content: "";
   flex-grow: 1;
 }
+.menu-item {
+  position: relative;
+  margin-left: $margin-l-0;
+}
 .menu-item-active:after {
-  border-bottom: solid $line-secondary;
+  border-bottom: solid $line-secondary $color-accent;
   width: 100%;
 }
 .logo-img {
@@ -40,17 +56,25 @@
 @media (max-width: 688px) {
   .header-inner {
     flex-wrap: wrap;
+    align-items: center;
+    height: $header-height;
+    padding-top: 0;
+    padding-bottom: 0;
   }
   .header-inner #menu-btn {
-    display: block !important;
-    text-align: right;
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-end;
     width: 50%;
-  }
-  .header-inner #menu-btn .icon {
-    float: right;
+    height: 100%;
+    cursor: pointer;
+    color: $color-text-primary;
   }
   .header-inner .site-brand-container {
+    display: flex;
+    align-items: center;
     width: 50%;
+    height: 100%;
   }
   .header-inner .site-nav {
     width: 100%;
@@ -58,14 +82,17 @@
   .header-inner .site-nav .menu-list {
     height: 0;
     overflow: hidden;
+    margin-top: 0;
   }
   .header-inner .site-nav .menu-list .menu-item {
     margin-right: 0;
     margin-left: auto;
-    margin-top: $margin-m-0;
+    margin-top: $margin-s-1;
+    padding: $margin-s-1 0;
   }
   .header-inner .site-nav .active {
-    margin-top: $margin-m-1;
+    margin-top: $margin-s-0;
+    margin-bottom: $margin-s-0;
     height: auto;
     flex-direction: column;
   }
diff --git a/css/partials/paginator.css b/css/partials/paginator.css
index bf9bb2a6..57c51a33 100644
--- a/css/partials/paginator.css
+++ b/css/partials/paginator.css
@@ -1,5 +1,5 @@
 .paginator {
-  margin-top: $margin-primary;
+  margin-top: $margin-l-1;
 }
 .pagination {
   margin-top: $margin-m-1;
@@ -14,7 +14,7 @@
   margin-left: $margin-l-0;
 }
 .pagination .current:after {
-  border-bottom: solid $line-secondary;
+  border-bottom: solid $line-secondary $color-accent;
   width: 100%;
 }
 .pagination .space {
diff --git a/css/partials/post_gallery.css b/css/partials/post_gallery.css
index 663b46fe..d687d94e 100644
--- a/css/partials/post_gallery.css
+++ b/css/partials/post_gallery.css
@@ -6,8 +6,8 @@
 }
 .post-gallery-item {
   display: flex;
-  margin-top: $margin-primary;
-  margin-bottom: $margin-m-1;
+  margin-top: $margin-l-1;
+  margin-bottom: $margin-m-0;
 }
 .post-gallery-item .post-info {
   margin-right: $margin-l-0;
diff --git a/css/partials/post_list.css b/css/partials/post_list.css
index b4771102..3aee41e5 100644
--- a/css/partials/post_list.css
+++ b/css/partials/post_list.css
@@ -1,11 +1,11 @@
 .year-title {
-  margin-top: $margin-primary;
+  margin-top: $margin-l-1;
   margin-bottom: $margin-m-1;
 }
 .post-list-item {
   display: flex;
   flex-wrap: nowrap;
-  margin-top: $margin-m-1;
+  margin-top: $margin-m-0;
   align-items: top;
 }
 .post-list-item .post-title {
diff --git a/css/partials/profile.css b/css/partials/profile.css
index 310500f0..368a309c 100644
--- a/css/partials/profile.css
+++ b/css/partials/profile.css
@@ -1,7 +1,8 @@
 .profile {
-  margin-top: $margin-primary;
+  margin-top: $margin-l-0;
   display: flex;
   flex-direction: row-reverse;
+  align-items: center;
 }
 .profile .profile-content {
   width: 50%;
@@ -13,24 +14,45 @@
 }
 .profile .profile-content .profile-body {
   margin-top: 0;
-  margin-bottom: $margin-l-1;
+  margin-bottom: $margin-m-1;
+  color: $color-text-secondary;
 }
 .profile .profile-content .profile-link {
   margin-top: 0;
-  margin-bottom: $margin-m-1;
+  margin-bottom: $margin-m-0;
+}
+.profile .profile-content .profile-link a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color $transition-duration ease;
+}
+.profile .profile-content .profile-link a:hover {
+  color: $color-accent;
 }
 .profile .profile-image {
   width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.profile .profile-image img {
+  max-width: 100%;
+  max-height: 35vh;
+  object-fit: contain;
 }
 @media (max-width: 480px) {
   .profile {
     flex-wrap: wrap;
+    align-items: flex-start;
   }
   .profile .profile-content {
     width: 100%;
-    margin-top: $margin-m-1;
+    margin-top: $margin-m-0;
   }
   .profile .profile-image {
     width: 100%;
   }
+  .profile .profile-image img {
+    max-height: 25vh;
+  }
 }
diff --git a/css/partials/search.css b/css/partials/search.css
index 506f0cc4..4b3ac735 100644
--- a/css/partials/search.css
+++ b/css/partials/search.css
@@ -20,7 +20,7 @@
   transform: translate(-50%, -50%);
   width: 640px;
   height: 60%;
-  border: $line-secondary solid $color-text-primary;
+  border: 1px solid $color-border;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -54,7 +54,7 @@
   flex-direction: row;
   align-items: center;
   padding: $margin-m-1 $margin-m-1;
-  border-bottom: $line-secondary solid $color-text-primary;
+  border-bottom: 1px solid $color-border;
 }
 .search-header .search-input-container {
   flex-grow: 1;
@@ -77,5 +77,7 @@
   .search-popup-window {
     width: 100%;
     height: 100%;
+    top: $header-height;
+    transform: translate(-50%, 0);
   }
 }