v2.2.1 redesign footer

gmkzwwg · Nov 17, 2020 · 063cd2f · 063cd2f
1 parent d52e0b3
commit 063cd2f
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 116 deletions.
diff --git a/_config.yml b/_config.yml
@@ -39,9 +39,20 @@ collections:
     permalink       : /:collection/:title/
     sort_by         : date
 
+# Social Media Accounts
+email               : "just-test" 
+linkedin            : 
+github              : "just-test" 
+gitlab              : 
+website             : 
+twitter             : "just-test"
+facebook            : "just-test"
+instagram           : 
+youtube             : "just-test"
+steam               : "just-test"
+weibo               : "just-test"
+
 # Global Variables
-email               : "[email protected]"
-github              : "akiritsu/pRoJEct-VeXEd"
 statement           : "Designed by DeerRIDER, All Rights Reserved"
 toc_level           : 3
 bgtext              : "ABCFGHKLMNPQRSVWXYZabcdefghijklmnopqrstuvwxyz@#$%&*+-;/[]<>~" # texts randomly displayed in background

diff --git a/pages/404.md b/pages/404.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 permalink: /404
+toc: false
 footer: false
 ---
 

diff --git a/src/_includes/collection_list.html b/src/_includes/collection_list.html
@@ -44,9 +44,8 @@
           <td>
             <ul>
               {% for collection in site.collections %}
-              <h2>{{collection.label}}</h2>
+              <h2 class="h_collection_label">{{collection.label}}</h2>
               {% for post in collection.docs %}
-
               <li>
                 <a
                   class="a_title"

diff --git a/src/_includes/footer.html b/src/_includes/footer.html
@@ -1,14 +1,132 @@
 <div class="footer">
-    <nav class="nav_bar">
-        <ul>
-            <li class="copyright">
-                © 2015 - 2020
-            </li>
-            {% if site.statement %}
-                <li>
-                    {{ site.statement }}
-                </li>
-            {% endif %}
-        </nav>
+  <nav class="nav_bar">
+    <ul class="footer_owner_info">
+      <!-- email -->
+      {% if site.email %}
+      <a class="footer_btn" href="mailto://{{ site.email }}">
+        <i class="fa fa-envelope-square">
+          {% if page.btn_text != false %}
+          <p>Email</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- linkedin -->
+      {% if site.linkedin %}
+      <a
+        class="footer_btn"
+        href="https://www.linkedin.com/in/{{ site.linkedin }}"
+      >
+        <i class="fa fa-linkedin">
+          {% if page.btn_text != false %}
+          <p>LinkedIn</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- github -->
+      {% if site.github %}
+      <a class="footer_btn" href="https://github.com/{{ site.github }}">
+        <i class="fa fa-github">
+          {% if page.btn_text != false %}
+          <p>Github</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- gitlab -->
+      {% if site.gitlab %}
+      <a class="footer_btn" href="https://gitlab.com/{{ site.gitlab }}">
+        <i class="fa fa-gitlab">
+          {% if page.btn_text != false %}
+          <p>Gitlab</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- website -->
+      {% if site.website %}
+      <a class="footer_btn" href="{{ site.website }}">
+        <i class="fa fa-link">
+          {% if page.btn_text != false %}
+          <p>Website</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- twitter -->
+      {% if site.twitter %}
+      <a class="footer_btn" href="https://twitter.com/{{ site.twitter }}">
+        <i class="fa fa-twitter">
+          {% if page.btn_text != false %}
+          <p>Twitter</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- facebook -->
+      {% if site.facebook %}
+      <a class="footer_btn" href="https://www.facebook.com/{{ site.facebook }}">
+        <i class="fa fa-facebook">
+          {% if page.btn_text != false %}
+          <p>Facebook</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- instagram -->
+      {% if site.instagram %}
+      <a class="footer_btn" href="https://instagram.com/{{ site.instagram }}">
+        <i class="fa fa-instagram">
+          {% if page.btn_text != false %}
+          <p>Instagram</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- youtube -->
+      {% if site.youtube %}
+      <a
+        class="footer_btn"
+        href="https://www.youtube.com/user/{{ site.youtube }}"
+      >
+        <i class="fa fa-youtube">
+          {% if page.btn_text != false %}
+          <p>Youtube</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- steam -->
+      {% if site.steam %}
+      <a
+        class="footer_btn"
+        href="https://steamcommunity.com/id/{{ site.steam }}"
+      >
+        <i class="fa fa-steam">
+          {% if page.btn_text != false %}
+          <p>Steam</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
+      <!-- weibo -->
+      {% if site.weibo %}
+      <a class="footer_btn" href="https://weibo.com/u/{{ site.weibo }}">
+        <i class="fa fa-weibo">
+          {% if page.btn_text != false %}
+          <p>Weibo</p>
+          {% endif %}
+        </i>
+      </a>
+      {% endif %}
     </ul>
-</div>
+    <!-- copyright -->
+    <ul class="footer_copyright">
+      <li class="copyright">© 2015 - 2020</li>
+      {% if site.statement %}
+      <li>{{ site.statement }}</li>
+      {% endif %}
+    </ul>
+  </nav>
+</div>
diff --git a/src/_includes/header.html b/src/_includes/header.html
@@ -9,7 +9,7 @@
               <!-- open collection tree -->
               {% if page.collection_list != false %}
               <a class="header_btn" onclick="open_collection_list()">
-                <i class="fa fa-bars">
+                <i class="fa btn_icon fa-bars">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Archives</p>
                   {% endif %}
@@ -19,37 +19,17 @@
               <!-- home -->
               {% if page.home_btn != false %}
               <a class="header_btn" href="{{ site.url }}{{ site.baseurl }}">
-                <i class="fa fa-home">
+                <i class="fa btn_icon fa-home">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Home</p>
                   {% endif %}
                 </i>
               </a>
               {% endif %}
-              <!-- email -->
-              {% if site.email != ""%}
-              <a class="header_btn" href="mailto://{{ site.email }}">
-                <i class="fa fa-envelope-square">
-                  {% if page.btn_text != false %}
-                  <p class="btn_text">Email</p>
-                  {% endif %}
-                </i>
-              </a>
-              {% endif %}
-              <!-- github -->
-              {% if site.github != "" %}
-              <a class="header_btn" href="https://github.com/{{ site.github }}">
-                <i class="fa fa-github">
-                  {% if page.btn_text != false %}
-                  <p class="btn_text">Github</p>
-                  {% endif %}
-                </i>
-              </a>
-              {% endif %}
               <!-- maximize -->
               {% if page.maximize != false %}
               <a class="header_btn" id="mxmz_btn" onclick="toggle_maximize()">
-                <i class="fa fa-window-maximize">
+                <i class="fa btn_icon fa-window-maximize">
                   {% if page.btn_text != false %}
                   <p class="btn_text" id="mxmz_text">Maximize</p>
                   {% endif %}
@@ -59,7 +39,7 @@
               <!-- access token -->
               {% if page.encrypted_text == true %}
               <a class="header_btn" id="acs_btn" onclick="apply_token()">
-                <i class="fa fa-key">
+                <i class="fa btn_icon fa-key">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Token</p>
                   {% endif %}
@@ -78,32 +58,36 @@
               {% if page.toc != false %}
               <!-- scroll up -->
               <a class="header_btn" onclick="scroll_percentage(-0.88)">
-                <i class="fa fa-backward">
+                <i class="fa btn_icon fa-backward">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Prev</p>
                   {% endif %}
                 </i>
               </a>
               <!-- scroll down -->
               <a class="header_btn" onclick="scroll_percentage(0.88)">
-                <i class="fa fa-forward">
+                <i class="fa btn_icon fa-forward">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Next</p>
                   {% endif %}
                 </i>
               </a>
               <!-- popup table of content -->
               <a class="header_btn popup_btn" onclick="toggle_toc()">
