Revert "Add fixed sidebar (#11)"

Fixed sidebar was not tested properly. Commit broke responsiveness on desktop; Made user info unusable on small screens. This reverts commit 3167fb0.
shaansubbaiah · Oct 10, 2020 · e653921 · e653921
1 parent d7b2511
commit e653921
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 47 deletions.
diff --git a/resource/index.css b/resource/index.css
@@ -82,20 +82,12 @@ a {
   display: grid;
   grid-template-columns: 5% 90% 5%;
   grid-template-rows: auto;
-  grid-template-areas:
-    ". sidebar-block ."
-    ". nav-block ."
-    ". repo-block .";
-}
-
-#sidebar-block {
-  grid-area: sidebar-block;
-  display: grid;
-  grid-template-rows: auto;
   grid-template-areas:
     ". profile-image ."
     ". name-block ."
-    ". profile-info .";
+    ". profile-info ."
+    ". nav-block ."
+    ". repo-block .";
 }
 
 #repo-block {
@@ -111,26 +103,11 @@ a {
   #container {
     display: grid;
     grid-template-columns: 5% 30% 60% 5%;
-    grid-template-rows: 200px auto;
+    grid-template-rows: 200px 400px auto;
     grid-template-areas:
-      ". sidebar-block nav-block ."
-      ". sidebar-block repo-block .";
-  }
-
-  #sidebar-block {
-    grid-area: sidebar-block;
-    display: grid;
-    grid-template-rows: 200px 400px;
-    grid-template-areas:
-      ". name-block ."
-      ". profile-image ."
-      ". profile-info .";
-  }
-
-  #sidebar-block {
-    position: fixed;
-    top: 0;
-    margin-left: 5%;
+      ". name-block nav-block ."
+      ". profile-image repo-block ."
+      ". profile-info repo-block .";
   }
 
   #pf-img-container {

diff --git a/resource/index.html b/resource/index.html
@@ -41,28 +41,29 @@
           </svg>
         </button>
       </div>
-      <!-- Navigation Block -->
+      <!-- 
+        Name Block
+        -->
+      <div id="name-block">
+        <!-- Name goes here -->
+      </div>
+      <!-- 
+        Navigation Block
+        -->
       <div id="nav-block">
         <!-- Additional nav links go here -->
-        <span id="projects" class="nav-selected">Projects.</span>
+        <span id="projects" class="nav-selected"> Projects. </span>
       </div>
-      <!-- Sidebar Block -->
-      <div id="sidebar-block">
-        <!-- 
-        Name Block
+      <!-- 
+        Profile Block
         -->
-        <div id="name-block">
-          <!-- Name goes here -->
+      <div id="pf-img-container"></div>
+      <div id="pf-info-container">
+        <div id="pf-info-bio">
+          <!-- Github bio goes here  -->
         </div>
-        <!-- Profile Block -->
-        <div id="pf-img-container"></div>
-        <div id="pf-info-container">
-          <div id="pf-info-bio">
-            <!-- Github bio goes here  -->
-          </div>
-          <div id="pf-info-links">
-            <!-- Github, Location, Company, LinkedIn, Twitter info goes here -->
-          </div>
+        <div id="pf-info-links">
+          <!-- Github, Location, Company, LinkedIn, Twitter info goes here -->
         </div>
       </div>
       <!-- Repository Block -->