Webhost: Add dropdown menus (#1553)

* Change archipelago mod download page

* Docs: change connecting to archipelago in RoR2 setup guide

* dropdowns for links

* change some relative sizing

* change links and reorder links

* dropdowns for links

* change some relative sizing

* change links and reorder links

* mobile view was showing on desktop early

* add in missing relative font sizes

* clean up and add a temp downdown img

* move links around

* added cloud border

* move arrow to the left side

WebHostLib/static/styles/islandFooter.css

@@ -15,3 +15,33 @@
     padding-left: 0.5rem;
     color: #dfedc6;
 }
+@media all and (max-width: 900px) {
+    #island-footer{
+        font-size: 17px;
+        font-size: 2vw;
+    }
+}
+@media all and (max-width: 768px) {
+    #island-footer{
+        font-size: 15px;
+        font-size: 2vw;
+    }
+}
+@media all and (max-width: 650px) {
+    #island-footer{
+        font-size: 13px;
+        font-size: 2vw;
+    }
+}
+@media all and (max-width: 580px) {
+    #island-footer{
+        font-size: 11px;
+        font-size: 2vw;
+    }
+}
+@media all and (max-width: 512px) {
+    #island-footer{
+        font-size: 9px;
+        font-size: 2vw;
+    }
+}

WebHostLib/static/styles/landing.css

@@ -21,7 +21,6 @@ html{
     margin-right: auto;
     margin-top: 10px;
     height: 140px;
-    z-index: 10;
 }
 
 #landing-header h4{

WebHostLib/static/styles/themes/base.css

@@ -42,7 +42,7 @@ html{
     margin-top: 4px;
 }
 
-#base-header a, #base-header-mobile-menu a{
+#base-header a, #base-header-mobile-menu a, #dropdown #dropdown-text{
     color: #2f6b83;
     text-decoration: none;
     cursor: pointer;
@@ -86,6 +86,31 @@ html{
 #base-header-right-mobile img{
     height: 3rem;
 }
+#dropdown {
+    display: inline-block;
+}
+
+#dropdown:hover #dropdown-menu {
+    display: block;
+}
+#dropdown-menu{
+    display: none;
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    padding: 12px 16px;
+    margin-left: -90px;
+    border-radius: 15px;
+    border-left: 2px solid #d0ebe6;
+    border-bottom: 2px solid #d0ebe6;
+    filter: drop-shadow(-6px 6px 2px #2e3e83);
+}
+#dropdown-icon {
+    height: 7px;
+    width: 14px;
+    margin-bottom: 3px;
+    margin-left: 2px;
+}
 
 @media all and (max-width: 960px), only screen and (max-device-width: 768px) {
     #base-header-right{

WebHostLib/templates/header/baseHeader.html

@@ -11,10 +11,20 @@
             </a>
         </div>
         <div id="base-header-right">
-            <a href="/games">supported games</a>
-            <a href="/tutorial">setup guides</a>
-            <a href="/start-playing">start playing</a>
-            <a href="/faq/en">f.a.q.</a>
+            <div id="dropdown">
+                <span id="dropdown-text">
+                    <img id="dropdown-icon" src="/static/static/button-images/dropdown.png"></img>
+                    start playing
+                </span>
+                <span id="dropdown-menu">
+                    <div><a href="/games">supported games</a></div>
+                    <div><a href="/generate">generate game</a></div>
+                    <div><a href="/uploads">upload game</a></div>
+                    <div><a href="/user-content">user content</a></div>
+                    <div><a href="/tutorial">setup guides</a></div>
+                </span>
+            </div>
+            <a href="/faq/en">f.a.q</a>
             <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
         </div>
         <div id="base-header-right-mobile">
@@ -26,8 +36,10 @@
     <div id="base-header-mobile-menu">
         <a href="/games">supported games</a>
         <a href="/tutorial">setup guides</a>
-        <a href="/start-playing">start playing</a>
         <a href="/faq/en">f.a.q.</a>
+        <a href="/generate">generate game</a>
+        <a href="/user-content">user content</a>
+        <a href="/uploads">upload game</a>
         <a href="https://discord.gg/8Z65BR2" target="_blank">discord</a>
     </div>
 {% endblock %}