diff --git a/_includes/footer.html b/_includes/footer.html index 45fe0dc..921e815 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -3,6 +3,5 @@ - diff --git a/_includes/header.html b/_includes/header.html index d7b78e9..a24f9ee 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,6 +7,7 @@ + {% assign pathsplit = page.dir | split: '/' %} diff --git a/static/syntax.scss b/_sass/_code.scss similarity index 92% rename from static/syntax.scss rename to _sass/_code.scss index 33d02d7..f023237 100644 --- a/static/syntax.scss +++ b/_sass/_code.scss @@ -1,5 +1,23 @@ ---- ---- +code { + display: inline-block; + padding: 3px; + margin: 2px; + background: #f9f9f9; + border: 1px solid #e0e0e0; + border-radius: 2px; + white-space: pre; + max-width: 95%; + overflow-x: auto; + font-size: 14px; + vertical-align: middle; +} + +pre code { + background: #f0f0f0; + padding: 5px 10px; + display: block; +} + /* https://raw.githubusercontent.com/richleland/pygments-css/master/friendly.css */ .highlight .hll { background-color: #ffffcc } diff --git a/_sass/_content.scss b/_sass/_content.scss new file mode 100644 index 0000000..256ba5a --- /dev/null +++ b/_sass/_content.scss @@ -0,0 +1,82 @@ +a { + color: blue; + text-decoration: underline; +} + +img { + max-width: 100%; +} + +figure { + padding: 0; + margin: 0; +} + +.right_image { + float: right; + margin: 0 0 0 10px; + padding: 0; +} + +.right_image img { + margin: 0; + padding: 0; +} + +.right_image figcaption { + padding: 0 0 0 6px; +} + +.notice { + margin: 10px; + display: block; + padding: 5px; + border: 1px solid orange; + border-radius: 5px; + background: #FFEEDD; + +} + +.notice h2 { + margin: 0 0 5px 0; + padding: 0 0 2px 0; +} + +.header-link, .anchor { + text-decoration: none; + color: #bbb; + padding: 0 10px 0 0; +} + +.header-link { + position: absolute; + right: 10px; +} + +.header-link:hover { + color: #999; +} + + +h1 { + text-align: center; + margin: 10px 0 0 0; +} + +h2 { + border-bottom: 1px solid black; + margin: 30px 0 10px 0; + display: block; + padding: 0 0 5px 0; + clear: both; +} + +h3 { + font-size: 105%; + font-weight: bold; + margin: 30px 0 10px 0; +} + +.toc > ul > li > ul > li > ul { + display: none; +} diff --git a/_sass/_main.scss b/_sass/_main.scss new file mode 100644 index 0000000..e456e72 --- /dev/null +++ b/_sass/_main.scss @@ -0,0 +1,129 @@ +html, body { + font-family: "Arial", sans-serif; + margin: 0; + padding: 0; + font-size: 17px; + background: #333; + color: black; +} + + +#container { + width: 100%; + max-width: 1100px; + margin: auto; + position: relative; +} + +#page { + background: white; + margin: 0; + padding: 0 20px 20px 20px; + position: absolute; + left: 250px; + right: 0; + top: 0; +} + +#navbar { + position: absolute; + left: 0; + width: 250px; + top: 0; + padding: 0; + margin: 0; + display: block; + list-style: none; + background: #333; + color: white; +} + +#navbar li { + display: block; + margin: 0; + padding: 0; +} + +#navbar li a.hr { + border-top: 2px solid #666; +} + +#navbar li a.selected { + background: #363 !important; + color: white !important; +} + +#navbar li a.selected:hover { + background: #474 !important; +} + +#navbar li a { + display: block; + padding: 5px; + color: #ccc; + text-decoration: none; + cursor: pointer; +} + +#navbar li:nth-child(odd) a { + background: #3c3c3c; +} + +#navbar li a:hover { + background: #444; +} + + +@media all and (max-height: 568px) { + #navbar { + position: absolute; + } +} + +@media all and (max-width: 780px) { + #navbar { + position: static; + margin: 0; + width: 100%; + } + + #navbar li a { + padding: 10px; + } + + #page { + position: static; + margin: 0; + padding-top: 20px; + } +} + +@media print { + #navbar{ + display: none !important; + } + + #page { + left: 0 !important; + } + + .header-link { + display: none !important; + } + + a { + color: black !important; + text-decoration: none !important; + } + + html, body { + background: none; + font-size: 11pt; + } + + #container { + max-width: none; + margin: 0; + position: relative; + } +} diff --git a/static/style.scss b/static/style.scss index d0c97dd..6528778 100644 --- a/static/style.scss +++ b/static/style.scss @@ -1,233 +1,6 @@ --- --- -html, body { - font-family: "Arial", sans-serif; - margin: 0; - padding: 0; - font-size: 17px; - background: #333; - color: black; -} - -a { - color: blue; - text-decoration: underline; -} - -img { - max-width: 100%; -} - -figure { - padding: 0; - margin: 0; -} - -.right_image { - float: right; - margin: 0 0 0 10px; - padding: 0; -} - -.right_image img { - margin: 0; - padding: 0; -} - -.right_image figcaption { - padding: 0 0 0 6px; -} - -#container { - width: 100%; - max-width: 1100px; - margin: auto; - position: relative; -} - -#page { - background: white; - margin: 0; - padding: 0 20px 20px 20px; - position: absolute; - left: 250px; - right: 0; - top: 0; -} - -#navbar { - position: absolute; - left: 0; - width: 250px; - top: 0; - padding: 0; - margin: 0; - display: block; - list-style: none; - background: #333; - color: white; -} - -#navbar li { - display: block; - margin: 0; - padding: 0; -} - -#navbar li a.hr { - border-top: 2px solid #666; -} - -#navbar li a.selected { - background: #363 !important; - color: white !important; -} - -#navbar li a.selected:hover { - background: #474 !important; -} - -#navbar li a { - display: block; - padding: 5px; - color: #ccc; - text-decoration: none; - cursor: pointer; -} - -#navbar li:nth-child(odd) a { - background: #3c3c3c; -} - -#navbar li a:hover { - background: #444; -} - -.notice { - margin: 10px; - display: block; - padding: 5px; - border: 1px solid orange; - border-radius: 5px; - background: #FFEEDD; - -} - -.notice h2 { - margin: 0 0 5px 0; - padding: 0 0 2px 0; -} - -code { - display: inline-block; - padding: 3px; - margin: 2px; - background: #f9f9f9; - border: 1px solid #e0e0e0; - border-radius: 2px; - white-space: pre; - max-width: 95%; - overflow-x: auto; - font-size: 14px; - vertical-align: middle; -} - -pre code { - background: #f0f0f0; - padding: 5px 10px; - display: block; -} - -.header-link, .anchor { - text-decoration: none; - color: #bbb; - padding: 0 10px 0 0; -} - -.header-link { - position: absolute; - right: 10px; -} - -.header-link:hover { - color: #999; -} - - -h1 { - text-align: center; - margin: 10px 0 0 0; -} - -h2 { - border-bottom: 1px solid black; - margin: 30px 0 10px 0; - display: block; - padding: 0 0 5px 0; - clear: both; -} - -h3 { - font-size: 105%; - font-weight: bold; - margin: 30px 0 10px 0; -} - -.toc > ul > li > ul > li > ul { - display: none; -} - -@media all and (max-height: 568px) { - #navbar { - position: absolute; - } -} - -@media all and (max-width: 780px) { - #navbar { - position: static; - margin: 0; - width: 100%; - } - - #navbar li a { - padding: 10px; - } - - #page { - position: static; - margin: 0; - padding-top: 20px; - } -} - -@media print { - #navbar{ - display: none !important; - } - - #page { - left: 0 !important; - } - - .header-link { - display: none !important; - } - - a { - color: black !important; - text-decoration: none !important; - } - - html, body { - background: none; - font-size: 11pt; - } - - #container { - max-width: none; - margin: 0; - position: relative; - } -} +@import "main"; +@import "content"; +@import "code";