Site fait avec Hugo. Thème basé sur TechDoc mais revu à ma sauce.
diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..fa007e9 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,18 @@ +{ + "name": "accueil-jouf", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "devDependencies": { + "flexbox-grid-mixins": "^0.3.4" + } + }, + "node_modules/flexbox-grid-mixins": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/flexbox-grid-mixins/-/flexbox-grid-mixins-0.3.4.tgz", + "integrity": "sha512-RjtmsfUD40vqTMhHZ5B5Aomxs9SqedKJTxixkkde972qMoIxxv1csdU3kJrdqGscbvBI53waS7Exwbu9TostCg==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..00d1655 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "devDependencies": { + "flexbox-grid-mixins": "^0.3.4" + } +} diff --git a/src/scss/_component.scss b/src/scss/_component.scss new file mode 100644 index 0000000..3ed288d --- /dev/null +++ b/src/scss/_component.scss @@ -0,0 +1,346 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; +@use 'foundation/stack'; + +main * { + @extend %first-stack; +} + +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 %none-stack; +} + +.table_of_contents, +.edit-meta, +.edit-page, +.pagination, +.highlight, +.powered, +.panel, +.button, +.gist, +.twitter-tweet { + @extend %stack; +} + +.pagination { + @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between); + font-weight: bold; + > * { + @extend %none-stack; + } +} +.nav-prev {} +.nav-next { + margin-left: auto; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + .pagination { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); + } + .nav-next { + margin-left: 0; + } +} + +.panel { + --panel-font-color: #000; + --panel-background-color: unset; + --panel-border-color: transparent; + + padding: variable.$default-layout-padding; + color: var(--panel-font-color, #000); + background: var(--panel-background-color, unset); + border: 1px solid; + border-color: var(--panel-border-color, transparent); + + a { + text-decoration: underline; + font-weight: bold; + } +} + +.panel-primary { + --panel-border-color: #{variable.$default-border-color}; +} +.panel-notice { + --panel-font-color: #fff; + --panel-background-color: #b0b0b0; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-recipe { + --panel-font-color: #000; + --panel-background-color: #CDCCCC; + --custom-link-text-color: #{variable.$default-link-text-color}; + --custom-link-text-hover-color: #{variable.$default-link-text-hover-color}; +} +.panel-success { + --panel-font-color: #fff; + --panel-background-color: #609f43; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-caution { + --panel-font-color: #fff; + --panel-background-color: #de776d; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-warning { + --panel-font-color: #fff; + --panel-background-color: #e67e22; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} +.panel-danger { + --panel-font-color: #fff; + --panel-background-color: #ce3426; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-header {} +.panel-body {} + +.button { + display: inline-block; + font-size: 120%; + padding: .5rem 1.2rem; + font-weight: bold; + text-decoration: none; + border-radius: .8rem; + + --button-font-color: #000; + --button-font-hover-color: #000; + --button-background-color: #{variable.$default-background-color}; + --button-background-hover-color: #f7f7f7; + --button-border-color: #{variable.$default-border-color}; + + color: var(--button-font-color, #000); + background: var(--button-background-color, unset); + border: 2px solid ; + border-color: var(--button-border-color, transparent); + + &:hover { + color: var(--button-font-hover-color, #000); + text-decoration: none; + background: var(--button-background-hover-color, unset); + } +} + +.button-notice { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #4ba0e1; + --button-background-hover-color: #3b89c5; + --button-border-color: transparent; +} +.button-success { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #369b08; + --button-background-hover-color: #256905; + --button-border-color: transparent; +} +.button-caution { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f56558; + --button-background-hover-color: #d45145; + --button-border-color: transparent; +} +.button-warning { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f5811b; + --button-background-hover-color: #db7012; + --button-border-color: transparent; +} +.button-danger { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #ce3426; + --button-background-hover-color: #a0281d; + --button-border-color: transparent; +} + +.notification { + padding: .2rem variable.$default-layout-padding; + text-align: center; + background: variable.$sidebar-active-color; +} + +.backtothetop { + display: none; + font-size: 200%; +} +.fa-layers .fa-circle { + color: #fff; +} + +figure > figcaption h4 { + font-size: 80%; + font-weight: normal; +} + +.table_of_contents { + font-size: 90%; + padding: variable.$default-layout-padding; + border: 4px solid variable.$default-border-color; + + ul { + list-style: none; + padding-left: 0; + } + li { + border-top: 1px solid variable.$default-border-color; + } + > nav > ul > li:first-child { + border-top: unset; + } + + ul > li li a { + margin-left: 2rem * 1; + } + ul ul > li li a { + margin-left: 2rem * 2; + } + ul ul ul > li li a { + margin-left: 2rem * 3; + } + ul ul ul ul > li li a { + margin-left: 2rem * 4; + } + ul ul ul ul ul > li li a { + margin-left: 2rem * 5; + } + +} + +.headerlink > .svg-inline--fa { + margin-left: .4rem; + width: .8rem; +} + +.ais-SearchBox { + .ais-SearchBox-input { + width: 70%; + } + button { + margin-left: .2rem; + padding: .4rem; + } +} +.ais-Stats { + font-size: 80%; + color: #70757a; +} +.ais-Hits-item { + @extend %stack; + + h3 { + font-size: 140%; + font-weight: normal; + } + p { + @extend %unset-stack; + color: #3C4043; + } + .lastmod { + font-size: 90%; + color: #70757a; + } +} + +.ais-Pagination { + margin-top: 1em; +} +.ais-Pagination-list { + list-style: none; + padding-left: 0; + @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center); +} +.ais-Pagination-item { + padding: .6rem; +} + +.code { + @include flexbox-grid-mixins.grid($flex-wrap: wrap); + @extend %stack; + + .filename { + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + font-size: 80%; + color: #666; + } + .copy-btn { + margin-left: auto; + + cursor: pointer; + position: relative; + + font-size: 80%; + border: solid 1px #ccc; + padding: .2rem .6rem; + border-radius: .3rem; + line-height: 1; + margin-bottom: .2rem; + outline: none; + } + .code-content { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + + .highlight { + @extend %none-stack; + } + } +} + +.tooltipped::after { + content: 'Copied!'; + background: #555; + display: inline-block; + color: #fff; + border-radius: .4rem; + position: absolute; + left: 50%; + top: -1.8rem; + transform: translate(-50%, 0); + font-size: .75rem; + padding: 4px 10px 6px 10px; + animation: fade-tooltip .5s 1s 1 forwards; +} + +@keyframes fade-tooltip { + to { opacity: 0; } +} diff --git a/src/scss/_project.scss b/src/scss/_project.scss new file mode 100644 index 0000000..ac6b5ea --- /dev/null +++ b/src/scss/_project.scss @@ -0,0 +1,227 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + +header { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .5rem variable.$default-layout-padding; + + h1 { + font-size: 140%; + display: inline-block; + } + + .version { + margin-left: .4rem; + font-size: 80%; + } + + .github { + color: currentColor; + margin-left: .4rem; + font-size: 180%; + } +} + +.description { +} + +.global-menu { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .2rem variable.$default-layout-padding; + + ul { + list-style: none; + padding: 0; + margin: 0; + } + li { + display: inline-block; + margin-right: 1.8rem; + position: relative; + } + + ul.sub-menu { + display: none; + margin: 0; + position: absolute; + top: 1.8rem; + left: 0; + z-index: 99999; + + li { + padding: .2rem variable.$default-layout-padding; + background: var(--custom-background-color, #000); + width: 140px; + font-size: 80%; + a { + color: var(--custom-font-color, #fff); + } + } + } + + .fa-angle-right { + margin-left: .4rem; + font-size: 80%; + } + li.parent:hover > ul.sub-menu { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } + + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + li { + display: block; + margin-right: 0; + border-bottom: 1px solid currentColor; + + &:last-child { + border-bottom: none; + } + } + + .fa-angle-right { + display: none; + } + + ul.sub-menu { + display: block; + position: static; + + li { + width: auto; + background: transparent; + padding: 0 .4rem; + + li { + padding-top: .2rem; + } + a { + color: currentColor; + } + } + } + } + + a { + display: block; + color: currentColor; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } +} + +main { + padding: 3rem; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + main { + padding: 1rem; + } +} + +.sidebar { + font-size: 90%; + line-height: 1.8; + background: variable.$sidebar-background-color; + border-right: 1px solid variable.$sidebar-active-color; + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + a { + position: relative; + display: block; + color: #404040; + text-decoration: none; + padding: .2rem 1rem; + border-left: solid 4px variable.$sidebar-background-color; + border-bottom: solid 1px variable.$sidebar-active-color; + + &:hover { + color: #404040; + background: variable.$sidebar-hover-color; + border-left: solid 4px #ccc; + } + } + + nav > ul > li li a { + padding-left: 1rem + 1rem * 1; + } + nav > ul ul > li li a { + padding-left: 1rem + 1rem * 2; + } + nav > ul ul ul > li li a { + padding-left: 1rem + 1rem * 3; + } + nav > ul ul ul ul > li li a { + padding-left: 1rem + 1rem * 4; + } + nav > ul ul ul ul ul > li li a { + padding-left: 1rem + 1rem * 5; + } + + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + nav > ul > li:first-child a { + border-top: solid 1px variable.$sidebar-active-color; + } + } + + .active > a { + background: variable.$sidebar-active-color; + border-left: solid 4px #ccc; + } + + .slide-menu { + .has-sub-menu:not(.parent) ul { + display: none; + } + + .has-sub-menu > a span.mark { + position: absolute; + top: 0; + right: 0; + display: inline-block; + height: 32px; + width: 32px; + line-height: 2; + text-align: center; + color: #979797; + background: #f2f2f2; + border-left: 1px solid #e7e7e7; + } + } +} + +.sidebar-footer { + padding: variable.$default-layout-padding; +} + +footer { +} + +.edit-meta { + font-size: 80%; + text-align: right; +} + +.edit-page { + font-weight: bold; +} + +.powered { + font-size: 80%; + text-align: right; + color: #999; +} diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss new file mode 100644 index 0000000..e6047ad --- /dev/null +++ b/src/scss/_structure.scss @@ -0,0 +1,57 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + +/*-----------------------* + Structure +*-----------------------*/ +html, +body { + height: 100%; +} + +.container { + width: 100%; + height: 100%; + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + margin: auto; +} + +.content-container { + @include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); + @include flexbox-grid-mixins.grid($justify-content: center); +} + +main { + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + + &:only-child { + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + } +} + +.sidebar { + @include flexbox-grid-mixins.grid-col($col: 3, $order: -1); + // position: fixed; + // overflow-x: hidden; + overflow-x: hidden; + overflow-y: scroll; +} + +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { + .content-container { + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); + } + + main { + @include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%); + } + .sidebar { + @include flexbox-grid-mixins.grid-col($col: none, $order: 1); + } +} diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss new file mode 100644 index 0000000..6a010ae --- /dev/null +++ b/src/scss/_variable.scss @@ -0,0 +1,46 @@ +@use 'function/calc-stack'; + +$default-layout-width: 1024px !default; + +$default-base-font-size: 18px !default; +$default-font-size: 18px !default; +$default-line-space: 6px !default; +$default-line-height: calc-stack.line-height($default-line-space, $default-font-size, $default-base-font-size) !default; +$default-stack: calc-stack.stack($default-line-height, $default-font-size, $default-base-font-size) !default; + +$default-layout-margin: 0 !default; +$default-layout-padding: $default-stack !default; + +$default-font-color: #000 !default; +$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; + +// color +$default-background-color: #fafafa !default; +$default-border-color: #f0f0f0 !default; + +$default-link-text-color: #2e7eb3 !default; +$default-link-text-hover-color: #38a0e4 !default; + +$sidebar-background-color: #f9f9f9 !default; +$sidebar-hover-color: #eee !default; +$sidebar-active-color: #eee !default; + +// code +$code-font-size: .95rem !default; +$code-block-background-color: #f4f6f8 !default; +$code-border-color: #f0f0f0 !default; +$code-inline-background-color: #f0f0f0 !default; +$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace !default; + +// breakpoint +$default-breakpoints: ( + xl: 1280px, + lg: 1024px, + md: 896px, + sm: 768px, + xs: 480px +) !default; + +// grid +$flexbox-grid-mixins-box-sizing: null !default; +$flexbox-grid-mixins-stack: margin-top !default; diff --git a/src/scss/chroma.scss b/src/scss/chroma.scss new file mode 100644 index 0000000..340149c --- /dev/null +++ b/src/scss/chroma.scss @@ -0,0 +1,59 @@ +/* Background */ .chroma { color: #f8f8f2; background-color: #272822 } +/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { background-color: #ffffcc; display: block; width: 100% } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; display: block; } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ .chroma .k { color: #66d9ef } +/* KeywordConstant */ .chroma .kc { color: #66d9ef } +/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #66d9ef } +/* KeywordReserved */ .chroma .kr { color: #66d9ef } +/* KeywordType */ .chroma .kt { color: #66d9ef } +/* NameAttribute */ .chroma .na { color: #a6e22e } +/* NameClass */ .chroma .nc { color: #a6e22e } +/* NameConstant */ .chroma .no { color: #66d9ef } +/* NameDecorator */ .chroma .nd { color: #a6e22e } +/* NameException */ .chroma .ne { color: #a6e22e } +/* NameFunction */ .chroma .nf { color: #a6e22e } +/* NameOther */ .chroma .nx { color: #a6e22e } +/* NameTag */ .chroma .nt { color: #f92672 } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #e6db74 } +/* LiteralString */ .chroma .s { color: #e6db74 } +/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } +/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } +/* LiteralStringChar */ .chroma .sc { color: #e6db74 } +/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } +/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } +/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } +/* LiteralStringEscape */ .chroma .se { color: #ae81ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } +/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } +/* LiteralStringOther */ .chroma .sx { color: #e6db74 } +/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } +/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } +/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } +/* LiteralNumber */ .chroma .m { color: #ae81ff } +/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } +/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } +/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } +/* Operator */ .chroma .o { color: #f92672 } +/* OperatorWord */ .chroma .ow { color: #f92672 } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* GenericDeleted */ .chroma .gd { color: #f92672 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericInserted */ .chroma .gi { color: #a6e22e } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #75715e } diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss new file mode 100644 index 0000000..d5bc1ae --- /dev/null +++ b/src/scss/foundation/_element.scss @@ -0,0 +1,199 @@ +@use '../variable'; +@use '../function/calc-stack'; + +/*-----------------------* + Element v1.0.0-custom +*-----------------------*/ +* { + box-sizing: border-box; +} + +:root { + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); + color: variable.$default-font-color; + font-family: var(--custom-font-family-base, variable.$default-font-family); + font-feature-settings : 'pwid'; +} + +body { + background-color: variable.$default-background-color; + margin: variable.$default-layout-margin; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--custom-font-family-headings, variable.$default-font-family); + font-weight: bold; + line-height: variable.$default-line-height; + + > small { + font-size: 75%; + font-weight: normal; + } +} + +h1 { + font-size: 240%; + line-height: calc-stack.line-height(variable.$default-line-space, 240%); +} +h2 { + font-size: 200%; + line-height: calc-stack.line-height(variable.$default-line-space, 200%); +} +h3 { + font-size: 160%; + line-height: calc-stack.line-height(variable.$default-line-space, 160%); +} +h4 { + font-size: 125%; + line-height: calc-stack.line-height(variable.$default-line-space, 125%); +} +h5 { + font-size: 100%; + line-height: calc-stack.line-height(variable.$default-line-space, 100%); +} +h6 { + font-size: 80%; + line-height: calc-stack.line-height(variable.$default-line-space, 80%); +} + +a { + color: var(--custom-link-text-color, variable.$default-link-text-color); + text-decoration: none; + + &:focus, + &:active, + &:hover { + color: var(--custom-link-text-hover-color, variable.$default-link-text-hover-color); + text-decoration: underline; + } +} + +hr { + background-color: #ccc; + height: 2px; + border: 0; +} + +p { + font-size: variable.$default-font-size; +} + +img { + display: inline-block; + line-height: 0; +} + +img, +video { + height: auto; + max-width: 100%; +} + +table { + border-collapse: collapse; + border: 1px solid variable.$default-border-color; + width: 100%; +} +th, +td { + border-top: 1px solid variable.$default-border-color; + border-right: 1px solid variable.$default-border-color; + tr:nth-child(even) & { + background: #f8f8f8; + } + padding: .6rem; +} +th { + background: #eee; + font-weight: bold; + text-align: left; +} + +ul { + list-style-type: disc; +} + +ul { + &.no-style { + list-style: none; + padding-left: 0; + } + &.inline { + list-style: none; + padding-left: 0; + li { + display: inline; + padding-right: 2rem; + } + } +} + +dt { + font-weight: bold; +} +dd { + margin-left: 2rem; +} + +blockquote { + color: #999; + padding: variable.$default-layout-padding; + background-color: #f4f4f4; + border-left: 4px solid variable.$default-border-color; + border-radius: .2rem; +} + +code, +pre, +kbd { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +code, +kbd { + padding: .2rem; + border-radius: .2rem; +} +code { + background-color: #f4f4f4; +} +kbd { + color: #fff; + background-color: #333; +} + +pre { + background-color: #f4f4f4; + padding: variable.$default-layout-padding; + overflow: auto; + white-space: pre-wrap; + border-radius: .2rem; + + code { + padding: 0; + background-color: unset; + } + + &.wrap { + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + } + &.scrollable { + max-height: 240px; + overflow-y: scroll; + } +} + +figcaption { + color: #333; + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); +} diff --git a/src/scss/foundation/_index.scss b/src/scss/foundation/_index.scss new file mode 100644 index 0000000..edd558a --- /dev/null +++ b/src/scss/foundation/_index.scss @@ -0,0 +1,4 @@ +@use "normalize"; +@use "reset"; +@use "element"; +@use "stack"; diff --git a/src/scss/foundation/_normalize.scss b/src/scss/foundation/_normalize.scss new file mode 100644 index 0000000..0be9165 --- /dev/null +++ b/src/scss/foundation/_normalize.scss @@ -0,0 +1,355 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + /* stylelint-disable */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + /* stylelint-enable */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/src/scss/foundation/_reset.scss b/src/scss/foundation/_reset.scss new file mode 100644 index 0000000..aa59002 --- /dev/null +++ b/src/scss/foundation/_reset.scss @@ -0,0 +1,72 @@ +/*-----------------------* + Reset +*-----------------------*/ +* { + 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/foundation/_stack.scss b/src/scss/foundation/_stack.scss new file mode 100644 index 0000000..d9feb14 --- /dev/null +++ b/src/scss/foundation/_stack.scss @@ -0,0 +1,66 @@ +@use '../variable'; + +/*-----------------------* + stack +*-----------------------*/ +:root { + --const-stack: #{variable.$default-stack}; + --stack-top: #{variable.$default-stack}; + --stack-bottom: 0; + --first-stack-top: 0; + --first-stack-bottom: 0; + --last-stack-top: 0; + --last-stack-bottom: 0; +} + +.first-stack, +%first-stack { + margin-top: var(--first-stack-top, unset); + margin-bottom: var(--first-stack-bottom, unset); +} + +.stack, +%stack { + margin-top: var(--stack-top, unset); + margin-bottom: var(--stack-bottom, unset); +} + +.last-stack, +%last-stack { + margin-top: var(--last-stack-top, unset); + margin-bottom: var(--last-stack-bottom, unset); +} + +.stack-multi--by2, +%stack-multi--by2 { + margin-top: calc(var(--first-stack-top, unset) * 2); + margin-bottom: calc(var(--first-stack-bottom, unset) * 2); +} + +.stack-multi--by4, +%stack-multi--by4 { + margin-top: calc(var(--first-stack-top, unset) * 4); + margin-bottom: calc(var(--first-stack-bottom, unset) * 4); +} + +.stack-divi--by2, +%stack-divi--by2 { + margin-top: calc(var(--first-stack-top, unset) / 2); + margin-bottom: calc(var(--first-stack-bottom, unset) / 2); +} + +.none-stack, +%none-stack { + margin-top: 0; +} + +.unset-stack, +%unset-stack { + margin-top: unset; +} + +.reverse-stack +%reverse-stack { + margin-top: var(--stack-bottom, unset); + margin-bottom: var(--stack-top, unset); +} diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss new file mode 100644 index 0000000..1e5e856 --- /dev/null +++ b/src/scss/function/_calc-font-size.scss @@ -0,0 +1,52 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; + +// Included Modules +@use 'strip-unit'; + +// =================================================================== +// px to em +// =================================================================== + +@function px2em($px, $base: 16) { + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1em; +} + +@function px2rem($px, $base: 16) { + @return math.div(strip-unit.strip-unit($px), strip-unit.strip-unit($base)) * 1rem; +} +// =================================================================== +// percent to px +// ========================================================n=========== + +@function percent2px($percent, $base: 16) { + @return strip-unit.strip-unit($base) * math.div(strip-unit.strip-unit($percent), 100) * 1px; +} + +// =================================================================== +// percent to em +// =================================================================== + +@function percent2em($percent, $base: 16) { + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div(strip-unit.strip-unit($base) * $ratio, strip-unit.strip-unit($base)) * 1em; +} + +@function percent2rem($percent, $base: 16) { + $ratio: math.div((strip-unit.strip-unit($percent), 100)); + @return math.div((strip-unit.strip-unit($base) * $ratio), strip-unit.strip-unit($base)) * 1rem; +} + +// =================================================================== +// em to px +// =================================================================== + +@function em2px($em, $base: 16) { + @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px; +} + +@function rem2px($rem, $base: 16) { + @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px; +} diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss new file mode 100644 index 0000000..c9c7b05 --- /dev/null +++ b/src/scss/function/_calc-stack.scss @@ -0,0 +1,40 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; + +// Included Modules +@use 'calc-font-size'; +@use 'strip-unit'; + +@function stack($line-height: 1, $font-size: 16px, $base-size: 16px) { + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base-size); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); + } + + $line-height-px-unit: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($font-size); + + $stack: calc-font-size.px2rem($line-height-px-unit, $base-size); + + @return $stack; +} + +@function line-height($line-space: 4px, $font-size: 16px, $base-size: 16px) { + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base-size); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base-size); + } @else if math.unit($font-size) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base-size); + } + + $font-size: strip-unit.strip-unit($font-size); + $line-space: strip-unit.strip-unit($line-space); + $line-height: math.div(($line-space * 2) + $font-size, $font-size); + + @return $line-height; +} diff --git a/src/scss/function/_contrast-color.scss b/src/scss/function/_contrast-color.scss new file mode 100644 index 0000000..685d0d5 --- /dev/null +++ b/src/scss/function/_contrast-color.scss @@ -0,0 +1,26 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; +@use 'sass:color'; + +// =================================================================== +// contrast color +// =================================================================== + +@function contrast-color($color: null, $dark: #000, $light: #fff) { + @if $color == null { + @return null; + } + @else { + $color-brightness: brightness($color); + $light-color-brightness: brightness($light); + $dark-color-brightness: brightness($dark); + + @return if(math.abs($color-brightness - $light-color-brightness) > math.abs($color-brightness - $dark-color-brightness), $light, $dark); + } +} + +@function brightness($color: null) { + @return math.div((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114), 1000); +} diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss new file mode 100644 index 0000000..dd93185 --- /dev/null +++ b/src/scss/function/_strip-unit.scss @@ -0,0 +1,17 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:meta'; +@use 'sass:math'; + +@function strip-unit($value) { + @if meta.type-of($value) == 'number' and math.is-unitless($value) == false { + @return math.div($value, $value * 0 + 1); + } @else if meta.type-of($value) == 'number' { + @return $value; + } @else { + @warn $value; + @warn meta.type-of($value); + @error "error strip unit" + } +} diff --git a/src/scss/theme.scss b/src/scss/theme.scss new file mode 100644 index 0000000..25e2e04 --- /dev/null +++ b/src/scss/theme.scss @@ -0,0 +1,4 @@ +@use "foundation"; +@use "structure"; +@use "component"; +@use "project"; diff --git a/static/css/theme.css b/static/css/theme.css new file mode 100644 index 0000000..d83b481 --- /dev/null +++ b/static/css/theme.css @@ -0,0 +1,1225 @@ +@charset "UTF-8"; +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + /* stylelint-disable */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + /* stylelint-enable */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + /* stylelint-disable */ + font-family: monospace, monospace; /* 1 */ + /* stylelint-enable */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type=checkbox], +[type=radio] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type=search] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +/*-----------------------* + Reset +*-----------------------*/ +* { + 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; +} + +/*-----------------------* + Element v1.0.0-custom +*-----------------------*/ +* { + box-sizing: border-box; +} + +:root { + font-size: 18px; + line-height: 1.6666666667; + color: #000; + font-family: var(--custom-font-family-base, -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"; +} + +body { + background-color: #fafafa; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--custom-font-family-headings, -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-weight: bold; + line-height: 1.6666666667; +} +h1 > small, +h2 > small, +h3 > small, +h4 > small, +h5 > small, +h6 > small { + font-size: 75%; + font-weight: normal; +} + +h1 { + font-size: 240%; + line-height: 1.3125; +} + +h2 { + font-size: 200%; + line-height: 1.375; +} + +h3 { + font-size: 160%; + line-height: 1.46875; +} + +h4 { + font-size: 125%; + line-height: 1.6; +} + +h5 { + font-size: 100%; + line-height: 1.75; +} + +h6 { + font-size: 80%; + line-height: 1.9375; +} + +a { + color: var(--custom-link-text-color, #2e7eb3); + text-decoration: none; +} +a:focus, a:active, a:hover { + color: var(--custom-link-text-hover-color, #38a0e4); + text-decoration: underline; +} + +hr { + background-color: #ccc; + height: 2px; + border: 0; +} + +p { + font-size: 18px; +} + +img { + display: inline-block; + line-height: 0; +} + +img, +video { + height: auto; + max-width: 100%; +} + +table { + border-collapse: collapse; + border: 1px solid #f0f0f0; + width: 100%; +} + +th, +td { + border-top: 1px solid #f0f0f0; + border-right: 1px solid #f0f0f0; + padding: 0.6rem; +} +tr:nth-child(even) th, +tr:nth-child(even) td { + background: #f8f8f8; +} + +th { + background: #eee; + font-weight: bold; + text-align: left; +} + +ul { + list-style-type: disc; +} + +ul.no-style { + list-style: none; + padding-left: 0; +} +ul.inline { + list-style: none; + padding-left: 0; +} +ul.inline li { + display: inline; + padding-right: 2rem; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 2rem; +} + +blockquote { + color: #999; + padding: 1.6666666667rem; + background-color: #f4f4f4; + border-left: 4px solid #f0f0f0; + border-radius: 0.2rem; +} + +code, +pre, +kbd { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +code, +kbd { + padding: 0.2rem; + border-radius: 0.2rem; +} + +code { + background-color: #f4f4f4; +} + +kbd { + color: #fff; + background-color: #333; +} + +pre { + background-color: #f4f4f4; + padding: 1.6666666667rem; + overflow: auto; + white-space: pre-wrap; + border-radius: 0.2rem; +} +pre code { + padding: 0; + background-color: unset; +} +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; +} + +figcaption { + color: #333; + font-size: 18px; + line-height: 1.6666666667; +} + +/*-----------------------* + stack +*-----------------------*/ +:root { + --const-stack: 1.6666666667rem; + --stack-top: 1.6666666667rem; + --stack-bottom: 0; + --first-stack-top: 0; + --first-stack-bottom: 0; + --last-stack-top: 0; + --last-stack-bottom: 0; +} + +.first-stack, +main * { + margin-top: var(--first-stack-top, unset); + margin-bottom: var(--first-stack-bottom, unset); +} + +.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, +.table_of_contents, +.edit-meta, +.edit-page, +.pagination, +.highlight, +.powered, +.panel, +.button, +.gist, +.twitter-tweet, +.ais-Hits-item, +.code { + margin-top: var(--stack-top, unset); + margin-bottom: var(--stack-bottom, unset); +} + +.last-stack { + margin-top: var(--last-stack-top, unset); + margin-bottom: var(--last-stack-bottom, unset); +} + +.stack-multi--by2 { + margin-top: calc(var(--first-stack-top, unset) * 2); + margin-bottom: calc(var(--first-stack-bottom, unset) * 2); +} + +.stack-multi--by4 { + margin-top: calc(var(--first-stack-top, unset) * 4); + margin-bottom: calc(var(--first-stack-bottom, unset) * 4); +} + +.stack-divi--by2 { + margin-top: calc(var(--first-stack-top, unset) / 2); + margin-bottom: calc(var(--first-stack-bottom, unset) / 2); +} + +.none-stack, +figure > figcaption, +.pagination > *, +.code .code-content .highlight { + margin-top: 0; +} + +.unset-stack, +main li > ul, +main li > ol, +.ais-Hits-item p { + margin-top: unset; +} + +/*-----------------------* + Structure +*-----------------------*/ +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; + justify-content: center; +} + +main { + box-sizing: border-box; + flex: 0 0 75%; + max-width: 75%; +} +main:only-child { + box-sizing: border-box; + flex: 0 0 100%; + max-width: 100%; +} + +.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; + min-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; + 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 { + --panel-font-color: #000; + --panel-background-color: unset; + --panel-border-color: transparent; + padding: 1.6666666667rem; + color: var(--panel-font-color, #000); + background: var(--panel-background-color, unset); + border: 1px solid; + border-color: var(--panel-border-color, transparent); +} +.panel a { + text-decoration: underline; + font-weight: bold; +} + +.panel-primary { + --panel-border-color: #f0f0f0; +} + +.panel-notice { + --panel-font-color: #fff; + --panel-background-color: #b0b0b0; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-recipe { + --panel-font-color: #000; + --panel-background-color: #CDCCCCFF; + --custom-link-text-color: #2e7eb3; + --custom-link-text-hover-color: #38a0e4; +} + +.panel-success { + --panel-font-color: #fff; + --panel-background-color: #609f43; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-caution { + --panel-font-color: #fff; + --panel-background-color: #de776d; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-warning { + --panel-font-color: #fff; + --panel-background-color: #e67e22; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.panel-danger { + --panel-font-color: #fff; + --panel-background-color: #ce3426; + --custom-link-text-color: #fff; + --custom-link-text-hover-color: #fff; +} + +.button { + display: inline-block; + font-size: 120%; + padding: 0.5rem 1.2rem; + font-weight: bold; + text-decoration: none; + border-radius: 0.8rem; + --button-font-color: #000; + --button-font-hover-color: #000; + --button-background-color: #fafafa; + --button-background-hover-color: #f7f7f7; + --button-border-color: #f0f0f0; + color: var(--button-font-color, #000); + background: var(--button-background-color, unset); + border: 2px solid; + border-color: var(--button-border-color, transparent); +} +.button:hover { + color: var(--button-font-hover-color, #000); + text-decoration: none; + background: var(--button-background-hover-color, unset); +} + +.button-notice { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #4ba0e1; + --button-background-hover-color: #3b89c5; + --button-border-color: transparent; +} + +.button-success { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #369b08; + --button-background-hover-color: #256905; + --button-border-color: transparent; +} + +.button-caution { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f56558; + --button-background-hover-color: #d45145; + --button-border-color: transparent; +} + +.button-warning { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #f5811b; + --button-background-hover-color: #db7012; + --button-border-color: transparent; +} + +.button-danger { + --button-font-color: #fff; + --button-font-hover-color: #fff; + --button-background-color: #ce3426; + --button-background-hover-color: #a0281d; + --button-border-color: transparent; +} + +.notification { + padding: 0.2rem 1.6666666667rem; + 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; +} + +.table_of_contents { + font-size: 90%; + padding: 1.6666666667rem; + border: 4px solid #f0f0f0; +} +.table_of_contents ul { + list-style: none; + padding-left: 0; +} +.table_of_contents li { + border-top: 1px solid #f0f0f0; +} +.table_of_contents > nav > ul > li:first-child { + border-top: unset; +} +.table_of_contents ul > li li a { + margin-left: 2rem; +} +.table_of_contents ul ul > li li a { + margin-left: 4rem; +} +.table_of_contents ul ul ul > li li a { + margin-left: 6rem; +} +.table_of_contents ul ul ul ul > li li a { + margin-left: 8rem; +} +.table_of_contents ul ul ul ul ul > li li a { + margin-left: 10rem; +} + +.headerlink > .svg-inline--fa { + margin-left: 0.4rem; + width: 0.8rem; +} + +.ais-SearchBox .ais-SearchBox-input { + width: 70%; +} +.ais-SearchBox button { + margin-left: 0.2rem; + padding: 0.4rem; +} + +.ais-Stats { + font-size: 80%; + color: #70757a; +} + +.ais-Hits-item h3 { + font-size: 140%; + font-weight: normal; +} +.ais-Hits-item p { + color: #3C4043; +} +.ais-Hits-item .lastmod { + font-size: 90%; + color: #70757a; +} + +.ais-Pagination { + margin-top: 1em; +} + +.ais-Pagination-list { + list-style: none; + padding-left: 0; + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.ais-Pagination-item { + padding: 0.6rem; +} + +.code { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; +} +.code .filename { + box-sizing: border-box; + flex: 0 0 75%; + max-width: 75%; + font-size: 80%; + color: #666; +} +.code .copy-btn { + margin-left: auto; + cursor: pointer; + position: relative; + font-size: 80%; + border: solid 1px #ccc; + padding: 0.2rem 0.6rem; + border-radius: 0.3rem; + line-height: 1; + margin-bottom: 0.2rem; + outline: none; +} +.code .code-content { + box-sizing: border-box; + flex: 0 0 100%; + max-width: 100%; +} +.tooltipped::after { + content: "Copied!"; + background: #555; + display: inline-block; + color: #fff; + border-radius: 0.4rem; + position: absolute; + left: 50%; + top: -1.8rem; + transform: translate(-50%, 0); + font-size: 0.75rem; + padding: 4px 10px 6px 10px; + animation: fade-tooltip 0.5s 1s 1 forwards; +} + +@keyframes fade-tooltip { + to { + opacity: 0; + } +} +header { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: 0.5rem 1.6666666667rem; +} +header h1 { + font-size: 140%; + display: inline-block; +} +header .version { + margin-left: 0.4rem; + font-size: 80%; +} +header .github { + color: currentColor; + margin-left: 0.4rem; + font-size: 180%; +} + +.global-menu { + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: 0.2rem 1.6666666667rem; +} +.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.6666666667rem; + background: var(--custom-background-color, #000); + width: 140px; + font-size: 80%; +} +.global-menu ul.sub-menu li a { + color: var(--custom-font-color, #fff); +} +.global-menu .fa-angle-right { + margin-left: 0.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 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 0.4rem; + } + .global-menu ul.sub-menu li + li { + padding-top: 0.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%; + line-height: 1.8; + 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: 0.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 nav > ul ul ul > li li a { + padding-left: 4rem; +} +.sidebar nav > ul ul ul ul > li li a { + padding-left: 5rem; +} +.sidebar nav > ul ul ul ul ul > li li a { + padding-left: 6rem; +} +@media screen and (max-width: 480px) { + .sidebar nav > ul > li:first-child a { + border-top: solid 1px #eee; + } +} +.sidebar .active > a { + background: #eee; + border-left: solid 4px #ccc; +} +.sidebar .slide-menu .has-sub-menu:not(.parent) ul { + display: none; +} +.sidebar .slide-menu .has-sub-menu > a span.mark { + position: absolute; + top: 0; + right: 0; + display: inline-block; + height: 32px; + width: 32px; + line-height: 2; + text-align: center; + color: #979797; + background: #f2f2f2; + border-left: 1px solid #e7e7e7; +} + +.sidebar-footer { + padding: 1.6666666667rem; +} + +.edit-meta { + font-size: 80%; + text-align: right; +} + +.edit-page { + font-weight: bold; +} + +.powered { + font-size: 80%; + text-align: right; + color: #999; +} + +/*# sourceMappingURL=theme.css.map */ diff --git a/static/css/theme.css.map b/static/css/theme.css.map new file mode 100644 index 0000000..3628165 --- /dev/null +++ b/static/css/theme.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/scss/foundation/_normalize.scss","../../src/scss/foundation/_reset.scss","../../src/scss/foundation/_element.scss","../../src/scss/_variable.scss","../../src/scss/foundation/_stack.scss","../../src/scss/_structure.scss","../../node_modules/flexbox-grid-mixins/dart-sass/_flexbox-grid-mixins.scss","../../src/scss/_component.scss","../../src/scss/_project.scss"],"names":[],"mappings":"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;AAMD;EACC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,YJ9KsB;;;AIiLvB;EACC;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA,SJjNe;EIkNf;;AAEA;EACC;EACA;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;;AAKF;EACC;EACA;;;AAIA;EACC;;AAED;EACC;EACA;;;AAGF;EACC;EACA;;;AAKA;EACC;EACA;;AAED;EAEC;;AAED;EACC;EACA;;;AAIF;EACC;;;AAED;EACC;EACA;ED3QC,YAN+B;EAU/B,SAPoB;EAcpB,WCiQ6C;EDzP7C,iBCyPqE;;;AAEvE;EACC;;;AAGD;EDlRE,YAN+B;EAU/B,SAPoB;EAcpB,WCwQ6C;;AAG9C;ED9NC,YA9D+B;EA4I/B;EA0BA,WCuH4E;EAC5E;EACA;;AAED;EACC;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EDjPC,YA9D+B;EA4I/B;EA0BA,WC0I6E;;AAQ/E;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACE;IAAK;;;AC/UP;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;;;AAOF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAKH;EACC;EACA;;AAED;EFnDC,YAN+B;EAU/B,SAPoB;EAkBpB,WEqC8C;;AAG/C;EACC;IACC;IACA;IACA;;EAEA;IACC;;EAIF;IACC;;EAGD;IACC;IACA;;EAEA;IACC;IACA;IACA;;EACA;IACC;;EAED;IACC;;;AAMJ;EACC;EACA;EACA;;AACA;EACC;;;AAKH;EACC;;;AAGD;EACC;IACC;;;AAIF;EACC;EACA;EACA,YL9G0B;EK+G1B;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,YLjImB;EKkInB;;AAIF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;IACC;;;AAIF;EACC,YL5JqB;EK6JrB;;AAIA;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;EACC,SLvMe;;;AK6MhB;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA","file":"theme.css"} \ No newline at end of file diff --git a/static/css/theme.min.css b/static/css/theme.min.css new file mode 100644 index 0000000..f151c8f --- /dev/null +++ b/static/css/theme.min.css @@ -0,0 +1,2 @@ +@charset "UTF-8"; +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0}a{color:inherit;cursor:pointer}button,input,select,textarea{font:inherit}button{background-color:transparent;border-width:0;color:inherit;cursor:pointer;padding:0}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}*{box-sizing:border-box}:root{font-feature-settings:"pwid";color:#000;font-family:var(--custom-font-family-base,-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-size:18px;line-height:1.6666666667}body{background-color:#fafafa;margin:0}h1,h2,h3,h4,h5,h6{font-family:var(--custom-font-family-headings,-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-weight:700;line-height:1.6666666667}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{font-size:75%;font-weight:400}h1{font-size:240%;line-height:1.3125}h2{font-size:200%;line-height:1.375}h3{font-size:160%;line-height:1.46875}h4{font-size:125%;line-height:1.6}h5{font-size:100%;line-height:1.75}h6{font-size:80%;line-height:1.9375}a{color:var(--custom-link-text-color,#2e7eb3);text-decoration:none}a:active,a:focus,a:hover{color:var(--custom-link-text-hover-color,#38a0e4);text-decoration:underline}hr{background-color:#ccc;border:0;height:2px}p{font-size:18px}img{display:inline-block;line-height:0}img,video{height:auto;max-width:100%}table{border:1px solid #f0f0f0;border-collapse:collapse;width:100%}td,th{border-right:1px solid #f0f0f0;border-top:1px solid #f0f0f0;padding:.6rem}tr:nth-child(2n) td,tr:nth-child(2n) th{background:#f8f8f8}th{background:#eee;font-weight:700;text-align:left}ul{list-style-type:disc}ul.inline,ul.no-style{list-style:none;padding-left:0}ul.inline li{display:inline;padding-right:2rem}dt{font-weight:700}dd{margin-left:2rem}blockquote{background-color:#f4f4f4;border-left:4px solid #f0f0f0;border-radius:.2rem;color:#999;padding:1.6666666667rem}code,kbd,pre{font-family:Menlo,Monaco,Courier New,monospace}code,kbd{border-radius:.2rem;padding:.2rem}code{background-color:#f4f4f4}kbd{background-color:#333;color:#fff}pre{background-color:#f4f4f4;border-radius:.2rem;overflow:auto;padding:1.6666666667rem;white-space:pre-wrap}pre code{background-color:unset;padding:0}pre.wrap{word-wrap:break-word;white-space:pre;white-space:pre-wrap;word-break:break-all}pre.scrollable{max-height:240px;overflow-y:scroll}figcaption{color:#333;font-size:18px;line-height:1.6666666667}:root{--const-stack:1.6666666667rem;--stack-top:1.6666666667rem;--stack-bottom:0;--first-stack-top:0;--first-stack-bottom:0;--last-stack-top:0;--last-stack-bottom:0}.first-stack,main *{margin-bottom:var(--first-stack-bottom,unset);margin-top:var(--first-stack-top,unset)}.ais-Hits-item,.button,.code,.edit-meta,.edit-page,.gist,.highlight,.pagination,.panel,.powered,.stack,.table_of_contents,.twitter-tweet,main *+blockquote,main *+dl,main *+figure,main *+h1,main *+h2,main *+h3,main *+h4,main *+h5,main *+h6,main *+hr,main *+ol,main *+p,main *+pre,main *+table,main *+ul{margin-bottom:var(--stack-bottom,unset);margin-top:var(--stack-top,unset)}.last-stack{margin-bottom:var(--last-stack-bottom,unset);margin-top:var(--last-stack-top,unset)}.stack-multi--by2{margin-bottom:calc(var(--first-stack-bottom, unset)*2);margin-top:calc(var(--first-stack-top, unset)*2)}.stack-multi--by4{margin-bottom:calc(var(--first-stack-bottom, unset)*4);margin-top:calc(var(--first-stack-top, unset)*4)}.stack-divi--by2{margin-bottom:calc(var(--first-stack-bottom, unset)/2);margin-top:calc(var(--first-stack-top, unset)/2)}.code .code-content .highlight,.none-stack,.pagination>*,figure>figcaption{margin-top:0}.ais-Hits-item p,.unset-stack,main li>ol,main li>ul{margin-top:unset}body,html{height:100%}.container{flex-flow:column nowrap;height:100%;margin:auto;width:100%}.container,.content-container{box-sizing:border-box;display:flex}.content-container{flex:1 0 auto;justify-content:center}main{flex:0 0 75%;max-width:75%}main,main:only-child{box-sizing:border-box}main:only-child{flex:0 0 100%;max-width:100%}.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{min-width:100%}.sidebar,main{box-sizing:border-box;flex:0 0 auto}.sidebar{order:1}}.pagination{box-sizing:border-box;display:flex;flex-wrap:nowrap;font-weight:700;justify-content:space-between}.nav-next{margin-left:auto}@media screen and (max-width:480px){.pagination{align-items:center;box-sizing:border-box;display:flex;flex-flow:column nowrap}.nav-next{margin-left:0}}.panel{--panel-font-color:#000;--panel-background-color:unset;--panel-border-color:transparent;background:var(--panel-background-color,unset);border:1px solid;border-color:var(--panel-border-color,transparent);color:var(--panel-font-color,#000);padding:1.6666666667rem}.panel a{font-weight:700;text-decoration:underline}.panel-primary{--panel-border-color:#f0f0f0}.panel-notice{--panel-font-color:#fff;--panel-background-color:#b0b0b0;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-recipe{--panel-font-color:#000;--panel-background-color:#cdcccc;--custom-link-text-color:#2e7eb3;--custom-link-text-hover-color:#38a0e4}.panel-success{--panel-font-color:#fff;--panel-background-color:#609f43;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-caution{--panel-font-color:#fff;--panel-background-color:#de776d;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-warning{--panel-font-color:#fff;--panel-background-color:#e67e22;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.panel-danger{--panel-font-color:#fff;--panel-background-color:#ce3426;--custom-link-text-color:#fff;--custom-link-text-hover-color:#fff}.button{--button-font-color:#000;--button-font-hover-color:#000;--button-background-color:#fafafa;--button-background-hover-color:#f7f7f7;--button-border-color:#f0f0f0;background:var(--button-background-color,unset);border:2px solid;border-color:var(--button-border-color,transparent);border-radius:.8rem;color:var(--button-font-color,#000);display:inline-block;font-size:120%;font-weight:700;padding:.5rem 1.2rem;text-decoration:none}.button:hover{background:var(--button-background-hover-color,unset);color:var(--button-font-hover-color,#000);text-decoration:none}.button-notice{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#4ba0e1;--button-background-hover-color:#3b89c5;--button-border-color:transparent}.button-success{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#369b08;--button-background-hover-color:#256905;--button-border-color:transparent}.button-caution{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#f56558;--button-background-hover-color:#d45145;--button-border-color:transparent}.button-warning{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#f5811b;--button-background-hover-color:#db7012;--button-border-color:transparent}.button-danger{--button-font-color:#fff;--button-font-hover-color:#fff;--button-background-color:#ce3426;--button-background-hover-color:#a0281d;--button-border-color:transparent}.notification{background:#eee;padding:.2rem 1.6666666667rem;text-align:center}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}figure>figcaption h4{font-size:80%;font-weight:400}.table_of_contents{border:4px solid #f0f0f0;font-size:90%;padding:1.6666666667rem}.table_of_contents ul{list-style:none;padding-left:0}.table_of_contents li{border-top:1px solid #f0f0f0}.table_of_contents>nav>ul>li:first-child{border-top:unset}.table_of_contents ul>li li a{margin-left:2rem}.table_of_contents ul ul>li li a{margin-left:4rem}.table_of_contents ul ul ul>li li a{margin-left:6rem}.table_of_contents ul ul ul ul>li li a{margin-left:8rem}.table_of_contents ul ul ul ul ul>li li a{margin-left:10rem}.headerlink>.svg-inline--fa{margin-left:.4rem;width:.8rem}.ais-SearchBox .ais-SearchBox-input{width:70%}.ais-SearchBox button{margin-left:.2rem;padding:.4rem}.ais-Stats{color:#70757a;font-size:80%}.ais-Hits-item h3{font-size:140%;font-weight:400}.ais-Hits-item p{color:#3c4043}.ais-Hits-item .lastmod{color:#70757a;font-size:90%}.ais-Pagination{margin-top:1em}.ais-Pagination-list{box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding-left:0}.ais-Pagination-item{padding:.6rem}.code{box-sizing:border-box;display:flex;flex-wrap:wrap}.code .filename{box-sizing:border-box;color:#666;flex:0 0 75%;font-size:80%;max-width:75%}.code .copy-btn{border:1px solid #ccc;border-radius:.3rem;cursor:pointer;font-size:80%;line-height:1;margin-bottom:.2rem;margin-left:auto;outline:none;padding:.2rem .6rem;position:relative}.code .code-content{box-sizing:border-box;flex:0 0 100%;max-width:100%}.tooltipped:after{animation:fade-tooltip .5s 1s 1 forwards;background:#555;border-radius:.4rem;color:#fff;content:"Copied!";display:inline-block;font-size:.75rem;left:50%;padding:4px 10px 6px;position:absolute;top:-1.8rem;transform:translate(-50%)}@keyframes fade-tooltip{to{opacity:0}}header{background:var(--custom-background-color,#000);color:var(--custom-font-color,#fff);padding:.5rem 1.6666666667rem}header h1{display:inline-block;font-size:140%}header .version{font-size:80%;margin-left:.4rem}header .github{color:currentColor;font-size:180%;margin-left:.4rem}.global-menu{background:var(--custom-background-color,#000);color:var(--custom-font-color,#fff);padding:.2rem 1.6666666667rem}.global-menu ul{list-style:none;margin:0;padding:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;left:0;margin:0;position:absolute;top:1.8rem;z-index:99999}.global-menu ul.sub-menu li{background:var(--custom-background-color,#000);font-size:80%;padding:.2rem 1.6666666667rem;width:140px}.global-menu ul.sub-menu li a{color:var(--custom-font-color,#fff)}.global-menu .fa-angle-right{font-size:80%;margin-left:.4rem}.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{border-bottom:1px solid;display:block;margin-right:0}.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{background:transparent;padding:0 .4rem;width:auto}.global-menu ul.sub-menu li+li{padding-top:.2rem}.global-menu ul.sub-menu li a{color:currentColor}}.global-menu a{color:currentColor;display:block;text-decoration:none}.global-menu a:hover{text-decoration:underline}main{padding:3rem}@media screen and (max-width:480px){main{padding:1rem}}.sidebar{background:#f9f9f9;border-right:1px solid #eee;font-size:90%;line-height:1.8}.sidebar ul{list-style:none;margin:0;padding:0}.sidebar a{border-bottom:1px solid #eee;border-left:4px solid #f9f9f9;color:#404040;display:block;padding:.2rem 1rem;position:relative;text-decoration:none}.sidebar a:hover{background:#eee;border-left:4px solid #ccc;color:#404040}.sidebar nav>ul>li li a{padding-left:2rem}.sidebar nav>ul ul>li li a{padding-left:3rem}.sidebar nav>ul ul ul>li li a{padding-left:4rem}.sidebar nav>ul ul ul ul>li li a{padding-left:5rem}.sidebar nav>ul ul ul ul ul>li li a{padding-left:6rem}@media screen and (max-width:480px){.sidebar nav>ul>li:first-child a{border-top:1px solid #eee}}.sidebar .active>a{background:#eee;border-left:4px solid #ccc}.sidebar .slide-menu .has-sub-menu:not(.parent) ul{display:none}.sidebar .slide-menu .has-sub-menu>a span.mark{background:#f2f2f2;border-left:1px solid #e7e7e7;color:#979797;display:inline-block;height:32px;line-height:2;position:absolute;right:0;text-align:center;top:0;width:32px}.sidebar-footer{padding:1.6666666667rem}.edit-meta{font-size:80%;text-align:right}.edit-page{font-weight:700}.powered{color:#999;font-size:80%;text-align:right} \ No newline at end of file