formatting

_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,6 +61,7 @@ html, body {
 
     .icon {
       padding: 0;
+
       >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,6 +143,7 @@ html, body {
 .fixed {
   position: fixed;
   width: 100%;
+
   @media (min-width: 940px) {
     position: static;
   }
@@ -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;
   }
@@ -228,15 +256,20 @@ html, body {
 .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;
   }
 }
@@ -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;
 }
 

_sass/mixin.scss

@@ -11,6 +11,7 @@
   height: 36px;
   padding: 8px;
   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,7 +5,8 @@
 
 @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 {
@@ -17,33 +18,47 @@
 
 /*- 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 {
-	  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 {
-	  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 {
-	  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;
 }
 
@@ -51,10 +66,15 @@
 	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;
 }
 
@@ -66,27 +86,39 @@
 
 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 */
+	/* 24px/18px */
+	p,
+	ul,
+	ol {
+		padding: 1.5em 0;
+		/* 24px/18px */
 	}
 }
 
-  @media (min-width: 520px) { //Breakpoint set to 940px
+@media (min-width: 520px) {
+	//Breakpoint set to 940px
 
-  p, ul, ol {
+	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;
 	}
 
@@ -98,30 +130,48 @@
 
 /*- 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;
@@ -102,6 +71,7 @@
     right: 10px;
   }
 }
+
 // END theme switcher
 
 // BEGIN menu toggle
@@ -141,6 +111,7 @@
     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;
   }