mobile optimisation

ui/css/mainstyle.css

@@ -14,6 +14,7 @@ html, body {
 	height: 100%;
 	margin: 0;
 	padding: 0;
+	font-size: calc(14pt + 0.395vw);
 }
 
 body {
@@ -37,19 +38,20 @@ body {
 	Styling for the main content element
 */
 .mainstyle {
-	margin-right: 10%;
+	margin-right: 5%;
-	margin-left: 10%;
+	margin-left: 5%;
 	margin-top: 2%;
 	margin-bottom: 2%;
-	padding: 10%;
+	padding: 5%;
-	padding-top: 5%;
+	padding-top: 3%;
-	padding-bottom: 5%;
+	padding-bottom: 3%;
 	border-color: black;
 	border-style: none;
 	border-radius: 50px;
 	background-color: rgba(195, 195, 229, 1);
 }
 
+
 /*
 	Styling for links and buttons
 */
@@ -99,14 +101,17 @@ body {
 }
 
 .title {
-	font-size: 350%;
+	text-align: center;
+	font-size: 2.3rem;
 }
 
 .subtitle {
-	font-size: 200%;
+	text-align: center;
+	font-size: 1.3rem;
 }
 
 .content {
+	font-size: 1rem;
 	width: 100%;
 	display: flex;
 	flex-direction: column;
@@ -117,12 +122,12 @@ body {
 }
 
 .content-title {
-	font-size: 300%;
+	font-size: 3rem;
 	text-align: center;
 }
 
 .content-title-small {
-	font-size: 200%;
+	font-size: 2rem;
 	text-align: center;
 }
 
@@ -133,31 +138,6 @@ body {
 	width: 100%;
 }
 
-/*
-	Align content side by side
-*/
-.sidebyside {
-	width: 100%;
-	display: flex;
-	flex-grow: 1;
-	gap: 5%;
-}
-
-.element {
-	width: 47%;
-	text-align: center;
-}
-
-.itemsInline {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	gap: 5%;
-	margin-top: 3%;
-	margin-bottom: 3%;
-}
-
 /* 
 	Bottom container styling
 */
@@ -168,4 +148,43 @@ body {
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
+}
+
+.element {
+	text-align: center;
+}
+
+
+@media only screen and (min-width: 999px) {
+	/*
+		Align content side by side
+	*/
+	.sidebyside {
+		width: 100%;
+		display: flex;
+		flex-grow: 1;
+		gap: 5%;
+	}
+
+	.element {
+		width: 47%;
+	}
+
+	.itemsInline {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		gap: 5%;
+		margin-top: 3%;
+		margin-bottom: 3%;
+	}
+
+	.mainstyle {
+		margin-right: 10%;
+		margin-left: 10%;
+		padding: 10%;
+		padding-top: 5%;
+		padding-bottom: 5%;
+	}
 }

ui/css/menustyle.css

@@ -7,17 +7,18 @@
 */
 
 .Menu {
+	font-size: 0.8rem;
 	margin-top: -1%;
 	padding: 2%;
 	padding-left: 0;
 	padding-right: 0;
 	width: 100%;
 	overflow: hidden;
-	background-color: #38444d;
+	background-color: rgba(56, 68, 77, 1);
 }
 
 .logo {
-	width: 5%;
+	height: 10vh;
 	display: inline-block;
 	margin-left: 2%;
 	position: relative;
@@ -25,85 +26,137 @@
 }
 
 .menu-container {
-	display: inline-flex;
+	display: none;
-	list-style-type: none;
+	width: 100vw;
-	width: 80%;
-	justify-content: center;
 }
 
-.stickybox {
+.active {
-	display: inline;
+    color: rgba(184, 214, 240, 1);
-	position: sticky;
+}
-	position: -webkit-sticky;
+
-	top: 0px;
+.listtoggle {
+    text-decoration: none;
+    color: black;
+    font-size: 2.5rem;
+    margin-right: 7%;
+    cursor: pointer;
+}
+
+.toggle-wrapper {
+    display: inline-flex;
+    height: 100%;
+    width: 70%;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.menu-container, .dropdown-menu {
+	list-style: none;
 }
 
 .menubutton {
 	text-decoration: none;
-	display: inline-block;
+	width: 80%;
-	padding: 20px;
+	display: block;
-	color: white;
+	padding: 2%;
-	border-radius: 0%;
+	color: white
-	background-color: rgba(0,0,0,0);
 }
 
 .menubutton:hover {
-	border-radius: 0%;
-	animation-name: fadein;
-	animation-duration: 300ms;
 	background-color: darkblue;
 }
 
-.subitems:hover {
+@media only screen and (min-width: 999px) {
-	animation-name: fadein;
+	.listtoggle, .toggle-wrapper {
-	animation-duration: 300ms;
+        display: none;
-	background-color: darkblue;
+    }
-}
 
-.dropdown-menu {
+	.menu-wrapper {
-	margin: 0;
+		display: inline-block;
-	padding: 0;
-	background-color: lightseagreen;
-	display: none;
-	list-style-type: none;
-	position: absolute;
-	min-width: 200px;
-}
-
-@keyframes fadein {
-	0%  {opacity: 0;}
-	100% {opacity: 1;}
-}
-
-@keyframes growDown {
-	0% {
-		transform: scaleY(0)
 	}
-	80% {
+
-		transform: scaleY(1.1)
+	.menu-container {
+		display: inline-flex;
+		list-style-type: none;
+		width: 80%;
+		justify-content: center;
 	}
-	100% {
+	
-		transform: scaleY(1)
+	.stickybox {
+		display: inline;
+		position: sticky;
+		position: -webkit-sticky;
+		top: 0px;
+	}
+	
+	.menubutton {
+		text-decoration: none;
+		display: inline-block;
+		padding: 20px;
+		width: inherit;
+		color: white;
+		border-radius: 0%;
+		background-color: rgba(0,0,0,0);
+	}
+	
+	.menubutton:hover {
+		border-radius: 0%;
+		animation-name: fadein;
+		animation-duration: 300ms;
+		background-color: darkblue;
+	}
+	
+	.subitems:hover {
+		animation-name: fadein;
+		animation-duration: 300ms;
+		background-color: darkblue;
+	}
+	
+	.dropdown-menu {
+		margin: 0;
+		padding: 0;
+		background-color: lightseagreen;
+		display: none;
+		list-style-type: none;
+		position: absolute;
+		min-width: 200px;
+	}
+	
+	@keyframes fadein {
+		0%  {opacity: 0;}
+		100% {opacity: 1;}
+	}
+	
+	@keyframes growDown {
+		0% {
+			transform: scaleY(0)
+		}
+		80% {
+			transform: scaleY(1.1)
+		}
+		100% {
+			transform: scaleY(1)
+		}
+	}
+	
+	@keyframes rotateMenu {
+		0% {
+			transform: rotateX(-90deg)
+		}
+		70% {
+			transform: rotateX(20deg) 
+		}
+		100% {
+			transform: rotateX(0deg) 
+		}
+	}
+	
+	.dropdown:hover .dropdown-menu {
+		display: block;
+		animation: rotateMenu 300ms ease-in-out forwards;
+	}
+	
+	.mainitems {
+		display: inline-block;
 	}
 }
-
-@keyframes rotateMenu {
-	0% {
-		transform: rotateX(-90deg)
-	}
-	70% {
-		transform: rotateX(20deg) 
-	}
-	100% {
-		transform: rotateX(0deg) 
-	}
-}
-
-.dropdown:hover .dropdown-menu {
-	display: block;
-	animation: rotateMenu 300ms ease-in-out forwards;
-}
-
-.mainitems {
-	display: inline-block;
-}

ui/js/basicanimations.js

@@ -24,13 +24,13 @@ function highlightLocation () {
     let pagename = $(location).attr('pathname')
     if ( pagename.slice(0, 8) == '/project' ) {
         $('#projects').css('background-color', 'darkblue');
-    } else if ( pagename.slice(0, 6) == '/about' || pagename == '/privacypolicy' ) {
+    } else if ( pagename.slice(0, 6) == '/about' || pagename.slice(0, 14) == '/privacypolicy' ) {
         $('#about').css('background-color', 'darkblue');
-    } else if ( pagename == '/' || pagename == '/index.html' ) {
+    } else if ( pagename.slice(0, 6) == '/' || pagename == '/index.html' ) {
         $('#home').css('background-color', 'darkblue');
-    } else if ( pagename == '/support' ) {
+    } else if ( pagename.slice(0, 6) == '/support' ) {
         $('#support').css('background-color', 'darkblue');
-    } else if ( pagename == '/services' ) {
+    } else if ( pagename.slice(0, 6) == '/services' ) {
         $('#services').css('background-color', 'darkblue');
     };
 }

ui/menu.html

@@ -8,6 +8,9 @@
 <body>
     <div class="Menu">
         <a href="/"><img src="/assets/Logo.png" class="logo"></a>
+        <div class="toggle-wrapper">
+            <a class="listtoggle" onclick="togglelist()">&#9776</a>
+        </div>
         <ul class="menu-container">
             <li class="mainitems"><a class="menubutton" id="home" href="/">Home</a></li>
             <li class="dropdown mainitems">
@@ -37,5 +40,22 @@
             <li class="mainitems"><a class="menubutton" id="support" href="/support">Support</a></li>
         </ul>
     </div>
-    <h3 style="text-align: center;">Note: This page is not yet optimised for mobile devices / vertical aspect ratios! Also, the backend is not yet running, so you cannot visit any other pages!</h3>
+    <script>
+        let previous = 1;
+        function togglelist() {
+            $( '.menu-container' ).slideToggle(300);
+            $( '.listtoggle' ).toggleClass( 'active' );
+        }
+
+        window.addEventListener( 'resize', function( event ) {
+            if ( $(window).width() > 999 ) { 
+                $( '.menu-container' ).slideDown();
+                previous = 1;
+            } else if ( $(window).width() < 999 && previous == 1 ) {
+                $( '.menu-container' ).slideUp();
+                $( '.listtoggle' ).removeClass( 'active' );
+                previous = 0;
+            };
+        }, true);
+    </script>
 </body>