fix index layout

Author: purple1007

index.html

@@ -41,7 +41,7 @@
       <div class="row position-relative">
         <div class="sidebar-team col-3">
           <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
-          <div class="team-member-list list-group py-5" id="list-tab" role="tablist">
+          <div class="team-member-list list-group" id="list-tab" role="tablist">
 
             <!-- Etrex -->
             <a class="team-member-item text-center mb-4 active"
@@ -89,26 +89,25 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
         </div>
 
         <!-- project folder - content -->
-        <div class="project-folder-content col-9">
+        <div class="project-folder-content col-9 mt-5">
           <div class="row">
 
             <!-- intro -->
-            <div class="col-6 d-flex align-items-center"><span class="h3">[</span>
-              <p class="mb-2">
-                <span class="text-white pl-3 mb-1">OUR MISSION ：</span>
-                <span class="pr-3 text-primary">教你如何 30 天內放棄 JS</span>
+            <div class="col-6 d-flex align-items-center">
+              <span class="h3">[</span>
+              <p class="d-inline-block px-2 mb-1">
+                <span class="text-white">OUR MISSION ：</span>
+                <span class="text-primary">教你如何 30 天內放棄 JS</span>
               </p>
               <span class="h3">]</span>
             </div>
 
-            <div class="col-6 d-flex align-items-center">
-              <p class="text-warning mb-2">
-                <span class="custom-alerts p-2">! WARNING : JavaScript is dangerous !!</span>
-              </p>
+            <div class="col-6 text-right">
+              <p class="custom-alerts py-2 px-3 d-inline-block">! WARNING : JavaScript is dangerous !!</p>
             </div>
           </div>
 
-          <div class="project-folders tab-content" id="nav-tabContent">
+          <div class="project-folders tab-content mt-3" id="nav-tabContent">
 
             <!-- Etrex -->
             <div class="project-folder-item tab-pane fade show active"  id="etrex-folder"  role="tabpanel" aria-labelledby="member-etrex">
@@ -1053,6 +1052,10 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
             </div>
 
           </div>
+
+          <div class="powered-info mt-4">
+            <small class="text-secondary text-right d-block">Powered by 放棄人森ㄉ JS 黑人問號社</small>
+          </div>
         </div>
 
       </div>
@@ -1073,15 +1076,6 @@ <h4 class="text-center font-italic">Not available on mobile devices!!</h4>
       </div>
     </div>
 
-    <footer class="fixed-bottom">
-      <div class="containter">
-        <div class="row">
-          <div class="col">
-            <p class="text-center text-secondary">Powered by 放棄人森ㄉ JS 黑人問號社</p>
-          </div>
-        </div>
-      </div>
-    </footer>
 
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->

stylesheets/_sass/config/varibles.sass

@@ -18,3 +18,8 @@ $dark: $dark-blue !default
 .bg-primary
   background-color: $primary
 
+.custom-alerts
+  background-color: rgba(255, 184, 47, .1)
+  color: $yellow
+  border-radius: 4px
+

stylesheets/_sass/pages/index.sass

@@ -4,13 +4,12 @@
 .rwd-close-mobile
   margin-top: 130px
   .custom-alerts
-    background-color: rgba(255, 184, 47, .1)
-    border-radius: 4px
     display: inline-block
     margin: auto 0
 
 // index main
 .page-home
+  position: relative
   .project-folders
     background-color: #191F33
     border: 1px solid rgba(43, 238, 238, .2)
@@ -70,7 +69,7 @@
       position: absolute
       top: 0
       left: 15px
-      height: 130px
+      height: 110px
       width: calc(100% - 30px)
       z-index: 1
 
@@ -94,6 +93,7 @@
       border-left: 1px solid rgba(43, 238, 238, .2)
       border-right: 1px solid rgba(43, 238, 238, .2)
       box-shadow: 0px 0px 30px #0C1431
+      padding: 70px 0px 50px 0px
 
       .team-member-item
         display: block
@@ -135,11 +135,11 @@
       .active.team-member-item
         opacity: 1
         p
-          color: $yellow
+          color: $primary
           transform: translatey(0px)
           &:before
             bottom: -5px
             opacity: 1
         .team-member-avatar
+            transform: scale(1)
             box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738
-

stylesheets/style.css

@@ -11,6 +11,12 @@
   background-color: #2BEEEE;
 }
 
+.custom-alerts {
+  background-color: rgba(255, 184, 47, 0.1);
+  color: #FFB82F;
+  border-radius: 4px;
+}
+
 body {
   font-family: "Exo 2", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   background-color: #161B2D;
@@ -83,12 +89,13 @@ a:hover {
   margin-top: 130px;
 }
 .rwd-close-mobile .custom-alerts {
-  background-color: rgba(255, 184, 47, 0.1);
-  border-radius: 4px;
   display: inline-block;
   margin: auto 0;
 }
 
+.page-home {
+  position: relative;
+}
 .page-home .project-folders {
   background-color: #191F33;
   border: 1px solid rgba(43, 238, 238, 0.2);
@@ -150,7 +157,7 @@ a:hover {
   position: absolute;
   top: 0;
   left: 15px;
-  height: 130px;
+  height: 110px;
   width: calc(100% - 30px);
   z-index: 1;
 }
@@ -173,6 +180,7 @@ a:hover {
   border-left: 1px solid rgba(43, 238, 238, 0.2);
   border-right: 1px solid rgba(43, 238, 238, 0.2);
   box-shadow: 0px 0px 30px #0C1431;
+  padding: 70px 0px 50px 0px;
 }
 .page-home .sidebar-team .team-member-list .team-member-item {
   display: block;
@@ -220,14 +228,15 @@ a:hover {
   opacity: 1;
 }
 .page-home .sidebar-team .team-member-list .active.team-member-item p {
-  color: #FFB82F;
+  color: #2BEEEE;
   transform: translatey(0px);
 }
 .page-home .sidebar-team .team-member-list .active.team-member-item p:before {
   bottom: -5px;
   opacity: 1;
 }
 .page-home .sidebar-team .team-member-list .active.team-member-item .team-member-avatar {
+  transform: scale(1);
   box-shadow: 0 0 0 4px #ffc107a1, 0 0 0 15px #ffc10738;
 }