From 2208b43baea9938645dab5a3efed8284fc1d2d8d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 11 Nov 2019 23:02:38 +0800
Subject: [PATCH] Redesign sidebar for xlarge screens.

Screen width greater than FHD.
---
 _data/label.yml           |  10 +--
 _includes/sidebar.html    |  28 ++++---
 assets/css/_src/main.scss | 156 +++++++++++++++++++++++++++++++++-----
 3 files changed, 157 insertions(+), 37 deletions(-)

diff --git a/_data/label.yml b/_data/label.yml
index a53c2d9..d4305db 100644
--- a/_data/label.yml
+++ b/_data/label.yml
@@ -3,11 +3,11 @@
 # MIT Licensed
 
 tabs:
-  - { name: "Home" }
-  - { name: "Categories", path: tabs, url: categories }
-  - { name: "Tags", path: tabs, url: tags }
-  - { name: "Archives", path: tabs, url: archives }
-  - { name: "About", path: tabs, url: about }
+  - { name: "Home", icon: 'fas fa-home' }
+  - { name: "Categories", path: tabs, url: categories, icon: 'fas fa-stream' }
+  - { name: "Tags", path: tabs, url: tags, icon: 'fas fa-tags' }
+  - { name: "Archives", path: tabs, url: archives, icon: 'fas fa-archive'}
+  - { name: "About", path: tabs, url: about, icon: 'fas fa-info'}
 
 panel:
   lastmod: "Recent Update"
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index ad5a202..b9ceaa1 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -5,8 +5,8 @@
 -->
 
 <div id="nav-wrap">
-  <div id="profile-wrap" class="d-flex justify-content-center">
-    <div id="avatar">
+  <div id="profile-wrap" class="d-flex flex-column">
+    <div id="avatar" class="d-flex justify-content-center">
       <a href="{{ site.baseurl }}/" alt="avatar">
         {% assign avatar = site.avatar %}
         {% if avatar | slice: 0 == '/' %}
@@ -15,13 +15,16 @@
         <img src="{{ avatar }}"></img>
       </a>
     </div>
-  </div>
-  <div id="site-title" class="d-flex justify-content-center align-items-center">
-    <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
-  </div>
-  <div id="site-subtitle" class="font-italic">{{ site.description }}</div>
-  <ul class="nav flex-column">
 
+    <div class="profile-text mt-3">
+      <div id="site-title">
+        <a href="{{ site.baseurl }}/">{{- site.title -}}</a>
+      </div>
+      <div id="site-subtitle" class="font-italic">{{ site.description }}</div>
+    </div>
+  </div>
+
+  <ul class="nav flex-column">
   {% assign page_urls = page.url | split: "/" %}
 
   {% for item in site.data.label.tabs %}
@@ -37,8 +40,9 @@
     <li class="nav-item d-flex justify-content-center
       {% if item.url == page_urls.last or
         item.name == "Home" and page.layout == "home" %}active{% endif %}">
-      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100"><!-- <i class="{{ item.icon }}"></i> -->
-      {{ item.name | upcase }}
+      <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+        <i class="fa-fw {{ item.icon }} ml-3 mr-4 hidden"></i>
+        <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
   {% endfor %}
@@ -47,9 +51,9 @@
 
 </div><!-- #nav-wrap -->
 
-<div class="contact d-flex justify-content-around mt-3">
+<div class="contact d-flex justify-content-around mt-4">
   <a href="https://github.com/{{ site.github.username }}" target="_blank">
-    <i class="fab fa-github"></i>
+    <i class="fab fa-github-alt"></i>
   </a>
   <a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
     <i class="fab fa-twitter"></i>
diff --git a/assets/css/_src/main.scss b/assets/css/_src/main.scss
index cb5168a..293729a 100644
--- a/assets/css/_src/main.scss
+++ b/assets/css/_src/main.scss
@@ -37,6 +37,8 @@ body {
   z-index: 99;
   transition: transform 0.4s ease;
   -webkit-transition: transform 0.4s ease;
+  background: rgb(42, 30, 107);
+  background: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
 }
 
 #sidebar a {
@@ -134,11 +136,11 @@ body {
 }
 
 #profile-wrap {
-  padding-top: 2rem;
-  padding-bottom: 1rem;
+  margin-top: 2rem;
 }
 
-#avatar {
+#avatar>a {
+  display: block;
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
@@ -150,7 +152,7 @@ body {
   transition: border-color 0.35s ease-in-out;
 }
 
-#avatar:hover {
+#avatar:hover>a {
   border-color: #fff;
 }
 
