From 38301f8715b400d4752349953273d97fa7907876 Mon Sep 17 00:00:00 2001
From: recanman <noreply@example.invalid>
Date: Sun, 21 Jan 2024 13:19:22 -0800
Subject: [PATCH] formatting

---
 _sass/base.scss       |  67 +++++----
 _sass/custom.scss     | 241 ++++++++++++++++--------------
 _sass/layout.scss     | 195 ++++++++++++++----------
 _sass/mixin.scss      |  26 ++--
 _sass/responsive.scss |   2 +-
 _sass/typography.scss | 335 ++++++++++++++++++++++++------------------
 css/main.scss         | 107 +++++---------
 7 files changed, 545 insertions(+), 428 deletions(-)

diff --git a/_sass/base.scss b/_sass/base.scss
index 0c2d8ef..15a351e 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -5,15 +5,27 @@
 /*- Base reset -*/
 
 * {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
-html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img {
-  margin: 0;
-  padding: 0;
-  border: 0;
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+img {
+    margin: 0;
+    padding: 0;
+    border: 0;
 }
 
 /*- Base color -*/
@@ -25,36 +37,39 @@ $text-color: #888888;
 /*- Base settings -*/
 
 html {
-	background-color: $background-color;
-	font-size: 16px;
+    background-color: $background-color;
+    font-size: 16px;
     scroll-behavior: smooth;
-	@media (min-width: 940px) {
-		font-size: 18px;
-	}
-	line-height: 1.5;
-	color: $text-color;
+
+    @media (min-width: 940px) {
+        font-size: 18px;
+    }
+
+    line-height: 1.5;
+    color: $text-color;
 }
 
 
 /*- Link -*/
 a {
-	color: $main-color;
+    color: $main-color;
     outline: 0;
     border-bottom: 2px dotted #6a6d72;
-	text-decoration: none;
-	font-weight: 700;
+    text-decoration: none;
+    font-weight: 700;
     -webkit-transition: all .3s ease;
-       -moz-transition: all .3s ease;
-        -ms-transition: all .3s ease;
-         -o-transition: all .3s ease;
-            transition: all .3s ease;
-	&:hover,
-	&:focus {
-		color: #999999;
+    -moz-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    transition: all .3s ease;
+
+    &:hover,
+    &:focus {
+        color: #999999;
         border-bottom: 2px dotted #333333;
-	}
+    }
 }
 
 a#nav-menu {
     border-bottom: none;
-}
+}
\ No newline at end of file
diff --git a/_sass/custom.scss b/_sass/custom.scss
index 4e085b7..ee086a2 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -29,109 +29,122 @@ p.table-title {
     padding-top: 0.5em;
 }
 
-.price-table, .moneroversary-table {
-  margin: 0 0 1.3334rem 0;
-  width: 100%; // adjust to your needs
-  background: #45494f;
-  color: #efefef;
-  border-radius: 2px;
-  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);
-  }
-  }
-  
-  tr {
-    border-top: 2px solid #fff;
-    border-bottom: 2px solid #fff;
-  }
-  
-  
-    
-  tr.row1 {
-    background-color: var(--block-bg-color-heading);
-  }
-  
-  th {
-    display: none;   
-  }
-  
-  td {
-    display: block; 
-    
-    &:first-child {
-      padding-top: .5em;
+.price-table,
+.moneroversary-table {
+    margin: 0 0 1.3334rem 0;
+    width: 100%; // adjust to your needs
+    background: #45494f;
+    color: #efefef;
+    border-radius: 2px;
+    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);
+        }
     }
-    &:last-child {
-      padding-bottom: .5em;
+
+    tr {
+        border-top: 2px solid #fff;
+        border-bottom: 2px solid #fff;
     }
 
-    &:before {
-      content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
-      font-weight: bold;
 
-      // optional stuff to make it look nicer
-      width: 6.5em; // magic number :( adjust according to your own content
-      display: inline-block;
-      // end options
-      
-      @media (min-width: $breakpoint-alpha) {
+
+    tr.row1 {
+        background-color: var(--block-bg-color-heading);
+    }
+
+    th {
         display: none;
-      }
     }
-  }
-  
-  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;
-      }
-      
-      &:last-child {
-        padding-right: 0;
-      }
+
+    td {
+        display: block;
+
+        &:first-child {
+            padding-top: .5em;
+        }
+
+        &:last-child {
+            padding-bottom: .5em;
+        }
+
+        &:before {
+            content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
+            font-weight: bold;
+
+            // optional stuff to make it look nicer
+            width: 6.5em; // magic number :( adjust according to your own content
+            display: inline-block;
+            // end options
+
+            @media (min-width: $breakpoint-alpha) {
+                display: none;
+            }
+        }
     }
 
