hamburger fix positioning

engagingnewsproject · Sep 5, 2024 · a690af7 · a690af7
1 parent e64e9f7
commit a690af7
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 34 deletions.
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -12,10 +12,11 @@
 
   <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
          content to avoid any CSS collisions with our real content. -->
+         <label for="sidebar-checkbox" class="sidebar-toggle"></label>
+
   <div class="wrap">
     <div class="masthead">
       <div class="container">
-        <label for="sidebar-checkbox" class="sidebar-toggle"></label>
 
         <h3 class="masthead-title">
           {%- if page.path contains '_posts' -%}

diff --git a/_sass/minima/_lanyon.scss b/_sass/minima/_lanyon.scss
@@ -61,19 +61,19 @@ body {
  * Center the page content.
  */
 
-.container {
-  max-width: 28rem;
-}
-@media (min-width: 38em) {
-  .container {
-    max-width: 32rem;
-  }
-}
-@media (min-width: 56em) {
-  .container {
-    max-width: 38rem;
-  }
-}
+// .container {
+//   max-width: 28rem;
+// }
+// @media (min-width: 38em) {
+//   .container {
+//     max-width: 32rem;
+//   }
+// }
+// @media (min-width: 56em) {
+//   .container {
+//     max-width: 38rem;
+//   }
+// }
 
 
 /*

diff --git a/_sass/minima/_syntax.scss b/_sass/minima/_syntax.scss
@@ -36,7 +36,7 @@
 .highlight .nl { color: #99f } /* Name.Label */
 .highlight .nn { color: #0cf; } /* Name.Namespace */
 .highlight .nt { color: #2f6f9f; } /* Name.Tag */
-.highlight .nv { color: #033 } /* Name.Variable */
+.highlight .nv { color: rgb(255, 171, 115) } /* Name.Variable */
 .highlight .ow { color: #000; } /* Operator.Word */
 .highlight .w { color: #bbb } /* Text.Whitespace */
 .highlight .mf { color: #f60 } /* Literal.Number.Float */

diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss
@@ -1,8 +1,8 @@
 // Placeholder to allow defining custom styles that override everything else.
 // (Use `_sass/minima/custom-variables.scss` to override variable defaults)
-@import "minima/poole";
-@import "minima/syntax";
-@import "minima/lanyon";
+@import 'minima/poole';
+@import 'minima/syntax';
+@import 'minima/lanyon';
 
 /* Black Theme */
 body {
@@ -21,7 +21,10 @@ body {
 	color: $link-base-color;
 }
 .sidebar-toggle {
+	top: 1rem;
 	left: 10px;
+	z-index: 9;
+	position: fixed;
 }
 pre {
 	background-color: $border-color-02;
@@ -48,22 +51,30 @@ pre {
 		display: flex;
 		border-bottom: 2px solid $border-color-01;
 	}
-
-	@media screen and (min-width: 1000px) {
-			.container {
-			padding: 1rem;
+	.container {
+		padding: 0.25rem 1rem 0.25rem 4rem;
+		margin-left: 0;
+	}
+	@media (min-width: 38em) {
+		.container {
+			padding: 0.25rem 1rem 0.25rem 4rem;
+		}
+	}
+	@media (min-width: 56em) {
+		.container {
+			padding: 1rem 1rem 1rem 3rem;
 		}
 	}
 }
 .edit {
 	display: none;
-@media screen and (min-width: 1000px) {
-	position: absolute;
-	display: block;
+	@media screen and (min-width: 1000px) {
+		position: absolute;
+		display: block;
 		right: 0;
 		top: 0;
-	padding: 1rem;
-}
+		padding: 1rem;
+	}
 }
 .masthead-title {
 	text-align: left;
@@ -76,15 +87,47 @@ pre {
 }
 
 .container {
-	margin-left: 2rem;
-
 	&.content {
 		@include media-query($on-medium) {
 			margin-top: 6rem;
 			margin-left: auto;
 		}
 	}
 }
+.content {
+	&.container {
+		max-width: unset;
+		// max-width: 28rem;
+	}
+	@media (min-width: 38em) {
+		&.container {
+			max-width: unset;
+			margin-left: 4rem;
+
+		}
+	}
+	@media (min-width: 56em) {
+		&.container {
+			max-width: unset;
+		}
+	}
+}
+.post-content > *:not(.highlighter-rouge) {
+	max-width: 28rem;
+}
+@media (min-width: 38em) {
+	.post-content > *:not(.highlighter-rouge) {
+		max-width: 32rem;
+	}
+}
+@media (min-width: 56em) {
+	.post-content > *:not(.highlighter-rouge) {
+		max-width: 34rem;
+	}
+	.post-content .highlighter-rouge {
+		max-width: 48rem;
+	}
+}
 /* Blog post or page title */
 .page-title,
 .post-title,
@@ -104,9 +147,8 @@ pre {
 	.sidebar-nav-item {
 		color: $lm-brand-color;
 		padding-left: 2rem;
-			&.active {
-	background-color: $subtitle-bk-color;
-
+		&.active {
+			background-color: $subtitle-bk-color;
 		}
 	}
 }
@@ -144,7 +186,6 @@ span.sidebar-nav-item {
 	}
 }
 
-
 ul {
 	&.inline {
 		list-style: none;

diff --git a/_sass/minima/custom-variables.scss b/_sass/minima/custom-variables.scss
@@ -8,4 +8,4 @@ $link-visited-color: #2f81f7;
 $border-color-01: #30363d;
 $border-color-02: #465059;
 $sidebar-background-color: #010409;
-$code-background-color: #2b2b2b;
+$code-background-color: #3b3b3b;