revuo-weekly/_includes/header-custom.html
2022-03-30 13:47:15 -05:00

113 lines
1.9 KiB
HTML

<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 0px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
table {
margin-top: 34px;
}
td {
height: 50px;
vertical-align: middle;
}
</style>
<!--<label class="switch">-->
<!--<input type="checkbox" checked>-->
<!--<span class="slider round"></span>-->
<!--</label>-->
<header id="header">
<!-- Your custom header here -->
<div>
<a href="{{ site.baseurl }}">
<img src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
</a>
</div>
<div class="revuo-classes">
<a href="{{ site.baseurl }}" class="wk">Weekly</a>
<a href="/periodicals/" class="pd">Periodical</a>
</div>
<!--Add dark mode here-->
<div>
<table align="center">
<tr>
<td>
<img src="{{ "/img/dark-theme-icon2.png" | prepend: site.baseurl | replace: '//', '/' }}" height="50px" width="50px" alt="Dark Theme">
</td>
<td>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</td>
</tr>
</table>
</div>
<!--Finish dark mode-->
</header>