diff --git a/README.md b/README.md index 843b1de..f47cf67 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ $ git clone https://github.com/frjo/hugo-theme-zen.git zen ## config.yaml example +All the "params" are optional. + ``` baseurl: "https://example.org/" title: "SiteTitle" @@ -47,12 +49,14 @@ title: "SiteTitle" params: copyright: "This site is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License] - (https://creativecommons.org/licenses/by-sa/4.0/)." # Optional - contact: "info@example.org" # Optional - footer: "A [example.org](https://example.org/) production." # Optional - poweredby: true # Optional, show powered by hugo in footer - jquery: true # Optional - slicknav: true # Optional, activates a nice mobile menu. + (https://creativecommons.org/licenses/by-sa/4.0/)." + contact: "info@example.org" + footer: "A [example.org](https://example.org/) production." + poweredby: true # Show powered by hugo in footer + jquery: true + slicknav: true # Activates SlickNav, a nice mobile menu. + search: true # Site search with DuckDuckGo. + searchSize: 20 # Search field size, default 20. ``` diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 09e2501..c4bb77a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,6 +14,7 @@

{{ .Site.Title }}

+
{{ if .Site.Params.search }}{{ partial "search.html" . }}{{ end }}
diff --git a/layouts/partials/search.html b/layouts/partials/search.html new file mode 100644 index 0000000..04e6837 --- /dev/null +++ b/layouts/partials/search.html @@ -0,0 +1,6 @@ +{{ $domain := .Site.BaseURL | replaceRE "^https?://(www\\.)?([^/]+)/?" "$2" }} +
+ + + +
diff --git a/sass/_zen.scss b/sass/_zen.scss index 6cad56c..0f1b892 100644 --- a/sass/_zen.scss +++ b/sass/_zen.scss @@ -117,7 +117,23 @@ body { } &__logo { - width: 100px; + @include respond-to(s) { + float: left; + } + } + + &__site-name { + @include respond-to(s) { + float: left; + } + } + + &__region { + @include respond-to(s) { + float: right; + width: 33%; + clear: none; + } } } @@ -169,6 +185,22 @@ body { } } + +/* Search */ + +.search-form { + @include padding-top(.5); + text-align: center; + + @include respond-to(s) { + text-align: left; + } +} + +.search-text { +} + + /* Print. */ aside, diff --git a/static/css/style-guide/kss-example-chroma.twig b/static/css/style-guide/kss-example-chroma.twig index 1bb1280..f0d599a 100644 --- a/static/css/style-guide/kss-example-chroma.twig +++ b/static/css/style-guide/kss-example-chroma.twig @@ -1 +1 @@ -/*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, text, link, link-visited, border, border-dark, autocomplete, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: border-dark, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
color(hg-red) uses the color: #a30319 This color is inherited by: brand, brand-dark, link-hover, link-active, header-bg
color(hg-red-alt) uses the color: #8d0018
color(beige) uses the color: #f2ecd5 This color is inherited by: brand-alt, row-stripe
color(off-white) uses the color: #fffdf7
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(green2) uses the color: #24a907 This color is inherited by: order-button
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #a30319 (hg-red) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #f2ecd5 (beige)
color(brand-dark) uses the color: #710211 (hg-red)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #a30319 (brand)
color(link-active) uses the color: #a30319 (hg-red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #a30319 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #f2ecd5 (beige)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)
color(order-button) uses the color: #24a907 (green2)
+/*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, brand, brand-alt, brand-dark, text, link, link-visited, link-hover, border, border-dark, autocomplete, header-bg, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: brand, link-hover, border-dark, header-bg, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: brand-dark, progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: brand-alt, button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, row-stripe, skip-link, tabs-bg, tab-text-shadow
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #333333 (nearblack) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #999999 (grey)
color(brand-dark) uses the color: #666666 (grey-dark)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #333333 (brand)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #333333 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #fff (white)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)
diff --git a/static/css/styles.css b/static/css/styles.css index b929576..ed959a6 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1 +1 @@ -/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Baskerville,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#a30319}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}@media print{:link,:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")";font-weight:400;font-size:22px;text-decoration:none}a[href^='#']:after,a[href^='javascript:']:after{content:''}}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}@media print{abbr[title]:after{content:" (" attr(title) ")"}}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout-3col{margin-left:-10px;margin-right:-10px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__col-1,.layout-3col__col-2,.layout-3col__col-3,.layout-3col__col-4,.layout-3col__col-x,.layout-3col__first-left-sidebar,.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar,.layout-3col__second-left-sidebar{clear:both;padding-left:10px;padding-right:10px;float:left;width:100%;margin-left:0;margin-right:-100%}@media (min-width:777px){.layout-3col{margin-left:-20px;margin-right:-20px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar{float:left;width:100%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-1,.layout-3col__col-3,.layout-3col__col-x:nth-child(2n+1),.layout-3col__first-left-sidebar{float:left;width:50%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-2,.layout-3col__col-4,.layout-3col__col-x:nth-child(2n),.layout-3col__second-left-sidebar{clear:none;float:left;width:50%;margin-left:50%;margin-right:-100%;padding-left:20px;padding-right:20px}}@media (min-width:999px){.layout-3col__full{float:left;width:100%;margin-left:0;margin-right:-100%}.layout-3col__left-content{float:left;width:66.66667%;margin-left:0;margin-right:-100%}.layout-3col__right-content{float:left;width:66.66667%;margin-left:33.33333%;margin-right:-100%}.layout-3col__first-left-sidebar,.layout-3col__left-sidebar,.layout-3col__second-left-sidebar{clear:right;float:right;width:33.33333%;margin-right:66.66667%;margin-left:-100%}.layout-3col__right-sidebar{clear:right;float:right;width:33.33333%;margin-right:0;margin-left:-100%}.layout-3col__col-1,.layout-3col__col-x:nth-child(3n+1){clear:both;float:left;width:33.33333%;margin-left:0;margin-right:-100%}.layout-3col__col-2,.layout-3col__col-x:nth-child(3n+2){clear:none;float:left;width:33.33333%;margin-left:33.33333%;margin-right:-100%}.layout-3col__col-3,.layout-3col__col-x:nth-child(3n){clear:none;float:left;width:33.33333%;margin-left:66.66667%;margin-right:-100%}.layout-3col__col-4{display:none}}.layout-3col__grid-item-container{padding-left:0;padding-right:0}.layout-3col__grid-item-container:before{content:"";display:table}.layout-3col__grid-item-container:after{content:"";display:table;clear:both}.layout-center{padding-left:10px;padding-right:10px;margin:0 auto;max-width:1180px}@media (min-width:777px){.layout-center{padding-left:20px;padding-right:20px}}.layout-center--shared-grid,.layout-center.layout-3col{padding-left:0;padding-right:0}.layout-swap{position:relative}@media (min-width:555px){.layout-swap{padding-top:62px}}@media (min-width:555px){.layout-swap__top{position:absolute;top:0;height:62px;width:100%}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box--is-focus,.box.is-focus,.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.clearfix:before,.header:before{content:'';display:table}.clearfix:after,.header:after{content:'';display:table;clear:both}.header__logo{float:left;margin:0 10px 0 0;padding:0}.header__logo-image{vertical-align:bottom}.header__name-and-slogan{float:left}.header__site-name{margin:0}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}.header__site-slogan{margin:0}.header__secondary-menu{float:right}.header__region{clear:both}.hidden,html.js .element-hidden,html.js .js-hidden,html.js .js-hide{display:none}.highlight-mark,.new,.update{color:#c00;background-color:transparent}.inline-links,.inline.links{padding:0}.inline-links__item,.inline.links li{display:inline;list-style-type:none;padding:0 1em 0 0}.field-label-inline .field-label,.inline-sibling,span.field-label{display:inline;margin-right:10px}.field-label-inline .field-label *,.inline-sibling *,.inline-sibling__child,span.field-label *{display:inline}.field-label-inline .field-label+*,.field-label-inline .field-label+*>:first-child,.field-label-inline .field-label+*>:first-child>:first-child,.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent,span.field-label+*,span.field-label+*>:first-child,span.field-label+*>:first-child>:first-child{display:inline}.field-label-inline .field-items,.field-label-inline .field-label{float:none}@media print{.action-links,.book-navigation,.feed-icons,.forum-topic-navigation,.links,.print-none,.toolbar,aside,footer,nav{display:none}}.media-vimeo-preview-wrapper,.media-youtube-video,.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.media-vimeo-preview-wrapper iframe,.media-youtube-video iframe,.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.element-focusable,.element-invisible,.main-navigation .block-menu .block__title,.main-navigation .block-menu-block .block__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.element-focusable:active,.element-focusable:focus,.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}@media print{.breadcrumb{display:none}}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-help-link,.more-link{text-align:right}.more-help-link a,.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(../sass/navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.menu__item,.nav-menu__item{list-style-image:url(../sass/navigation/nav-menu/leaf.svg);list-style-type:square}.is-expanded.menu__item,.menu__item.is-expanded,.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(../sass/navigation/nav-menu/expanded.svg);list-style-type:circle}.is-collapsed.menu__item,.menu__item.is-collapsed,.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(../sass/navigation/nav-menu/collapsed.svg);list-style-type:disc}.menu a.active,.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.main-navigation .links,.main-navigation .menu,.navbar{margin:0;padding:0;text-align:left}.main-navigation .links li,.main-navigation .menu li,.navbar li,.navbar__item{float:left;padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}@media print{.pager{display:none}}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}@media print{.skip-link__wrapper{display:none}}article ul,aside ul{list-style:none;padding-left:1rem;text-indent:-1rem}article ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;content:'\2022'}@media (min-width:1111px){article ul>li::before,aside ul>li::before{font-size:.88889rem}}article ol,aside ol{display:table;list-style:none;padding:0}article ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article ol>li::before,aside ol>li::before{font-size:.88889rem}}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em;cursor:pointer;margin:5px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);border-radius:4px;background-color:#333}.slicknav_menu{box-sizing:border-box;background-color:#a30319;padding:2px}.slicknav_menu::after,.slicknav_menu::before{content:' ';display:table}.slicknav_menu::after{clear:both}.slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_icon::before{background-color:transparent;width:1.125em;height:.875em;display:block;content:'';position:absolute}.slicknav_no-text{margin:0}.slicknav_icon-bar{display:block;width:1.125em;height:.125em;border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.25);background-color:#fff}.slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_nav{background-color:#fff;color:#000;margin:0;padding:0;list-style:none;overflow:hidden;clear:both}.slicknav_nav ul{display:block;list-style:none;overflow:hidden;padding:0;margin:0 0 0 20px}.slicknav_nav li{display:block}.slicknav_nav a{display:block;padding:5px 10px;margin:2px 5px;text-decoration:none;color:#000}.slicknav_nav a:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_row{display:block;padding:5px 10px;margin:2px 5px}.slicknav_row:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_arrow{margin:0 0 0 .4em}.slicknav_txtnode{margin-left:15px}.slicknav_item{cursor:pointer}.slicknav_item a{display:inline;padding:0;margin:0}.slicknav_parent-link a{display:inline;padding:0;margin:0}.slicknav_brand{float:left;color:#fff;line-height:30px;padding:7px 12px;height:44px}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}@media (min-width:666px){figure{display:table}figure.left{padding:.70455rem .70455rem 0 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:.70455rem 0 0 .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption p{margin:0}body{background-color:#eee}.layout-center{background-color:#fff}.header{padding-top:10px}@media (min-width:777px){.header{padding-top:20px}}.header__logo{width:100px}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#a30319;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#710211}.main-menu a.active,.main-menu a:active{background-color:#a30319;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #a30319}.footer p{margin:0}@media print{.layout-center,body{background-color:#fff}.layout-swap{padding-top:0}[role=main]{width:100%}.layout-swap__top{border-bottom:0}:link,:visited{text-decoration:underline}a[href]::after{content:''}} \ No newline at end of file +/*! typey | GPLv2 License | https://github.com/jptaranto/typey */*{box-sizing:border-box}html{font-size:137.5%;line-height:1.40909em;font-family:"Garamond Premier Pro","Adobe Garamond",Garamond,Baskerville,"Times New Roman",serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-height:100%}@media print{html{font-size:12pt}}body{margin:0;padding:0;color:#000;background-color:#fff}@media (min-width:1111px){html{font-size:112.5%;line-height:1.38889em}}@media print and (min-width:1111px){html{font-size:12pt}}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{color:#000;-webkit-text-decoration-skip:objects}:visited{color:#000}a:active{color:#c00}a:active:not(.button){background-color:transparent}a:active,a:hover{outline-width:0}@media print{:link,:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")";font-weight:400;font-size:22px;text-decoration:none}a[href^='#']::after,a[href^='javascript:']::after{content:''}}.header__site-name,h1{font-size:1.27273rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.18182rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.09091rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.81818rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.72727rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}@media (min-width:666px){.header__site-name,h1{font-size:1.88889rem;line-height:2.81818rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h2{font-size:1.55556rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h3{font-size:1.22222rem;line-height:2.11364rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h4{font-size:1rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h5{font-size:.88889rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}h6{font-size:.77778rem;line-height:1.40909rem;margin-top:1.40909rem;margin-bottom:1.40909rem}}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}@media print{abbr[title]::after{content:" (" attr(title) ")"}}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp,var{font-family:Menlo,"Ubuntu Mono","DejaVu Sans Mono","Courier New",Courier,monospace,sans-serif;font-size:1em}dfn{font-style:italic}mark{background-color:#fd0;color:#000}small{font-size:.81818rem}sub,sup{font-size:.72727rem;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}.divider,hr{margin:1.40909rem 0;border:0;border-top:1px solid #ccc}.divider>:first-child,hr>:first-child{margin-top:1.40909rem}blockquote{margin:1.40909rem 2rem}dl,menu,ol,ul{margin:1.40909rem 0}ol ol,ol ul,ul ol,ul ul{margin:0}dd{margin:0 0 0 44px}menu,ol,ul{padding:0 0 0 44px}figure{margin:1.40909rem 0}hr{box-sizing:content-box;height:0;overflow:visible}p,pre{margin:1.40909rem 0}img{border-style:none}img,svg{max-width:100%;height:auto}svg:not(:root){overflow:hidden}table{margin:1.40909rem 0;border-collapse:collapse;border-spacing:0;width:100%}td,th{padding:0}.layout-3col{margin-left:-10px;margin-right:-10px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__col-1,.layout-3col__col-2,.layout-3col__col-3,.layout-3col__col-4,.layout-3col__col-x,.layout-3col__first-left-sidebar,.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar,.layout-3col__second-left-sidebar{clear:both;padding-left:10px;padding-right:10px;float:left;width:100%;margin-left:0;margin-right:-100%}@media (min-width:777px){.layout-3col{margin-left:-20px;margin-right:-20px;padding-left:0;padding-right:0}.layout-3col:before{content:"";display:table}.layout-3col:after{content:"";display:table;clear:both}.layout-3col__full,.layout-3col__left-content,.layout-3col__left-sidebar,.layout-3col__right-content,.layout-3col__right-sidebar{float:left;width:100%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-1,.layout-3col__col-3,.layout-3col__col-x:nth-child(2n+1),.layout-3col__first-left-sidebar{float:left;width:50%;margin-left:0;margin-right:-100%;padding-left:20px;padding-right:20px}.layout-3col__col-2,.layout-3col__col-4,.layout-3col__col-x:nth-child(2n),.layout-3col__second-left-sidebar{clear:none;float:left;width:50%;margin-left:50%;margin-right:-100%;padding-left:20px;padding-right:20px}}@media (min-width:999px){.layout-3col__full{float:left;width:100%;margin-left:0;margin-right:-100%}.layout-3col__left-content{float:left;width:66.66667%;margin-left:0;margin-right:-100%}.layout-3col__right-content{float:left;width:66.66667%;margin-left:33.33333%;margin-right:-100%}.layout-3col__first-left-sidebar,.layout-3col__left-sidebar,.layout-3col__second-left-sidebar{clear:right;float:right;width:33.33333%;margin-right:66.66667%;margin-left:-100%}.layout-3col__right-sidebar{clear:right;float:right;width:33.33333%;margin-right:0;margin-left:-100%}.layout-3col__col-1,.layout-3col__col-x:nth-child(3n+1){clear:both;float:left;width:33.33333%;margin-left:0;margin-right:-100%}.layout-3col__col-2,.layout-3col__col-x:nth-child(3n+2){clear:none;float:left;width:33.33333%;margin-left:33.33333%;margin-right:-100%}.layout-3col__col-3,.layout-3col__col-x:nth-child(3n){clear:none;float:left;width:33.33333%;margin-left:66.66667%;margin-right:-100%}.layout-3col__col-4{display:none}}.layout-3col__grid-item-container{padding-left:0;padding-right:0}.layout-3col__grid-item-container:before{content:"";display:table}.layout-3col__grid-item-container:after{content:"";display:table;clear:both}.layout-center{padding-left:10px;padding-right:10px;margin:0 auto;max-width:1180px}@media (min-width:777px){.layout-center{padding-left:20px;padding-right:20px}}.layout-center--shared-grid,.layout-center.layout-3col{padding-left:0;padding-right:0}.layout-swap{position:relative}@media (min-width:555px){.layout-swap{padding-top:62px}}@media (min-width:555px){.layout-swap__top{position:absolute;top:0;height:62px;width:100%}}.box{margin-bottom:1.40909rem;border:5px solid #ccc;padding:1em}.box__title{margin:0}.box--is-focus,.box.is-focus,.box:focus,.box:hover{border-color:#000}.box--highlight{border-color:#000}.clearfix::before,.header::before{content:'';display:table}.clearfix::after,.header::after{content:'';display:table;clear:both}.header__logo{float:left;margin:0 10px 0 0;padding:0}.header__logo-image{vertical-align:bottom}.header__name-and-slogan{float:left}.header__site-name{margin:0}.header__site-link:link,.header__site-link:visited{color:#000;text-decoration:none}.header__site-link:focus,.header__site-link:hover{text-decoration:underline}.header__site-slogan{margin:0}.header__secondary-menu{float:right}.header__region{clear:both}.hidden,html.js .element-hidden,html.js .js-hidden,html.js .js-hide{display:none}.highlight-mark,.new,.update{color:#c00;background-color:transparent}.inline-links,.inline.links{padding:0}.inline-links__item,.inline.links li{display:inline;list-style-type:none;padding:0 1em 0 0}.field-label-inline .field-label,.inline-sibling,span.field-label{display:inline;margin-right:10px}.field-label-inline .field-label *,.inline-sibling *,.inline-sibling__child,span.field-label *{display:inline}.field-label-inline .field-label+*,.field-label-inline .field-label+*>:first-child,.field-label-inline .field-label+*>:first-child>:first-child,.inline-sibling+*,.inline-sibling+*>:first-child,.inline-sibling+*>:first-child>:first-child,.inline-sibling__adjacent,span.field-label+*,span.field-label+*>:first-child,span.field-label+*>:first-child>:first-child{display:inline}.field-label-inline .field-items,.field-label-inline .field-label{float:none}@media print{.action-links,.book-navigation,.feed-icons,.forum-topic-navigation,.links,.print-none,.toolbar,aside,footer,nav{display:none}}.media-vimeo-preview-wrapper,.media-youtube-video,.responsive-video{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.media-vimeo-preview-wrapper iframe,.media-youtube-video iframe,.responsive-video iframe,.responsive-video__embed{position:absolute;top:0;left:0;width:100%;height:100%}.responsive-video--4-3{padding-bottom:75%}.breadcrumb__title,.element-focusable,.element-invisible,.main-navigation .block-menu .block__title,.main-navigation .block-menu-block .block__title,.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal}.element-focusable:active,.element-focusable:focus,.visually-hidden--focusable:active,.visually-hidden--focusable:focus,.visually-hidden--off{position:static!important;clip:auto;height:auto;width:auto;overflow:visible}.watermark{font-family:Impact,"Arial Narrow",Helvetica,sans-serif;font-weight:700;text-transform:uppercase;display:block;height:0;overflow:visible;background-color:transparent;color:#eee;font-size:75px;line-height:1;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.1);word-wrap:break-word}@media print{.breadcrumb{display:none}}.breadcrumb__list{margin:0;padding:0}.breadcrumb__item{display:inline;list-style-type:none;margin:0;padding:0}.more-help-link,.more-link{text-align:right}.more-help-link a,.more-link__help-icon{padding:1px 0 1px 20px;background-image:url(../sass/navigation/more-link/more-link__help-icon.svg);background-position:0 50%;background-repeat:no-repeat}.menu__item,.nav-menu__item{list-style-image:url(../sass/navigation/nav-menu/leaf.svg);list-style-type:square}.is-expanded.menu__item,.menu__item.is-expanded,.nav-menu__item--is-expanded,.nav-menu__item.is-expanded{list-style-image:url(../sass/navigation/nav-menu/expanded.svg);list-style-type:circle}.is-collapsed.menu__item,.menu__item.is-collapsed,.nav-menu__item--is-collapsed,.nav-menu__item.is-collapsed{list-style-image:url(../sass/navigation/nav-menu/collapsed.svg);list-style-type:disc}.menu a.active,.nav-menu__link--is-active,.nav-menu__link.is-active{color:#000}.main-navigation .links,.main-navigation .menu,.navbar{margin:0;padding:0;text-align:left}.main-navigation .links li,.main-navigation .menu li,.navbar li,.navbar__item{float:left;padding:0 10px 0 0;list-style-type:none;list-style-image:none}.pager{clear:both;padding:0;text-align:center}@media print{.pager{display:none}}.pager-current,.pager-ellipsis,.pager-first,.pager-item,.pager-last,.pager-next,.pager-previous,.pager__current-item,.pager__item{display:inline;padding:0 .5em;list-style-type:none;background-image:none}.pager-current,.pager__current-item{font-weight:700}.skip-link{display:block;padding:2px 0 3px;text-align:center}.skip-link:link,.skip-link:visited{background-color:#666;color:#fff}.skip-link__wrapper{margin:0}@media print{.skip-link__wrapper{display:none}}article ul,aside ul{list-style:none;padding-left:1rem;text-indent:-1rem}article ul>li::before,aside ul>li::before{font-size:.81818rem;padding-right:.70455rem;content:'\2022'}@media (min-width:1111px){article ul>li::before,aside ul>li::before{font-size:.88889rem}}article ol,aside ol{display:table;list-style:none;padding:0}article ol>li,aside ol>li{display:table-row;counter-increment:table-ol}article ol>li::before,aside ol>li::before{font-size:.81818rem;padding-right:.70455rem;display:table-cell;content:counter(table-ol) ".";text-align:right}@media (min-width:1111px){article ol>li::before,aside ol>li::before{font-size:.88889rem}}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em;cursor:pointer;margin:5px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);border-radius:4px;background-color:#333}.slicknav_menu{box-sizing:border-box;background-color:#333;padding:2px}.slicknav_menu::after,.slicknav_menu::before{content:' ';display:table}.slicknav_menu::after{clear:both}.slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_icon::before{background-color:transparent;width:1.125em;height:.875em;display:block;content:'';position:absolute}.slicknav_no-text{margin:0}.slicknav_icon-bar{display:block;width:1.125em;height:.125em;border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.25);background-color:#fff}.slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_nav{background-color:#fff;color:#000;margin:0;padding:0;list-style:none;overflow:hidden;clear:both}.slicknav_nav ul{display:block;list-style:none;overflow:hidden;padding:0;margin:0 0 0 20px}.slicknav_nav li{display:block}.slicknav_nav a{display:block;padding:5px 10px;margin:2px 5px;text-decoration:none;color:#000}.slicknav_nav a:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_row{display:block;padding:5px 10px;margin:2px 5px}.slicknav_row:hover{border-radius:6px;background-color:#333;color:#fff}.slicknav_arrow{margin:0 0 0 .4em}.slicknav_txtnode{margin-left:15px}.slicknav_item{cursor:pointer}.slicknav_item a{display:inline;padding:0;margin:0}.slicknav_parent-link a{display:inline;padding:0;margin:0}.slicknav_brand{float:left;color:#fff;line-height:30px;padding:7px 12px;height:44px}p,pre{margin:1.05682rem 0}figcaption,label,legend,th{font-size:.81818rem;line-height:1.40909rem}@media (min-width:1111px){figcaption,label,legend,th{font-size:.88889rem;line-height:1.40909rem}}.footer{font-size:.72727rem;line-height:1.40909rem}@media (min-width:1111px){.footer{font-size:.77778rem;line-height:1.40909rem}}.footer,.header,article>header,h1,h2,h3,label,legend,nav,th{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;color:#333;font-weight:400}@media (min-width:666px){figure{display:table}figure.left{padding:.70455rem .70455rem 0 0;margin:0;float:left;clear:both}figure.left figcaption{padding:0 .70455rem .70455rem 0}figure.right{padding:.70455rem 0 0 .70455rem;margin:0;float:right;clear:both}figure.right figcaption{padding:0 0 .70455rem .70455rem}}@media (min-width:666px){figcaption{display:table-caption;caption-side:bottom}}figcaption p{margin:0}body{background-color:#eee}.layout-center{background-color:#fff}.header{padding-top:10px}@media (min-width:777px){.header{padding-top:20px}}@media (min-width:666px){.header__logo{float:left}}@media (min-width:666px){.header__site-name{float:left}}@media (min-width:666px){.header__region{float:right;width:33%;clear:none}}.main-menu{margin-top:.70455rem;margin-bottom:.70455rem;outline:0}.main-menu li{margin-right:.70455rem;margin-bottom:.70455rem;padding:0}.main-menu a{display:block;background-color:#333;color:#fff;padding:2px 8px;text-decoration:none}.main-menu a:focus,.main-menu a:hover{background-color:#666}.main-menu a.active,.main-menu a:active{background-color:#333;text-decoration:underline}.menu a.active{text-decoration:none}.footer{margin-top:2.11364rem;padding:.70455rem 0;text-align:center;border-top:2px solid #333}.footer p{margin:0}.search-form{padding-top:.70455rem;text-align:center}@media (min-width:666px){.search-form{text-align:left}}@media print{.layout-center,body{background-color:#fff}.layout-swap{padding-top:0}[role=main]{width:100%}.layout-swap__top{border-bottom:0}:link,:visited{text-decoration:underline}a[href]::after{content:''}} \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index a247ea9..4e25861 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -3,11 +3,19 @@ * A JavaScript file for the theme. */ -$(document).ready(function () { +(function ($) { + + 'use strict'; + + // Add a js class to the html-tag when JavsScript is active. + $('html').addClass('js'); + + // Activate he SlickNav menu for small screens. if (window.matchMedia && $.isFunction($.fn.slicknav)) { - var mq = window.matchMedia("(max-width: 666px)"); + var mq = window.matchMedia('(max-width: 666px)'); if (mq.matches) { $('.main-menu').hide().find('.navbar').filter(':first').slicknav(); } } -}); + +})(jQuery); diff --git a/styleguide/item-sass-colors.html b/styleguide/item-sass-colors.html index a50ae71..bf95e69 100644 --- a/styleguide/item-sass-colors.html +++ b/styleguide/item-sass-colors.html @@ -118,7 +118,7 @@
- /*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, text, link, link-visited, border, border-dark, autocomplete, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: border-dark, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
color(hg-red) uses the color: #a30319 This color is inherited by: brand, brand-dark, link-hover, link-active, header-bg
color(hg-red-alt) uses the color: #8d0018
color(beige) uses the color: #f2ecd5 This color is inherited by: brand-alt, row-stripe
color(off-white) uses the color: #fffdf7
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(green2) uses the color: #24a907 This color is inherited by: order-button
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #a30319 (hg-red) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #f2ecd5 (beige)
color(brand-dark) uses the color: #710211 (hg-red)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #a30319 (brand)
color(link-active) uses the color: #a30319 (hg-red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #a30319 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #f2ecd5 (beige)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)
color(order-button) uses the color: #24a907 (green2)
+ /*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, brand, brand-alt, brand-dark, text, link, link-visited, link-hover, border, border-dark, autocomplete, header-bg, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: brand, link-hover, border-dark, header-bg, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: brand-dark, progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: brand-alt, button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, row-stripe, skip-link, tabs-bg, tab-text-shadow
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #333333 (nearblack) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #999999 (grey)
color(brand-dark) uses the color: #666666 (grey-dark)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #333333 (brand)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #333333 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #fff (white)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)
diff --git a/styleguide/section-sass.html b/styleguide/section-sass.html index f196a13..ef572bb 100644 --- a/styleguide/section-sass.html +++ b/styleguide/section-sass.html @@ -269,7 +269,7 @@
- /*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, text, link, link-visited, border, border-dark, autocomplete, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: border-dark, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow
color(hg-red) uses the color: #a30319 This color is inherited by: brand, brand-dark, link-hover, link-active, header-bg
color(hg-red-alt) uses the color: #8d0018
color(beige) uses the color: #f2ecd5 This color is inherited by: brand-alt, row-stripe
color(off-white) uses the color: #fffdf7
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(green2) uses the color: #24a907 This color is inherited by: order-button
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #a30319 (hg-red) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #f2ecd5 (beige)
color(brand-dark) uses the color: #710211 (hg-red)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #a30319 (brand)
color(link-active) uses the color: #a30319 (hg-red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #a30319 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #f2ecd5 (beige)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)
color(order-button) uses the color: #24a907 (green2)
+ /*! typey | GPLv2 License | https://github.com/jptaranto/typey

branding

The site's main colors. Can be used to define colors in other color schemes.

color(black) uses the color: #000 This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, brand, brand-alt, brand-dark, text, link, link-visited, link-hover, border, border-dark, autocomplete, header-bg, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings
color(nearblack) uses the color: #333333 (black) This color is inherited by: brand, link-hover, border-dark, header-bg, button, headings
color(grey-dark) uses the color: #666666 (black) This color is inherited by: brand-dark, progress-bar-border, skip-link-bg, tab-secondary
color(grey) uses the color: #999999 (black) This color is inherited by: brand-alt, button-disabled, fieldset-summary
color(grey-light) uses the color: #cccccc (black) This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg
color(grey-extra-light) uses the color: #eeeeee (black) This color is inherited by: backdrop, resizable-grippie, watermark
color(white) uses the color: #fff This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, row-stripe, skip-link, tabs-bg, tab-text-shadow
color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg, progress-bar
color(red) uses the color: #c00 This color is inherited by: link-active, form-error, mark-highlight, error, error-bg
color(green) uses the color: #43a808 This color is inherited by: status, status-bg
color(yellow) uses the color: #fd0 This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select

functional

Colors used by functional parts of the design.

color(brand) uses the color: #333333 (nearblack) This color is inherited by: link-hover, header-bg
color(brand-alt) uses the color: #999999 (grey)
color(brand-dark) uses the color: #666666 (grey-dark)
color(text) uses the color: #000 (black) This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab
color(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg, tabs-bg
color(link) uses the color: #000 (black)
color(link-visited) uses the color: #000 (black)
color(link-hover) uses the color: #333333 (brand)
color(link-active) uses the color: #c00 (red)
color(border) uses the color: #cccccc (grey-light) This color is inherited by: tabs-border
color(border-dark) uses the color: #333333 (nearblack)
color(autocomplete) uses the color: #000 (text)
color(autocomplete-bg) uses the color: #fff (text-bg)
color(autocomplete-select) uses the color: #fff (white)
color(autocomplete-select-bg) uses the color: #0072b9 (blue)
color(body-bg) uses the color: #fff (white)
color(header-bg) uses the color: #333333 (brand)
color(backdrop) uses the color: #eeeeee (grey-extra-light)
color(button) uses the color: #333333 (nearblack)
color(button-disabled) uses the color: #999999 (grey)
color(fieldset-summary) uses the color: #999999 (grey)
color(form-error) uses the color: #c00 (red)
color(mark-highlight) uses the color: #c00 (red)
color(mark-bg) uses the color: #fd0 (yellow)
color(menu-active) uses the color: #000 (text)
color(preview-bg) uses the color: #fffadb (yellow)
color(progress-bar) uses the color: #0072b9 (blue)
color(progress-bar-bg) uses the color: #cccccc (grey-light)
color(progress-bar-border) uses the color: #666666 (grey-dark)
color(resizable-grippie) uses the color: #eeeeee (grey-extra-light)
color(row-stripe) uses the color: #fff (white)
color(row-disabled) uses the color: #cccccc (grey-light)
color(skip-link) uses the color: #fff (white)
color(skip-link-bg) uses the color: #666666 (grey-dark)
color(status) uses the color: #43a808 (green) This color is inherited by: status-bg
color(status-bg) uses the color: #f4feee (status)
color(status-highlight) uses the color: #000 (text)
color(warning) uses the color: #000 (text)
color(warning-bg) uses the color: #fffce6 (yellow)
color(warning-border) uses the color: #fd0 (yellow)
color(error) uses the color: #c00 (red) This color is inherited by: error-bg
color(error-bg) uses the color: #fff0f0 (error)
color(tabs-border) uses the color: #cccccc (border)
color(tabs-bg) uses the color: #fff (text-bg)
color(tab) uses the color: #000 (text)
color(tab-text-shadow) uses the color: #fff (white)
color(tab-bg) uses the color: #dddddd (grey-light)
color(tab-secondary) uses the color: #666666 (grey-dark)
color(table-drag) uses the color: #fffadb (yellow)
color(table-select) uses the color: #fffdf0 (yellow)
color(watermark) uses the color: #eeeeee (grey-extra-light)
color(headings) uses the color: #333333 (nearblack)