Merge pull request #32 from recanman/recanman/patch2

fix theme switcher position on mobile

Gemfile.lock

@@ -1,64 +1,68 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
+    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 5.0)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.5)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
+    google-protobuf (3.25.2)
     http_parser.rb (0.8.0)
-    i18n (1.10.0)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    jekyll (4.2.1)
+    jekyll (4.3.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
+      kramdown (~> 2.3, >= 2.3.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.4.0)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (~> 3.0)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
     jekyll-feed (0.16.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-paginate (1.1.0)
-    jekyll-sass-converter (2.1.0)
+    jekyll-sass-converter (3.0.0)
-      sassc (> 2.0.1, < 3.0)
+      sass-embedded (~> 1.54)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.3.1)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
+    liquid (4.0.4)
-    listen (3.7.1)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
+    public_suffix (5.0.4)
-    rb-fsevent (0.11.1)
+    rake (13.1.0)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
+    rexml (3.2.6)
-    rouge (3.28.0)
+    rouge (4.2.0)
     safe_yaml (1.0.5)
-    sassc (2.4.0)
+    sass-embedded (1.69.7)
-      ffi (~> 1.9)
+      google-protobuf (~> 3.25)
-    terminal-table (2.0.0)
+      rake (>= 13.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
+    terminal-table (3.0.2)
-    unicode-display_width (1.8.0)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.5.0)
     webrick (1.7.0)
 
 PLATFORMS

_includes/menu.html

@@ -1,7 +1,7 @@
 <nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
 	<div id="nav-list">
-		<div class="nav-actions">
+		<div id="nav-actions-container" class="nav-actions">
-			<a class="icon" href="/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
+			<a class="icon" href="https://revuo-xmr.com/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
 			<a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
 		</div>
 		<a href="{{ site.baseurl }}">Revuo Weekly</a>

_sass/base.scss

@@ -10,7 +10,19 @@
     box-sizing: border-box;
 }
 