@@ -172,6 +174,10 @@ body {
   transform: scale(1.2);
 }
 
+#site-title {
+  text-align: center;
+}
+
 #site-title a {
   color: #b6b6b6;
   font-weight: 900;
@@ -190,7 +196,7 @@ body {
   color: #828282;
   line-height: 1.2rem;
   word-spacing: 1px;
-  padding: .6rem 1.5rem 2rem 1.5rem;
+  margin: .5rem 1.5rem 2rem 1.5rem;
 }
 
 .sidebar-expand {
@@ -216,7 +222,7 @@ body {
 
 .contact {
   font-size: 1.2rem;
-  padding: 2rem 2.5rem;
+  margin: 2rem 2.5rem;
   flex-shrink: 0;
   -webkit-flex-shrink: 0;
   -ms-flex-shrink: 0;
@@ -236,7 +242,7 @@ body {
   left: 260px; /* same as sidebar width */
   right: 0;
   transition: top 0.2s ease-in-out;
-  z-index: 99;
+  z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
 }
@@ -1477,8 +1483,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
   #site-subtitle {
     font-size: 90%;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
   }
 
   .contact a {
@@ -1541,32 +1547,142 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     right: 4.3rem;
   }
 
+  #search-wrap {
+    width: 22%;
+  }
+
   #search-input {
-    width: 15rem;
+    width: 100%;
     -webkit-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
   }
 
-  #search-input:focus {
-    width: 20rem;
-  }
-
 }
 
-@media all and (min-width: 1441px) {
-  #topbar-main {
-    max-width: 73%;
+@media all and (min-width: 1650px) {
+
+  #main-wrap {
+    margin-left: 350px;
   }
 
   #main>div.row .col-xl-8 {
-    max-width: 60%;
+    padding-left: 0px;
+    padding-right: 1.5rem;
+    margin-left: -4rem;
+    max-width: 65%;
   }
 
   #main-wrap .col-xl-3 {
-    max-width: 18%;
+    max-width: 20%;
+  }
+
+  #topbar {
+    left: 350px;
+  }
+
+  #topbar-main {
+    max-width: 90%;
+  }
+
+  #search-wrap {
+    margin-right: 5%;
+  }
+
+  #sidebar {
+    width: 350px;
+  }
+
+  #profile-wrap {
+    margin-top: 4rem;
+    margin-bottom: 6rem;
+    -ms-flex-direction: column!important;
+    flex-direction: row!important;
+  }
+
+  #avatar {
+    margin-left: 2.5rem;
+  }
+
+  #avatar>a {
+    width: 5rem;
+    height: 5rem;
+  }
+
+  .profile-text {
+    margin-top: 0!important;
+    /* .d-flex */
+    display: -webkit-box!important;
+    display: -ms-flexbox!important;
+    display: flex!important;
+    /* .flex-wrap */
+    -ms-flex-wrap: wrap!important;
+    flex-wrap: wrap!important;
+    /* .align-content-center */
+    -ms-flex-line-pack: center!important;
+    align-content: center!important;
+  }
+
+  #site-title a {
+    letter-spacing: 1px;
+  }
+
+  #site-title, #site-subtitle {
+    text-align: left;
+    margin-left: 1.1rem;
+  }
+
+  #site-subtitle {
+    word-spacing: 0;
+    margin-top: .3rem;
+    margin-bottom: 0;
+  }
+
+  #sidebar ul>li>a {
+    padding-left: 2.5rem;
+    -webkit-box-pack: start!important;
+    -ms-flex-pack: start!important;
+    justify-content: flex-start!important;
+  }
+
+  #sidebar .nav-link>span {
+    letter-spacing: 3px;
+  }
+
+  #sidebar .nav-link>i {
+    border: 1px solid;
+    border-radius: 50%;
+    width: 1.65rem;
+    height: 1.65rem;
+    line-height: 1rem;
+    font-size: .6rem;
+    padding: .5em 0 0 .1em;
+    display: inline-block!important;
+  }
+
+  .contact {
+    margin-left: 2.5rem;
+    margin-right: 4.5rem;
+    font-size: 1.3rem;
+    padding-bottom: 1rem;
+  }
+
+  .contact a {
+    border: 1px solid;
+    border-radius: 50%;
+    font-size: 1rem;
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+  }
+
+  .contact a>i {
+    text-align: center;
+    width: 1.25em;
+    padding-top: .45rem;
   }
 
   footer>div.d-flex {
-    width: 70%;
+    width: 88%;
   }
+
 }