feat(profile): now profile can be sticky

fi3ework#202
Stark-X · Jul 18, 2021 · 19cefd3 · 19cefd3
1 parent 455bc01
commit 19cefd3
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 7 deletions.
diff --git a/_config.yml b/_config.yml
@@ -63,6 +63,8 @@ float_button_theme: default
 read_progress_color: default
 # Blog post banner theme ('default' or 'clean')
 post_banner_theme: default
+# Stick profile info
+profile_sticky: false
 
 # ========== Search ========== #
 algolia_search:

diff --git a/layout/_partial/base-profile.ejs b/layout/_partial/base-profile.ejs
@@ -1,4 +1,4 @@
-<div class="profile">
+<div class="profile <%- theme.profile_sticky ? 'profile-sticky' : '' %>">
     <img class="profile-avatar" alt="avatar" src= <%- url_for(theme.avatar) %> />
     <div class="profile-name"><%- theme.author || config.author %></div>
     <% if(theme.signature && theme.signature.length !== 0) { %>

diff --git a/source/css/style.css b/source/css/style.css
diff --git a/source/css/style.css.map b/source/css/style.css.map
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
@@ -13,7 +13,6 @@ body {
   z-index: 100;
   position: relative;
   background-color: $body-background-color;
-  overflow-x: hidden;
 }
 
 .wrapper {
@@ -51,7 +50,6 @@ body {
   align-items: flex-start;
   justify-content: center;
   width: 100%;
-  overflow: hidden;
   transition: all 0.5s ease-out 0s;
   opacity: 1;
   transform: translate3d(0, 0, 0);

diff --git a/src/scss/_dark.scss b/src/scss/_dark.scss
@@ -229,6 +229,10 @@
   }
 
   // profile
+  .profile-avatar {
+    box-shadow: 0 0 2px 0 #181818;
+  }
+
   .profile-name {
     color: #ddd;
   }

diff --git a/src/scss/_partial/_index-page.scss b/src/scss/_partial/_index-page.scss
@@ -45,7 +45,7 @@
 .abstract-post-meta {
   display: flex;
   justify-content: space-between;
-  padding: 0.5rem 0 0 0;
+  margin-top: 0.5rem;
   font-family: $feature-font-family;
   color: $abstract-post-meta-color;
   height: 1.5rem;

diff --git a/src/scss/_partial/_partial/_profile.scss b/src/scss/_partial/_partial/_profile.scss
@@ -3,7 +3,6 @@
   order: 0;
   vertical-align: top;
   flex-shrink: 0;
-  margin: 4px 0 0 0;
   width: $profile-width;
   font: 1rem $feature-font-family;
   * {
@@ -17,6 +16,11 @@
   }
 }
 
+.profile.profile-sticky {
+  position: sticky;
+  top: $header-height;
+}
+
 .profile-avatar {
   display: block;
   border-radius: 1rem;