-  }
-    
-  th, td:before {
-    color: var(--link-color);
-  }
-    
-  td.green {
-    color: #66d166; 
-    @media (min-width: $breakpoint-alpha) {
-        color: #51a751;
+    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;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+
     }
-  }
-    
-  td.red {
-    color: #e36f6e; 
-    @media (min-width: $breakpoint-alpha) {
-        color: #d83231;
+
+    th,
+    td:before {
+        color: var(--link-color);
     }
-  }
-    
+
+    td.green {
+        color: #66d166;
+
+        @media (min-width: $breakpoint-alpha) {
+            color: #51a751;
+        }
+    }
+
+    td.red {
+        color: #e36f6e;
+
+        @media (min-width: $breakpoint-alpha) {
+            color: #d83231;
+        }
+    }
+
 }
 
 .moneroversary-table {
     margin: 1.3334rem 0 1.3334rem 0;
+
     @media (max-width: $breakpoint-alpha) {
-    background: #f0f0f0;
-    color: #45494f;
+        background: #f0f0f0;
+        color: #45494f;
     }
-    th, td:before {
+
+    th,
+    td:before {
         @media (max-width: $breakpoint-alpha) {
-        color: #45494f;
+            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;
 }
 
@@ -299,19 +320,19 @@ img.localmonero {
 }
 
 .sponsors {
-	box-sizing: border-box;
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-webkit-box-flex: 0;
-	-ms-flex: 0 1 auto;
-	flex: 0 1 auto;
-	-webkit-box-orient: horizontal;
-	-webkit-box-direction: normal;
-	-ms-flex-direction: row;
-	flex-direction: row;
-	-ms-flex-wrap: wrap;
-	flex-wrap: wrap;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
@@ -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;
 }
 
@@ -385,4 +410,4 @@ img.dvchain {
 
 html {
     scroll-behavior: smooth;
-}
+}
\ No newline at end of file
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 3776a9e..c37e7bb 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -1,13 +1,15 @@
 /* -- General Layout -- */
 
 /* Required for footer to stick to the bottom */
-html, body {
-	height: 100%;
+html,
+body {
+  height: 100%;
 }
 
 /* Navigation */
 
-#nav, #nav-left { 
+#nav,
+#nav-left {
   a {
     display: block;
     color: $background-color;
@@ -15,16 +17,19 @@ 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;
-    }
+    font-weight: 200;
+  }
 }
 
 #nav {
@@ -53,16 +58,17 @@ html, body {
     gap: 12px;
     justify-content: center;
     align-items: center;
-    
+
     .icon {
       padding: 0;
-      > img {
+
+      >img {
         margin-bottom: 0;
       }
     }
   }
 
-  
+
   /* Separator after menu */
   &:after {
     display: block;
@@ -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,29 +106,34 @@ 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);
-       -moz-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
-            transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
     background-color: $background-color;
   }
+
   &.btn-close:after {
     top: -4px;
     -webkit-transform: rotate(45deg);
-       -moz-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-            transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
     background-color: $background-color;
   }
 }
@@ -130,73 +143,87 @@ html, body {
 .fixed {
   position: fixed;
   width: 100%;
+
   @media (min-width: 940px) {
     position: static;
   }
 }
 
 #container {
-	margin:0 auto;
-	max-width: 730px;
-	padding: 0 1.5rem;
+  margin: 0 auto;
+  max-width: 730px;
+  padding: 0 1.5rem;
 }
 
 #header {
-	text-align: center;
+  text-align: center;
   padding: 24px 0;
   position: relative;
   margin-bottom: 23px;
+
   @media (max-width: 480px) {
-      padding-top: 10px;
+    padding-top: 10px;
   }
+
   a {
-  	text-decoration: none;
-  	color: $text-color;
-  	display: inline-block;
+    text-decoration: none;
+    color: $text-color;
+    display: inline-block;
     border-bottom: none;
   }
+
   img {
-  	max-height: 100px;
-  	margin: 0 auto;
-  	display: block;
+    max-height: 100px;
+    margin: 0 auto;
+    display: block;
+
     @media (max-width: 940px) {
-        max-height: 90px;
+      max-height: 90px;
     }
+
     @media (max-width: 600px) {
-        max-height: 60px;
+      max-height: 60px;
     }
+
     @media (max-width: 480px) {
-        max-height: 50px;
+      max-height: 50px;
     }
   }
+
   h1 {
-  	font-family: 'Bebas Neue', sans-serif; //Emerald logo font
+    font-family: 'Bebas Neue', sans-serif; //Emerald logo font
     font-weight: 400;
     font-size: 4.5em;
     color: #d26e2b;
+
     @media (max-width: 940px) {
-        padding: 0;
+      padding: 0;
     }
+
     @media (max-width: 600px) {
-        font-size: 3em;
+      font-size: 3em;
     }
+
     @media (max-width: 480px) {
-        font-size: 2.5em;
+      font-size: 2.5em;
     }
   }
+
   &:after {
-  	display: none;
+    display: none;
     content: '';
     width: 5rem;
     height: 1px;
     margin: 23px auto;
     background-color: lighten($text-color, 70%);
+
     @media (max-width: 480px) {
-        margin: 0.5rem auto;
+      margin: 0.5rem auto;
     }
   }
+
   @media (max-width: 600px) {
-      padding-bottom: 0;
+    padding-bottom: 0;
   }
 }
 
