diff options
-rw-r--r-- | src/scss/_component.scss | 144 | ||||
-rw-r--r-- | src/scss/_element.scss | 267 | ||||
-rw-r--r-- | src/scss/_project.scss | 75 | ||||
-rw-r--r-- | src/scss/_reset.scss | 74 | ||||
-rw-r--r-- | src/scss/_stack.scss | 49 | ||||
-rw-r--r-- | src/scss/_structure.scss | 2 | ||||
-rw-r--r-- | src/scss/_variable.scss | 21 | ||||
-rw-r--r-- | src/scss/theme.scss | 4 | ||||
-rw-r--r-- | static/css/theme.css | 481 | ||||
-rw-r--r-- | static/css/theme.min.css | 2 |
10 files changed, 865 insertions, 254 deletions
diff --git a/src/scss/_component.scss b/src/scss/_component.scss index e050161..3b33c5a 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -1,114 +1,130 @@ +.edit-meta, +.edit-page, +.pagination, +.highlight, +.powered, +.panel, +.button, +.gist, +.twitter-tweet { + @extend .stack; +} + .pagination { - @include grid($flex-wrap: nowrap, $justify-content: space-between); - margin-top: 2rem; - font-weight: bold; + @include grid($flex-wrap: nowrap, $justify-content: space-between); + font-weight: bold; + > * { + @extend .no-stack; + } } .nav-prev {} .nav-next { - margin-left: auto; + margin-left: auto; } @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { - .pagination { - @include grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); - } - .nav-next { - margin-left: 0; - } + .pagination { + @include grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); + } + .nav-next { + margin-left: 0; + } } .panel { - margin-bottom: $default-margin; - padding: 1rem; + padding: $default-padding; } .panel-primary { - border: 1px solid $default-line-color; + border: 1px solid $default-line-color; } .panel-notice { - color: #fff; - background: #4ba0e1; + color: #fff; + background: #4ba0e1; } .panel-success { - color: #fff; - background: #609f43; + color: #fff; + background: #609f43; } .panel-caution { - color: #fff; - background: #de776d; + color: #fff; + background: #de776d; } .panel-warning { - color: #fff; - background: #e67e22; + color: #fff; + background: #e67e22; } .panel-danger { - color: #fff; - background: #ce3426; + color: #fff; + background: #ce3426; } .panel-header { - h3 { - margin: 0; - margin-bottom: 0.6rem; - } + h3 { + margin: 0; + } } .panel-body {} .button { - display: inline-block; - font-size: 120%; - padding: .8rem; - font-weight: bold; - text-decoration: none; - border-radius: 12px; - color: #fff; - background: #4ba0e1; - margin-bottom: 1.2rem; + display: inline-block; + font-size: 120%; + padding: .8rem; + font-weight: bold; + text-decoration: none; + border-radius: 12px; + color: #fff; + background: #4ba0e1; - &:hover { - color: #fff; - text-decoration: none; - background: #3b89c5; - } + &:hover { + color: #fff; + text-decoration: none; + background: #3b89c5; + } } .button-primary { - border: 1px solid $default-line-color; + border: 1px solid $default-line-color; } .button-success { - background: #369b08; - &:hover { - background: #256905; - } + background: #369b08; + &:hover { + background: #256905; + } } .button-caution { - background: #f56558; - &:hover { - background: #d45145; - } + background: #f56558; + &:hover { + background: #d45145; + } } .button-warning { - background: #f5811b; - &:hover { - background: #db7012; - } + background: #f5811b; + &:hover { + background: #db7012; + } } .button-danger { - background: #ce3426; - &:hover { - background: #a0281d; - } + background: #ce3426; + &:hover { + background: #a0281d; + } } .notification { - padding: .2rem 1.2rem; - text-align: center; - background: $sidebar-active-color; + padding: .2rem $default-padding; + text-align: center; + background: $sidebar-active-color; } .backtothetop { - display: none; - font-size: 200%; + display: none; + font-size: 200%; } .fa-layers .fa-circle { - color: #fff; + color: #fff; +} + +figure > figcaption h4 { + font-size: 80%; + font-weight: normal; } diff --git a/src/scss/_element.scss b/src/scss/_element.scss index 959786e..0f64f67 100644 --- a/src/scss/_element.scss +++ b/src/scss/_element.scss @@ -1,82 +1,237 @@ body { - font-family: $default-font-family; - font-feature-settings : 'pwid'; - line-height: $default-line-height; - background: $default-background-color; - margin: 0; + font-family: $default-font-family; + font-feature-settings : 'pwid'; + line-height: $default-line-height; + background: $default-background-color; + margin: 0; } -a { - color: $default-link-color; - &:hover { - color: $default-link-hover-color; - } +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + line-height: $default-line-height; + + > small { + font-size: 75%; + font-weight: normal; + } +} + +h1 { + font-size: 220%; + line-height: 1.2; +} +h2 { + font-size: 160%; + line-height: 1.4; +} +h3 { + font-size: 140%; +} +h4 { + font-size: 120%; +} +h5 { + font-size: 100%; +} +h6 { + font-size: 80%; } p { - font-size: $default-font-size; + font-size: $default-font-size; } -code { - font-family: $code-font-family; - font-size: $code-font-size; - background: $code-inline-background-color; - padding: .2rem; +hr { + background-color: #ccc; + height: 2px; + border: 0; } -pre { - overflow: auto; - background: $code-block-background-color; - padding: 1rem; - border: 1px solid $code-border-color; +table { + border-collapse: collapse; + border: 1px solid $default-line-color; + width: 100%; +} +th, +td { + border-top: 1px solid $default-line-color; + border-right: 1px solid $default-line-color; + padding: .4rem; - code { - background-color: transparent; - padding: 0; - } + tr:nth-child(even) & { + background: #f8f8f8; + } +} +th { + background: #eee; + font-weight: bold; } +ul, +ol { + font-size: $default-font-size; + margin: 0; + margin-left: 1.5rem; +} +ul { + &.unstyled { + list-style: none; + } + &.inline { + list-style: none; + } + &.inline li { + display: inline; + padding-right: 2rem; + } +} +ul ul, +ol ol, +ul ol, +ol ul { + font-size: 100%; +} +li li { + font-size: 100%; +} +dl { + font-size: $default-font-size; + margin: 0 $default-margin; +} +dt { + font-weight: bold; +} +dd { + margin: 0 0 .8rem $default-margin; +} +strong { + font-weight: bold; +} blockquote { - background: #f9f9f9; - color: #959595; - border-left: 4px solid #e5e5e5; - margin-left: 0; - padding: .1rem .8rem; + background: #f9f9f9; + color: #959595; + margin-left: 0; + padding: .1rem .8rem; + border-left: 4px solid $default-line-color; + + p:last-child { + margin: 0; + } } -table { - border-spacing: 0; - border-top: 1px solid $default-line-color; - border-left: 1px solid $default-line-color; - margin-bottom: $default-margin; - width: 100%; +code, +pre, +kbd { + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 100%; +} +pre { + overflow: auto; + padding: 1rem; + background: $code-block-background-color; + white-space: pre-wrap; + border: 1px solid $code-border-color; + border-radius: .2rem; + + code { + color: inherit; + background-color: transparent; + padding: 0; + border: 0; + } + + &.wrap { + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + } + &.scrollable { + max-height: 240px; + overflow-y: scroll; + } + &.prettyprint {} } -th { - border-bottom: 1px solid $default-line-color; - border-right: 1px solid $default-line-color; - padding: .4em; - font-weight: bold; +code { + font-family: $code-font-family; + font-size: $code-font-size; + background: $code-inline-background-color; + padding: .2rem; + border-radius: .2rem; +} +kbd { + padding: .2rem; + color: #fff; + background-color: #333; + border-radius: .2rem; +} +abbr, +acronym, +dfn { + border-bottom: 1px dotted #666; + cursor: help; +} +address { + display: block; + margin: 0 0 $default-margin; +} +ins { + text-decoration: none; +} +sup, +sub { + font-size: $default-font-size; + height: 0; + line-height: 1; + position: relative; + vertical-align: baseline; +} +sup { + bottom: .5ex; +} +sub { + top: .5ex; +} +figure { + img { + display: block; + } + figcaption { + color: #333; + font-size: $default-font-size; + } } -td { - border-bottom: 1px solid $default-line-color; - border-right: 1px solid $default-line-color; - padding: .4em; - tr:nth-child(even) & { - background: #f8f8f8; - } +/* Links */ +a { + color: $default-link-color; + text-decoration: underline; + + &:focus, + &:active, + &:hover { + color: $default-link-hover-color; + } } img { - max-width: 100%; -} -figure { - margin: 0; + max-width: 100%; + height: auto; } -hr { - height: 2px; - border: 0; - background-color: #ccc; +input, +textarea { + color: $default-font-color; + font-size: 100%; + font-weight: normal; + line-height: 1.225; +} +textarea { + line-height: $default-line-height; } diff --git a/src/scss/_project.scss b/src/scss/_project.scss index 7b64fc7..05ea2f5 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -1,39 +1,31 @@ header { + color: #fff; background: #000; - padding: .2rem 1.2rem; + padding: .2rem $default-padding; h1 { - color: #fff; font-size: 140%; display: inline-block; - margin: 0; } .version { - color: #fff; font-size: 80%; } .github { + color: currentColor; margin-left: .4rem; - color: #ddd; font-size: 180%; - &:hover { - color: #fff; - } } } .description { - color: #ddd; - margin: 0; } .global-menu { + color: #ccc; background: #000; - padding: 0 1.2rem .4rem; - color: #ddd; - border-top: 1px solid #333; + padding: .2rem $default-padding; ul { list-style: none; @@ -55,10 +47,13 @@ header { z-index: 99999; li { - padding: .4rem; + padding: .2rem $default-padding; background: #000; width: 140px; font-size: 80%; + a { + color: currentColor; + } } } @@ -74,7 +69,7 @@ header { li { display: block; margin-right: 0; - border-bottom: 1px solid #333; + border-bottom: 1px solid currentColor; &:last-child { border-bottom: none; @@ -91,22 +86,30 @@ header { li { width: auto; + background: transparent; + padding: 0 .4rem; + + li { + padding-top: .2rem; + } + a { + color: currentColor; + } } } } a { display: block; - color: #ddd; + color: currentColor; text-decoration: none; &:hover { - color: #fff; + text-decoration: underline; } } } main { - padding: 1rem 3rem 3rem; + padding: 3rem; } @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { @@ -125,46 +128,60 @@ main { padding: 0; margin: 0; } - ul ul ul { - margin-left: 1rem; - } + a { + position: relative; display: block; color: #404040; text-decoration: none; - padding: .2rem 1.2rem; + padding: .2rem 1rem; + border-left: solid 4px $sidebar-background-color; + border-bottom: solid 1px $sidebar-active-color; + &:hover { color: #404040; background: $sidebar-hover-color; border-left: solid 4px #ccc; } - border-left: solid 4px $sidebar-background-color; - border-bottom: solid 1px $sidebar-active-color; } - li li a { + nav > ul > li li a { padding-left: 2rem; } + nav > ul ul > li li a { + padding-left: 3rem; + } .active > a { background: $sidebar-active-color; border-left: solid 4px #ccc; } + nav > ul > .has-sub-menu > a:after { + position: absolute; + top: 25%; + right: .5rem; + display: inline-block; + height: 20px; + width: 20px; + content: '+'; + line-height: 1.2; + text-align: center; + color: #979797; + background: #f2f2f2; + border: 1px solid #e7e7e7; + } } .sidebar-footer { - margin: 1rem; - margin-top: 2rem; + padding: $default-padding; } footer { - margin-top: 2rem; } .edit-meta { font-size: 80%; - margin-top: 2rem; text-align: right; } diff --git a/src/scss/_reset.scss b/src/scss/_reset.scss new file mode 100644 index 0000000..0f0e775 --- /dev/null +++ b/src/scss/_reset.scss @@ -0,0 +1,74 @@ +/*-----------------------* + Reset +*-----------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + +input, +button, +textarea, +select { + font: inherit; +} + +button { + background-color: transparent; + color: inherit; + border-width: 0; + padding: 0; + cursor: pointer; +} + +input::-moz-focus-inner { + border: 0; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +cite { + font-style: normal; +} + +fieldset { + border-width: 0; + margin: 0; + padding: 0; +} diff --git a/src/scss/_stack.scss b/src/scss/_stack.scss new file mode 100644 index 0000000..20fdef3 --- /dev/null +++ b/src/scss/_stack.scss @@ -0,0 +1,49 @@ +/*-----------------------* + stack +*-----------------------*/ +.stack-base { + margin-top: 0; + margin-bottom: 0; +} + +.stack { + margin-top: $default-stack; +} + +.no-stack { + margin-top: 0; +} +.unset-stack { + margin-top: unset; + margin-bottom: unset; +} + +main * { + @extend .stack-base; +} + +main { + * { + + h1, + h2, + h3, + h4, + h5, + h6, + + p, + + hr, + + table, + + ul, + + ol, + + dl, + + blockquote, + + pre, + + figure { + @extend .stack; + } + } + + li > ul, + li > ol { + @extend .unset-stack; + } +} + +figure > figcaption { + @extend .no-stack; +} diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index 7292b10..9351062 100644 --- a/src/scss/_structure.scss +++ b/src/scss/_structure.scss @@ -36,7 +36,7 @@ main { } main { - @include grid-col($col: none, $flex-shrink: 0 ); + @include grid-col($col: none, $flex-shrink: 0); max-width: 100%; } .sidebar { diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index 0e4d913..12f7577 100644 --- a/src/scss/_variable.scss +++ b/src/scss/_variable.scss @@ -1,16 +1,14 @@ $default-layout-width: 1024px; $default-layout-margin: 2%; -$default-font-size: 1rem; +$default-font-size: 100%; $default-font-color: #000; -$default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +$default-font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -$default-line-height: 1.9; +$default-line-height: 1.8; $default-margin: 2rem; $default-padding: 1.2rem; - -$default-grid-columns: 12; -$default-grid-gutter: 2%; +$default-stack: 1.8rem; // color $default-background-color: #fafafa; @@ -33,8 +31,11 @@ $code-inline-background-color: #f0f0f0; // breakpoint $default-breakpoints: ( - lg: 1200px, - md: 980px, - sm: 767px, - xs: 480px + xl: 1280px, + lg: 1024px, + md: 896px, + sm: 768px, + xs: 480px ); + +$flexbox-grid-mixins-box-sizing: null; diff --git a/src/scss/theme.scss b/src/scss/theme.scss index e5bb0c7..feceadd 100644 --- a/src/scss/theme.scss +++ b/src/scss/theme.scss @@ -1,7 +1,11 @@ @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; @import 'variable'; + @import "normalize"; +@import "reset"; @import "element"; +@import "stack"; + @import "structure"; @import "component"; @import "project"; diff --git a/static/css/theme.css b/static/css/theme.css index 516f93d..1ec789a 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -411,90 +412,384 @@ template { display: none; } +/*-----------------------* + Reset +*-----------------------*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + +input, +button, +textarea, +select { + font: inherit; +} + +button { + background-color: transparent; + color: inherit; + border-width: 0; + padding: 0; + cursor: pointer; +} + +input::-moz-focus-inner { + border: 0; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +cite { + font-style: normal; +} + +fieldset { + border-width: 0; + margin: 0; + padding: 0; +} + body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: 'pwid'; - line-height: 1.9; + line-height: 1.8; background: #fafafa; margin: 0; } -a { - color: #2e7eb3; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + line-height: 1.8; } -a:hover { - color: #38a0e4; +h1 > small, +h2 > small, +h3 > small, +h4 > small, +h5 > small, +h6 > small { + font-size: 75%; + font-weight: normal; +} + +h1 { + font-size: 220%; + line-height: 1.2; +} + +h2 { + font-size: 160%; + line-height: 1.4; +} + +h3 { + font-size: 140%; +} + +h4 { + font-size: 120%; +} + +h5 { + font-size: 100%; +} + +h6 { + font-size: 80%; } p { - font-size: 1rem; + font-size: 100%; } -code { - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 0.95rem; - background: #f0f0f0; - padding: .2rem; +hr { + background-color: #ccc; + height: 2px; + border: 0; +} + +table { + border-collapse: collapse; + border: 1px solid #f0f0f0; + width: 100%; +} + +th, +td { + border-top: 1px solid #f0f0f0; + border-right: 1px solid #f0f0f0; + padding: .4rem; +} + +tr:nth-child(even) th, tr:nth-child(even) +td { + background: #f8f8f8; +} + +th { + background: #eee; + font-weight: bold; +} + +ul, +ol { + font-size: 100%; + margin: 0; + margin-left: 1.5rem; +} + +ul.unstyled { + list-style: none; +} + +ul.inline { + list-style: none; +} + +ul.inline li { + display: inline; + padding-right: 2rem; +} + +ul ul, +ol ol, +ul ol, +ol ul { + font-size: 100%; +} + +li li { + font-size: 100%; +} + +dl { + font-size: 100%; + margin: 0 2rem; +} + +dt { + font-weight: bold; +} + +dd { + margin: 0 0 0.8rem 2rem; +} + +strong { + font-weight: bold; +} + +blockquote { + background: #f9f9f9; + color: #959595; + margin-left: 0; + padding: .1rem .8rem; + border-left: 4px solid #f0f0f0; +} + +blockquote p:last-child { + margin: 0; +} + +code, +pre, +kbd { + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 100%; } pre { overflow: auto; - background: #f4f6f8; padding: 1rem; + background: #f4f6f8; + white-space: pre-wrap; border: 1px solid #f0f0f0; + border-radius: .2rem; } pre code { + color: inherit; background-color: transparent; padding: 0; + border: 0; } -blockquote { - background: #f9f9f9; - color: #959595; - border-left: 4px solid #e5e5e5; - margin-left: 0; - padding: .1rem .8rem; +pre.wrap { + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; } -table { - border-spacing: 0; - border-top: 1px solid #f0f0f0; - border-left: 1px solid #f0f0f0; - margin-bottom: 2rem; - width: 100%; +pre.scrollable { + max-height: 240px; + overflow-y: scroll; } -th { - border-bottom: 1px solid #f0f0f0; - border-right: 1px solid #f0f0f0; - padding: .4em; - font-weight: bold; +code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 0.95rem; + background: #f0f0f0; + padding: .2rem; + border-radius: .2rem; } -td { - border-bottom: 1px solid #f0f0f0; - border-right: 1px solid #f0f0f0; - padding: .4em; +kbd { + padding: .2rem; + color: #fff; + background-color: #333; + border-radius: .2rem; } -tr:nth-child(even) td { - background: #f8f8f8; +abbr, +acronym, +dfn { + border-bottom: 1px dotted #666; + cursor: help; +} + +address { + display: block; + margin: 0 0 2rem; +} + +ins { + text-decoration: none; +} + +sup, +sub { + font-size: 100%; + height: 0; + line-height: 1; + position: relative; + vertical-align: baseline; +} + +sup { + bottom: .5ex; +} + +sub { + top: .5ex; +} + +figure img { + display: block; +} + +figure figcaption { + color: #333; + font-size: 100%; +} + +/* Links */ +a { + color: #2e7eb3; + text-decoration: underline; +} + +a:focus, a:active, a:hover { + color: #38a0e4; } img { max-width: 100%; + height: auto; } -figure { - margin: 0; +input, +textarea { + color: #000; + font-size: 100%; + font-weight: normal; + line-height: 1.225; } -hr { - height: 2px; - border: 0; - background-color: #ccc; +textarea { + line-height: 1.8; +} + +/*-----------------------* + stack +*-----------------------*/ +.stack-base, main * { + margin-top: 0; + margin-bottom: 0; +} + +.stack, main * + h1, main * + h2, main * + h3, main * + h4, main * + h5, main * + h6, +main * + p, +main * + hr, +main * + table, +main * + ul, +main * + ol, +main * + dl, +main * + blockquote, +main * + pre, +main * + figure, .edit-meta, +.edit-page, +.pagination, +.highlight, +.powered, +.panel, +.button, +.gist, +.twitter-tweet { + margin-top: 1.8rem; +} + +.no-stack, figure > figcaption, .pagination > * { + margin-top: 0; +} + +.unset-stack, main li > ul, +main li > ol { + margin-top: unset; + margin-bottom: unset; } /*-----------------------* @@ -508,27 +803,22 @@ body { .container { width: 100%; height: 100%; - box-sizing: border-box; display: flex; flex-flow: column nowrap; margin: auto; } .content-container { - box-sizing: border-box; flex: 1 0 auto; - box-sizing: border-box; display: flex; } main { - box-sizing: border-box; flex: 0 0 75%; max-width: 75%; } .sidebar { - box-sizing: border-box; flex: 0 0 25%; order: -1; overflow-x: hidden; @@ -537,28 +827,23 @@ main { @media screen and (max-width: 480px) { .content-container { - box-sizing: border-box; display: flex; flex-flow: column nowrap; } main { - box-sizing: border-box; flex: 0 0 auto; max-width: 100%; } .sidebar { - box-sizing: border-box; flex: 0 0 auto; order: 1; } } .pagination { - box-sizing: border-box; display: flex; flex-wrap: nowrap; justify-content: space-between; - margin-top: 2rem; font-weight: bold; } @@ -568,7 +853,6 @@ main { @media screen and (max-width: 480px) { .pagination { - box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; @@ -579,8 +863,7 @@ main { } .panel { - margin-bottom: 2rem; - padding: 1rem; + padding: 1.2rem; } .panel-primary { @@ -614,7 +897,6 @@ main { .panel-header h3 { margin: 0; - margin-bottom: 0.6rem; } .button { @@ -626,7 +908,6 @@ main { border-radius: 12px; color: #fff; background: #4ba0e1; - margin-bottom: 1.2rem; } .button:hover { @@ -672,7 +953,7 @@ main { } .notification { - padding: .2rem 1.2rem; + padding: 0.2rem 1.2rem; text-align: center; background: #eee; } @@ -686,43 +967,36 @@ main { color: #fff; } +figure > figcaption h4 { + font-size: 80%; + font-weight: normal; +} + header { + color: #fff; background: #000; - padding: .2rem 1.2rem; + padding: 0.2rem 1.2rem; } header h1 { - color: #fff; font-size: 140%; display: inline-block; - margin: 0; } header .version { - color: #fff; font-size: 80%; } header .github { + color: currentColor; margin-left: .4rem; - color: #ddd; font-size: 180%; } -header .github:hover { - color: #fff; -} - -.description { - color: #ddd; - margin: 0; -} - .global-menu { + color: #ccc; background: #000; - padding: 0 1.2rem .4rem; - color: #ddd; - border-top: 1px solid #333; + padding: 0.2rem 1.2rem; } .global-menu ul { @@ -747,19 +1021,22 @@ header .github:hover { } .global-menu ul.sub-menu li { - padding: .4rem; + padding: 0.2rem 1.2rem; background: #000; width: 140px; font-size: 80%; } +.global-menu ul.sub-menu li a { + color: currentColor; +} + .global-menu .fa-angle-right { margin-left: .4rem; font-size: 80%; } .global-menu li.parent:hover > ul.sub-menu { - box-sizing: border-box; display: flex; flex-flow: column nowrap; } @@ -768,7 +1045,7 @@ header .github:hover { .global-menu li { display: block; margin-right: 0; - border-bottom: 1px solid #333; + border-bottom: 1px solid currentColor; } .global-menu li:last-child { border-bottom: none; @@ -782,21 +1059,29 @@ header .github:hover { } .global-menu ul.sub-menu li { width: auto; + background: transparent; + padding: 0 .4rem; + } + .global-menu ul.sub-menu li + li { + padding-top: .2rem; + } + .global-menu ul.sub-menu li a { + color: currentColor; } } .global-menu a { display: block; - color: #ddd; + color: currentColor; text-decoration: none; } .global-menu a:hover { - color: #fff; + text-decoration: underline; } main { - padding: 1rem 3rem 3rem; + padding: 3rem; } @media screen and (max-width: 480px) { @@ -817,15 +1102,12 @@ main { margin: 0; } -.sidebar ul ul ul { - margin-left: 1rem; -} - .sidebar a { + position: relative; display: block; color: #404040; text-decoration: none; - padding: .2rem 1.2rem; + padding: .2rem 1rem; border-left: solid 4px #f9f9f9; border-bottom: solid 1px #eee; } @@ -836,27 +1118,40 @@ main { border-left: solid 4px #ccc; } -.sidebar li li a { +.sidebar nav > ul > li li a { padding-left: 2rem; } +.sidebar nav > ul ul > li li a { + padding-left: 3rem; +} + .sidebar .active > a { background: #eee; border-left: solid 4px #ccc; } -.sidebar-footer { - margin: 1rem; - margin-top: 2rem; +.sidebar nav > ul > .has-sub-menu > a:after { + position: absolute; + top: 25%; + right: .5rem; + display: inline-block; + height: 20px; + width: 20px; + content: '+'; + line-height: 1.2; + text-align: center; + color: #979797; + background: #f2f2f2; + border: 1px solid #e7e7e7; } -footer { - margin-top: 2rem; +.sidebar-footer { + padding: 1.2rem; } .edit-meta { font-size: 80%; - margin-top: 2rem; text-align: right; } diff --git a/static/css/theme.min.css b/static/css/theme.min.css index f8d261b..ca18493 100644 --- a/static/css/theme.min.css +++ b/static/css/theme.min.css @@ -1 +1 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-feature-settings:'pwid';line-height:1.9;background:#fafafa;margin:0}a{color:#2e7eb3}a:hover{color:#38a0e4}p{font-size:1rem}code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.95rem;background:#f0f0f0;padding:.2rem}pre{overflow:auto;background:#f4f6f8;padding:1rem;border:1px solid #f0f0f0}pre code{background-color:transparent;padding:0}blockquote{background:#f9f9f9;color:#959595;border-left:4px solid #e5e5e5;margin-left:0;padding:.1rem .8rem}table{border-spacing:0;border-top:1px solid #f0f0f0;border-left:1px solid #f0f0f0;margin-bottom:2rem;width:100%}th{border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0;padding:.4em;font-weight:bold}td{border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0;padding:.4em}tr:nth-child(even) td{background:#f8f8f8}img{max-width:100%}figure{margin:0}hr{height:2px;border:0;background-color:#ccc}html,body{height:100%}.container{width:100%;height:100%;box-sizing:border-box;display:flex;flex-flow:column nowrap;margin:auto}.content-container{box-sizing:border-box;flex:1 0 auto;box-sizing:border-box;display:flex}main{box-sizing:border-box;flex:0 0 75%;max-width:75%}.sidebar{box-sizing:border-box;flex:0 0 25%;order:-1;overflow-x:hidden;overflow-y:scroll}@media screen and (max-width: 480px){.content-container{box-sizing:border-box;display:flex;flex-flow:column nowrap}main{box-sizing:border-box;flex:0 0 auto;max-width:100%}.sidebar{box-sizing:border-box;flex:0 0 auto;order:1}}.pagination{box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;margin-top:2rem;font-weight:bold}.nav-next{margin-left:auto}@media screen and (max-width: 480px){.pagination{box-sizing:border-box;display:flex;flex-flow:column nowrap;align-items:center}.nav-next{margin-left:0}}.panel{margin-bottom:2rem;padding:1rem}.panel-primary{border:1px solid #f0f0f0}.panel-notice{color:#fff;background:#4ba0e1}.panel-success{color:#fff;background:#609f43}.panel-caution{color:#fff;background:#de776d}.panel-warning{color:#fff;background:#e67e22}.panel-danger{color:#fff;background:#ce3426}.panel-header h3{margin:0;margin-bottom:0.6rem}.button{display:inline-block;font-size:120%;padding:.8rem;font-weight:bold;text-decoration:none;border-radius:12px;color:#fff;background:#4ba0e1;margin-bottom:1.2rem}.button:hover{color:#fff;text-decoration:none;background:#3b89c5}.button-primary{border:1px solid #f0f0f0}.button-success{background:#369b08}.button-success:hover{background:#256905}.button-caution{background:#f56558}.button-caution:hover{background:#d45145}.button-warning{background:#f5811b}.button-warning:hover{background:#db7012}.button-danger{background:#ce3426}.button-danger:hover{background:#a0281d}.notification{padding:.2rem 1.2rem;text-align:center;background:#eee}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}header{background:#000;padding:.2rem 1.2rem}header h1{color:#fff;font-size:140%;display:inline-block;margin:0}header .version{color:#fff;font-size:80%}header .github{margin-left:.4rem;color:#ddd;font-size:180%}header .github:hover{color:#fff}.description{color:#ddd;margin:0}.global-menu{background:#000;padding:0 1.2rem .4rem;color:#ddd;border-top:1px solid #333}.global-menu ul{list-style:none;padding:0;margin:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;margin:0;position:absolute;top:1.8rem;left:0;z-index:99999}.global-menu ul.sub-menu li{padding:.4rem;background:#000;width:140px;font-size:80%}.global-menu .fa-angle-right{margin-left:.4rem;font-size:80%}.global-menu li.parent:hover>ul.sub-menu{box-sizing:border-box;display:flex;flex-flow:column nowrap}@media screen and (max-width: 480px){.global-menu li{display:block;margin-right:0;border-bottom:1px solid #333}.global-menu li:last-child{border-bottom:none}.global-menu .fa-angle-right{display:none}.global-menu ul.sub-menu{display:block;position:static}.global-menu ul.sub-menu li{width:auto}}.global-menu a{display:block;color:#ddd;text-decoration:none}.global-menu a:hover{color:#fff}main{padding:1rem 3rem 3rem}@media screen and (max-width: 480px){main{padding:1rem}}.sidebar{font-size:90%;background:#f9f9f9;border-right:1px solid #eee}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul ul ul{margin-left:1rem}.sidebar a{display:block;color:#404040;text-decoration:none;padding:.2rem 1.2rem;border-left:solid 4px #f9f9f9;border-bottom:solid 1px #eee}.sidebar a:hover{color:#404040;background:#eee;border-left:solid 4px #ccc}.sidebar li li a{padding-left:2rem}.sidebar .active>a{background:#eee;border-left:solid 4px #ccc}.sidebar-footer{margin:1rem;margin-top:2rem}footer{margin-top:2rem}.edit-meta{font-size:80%;margin-top:2rem;text-align:right}.edit-page{font-weight:bold}.powered{font-size:80%;text-align:right;color:#999} +/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}a{text-decoration:none;color:inherit;cursor:pointer}input,button,textarea,select{font:inherit}button{background-color:transparent;color:inherit;border-width:0;padding:0;cursor:pointer}input::-moz-focus-inner{border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}cite{font-style:normal}fieldset{border-width:0;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:'pwid';line-height:1.8;background:#fafafa;margin:0}h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:1.8}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{font-size:75%;font-weight:normal}h1{font-size:220%;line-height:1.2}h2{font-size:160%;line-height:1.4}h3{font-size:140%}h4{font-size:120%}h5{font-size:100%}h6{font-size:80%}p{font-size:100%}hr{background-color:#ccc;height:2px;border:0}table{border-collapse:collapse;border:1px solid #f0f0f0;width:100%}th,td{border-top:1px solid #f0f0f0;border-right:1px solid #f0f0f0;padding:.4rem}tr:nth-child(even) th,tr:nth-child(even) td{background:#f8f8f8}th{background:#eee;font-weight:bold}ul,ol{font-size:100%;margin:0;margin-left:1.5rem}ul.unstyled{list-style:none}ul.inline{list-style:none}ul.inline li{display:inline;padding-right:2rem}ul ul,ol ol,ul ol,ol ul{font-size:100%}li li{font-size:100%}dl{font-size:100%;margin:0 2rem}dt{font-weight:bold}dd{margin:0 0 0.8rem 2rem}strong{font-weight:bold}blockquote{background:#f9f9f9;color:#959595;margin-left:0;padding:.1rem .8rem;border-left:4px solid #f0f0f0}blockquote p:last-child{margin:0}code,pre,kbd{font-family:Menlo, Monaco, "Courier New", monospace;font-size:100%}pre{overflow:auto;padding:1rem;background:#f4f6f8;white-space:pre-wrap;border:1px solid #f0f0f0;border-radius:.2rem}pre code{color:inherit;background-color:transparent;padding:0;border:0}pre.wrap{white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}pre.scrollable{max-height:240px;overflow-y:scroll}code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.95rem;background:#f0f0f0;padding:.2rem;border-radius:.2rem}kbd{padding:.2rem;color:#fff;background-color:#333;border-radius:.2rem}abbr,acronym,dfn{border-bottom:1px dotted #666;cursor:help}address{display:block;margin:0 0 2rem}ins{text-decoration:none}sup,sub{font-size:100%;height:0;line-height:1;position:relative;vertical-align:baseline}sup{bottom:.5ex}sub{top:.5ex}figure img{display:block}figure figcaption{color:#333;font-size:100%}a{color:#2e7eb3;text-decoration:underline}a:focus,a:active,a:hover{color:#38a0e4}img{max-width:100%;height:auto}input,textarea{color:#000;font-size:100%;font-weight:normal;line-height:1.225}textarea{line-height:1.8}.stack-base,main *{margin-top:0;margin-bottom:0}.stack,main *+h1,main *+h2,main *+h3,main *+h4,main *+h5,main *+h6,main *+p,main *+hr,main *+table,main *+ul,main *+ol,main *+dl,main *+blockquote,main *+pre,main *+figure,.edit-meta,.edit-page,.pagination,.highlight,.powered,.panel,.button,.gist,.twitter-tweet{margin-top:1.8rem}.no-stack,figure>figcaption,.pagination>*{margin-top:0}.unset-stack,main li>ul,main li>ol{margin-top:unset;margin-bottom:unset}html,body{height:100%}.container{width:100%;height:100%;display:flex;flex-flow:column nowrap;margin:auto}.content-container{flex:1 0 auto;display:flex}main{flex:0 0 75%;max-width:75%}.sidebar{flex:0 0 25%;order:-1;overflow-x:hidden;overflow-y:scroll}@media screen and (max-width: 480px){.content-container{display:flex;flex-flow:column nowrap}main{flex:0 0 auto;max-width:100%}.sidebar{flex:0 0 auto;order:1}}.pagination{display:flex;flex-wrap:nowrap;justify-content:space-between;font-weight:bold}.nav-next{margin-left:auto}@media screen and (max-width: 480px){.pagination{display:flex;flex-flow:column nowrap;align-items:center}.nav-next{margin-left:0}}.panel{padding:1.2rem}.panel-primary{border:1px solid #f0f0f0}.panel-notice{color:#fff;background:#4ba0e1}.panel-success{color:#fff;background:#609f43}.panel-caution{color:#fff;background:#de776d}.panel-warning{color:#fff;background:#e67e22}.panel-danger{color:#fff;background:#ce3426}.panel-header h3{margin:0}.button{display:inline-block;font-size:120%;padding:.8rem;font-weight:bold;text-decoration:none;border-radius:12px;color:#fff;background:#4ba0e1}.button:hover{color:#fff;text-decoration:none;background:#3b89c5}.button-primary{border:1px solid #f0f0f0}.button-success{background:#369b08}.button-success:hover{background:#256905}.button-caution{background:#f56558}.button-caution:hover{background:#d45145}.button-warning{background:#f5811b}.button-warning:hover{background:#db7012}.button-danger{background:#ce3426}.button-danger:hover{background:#a0281d}.notification{padding:0.2rem 1.2rem;text-align:center;background:#eee}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}figure>figcaption h4{font-size:80%;font-weight:normal}header{color:#fff;background:#000;padding:0.2rem 1.2rem}header h1{font-size:140%;display:inline-block}header .version{font-size:80%}header .github{color:currentColor;margin-left:.4rem;font-size:180%}.global-menu{color:#ccc;background:#000;padding:0.2rem 1.2rem}.global-menu ul{list-style:none;padding:0;margin:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;margin:0;position:absolute;top:1.8rem;left:0;z-index:99999}.global-menu ul.sub-menu li{padding:0.2rem 1.2rem;background:#000;width:140px;font-size:80%}.global-menu ul.sub-menu li a{color:currentColor}.global-menu .fa-angle-right{margin-left:.4rem;font-size:80%}.global-menu li.parent:hover>ul.sub-menu{display:flex;flex-flow:column nowrap}@media screen and (max-width: 480px){.global-menu li{display:block;margin-right:0;border-bottom:1px solid currentColor}.global-menu li:last-child{border-bottom:none}.global-menu .fa-angle-right{display:none}.global-menu ul.sub-menu{display:block;position:static}.global-menu ul.sub-menu li{width:auto;background:transparent;padding:0 .4rem}.global-menu ul.sub-menu li+li{padding-top:.2rem}.global-menu ul.sub-menu li a{color:currentColor}}.global-menu a{display:block;color:currentColor;text-decoration:none}.global-menu a:hover{text-decoration:underline}main{padding:3rem}@media screen and (max-width: 480px){main{padding:1rem}}.sidebar{font-size:90%;background:#f9f9f9;border-right:1px solid #eee}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar a{position:relative;display:block;color:#404040;text-decoration:none;padding:.2rem 1rem;border-left:solid 4px #f9f9f9;border-bottom:solid 1px #eee}.sidebar a:hover{color:#404040;background:#eee;border-left:solid 4px #ccc}.sidebar nav>ul>li li a{padding-left:2rem}.sidebar nav>ul ul>li li a{padding-left:3rem}.sidebar .active>a{background:#eee;border-left:solid 4px #ccc}.sidebar nav>ul>.has-sub-menu>a:after{position:absolute;top:25%;right:.5rem;display:inline-block;height:20px;width:20px;content:'+';line-height:1.2;text-align:center;color:#979797;background:#f2f2f2;border:1px solid #e7e7e7}.sidebar-footer{padding:1.2rem}.edit-meta{font-size:80%;text-align:right}.edit-page{font-weight:bold}.powered{font-size:80%;text-align:right;color:#999} |