13-11 #1

5 years ago · 8f3d1933dc
parent 29a4873e7d
commit 8f3d1933dc
7 changed files with 37 additions and 41 deletions
--- a/contact/index.html
+++ b/contact/index.html
@ -13,19 +13,6 @@
 </head>
 <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/javall.js"></script>
    <script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
--- a/css.css
+++ b/css.css
@ -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 */
 aside {
  float: left;
-  margin: 3rem 0 0 1rem;
  display: inline-block;
  width: 36%;
+  background-color: #454752;
 }
 /* Google search */
 #googleSearchBar {
@ -41,10 +30,11 @@ aside {
 /* Welcome */
 #welcome {
  padding: 1rem;
+  margin-left: 1rem;
 }
 /* Clock */
 #timeBox {
-   margin-top: 2rem;
+   margin: 2rem 0 0 1rem;
   padding: 1rem;
 }
 .time {
@ -59,13 +49,11 @@ footer {
  margin-top: 1rem;
  float: left;
 	display: flex!important;
-  align-items: stretch;
 }
 footer div::-webkit-scrollbar {
  display: none;
 }
 footer div {
-  flex-grow: 1;
  padding: 1rem;
  margin: 1rem;
  overflow: scroll;
@ -84,3 +72,22 @@ footer div:nth-of-type(2) button {
 footer div:nth-of-type(3) a button {
  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;
+  }
+}
--- a/index.html
+++ b/index.html
@ -23,13 +23,13 @@

 	<!-- Welcome -->
 	<aside>
-	<div id="welcome" class="box">
+	<div id="welcome">
 		<h1 id="timeWelcome">,</h1>
 	</div>

 	<!-- Clock -->
-	<div id="timeBox" class="box">
-		<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1> <br>
+	<div id="timeBox">
+		<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br>
 		<h1 id="date"></h1>
 	</div>
 </aside>
@ -99,7 +99,7 @@
 		</footer>

 	<!-- 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">
 		<h1 id='menuTitle'>Maak je eigen shortcut</h1>
 		<h4>Bedenk een naam voor je shortcut</h4><br>
--- a/js.js
+++ b/js.js
@ -38,13 +38,13 @@ function showSearch(e) {
 }

 function closeSearch() {
-  $("#opacityMenu").addClass("hidden lowerIndex")
+  $("#opacityMenu").addClass("lowerIndex")
  d("googleSearchBar").blur()
  d("googleSearchBar").classList.add("searchMove")
 }

 function openSearch(e) {
-  $("#opacityMenu").removeClass("hidden lowerIndex")
+  $("#opacityMenu").removeClass("lowerIndex")
  d("googleSearchBar").classList.remove("searchMove")
  d("googleSearchBar").focus()
 }
--- a/resources/css/navbar.css
+++ b/resources/css/navbar.css
@ -33,13 +33,14 @@
  background-color: #101012;
  margin: 0;
  padding: 0;
+  transition: opacity .5s;
  list-style: none;
 }
 .dropdownButton {
  width: 100%;
 }
 .navList:hover .dropdownList {
-  display: block!important;
+  opacity: 1!important;
 }
 .navigation button:hover {
  color: #9c9c9c!important;
--- a/resources/css/shortcuts.css
+++ b/resources/css/shortcuts.css
@ -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 {
    width: 94%!important;
    left: 1rem!important;
    margin-left: 0px!important;
  }
  #shortcutBox {
-    width: 90%!important;
+    width: 94%!important;
    display: block!important;
    height: 20rem!important;
+    margin: 2rem 0 0 1rem!important;
  }
 }
 /* Shortcuts */
 #shortcutBox {
-  margin: 3rem 0 0 2%;
+  margin: 3rem 0 0 2rem;
  width: 59%;
  float: left;
  padding: 1rem;
@ -39,11 +40,11 @@
  cursor: pointer;
  transition: background-color .5s, border .5s;
 }
-.shortcutImgBox:hover {
+#shortcutBox div:hover {
  background-color: #3d3e47;
  border-color: #3d3e47;
 }
-.shortcutImgBox:hover .removeShortcut {
+#shortcutBox div:hover .removeShortcut {
  display: inline;
 }
 .shortcutText {
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@ -29,7 +29,7 @@ Navbar.forEach(i=>{
  navList.appendChild(navButton)
  var dropdownList = c("ul")
    dropdownList.className = "dropdownList"
-    dropdownList.style = "display:none;"
+    dropdownList.style = "opacity: 0;"
  if (typeof i.dropdown == "object") {
        i.dropdown.forEach(d=>{
          var dropdownListItem = c("li");