SonicHackingContest Navbar Scroll

Avoids navbar dropdown menus from being cut-off and inaccessible by adding scrolling.

目前為 2020-12-25 提交的版本,檢視 最新版本

作者
Obsidian
評價
0 0 0
版本
2020.12.24
建立日期
2020-11-17
更新日期
2020-12-25
尺寸
11.0 KB
授權條款
未知
腳本執行於

Avoids items in navbar dropdown menus (at SonicHackingContest) from being cut-off and inaccessible in desktop and mobile views by adding scrolling when needed.

SHC-navbar-scroll (animated)

SonicHackingContest Navbar Scroll

Noticed anything about the navbar menus at the SHC site? As a result of the amount of content this year, some menus might extend past the bottom of the screen. That's no problem, just scroll down, right? But wait, the menu remains in place, the obscured items still inaccessible. This is also true for the mobile site view, where the problem is even more pronounced.

This simple script is a temporary solution to help alleviate this navbar problem until they fix it for next year.

  • Adds scrolling and thin vertical scrollbars to the navbar menus
  • For both desktop and mobile views
  • Thin scrollbar should conform to the other color themes
  • Modifies width of mobile-view menus (can be less than full viewport width)

  • Adds site theme button in footer (sessionStorage used for temporary persistence of theme)
  • Limits size of video IFRAME, news images and entry banner images to fit within screen width
  • Shrinks size of news post avatars on narrow screens for better title readability

SHC-themes  SHC-news-avatar-Mobile