From 9aa4a5efaa9ea6723a2831793e1559995e43bb7d Mon Sep 17 00:00:00 2001 From: nodejh Date: Fri, 24 Mar 2017 21:34:34 +0800 Subject: [PATCH] update: responsive toc --- static/css/style.css | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index bf4ab06..a9f0005 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -199,6 +199,30 @@ nav.main-nav a.cta { color: #fff; margin-left: 12px; } +@media (max-width: 700px) { + nav.main-nav { + padding: 20px 10px 0 0; + background: #fff; + background: rgba(255, 255, 255, .90); + margin: 0 auto; + text-align: right; + z-index: 100; + } + nav.main-nav a { + top: 8px; + right: 6px; + padding: 8px 8px; + color: #5badf0; + font-size: 13px; + line-height: 1.35; + border-radius: 3px; + } +} +@media (max-width: 324px) { + nav.main-nav a.cta { + display: none; + } +} #wrapper { max-width: 600px; @@ -262,6 +286,10 @@ li { #post-body, p { line-height: 1.7; } +#post-body p > a { + word-break: break-word; + white-space: pre-wrap; +} b, strong { font-weight: 500; @@ -859,6 +887,7 @@ a.symbol:hover { color: #BCD4DA; } + /** * Table of content */ @@ -882,12 +911,19 @@ a.symbol:hover { } #TableOfContents { margin: 1em 0 0 0; + overflow-x: scroll; + word-wrap: normal; + word-break: break-all; + white-space: nowrap; } #TableOfContents ul { - list-style-type:none; margin: 0; padding: 0 .5em; + list-style-type:none; + margin: 0; + padding: 0 .5em; } #TableOfContents ul li { - list-style-type:none; line-height: 1.7em; + list-style-type: none; + line-height: 1.7em; } #TableOfContents > ul { padding: 0;