diff --git a/css.css b/css.css index 3251de4..fb1f3d6 100644 --- a/css.css +++ b/css.css @@ -1,10 +1,17 @@ /* Main CSS */ aside { float: left; + height: 95vh; display: inline-block; - width: 36%; + width: 50%; background-color: #454752; } +svg { + fill: #454752; + stroke-width: 1; + stroke: #454752; + height: 95vh; +} /* Google search */ #googleSearchBar { background-color: #ededed; @@ -27,57 +34,53 @@ aside { opacity: 0; top: 0px!important; } -/* Welcome */ -#welcome { - padding: 1rem; - margin-left: 1rem; -} /* Clock */ #timeBox { - margin: 2rem 0 0 1rem; + margin-left: 1rem; padding: 1rem; + font-family: 'Open Sans', sans-serif; } .time { display: inline-block; - font-size: 5rem; + font-size: 8rem; } #date { - font-size: 150%; + font-size: 2rem; } /* Footer */ footer { - margin-top: 1rem; - float: left; + background-color: black; display: flex!important; -} -footer div::-webkit-scrollbar { - display: none; + height: 35vh; + font-family: 'Open Sans', sans-serif; } footer div { - padding: 1rem; - margin: 1rem; - overflow: scroll; - overflow-x: hidden; + margin: 5rem 0 0 8rem; + display: inline-block; +} +footer h4 { + color: gray; } -/* Info blocks */ -footer div:nth-of-type(2) textarea { - width: 98%; - margin-top: 8px; - height: 6rem; +footer ul { + list-style-type: none; + margin-top: 20px; + padding: 0; } -footer div:nth-of-type(2) button { - width: 98%; - margin-top: 4px; +footer a { + transition: color .5s; +} +footer li { + margin-top: 1rem; } -footer div:nth-of-type(3) a button { - margin-bottom: 5px; +footer a:hover { + color: gray!important; } /* Mobile support */ @viewport { width: device-width; zoom: 1.0; } -/* Support for normal mobile devices */ +/* Support for mobile devices */ @media screen and (min-width:0px) and (max-width:1000px) { aside { width: 96%!important; diff --git a/index.html b/index.html index 86db1d7..ec25d18 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ Home + @@ -21,82 +22,75 @@ - + + + + + + + + + + + - -
- -
-

Youtube

-
-
-

Magister

-
-
-

Onedrive

-
-
-

Codepanta

-
-
-

Reddit

-
-
-

Spotify

-
-
-

W3Schools

-
-
-

Maps

-
-
-

Translate

-
- -

Voeg toe

-
+ + + - - @@ -110,12 +104,12 @@ - - - - - - + + + + + + diff --git a/js.js b/js.js index 4a22a2a..c2f1073 100644 --- a/js.js +++ b/js.js @@ -49,27 +49,6 @@ function openSearch(e) { d("googleSearchBar").focus() } -// Welcome -function setWelcome() { - var html = d("timeWelcome").innerHTML - var date = new Date() - if (date.getHours() < 6) { - var welcome = "Goedenacht" - } - else if (date.getHours() > 18) { - var welcome = "Goedeavond" - } - else if (date.getHours() > 12) { - var welcome = "Goedemiddag" - } - else if (date.getHours() > 6) { - var welcome = "Goedemorgen" - } - html = welcome + html -} - -setWelcome(); - // Clock function showTime() { var date = new Date() diff --git a/resources/css/navbar.css b/resources/css/navbar.css index 99990fd..4e25b4f 100644 --- a/resources/css/navbar.css +++ b/resources/css/navbar.css @@ -33,17 +33,16 @@ background-color: #101012; margin: 0; padding: 0; - transition: opacity .5s; list-style: none; } .dropdownButton { width: 100%; } .navList:hover .dropdownList { - opacity: 1!important; + display: block!important; } .navigation button:hover { - color: #9c9c9c!important; + color: #4c8a80!important; } /* Switch */ diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css index 250c8ad..440315b 100644 --- a/resources/css/shortcuts.css +++ b/resources/css/shortcuts.css @@ -4,35 +4,13 @@ left: 1rem!important; margin-left: 0px!important; } - #shortcutBox { - width: 94%!important; - display: block!important; - height: 20rem!important; - margin: 2rem 0 0 1rem!important; - } } /* Shortcuts */ -#shortcutBox { - margin: 3rem 0 0 2rem; - width: 59%; - float: left; - padding: 1rem; - display: inline-block; - height: 57rem; - overflow: scroll; - overflow-x: hidden; -} -#shortcutBox::-webkit-scrollbar { - display: none; -} -.shortcutImg { - width: 3rem; - height: 3rem; -} -#shortcutBox div { +aside span button { margin: 0 0 1rem 1rem; width: 12rem; padding: 1rem; + color: white; background-color: #363840; border: #363840 2px solid; border-radius: .5rem; @@ -40,14 +18,21 @@ cursor: pointer; transition: background-color .5s, border .5s; } -#shortcutBox div:hover { +aside span button:hover { background-color: #3d3e47; border-color: #3d3e47; } -#shortcutBox div:hover .removeShortcut { +aside span button:hover .removeShortcut { display: inline; } -.shortcutText { +aside span button:focus { + outline: none; +} +aside span img { + width: 3rem; + height: 3rem; +} +aside span p { display: inline-block; margin-left: 1rem; margin-bottom: 0!important; @@ -69,7 +54,7 @@ left: 0px; top: 0px; height: 100vh; - opacity: .7; + opacity: .5; background-color: black; display: inline-block; z-index: 1; diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js index ec824c0..909966f 100644 --- 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 = "opacity: 0;" + dropdownList.style = "display: none;" if (typeof i.dropdown == "object") { i.dropdown.forEach(d=>{ var dropdownListItem = c("li"); diff --git a/resources/js/shortcuts.js b/resources/js/shortcuts.js index 2ca0fb5..1a6b6d7 100644 --- a/resources/js/shortcuts.js +++ b/resources/js/shortcuts.js @@ -1,7 +1,7 @@ // Toggle Menu function openMenu() { $(".menu").removeClass("lowerIndex"); - $(".menu").removeClass("hidden"); + $("#addShortcutMenu").removeClass("hidden"); d("shortcutLink").setAttribute('placeholder', 'https://example.com') d("shortcutName").setAttribute('placeholder', 'Example Website') } @@ -10,7 +10,7 @@ function closeMenu() { setTimeout(function () { $(".menu").addClass("lowerIndex"); }, 500) - $(".menu").addClass("hidden"); + $("#addShortcutMenu").addClass("hidden"); } }