From 8c3dd6f325f74d2a5c4b8638d7a1cff2df2fa05c Mon Sep 17 00:00:00 2001 From: koirand Date: Sun, 24 Mar 2019 01:59:56 +0900 Subject: [PATCH] Fix the look #15 --- layouts/_default/single.html | 2 +- static/css/markdown.css | 857 +++++++++++++++-------------------- static/css/style.css | 24 +- 3 files changed, 367 insertions(+), 516 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 5b3b513..8e89719 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,7 +4,7 @@

{{ .Date.Format .Site.Params.singlePageDateFormat }}

-
+
{{ .Content }}
{{ partial "footer.html" . }} diff --git a/static/css/markdown.css b/static/css/markdown.css index 922ae10..12d9f9b 100644 --- a/static/css/markdown.css +++ b/static/css/markdown.css @@ -1,692 +1,541 @@ -.markdown-body { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - line-height: 1.5; - color: #707070; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 16px; - line-height: 1.5; - word-wrap: break-word; +#contentBody a { + background-color: transparent; } -.markdown-body .pl-c { - color: #6a737d; +#contentBody a:active, +#contentBody a:hover { + outline-width: 0; } -.markdown-body .pl-c1, -.markdown-body .pl-s .pl-v { - color: #005cc5; +#contentBody strong { + font-weight: inherit; } -.markdown-body .pl-e, -.markdown-body .pl-en { - color: #6f42c1; +#contentBody strong { + font-weight: bolder; } -.markdown-body .pl-smi, -.markdown-body .pl-s .pl-s1 { - color: #24292e; +#contentBody h1 { + font-size: 2em; + margin: 0.67em 0; } -.markdown-body .pl-ent { - color: #22863a; +#contentBody img { + border-style: none; } -.markdown-body .pl-k { - color: #d73a49; +#contentBody code, +#contentBody kbd, +#contentBody pre { + font-family: monospace, monospace; + font-size: 1em; } -.markdown-body .pl-s, -.markdown-body .pl-pds, -.markdown-body .pl-s .pl-pse .pl-s1, -.markdown-body .pl-sr, -.markdown-body .pl-sr .pl-cce, -.markdown-body .pl-sr .pl-sre, -.markdown-body .pl-sr .pl-sra { - color: #032f62; +#contentBody hr { + box-sizing: content-box; + height: 0; + overflow: visible; } -.markdown-body .pl-v, -.markdown-body .pl-smw { - color: #e36209; +#contentBody input { + font: inherit; + margin: 0; } -.markdown-body .pl-bu { - color: #b31d28; +#contentBody input { + overflow: visible; } -.markdown-body .pl-ii { - color: #fafbfc; - background-color: #b31d28; +#contentBody [type="checkbox"] { + box-sizing: border-box; + padding: 0; } -.markdown-body .pl-c2 { - color: #fafbfc; - background-color: #d73a49; +#contentBody * { + box-sizing: border-box; } -.markdown-body .pl-c2::before { - content: "^M"; +#contentBody input { + font-family: inherit; + font-size: inherit; + line-height: inherit; } -.markdown-body .pl-sr .pl-cce { - font-weight: bold; - color: #22863a; +#contentBody a { + /* color: #0366d6; */ + /* text-decoration: none; */ + text-decoration: underline; } -.markdown-body .pl-ml { - color: #735c0f; +#contentBody a:hover { + text-decoration: underline; } -.markdown-body .pl-mh, -.markdown-body .pl-mh .pl-en, -.markdown-body .pl-ms { - font-weight: bold; - color: #005cc5; +#contentBody strong { + font-weight: 600; } -.markdown-body .pl-mi { - font-style: italic; - color: #24292e; +#contentBody hr { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #dfe2e5; } -.markdown-body .pl-mb { - font-weight: bold; - color: #24292e; +#contentBody hr::before { + display: table; + content: ""; } -.markdown-body .pl-md { - color: #b31d28; - background-color: #ffeef0; +#contentBody hr::after { + display: table; + clear: both; + content: ""; } -.markdown-body .pl-mi1 { - color: #22863a; - background-color: #f0fff4; +#contentBody table { + border-spacing: 0; + border-collapse: collapse; } -.markdown-body .pl-mc { - color: #e36209; - background-color: #ffebda; +#contentBody td, +#contentBody th { + padding: 0; } -.markdown-body .pl-mi2 { - color: #f6f8fa; - background-color: #005cc5; +#contentBody h1, +#contentBody h2, +#contentBody h3, +#contentBody h4, +#contentBody h5, +#contentBody h6 { + margin-top: 0; + margin-bottom: 0; } -.markdown-body .pl-mdr { - font-weight: bold; - color: #6f42c1; +#contentBody h1 { + font-size: 32px; + font-weight: 600; } -.markdown-body .pl-ba { - color: #586069; +#contentBody h2 { + font-size: 24px; + font-weight: 600; } -.markdown-body .pl-sg { - color: #959da5; +#contentBody h3 { + font-size: 20px; + font-weight: 600; } -.markdown-body .pl-corl { - text-decoration: underline; - color: #032f62; +#contentBody h4 { + font-size: 16px; + font-weight: 600; } -.markdown-body .octicon { - display: inline-block; - vertical-align: text-top; - fill: currentColor; +#contentBody h5 { + font-size: 14px; + font-weight: 600; } -.markdown-body a { - background-color: transparent; +#contentBody h6 { + font-size: 12px; + font-weight: 600; } -.markdown-body a:active, -.markdown-body a:hover { - outline-width: 0; +#contentBody p { + margin-top: 0; + margin-bottom: 10px; } -.markdown-body strong { - font-weight: inherit; +#contentBody blockquote { + margin: 0; } -.markdown-body strong { - font-weight: bolder; +#contentBody ul, +#contentBody ol { + padding-left: 0; + margin-top: 0; + margin-bottom: 0; } -.markdown-body h1 { - font-size: 2em; - margin: 0.67em 0; +#contentBody ol ol, +#contentBody ul ol { + list-style-type: lower-roman; } -.markdown-body img { - border-style: none; +#contentBody ul ul ol, +#contentBody ul ol ol, +#contentBody ol ul ol, +#contentBody ol ol ol { + list-style-type: lower-alpha; } -.markdown-body code, -.markdown-body kbd, -.markdown-body pre { - font-family: monospace, monospace; - font-size: 1em; +#contentBody dd { + margin-left: 0; } -.markdown-body hr { - box-sizing: content-box; - height: 0; - overflow: visible; +#contentBody code { + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 12px; } -.markdown-body input { - font: inherit; - margin: 0; +#contentBody pre { + margin-top: 0; + margin-bottom: 0; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 12px; } -.markdown-body input { - overflow: visible; +#contentBody .octicon { + vertical-align: text-bottom; } -.markdown-body [type="checkbox"] { - box-sizing: border-box; - padding: 0; +#contentBody .pl-0 { + padding-left: 0 !important; } -.markdown-body * { - box-sizing: border-box; +#contentBody .pl-1 { + padding-left: 4px !important; } -.markdown-body input { - font-family: inherit; - font-size: inherit; - line-height: inherit; +#contentBody .pl-2 { + padding-left: 8px !important; } -.markdown-body a { - /* color: #0366d6; */ - /* text-decoration: none; */ - text-decoration: underline; +#contentBody .pl-3 { + padding-left: 16px !important; } -.markdown-body a:hover { - text-decoration: underline; +#contentBody .pl-4 { + padding-left: 24px !important; } -.markdown-body strong { - font-weight: 600; +#contentBody .pl-5 { + padding-left: 32px !important; } -.markdown-body hr { - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #dfe2e5; +#contentBody .pl-6 { + padding-left: 40px !important; } -.markdown-body hr::before { - display: table; - content: ""; +#contentBody::before { + display: table; + content: ""; } -.markdown-body hr::after { - display: table; - clear: both; - content: ""; +#contentBody::after { + display: table; + clear: both; + content: ""; } -.markdown-body table { - border-spacing: 0; - border-collapse: collapse; +#contentBody>*:first-child { + margin-top: 0 !important; } -.markdown-body td, -.markdown-body th { - padding: 0; +#contentBody>*:last-child { + margin-bottom: 0 !important; } -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - margin-top: 0; - margin-bottom: 0; +#contentBody a:not([href]) { + color: inherit; + text-decoration: none; } -.markdown-body h1 { - font-size: 32px; - font-weight: 600; +#contentBody .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; } -.markdown-body h2 { - font-size: 24px; - font-weight: 600; +#contentBody .anchor:focus { + outline: none; } -.markdown-body h3 { - font-size: 20px; - font-weight: 600; +#contentBody p, +#contentBody blockquote, +#contentBody ul, +#contentBody ol, +#contentBody dl, +#contentBody table, +#contentBody pre { + margin-top: 0; + margin-bottom: 16px; } -.markdown-body h4 { - font-size: 16px; - font-weight: 600; +#contentBody hr { + height: 0.25em; + padding: 0; + margin: 24px 0; + background-color: #e1e4e8; + border: 0; } -.markdown-body h5 { - font-size: 14px; - font-weight: 600; +#contentBody blockquote { + padding: 0 1em; + color: #6a737d; + border-left: 0.25em solid #dfe2e5; } -.markdown-body h6 { - font-size: 12px; - font-weight: 600; +#contentBody blockquote>:first-child { + margin-top: 0; } -.markdown-body p { - margin-top: 0; - margin-bottom: 10px; +#contentBody blockquote>:last-child { + margin-bottom: 0; } -.markdown-body blockquote { - margin: 0; +#contentBody kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: solid 1px #c6cbd1; + border-bottom-color: #959da5; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #959da5; } -.markdown-body ul, -.markdown-body ol { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; +#contentBody h1, +#contentBody h2, +#contentBody h3, +#contentBody h4, +#contentBody h5, +#contentBody h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; } -.markdown-body ol ol, -.markdown-body ul ol { - list-style-type: lower-roman; +#contentBody h1 .octicon-link, +#contentBody h2 .octicon-link, +#contentBody h3 .octicon-link, +#contentBody h4 .octicon-link, +#contentBody h5 .octicon-link, +#contentBody h6 .octicon-link { + color: #1b1f23; + vertical-align: middle; + visibility: hidden; } -.markdown-body ul ul ol, -.markdown-body ul ol ol, -.markdown-body ol ul ol, -.markdown-body ol ol ol { - list-style-type: lower-alpha; +#contentBody h1:hover .anchor, +#contentBody h2:hover .anchor, +#contentBody h3:hover .anchor, +#contentBody h4:hover .anchor, +#contentBody h5:hover .anchor, +#contentBody h6:hover .anchor { + text-decoration: none; } -.markdown-body dd { - margin-left: 0; +#contentBody h1:hover .anchor .octicon-link, +#contentBody h2:hover .anchor .octicon-link, +#contentBody h3:hover .anchor .octicon-link, +#contentBody h4:hover .anchor .octicon-link, +#contentBody h5:hover .anchor .octicon-link, +#contentBody h6:hover .anchor .octicon-link { + visibility: visible; } -.markdown-body code { - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; +#contentBody h1 { + padding-bottom: 0.3em; + font-size: 2em; + border-bottom: 1px solid #c9c9c9; } -.markdown-body pre { - margin-top: 0; - margin-bottom: 0; - font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; +#contentBody h2 { + padding-bottom: 0.3em; + font-size: 1.5em; + border-bottom: 1px solid #c9c9c9; } -.markdown-body .octicon { - vertical-align: text-bottom; +#contentBody h3 { + font-size: 1.25em; } -.markdown-body .pl-0 { - padding-left: 0 !important; +#contentBody h4 { + font-size: 1em; } -.markdown-body .pl-1 { - padding-left: 4px !important; +#contentBody h5 { + font-size: 0.875em; } -.markdown-body .pl-2 { - padding-left: 8px !important; +#contentBody h6 { + font-size: 0.85em; + color: #6a737d; } -.markdown-body .pl-3 { - padding-left: 16px !important; +#contentBody ul, +#contentBody ol { + padding-left: 2em; } -.markdown-body .pl-4 { - padding-left: 24px !important; +#contentBody ul ul, +#contentBody ul ol, +#contentBody ol ol, +#contentBody ol ul { + margin-top: 0; + margin-bottom: 0; } -.markdown-body .pl-5 { - padding-left: 32px !important; +#contentBody li { + word-wrap: break-all; } -.markdown-body .pl-6 { - padding-left: 40px !important; +#contentBody li>p { + margin-top: 16px; } -.markdown-body::before { - display: table; - content: ""; +#contentBody li+li { + margin-top: 0.25em; } -.markdown-body::after { - display: table; - clear: both; - content: ""; +#contentBody dl { + padding: 0; } -.markdown-body>*:first-child { - margin-top: 0 !important; +#contentBody dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; } -.markdown-body>*:last-child { - margin-bottom: 0 !important; +#contentBody dl dd { + padding: 0 16px; + margin-bottom: 16px; } -.markdown-body a:not([href]) { - color: inherit; - text-decoration: none; +#contentBody table { + display: block; + width: 100%; + overflow: auto; } -.markdown-body .anchor { - float: left; - padding-right: 4px; - margin-left: -20px; - line-height: 1; +#contentBody table th { + font-weight: 600; } -.markdown-body .anchor:focus { - outline: none; +#contentBody table th, +#contentBody table td { + padding: 6px 13px; + border: 1px solid #c9c9c9; + background-color: #f6f6f6; } -.markdown-body p, -.markdown-body blockquote, -.markdown-body ul, -.markdown-body ol, -.markdown-body dl, -.markdown-body table, -.markdown-body pre { - margin-top: 0; - margin-bottom: 16px; +#contentBody img { + max-width: 100%; + box-sizing: content-box; + background-color: #f6f6f6; } -.markdown-body hr { - height: 0.25em; - padding: 0; - margin: 24px 0; - background-color: #e1e4e8; - border: 0; +#contentBody img[align=right] { + padding-left: 20px; } -.markdown-body blockquote { - padding: 0 1em; - color: #6a737d; - border-left: 0.25em solid #dfe2e5; +#contentBody img[align=left] { + padding-right: 20px; } -.markdown-body blockquote>:first-child { - margin-top: 0; +#contentBody code { + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + background-color: rgba(27,31,35,0.05); + border-radius: 3px; } -.markdown-body blockquote>:last-child { - margin-bottom: 0; +#contentBody pre { + word-wrap: normal; } -.markdown-body kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; +#contentBody pre>code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; } -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; +#contentBody .highlight { + margin-bottom: 16px; } -.markdown-body h1 .octicon-link, -.markdown-body h2 .octicon-link, -.markdown-body h3 .octicon-link, -.markdown-body h4 .octicon-link, -.markdown-body h5 .octicon-link, -.markdown-body h6 .octicon-link { - color: #1b1f23; - vertical-align: middle; - visibility: hidden; +#contentBody .highlight pre { + margin-bottom: 0; + word-break: normal; } -.markdown-body h1:hover .anchor, -.markdown-body h2:hover .anchor, -.markdown-body h3:hover .anchor, -.markdown-body h4:hover .anchor, -.markdown-body h5:hover .anchor, -.markdown-body h6:hover .anchor { - text-decoration: none; +#contentBody .highlight pre, +#contentBody pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f6f6f6; + border-radius: 3px; } -.markdown-body h1:hover .anchor .octicon-link, -.markdown-body h2:hover .anchor .octicon-link, -.markdown-body h3:hover .anchor .octicon-link, -.markdown-body h4:hover .anchor .octicon-link, -.markdown-body h5:hover .anchor .octicon-link, -.markdown-body h6:hover .anchor .octicon-link { - visibility: visible; +#contentBody pre code { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; } -.markdown-body h1 { - padding-bottom: 0.3em; - font-size: 2em; - border-bottom: 1px solid #eaecef; +#contentBody .full-commit .btn-outline:not(:disabled):hover { + color: #005cc5; + border-color: #005cc5; } -.markdown-body h2 { - padding-bottom: 0.3em; - font-size: 1.5em; - border-bottom: 1px solid #eaecef; +#contentBody kbd { + display: inline-block; + padding: 3px 5px; + font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: solid 1px #d1d5da; + border-bottom-color: #c6cbd1; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #c6cbd1; } -.markdown-body h3 { - font-size: 1.25em; +#contentBody :checked+.radio-label { + position: relative; + z-index: 1; + border-color: #0366d6; } -.markdown-body h4 { - font-size: 1em; +#contentBody .task-list-item { + list-style-type: none; } -.markdown-body h5 { - font-size: 0.875em; +#contentBody .task-list-item+.task-list-item { + margin-top: 3px; } -.markdown-body h6 { - font-size: 0.85em; - color: #6a737d; -} - -.markdown-body ul, -.markdown-body ol { - padding-left: 2em; -} - -.markdown-body ul ul, -.markdown-body ul ol, -.markdown-body ol ol, -.markdown-body ol ul { - margin-top: 0; - margin-bottom: 0; -} - -.markdown-body li { - word-wrap: break-all; -} - -.markdown-body li>p { - margin-top: 16px; -} - -.markdown-body li+li { - margin-top: 0.25em; -} - -.markdown-body dl { - padding: 0; -} - -.markdown-body dl dt { - padding: 0; - margin-top: 16px; - font-size: 1em; - font-style: italic; - font-weight: 600; -} - -.markdown-body dl dd { - padding: 0 16px; - margin-bottom: 16px; -} - -.markdown-body table { - display: block; - width: 100%; - overflow: auto; -} - -.markdown-body table th { - font-weight: 600; -} - -.markdown-body table th, -.markdown-body table td { - padding: 6px 13px; - border: 1px solid #dfe2e5; -} - -.markdown-body table tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; -} - -.markdown-body table tr:nth-child(2n) { - background-color: #f6f8fa; -} - -.markdown-body img { - max-width: 100%; - box-sizing: content-box; - background-color: #fff; -} - -.markdown-body img[align=right] { - padding-left: 20px; -} - -.markdown-body img[align=left] { - padding-right: 20px; -} - -.markdown-body code { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - background-color: rgba(27,31,35,0.05); - border-radius: 3px; -} - -.markdown-body pre { - word-wrap: normal; -} - -.markdown-body pre>code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; -} - -.markdown-body .highlight { - margin-bottom: 16px; -} - -.markdown-body .highlight pre { - margin-bottom: 0; - word-break: normal; -} - -.markdown-body .highlight pre, -.markdown-body pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: #f6f6f6; - border-radius: 3px; -} - -.markdown-body pre code { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; -} - -.markdown-body .full-commit .btn-outline:not(:disabled):hover { - color: #005cc5; - border-color: #005cc5; -} - -.markdown-body kbd { - display: inline-block; - padding: 3px 5px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #d1d5da; - border-bottom-color: #c6cbd1; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #c6cbd1; -} - -.markdown-body :checked+.radio-label { - position: relative; - z-index: 1; - border-color: #0366d6; -} - -.markdown-body .task-list-item { - list-style-type: none; -} - -.markdown-body .task-list-item+.task-list-item { - margin-top: 3px; -} - -.markdown-body .task-list-item input { - margin: 0 0.2em 0.25em -1.6em; - vertical-align: middle; -} - -.markdown-body hr { - border-bottom-color: #eee; +#contentBody .task-list-item input { + margin: 0 0.2em 0.25em -1.6em; + vertical-align: middle; } +#contentBody hr { + border-bottom-color: #eee; diff --git a/static/css/style.css b/static/css/style.css index 8826475..9a64337 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,5 +1,7 @@ /* General */ body { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; min-height:100vh; margin: 0; padding: 20px; @@ -7,8 +9,10 @@ body { background-color: #EFEFEF; color: #707070; text-align: center; - font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.5; + font-size: 16px; + word-wrap: break-word; } a:link { @@ -62,13 +66,13 @@ footer { #profile { max-width: 600px; - min-width: 300px; + /* min-width: 300px; */ } nav ul { display: flex; justify-content: space-evenly; - width: 300px; + max-width: 300px; margin: 20px auto; padding: 0; list-style: none; @@ -77,7 +81,7 @@ nav ul { /* Contents List */ #searchBox { position: relative; - width: 300px; + max-width: 300px; height: 30px; margin: 20px auto; } @@ -115,7 +119,7 @@ nav ul { display: none; position: absolute; max-width: 600px; - min-width: 300px; + /* min-width: 300px; */ margin: 0 auto; top: 240px; left: 0; @@ -146,21 +150,19 @@ nav ul { } #contentsList { - padding: 20px; + padding: 20px 0; } #contentsList hr.separator { width: 10px; margin: 30px auto; - border: solid 1px #C9C9C9; + border: solid 1px #c9c9c9; } /* Page */ -div.markdown-body { - width: 90vw; +#contentBody { max-width: 800px; - min-width: 300px; margin: 0 auto; - padding: 20px; + padding: 20px 0; text-align: left; }