-                <i class="fa fa-list">
+                <i class="fa btn_icon fa-list">
                   {% if page.btn_text != false %}
                   <p class="btn_text">Content</p>
                   {% endif %}
                 </i>
               </a>
-              {% else site.title %}
-              <a class="title">{{ site.title }}</a>
-              {% if site.owner != ""%}
-              <a class="owner"> - {{ site.owner }}</a>
+              {% else %}
+              <a class="site_title" href="{{site.url}}{{site.baseurl}}"
+                >{{ site.title }}</a
+              >
+              {% if site.owner != false%} -
+              <a class="site_owner" href="https://github.com/{{site.github}}">
+                {{ site.owner }}</a
+              >
               {% endif %} {% endif %}
             </span>
           </ul>

diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -11,7 +11,7 @@
           {{content}}
           {% include post_list.html %}
         </article>
-          {% if page.footer == true %}
+          {% if page.footer != false %}
           {% include footer.html %}
           {% endif %}
       </div>

diff --git a/src/_sass/abstracts/_variables.scss b/src/_sass/abstracts/_variables.scss
@@ -13,19 +13,20 @@ $font-size-h4: 19px;
 $font-size-h5: 18px;
 $font-size-h6: 17.2px;
 $font-size-primary: 16.8px;
-$font-smaller: 93%;
+$font-smaller: 90%;
 $font-bigger: 108%;
 $blk-duration: 1.2s;
 $blk-timing-function: cubic-bezier(0.98, -0.23, 0.65, 0.7);
 // layout reset
 $header-height: 37px;
-$header-btn-size: 18.9px;
+$header-btn-text-size: 17px;
+$header-btn-icon-size: 18.5px;
 $toc-position: $header-height + 1px;
 // standard border
 $thick-border: 2px solid $color-primary;
-$secondary-border: 1.3px solid rgba($color-primary, 0.85);
-$medium-border: 1px solid rgba($color-primary, 0.73);
-$thin-border: 0.7px solid rgba($color-primary, 0.4);
+$secondary-border: 1.3px solid rgba($color-primary, 0.87);
+$medium-border: 0.9px solid rgba($color-primary, 0.83);
+$thin-border: 0.5px solid rgba($color-primary, 0.6);
 // syntax highlight
 $code-primary: #23ad35;
 $code-background: rgb(17, 15, 15);

diff --git a/src/_sass/components/_collection_list.scss b/src/_sass/components/_collection_list.scss
@@ -1,9 +1,8 @@
 .collection_list {
   top: 15%;
-  left: 2.5%;
+  left: 4%;
   height: 76%;
-  width: 95%;
-  max-width: 1240px;
+  width: 92%;
   position: absolute;
   z-index: 3;
   margin: 0 auto;
@@ -26,7 +25,7 @@
   .collection_name_list {
     top: 28px;
     bottom: 28px;
-    width: 24%;
+    width: 25%;
     height: auto;
     position: absolute;
     margin: 0;
@@ -48,7 +47,7 @@
   .posts_by_cate {
     top: 28px;
     bottom: 28px;
-    left: 24%;
+    left: 25%;
     right: 0;
     width: auto;
     height: auto;
@@ -92,19 +91,24 @@
       width: auto;
     }
   }
-  .a_collection_label {
+  // left part
+  .a_collection_label { 
     padding: 0;
     font-size: $font-size-h1;
     line-height: 150%;
     text-transform: capitalize;
     padding: 5px 0;
     @include simple_link_style;
   }
-
-  .a_title {
+  // right part
+  .a_title { 
     padding: 0;
-    font-size: $font-size-h3;
+    font-size: $font-size-h4;
     line-height: 135%;
     @include simple_link_style;
   }
+  // labels of "all" collections in right part
+  .h_collection_label { 
+    text-transform: capitalize;
+  }
 }