diff options
Diffstat (limited to 'src/koszko_org_website/static/pure-main.css')
| -rw-r--r-- | src/koszko_org_website/static/pure-main.css | 629 |
1 files changed, 629 insertions, 0 deletions
diff --git a/src/koszko_org_website/static/pure-main.css b/src/koszko_org_website/static/pure-main.css new file mode 100644 index 0000000..b762a2c --- /dev/null +++ b/src/koszko_org_website/static/pure-main.css @@ -0,0 +1,629 @@ +/* +SPDX-License-Identifier: LicenseRef-Yahoo-BSD-3 + +Copyright 2013 Yahoo! Inc. + +See https://git.koszko.org/koszko-org-website/tree/LICENSES/ for details. +*/ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, button, input, select, textarea, +.pure-g [class *= "pure-u"] { + font-family: Helvetica, Arial, sans-serif; + letter-spacing: 0.01em; +} + + +/* -------------------------- + * Element Styles + * -------------------------- +*/ + +body { + min-width: 320px; + background-color: #fff; + color: #777; + line-height: 1.6; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + color: rgb(75, 75, 75); +} +h3 { + font-size: 1.25em; +} +h4 { + font-size: 1.125em; +} + +a { + color: #3b8bba; /* block-background-text-normal */ + text-decoration: none; +} + +a:visited { + color: #265778; /* block-normal-text-normal */ +} + +dt { + font-weight: bold; +} +dd { + margin: 0 0 10px 0; +} + +aside { + background: #1f8dd6; /* same color as selected state on site menu */ + margin: 1em 0; + padding: 0.3em 1em; + border-radius: 3px; + color: #fff; +} + aside a, aside a:visited { + color: rgb(169, 226, 255); + } + + +/* -------------------------- + * Layout Styles + * -------------------------- +*/ + +/* Navigation Push Styles */ +#layout { + position: relative; + padding-left: 0; +} + #layout.active #menu { + left: 160px; + width: 160px; + } + +/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */ +.l-box { + padding: 1em; +} + +.l-wrap { + margin-left: auto; + margin-right: auto; +} +.content .l-wrap { + margin-left: -1em; + margin-right: -1em; +} + + +/* -------------------------- + * Header Module Styles + * -------------------------- +*/ + +.header { + font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; + max-width: 768px; + margin: 0 auto; + padding: 1em; + text-align: center; + border-bottom: 1px solid #eee; + background: #fff; + letter-spacing: 0.05em; +} + .header h1 { + font-size: 300%; + font-weight: 100; + margin: 0; + } + .header h2 { + font-size: 125%; + font-weight: 100; + line-height: 1.5; + margin: 0; + color: #666; + letter-spacing: -0.02em; + } + + + /* -------------------------- + * Content Module Styles + * -------------------------- + */ + +/* The content div is placed as a wrapper around all the docs */ +.content { + margin-left: auto; + margin-right: auto; + padding-left: 1em; + padding-right: 1em; + max-width: 768px; +} + + .content .content-subhead { + margin: 2em 0 1em 0; + font-weight: 300; + color: #888; + position: relative; + } + + .content .content-spaced { + line-height: 1.8; + } + + .content .content-quote { + font-family: "Georgia", serif; + color: #666; + font-style: italic; + line-height: 1.8; + border-left: 5px solid #ddd; + padding-left: 1.5em; + } + + .content-link { + position: absolute; + top: 0; + right: 0; + display: block; + height: 100%; + width: 20px; + background: transparent url('/img/link-icon.png') no-repeat center center; + background-size: 20px 20px; + } + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { + .content-link { + background-image: url('/img/link-icon@2x.png'); + } + } + + +/* -------------------------- + * Code Styles + * -------------------------- +*/ + +pre, +code { + font-family: Consolas, Courier, monospace; + color: #333; + background: rgb(250, 250, 250); +} + +code { + padding: 0.2em 0.4em; + white-space: nowrap; +} +.content p code { + font-size: 90%; +} + +.code { + margin-left: -1em; + margin-right: -1em; + border: 1px solid #eee; + border-left-width: 0; + border-right-width: 0; + overflow-x: auto; +} +.code pre { + margin: 0; +} +.code code { + font-size: 95%; + white-space: pre; + word-wrap: normal; + padding: 0; + background: none; +} +.code-wrap code { + white-space: pre-wrap; + word-wrap: break-word; +} +.example .code { + margin-top: 1em; +} + +/* -------------------------- + * Footer Module Styles + * -------------------------- +*/ + +.footer { + font-size: 87.5%; + border-top: 1px solid #eee; + margin-top: 3.4286em; + padding: 1.1429em; + background: rgb(250, 250, 250); +} + +.legal { + line-height: 1.6; + text-align: center; + margin: 0 auto; +} + + .legal-license { + margin-top: 0; + } + .legal-links { + list-style: none; + padding: 0; + margin-bottom: 0; + } + .legal-copyright { + margin-top: 0; + margin-bottom: 0; + } + + +/* -------------------------- + * Main Navigation Bar Styles + * -------------------------- +*/ + +/* Add transition to containers so they can push in and out */ +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +#layout.active .menu-link { + left: 160px; +} + +#menu { + margin-left: -160px; /* "#menu" width */ + width: 160px; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; /* so the menu or its navicon stays above all content */ + background: #191818; + overflow-y: auto; +} + #menu a { + color: #999; + border: none; + white-space: normal; + padding: 0.625em 1em; + } + + #menu .pure-menu-open { + background: transparent; + border: 0; + } + + #menu .pure-menu ul { + border: none; + background: transparent; + display: block; + } + + #menu .pure-menu ul, + #menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; + } + + #menu .pure-menu-list li .pure-menu-link:hover, + #menu .pure-menu-list li .pure-menu-link:focus { + background: #333; + } + + .menu-link { + position: fixed; + display: block; /* show this only on small screens */ + top: 0; + left: 0; /* "#menu width" */ + background: #191818a4; + font-size: 11px; /* change this value to increase/decrease button size */ + z-index: 1001; + width: 4em; + height: 4em; + padding: 1em; + } + + :not(:checked) + .menu-link:hover, + :not(:checked) + .menu-link:focus { + background: #000; + } + + .menu-link span { + position: relative; + display: block; + margin-top: 0.9em; + } + + .menu-link span, + .menu-link span:before, + .menu-link span:after { + background-color: #fff; + pointer-events: none; + width: 100%; + height: .2em; + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -ms-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; + } + + .menu-link span:before, + .menu-link span:after { + position: absolute; + top: -.55em; + content: " "; + } + + .menu-link span:after { + top: .55em; + } + + :checked + .menu-link span { + background: transparent; + } + + :checked + .menu-link span:before { + -webkit-transform: rotate(45deg) translate(.5em, .4em); + -moz-transform: rotate(45deg) translate(.5em, .4em); + -ms-transform: rotate(45deg) translate(.5em, .4em); + -o-transform: rotate(45deg) translate(.5em, .4em); + transform: rotate(45deg) translate(.5em, .4em); + } + + :checked + .menu-link span:after { + -webkit-transform: rotate(-45deg) translate(.4em, -.3em); + -moz-transform: rotate(-45deg) translate(.4em, -.3em); + -ms-transform: rotate(-45deg) translate(.4em, -.3em); + -o-transform: rotate(-45deg) translate(.4em, -.3em); + transform: rotate(-45deg) translate(.4em, -.3em); + } + + #menu .pure-menu-heading { + font-size: 125%; + font-weight: 300; + letter-spacing: 0.1em; + color: #fff; + margin-top: 0; + padding: 0.5em 0.8em; + text-transform: uppercase; + } + #menu .pure-menu-heading:hover, + #menu .pure-menu-heading:focus { + color: #999; + } + + #menu .pure-menu-item .active { + background: #1f8dd6; + color: #fff; + } + + #menu li.pure-menu-item .active:hover, + #menu li.pure-menu-item .active:focus { + background: #1f8dd6; + } + + +/* --------------------- + * Smaller Module Styles + * --------------------- +*/ + +.pure-img-responsive { + max-width: 100%; + height: auto; +} + +.pure-paginator .pure-button { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.pure-button { + font-family: inherit; +} +a.pure-button-primary { + color: white; +} + + +/* green call to action button class */ +.notice { + background-color: #61B842; + color: white; +} + +.muted { + color: #ccc; +} + + + +/* ------------- + * Table Styles + * ------------- +*/ +.pure-table th, +.pure-table td { + padding: 0.5em 1em; +} + +.table-responsive { + margin-left: -1em; + margin-right: -1em; + overflow-x: auto; + margin-bottom: 1em; +} +.table-responsive table { + width: 100%; + min-width: 35.5em; + border-left-width: 0; + border-right-width: 0; +} + +.table-responsive .mq-table { + width: 100%; + min-width: 44em; +} +.mq-table th.highlight { + background-color: rgb(255, 234, 133); +} +.mq-table td.highlight { + background-color: rgb(255, 250, 229); +} +.mq-table th.highlight code, +.mq-table td.highlight code { + background: rgb(255, 255, 243); +} +.mq-table-mq code { + font-size: 0.875em; +} + +/* ---------------------------- + * Example for full-width Grids + * ---------------------------- +*/ + +.grids-example { + background: rgb(250, 250, 250); + margin: 2em auto; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +/* -------------------------- + * State Rules + * -------------------------- +*/ + + +.is-code-full { + text-align: center; +} +.is-code-full .code { + margin-left: auto; + margin-right: auto; +} +.is-code-full code { + display: inline-block; + max-width: 768px; + margin-left: auto; + margin-right: auto; +} + + +/* -------------------------- + * Responsive Styles + * -------------------------- +*/ + +@media screen and (min-width: 35.5em) { + + .legal-license { + text-align: left; + margin: 0; + } + .legal-copyright, + .legal-links, + .legal-links li { + text-align: right; + margin: 0; + } + +} + +@media screen and (min-width: 48em) { + + .l-wrap, + .l-wrap .content { + padding-left: 1em; + padding-right: 1em; + } + .content .l-wrap { + margin-left: -2em; + margin-right: -2em; + } + + .header, + .content { + padding-left: 2em; + padding-right: 2em; + } + + .header h1 { + font-size: 320%; + } + .header h2 { + font-size: 128%; + } + + .content p { + font-size: 1.125em; + } + + .code { + margin-left: auto; + margin-right: auto; + border-left-width: 1px; + border-right-width: 1px; + } + + .table-responsive { + margin-left: auto; + margin-right: auto; + } + .table-responsive table { + border-left-width: 1px; + border-right-width: 1px; + } + +} + +input[type="checkbox"] { + display: none; +} + +@media (max-width: 58em) { + input#show-menu:checked ~ #menu { + left: 160px; + } + input#show-menu:checked ~ .menu-link { + position: fixed; + left: calc(160px - 4em); + } +} + +@media (min-width: 58em) { + + #menu { + left: 160px; + } + + .menu-link { + position: fixed; + left: 160px; + display: none; + } + + #main { + margin-left: 160px; + } +} |