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

Design tweaks
This commit is contained in:
rottenstonks 2022-04-12 09:29:59 -05:00 committed by GitHub
commit 4c2061a2a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 32 additions and 17 deletions

View file

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

View file

@ -1,17 +1,21 @@
<header id="header"> <header id="header">
<div class="action-container"> <div class="action-container action-container--left">
<!-- Dark Mode Button --> <!-- Dark Mode Button -->
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
<span class="slider round"></span> <span class="slider round"></span>
</label> </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> </div>
<a href="{{ site.baseurl }}"> <a href="{{ site.baseurl }}">
<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo"> <img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
</a> </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"> <div class="revuo-classes">
<a href="{{ site.baseurl }}" class="wk">Weekly</a> <a href="{{ site.baseurl }}" class="wk">Weekly</a>
<a href="/periodicals/" class="pd">Periodical</a> <a href="/periodicals/" class="pd">Periodical</a>

View file

@ -6,7 +6,8 @@
<input type="checkbox"> <input type="checkbox">
<span class="slider round"></span> <span class="slider round"></span>
</label> </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> </div>
<a href="{{ site.baseurl }}">Revuo Weekly</a> <a href="{{ site.baseurl }}">Revuo Weekly</a>

View file

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

View file

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

BIN
img/donate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB