Merge pull request #17 from garritfra/design-tweaks-1

Design tweaks

_includes/head.html

@@ -41,8 +41,8 @@
 	.switch {
 	  position: relative;
 	  display: inline-block;
-	  width: 60px;
-	  height: 34px;
+	  width: 56px;
+	  height: 30px;
 	}
 
 	.switch input { 
@@ -66,8 +66,8 @@
 	.slider:before {
 	  position: absolute;
 	  content: "";
-	  height: 26px;
-	  width: 26px;
+	  height: 22px;
+	  width: 22px;
 	  left: 4px;
 	  bottom: 4px;
 	  background-color: white;
@@ -76,11 +76,11 @@
 	}
 
 	input:checked + .slider {
-	  background-color: #2196F3;
+	  background-color: #d56f2a;
 	}
 
 	input:focus + .slider {
-	  box-shadow: 0 0 1px #2196F3;
+	  box-shadow: 0 0 1px #d56f2a;
 	}
 
 	input:checked + .slider:before {

_includes/header-custom.html

@@ -1,17 +1,21 @@
 <header id="header">
-	<div class="action-container">
+	<div class="action-container action-container--left">
 		<!-- Dark Mode Button -->
 		<label class="switch">
 			<input type="checkbox">
 			<span class="slider round"></span>
 		</label>
-		<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
 	</div>
 	
 	<a href="{{ site.baseurl }}">
 		<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
 	</a>
 
+	<div class="action-container action-container--right">
+		<a class="icon" href="https://revuo-xmr.com/issue-115.html#donate" 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>
+
     <div class="revuo-classes">
         <a href="{{ site.baseurl }}" class="wk">Weekly</a>
         <a href="/periodicals/" class="pd">Periodical</a>

_includes/menu.html

@@ -6,7 +6,8 @@
 				<input type="checkbox">
 				<span class="slider round"></span>
 			</label>
-			<a class="rss" href="/atom.xml" target="_blank"><img class="rss-icon" src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
+			<a class="icon" href="https://revuo-xmr.com/issue-115.html#donate" 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/layout.scss

@@ -52,11 +52,11 @@ html, body {
     display: none;
     gap: 12px;
     justify-content: center;
+    align-items: center;
     
-    .rss {
+    .icon {
       padding: 0;
-
-      .rss-icon {
+      > img {
         margin-bottom: 0;
       }
     }

css/main.scss

@@ -109,17 +109,27 @@ time.by-line {
 }
 
 #header .action-container {
+  &--left {
+    left: 25px;
+    top: 35px;
+  }
+
+  &--right {
+    right: 80px;
+    top: 35px;
+  }
+
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: 12px;
   height: 36px;
   position: absolute;
-  right: 80px;
-  top: 35px;
 }
 
-#header a.rss {
-	display: block;
-  padding-bottom: 0;
+#header {
+  a.rss, a.donate {
+    display: block;
+    padding-bottom: 0;
+  }
 }