SonicHackingContest Navbar Scroll

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

当前为 2021-10-17 提交的版本,查看 最新版本

作者
Obsidian
评分
0 0 0
版本
2021.10.16
创建于
2020-11-17
更新于
2021-10-17
大小
22.7 KB
许可证
暂无
适用于

Avoids items in navbar dropdown menus (at Sonic Hacking Contest) from being cut-off and inaccessible in desktop and mobile views by adding scrolling when needed. Also adds a theme selector.

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 when needed 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 (localStorage used for persistence of theme setting)
  • Limits size of video IFRAME, news images, entry banner images and list of entries to fit within screen width
  • Shrinks size of news post avatars on narrow screens for better title readability
  • Adds a custom Shadow-inspired dark theme

SHC-themes  SHC-news-avatar-Mobile  SHC-menu-Phone