-html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+img {
     margin: 0;
     padding: 0;
     border: 0;
@@ -28,9 +40,11 @@ html {
     background-color: $background-color;
     font-size: 16px;
     scroll-behavior: smooth;
+
     @media (min-width: 940px) {
         font-size: 18px;
     }
+
     line-height: 1.5;
     color: $text-color;
 }
@@ -48,6 +62,7 @@ a {
     -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     transition: all .3s ease;
+
     &:hover,
     &:focus {
         color: #999999;

_sass/custom.scss

@@ -29,7 +29,8 @@ p.table-title {
     padding-top: 0.5em;
 }
 
-.price-table, .moneroversary-table {
+.price-table,
+.moneroversary-table {
     margin: 0 0 1.3334rem 0;
     width: 100%; // adjust to your needs
     background: #45494f;
@@ -38,8 +39,10 @@ p.table-title {
     overflow: hidden;
     border-spacing: 0;
     background-color: var(--block-bg-color);
+
     @media (min-width: $breakpoint-alpha) {
         color: #45494f;
+
         tr.row3 {
             background-color: var(--blog-bg-color-secondary);
         }
@@ -66,6 +69,7 @@ p.table-title {
         &:first-child {
             padding-top: .5em;
         }
+
         &:last-child {
             padding-bottom: .5em;
         }
@@ -85,13 +89,16 @@ p.table-title {
         }
     }
 
-  th, td {
+    th,
+    td {
         text-align: left;
         margin: .5em 1em;
+
         @media (min-width: $breakpoint-alpha) {
             display: table-cell;
             padding: .25em .5em;
             padding: 1em !important;
+
             &:first-child {
                 padding-left: 0;
             }
@@ -103,12 +110,14 @@ p.table-title {
 
     }
 
-  th, td:before {
+    th,
+    td:before {
         color: var(--link-color);
     }
 
     td.green {
         color: #66d166;
+
         @media (min-width: $breakpoint-alpha) {
             color: #51a751;
         }
@@ -116,6 +125,7 @@ p.table-title {
 
     td.red {
         color: #e36f6e;
+
         @media (min-width: $breakpoint-alpha) {
             color: #d83231;
         }
@@ -125,11 +135,14 @@ p.table-title {
 
 .moneroversary-table {
     margin: 1.3334rem 0 1.3334rem 0;
+
     @media (max-width: $breakpoint-alpha) {
         background: #f0f0f0;
         color: #45494f;
     }
-    th, td:before {
+
+    th,
+    td:before {
         @media (max-width: $breakpoint-alpha) {
             color: #45494f;
         }
@@ -153,17 +166,20 @@ p.table-title {
     background-color: #db8b55;
 }
 
-.content ul, .content ol {
+.content ul,
+.content ol {
     line-height: 1.9;
 }
 
-.newsbyte, .event {
+.newsbyte,
+.event {
     padding: 1rem;
     background-color: var(--block-bg-color);
     margin-top: 1rem;
 }
 
-.newsbyte:first-of-type, .event:first-of-type {
+.newsbyte:first-of-type,
+.event:first-of-type {
     margin-top: 0;
 }
 
@@ -176,16 +192,19 @@ p.table-title {
     background-color: #d5d5d5;
 }
 
-.newsbyte h4, h4.stat {
+.newsbyte h4,
+h4.stat {
     font-size: 18px;
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     font-weight: 700;
+
     @media (max-width: 480px) {
         font-size: 16px;
     }
 }
 
-.newsbyte p, .event p {
+.newsbyte p,
+.event p {
     margin-bottom: 0;
 }
 
@@ -266,7 +285,8 @@ img.fob-img {
     margin-left: auto;
     margin-right: auto;
     width: 8rem;
-    background-color: rgba(0, 0, 0, 0.75);;
+    background-color: rgba(0, 0, 0, 0.75);
+    ;
     padding: 1rem;
 }
 
@@ -285,7 +305,8 @@ p.text-lead {
     margin-bottom: 0;
 }
 
-#post-page img.img-lead, #post-page p.text-lead {
+#post-page img.img-lead,
+#post-page p.text-lead {
     display: none;
 }
 
@@ -324,6 +345,7 @@ img.localmonero {
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     flex-basis: auto;
+
     @media (max-width: 520px) {
         -ms-flex-preferred-size: 100%;
         flex-basis: 100%;
@@ -334,6 +356,7 @@ img.localmonero {
 img.dvchain {
     height: 9rem;
     margin-left: 3rem;
+
     @media (max-width: 520px) {
         margin-left: auto;
         margin-top: 1rem;
@@ -353,7 +376,9 @@ img.dvchain {
     background-color: #f0f0f0;
 }
 
-#periodical .revuo-classes a.pd, #wrap.periodical .revuo-classes a.pd:active, #wrap.periodical .revuo-classes a.pd:focus {
+#periodical .revuo-classes a.pd,
+#wrap.periodical .revuo-classes a.pd:active,
+#wrap.periodical .revuo-classes a.pd:focus {
     background-color: #f0f0f0;
 }
 

_sass/layout.scss

@@ -1,13 +1,15 @@
 /* -- General Layout -- */
 
 /* Required for footer to stick to the bottom */
-html, body {
+html,
+body {
   height: 100%;
 }
 
 /* Navigation */
 
-#nav, #nav-left { 
+#nav,
+#nav-left {
   a {
     display: block;
     color: $background-color;
@@ -15,13 +17,16 @@ html, body {
     font-size: 1.5em;
     font-weight: 400;
     border-bottom: none;
+
     @media (min-width: 940px) {
       font-size: 1em;
     }
+
     &:hover {
       background-color: lighten($main-color, 5%);
     }
   }
+
   span {
     font-weight: 200;
   }
@@ -56,7 +61,8 @@ html, body {
 
     .icon {
       padding: 0;
-      > img {
+
+      >img {
         margin-bottom: 0;
       }
     }
@@ -89,7 +95,9 @@ html, body {
   width: 1.5em;
   background-color: lighten($text-color, 35%);
   margin-top: 8px;
-  &:after, &:before {
+
+  &:after,
+  &:before {
     content: "";
     display: block;
     position: relative;
@@ -98,15 +106,19 @@ html, body {
     background-color: lighten($text-color, 35%);
     transition: all 0.3s ease-in;
   }
+
   &:before {
     top: -8px;
   }
+
   &:after {
     top: 4px;
   }
+
   &.btn-close {
     background: none;
   }
+
   &.btn-close:before {
     top: 0;
     -webkit-transform: rotate(-45deg);
@@ -115,6 +127,7 @@ html, body {
     transform: rotate(-45deg);
     background-color: $background-color;
   }
+
   &.btn-close:after {
     top: -4px;
     -webkit-transform: rotate(45deg);
@@ -130,13 +143,14 @@ html, body {
 .fixed {
   position: fixed;
   width: 100%;
+
   @media (min-width: 940px) {
     position: static;
   }
 }
 
 #container {
-	margin:0 auto;
+  margin: 0 auto;
   max-width: 730px;
   padding: 0 1.5rem;
 }
@@ -146,44 +160,55 @@ html, body {
   padding: 24px 0;
   position: relative;
   margin-bottom: 23px;
+
   @media (max-width: 480px) {
     padding-top: 10px;
   }
+
   a {
     text-decoration: none;
     color: $text-color;
     display: inline-block;
     border-bottom: none;
   }
+
   img {
     max-height: 100px;
     margin: 0 auto;
     display: block;
+
     @media (max-width: 940px) {
       max-height: 90px;
     }
+
     @media (max-width: 600px) {
       max-height: 60px;
     }
+
     @media (max-width: 480px) {
       max-height: 50px;
     }
   }
+
   h1 {
     font-family: 'Bebas Neue', sans-serif; //Emerald logo font
     font-weight: 400;
     font-size: 4.5em;
     color: #d26e2b;
+
     @media (max-width: 940px) {
       padding: 0;
     }
+
     @media (max-width: 600px) {
       font-size: 3em;
     }
+
     @media (max-width: 480px) {
       font-size: 2.5em;
     }
   }
+
   &:after {
     display: none;
     content: '';
@@ -191,10 +216,12 @@ html, body {
     height: 1px;
     margin: 23px auto;
     background-color: lighten($text-color, 70%);
+
     @media (max-width: 480px) {
       margin: 0.5rem auto;
     }
   }
+
   @media (max-width: 600px) {
     padding-bottom: 0;
   }
@@ -211,6 +238,7 @@ html, body {
 
 #post-page {
   margin-bottom: 1.5em;
+
   @media (min-width: 940px) {
     margin-bottom: 1.3334em;
   }
@@ -223,20 +251,25 @@ html, body {
   height: 1px;
   margin: 23px auto;
   background-color: lighten($background-color, 70%) !important;
-  }
+}
 
 .by-line {
   display: block;
   color: lighten($text-color, 25%);
-  line-height: 1.5em; /* 24px/16px */
+  line-height: 1.5em;
-  margin-bottom: 1.5em; /* 24px/16px */
+  /* 24px/16px */
+  margin-bottom: 1.5em;
+  /* 24px/16px */
   padding-top: 0.5em;
   font-weight: 200;
+
   @media (min-width: 940px) {
     display: block;
     color: lighten($text-color, 25%);
-    line-height: 1.3334em; /* 24px/18px */
+    line-height: 1.3334em;
-    margin-bottom: 1.3334em; /* 24px/18px */
+    /* 24px/18px */
+    margin-bottom: 1.3334em;
+    /* 24px/18px */
     font-weight: 200;
   }
 }
@@ -244,14 +277,18 @@ html, body {
 .by-line-post {
   display: block;
   color: lighten($text-color, 25%);
-  line-height: 1.5em; /* 24px/16px */
+  line-height: 1.5em;
+  /* 24px/16px */
   padding-top: 0.5em;
   font-weight: 200;
+
   @media (min-width: 940px) {
     display: block;
     color: lighten($text-color, 25%);
-    line-height: 1.3334em; /* 24px/18px */
+    line-height: 1.3334em;
-    margin-bottom: 1.3334em; /* 24px/18px */
+    /* 24px/18px */
+    margin-bottom: 1.3334em;
+    /* 24px/18px */
     font-weight: 200;
   }
 }
@@ -269,7 +306,7 @@ img {
 
 img[title="Emerald"] {
   box-shadow: 0 2px 6px #ddd;
-  }
+}
 
 code {
   color: lighten($text-color, 35%);
@@ -278,11 +315,15 @@ code {
 
 /* Set the vertical rhythm (and padding-left) for lists inside post content */
 
-.content ul, .content ol {
+.content ul,
-  line-height: 1.5em; /* 24px/16px */
+.content ol {
+  line-height: 1.5em;
+  /* 24px/16px */
   padding-left: 1.5em;
+
   @media (min-width: 940px) {
-    line-height: 1.33334em; /* 24px/18px */
+    line-height: 1.33334em;
+    /* 24px/18px */
   }
 }
 
@@ -291,14 +332,17 @@ code {
 .pagination {
   text-align: center;
   margin: 2.666668em;
+
   span {
     background-color: darken($background-color, 5%);
     color: $text-color;
   }
+
   a:hover {
     background-color: lighten($main-color, 5%);
   }
 }
+
 .page-item {
   background-color: $main-color;
   color: $background-color;
@@ -311,7 +355,10 @@ code {
   -ms-border-radius: 4px;
   border-radius: 4px;
 }
-.page-item:hover, .page-item:active, .page-item:focus {
+
+.page-item:hover,
+.page-item:active,
+.page-item:focus {
   border-bottom: none;
 }
 
@@ -325,8 +372,8 @@ footer {
 }
 
 #wrap {
-	min-height:100%; 
+  min-height: 100%;
-	position:relative;
+  position: relative;
   padding-bottom: 105px;
 }
 

_sass/mixin.scss

@@ -10,7 +10,8 @@
   z-index: 10;
   height: 36px;
   padding: 8px;
-  background-color: rgba(240,240,240,.6);
+  background-color: rgba(240, 240, 240, .6);
+
   @media (max-width: 480px) {
     top: 15px;
     right: 10px;
@@ -23,6 +24,7 @@
   -ms-transform: translateX($x);
   transform: translateX($x);
   width: 100%;
+
   @media (min-width: 940px) {
     width: 30%;
   }

_sass/typography.scss

@@ -5,88 +5,120 @@
 
 @font-face {
 	font-family: 'Bebas Neue';
-	src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */
+	src: url('../font/BebasNeue-Regular.woff') format('woff'),
-  }
+		/* Pretty Modern Browsers */
+}
 
-  body {
+body {
 	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 	letter-spacing: 0.01em;
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
-  }
+}
 
-  /*- Typography for medium and small screen, based on 16px font-size -*/
+/*- Typography for medium and small screen, based on 16px font-size -*/
 
-  p, ul, ol {
+p,
+ul,
+ol {
 	font-size: 18px;
-	  line-height: 1.7em; /* 24px/16px */
+	line-height: 1.7em;
-	  margin-bottom: 1.5em; /* 24px/16px */
+	/* 24px/16px */
-  }
+	margin-bottom: 1.5em;
+	/* 24px/16px */
+}
 
-  h1 {
+h1 {
-	  font-size: 2.25em; /* 36px/16px */
+	font-size: 2.25em;
-	  line-height: 1.3333em; /* 48px/36px */
+	/* 36px/16px */
-	  padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
+	line-height: 1.3333em;
+	/* 48px/36px */
+	padding: 0.33335em 0;
+	/* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
 	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
-  }
+}
 
-  h2 {
+h2 {
-	  font-size: 1.5em; /* 24px/16px */
+	font-size: 1.5em;
-	  line-height: 1.5em; /* 24px/24px */
+	/* 24px/16px */
-	  padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
+	line-height: 1.5em;
+	/* 24px/24px */
+	padding: 1em 0 0 0;
+	/* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */
 	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+
 	@media (max-width: 480px) {
 		font-size: 1.6rem;
 	}
-  }
+}
 
-  h3 {
+h3 {
-	  font-size: 1.3em; /* 18px/16px */
+	font-size: 1.3em;
-	  line-height: 1.7em; /* 24px/18px */
+	/* 18px/16px */
-	  padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
+	line-height: 1.7em;
+	/* 24px/18px */
+	padding: 0.66667em 0;
+	/* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
 	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
-  }
+}
 
-  .hted-head th {
+.hted-head th {
 	font-size: 1.1em;
-  }
+}
 
-  h4, h5, h6 {
+h4,
-	  font-size: 1.125em; /* 18px/16px */
+h5,
-	  line-height: 1.7em; /* 24px/18px */
+h6 {
-	  padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
+	font-size: 1.125em;
+	/* 18px/16px */
+	line-height: 1.7em;
+	/* 24px/18px */
+	padding: 0.66667em 0;
+	/* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
 	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
-  }
+}
 
-  h5 {
+h5 {
 	padding-bottom: 0.3em;
 	font-size: 1.3em;
 	margin-bottom: 0.5em;
-  }
+}
 
-  blockquote {
+blockquote {
 	font-style: italic;
-	  margin: 1.5em; /* 24px/18px */
+	margin: 1.5em;
+	/* 24px/18px */
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	-ms-border-radius: 4px;
 	border-radius: 4px;
 	background-color: darken($background-color, 5%);
-	  padding: 0 1.5em; /* 24px/18px */
+	padding: 0 1.5em;
-	  p, ul, ol {
-		  padding: 1.5em 0; /* 24px/18px */
-	  }
-  }
 
-  @media (min-width: 520px) { //Breakpoint set to 940px
+	/* 24px/18px */
+	p,
+	ul,
+	ol {
+		padding: 1.5em 0;
+		/* 24px/18px */
+	}
+}
 
-  p, ul, ol {
+@media (min-width: 520px) {
+	//Breakpoint set to 940px
+
+	p,
+	ul,
+	ol {
 		font-size: 20px;
-	  line-height: 1.7em; /* 24px/16px */
+		line-height: 1.7em;
-	  margin-bottom: 1.5em; /* 24px/16px */
+		/* 24px/16px */
+		margin-bottom: 1.5em;
+		/* 24px/16px */
 	}
 
-  h3, h5 {
+	h3,
+	h5 {
 		font-size: 1.5em;
 	}
 
@@ -94,34 +126,52 @@
 		font-size: 1.2em;
 	}
 
-  }
+}
 
-  /*- Typography for big screen, based on 18px font-size -*/
+/*- Typography for big screen, based on 18px font-size -*/
 
-  @media (min-width: 940px) { //Breakpoint set to 940px
+@media (min-width: 940px) {
+	//Breakpoint set to 940px
 
-  p, ul, ol {
+	p,
-	  font-size: 1em; /* 18px */
+	ul,
-	  line-height: 1.7em; /* 24px/18px */
+	ol {
-	  margin-bottom: 1.3334em; /* 24px/18px */
+		font-size: 1em;
+		/* 18px */
+		line-height: 1.7em;
+		/* 24px/18px */
+		margin-bottom: 1.3334em;
+		/* 24px/18px */
 	}
 
 	h1 {
-	  font-size: 2.6667em; /* 48px/18px */
+		font-size: 2.6667em;
-	  line-height: 1em; /* 48px/48px */
+		/* 48px/18px */
-	  padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
+		line-height: 1em;
+		/* 48px/48px */
+		padding: 0.25em 0;
+		/* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
 	}
 
 	h2 {
-	  font-size: 2em; /* 36px/18px */
+		font-size: 2em;
-	  line-height: 1.7em; /* 48px/36px */
+		/* 36px/18px */
-	  padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */
+		line-height: 1.7em;
+		/* 48px/36px */
+		padding: 0.66667em 0 0 0;
+		/* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */
 	}
 
-  h3, h4, h5, h6 {
+	h3,
-	  font-size: 1.7em; /* 24px/18px */
+	h4,
-	  line-height: 1.7em; /* 24px/24px */
+	h5,
-	  padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
+	h6 {
+		font-size: 1.7em;
+		/* 24px/18px */
+		line-height: 1.7em;
+		/* 24px/24px */
+		padding: 0.5em 0;
+		/* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */
 	}
 
 	h5 {
@@ -131,17 +181,22 @@
 
 	blockquote {
 		font-style: italic;
-	  margin: 1.3334em; /* 24px/18px */
+		margin: 1.3334em;
+		/* 24px/18px */
 		-webkit-border-radius: 4px;
 		-moz-border-radius: 4px;
 		-ms-border-radius: 4px;
 		border-radius: 4px;
 		background-color: darken($background-color, 5%);
-	  padding: 0 1.33334em; /* 24px/18px */
+		padding: 0 1.33334em;
-	  p, ul, ol {
+
-		  padding: 1.33334em 0; /* 24px/18px */
+		/* 24px/18px */
+		p,
+		ul,
+		ol {
+			padding: 1.33334em 0;
+			/* 24px/18px */
 		}
 	}
 
-  }
+}
-  

css/main.scss

@@ -5,37 +5,6 @@
 //Import
 @import "base", "mixin", "typography", "layout", "syntax.scss", "custom.scss", "responsive.scss";
 
-
-
-/////////////////////////////////////////
-/////////////////////////////////////////
-/////////////////////////////////////////
-//////////// LIGHT THEME ////////////////
-/////////////////////////////////////////
-/////////////////////////////////////////
-/////////////////////////////////////////
-
-//html {
-  //background-color: #0f0f0f;
-  ////background-color: #f0f0f0;
-
-//html {
-  //[>background-color: #0f0f0f;<]
-  ////background-color: #f0f0f0;
-  //background-color: lightblue;
-//}
-
-
-////body {
-  //////background-color: #f0f0f0;
-  ////background-color: #0f0f0f;
-
-//body {
-  //[>background-color: #0f0f0f;<]
-  ////background-color: #f0f0f0;
-  //background-color: lightblue;
-//}
-
 // Default Style (Dark)
 :root {
   --primary-color: #888888;
@@ -68,7 +37,7 @@
   transition: all .3s ease;
 }
 
-#theme-switcher:checked ~ * {
+#theme-switcher:checked~* {
   --primary-color: #666666;
   --secondary-color: #555555;
   --font-color: #555555;
@@ -85,11 +54,11 @@
   --license-color: #666666;
 }
 
-#theme-switcher:checked ~ .switch .slider {
+#theme-switcher:checked~.switch .slider {
   background-color: #d56f2a;
 }
 
-#theme-switcher:checked ~ .switch .slider::before {
+#theme-switcher:checked~.switch .slider::before {
   -webkit-transform: translateX(26px);
   -moz-transform: translateX(26px);
   -ms-transform: translateX(26px);
@@ -102,10 +71,11 @@
     right: 10px;
   }
 }
+
 // END theme switcher
 
 // BEGIN menu toggle
-#menu-toggle:checked ~ #nav {
+#menu-toggle:checked~#nav {
   -webkit-transform: translateX(-14rem);
   -moz-transform: translateX(-14rem);
   -ms-transform: translateX(-14rem);
@@ -113,12 +83,12 @@
   width: 100%;
 }
 
-#menu-toggle:checked ~ .menu-toggle #menu {
+#menu-toggle:checked~.menu-toggle #menu {
   background: none;
   transition: all 0.1s ease-in;
 }
 
-#menu-toggle:checked ~ .menu-toggle #menu::before {
+#menu-toggle:checked~.menu-toggle #menu::before {
   top: 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
@@ -127,7 +97,7 @@
   background-color: #0F0F0F;
 }
 
-#menu-toggle:checked ~ .menu-toggle #menu::after {
+#menu-toggle:checked~.menu-toggle #menu::after {
   top: -4px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
@@ -137,10 +107,11 @@
 }
 
 @media (min-width: 940px) {
-  #menu-toggle:checked ~ #nav {
+  #menu-toggle:checked~#nav {
     width: 30%;
   }
 }
+
 // END menu toggle
 
 #wrap {
@@ -200,7 +171,9 @@ p.by-line-post {
 }
 
 #header {
-  a.rss, a.donate {
+
+  a.rss,
+  a.donate {
     display: block;
     padding-bottom: 0;
   }

js/main.js

@@ -1,3 +1,7 @@
+// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
+// The above is a GNU LibreJS specific license declaration. The Expat license is the same as the MIT license.
+// See: https://www.gnu.org/software/librejs/free-your-javascript.html#magnet-link-license
+
 // Saves themes in-between pages to LocalStorage.
 const themeSwitcher = document.getElementById('theme-switcher');
 
@@ -12,3 +16,63 @@ if (document.addEventListener) {
 }
 
 checkTheme()
+
+// Make the theme switcher in the hamburger menu on mobile devices work.
+if (document.body.clientWidth < 940) {
+	const themeSwitcherLabel = document.getElementById('main-theme-switcher');
+	const navActionsContainer = document.getElementById('nav-actions-container');
+
+	// Move the theme switcher to inside the hamburger menu.
+	navActionsContainer.appendChild(themeSwitcher);
+	navActionsContainer.appendChild(themeSwitcherLabel);
+
+	themeSwitcherLabel.style.top = '';
+	themeSwitcherLabel.style.left = '42vw';
+
+	const themeVariables = [
+		// Light theme
+		[
+			{ name: 'primary-color', value: '#666666' },
+			{ name: 'secondary-color', value: '#555555' },
+			{ name: 'font-color', value: '#555555' },
+			{ name: 'link-color', value: '#444444' },
+			{ name: 'bg-color', value: '#f0f0f0' },
+			{ name: 'heading-color', value: '#666666' },
+			{ name: 'block-bg-color', value: '#d7d7d7' },
+			{ name: 'block-bg-color-secondary', value: '#c0c0c0' },
+			{ name: 'block-bg-color-heading', value: '#a5a5a5' },
+			{ name: 'table-color', value: '#000000' },
+			{ name: 'head-nav-bg-color', value: 'transparent' },
+			{ name: 'head-nav-text-color', value: '#d56f2a' },
+			{ name: 'menu-color', value: '#202225' },
+			{ name: 'license-color', value: '#666666' },
+		],
+
+		// Dark theme
+		[
+			{ name: 'primary-color', value: '#888888' },
+			{ name: 'secondary-color', value: '#666666' },
+			{ name: 'font-color', value: '#cecece' },
+			{ name: 'link-color', value: '#e6e6e6' },
+			{ name: 'bg-color', value: '#0f0f0f' },
+			{ name: 'heading-color', value: '#454545' },
+			{ name: 'block-bg-color', value: '#2f3234' },
+			{ name: 'block-bg-color-secondary', value: '#444444' },
+			{ name: 'block-bg-color-heading', value: '#333333' },
+			{ name: 'table-color', value: '#cecece' },
+			{ name: 'head-nav-bg-color', value: 'transparent' },
+			{ name: 'head-nav-text-color', value: '#d56f2a' },
+			{ name: 'menu-color', value: '#e1e1e1' },
+			{ name: 'license-color', value: '#666666' },
+		]
+	]
+
+	// Switch the theme when the theme switcher is clicked.
+	themeSwitcher.addEventListener('change', () => {
+		const theme = themeVariables[themeSwitcher.checked ? 1 : 0];
+
+		theme.forEach(variable => {
+			document.documentElement.style.setProperty(`--${variable.name}`, variable.value);
+		});
+	});
+}