optimize layout of profile on the mobile terminal.

Siricee · Feb 9, 2022 · 31086e5 · 31086e5
1 parent bfda56e
commit 31086e5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/ChangeLogs.md b/ChangeLogs.md
@@ -1,4 +1,8 @@
 Changelogs
+## 2022.2.9
+
+\[enhancement\] optimize the layout of profile on the mobile terminal.
+
 ## 2021.5.25
 
 \[fix bugs\] fixed issue#98. add rules of scrollbar in body.

diff --git a/layout/_page/profile.ejs b/layout/_page/profile.ejs
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container profile-container">
     <div class="intro">
         <div class="avatar">
             <a href="<%- url_for(theme.nav.Posts) %>"><img src="<%- url_for(theme.avatar) %>"></a>

diff --git a/source/css/_page/profile.styl b/source/css/_page/profile.styl
@@ -1,7 +1,8 @@
 /** Profile **/
-
+.profile-container
+  justify-content center
+  align-items center
 .intro
-  transform translateY(20vh)
   text-align center
   .avatar
     padding 10px

diff --git a/source/css/layout.styl b/source/css/layout.styl
@@ -12,23 +12,28 @@
     width auto
     max-width 1200px
     text-align center
+    padding-left 1em
+    padding-right 1em
     margin 0 auto
     display flex
     justify-content space-between
-
 
 .main 
   flex-grow 1
   flex-shrink 0
   flex-basis auto
-
-.container
-  padding-left 1em
-  padding-right 1em
+  display flex
+  flex-direction column
+  .container
+    padding-left 1em
+    padding-right 1em
+    height 100%
+    display flex
+    flex-direction column
+    flex 1
 
 .footer
   height 4rem
   width 100%
   text-align center
   line-height 4rem
-  padding-top 2em