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 {
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 {

View file

@ -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>

View file

@ -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>

View file

@ -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;
}
}

View file

@ -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;
}
}

BIN
img/donate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB