first commit
This commit is contained in:
commit
91bee133b1
|
|
@ -0,0 +1,4 @@
|
|||
## Lux
|
||||
### Custom startpage with a dark and light theme for your favorite and most visited websites
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(){var t,e=document.getElementById("darkSwitch");if(e){t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme"),e.addEventListener("change",function(t){e.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})}}();
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="icon" href="fav.png">
|
||||
<title>~</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="checkbox_position custom-control custom-switch">
|
||||
<input type="checkbox" class="check_box" id="darkSwitch">
|
||||
<label class="custom-control-label" for="darkSwitch"></label>
|
||||
</div>
|
||||
<div class="source">
|
||||
<a class="s" href="https://google.com"target="_parent" rel="noopener noreferrer" ><i class="fab fa-google"></i></a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<n>social</n>
|
||||
<a id="twitter" href="https://twitter.com/"target="_parent" rel="noopener noreferrer" >
|
||||
<i class="fab fa-twitter"></i> twitter
|
||||
</a>
|
||||
<a id="class" href="https://classroom.google.com/u/1/h" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fas fa-chalkboard"></i> class
|
||||
</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<n>media</n>
|
||||
<a id="gmail" href="https://mail.google.com/mail/ca/u/0/#inbox" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fas fa-inbox"></i> gmail
|
||||
</a>
|
||||
<a id="reddit" href="https://www.reddit.com/" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fab fa-reddit"></i> reddit
|
||||
</a>
|
||||
</div><div class="content">
|
||||
<n>video</n>
|
||||
<a id="twitch" href="https://www.twitch.tv/" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fab fa-twitch"></i> twitch
|
||||
</a>
|
||||
|
||||
<a id="youtube" href="https://www.youtube.com/" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fab fa-youtube"> </i> youtube
|
||||
</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
<n>routine</n>
|
||||
<a id="news" href="https://news.google.com" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fas fa-newspaper"></i> news
|
||||
<a id="github" href="https://www.github.com/" target="_parent" rel="noopener noreferrer">
|
||||
<i class="fab fa-github"></i> github</a>
|
||||
</div>
|
||||
<div class="search" id="srch">
|
||||
<form action="https://google.com/search" method="get">
|
||||
<input type="text" name="q" autocomplete="off" placeholder="type something...">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="dark-mode.js"></script>
|
||||
<script src="search_engines.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Open+Sans|Roboto:400&display=swap&subset=cyrillic');
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
|
||||
|
||||
/* @import url('file:///home/ma/.cache/wal/colors.css'); /* uncomment if using pywal */
|
||||
|
||||
#reddit:hover {color: #ff4500;}
|
||||
|
||||
#youtube:hover {color: #ff0000;}
|
||||
|
||||
#twitter:hover {color: #1da1f2;}
|
||||
|
||||
#twitch:hover {color: #9146ff;}
|
||||
|
||||
#github:hover {color: #6f42c1;}
|
||||
|
||||
#class:hover {color: #28a745;}
|
||||
|
||||
#news:hover {color: #005cc5;}
|
||||
|
||||
#gmail:hover {color: #d73a49;}
|
||||
:root {
|
||||
--roboto: 'Roboto', sans-serif;;
|
||||
--noto-sans: 'Noto Sans', sans-serif;;
|
||||
--open-sans: 'Open Sans', sans-serif;
|
||||
--background: #f8f8f8;
|
||||
/* --foreground: var(--color0);
|
||||
--second: var(--color2);
|
||||
--header: var(--color1); /* uncomment if using pywal or replace the lines below with these lines */
|
||||
--foreground: #333333;
|
||||
--second: #999999;
|
||||
--header: #3a7e99;
|
||||
--source: #bfbfbf;
|
||||
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--roboto: 'Roboto', sans-serif;;
|
||||
--noto-sans: 'Noto Sans', sans-serif;;
|
||||
--open-sans: 'Open Sans', sans-serif;
|
||||
/* --background: var(--color0);
|
||||
--foreground: var(--color7);
|
||||
--second: var(--color2);
|
||||
--header: var(--color1); /* uncomment if using pywal or replace the lines below with these lines */
|
||||
--background: #1a1a1a;
|
||||
--foreground: #bfbfbf;
|
||||
--second: #999999;
|
||||
--header: #93C4D1;
|
||||
--source: #4d4d4d;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.parent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
line-height: 35px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.content {
|
||||
word-spacing: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.source {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.s {
|
||||
font-family: var(--roboto);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--source);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
n {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
width: 50px;
|
||||
font-family: var(--roboto);
|
||||
font-size: 18px;
|
||||
color: var(--header);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
transition: .2s;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: var(--roboto);
|
||||
font-size: 18px;
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
font-family: var(--roboto);
|
||||
color: var(--header);
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--roboto);
|
||||
font-size: 18px;
|
||||
color: var(--foreground);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checkbox_position {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.check_box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.check_box + label {
|
||||
background: url('https://api.iconify.design/ion:moon.svg?color=%23bfbfbf') no-repeat center center / contain;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
display:inline-block;
|
||||
transition: .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check_box:hover + label {
|
||||
background: url('https://api.iconify.design/ion:moon.svg?color=%23f0dd18') no-repeat center center / contain;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.check_box:checked + label {
|
||||
background: url('https://api.iconify.design/ion:sunny.svg?color=%23bfbfbf') no-repeat center center / contain;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.check_box:checked:hover + label {
|
||||
background: url('https://api.iconify.design/ion:sunny.svg?color=%23ffc914') no-repeat center center / contain;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
display: inline-block;
|
||||
}
|
||||
Loading…
Reference in New Issue