diff options
| author | thingsym <thingsym@gmail.com> | 2019-11-02 10:02:15 +0300 |
|---|---|---|
| committer | thingsym <thingsym@gmail.com> | 2019-11-02 10:02:15 +0300 |
| commit | 6af3bd43e2e65a517170561695e82b51cc23868a (patch) | |
| tree | 29f4f637936f3b74b2973a9ccd338d12217e4a36 | |
| parent | f08a753e39c152b0acf4afcc8604c8690d970aa7 (diff) | |
| parent | c3a0d4e8ed35f42fed5ec0e4ec8a450e44637ca5 (diff) | |
Merge branch 'release-0.4.0'v0.4.0
38 files changed, 1425 insertions, 729 deletions
diff --git a/.editorconfig b/.editorconfig index d3fdac4..eb59675 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,5 +8,19 @@ charset = utf-8 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true +indent_style = tab +indent_size = 2 + +[{*.html,*.js}] +indent_style = space + +[{package.json,*.yml}] indent_style = space indent_size = 2 + +[{composer.json,*.toml}] +indent_style = space +indent_size = 4 + +[*.md] +trim_trailing_whitespace = false @@ -8,11 +8,32 @@ The Techdoc is a Hugo Theme for technical documentation. * Modern, Simple layout * Responsive web design -* Documentation menu +* Documentation menu (Select Menu style) +* Theme color * Edit link to documentation repository * Custom Shortcodes * Analytics with Google Analytics, Google Tag Manager +## Screenshot + +### Theme color + + + +### Menu style + +#### Open Menu + + + +#### Slide Menu + + + +### Edit link + + + ## Getting Started ### Download Hugo theme @@ -87,9 +108,13 @@ node_modules resources src |- scss + | |- foundation + | | |- _element.scss + | | |- _normalize.scss + | | |- _reset.scss + | | |- _stack.scss | |- _component.scss - | |- _element.scss - | |- _normalize.scss + | |- _foundation.scss | |- _project.scss | |- _structure.scss | |- _variable.scss @@ -166,6 +191,11 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin ## Changelog +* Version 0.4.0 - 2019.11.02 + * update Sample Document + * add Theme color + * add Menu style + * improve scss * Version 0.3.0 - 2019.10.06 * fix archetypes * add prepend-body.html for Tag Manager noscript version @@ -192,10 +222,16 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin ## License -Licensed under the MIT License. +Techdoc is licensed under the MIT License. + +Techdoc bundles the following third-party resources: + +* CSS reset by [normalize.css](https://necolas.github.io/normalize.css/), [MIT](https://opensource.org/licenses/MIT) +* jQuery Plugin [Back to the Top](https://github.com/thingsym/jquery.backtothetop), [MIT](https://opensource.org/licenses/MIT) +* Sass Mixin [Flexbox Grid Mixins](https://thingsym.github.io/flexbox-grid-mixins/), [MIT](https://opensource.org/licenses/MIT) ## Author [thingsym](https://github.com/thingsym) -Copyright (c) 2017-2018 by thingsym +Copyright (c) 2017-2019 by thingsym diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9b46bbb..e54d896 100755 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -20,7 +20,7 @@ enableMissingTranslationPlaceholders = false # Souce Code repository section description = "put your description" github_repository = "https://github.com/thingsym/hugo-theme-techdoc" - version = "0.3.0" + version = "0.4.0" # Documentation repository section # documentation repository (set edit link to documentation repository) @@ -32,6 +32,15 @@ enableMissingTranslationPlaceholders = false google_site_verification = "" # Your Google Site Verification for Search Console # Theme settings section + # Theme color + custom_font_color = "" + custom_background_color = "" + + # Documentation Menu section + # Menu style settings + menu_style = "open-menu" # "open-menu" or "slide-menu" + + # Date format dateformat = "" # default "2 Jan 2006" # See the format reference https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 15c7f5e..9e8a559 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -1,6 +1,6 @@ --- date: 2017-10-19T15:26:15Z -lastmod: 2018-12-08T15:26:15Z +lastmod: 2019-10-26T15:26:15Z publishdate: 2018-11-23T15:26:15Z --- @@ -12,6 +12,8 @@ publishdate: 2018-11-23T15:26:15Z * Modern, Simple layout * Responsive web design +* Documentation menu (Select Menu style) +* Theme color * Edit link to documentation repository * Custom Shortcodes * Analytics with Google Analytics, Google Tag Manager diff --git a/exampleSite/content/getting-started/_index.md b/exampleSite/content/getting-started/_index.md index 3af5a2b..109d88f 100644 --- a/exampleSite/content/getting-started/_index.md +++ b/exampleSite/content/getting-started/_index.md @@ -14,3 +14,5 @@ Download Hugo theme, configure, preview site ... ## [Configuration](./configuration) You may specify options in config.toml (or config.yaml/config.json) of your site to make use of this theme's features. + +## [Screenshot](./screenshot) diff --git a/exampleSite/content/getting-started/configuration.md b/exampleSite/content/getting-started/configuration.md index bfba202..0be11bf 100644 --- a/exampleSite/content/getting-started/configuration.md +++ b/exampleSite/content/getting-started/configuration.md @@ -1,6 +1,7 @@ --- title: "Configuration" date: 2017-10-17T15:26:15Z +lastmod: 2019-10-26T15:26:15Z draft: false weight: 20 --- @@ -14,7 +15,7 @@ For an example of `config.toml`, see [config.toml](https://github.com/thingsym/h # Souce Code repository section description = "put your description" github_repository = "https://github.com/thingsym/hugo-theme-techdoc" - version = "0.3.0" + version = "0.4.0" # Documentation repository section # documentation repository (set edit link to documentation repository) @@ -26,10 +27,27 @@ For an example of `config.toml`, see [config.toml](https://github.com/thingsym/h google_site_verification = "" # Your Google Site Verification for Search Console # Theme settings section - dateformat = "" # default "2 Jan 2006" + # Theme color + custom_font_color = "" + custom_background_color = "" + + # Documentation Menu section + # Menu style settings + menu_style = "open-menu" # "open-menu" or "slide-menu" - # path name excluded from document menu - menu_exclusion = ["archives", "blog", "entry", "post", "posts"] + # Date format + dateformat = "" # default "2 Jan 2006" + # See the format reference https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference + + # path name excluded from documentation menu + menu_exclusion = [ + "archives", + "archive", + "blog", + "entry", + "post", + "posts" + ] #### `description` @@ -47,7 +65,7 @@ default: `https://github.com/thingsym/hugo-theme-techdoc` The version of souce code -default: `0.3.0` +default: `0.4.0` #### `github_doc_repository` @@ -77,6 +95,25 @@ Content value in meta tag `google-site-verification` for Google Search Console default: `""` +#### `custom_font_color` + +Header font color + +default: `""` + +#### `custom_background_color` + +Header background color + +default: `""` + +#### `menu_style` + +Documentation Menu style Open Menu or Slide Menu + +default: `slide-menu` +value: `open-menu` | `slide-menu` + #### `dateformat` default: `""` as `2 Jan 2006` @@ -87,4 +124,11 @@ Path name excluded from documentation menu By default, we exclude commonly used folder names in blogs. -default: `["archives", "blog", "entry", "post", "posts"]` +default: `[ + "archives", + "archive", + "blog", + "entry", + "post", + "posts" + ]` diff --git a/exampleSite/content/getting-started/screenshot.md b/exampleSite/content/getting-started/screenshot.md new file mode 100644 index 0000000..5056b8f --- /dev/null +++ b/exampleSite/content/getting-started/screenshot.md @@ -0,0 +1,22 @@ +--- +title: "Screenshot" +date: 2019-10-26T15:26:15Z +draft: false +weight: 30 +--- + +### Theme color + +### Menu style + +#### Open Menu + + + +#### Slide Menu + + + +### Edit link + + diff --git a/exampleSite/content/sample/_index.md b/exampleSite/content/sample/_index.md index a541b24..2451c43 100644 --- a/exampleSite/content/sample/_index.md +++ b/exampleSite/content/sample/_index.md @@ -9,16 +9,16 @@ description: "this is a sample document." ## Header # H1 Header - ## H2 Header - ### H3 Header +#### H4 Header +##### H5 Header +###### H6 Header ## Paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - ## Emphasis **Lorem ipsum dolor sit amet, consectetur adipisicing** elit, sed do ~~eiusmod tempor incididunt ut labore~~ et dolore magna aliqua. Ut enim *ad minim veniam, quis nostrud exercitation* ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -68,6 +68,16 @@ inline code `#ffce44` ## Table +| header | header | header | +|------------|-------------|--------------| +| Lorem | Lorem | Lorem | +| ipsum | ipsum | ipsum | +| dolor | dolor | dolor | +| sit | sit | sit | +| amet | amet | amet | + +### with alignment + | Left align | Right align | Center align | |:-----------|------------:|:------------:| | This | This | This | diff --git a/exampleSite/content/sample/custom-shortcodes.md b/exampleSite/content/sample/custom-shortcodes.md index f26b686..e98b0ee 100644 --- a/exampleSite/content/sample/custom-shortcodes.md +++ b/exampleSite/content/sample/custom-shortcodes.md @@ -16,6 +16,8 @@ description: "calling custom Shortcodes into your content files." {{% panel %}} <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="https://github.com/thingsym/hugo-theme-techdoc">Ut enim ad minim venia</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +<strong>Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="https://github.com/thingsym/hugo-theme-techdoc">Ut enim ad minim venia</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. {{% /panel %}} diff --git a/images/screenshot-edit-link.png b/images/screenshot-edit-link.png Binary files differnew file mode 100644 index 0000000..6a66d70 --- /dev/null +++ b/images/screenshot-edit-link.png diff --git a/images/screenshot-open-menu.png b/images/screenshot-open-menu.png Binary files differnew file mode 100644 index 0000000..03c63d7 --- /dev/null +++ b/images/screenshot-open-menu.png diff --git a/images/screenshot-slide-menu.gif b/images/screenshot-slide-menu.gif Binary files differnew file mode 100644 index 0000000..644f5fe --- /dev/null +++ b/images/screenshot-slide-menu.gif diff --git a/images/screenshot-theme-color.png b/images/screenshot-theme-color.png Binary files differnew file mode 100644 index 0000000..4cce1be --- /dev/null +++ b/images/screenshot-theme-color.png diff --git a/layouts/partials/custom-css.html b/layouts/partials/custom-css.html new file mode 100644 index 0000000..1917867 --- /dev/null +++ b/layouts/partials/custom-css.html @@ -0,0 +1,6 @@ +<style> +:root { + {{ with .Site.Params.custom_font_color }}--custom-font-color: {{ . }};{{ end }} + {{ with .Site.Params.custom_background_color }}--custom-background-color: {{ . }};{{ end }} +} +</style> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 64f7e43..6e4c6f5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -23,3 +23,4 @@ {{- partial "meta/google-analytics-async.html" . -}} {{- partial "meta/tag-manager.html" . -}} {{- partial "meta/google-site-verification.html" . -}} +{{- partial "custom-css.html" . -}} diff --git a/layouts/partials/menu.html b/layouts/partials/menu/open-menu.html index 0d00ecc..510fc30 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu/open-menu.html @@ -1,30 +1,30 @@ {{$currentNode := .}} -<nav> +<nav class="open-menu"> <ul> <li class="{{ if .IsHome }}active{{ end }}"><a href="{{ .Site.BaseURL }}">Home</a></li> {{- if eq .Site.Params.ordersectionsby "title" -}} {{- range .Site.Home.Sections.ByTitle -}} -{{template "menu" dict "sect" . "currentnode" $currentNode}} +{{template "open-menu" dict "sect" . "currentnode" $currentNode}} {{- end -}} {{- else -}} {{- range .Site.Home.Sections.ByWeight -}} -{{template "menu" dict "sect" . "currentnode" $currentNode}} +{{template "open-menu" dict "sect" . "currentnode" $currentNode}} {{- end -}} {{- end}} </ul> </nav> -{{define "menu"}} +{{define "open-menu"}} {{- $currentNode := .currentnode -}} {{ with .sect }} {{ if .IsSection }} {{ if in .Site.Params.menu_exclusion .Section }} {{- else -}} {{- safeHTML .Params.head -}} -<li class="{{ if .IsAncestor $currentNode }}parent{{ end }}{{ if eq .UniqueID $currentNode.UniqueID }} active{{ end }}{{ if .Params.alwaysopen }} parent{{ end }}"><a href="{{ .URL }}">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}</a> {{- $numberOfPages := (add (len .Pages) (len .Sections)) -}} - {{if ne $numberOfPages 0}} -<ul class="{{ if .IsAncestor $currentNode }}sub-menu{{ end }}"> +<li class="{{ if .IsAncestor $currentNode }}parent{{ end }}{{ if eq .UniqueID $currentNode.UniqueID }} active{{ end }}{{ if .Params.alwaysopen }} parent{{ end }}"><a href="{{ .URL }}">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}</a> + {{ if ne $numberOfPages 0 }} +<ul class="sub-menu"> {{- .Scratch.Set "pages" .Pages -}} {{- if .Sections -}} {{- .Scratch.Set "pages" (.Pages | union .Sections) -}} @@ -34,14 +34,14 @@ {{- range $pages.ByTitle -}} {{- if and .Params.hidden (not $.showhidden) -}} {{- else -}} -{{template "menu" dict "sect" . "currentnode" $currentNode}} +{{template "open-menu" dict "sect" . "currentnode" $currentNode}} {{- end -}} {{- end -}} {{- else -}} {{- range $pages.ByWeight -}} {{- if and .Params.hidden (not $.showhidden) -}} {{- else -}} -{{template "menu" dict "sect" . "currentnode" $currentNode}} +{{template "open-menu" dict "sect" . "currentnode" $currentNode}} {{- end -}} {{- end -}} {{- end}} diff --git a/layouts/partials/menu/slide-menu.html b/layouts/partials/menu/slide-menu.html new file mode 100644 index 0000000..bc8e1ea --- /dev/null +++ b/layouts/partials/menu/slide-menu.html @@ -0,0 +1,58 @@ +{{$currentNode := .}} +<nav class="slide-menu"> +<ul> +<li class="{{ if .IsHome }}active{{ end }}"><a href="{{ .Site.BaseURL }}">Home</a></li> +{{- if eq .Site.Params.ordersectionsby "title" -}} + {{- range .Site.Home.Sections.ByTitle -}} +{{template "slide-menu" dict "sect" . "currentnode" $currentNode}} + {{- end -}} +{{- else -}} + {{- range .Site.Home.Sections.ByWeight -}} +{{template "slide-menu" dict "sect" . "currentnode" $currentNode}} + {{- end -}} +{{- end}} +</ul> +</nav> + +{{define "slide-menu"}} +{{- $currentNode := .currentnode -}} +{{ with .sect }} +{{ if .IsSection }} +{{ if in .Site.Params.menu_exclusion .Section }} +{{- else -}} + {{- safeHTML .Params.head -}} + {{- $numberOfPages := (add (len .Pages) (len .Sections)) -}} +<li class="{{ if .IsAncestor $currentNode }}parent{{ end }}{{ if eq .UniqueID $currentNode.UniqueID }} active{{ end }}{{ if ne $numberOfPages 0 }} has-sub-menu{{ end }}"><a href="{{ .URL }}">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}{{ if ne $numberOfPages 0 }}{{ if .IsAncestor $currentNode }}<span class="mark opened">-</span>{{ else }}<span class="mark closed">+</span>{{ end }}{{ end }}</a> + {{ if ne $numberOfPages 0 }} +<ul class="sub-menu"> + {{- .Scratch.Set "pages" .Pages -}} + {{- if .Sections -}} + {{- .Scratch.Set "pages" (.Pages | union .Sections) -}} + {{- end -}} + {{- $pages := (.Scratch.Get "pages") -}} + {{- if eq .Site.Params.ordersectionsby "title" -}} + {{- range $pages.ByTitle -}} + {{- if and .Params.hidden (not $.showhidden) -}} + {{- else -}} +{{template "slide-menu" dict "sect" . "currentnode" $currentNode}} + {{- end -}} + {{- end -}} + {{- else -}} + {{- range $pages.ByWeight -}} + {{- if and .Params.hidden (not $.showhidden) -}} + {{- else -}} +{{template "slide-menu" dict "sect" . "currentnode" $currentNode}} + {{- end -}} + {{- end -}} + {{- end}} +</ul> + {{end}} +</li> +{{- end -}} +{{- else -}} + {{- if not .Params.Hidden -}} +<li class="{{ if eq .UniqueID $currentNode.UniqueID }}active{{ end }}"><a href="{{ .URL }}">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}</a></li> + {{- end -}} +{{ end -}} +{{ end -}} +{{ end }} diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 1ee9b4b..ca9e04c 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,5 +1,9 @@ <div class="sidebar"> -{{- partial "menu.html" . -}} +{{ if eq .Site.Params.menu_style "open-menu" }} +{{- partial "menu/open-menu.html" . -}} +{{ else if eq .Site.Params.menu_style "slide-menu" }} +{{- partial "menu/slide-menu.html" . -}} +{{ end }} <div class="sidebar-footer"> {{- partial "sidebar-footer.html" . -}} </div> diff --git a/package-lock.json b/package-lock.json index 0bc3280..d1c8304 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hugo-theme-techdoc", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0bf7954..890f25d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hugo-theme-techdoc", - "version": "0.3.0", + "version": "0.4.0", "description": "The Techdoc is a Hugo Theme for technical documentation.", "main": "gulpfile.js", "author": "Thingsym", diff --git a/src/js/functions.js b/src/js/functions.js deleted file mode 100644 index 4332b2c..0000000 --- a/src/js/functions.js +++ /dev/null @@ -1,22 +0,0 @@ -jQuery(document).ready(function() { - jQuery(function() { - jQuery('.nav-prev').click(function(){ - location.href = jQuery(this).attr('href'); - }); - jQuery('.nav-next').click(function() { - location.href = jQuery(this).attr('href'); - }); - }); - - jQuery(document).keydown(function(e) { - // prev links - left arrow key - if(e.which == '37') { - jQuery('.nav.nav-prev').click(); - } - - // next links - right arrow key - if(e.which == '39') { - jQuery('.nav.nav-next').click(); - } - }); -}); diff --git a/src/js/keydown-nav.js b/src/js/keydown-nav.js new file mode 100644 index 0000000..b9b6df6 --- /dev/null +++ b/src/js/keydown-nav.js @@ -0,0 +1,22 @@ +(function($) { + $(document).ready(function() { + $('.nav-prev').on( 'click', function() { + location.href = $(this).attr('href'); + }); + $('.nav-next').on('click', function() { + location.href = $(this).attr('href'); + }); + + $(document).on( 'keydown', function(e) { + // prev links - left arrow key + if(e.which == '37') { + $('.nav-prev').click(); + } + + // next links - right arrow key + if(e.which == '39') { + $('.nav-next').click(); + } + }); + }); +})(jQuery); diff --git a/src/js/main.js b/src/js/main.js index 406f9c0..27d1d17 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,2 +1,3 @@ -require( './functions.js' ); -require( './jquery.backtothetop/jquery.backtothetop.js' ); +require( './sidebar-menu.js' ); +require( './keydown-nav.js' ); +require( './jquery.backtothetop/jquery.backtothetop.min.js' ); diff --git a/src/js/sidebar-menu.js b/src/js/sidebar-menu.js new file mode 100644 index 0000000..5979b0a --- /dev/null +++ b/src/js/sidebar-menu.js @@ -0,0 +1,17 @@ +(function($) { + $(document).ready(function() { + $('.has-sub-menu > a span.mark').on( 'click', function(e){ + $( this ).parent().siblings( 'ul' ).slideToggle( 'fast', 'swing', function() { + var text = ''; + if ( $( this ).is(':visible') ) { + text = '-'; + } + else { + text = '+'; + } + $( this ).siblings('a').children( 'span.mark' ).text( text ); + }); + e.preventDefault(); + }); + }); +})(jQuery); diff --git a/src/scss/_component.scss b/src/scss/_component.scss index e050161..f04a4c2 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -1,114 +1,126 @@ +.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-border-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; - } -} +.panel-header {} .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-border-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 deleted file mode 100644 index 959786e..0000000 --- a/src/scss/_element.scss +++ /dev/null @@ -1,82 +0,0 @@ -body { - 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; - } -} - -p { - font-size: $default-font-size; -} - -code { - font-family: $code-font-family; - font-size: $code-font-size; - background: $code-inline-background-color; - padding: .2rem; -} - -pre { - overflow: auto; - background: $code-block-background-color; - padding: 1rem; - border: 1px solid $code-border-color; - - 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 $default-line-color; - border-left: 1px solid $default-line-color; - margin-bottom: $default-margin; - width: 100%; - -} -th { - border-bottom: 1px solid $default-line-color; - border-right: 1px solid $default-line-color; - padding: .4em; - font-weight: bold; -} -td { - border-bottom: 1px solid $default-line-color; - border-right: 1px solid $default-line-color; - padding: .4em; - - tr:nth-child(even) & { - background: #f8f8f8; - } -} - -img { - max-width: 100%; -} -figure { - margin: 0; -} - -hr { - height: 2px; - border: 0; - background-color: #ccc; -} diff --git a/src/scss/_foundation.scss b/src/scss/_foundation.scss new file mode 100644 index 0000000..fc99f81 --- /dev/null +++ b/src/scss/_foundation.scss @@ -0,0 +1,4 @@ +@import "foundation/normalize"; +@import "foundation/reset"; +@import "foundation/element"; +@import "foundation/stack"; diff --git a/src/scss/_project.scss b/src/scss/_project.scss index 7b64fc7..42b3a88 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -1,179 +1,207 @@ header { - background: #000; - padding: .2rem 1.2rem; - - h1 { - color: #fff; - font-size: 140%; - display: inline-block; - margin: 0; - } - - .version { - color: #fff; - font-size: 80%; - } - - .github { - margin-left: .4rem; - color: #ddd; - font-size: 180%; - &:hover { - color: #fff; - } - } + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .5rem $default-padding; + + h1 { + font-size: 140%; + display: inline-block; + } + + .version { + font-size: 80%; + } + + .github { + color: currentColor; + margin-left: .4rem; + font-size: 180%; + } } .description { - color: #ddd; - margin: 0; } .global-menu { - background: #000; - padding: 0 1.2rem .4rem; - color: #ddd; - border-top: 1px solid #333; - - 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: .4rem; - background: #000; - width: 140px; - font-size: 80%; - } - } - - .fa-angle-right { - margin-left: .4rem; - font-size: 80%; - } - li.parent:hover > ul.sub-menu { - @include grid($flex-flow: column nowrap); - } - - @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { - li { - display: block; - margin-right: 0; - border-bottom: 1px solid #333; - - &:last-child { - border-bottom: none; - } - } - - .fa-angle-right { - display: none; - } - - ul.sub-menu { - display: block; - position: static; - - li { - width: auto; - } - } - } - - a { - display: block; - color: #ddd; - text-decoration: none; - &:hover { - color: #fff; - } - } + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: .2rem $default-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 $default-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 grid($flex-flow: column nowrap); + } + + @media screen and (max-width: #{map-get($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: 1rem 3rem 3rem; + padding: 3rem; } @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { - main { - padding: 1rem; - } + main { + padding: 1rem; + } } .sidebar { - font-size: 90%; - background: $sidebar-background-color; - border-right: 1px solid $sidebar-active-color; - - ul { - list-style: none; - padding: 0; - margin: 0; - } - ul ul ul { - margin-left: 1rem; - } - a { - display: block; - color: #404040; - text-decoration: none; - padding: .2rem 1.2rem; - &: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 { - padding-left: 2rem; - } - - .active > a { - background: $sidebar-active-color; - border-left: solid 4px #ccc; - } - + font-size: 90%; + background: $sidebar-background-color; + border-right: 1px solid $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 $sidebar-background-color; + border-bottom: solid 1px $sidebar-active-color; + + &:hover { + color: #404040; + background: $sidebar-hover-color; + border-left: solid 4px #ccc; + } + } + + nav > ul > li li a { + padding-left: 2rem; + } + nav > ul ul > li li a { + padding-left: 3rem; + } + + @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { + nav > ul > li:first-child a { + border-top: solid 1px $sidebar-active-color; + } + } + + .active > a { + background: $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 { - margin: 1rem; - margin-top: 2rem; + padding: $default-padding; } footer { - margin-top: 2rem; } .edit-meta { - font-size: 80%; - margin-top: 2rem; - text-align: right; + font-size: 80%; + text-align: right; } .edit-page { - font-weight: bold; + font-weight: bold; } .powered { - font-size: 80%; - text-align: right; - color: #999; + font-size: 80%; + text-align: right; + color: #999; } diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index 7292b10..472fa15 100644 --- a/src/scss/_structure.scss +++ b/src/scss/_structure.scss @@ -1,45 +1,45 @@ /*-----------------------* - Structure + Structure *-----------------------*/ html, body { - height: 100%; + height: 100%; } .container { - width: 100%; - height: 100%; - @include grid($flex-flow: column nowrap); - margin: auto; + width: 100%; + height: 100%; + @include grid($flex-flow: column nowrap); + margin: auto; } .content-container { - @include grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); - @include grid(); + @include grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); + @include grid(); } main { - @include grid-col($col: 9, $flex-shrink: 0 ); - max-width: 75%; + @include grid-col($col: 9, $flex-shrink: 0 ); + max-width: 75%; } .sidebar { - @include grid-col($col: 3, $order: -1); - // position: fixed; - // overflow-x: hidden; - overflow-x: hidden; - overflow-y: scroll; + @include grid-col($col: 3, $order: -1); + // position: fixed; + // overflow-x: hidden; + overflow-x: hidden; + overflow-y: scroll; } @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { - .content-container { - @include grid($flex-flow: column nowrap); - } + .content-container { + @include grid($flex-flow: column nowrap); + } - main { - @include grid-col($col: none, $flex-shrink: 0 ); - max-width: 100%; - } - .sidebar { - @include grid-col($col: none, $order: 1); - } + main { + @include grid-col($col: none, $flex-shrink: 0); + max-width: 100%; + } + .sidebar { + @include grid-col($col: none, $order: 1); + } } diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index 0e4d913..f87e369 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; @@ -19,10 +17,10 @@ $sidebar-background-color: #f9f9f9; $sidebar-hover-color: #eee; $sidebar-active-color: #eee; -$default-link-color: #2e7eb3; -$default-link-hover-color: #38a0e4; +$default-link-text-color: #2e7eb3; +$default-link-hover-text-color: #38a0e4; -$default-line-color: #f0f0f0; +$default-border-color: #f0f0f0; // code $code-font-size: .95rem; @@ -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/foundation/_element.scss b/src/scss/foundation/_element.scss new file mode 100644 index 0000000..4c68f6f --- /dev/null +++ b/src/scss/foundation/_element.scss @@ -0,0 +1,237 @@ +body { + font-family: $default-font-family; + font-feature-settings : 'pwid'; + line-height: $default-line-height; + background: $default-background-color; + margin: 0; +} + +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; +} + +hr { + background-color: #ccc; + height: 2px; + border: 0; +} + +table { + border-collapse: collapse; + border: 1px solid $default-border-color; + width: 100%; +} +th, +td { + border-top: 1px solid $default-border-color; + border-right: 1px solid $default-border-color; + padding: .4rem; + + 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; + margin-left: 0; + padding: .1rem .8rem; + border-left: 4px solid $default-border-color; + + p:last-child { + margin: 0; + } +} + +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 {} + +} +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; + } +} + +/* Links */ +a { + color: $default-link-text-color; + text-decoration: underline; + + &:focus, + &:active, + &:hover { + color: $default-link-hover-text-color; + } +} + +img { + max-width: 100%; + height: auto; +} + +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/_normalize.scss b/src/scss/foundation/_normalize.scss index b26c100..c469989 100644 --- a/src/scss/_normalize.scss +++ b/src/scss/foundation/_normalize.scss @@ -1,17 +1,15 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! 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 - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { + html { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -19,15 +17,18 @@ html { ========================================================================== */ /** - * Add the correct display in IE 9-. + * Remove the margin in all browsers. */ -article, -aside, -footer, -header, -nav, -section { +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { display: block; } @@ -45,25 +46,6 @@ h1 { ========================================================================== */ /** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ @@ -88,17 +70,15 @@ pre { ========================================================================== */ /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * Remove the gray background on active links in IE 10. */ a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ + background-color: transparent; } /** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -109,15 +89,6 @@ abbr[title] { } /** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** * Add the correct font weight in Chrome, Edge, and Safari. */ @@ -139,23 +110,6 @@ samp { } /** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** * Add the correct font size in all browsers. */ @@ -188,44 +142,19 @@ sup { ========================================================================== */ /** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. + * Remove the border on images inside links in IE 10. */ img { border-style: none; } -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - /* Forms ========================================================================== */ /** - * Remove the margin in Firefox and Safari. + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. */ button, @@ -233,7 +162,10 @@ input, optgroup, select, textarea { - margin: 0; + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** @@ -257,16 +189,14 @@ select { /* 1 */ } /** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. + * Correct the inability to style clickable types in iOS and Safari. */ button, -html [type="button"], /* 1 */ +[type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; /* 2 */ + -webkit-appearance: button; } /** @@ -293,6 +223,14 @@ button:-moz-focusring, } /** + * 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 @@ -309,17 +247,15 @@ legend { } /** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + vertical-align: baseline; } /** - * Remove the default vertical scrollbar in IE. + * Remove the default vertical scrollbar in IE 10+. */ textarea { @@ -327,8 +263,8 @@ textarea { } /** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. */ [type="checkbox"], @@ -357,10 +293,9 @@ textarea { } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + * Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } @@ -379,12 +314,10 @@ textarea { ========================================================================== */ /* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. + * Add the correct display in Edge, IE 10+, and Firefox. */ -details, /* 1 */ -menu { +details { display: block; } @@ -396,30 +329,19 @@ summary { display: list-item; } -/* Scripting +/* Misc ========================================================================== */ /** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. + * Add the correct display in IE 10+. */ template { display: none; } -/* Hidden - ========================================================================== */ - /** - * Add the correct display in IE 10-. + * Add the correct display in IE 10. */ [hidden] { 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..20fdef3 --- /dev/null +++ b/src/scss/foundation/_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/theme.scss b/src/scss/theme.scss index e5bb0c7..e36cffc 100644 --- a/src/scss/theme.scss +++ b/src/scss/theme.scss @@ -1,7 +1,7 @@ @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; @import 'variable'; -@import "normalize"; -@import "element"; + +@import "foundation"; @import "structure"; @import "component"; @import "project"; diff --git a/static/css/theme.css b/static/css/theme.css index 516f93d..3ae99d4 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1,16 +1,14 @@ -/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ +@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 - * IE on Windows Phone and in iOS. + * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -18,14 +16,16 @@ html { /* Sections ========================================================================== */ /** - * Add the correct display in IE 9-. - */ -article, -aside, -footer, -header, -nav, -section { + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { display: block; } @@ -41,24 +41,6 @@ h1 { /* Grouping content ========================================================================== */ /** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ -figcaption, -figure, -main { - /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ -figure { - margin: 1em 40px; -} - -/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ @@ -85,18 +67,14 @@ pre { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + * Remove the gray background on active links in IE 10. */ a { background-color: transparent; - /* 1 */ - -webkit-text-decoration-skip: objects; - /* 2 */ } /** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -110,14 +88,6 @@ abbr[title] { } /** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ -b, -strong { - font-weight: inherit; -} - -/** * Add the correct font weight in Chrome, Edge, and Safari. */ b, @@ -139,21 +109,6 @@ samp { } /** - * Add the correct font style in Android 4.3-. - */ -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ -mark { - background-color: #ff0; - color: #000; -} - -/** * Add the correct font size in all browsers. */ small { @@ -183,46 +138,31 @@ sup { /* Embedded content ========================================================================== */ /** - * Add the correct display in IE 9-. - */ -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. + * Remove the border on images inside links in IE 10. */ img { border-style: none; } -/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; -} - /* Forms ========================================================================== */ /** - * Remove the margin in Firefox and Safari. + * 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 */ } /** @@ -246,16 +186,13 @@ select { } /** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. + * Correct the inability to style clickable types in iOS and Safari. */ button, -html [type="button"], +[type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; - /* 2 */ } /** @@ -280,6 +217,13 @@ button:-moz-focusring, } /** + * 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 @@ -301,26 +245,22 @@ legend { } /** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - display: inline-block; - /* 1 */ vertical-align: baseline; - /* 2 */ } /** - * Remove the default vertical scrollbar in IE. + * 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-. + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { @@ -350,9 +290,8 @@ textarea { } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + * Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } @@ -371,11 +310,9 @@ textarea { /* Interactive ========================================================================== */ /* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. + * Add the correct display in Edge, IE 10+, and Firefox. */ -details, -menu { +details { display: block; } @@ -386,119 +323,402 @@ summary { display: list-item; } -/* Scripting +/* Misc ========================================================================== */ /** - * Add the correct display in IE 9-. - */ -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. + * Add the correct display in IE 10+. */ template { display: none; } -/* Hidden - ========================================================================== */ /** - * Add the correct display in IE 10-. + * 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; +} + 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; } /*-----------------------* - Structure + Structure *-----------------------*/ html, body { @@ -508,27 +728,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 +752,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 +778,6 @@ main { @media screen and (max-width: 480px) { .pagination { - box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; @@ -579,8 +788,7 @@ main { } .panel { - margin-bottom: 2rem; - padding: 1rem; + padding: 1.2rem; } .panel-primary { @@ -612,11 +820,6 @@ main { background: #ce3426; } -.panel-header h3 { - margin: 0; - margin-bottom: 0.6rem; -} - .button { display: inline-block; font-size: 120%; @@ -626,7 +829,6 @@ main { border-radius: 12px; color: #fff; background: #4ba0e1; - margin-bottom: 1.2rem; } .button:hover { @@ -672,7 +874,7 @@ main { } .notification { - padding: .2rem 1.2rem; + padding: 0.2rem 1.2rem; text-align: center; background: #eee; } @@ -686,43 +888,36 @@ main { color: #fff; } +figure > figcaption h4 { + font-size: 80%; + font-weight: normal; +} + header { - background: #000; - padding: .2rem 1.2rem; + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: 0.5rem 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 { - background: #000; - padding: 0 1.2rem .4rem; - color: #ddd; - border-top: 1px solid #333; + color: var(--custom-font-color, #fff); + background: var(--custom-background-color, #000); + padding: 0.2rem 1.2rem; } .global-menu ul { @@ -747,19 +942,22 @@ header .github:hover { } .global-menu ul.sub-menu li { - padding: .4rem; - background: #000; + padding: 0.2rem 1.2rem; + 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: .4rem; font-size: 80%; } .global-menu li.parent:hover > ul.sub-menu { - box-sizing: border-box; display: flex; flex-flow: column nowrap; } @@ -768,7 +966,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 +980,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 +1023,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 +1039,49 @@ 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; +} + +@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-footer { - margin: 1rem; - margin-top: 2rem; +.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; } -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..220bb0e 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 v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.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;-webkit-text-decoration:underline dotted;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:-0.25em}sup{top:-0.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}button,[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}fieldset{padding:0.35em 0.75em 0.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}template{display:none}[hidden]{display:none}*{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}.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:var(--custom-font-color, #fff);background:var(--custom-background-color, #000);padding:0.5rem 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:var(--custom-font-color, #fff);background:var(--custom-background-color, #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: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:.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}@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.2rem}.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/static/js/bundle.js b/static/js/bundle.js index 4abfd0d..e64d641 100644 --- a/static/js/bundle.js +++ b/static/js/bundle.js @@ -1 +1 @@ -!function(t){var o={};function e(a){if(o[a])return o[a].exports;var i=o[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,e),i.l=!0,i.exports}e.m=t,e.c=o,e.d=function(t,o,a){e.o(t,o)||Object.defineProperty(t,o,{enumerable:!0,get:a})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,o){if(1&o&&(t=e(t)),8&o)return t;if(4&o&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(e.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&o&&"string"!=typeof t)for(var i in t)e.d(a,i,function(o){return t[o]}.bind(null,i));return a},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,o){return Object.prototype.hasOwnProperty.call(t,o)},e.p="",e(e.s=0)}([function(t,o,e){e(1),e(2)},function(t,o){jQuery(document).ready((function(){jQuery((function(){jQuery(".nav-prev").click((function(){location.href=jQuery(this).attr("href")})),jQuery(".nav-next").click((function(){location.href=jQuery(this).attr("href")}))})),jQuery(document).keydown((function(t){"37"==t.which&&jQuery(".nav.nav-prev").click(),"39"==t.which&&jQuery(".nav.nav-next").click()}))}))},function(t,o){var e;(e=jQuery)(window).on("load.BackToTheTop",(function(){e('a[href^="#"]').BackToTheTop()})),e.fn.BackToTheTop=function(t){var o={duration:300,easing:"swing",offset:0,hash:!0,scrolloffset:0,fadein:"slow",fadeout:"slow",display:"bottom-right",top:0,bottom:0,left:0,right:0,zIndex:999,position:"fixed"};e.extend(o,t),e('a[href^="#"]').on("click.BackToTheTop",(function(){var t=void 0!==e(this).data("backtothetop-scrolltop")?e(this).data("backtothetop-scrolltop"):e(this.hash).offset()?e(this.hash).offset().top:"backtothetop-fixed"==e(this).attr("id")&&"#"==e(this).attr("href")?0:null;if(null!==t){var a=void 0===e(this).data("backtothetop-duration")?o.duration:e(this).data("backtothetop-duration"),i=void 0===e(this).data("backtothetop-easing")?o.easing:e(this).data("backtothetop-easing"),n=void 0===e(this).data("backtothetop-offset")?o.offset:e(this).data("backtothetop-offset"),d=void 0===e(this).data("backtothetop-hash")?o.hash:e(this).data("backtothetop-hash"),f=e(this).attr("href");return e("html,body").animate({scrollTop:t+n},a,i,(function(){!0===d&&window.history.pushState("","",f)})),!1}})),function(){var t=e("a#backtothetop-fixed");if(t){var a=void 0===t.data("backtothetop-fixed-scroll-offset")?o.scrolloffset:t.data("backtothetop-fixed-scroll-offset"),i=void 0===t.data("backtothetop-fixed-fadein")?o.fadein:t.data("backtothetop-fixed-fadein"),n=void 0===t.data("backtothetop-fixed-fadeout")?o.fadeout:t.data("backtothetop-fixed-fadeout"),d=void 0===t.data("backtothetop-fixed-display")?o.display:t.data("backtothetop-fixed-display"),f=void 0===t.data("backtothetop-fixed-top")?o.top:t.data("backtothetop-fixed-top"),r=void 0===t.data("backtothetop-fixed-bottom")?o.bottom:t.data("backtothetop-fixed-bottom"),c=void 0===t.data("backtothetop-fixed-left")?o.left:t.data("backtothetop-fixed-left"),h=void 0===t.data("backtothetop-fixed-right")?o.right:t.data("backtothetop-fixed-right"),s=void 0===t.data("backtothetop-fixed-zindex")?o.zIndex:t.data("backtothetop-fixed-zindex");"top-left"==d?(r="none",h="none"):"top-right"==d?(r="none",c="none"):"bottom-left"==d?(f="none",h="none"):"bottom-right"==d&&(f="none",c="none"),t.css({display:"none"}),e(window).on("scroll.BackToTheTop",(function(){e(this).scrollTop()>a?(t.css({top:f,bottom:r,left:c,right:h,zIndex:s,position:o.position}),"none"==t.css("display")&&t.fadeIn(i)):e(this).scrollTop()<=0+a&&"none"!=t.css("display")&&t.fadeOut(n)}))}}()}}]);
\ No newline at end of file +!function(t){var o={};function e(a){if(o[a])return o[a].exports;var i=o[a]={i:a,l:!1,exports:{}};return t[a].call(i.exports,i,i.exports,e),i.l=!0,i.exports}e.m=t,e.c=o,e.d=function(t,o,a){e.o(t,o)||Object.defineProperty(t,o,{enumerable:!0,get:a})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,o){if(1&o&&(t=e(t)),8&o)return t;if(4&o&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(e.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&o&&"string"!=typeof t)for(var i in t)e.d(a,i,function(o){return t[o]}.bind(null,i));return a},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,o){return Object.prototype.hasOwnProperty.call(t,o)},e.p="",e(e.s=0)}([function(t,o,e){e(1),e(2),e(3)},function(t,o){var e;(e=jQuery)(document).ready((function(){e(".has-sub-menu > a span.mark").on("click",(function(t){e(this).parent().siblings("ul").slideToggle("fast","swing",(function(){var t="";t=e(this).is(":visible")?"-":"+",e(this).siblings("a").children("span.mark").text(t)})),t.preventDefault()}))}))},function(t,o){var e;(e=jQuery)(document).ready((function(){e(".nav-prev").on("click",(function(){location.href=e(this).attr("href")})),e(".nav-next").on("click",(function(){location.href=e(this).attr("href")})),e(document).on("keydown",(function(t){"37"==t.which&&e(".nav-prev").click(),"39"==t.which&&e(".nav-next").click()}))}))},function(t,o){var e;(e=jQuery)(window).on("load.BackToTheTop",(function(){e('a[href^="#"]').BackToTheTop()})),e.fn.BackToTheTop=function(t){var o={duration:300,easing:"swing",offset:0,hash:!0,scrolloffset:0,fadein:"slow",fadeout:"slow",display:"bottom-right",top:0,bottom:0,left:0,right:0,zIndex:999,position:"fixed"};e.extend(o,t),e('a[href^="#"]').on("click.BackToTheTop",(function(){var t=void 0!==e(this).data("backtothetop-scrolltop")?e(this).data("backtothetop-scrolltop"):e(this.hash).offset()?e(this.hash).offset().top:"backtothetop-fixed"==e(this).attr("id")&&"#"==e(this).attr("href")?0:null;if(null!==t){var a=void 0===e(this).data("backtothetop-duration")?o.duration:e(this).data("backtothetop-duration"),i=void 0===e(this).data("backtothetop-easing")?o.easing:e(this).data("backtothetop-easing"),n=void 0===e(this).data("backtothetop-offset")?o.offset:e(this).data("backtothetop-offset"),d=void 0===e(this).data("backtothetop-hash")?o.hash:e(this).data("backtothetop-hash"),f=e(this).attr("href");return e("html,body").animate({scrollTop:t+n},a,i,(function(){!0===d&&window.history.pushState("","",f)})),!1}})),function(){var t=e("a#backtothetop-fixed");if(t){var a=void 0===t.data("backtothetop-fixed-scroll-offset")?o.scrolloffset:t.data("backtothetop-fixed-scroll-offset"),i=void 0===t.data("backtothetop-fixed-fadein")?o.fadein:t.data("backtothetop-fixed-fadein"),n=void 0===t.data("backtothetop-fixed-fadeout")?o.fadeout:t.data("backtothetop-fixed-fadeout"),d=void 0===t.data("backtothetop-fixed-display")?o.display:t.data("backtothetop-fixed-display"),f=void 0===t.data("backtothetop-fixed-top")?o.top:t.data("backtothetop-fixed-top"),r=void 0===t.data("backtothetop-fixed-bottom")?o.bottom:t.data("backtothetop-fixed-bottom"),c=void 0===t.data("backtothetop-fixed-left")?o.left:t.data("backtothetop-fixed-left"),s=void 0===t.data("backtothetop-fixed-right")?o.right:t.data("backtothetop-fixed-right"),h=void 0===t.data("backtothetop-fixed-zindex")?o.zIndex:t.data("backtothetop-fixed-zindex");"top-left"==d?(r="none",s="none"):"top-right"==d?(r="none",c="none"):"bottom-left"==d?(f="none",s="none"):"bottom-right"==d&&(f="none",c="none"),t.css({display:"none"}),e(window).on("scroll.BackToTheTop",(function(){e(this).scrollTop()>a?(t.css({top:f,bottom:r,left:c,right:s,zIndex:h,position:o.position}),"none"==t.css("display")&&t.fadeIn(i)):e(this).scrollTop()<=0+a&&"none"!=t.css("display")&&t.fadeOut(n)}))}}()}}]);
\ No newline at end of file |
