diff --git a/.idea/workspace.xml b/.idea/workspace.xml index b54ccf1..729ec1d 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -60,7 +60,7 @@ 1679674447095 - + diff --git a/StartPage.js b/StartPage.js index 7912b37..6ebe4bc 100644 --- a/StartPage.js +++ b/StartPage.js @@ -9,8 +9,13 @@ function showMobileMenuBar() } else { - document.getElementById("mobileMenuBar").style.display = "none"; - document.getElementById("mobileMenuBarButton").style.backgroundColor = "rgba(198, 119, 70, 0)"; - menuActive = false; + hideMobileMenuBar(); } +} + +function hideMobileMenuBar() +{ + document.getElementById("mobileMenuBar").style.display = "none"; + document.getElementById("mobileMenuBarButton").style.backgroundColor = "rgba(198, 119, 70, 0)"; + menuActive = false; } \ No newline at end of file diff --git a/index.html b/index.html index b0fd810..a73817e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
diff --git a/navigationStyle.css b/navigationStyle.css index 6088971..a4f77f7 100644 --- a/navigationStyle.css +++ b/navigationStyle.css @@ -1,7 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); -* -{ +* { font-family: "Roboto Light", sans-serif; box-sizing: border-box; margin: 0; @@ -15,16 +14,14 @@ Desktop ------------------------------------------------------------------------------------------ */ /*basic li a and button setup*/ -li, a, button -{ +li, a, button { font-weight: 500; color: white; text-decoration: none; } /*title bar*/ -header -{ +header { width: 100%; display: flex; @@ -35,8 +32,7 @@ header } /*IO Game Studios button (only navigation)*/ -header button -{ +header button { padding: 20px; border-radius: 50px; border-style: none; @@ -46,21 +42,18 @@ header button /*List Element Style (only navigation)*/ -nav li -{ +nav li { display: inline-block; margin-right: 20px; cursor: pointer; } -nav li:hover -{ +nav li:hover { color: #88b3ae; } /*Dropdown*/ -nav ul li div -{ +nav ul li div { display: none; position: absolute; background-color: #41423f; @@ -70,36 +63,30 @@ nav ul li div padding-bottom: 10px; } -.menuDropdownDesktop:hover div -{ +.menuDropdownDesktop:hover div { display: block; } -nav ul li div ul -{ +nav ul li div ul { display: flex; flex-direction: column; } -nav ul li div ul li -{ +nav ul li div ul li { padding: 0 0 10px 20px; text-align: center; } -nav ul li div ul li button -{ +nav ul li div ul li button { padding: 20px; } /*Mobile Excluded*/ -nav > button -{ +nav > button { display: none; } -menu -{ +menu { position: absolute; right: 0px; display: none; @@ -111,52 +98,46 @@ Mobile ------------------------------------------------------------------------------------------ */ -@media (max-width: 18cm) -{ -header -{ -padding: 10px 40px; -} +@media (max-width: 18cm) { + header { + padding: 10px 40px; + } /*Hide the default navigation*/ - nav ul - { + nav ul { display: none; } /*Show the Mobile menu button*/ - nav button - { + nav button { display: blocK; margin-right: -20px; background-color: rgba(0, 0, 0, 0); } /*Style the Menu Icon*/ - nav svg - { + nav svg { color: white; width: 30px; height: 30px; } - menu div - { + menu div { float: right; background-color: #41423f; + border-radius: 0 0 0 50px; + padding-bottom: 15px; } - menu div ul - { + menu div ul { display: flex; flex-direction: column; list-style: none; } - menu div ul li - { + menu div ul li { text-align: center; padding: 20px 30px 20px 30px; margin: 5px 30px; @@ -165,8 +146,7 @@ padding: 10px 40px; background-color: rgba(136, 179, 174, 1); } - menu div ul li:hover - { + menu div ul li:hover { background-color: rgba(198, 119, 70, 0.5); } } @@ -177,14 +157,12 @@ General ------------------------------------------------------------------------------------------ */ -body -{ +body { background-image: linear-gradient(#c67746, #88b3ae); height: 100%; } -h1 -{ +h1 { font-size: 40px; text-align: center;