Improve styling Blog page for small screens. Make top navbar fixed.

Author: liuyxpp

_layouts/blog.html

@@ -17,9 +17,7 @@
 
 <div id="main" role="main">
 
-<div class="row">
-    {{ content }}
-</div>
+{{ content }}
 
 </div><!-- /#main -->
 

_sass/_bloghome.scss

@@ -0,0 +1,29 @@
+.blog-index-container {
+    padding-top: 70px; /* Space for fixed navbar */
+
+    .container {
+        max-width: 1200px;
+        padding-left: 15px;
+        padding-right: 15px;
+        margin: 0 auto;
+    }
+
+    .row {
+        margin-left: -15px;
+        margin-right: -15px;
+    }
+
+    @media (max-width: 767.98px) {
+        overflow-x: hidden;
+        
+        .container {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        
+        .col-12 {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+    }
+}

_sass/_nav_cleanblog.scss

@@ -8,11 +8,11 @@
 
 .navbar-custom {
 	background: $navbar-bgcolor;
-	position: absolute;
+	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
-	z-index: 3;
+	z-index: 1000;
 	//.sans-serif;
     font-family: $heading-font;
     border-bottom: 1px solid transparent;
@@ -119,42 +119,6 @@
 		transform: translate3d(0, 0, 0);
 		-webkit-backface-visibility: hidden;
 		backface-visibility: hidden;
-		&.is-fixed {
-			/* when the user scrolls down, we hide the header right above the viewport */
-			position: fixed;
-			top: -61px;
-			background-color: $nav-bgcolor;
-			border-bottom: 1px solid darken(white, 10%);
-			-webkit-transition: -webkit-transform 0.3s;
-			-moz-transition: -moz-transform 0.3s;
-			transition: transform 0.3s;
-			.navbar-brand {
-				color: $nav-brand-fix-color;
-				&:hover,
-				&:focus {
-					color: $nav-brand-fix-faded;
-				}
-			}
-			.nav {
-				li {
-					a {
-						color: $nav-fix-color;
-						&:hover,
-						&:focus {
-							color: $nav-fix-faded;
-						}
-					}
-				}
-			}
-		}
-		&.is-visible {
-			/* if the user changes the scrolling direction, we show the header */
-			-webkit-transform: translate3d(0, 100%, 0);
-			-moz-transform: translate3d(0, 100%, 0);
-			-ms-transform: translate3d(0, 100%, 0);
-			-o-transform: translate3d(0, 100%, 0);
-			transform: translate3d(0, 100%, 0);
-		}
 	}
 }
 

_sass/_page.scss

@@ -1,6 +1,6 @@
 body {
 	margin: 0;
-	padding: $navbar-actual-height 0 0 0;
+	padding-top: $navbar-actual-height;
 	width: 100%;
 	background-color: $body-color;
 }

_sass/_sidebar.scss

@@ -0,0 +1,15 @@
+// Sidebar specific styles
+.sidebar {
+  .panel {
+    padding: 0.5rem; // Reduced from 1.25rem
+    
+    ul {
+      padding-left: 0; // Remove default list padding
+      margin-left: 0; // Remove default list margin
+      
+      li {
+        padding-left: 0.5rem; // Add minimal left padding for icons
+      }
+    }
+  }
+}

_sass/_site.scss

@@ -204,3 +204,5 @@ b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input {
 
 // Import home page styles
 @import "home";
+@import "bloghome";
+@import "sidebar";

blog/index.html

@@ -7,13 +7,16 @@
 header-img: images/blog.jpg
 ---
 
-<div class="row">
-    <div class="medium-8 columns t30">
-        {% include pagination.html %}
-    </div>
-
+<div class="blog-index-container">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-8 col-lg-9 t30">
+                {% include pagination.html %}
+            </div>
 
-    <div class="medium-4 columns t30">
-        {% include sidebar.html %}
+            <div class="col-12 col-md-4 col-lg-3 t30 d-none d-md-block">
+                {% include sidebar.html %}
+            </div>
+        </div>
     </div>
 </div>