Awesome-Mirrors/awesome-piracy
1
0
Fork 0
mirror of https://github.com/Igglybuff/awesome-piracy.git synced 2025-03-29 00:58:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

added all files and new toggle is beta

Browse Source
This commit is contained in:
tanaybhardwaj24 2021-05-10 07:39:34 +00:00
parent b04cc66646
commit 359a6686cf
3 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website-src/src/index.html
View File

@ -7,6 +7,11 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="toggle">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
</div>
<script src="index.js"></script>
<article class="markdown-body">
<h1>
<a id="user-content-awesome-piracy-" class="anchor" href="#awesome-piracy-" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Awesome Piracy <a href="https://awesome.re" rel="nofollow"><img src="https://camo.githubusercontent.com/1997c7e760b163a61aba3a2c98f21be8c524be29/68747470733a2f2f617765736f6d652e72652f62616467652e737667" alt="Awesome" data-canonical-src="https://awesome.re/badge.svg" style="max-width:100%;"></a>

12
website-src/src/index.js Normal file
View File

@ -0,0 +1,12 @@
const toggle = document.getElementById('toggle');
const body = document.body;
toggle.addEventListener('input', e => {
const isChecked = e.target.checked;
if (isChecked) {
body.classList.add('dark-theme');
} else {
body.classList.remove('dark-theme');
}
});

47
website-src/src/styles.css
View File

@ -7,6 +7,46 @@
box-sizing: border-box;
}
.toggle input[type='checkbox'] {
display: none;
}
.toggle label {
background-color: #777;
border: 2px solid #555;
border-radius: 50px;
cursor: pointer;
display: inline-block;
position: relative;
transition: all ease-in-out 0.3s;
width: 90px;
height: 40px;
}
.toggle label::after {
background-color: #555;
border-radius: 50%;
content: ' ';
cursor: pointer;
display: inline-block;
position: absolute;
left: 2px;
top: 2px;
transition: all ease-in-out 0.3s;
width: 32px;
height: 32px;
}
.toggle input[type='checkbox']:checked ~ label {
background-color: #00a0fc;
border-color: #006dc9;
}
.toggle input[type='checkbox']:checked ~ label::after {
background-color: #0054b0;
transform: translateX(50px);
}
body.dark-theme {
background-color: black
}
body {
width: 980px;
margin-right: auto;
@ -699,6 +739,13 @@
margin-bottom: 20px;
}
a:link {
color: olive;
}
a:visited{
color: olive;
}
.markdown-body .plan-choice-radio {
position: absolute;
left: 15px;