From 8fce7063e9054ae3ce59023dc931874c61ddde4b Mon Sep 17 00:00:00 2001 From: Holger Weiss Date: Mon, 28 Oct 2013 21:31:53 +0100 Subject: Show a usable menu on handheld devices On narrow displays, replace the menu bar with a simple list of items, and omit the GitHub ribbon. diff --git a/web/input/resources/plugins.css b/web/input/resources/plugins.css index c9b31a3..872283e 100644 --- a/web/input/resources/plugins.css +++ b/web/input/resources/plugins.css @@ -145,3 +145,36 @@ p#news-footer { text-align: center; font-size: small; } + +/* + * On narrow displays, replace the menu bar with a simple list of items, and + * omit the GitHub ribbon. + */ + +@media (max-width: 45em) { + div#menu { + padding: 1em; + background-color: #fff; + border-bottom: 1px dotted #696969; + } + + div#menu span { + display: list-item; + padding: 0; + } + + div#menu span#current { + color: #5a95c7; + background-color: #fff; + } + + div#menu a { + color: #1b476b; + } +} + +@media (max-width: 60em) { + div#github-ribbon { + display: none; + } +} -- cgit v0.10-9-g596f