diff options
| author | Scott Ostler <scottbot9000@gmail.com> | 2011-02-13 20:09:13 -0500 |
|---|---|---|
| committer | Scott Ostler <scottbot9000@gmail.com> | 2011-02-13 20:09:13 -0500 |
| commit | 811a17167babb1df037da29a60f67edc0fdeb455 (patch) | |
| tree | ebfbf81d15c26322b034119d737972838c970fc4 /static/css/isostyle.css | |
| parent | f2f8cddb8b23fd3b932fccf1e40ced258ed71bb9 (diff) | |
| parent | f791ff22d8c40b0fe9ab3f7680dcda7c8d3d9370 (diff) | |
Merge branch 'master' of ssh://dump.fm/pichat/repo
Diffstat (limited to 'static/css/isostyle.css')
| -rw-r--r-- | static/css/isostyle.css | 644 |
1 files changed, 644 insertions, 0 deletions
diff --git a/static/css/isostyle.css b/static/css/isostyle.css new file mode 100644 index 0000000..f24322e --- /dev/null +++ b/static/css/isostyle.css @@ -0,0 +1,644 @@ +/**** Base styles ****/ + +* { + margin: 0; + padding: 0; +} + +body { + padding: 20px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; + font-size: 13px; + line-height: 1.7em; + background: #1F1E1D; + color: #FFF; +} + +section, nav, header, footer { + display: block; +} + + +h1, h2, h3, p, ul, ol, pre, dl { + margin-bottom: 1.0em; +} + +h1, h2, #super-list, .element, .tagline { + font-family: 'Helvetica Neue', Arial, sans-serif; +} + +h1 { + font-size: 32px; + line-height: 1.1em; +} + +h2 { + font-size: 24px; + line-height: 1.1em; +} + +ul, ol { + margin-left: 1.5em; +} + + +a, +a code { + color: #FB4; + text-decoration: none; +} + +a:hover, +a:hover code { + color: #4BF; +} + +a:active, +a:active code { + color: #1FB; + background: black; +} + +a img { border: none; } + +/**** Isotope styles ****/ + +/* required for containers to inherit vertical size from window */ +html, +body { + height: 100%; +} + +#container { + border: 1px solid #666; + padding: 5px; + margin-bottom: 20px; +} + +.element { + width: 110px; + height: 110px; + margin: 5px; + float: left; + overflow: hidden; + position: relative; + background: #888; + color: #222; + -webkit-border-top-right-radius: 1.2em; + -moz-border-radius-topright: 1.2em; + border-top-right-radius: 1.2em; +} + +.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } +.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } +.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } +.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } +.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } +.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } +.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } +.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } +.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } +.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } + + +.element * { + position: absolute; + margin: 0; +} + +.element .symbol { + left: 0.2em; + top: 0.4em; + font-size: 3.8em; + line-height: 1.0em; + color: #FFF; +} +.element.large .symbol { + font-size: 4.5em; +} + +.element.fake .symbol { + color: #000; +} + +.element .name { + left: 0.5em; + bottom: 1.6em; + font-size: 1.05em; +} + +.element .weight { + font-size: 0.9em; + left: 0.5em; + bottom: 0.5em; +} + +.element .number { + font-size: 1.25em; + font-weight: bold; + color: hsla(0,0%,0%,.5); + right: 0.5em; + top: 0.5em; +} + +.variable-sizes .element.width2 { width: 230px; } + +.variable-sizes .element.height2 { height: 230px; } + +.variable-sizes .element.width2.height2 { + font-size: 2.0em; +} + +.element.large, +.variable-sizes .element.large, +.variable-sizes .element.large.width2.height2 { + font-size: 3.0em; + width: 350px; + height: 350px; + z-index: 100; +} + +.clickable .element:hover { + cursor: pointer; +} + +.clickable .element:hover h3 { + text-shadow: + 0 0 10px white, + 0 0 10px white + ; +} + +.clickable .element:hover h2 { + color: white; +} + +/**** Isotope Filtering ****/ + +.isotope-item { + z-index: 2; +} + +.isotope-hidden.isotope-item { + pointer-events: none; + z-index: 1; +} + +/**** Isotope CSS3 transitions ****/ + +.isotope, +.isotope .isotope-item { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; +/* -o-transition-duration: 0.8s;*/ + transition-duration: 0.8s; + +} + +.isotope { + -webkit-transition-property: height, width; + -moz-transition-property: height, width; +/* -o-transition-property: height, width;*/ + transition-property: height, width; +} + +/* disable CSS transitions for containers with infinite scrolling*/ +.isotope.infinite-scrolling { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} + +.isotope .isotope-item { + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; +/* -o-transition-property: -o-transform, opacity;*/ + transition-property: transform, opacity; +} + +.isotope.no-transition, +.isotope.no-transition .isotope-item { + -webkit-transition-duration: 0s; + -moz-transition-duration: 0s; +/* -o-transition-duration: 0s;*/ + transition-duration: 0s; +} + +/**** Example Options ****/ + +#options { + padding-bottom: 1.0em; +} + +#options h3 { + margin-bottom: 0.2em; +} + +#options ul { + margin: 0; + list-style: none; +} + +#options ul ul { + margin-left: 1.5em; +} + +#options .floated li { + float: left; +} + + + +#options li { +} + +#options li a { + display: inline-block; + padding: 0.4em 0.5em; + background-color: #DDD; + color: #222; + font-weight: bold; + text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); + background-image: -moz-linear-gradient(-90deg, + hsla( 0, 0%, 100%, 0.5 ) , + hsla( 0, 0%, 100%, 0.0 ) + ); + background-image: -webkit-gradient(linear, 0 top, 0 bottom, + from( hsla( 0, 0%, 100%, 0.5 ) ), + to( hsla( 0, 0%, 100%, 0.0 ) ) + ); + margin-bottom: 0.2em; +} + +#options li a:hover { + background-color: #5BF; +} + +#options li a:active { + background-color: #39D; + -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); +} + +#options .floated li a { + border-left: 1px solid hsla( 0, 0%, 100%, 0.3 ); + border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); +} + +#options .floated li:first-child a { + border-radius: 7px 0 0 7px; + border-left: none; +} + +#options .floated li:last-child a { + border-radius: 0 7px 7px 0; +} + +#options .option-set li a.selected { + background-color: #13F; + text-shadow: none; + color: white; +} + +/**** Horizontal ****/ + +.horizontal #container { + height: 80%; +} + +#copy { + max-width: 640px; +} + +/**** Photo demo ****/ + +.photos .photo { + width: 320px; + margin: 5px; + float: left; +} + +.photos .photo img { + display: block; + width: 100%; +} + +/**** Docs ****/ + +body.doc { + max-width: 640px; +} + +.doc #content { +/* font-size: 14px; + line-height: 1.7em;*/ + margin-bottom: 20px; +} + +.doc a:hover { + border-bottom: 1px dotted; +} + + +body.doc { + margin-left: 220px; +} + +.doc nav { + width: 210px; + position: fixed; + left: 10px; + top: 0px; + padding-top: 20px; + height: 100%; + overflow: auto; +} + +.doc nav h1 { + margin-top: 0; +} + +@media screen and (max-width: 768px) { + + body.doc { + margin-left: 0px; + } + + .doc nav { + width: auto; + position: relative; + left: auto; + top: auto; + padding-top: 0px; + height: auto; + margin-bottom: 20px; + } + +} + +/**** Doc page nav ****/ + +#docs-nav h1 { + font-size: 19px; + margin-bottom: 0.5em; +} + +#docs-nav h1 a, +#demo-nav a { color: #4FB; } +#docs-nav h1 a:hover, +#demo-nav a:hover { color: #4BF; } + +#demo-nav { + font-size: 16px; + font-weight: bold; + padding-bottom: 0.5em; + margin-bottom: 0.5em; + border-bottom: 1px solid #333; +} + +#docs-nav ul { + list-style: none; + margin: 0; + font-weight: bold; +} + +#docs-nav ul a { + display: block; + border: none; + padding: 1px 5px; +} + +#docs-nav ul .current a { + background: hsla( 0, 0%, 0%, 0.3 ); + color: #1BF; +} +#docs-nav ul a:hover, +#docs-nav ul .current a:hover { color: white; } + +#docs-nav ul .current .toc a { + font-size: 12px; + padding-left: 1.2em; + font-weight: normal; +} + +/**** Doc content ****/ + +.doc h2, +.doc footer { + border-top: 1px solid #333; + padding-top: 0.8em; +} + +.doc h2:target { + padding: 10px; + background: white; + color: #222; +} + +.doc h3 { + color: #FEC; + background: hsla( 0, 0%, 75%, 0.05 ); + padding: 2px 0.5em; + margin-bottom: 0.5em; +} + +.doc h4 { + margin-bottom: 0.5em; + font-size: 14px; +} + + +footer { + font-size: 12px; + border-top: 1px solid #333; + padding-top: 0.8em; +} + +pre { + padding: 10px; +} + +pre, code { + background: black; + color: white; + font-family: 'Monaco', monospace, sans-serif; +} + +.doc #content code { + font-size: 12px; +} + +.doc #content pre { + line-height: 1.6em; +} + +h3#options { + padding-bottom: 0; +} + +.option-def dl { +/* margin-top: 1.8em;*/ +/* padding-top: 0.5em;*/ +/* border-top: 1px solid #333;*/ +} + + +.option-def dl dt, +.option-def dl dd { + float: left; + padding: 0 1.2em;; + background: #161616; +/* height: 2.0em;*/ + line-height: 36px; + height: 36px; +} + +.option-def dl.header dt, +.option-def dl.header dd { + background: #444; +} + +.option-def dl dt { +/* font-size: 14px;*/ +} + +.option-def dl .option-type { +/* width: 60px;*/ + font-size: 13px; + color: #AAA; + font-style: italic; +} + +.option-def dl dd { + border-left: 1px solid #222; +} + +/* Tagline */ + +.doc .tagline { + font-size: 22px; + font-weight: 300; +} + +/* as-is from MIT */ + +.doc .as-is { + font-size: 95%; +} + +/* Commercial license blurb */ + +.doc #commercial { + background: white; + padding: 10px; + font-size: 14px; + color: #1F1F1D; +} + +.doc #commercial a { font-weight: bold;} + +/**** Pygments ****/ + +code .s1, +code .s { color: #78BD55; } /* string */ +code .mi, /* integer */ +code .cp, /* doctype */ +code .kc { color: #5298D4; } /*boolean*/ +code .k { color: #E39B79; } /* keyword */ +code .kd, /* storage */ +code .na { color: #A9D866; } /* markup attribute */ +code .p { color: #EDB; } /* punctuation */ +code .o { color: #F63; } /* operator */ +code .nb { color: #AA97AC;} /* support */ + +/* comment */ +code .c, +code .c1 { color: #666; font-style: italic; } + +code .nt { color: #A0C8FC; } /* Markup open tag */ + +code .nf { color: #9EA8B8; } /* css id */ +code .nc { color: #A78352; } /* CSS class */ +code .m { color: #DE8E50; } /* CSS value */ +code .nd { color: #9FAD7E; } /* CSS pseudo selector */ + + + +/**** Super list ****/ + +#super-list { + list-style: none; + margin: 0; + padding: 0; + margin-bottom: 40px; +} + +#super-list li { + display: inline-block; + float: left; + font-size: 28px; + line-height: 1.2em; + margin: 2px; + font-weight: 300; +} + +#super-list li.feature { background: #111; } +#super-list li span, +#super-list li a { + display: block; + padding: 0.2em 0.5em; +} +#super-list li a { + color: #222; +} +#super-list li.doc a { background: #3CF; } +#super-list li.demo a { background: #FC3; } +#super-list li.link a { background: #E58; color: white; } + +#super-list li a:hover { + background: white; +} + +#super-list li.link a:hover { color: #222; } + +#super-list.masonry li { + width: 216px; +} +#super-list.masonry li.feature, +#super-list.masonry li.link { + width: 436px; +} + +/************************** +** Infinite Scroll +**************************/ + + +#infscr-loading { + position: fixed; + bottom: 30px; + left: 42%; + z-index: 100; + background: white; + background: hsla( 0, 0%, 100%, 0.9 ); + padding: 20px; + color: #222; + font-size: 15px; + font-weight: bold; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + + + +/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } +.clearfix:after { clear: both; } +/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + |
