first commit

2020-12-18 14:41:59 -08:00 · 2020-12-18 14:41:59 -08:00 · 91bee133b1
commit 91bee133b1
5 changed files with 252 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/README.md
+++ b/README.md
@ -0,0 +1,4 @@
+## Lux
+### Custom startpage with a dark and light theme for your favorite and most visited websites
+
+![Preview](https://i.imgur.com/askpJmz.png)
--- a/dark-mode.js
+++ b/dark-mode.js
@ -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"))})}}();
--- a/index.html
+++ b/index.html
@ -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>
--- a/style.css
+++ b/style.css
@ -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;
+}
				`@ -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"))})}}();`