@@ -211,32 +238,38 @@ html, body {
 
 #post-page {
   margin-bottom: 1.5em;
+
   @media (min-width: 940px) {
-      margin-bottom: 1.3334em;
-    }
+    margin-bottom: 1.3334em;
+  }
 }
 
 .post+.post:before {
-    display: block;
-    content: '';
-    width: 5rem;
-    height: 1px;
-    margin: 23px auto;
-    background-color: lighten($background-color, 70%) !important;
-  }
+  display: block;
+  content: '';
+  width: 5rem;
+  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 */
-  margin-bottom: 1.5em; /* 24px/16px */
+  line-height: 1.5em;
+  /* 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 */
-    margin-bottom: 1.3334em; /* 24px/18px */
+    line-height: 1.3334em;
+    /* 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 */
-    margin-bottom: 1.3334em; /* 24px/18px */
+    line-height: 1.3334em;
+    /* 24px/18px */
+    margin-bottom: 1.3334em;
+    /* 24px/18px */
     font-weight: 200;
   }
 }
@@ -262,14 +299,14 @@ img {
   margin: 0 auto;
   margin-bottom: 24px;
   -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-      -ms-border-radius: 4px;
-          border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
 }
 
 img[title="Emerald"] {
-    box-shadow: 0 2px 6px #ddd;
-  }
+  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 {
-  line-height: 1.5em; /* 24px/16px */
+.content ul,
+.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;
@@ -307,12 +351,15 @@ code {
   padding: 0.5em 1em;
   border-bottom: none;
   -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-      -ms-border-radius: 4px;
-          border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
 }
-.page-item:hover, .page-item:active, .page-item:focus {
-    border-bottom: none;
+
+.page-item:hover,
+.page-item:active,
+.page-item:focus {
+  border-bottom: none;
 }
 
 /* Footer */
@@ -325,17 +372,17 @@ footer {
 }
 
 #wrap {
-	min-height:100%; 
-	position:relative;
-	padding-bottom: 105px;
+  min-height: 100%;
+  position: relative;
+  padding-bottom: 105px;
 }
 
 .footer {
-	padding: 25px 0;
-	background-color: $main-color;
-	color: $background-color;
-	text-align: center;
-	position: absolute;
+  padding: 25px 0;
+  background-color: $main-color;
+  color: $background-color;
+  text-align: center;
+  position: absolute;
   width: 100%;
   bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/_sass/mixin.scss b/_sass/mixin.scss
index 0e5b2d6..e9f9781 100644
--- a/_sass/mixin.scss
+++ b/_sass/mixin.scss
@@ -3,33 +3,35 @@
 // Nav menu
 
 @mixin icon-position($position) {
-	display: block;
+  display: block;
   position: absolute;
   top: 35px;
   #{$position}: 25px;
   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;
+    top: 15px;
+    right: 10px;
   }
 }
 
 @mixin open($x) {
-	-webkit-transform: translateX($x);
-     -moz-transform: translateX($x);
-      -ms-transform: translateX($x);
-          transform: translateX($x);
+  -webkit-transform: translateX($x);
+  -moz-transform: translateX($x);
+  -ms-transform: translateX($x);
+  transform: translateX($x);
   width: 100%;
+
   @media (min-width: 940px) {
     width: 30%;
   }
 }
 
 @mixin nav-position($position) {
-	width: 14rem;
+  width: 14rem;
   position: fixed;
   background-color: $main-color;
   top: 0;
@@ -38,9 +40,9 @@
   color: $background-color;
   opacity: 0.95;
   -webkit-transition: all 0.3s ease-in;
-     -moz-transition: all 0.3s ease-in;
-      -ms-transition: all 0.3s ease-in;
-          transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+  -ms-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
   z-index: 1;
   padding: 72px 0;
   text-align: center;
diff --git a/_sass/responsive.scss b/_sass/responsive.scss
index 15b36e3..564fc35 100644
--- a/_sass/responsive.scss
+++ b/_sass/responsive.scss
@@ -10,4 +10,4 @@
       display: flex;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/_sass/typography.scss b/_sass/typography.scss
index df3c5f8..51a6005 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -5,143 +5,198 @@
 
 @font-face {
 	font-family: 'Bebas Neue';
-	src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */
-  }
-  
-  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 -*/
-  
-  p, ul, ol {
-	  font-size: 18px;
-	  line-height: 1.7em; /* 24px/16px */
-	  margin-bottom: 1.5em; /* 24px/16px */
-  }
-  
-  h1 {
-	  font-size: 2.25em; /* 36px/16px */
-	  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 */
-	  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 */
-	  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 {
-	  font-size: 1.1em;
-  }
-  
-  h4, h5, h6 {
-	  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 {
-	  padding-bottom: 0.3em;
-	  font-size: 1.3em;
-	  margin-bottom: 0.5em;
-  }
-  
-  blockquote {
-	  font-style: italic;
-	  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 */
-	  p, ul, ol {
-		  padding: 1.5em 0; /* 24px/18px */
-	  }
-  }
-  
-  @media (min-width: 520px) { //Breakpoint set to 940px
-	  
-  p, ul, ol {
-	  font-size: 20px;
-	  line-height: 1.7em; /* 24px/16px */
-	  margin-bottom: 1.5em; /* 24px/16px */
-  }
-	  
-  h3, h5 {
-	  font-size: 1.5em;    
-  }
-	  
-  .hted-head th {
-	  font-size: 1.2em;
-  }
-	  
-  }
-  
-  /*- Typography for big screen, based on 18px font-size -*/
-  
-  @media (min-width: 940px) { //Breakpoint set to 940px
-  
-  p, ul, ol {
-	  font-size: 1em; /* 18px */
-	  line-height: 1.7em; /* 24px/18px */
-	  margin-bottom: 1.3334em; /* 24px/18px */
-  }
-  
-  h1 {
-	  font-size: 2.6667em; /* 48px/18px */
-	  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 */
-	  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 {
-	  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 {
-	  padding-bottom: 0;
-	  font-size: 1.5em;
-  }
-  
-  blockquote {
-	  font-style: italic;
-	  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 */
-	  p, ul, ol {
-		  padding: 1.33334em 0; /* 24px/18px */
-	  }
-  }
-  
-  }
-  
\ No newline at end of file
+	src: url('../font/BebasNeue-Regular.woff') format('woff'),
+		/* Pretty Modern Browsers */
+}
+
+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 -*/
+
+p,
+ul,
+ol {
+	font-size: 18px;
+	line-height: 1.7em;
+	/* 24px/16px */
+	margin-bottom: 1.5em;
+	/* 24px/16px */
+}
+
+h1 {
+	font-size: 2.25em;
+	/* 36px/16px */
+	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 */
+	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 */
+	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 {
+	font-size: 1.1em;
+}
+
+h4,
+h5,
+h6 {
+	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 {
+	padding-bottom: 0.3em;
+	font-size: 1.3em;
+	margin-bottom: 0.5em;
+}
+
+blockquote {
+	font-style: italic;
+	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 */
+	p,
+	ul,
+	ol {
+		padding: 1.5em 0;
+		/* 24px/18px */
+	}
+}
+
+@media (min-width: 520px) {
+	//Breakpoint set to 940px
+
+	p,
+	ul,
+	ol {
+		font-size: 20px;
+		line-height: 1.7em;
+		/* 24px/16px */
+		margin-bottom: 1.5em;
+		/* 24px/16px */
+	}
+
+	h3,
+	h5 {
+		font-size: 1.5em;
+	}
+
+	.hted-head th {
+		font-size: 1.2em;
+	}
+
+}
+
+/*- Typography for big screen, based on 18px font-size -*/
+
+@media (min-width: 940px) {
+	//Breakpoint set to 940px
+
+	p,
+	ul,
+	ol {
+		font-size: 1em;
+		/* 18px */
+		line-height: 1.7em;
+		/* 24px/18px */
+		margin-bottom: 1.3334em;
+		/* 24px/18px */
+	}
+
+	h1 {
+		font-size: 2.6667em;
+		/* 48px/18px */
+		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 */
+		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 {
+		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 {
+		padding-bottom: 0;
+		font-size: 1.5em;
+	}
+
+	blockquote {
+		font-style: italic;
+		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 */
+		p,
+		ul,
+		ol {
+			padding: 1.33334em 0;
+			/* 24px/18px */
+		}
+	}
+
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 01895ba..1380955 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -5,53 +5,22 @@
 //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;
-    --secondary-color: #666666;
-    --font-color: #cecece;
-    --link-color: #e6e6e6;
-    --bg-color: #0f0f0f;
-    --heading-color: #454545;
-    --block-bg-color: #2f3234;
-    --block-bg-color-secondary: #444444;
-    --block-bg-color-heading: #333333;
-	--table-color: #cecece;
-	--head-nav-bg-color: transparent;
-	--head-nav-text-color: #d56f2a;
-	--menu-color: #e1e1e1;
-	--license-color: #666666;
+  --primary-color: #888888;
+  --secondary-color: #666666;
+  --font-color: #cecece;
+  --link-color: #e6e6e6;
+  --bg-color: #0f0f0f;
+  --heading-color: #454545;
+  --block-bg-color: #2f3234;
+  --block-bg-color-secondary: #444444;
+  --block-bg-color-heading: #333333;
+  --table-color: #cecece;
+  --head-nav-bg-color: transparent;
+  --head-nav-text-color: #d56f2a;
+  --menu-color: #e1e1e1;
+  --license-color: #666666;
 }
 
 .nojs-toggle {
@@ -68,7 +37,7 @@
   transition: all .3s ease;
 }
 
-#theme-switcher:checked ~ * {
+#theme-switcher:checked~* {
   --primary-color: #666666;
   --secondary-color: #555555;
   --font-color: #555555;
@@ -78,18 +47,18 @@
   --block-bg-color: #d7d7d7;
   --block-bg-color-secondary: #c0c0c0;
   --block-bg-color-heading: #a5a5a5;
-	--table-color: #000000;
-	--head-nav-bg-color: transparent;
-	--head-nav-text-color: #d56f2a;
-	--menu-color: #202225;
-	--license-color: #666666;
+  --table-color: #000000;
+  --head-nav-bg-color: transparent;
+  --head-nav-text-color: #d56f2a;
+  --menu-color: #202225;
+  --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 {
@@ -149,35 +120,35 @@
 }
 
 h1 {
-    color: var(--secondary-color);
+  color: var(--secondary-color);
 }
 
 a {
-    color: var(--link-color);
+  color: var(--link-color);
 }
 
 .moneroversary-table,
 .price-table {
-	color: var(--table-color);
+  color: var(--table-color);
 }
 
 #weekly .revuo-classes a.wk,
 #periodical .revuo-classes a.pd,
 #wrap.periodical .revuo-classes a.pd:active,
 #wrap.periodical .revuo-classes a.pd:focus {
-    background-color: var(--head-nav-bg-color);
-	color: var(--head-nav-text-color);
+  background-color: var(--head-nav-bg-color);
+  color: var(--head-nav-text-color);
 }
 
 time.by-line,
 p.by-line-post {
-	color: var(--table-color);
+  color: var(--table-color);
 }
 
 #menu,
 #menu::after,
 #menu::before {
-	background-color: var(--menu-color);
+  background-color: var(--menu-color);
 }
 
 #header .action-container {
@@ -200,8 +171,10 @@ p.by-line-post {
 }
 
 #header {
-  a.rss, a.donate {
+
+  a.rss,
+  a.donate {
     display: block;
     padding-bottom: 0;
   }
-}
+}
\ No newline at end of file