diff --git a/website/dist/about/index.html b/website/dist/about/index.html index 02deb70..801d209 100644 --- a/website/dist/about/index.html +++ b/website/dist/about/index.html @@ -4,13 +4,13 @@ - About :: myevent - + About :: myevent + @@ -18,6 +18,8 @@

About myevent

-
+
+

myevent is a free and open source event management solution that you can host on your own hardware, if you want to. It is mainly written in node.js, but, as a webapp, uses also lots of HTML and CSS. For storing the customer / userdata, you may choose between using MySQL and a JSON based custom database, such that this project may be used in more cases. Whilst it is recommended to use MySQL with this project, using the JSON based database can be an easy to set up alternative if you are not serving that many customers.

+
\ No newline at end of file diff --git a/website/dist/assets/up.png b/website/dist/assets/up.png new file mode 100644 index 0000000..96ab083 Binary files /dev/null and b/website/dist/assets/up.png differ diff --git a/website/dist/assets/up.svg b/website/dist/assets/up.svg new file mode 100644 index 0000000..d7896c6 --- /dev/null +++ b/website/dist/assets/up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/dist/css/navstyle.css b/website/dist/css/navstyle.css index 7fed4b6..85cec9b 100644 --- a/website/dist/css/navstyle.css +++ b/website/dist/css/navstyle.css @@ -10,61 +10,66 @@ /* Default rules that are set for mobile interfaces */ +.nav-wrapper { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + position: fixed; + display: block; + z-index: 2; + width: 100%; + top: 0; + bottom: 0; + left: 1; + right: 1; +} + .nav-container { width: 100%; height: 100%; - background-color: blue; -} - -.toggle-wrapper { - display: inline-flex; - height: 100%; - width: 80%; - align-items: center; - justify-content: flex-end; -} - - -/* Logo image and logo link (aka logo-container)*/ -.logo-container { - margin: 0.5%; - height: 80%; - display: inline-block; - width: fit-content; -} - -.mobile-wrapper { display: flex; justify-content: center; align-items: center; - height: 100%; - width: 100%; + flex-direction: column; +} + +.menuActive { + overflow: hidden; +} + + + +/* Logo image and logo link (aka logo-container)*/ +.logo-container-small { + margin-left: 5%; + margin-right: auto; } .logo { display: block; - width: auto; - height: 100%; + width: 60vw; + height: auto; + margin: 0; } +.logo-small { + display: block; + width: auto; + height: 12vh; + margin: 0; +} + + .listtoggle { text-decoration: none; - color: black; + color: rgb(168, 212, 253); font-size: 5vh; - margin-right: 7%; cursor: pointer; + margin-right: 5%; + position: relative; + z-index: 3; } -.active { - color: rgba(184, 214, 240, 1); -} - -/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */ -.nav-menu { - background-color: rgba(245, 245, 245, 0.9); - display: none; - width: 100%; -} /* This is the list actually containing the menu items */ .nav-list { @@ -78,62 +83,38 @@ .navitem { text-decoration: none; text-align: center; - color: black; - font-size: 1.3rem; - padding-top: 2%; - padding-bottom: 2%; - width: 100%; + color: rgb(107, 107, 107);; + font-size: 1.4rem; + width: fit-content; + padding: 2%; } -/* -.navitem:hover { - background-color: rgba(184, 214, 240, 1); -}*/ +.inactive { + transition: 1s; + color: white; + font-size: 1.3rem; +} + +.inactive:hover { + font-size: 1.6rem; + color: rgb(107, 107, 107); + transition: 0.4s; +} + +/* ~ --> all next & + --> next */ +.shaded { + color: rgb(107, 107, 107); + transition: 0.3s; +} -/* - Media queries to optimise for desktop -*/ @media only screen and (min-width: 999px) { - /* Top navigation bar container */ .nav-container { - display: flex; - justify-content: center; - align-items: center; - } - - /* div containing the nav-menu unordered list */ - .nav-wrapper { - height: 100%; - width: 80%; - margin: auto; - display: inline-flex; - align-items: center; - justify-content: center; - } - - .listtoggle, .toggle-wrapper { - display: none; - } - - .nav-menu { - display: flex; - background-color: rgba(0, 0, 0, 0); - } - - .nav-list { flex-direction: row; } - .mobile-wrapper { - width: fit-content; - margin-left: 3%; - } - - .navitem { - font-size: 0.9rem; - width: fit-content; - padding: 1%; - padding-left: 2%; - padding-right: 2% + .logo { + width: auto; + height: 70vh; + margin-left: 10%; } } diff --git a/website/dist/css/style.css b/website/dist/css/style.css index 145dc14..3e435dd 100644 --- a/website/dist/css/style.css +++ b/website/dist/css/style.css @@ -17,7 +17,7 @@ html, body { } body { - background-color: rgb(133, 191, 245); + background-color: rgb(168, 212, 253); } @@ -35,10 +35,10 @@ body { align-items: center; justify-content: center; width: 90%; - padding: 2%; + padding: 4%; margin: 3%; margin-bottom: 0%; - border-radius: 50px 50px 0px 0px; + border-radius: 50px; } /* @@ -48,7 +48,6 @@ body { width: 90%; padding: 2%; margin: 3%; - background-color: rgba(142, 156, 237, 0.644); border-radius: 0px 0px 50px 50px; margin-top: 0; } @@ -73,15 +72,36 @@ body { } #nav { - position: relative; + position: sticky; z-index: 1; - height: 25vh; + height: 15vh; + width: 100%; + background-color: white; + display: flex; + justify-content: flex-end; + align-items: center; +} + +#backToTop { + border-radius: 500px; + border-width: 1px; + background-color: rgb(34, 72, 143); + background-image: url('/assets/up.svg'); + background-size: cover; + width: calc(30px + 0.5vw); + height: calc(30px + 0.5vw); + padding: 0.2%; + float: right; + color: white; + position: fixed; + top: 90%; + left: 93%; + opacity: 0; + cursor: default; + transition: 0.5s } @media only screen and (min-width: 999px) { - #nav { - height: 15vh; - } .content, .title-wrapper { width: 70%; diff --git a/website/dist/index.html b/website/dist/index.html index aa80de8..3826f6e 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -8,15 +8,13 @@ - - - +

myevent

@@ -60,5 +58,29 @@
+ + + \ No newline at end of file diff --git a/website/dist/js/index.js b/website/dist/js/index.js index f51026e..f15bb7c 100644 --- a/website/dist/js/index.js +++ b/website/dist/js/index.js @@ -7,7 +7,3 @@ * * */ - -$( document ).ready( function () { - $( '#nav' ).load( '/nav.html' ); -} ); \ No newline at end of file diff --git a/website/dist/nav.html b/website/dist/nav.html index 4454853..b4d4cf0 100644 --- a/website/dist/nav.html +++ b/website/dist/nav.html @@ -8,59 +8,42 @@ -
-
- -
- ☰ -
-
-
-
-
- Documentation - Download - About - GitHub -
+
+
+ +
+ Home + Documentation + Download + About + GitHub
+ logo + ☰ \ No newline at end of file