From 03cf525b2c73ae322a101c5f3a3e97aec67d21aa Mon Sep 17 00:00:00 2001 From: kindasneaki Date: Thu, 23 Mar 2023 23:11:39 -0600 Subject: [PATCH] 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 --- .../static/static/button-images/dropdown.png | Bin 0 -> 9836 bytes WebHostLib/static/styles/islandFooter.css | 30 ++++++++++++++++++ WebHostLib/static/styles/landing.css | 1 - WebHostLib/static/styles/themes/base.css | 27 +++++++++++++++- WebHostLib/templates/header/baseHeader.html | 22 ++++++++++--- 5 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 WebHostLib/static/static/button-images/dropdown.png diff --git a/WebHostLib/static/static/button-images/dropdown.png b/WebHostLib/static/static/button-images/dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc8634104895b552ed6c1d6d932dcf98b805973 GIT binary patch literal 9836 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 Dzl<*% literal 0 HcmV?d00001 diff --git a/WebHostLib/static/styles/islandFooter.css b/WebHostLib/static/styles/islandFooter.css index 96611f4e..7d5344a9 100644 --- a/WebHostLib/static/styles/islandFooter.css +++ b/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; + } +} diff --git a/WebHostLib/static/styles/landing.css b/WebHostLib/static/styles/landing.css index a70ac69d..202c43ba 100644 --- a/WebHostLib/static/styles/landing.css +++ b/WebHostLib/static/styles/landing.css @@ -21,7 +21,6 @@ html{ margin-right: auto; margin-top: 10px; height: 140px; - z-index: 10; } #landing-header h4{ diff --git a/WebHostLib/static/styles/themes/base.css b/WebHostLib/static/styles/themes/base.css index 1c41bd27..0c491f7b 100644 --- a/WebHostLib/static/styles/themes/base.css +++ b/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{ diff --git a/WebHostLib/templates/header/baseHeader.html b/WebHostLib/templates/header/baseHeader.html index 80e8d622..5865d509 100644 --- a/WebHostLib/templates/header/baseHeader.html +++ b/WebHostLib/templates/header/baseHeader.html @@ -11,10 +11,20 @@