add-license-1
Guuq 5 years ago
parent 29a4873e7d
commit 8f3d1933dc

@ -13,19 +13,6 @@
</head> </head>
<body> <body>
<label class="appearance" title="Change the appearance of the webpage">
<input type="checkbox">
<span class="appearanceSlider"></span>
</label>
<ul>
<ol>
<li>Coffee</li>
<li>Tea<li>
<li>Milk</li>
</ol>
</ul>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>

@ -1,20 +1,9 @@
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
/* Support for normal mobile devices */
@media screen and (min-width:0px) and (max-width:960px) {
#timeBox {
width: 94%!important
}
}
/* Main CSS */ /* Main CSS */
aside { aside {
float: left; float: left;
margin: 3rem 0 0 1rem;
display: inline-block; display: inline-block;
width: 36%; width: 36%;
background-color: #454752;
} }
/* Google search */ /* Google search */
#googleSearchBar { #googleSearchBar {
@ -41,10 +30,11 @@ aside {
/* Welcome */ /* Welcome */
#welcome { #welcome {
padding: 1rem; padding: 1rem;
margin-left: 1rem;
} }
/* Clock */ /* Clock */
#timeBox { #timeBox {
margin-top: 2rem; margin: 2rem 0 0 1rem;
padding: 1rem; padding: 1rem;
} }
.time { .time {
@ -59,13 +49,11 @@ footer {
margin-top: 1rem; margin-top: 1rem;
float: left; float: left;
display: flex!important; display: flex!important;
align-items: stretch;
} }
footer div::-webkit-scrollbar { footer div::-webkit-scrollbar {
display: none; display: none;
} }
footer div { footer div {
flex-grow: 1;
padding: 1rem; padding: 1rem;
margin: 1rem; margin: 1rem;
overflow: scroll; overflow: scroll;
@ -84,3 +72,22 @@ footer div:nth-of-type(2) button {
footer div:nth-of-type(3) a button { footer div:nth-of-type(3) a button {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
/* Support for normal mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
aside {
width: 96%!important;
}
footer {
width: 98%!important;
display: block!important;
margin: 0!important;
}
footer div {
margin-top: 2rem!important;
}
}

@ -23,13 +23,13 @@
<!-- Welcome --> <!-- Welcome -->
<aside> <aside>
<div id="welcome" class="box"> <div id="welcome">
<h1 id="timeWelcome">,</h1> <h1 id="timeWelcome">,</h1>
</div> </div>
<!-- Clock --> <!-- Clock -->
<div id="timeBox" class="box"> <div id="timeBox">
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1> <br> <h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br>
<h1 id="date"></h1> <h1 id="date"></h1>
</div> </div>
</aside> </aside>
@ -99,7 +99,7 @@
</footer> </footer>
<!-- Add shortcut Menu --> <!-- Add shortcut Menu -->
<div id="opacityMenu" onclick="closeMenu()" class="menu hidden lowerIndex"></div> <div id="opacityMenu" onclick="closeMenu()" class="menu lowerIndex"></div>
<div id="addShortcutMenu" class="box menu hidden lowerIndex"> <div id="addShortcutMenu" class="box menu hidden lowerIndex">
<h1 id='menuTitle'>Maak je eigen shortcut</h1> <h1 id='menuTitle'>Maak je eigen shortcut</h1>
<h4>Bedenk een naam voor je shortcut</h4><br> <h4>Bedenk een naam voor je shortcut</h4><br>

@ -38,13 +38,13 @@ function showSearch(e) {
} }
function closeSearch() { function closeSearch() {
$("#opacityMenu").addClass("hidden lowerIndex") $("#opacityMenu").addClass("lowerIndex")
d("googleSearchBar").blur() d("googleSearchBar").blur()
d("googleSearchBar").classList.add("searchMove") d("googleSearchBar").classList.add("searchMove")
} }
function openSearch(e) { function openSearch(e) {
$("#opacityMenu").removeClass("hidden lowerIndex") $("#opacityMenu").removeClass("lowerIndex")
d("googleSearchBar").classList.remove("searchMove") d("googleSearchBar").classList.remove("searchMove")
d("googleSearchBar").focus() d("googleSearchBar").focus()
} }

@ -33,13 +33,14 @@
background-color: #101012; background-color: #101012;
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: opacity .5s;
list-style: none; list-style: none;
} }
.dropdownButton { .dropdownButton {
width: 100%; width: 100%;
} }
.navList:hover .dropdownList { .navList:hover .dropdownList {
display: block!important; opacity: 1!important;
} }
.navigation button:hover { .navigation button:hover {
color: #9c9c9c!important; color: #9c9c9c!important;

@ -1,18 +1,19 @@
@media screen and (min-width:0px) and (max-width:960px) { @media screen and (min-width:0px) and (max-width:1000px) {
#addShortcutMenu { #addShortcutMenu {
width: 94%!important; width: 94%!important;
left: 1rem!important; left: 1rem!important;
margin-left: 0px!important; margin-left: 0px!important;
} }
#shortcutBox { #shortcutBox {
width: 90%!important; width: 94%!important;
display: block!important; display: block!important;
height: 20rem!important; height: 20rem!important;
margin: 2rem 0 0 1rem!important;
} }
} }
/* Shortcuts */ /* Shortcuts */
#shortcutBox { #shortcutBox {
margin: 3rem 0 0 2%; margin: 3rem 0 0 2rem;
width: 59%; width: 59%;
float: left; float: left;
padding: 1rem; padding: 1rem;
@ -39,11 +40,11 @@
cursor: pointer; cursor: pointer;
transition: background-color .5s, border .5s; transition: background-color .5s, border .5s;
} }
.shortcutImgBox:hover { #shortcutBox div:hover {
background-color: #3d3e47; background-color: #3d3e47;
border-color: #3d3e47; border-color: #3d3e47;
} }
.shortcutImgBox:hover .removeShortcut { #shortcutBox div:hover .removeShortcut {
display: inline; display: inline;
} }
.shortcutText { .shortcutText {

@ -29,7 +29,7 @@ Navbar.forEach(i=>{
navList.appendChild(navButton) navList.appendChild(navButton)
var dropdownList = c("ul") var dropdownList = c("ul")
dropdownList.className = "dropdownList" dropdownList.className = "dropdownList"
dropdownList.style = "display:none;" dropdownList.style = "opacity: 0;"
if (typeof i.dropdown == "object") { if (typeof i.dropdown == "object") {
i.dropdown.forEach(d=>{ i.dropdown.forEach(d=>{
var dropdownListItem = c("li"); var dropdownListItem = c("li");