diff --git a/css.css b/css.css index b5deb34..bd9f2b9 100644 --- a/css.css +++ b/css.css @@ -3,7 +3,7 @@ section { float: left; display: inline-block; width: 50%; - margin-top: 3.2rem; + margin-top: 55px; height: 95vh; overflow: scroll; overflow-x: hidden; @@ -12,11 +12,11 @@ section::-webkit-scrollbar { display: none; } svg { - margin-top: 3.2rem; + margin-top: 49px; fill: #454752; stroke-width: 1; stroke: #454752; - height: 95vh; + height: 95.6vh; } /* Clock */ #timeBox { @@ -24,20 +24,55 @@ svg { padding: 1rem; font-family: 'Open Sans', sans-serif; } -section div p { +.time { display: inline-block; - font-size: 8rem; + font-size: 7rem; margin: 0; } #date { font-size: 2rem; margin: 0; } +/* Feedback */ +#feedbackContent { + background-color: #33353d; + width: 100%; +} +.feedback { + display: inline-block; + padding: 14vh 0 14vh 5%; + width: 50%; + height: 100%; +} +#feedbackOne { + border-right: #454752 4px solid; +} +.user { + display: inline-block; + height: 100%; + width: 10rem; +} +.userImg { + width: 8rem; + height: 8rem; + margin-bottom: 2rem; +} +.userFeedback { + font-family: 'Open Sans'; + display: inline-block; + vertical-align: top; + margin-left: 2rem; + padding-left: 1rem; + border-left: #ededed 2px solid; + width: 30rem; + word-wrap: break-word; +} /* Footer */ footer { background-color: black; + width: 100%; + position: relative; display: flex!important; - height: 20rem; font-family: 'Open Sans', sans-serif; } footer div { @@ -55,39 +90,55 @@ footer ul { footer li { margin-top: 1rem; } -footer p { - font-size: 13px; +#copyright { + font-size: 15px; position: absolute; - margin: 0; - bottom: -20rem; + display: inline-block; + margin: auto; + bottom: 1rem; right: 1rem; white-space: nowrap; + vertical-align: baseline; } /* Mobile support */ @viewport { width: device-width; zoom: 1.0; } +@media screen and (min-width:0px) and (max-width:1525px) { + .feedback { + display: block!important; + width: 100%!important; + padding: 5vh 0 5vh; + border-right: 0!important; + } + .user { + margin-left: calc(50% - 20rem); + } + #feedbackOne { + border-bottom: #454752 4px solid; + } +} /* Support for mobile devices */ @media screen and (min-width:0px) and (max-width:1000px) { section { width: 100%!important; - height: 80vh!important ; } svg { display: none; } .time { - font-size: 6rem!important; + font-size: 4rem!important; } footer { float: left; width: 100%; + display: block!important; } footer div { margin: 3rem 0 1rem 4rem!important; } - footer p { - bottom: -12rem!important; + #feedbackContent { + float: left; } } diff --git a/index.html b/index.html index 86cc2f8..712f4b5 100644 --- a/index.html +++ b/index.html @@ -22,11 +22,11 @@
-

uren

:minuten

:seconden


+

uren

:minuten

:seconden


datum


- + @@ -56,7 +56,7 @@ - + @@ -69,6 +69,23 @@ + +
+ +
+
@@ -97,7 +114,8 @@
  • Cloudflare
    • -

    © 2019 Guus van Meerveld

    + +
    diff --git a/js.js b/js.js index b85e8de..c673f1a 100644 --- a/js.js +++ b/js.js @@ -7,6 +7,12 @@ function showTime() { var date = new Date() var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"] var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] + if (date.getHours() < 10) { + d("hours").innerHTML = "0" + date.getHours() + ":" + } + else { + d("hours").innerHTML = date.getHours() + ":" + } if (date.getMinutes() < 10) { d("mins").innerHTML = "0" + date.getMinutes() + ":" } @@ -19,7 +25,6 @@ function showTime() { else { d("secs").innerHTML = date.getSeconds() } - d("hours").innerHTML = date.getHours() + ":" d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()]; setTimeout(showTime, 1000); } diff --git a/playground/css.css b/playground/css.css index 473cac0..6c4c3dd 100644 --- a/playground/css.css +++ b/playground/css.css @@ -18,8 +18,7 @@ width: 100%; } #codeContent div { - margin-left: 5%; - margin-right: 5%; + margin-left: calc(50% - 45%); width: 90%; height: 85%; } @@ -52,6 +51,10 @@ display: block!important; width: 100%; } + #codeContent button { + width: 4rem!important; + font-size: 11px; + } iframe { width: 100%!important; } diff --git a/resources/css/cssall.css b/resources/css/cssall.css index b0c30a1..38142f3 100644 --- a/resources/css/cssall.css +++ b/resources/css/cssall.css @@ -2,7 +2,7 @@ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); html { - height: 100%; + min-height: 100%; } ::selection { background: #6ec1b3; @@ -15,7 +15,7 @@ body { color: white!important; overflow-x: hidden; width: 100%; - height: 100%; + min-height: 100vh; background-color: #19191C; } /* Search */ @@ -72,28 +72,36 @@ a:hover { background-color: #454752; } .button { - border: 2px #4c8a80 solid; background-color: #4c8a80; + border: 0; + border-bottom: #37655e 5px solid; color: white; outline: 0!important; border-radius: 0.2rem; - transition: border .3s, background-color .3s; + transition: border .3s ease, background-color .3s; } .button:hover { - background-color: #386661; - border: #386661 2px solid; + background-color: #427a71; +} +.button:active { + border: 0; + border-top: #37655e 5px solid; } .cancelButton { - border: 2px #b52c22 solid; + border: 0; + border-bottom: #96231b 5px solid; background-color: #b52c22; color: white; outline: 0!important; border-radius: 0.2rem; - transition: border .3s, background-color .3s; + transition: border .3s ease, background-color .3s, border .3s; } .cancelButton:hover { - background-color: #8a1e16; - border: #8a1e16 2px solid; + background-color: #a3281f; +} +.cancelButton:active { + border-top: #96231b 5px solid; + border-bottom: 0; } .input { border: 0px #363840 solid; diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css index f987392..7641312 100644 --- a/resources/css/shortcuts.css +++ b/resources/css/shortcuts.css @@ -1,30 +1,31 @@ /* Shortcuts */ -section span button { +.shortcuts button { margin: 0 0 1rem 1rem; width: 12rem; max-height: 5.3rem; padding: 1rem; color: white; background-color: #363840; - border: #363840 2px solid; + border: #363840 0px solid; border-radius: .5rem; display: inline-block; transition: background-color .5s, border .5s; } -section span button::-webkit-scrollbar { +.shortcuts button::-webkit-scrollbar { display: hidden; } -section span button:hover { +.shortcuts button:hover { background-color: #3d3e47; border-color: #3d3e47; } -section span button:hover .removeShortcut { +.shortcuts button:hover .removeShortcut { display: inline; } -section span button:focus { +.shortcuts button:focus { outline: none; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset; } -section span img { +.shortcuts img { width: 3rem; margin-right: 1rem; height: 3rem; diff --git a/resources/img/error.png b/resources/img/error.png deleted file mode 100644 index 115931e..0000000 Binary files a/resources/img/error.png and /dev/null differ diff --git a/resources/img/rocket.png b/resources/img/rocket.png deleted file mode 100644 index aa39c77..0000000 Binary files a/resources/img/rocket.png and /dev/null differ diff --git a/resources/img/user.png b/resources/img/user.png new file mode 100644 index 0000000..abf396c Binary files /dev/null and b/resources/img/user.png differ diff --git a/vuurjongen-en-watermeisje-4/index.html b/vuurjongen-en-watermeisje-4/index.html index b88f96f..c3d7a31 100644 --- a/vuurjongen-en-watermeisje-4/index.html +++ b/vuurjongen-en-watermeisje-4/index.html @@ -10,16 +10,18 @@ Vuurjongen en Watermeisje - - + + - +