diff options
Diffstat (limited to 'static/css/zozo.scss')
-rw-r--r-- | static/css/zozo.scss | 127 |
1 files changed, 79 insertions, 48 deletions
diff --git a/static/css/zozo.scss b/static/css/zozo.scss index 6a3ab51..4d18019 100644 --- a/static/css/zozo.scss +++ b/static/css/zozo.scss @@ -9,7 +9,8 @@ html { body { color: #333333; - font-family: "source-han-sans-simplified-c", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + font-family: 'source-han-sans-simplified-c', 'Source Sans Pro', + 'Helvetica Neue', Arial, sans-serif; font-size: 16px; width: 100%; background-color: #f7f7f7; @@ -72,10 +73,46 @@ h6 { } .nav_container { - width: 720px; + width: 740px; height: 3rem; margin: 0 auto; padding: 20px 0; + + .menu_icon { + padding: 10px; + float: right; + + a { + cursor: pointer; + } + } + + .site_nav { + float: right; + + ul { + list-style: none; + margin: 0; + padding: 0; + float: right; + } + + li, + a { + position: relative; + } + + li { + float: left; + } + + a { + display: block; + white-space: nowrap; + padding: 10px; + font-size: 0.9rem; + } + } } .header { @@ -212,7 +249,6 @@ h6 { color: #8e0000; } } - } .post_footer { @@ -315,46 +351,6 @@ h6 { } } -.site_nav { - list-style: none; - margin: 0; - padding: 0; - float: right; - - ul { - width: 12em; - } - - li, - a { - position: relative; - } - - li { - float: left; - - span.menu_icon { - margin-top: 2px; - - i { - font-size: 16px; - } - } - } - - ul li { - float: none; - } - - a, span.menu_icon { - display: block; - white-space: nowrap; - padding: 10px; - font-size: 0.9rem; - } - -} - /*for archive*/ .list_with_title { @@ -465,7 +461,7 @@ h6 { pre, code { - font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; + font-family: 'Roboto Mono', Menlo, Monaco, courier, monospace; font-size: 0.9em; background: #f8f8f8; border: none; @@ -535,7 +531,7 @@ h6 { } blockquote:before { - content: "“"; + content: '“'; display: block; font-family: times, sans-serif; font-style: normal; @@ -595,7 +591,36 @@ a.back_to_top { } } -@media print, screen and (max-width: 580px) { +@media print, screen and (max-width: 680px) { + .nav_container { + position: relative; + z-index: 999; + + .site_nav { + position: fixed; + right: 0; + top: 60px; + padding: 10px 0; + width: 100%; + background-color: #ffffff; + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + + ul { + float: none; + text-align: center; + } + + li { + float: none; + } + } + + .menu_icon { + position: fixed; + right: 0; + } + } + .back_to_top { display: none !important; } @@ -605,7 +630,10 @@ a.back_to_top { .main { width: 1000px; } - .nav_container, + .nav_container { + width: 840px; + } + .header, .content { width: 820px; @@ -617,7 +645,10 @@ a.back_to_top { width: 95%; margin-top: 20px; } - .nav_container, + .nav_container { + width: 95%; + } + .header, .content { width: 90%; |