Created
August 14, 2012 18:58
-
-
Save mr-stezz/3351719 to your computer and use it in GitHub Desktop.
Core styles for Listers:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Core styles for Listers: | |
| http://listers.co.uk | |
| Support for: | |
| Safari 3 > * | |
| Firefox 4 > * | |
| Chrome 12 > * | |
| IE8 > * | |
| Contents: | |
| $RESET - a considered restart more then a reset; | |
| $BASE - collection of all default styles on the page; | |
| $LAYOUT - styles that effect the pages layout, normally holding modules; | |
| $MODULES - the meat of the site, idividual, reusable models; | |
| $THEMES - sometimes modules need different appearances, these get put in here; | |
| $STATE - states such a collapsed, hidden, etc. | |
| */ | |
| @charset "utf-8"; | |
| /*------------------------------------*\ | |
| $RESET | |
| \*------------------------------------*/ | |
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;} | |
| article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} | |
| audio,canvas,video{display:inline-block;} | |
| audio:not([controls]){display:none;} | |
| [hidden]{display:none;} | |
| h1,h2,h3,h4,h5,h6{font-size:100%;} | |
| table{border-collapse:collapse;border-spacing:0;} | |
| strong,b,mark{font-weight:bold;font-style:inherit;} | |
| em,i,cite,q,address,dfn,var{font-style:italic;font-weight:inherit;} | |
| abbr[title],dfn[title]{cursor:help;} | |
| ins{border-bottom:0.0625em solid;} | |
| a,u,ins{text-decoration:none;} | |
| del,s{text-decoration:line-through;} | |
| pre,code,samp,kbd{font-family:monospace;} | |
| small{font-size:0.75em;} | |
| img{border:none;font-style:italic;} | |
| input,select,option,optgroup,textarea{font:inherit;} | |
| /*------------------------------------*\ | |
| $BASE | |
| \*------------------------------------*/ | |
| *{ | |
| /* gives everything a better box model for using percentage padding and margins. Borders get included in width sizes */ | |
| -moz-box-sizing:border-box; | |
| box-sizing:border-box; | |
| } | |
| html{ | |
| height:100%; | |
| /* always provide a scrollbar so they don't affect the page when they do appear */ | |
| overflow-y:scroll; | |
| -webkit-text-size-adjust:100%; | |
| -ms-text-size-adjust:100%; | |
| text-rendering:optimizeLegibility; | |
| -moz-font-feature-settings:"kern=1"; | |
| -ms-font-feature-settings:"kern" 1; | |
| -webkit-font-smoothing:subpixel-antialiased; | |
| } | |
| body{ | |
| /* sets the base font-size to 13 and line-height to 22 */ | |
| font:81.25%/1.6923076923076923 sans-serif; | |
| color:#666; | |
| background:url(/img/bg-org.png) #fff no-repeat center 0; | |
| -webkit-background-size:cover; | |
| -moz-background-size:cover; | |
| background-size:cover; | |
| margin:0; | |
| } | |
| /* vertical rhythm for different elements on the page */ | |
| ul,ol,dd, | |
| p,figure, | |
| pre,table,fieldset,hr, | |
| .img{ | |
| margin-bottom:1.6923076923076923em; /* 22px = base line-height */ | |
| } | |
| /*--- anchors ---*/ | |
| a:focus{ | |
| outline:thin dotted; | |
| } | |
| a:hover, | |
| a:active{ | |
| outline:0; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color:#353978; | |
| -webkit-tap-highlight-color:rgba(53,57,120,.5); | |
| } | |
| a:hover{ | |
| color:#000; | |
| } | |
| a[href ^= 'http']:not([href *= 'listers.']):after, | |
| a.offsite:after{ | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| cursor:pointer; | |
| content:' ∞'; | |
| } | |
| /*-- Headings --*/ | |
| h1,h2,h3,h4,h5,h6, | |
| .heading{ | |
| font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| /* font size adjust - 0.488 x 13 = 6.344 | lowercase x-height = 6.344px */ | |
| font-size-adjust:0.488; | |
| color:#333; | |
| } | |
| h1,.alpha, | |
| h2,.beta{ | |
| font-weight:200; | |
| } | |
| h1,.alpha{ | |
| font-size:2em; | |
| line-height:1.4; | |
| margin-bottom:0.19230769230769232em; | |
| } | |
| h2,.beta{ | |
| font-size:1.8461538461538463em; | |
| line-height:1.33333333; | |
| margin-bottom:0.16666666666666666em; | |
| } | |
| h3,.gamma{ | |
| font-weight:300; | |
| font-size:1.3846153846153846em; | |
| line-height:1.4444444444444444; | |
| margin-bottom:0.2222222222222222em; | |
| } | |
| h4,.delta{ | |
| font-weight:400; | |
| font-size:1.2307692307692308em; | |
| line-height:0.8888888888888888; | |
| margin-bottom:0.625em; | |
| } | |
| h5,.epsilon, | |
| h6,.zeta{ | |
| font-size:1em; | |
| text-transform:uppercase; | |
| margin-bottom:0.38461538461538464em; | |
| } | |
| h5,.epsilon{ | |
| font-weight:500; | |
| } | |
| h6,.zeta{ | |
| font-weight:bold; | |
| color:#666; | |
| } | |
| /*--- images ---*/ | |
| img{ | |
| max-width:100%; | |
| /*height:auto;*/ | |
| } | |
| /*--- figures ---*/ | |
| figure img{ | |
| vertical-align:middle; | |
| border:0.07692307692307693em solid #ebebeb; | |
| margin-bottom:0.8461538461538461em; | |
| } | |
| figcaption, | |
| caption{ | |
| color:#666; | |
| caption-side:bottom; | |
| } | |
| /*--- lists ---*/ | |
| ul,ol{ | |
| padding:0; | |
| } | |
| ul,ol, | |
| dd{ | |
| margin-left:1.6923076923076923em; | |
| } | |
| li > ul, | |
| li > ol{ | |
| margin-bottom:0; | |
| } | |
| /*--- unordered list ---*/ | |
| ul{ | |
| list-style:square; | |
| list-style-position:inside; | |
| } | |
| /*--- ordered list ---*/ | |
| ol{ | |
| list-style:decimal; | |
| } | |
| /*--- definition list ---*/ | |
| dl{ | |
| margin-bottom:1.6923076923076923em; | |
| } | |
| dt{ | |
| font-weight:bold; | |
| } | |
| /*--- menu list ---*/ | |
| menu{ | |
| list-style:none; | |
| margin-bottom:1.6923076923076923em; | |
| } | |
| menu > li{ | |
| text-align:center; | |
| } | |
| /*--- horizontal rule ---*/ | |
| hr{ | |
| height:0.07692307692307693em; | |
| background-color:#ddd; | |
| border:0; | |
| } | |
| /*--- block quotes ---*/ | |
| blockquote{ | |
| quotes:"“" "”"; | |
| padding-left:1.2307692307692308em; | |
| margin-bottom:1.8461538461538463em; | |
| } | |
| blockquote p{ | |
| font:1.2307692307692308em/1.8461538461538463 Georgia,sans-serif; | |
| color:#444; | |
| margin-bottom:0; | |
| } | |
| blockquote p:before{ | |
| content:"“"; | |
| } | |
| blockquote p:after{ | |
| content:""; | |
| } | |
| blockquote p:last-of-type:after{ | |
| content:"”"; | |
| } | |
| blockquote{ | |
| padding-left:1.2307692307692308em; | |
| margin-bottom:1.3846153846153846em; | |
| } | |
| blockquote small{ | |
| display:block; | |
| color:#666; | |
| text-indent:0; | |
| } | |
| blockquote small:before{ | |
| content:"— "; | |
| } | |
| /*-- definition / abbreviation --*/ | |
| dfn, | |
| abbr{ | |
| border-bottom:none; | |
| } | |
| dfn:hover, | |
| abbr:hover{ | |
| border-bottom:0.07692307692307693em solid #ddd; | |
| } | |
| abbr{ | |
| text-transform:uppercase; | |
| } | |
| /*-- time --*/ | |
| time{ | |
| color:#666; | |
| font-size:0.8461538461538461em; | |
| text-transform:uppercase; | |
| } | |
| /*-- Marked text --*/ | |
| mark{ | |
| background:transparent url(/img/ui/marked.png) repeat-y; | |
| background-size:100% 100%; | |
| padding:0.23076923076923078em; | |
| } | |
| /*-- Tables --*/ | |
| table{ | |
| max-width:100%; | |
| } | |
| table th, | |
| table td{ | |
| text-align:left; | |
| padding:0.9230769230769231em 0.9230769230769231em 0.7692307692307693em; | |
| } | |
| table th{ | |
| font-weight:bold; | |
| vertical-align:middle; | |
| } | |
| table td{ | |
| vertical-align:top; | |
| } | |
| /*-- Forms --*/ | |
| form{ | |
| position:relative; | |
| margin-bottom:1.3846153846153846em; | |
| } | |
| fieldset{ | |
| border:0; | |
| padding:0; | |
| margin:0; | |
| } | |
| fieldset > :last-child{ | |
| margin-bottom:0; | |
| } | |
| legend{ | |
| display:block; | |
| width:100%; | |
| font-weight:bold; | |
| font-size:1.0769230769230769em; | |
| line-height:1.5; | |
| padding:0; | |
| margin:0; | |
| } | |
| /*------------------------------------*\ | |
| $LAYOUT | |
| \*------------------------------------*/ | |
| /* boundaries */ | |
| .row:before, | |
| .row:after{ | |
| content:""; | |
| display:table; | |
| } | |
| .row:after{ | |
| clear:both; | |
| } | |
| .row{ | |
| max-width:75.6923076923077em; | |
| position:relative; | |
| margin:0 auto 0.8461538461538461em auto; | |
| } | |
| .row > .island, | |
| .row > .islet{ | |
| width:100%; | |
| } | |
| .row .row{ | |
| width:auto; | |
| max-width:none; | |
| min-width:0; | |
| margin:0 -0.9230769230769231em; | |
| } | |
| /* island modules */ | |
| .grid, | |
| .island, | |
| .islet{ | |
| display:block; | |
| float:left; | |
| /* gutters = 12px */ | |
| padding:0 0.9230769230769231em; | |
| } | |
| /* micro clearfix */ | |
| .cf:before, | |
| .cf:after{ | |
| content:" "; | |
| display:table; | |
| } | |
| .cf:after{clear:both;} | |
| .fl{float:left;} | |
| .fr{float:right;} | |
| /*------------------------------------*\ | |
| $THEMES | |
| \*------------------------------------*/ | |
| /* overly large type abstractions */ | |
| .giga{ | |
| font-size:1.8461538461538463em; | |
| margin-bottom:0.08333333333333333em; | |
| } | |
| .mega{ | |
| font-weight:normal; | |
| font-size:1.3846153846153846em; | |
| margin:0; | |
| } | |
| /* header styling */ | |
| .emphasis{ | |
| font-weight:bold; | |
| text-transform:uppercase; | |
| } | |
| /* morph ordinary elements into headings */ | |
| .heading, | |
| .link-heading{ | |
| display:block; | |
| } | |
| .link-heading{ | |
| font-weight:bold; | |
| color:#333; | |
| } | |
| .link-heading:hover{ | |
| color:#000; | |
| } | |
| /*--- lined section headings ---*/ | |
| .section-heading{ | |
| border-bottom:1px solid #bfbfbf; | |
| border-bottom:0.07692307692307693rem solid rgba(0,0,0,.2); | |
| } | |
| h1.section-heading, | |
| .alpha.section-heading{ | |
| padding-bottom:0.3076923076923077em; | |
| margin-bottom:0.46153846153846156em; | |
| } | |
| h2.section-heading, | |
| .beta.section-heading{ | |
| padding-bottom:0.23076923076923078em; | |
| margin-bottom:0.38461538461538464em; | |
| } | |
| h3.section-heading, | |
| .gamma.section-heading{ | |
| padding-bottom:0.3076923076923077em; | |
| margin-bottom:0.3076923076923077em; | |
| } | |
| small, | |
| .mili{ | |
| font-size:0.8461538461538461em; | |
| line-height:1.8181818181818181; | |
| } | |
| .muted{ | |
| color:#999; | |
| } | |
| ul.unstyled-list{ | |
| list-style:none; | |
| margin-left:0; | |
| } | |
| ul.disc-list{ | |
| list-style-type:disc; | |
| } | |
| ul.numbered-list{ | |
| list-style:decimal outside; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment