Adjust content padding

Adjust header buttons

Author: modularcoder

src/_common/_styles/layout.scss

@@ -39,7 +39,25 @@
 
 .section {
 	display: block;
-	margin-bottom: 30px;
+	margin-bottom: $content-padding-y-md - $card-margin-bottom;
+
+
+	@include media(xl) {
+		margin-bottom: $content-padding-y-xl - $card-margin-bottom;
+	}
+
+	@include media(lg) {
+		margin-bottom: $content-padding-y-lg - $card-margin-bottom;
+	}
+
+	@include media(md) {
+		margin-bottom: $content-padding-y-md - $card-margin-bottom;
+	}
+
+	@include media-down(sm) {
+		margin-bottom: $content-padding-y-sm - $card-margin-bottom;
+	}
+
 
 	&:last-of-type {
 		margin-bottom: 0;

src/_common/card/card.scss

@@ -6,7 +6,7 @@
 		box-shadow: none;
 	}
 
-	margin-bottom: 10px;
+	margin-bottom: $card-margin-bottom;
 	border-radius: 0;
 	border: none;
 

src/_variables.scss

@@ -69,14 +69,17 @@ $dropbown-color-border: fade-out($color-text-light, 0.9) !default;
 $dropdown-link-hover-color-bg: #f5f5f5 !default;
 
 // Content
-$content-padding-x-lg: 50px !default;
-$content-padding-y-lg: 50px !default;
+$content-padding-x-xl: 40px !default;
+$content-padding-y-xl: 35px !default;
 
-$content-padding-x-md: 30px !default;
-$content-padding-y-md: 40px !default;
+$content-padding-x-lg: 35px !default;
+$content-padding-y-lg: 30px !default;
+
+$content-padding-x-md: 20px !default;
+$content-padding-y-md: 25px !default;
 
 $content-padding-x-sm: 20px !default;
-$content-padding-y-sm: 25px !default;
+$content-padding-y-sm: 20px !default;
 
 $content-padding-x-xs: 10px !default;
 $content-padding-y-xs: 15px !default;
@@ -87,6 +90,8 @@ $card-padding-x: 15px !default;
 $card-padding-x-xl: 20px !default;
 $card-padding-x-sm: 10px !default;
 
+$card-margin-bottom: 10px;
+
 // Item list
 $item-list-color-border: lighten($color-divider, 6%) !default;
 

src/app/_common/header/buttons/buttons.hbs

@@ -1,13 +1,20 @@
 <div class="header-block header-block-buttons" >
 	<a href="https://github.com/modularcode/modular-admin-html" 
-		class="btn btn-oval btn-sm rounded-s header-btn">
+		class="btn btn-sm header-btn">
 		<i class="fa fa-github-alt"></i>
-		View on GitHub
+		<span>View on GitHub</span>
 	</a>
+
+	<a href="https://github.com/modularcode/modular-admin-html/stargazers" 
+		class="btn btn-sm header-btn">
+		<i class="fa fa-star"></i>
+		<span>Star Us</span>
+	</a>
+
 	<a href="https://github.com/modularcode/modular-admin-html/releases/download/v{{pkg.version}}/modular-admin-html-{{pkg.version}}.zip" 
-		class="btn btn-oval btn-sm rounded-s header-btn">
+		class="btn btn-sm header-btn">
 		<i class="fa fa-cloud-download"></i>
-		Download .zip
+		<span>Download .zip</span>
 	</a>
 	{{!-- <button type="button" class="btn btn-default btn-sm rounded-s buttons header-btn">
 		<i class="fa fa-share-alt"></i>

src/app/_common/header/buttons/buttons.scss

@@ -9,15 +9,22 @@
 		border: 1px solid lighten($color-text, 10%);
 		color: lighten($color-text, 10%);
 		margin: 0 5px;
+		border-radius: 0.2rem;
+		// border-radius: 25px;
 
 		&:hover,
 		&:focus {
 			border: 1px solid darken($color-text, 10%);
 			color: darken($color-text, 10%);
 		}
-	}
 
-	@include media-down(sm) {
-		display: none;
+
+		@include media-down(sm) {
+			span {
+				display: none;
+			}
+		}
 	}
+
+	
 }

src/app/_common/header/collapse/collapse.scss

@@ -1,8 +1,11 @@
 .header .header-block-collapse {
 
-	// padding-left: 0;
 	padding-right: 5px;
 
+	@include media-down(sm) {
+		width: 155px;
+	}
+
 	.collapse-btn {
 		background: none;
 		border: none;
@@ -17,5 +20,4 @@
 		padding-right: 10px;
 		vertical-align: initial;
 	}
-
 }

src/app/_common/header/header.scss

@@ -9,6 +9,7 @@
 
 	display: flex;
 	align-items: center;
+	justify-content: space-between;
 
 
 	@include media-down(md) {
@@ -25,8 +26,6 @@
 	}
 
 	.header-block {
-		margin-right: 15px;
-		
 		@include media-down(sm) {
 			padding: 5px;
 		}

src/app/_common/header/nav/nav.scss

@@ -1,6 +1,11 @@
 .header .header-block-nav {
 	margin-left: auto;
 	white-space: nowrap;
+	padding-right: 15px;
+
+	@include media-down(sm) {
+		padding-right: 25px;
+	}
 
 	@include clearfix();
 

src/app/app.scss

@@ -19,29 +19,29 @@
 		min-height: 100vh;	
 
 		@include media(xl) {
-			$padding-x: $content-padding-x-lg;
-			$padding-y: $content-padding-y-lg;
+			$padding-x: $content-padding-x-xl;
+			$padding-y: $content-padding-y-xl;
 
 			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
 		}
 
 		@include media(lg) {
-			$padding-x: $content-padding-x-md;
-			$padding-y: $content-padding-y-md;
+			$padding-x: $content-padding-x-lg;
+			$padding-y: $content-padding-y-lg;
 
 			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
 		}
 
 		@include media(md) {
-			$padding-x: $content-padding-x-sm;
-			$padding-y: $content-padding-y-sm;
+			$padding-x: $content-padding-x-md;
+			$padding-y: $content-padding-y-md;
 
 			padding: $header-height + $padding-y $padding-x $footer-height + $padding-y $padding-x;
 		}
 
 		@include media-down(sm) {
-			$padding-x: $content-padding-x-xs;
-			$padding-y: $content-padding-y-xs;
+			$padding-x: $content-padding-x-sm;
+			$padding-y: $content-padding-y-sm;
 
 			padding: $header-height-xs + $padding-y $padding-x $footer-height + $padding-y $padding-x;
 		}