diff --git a/assets/css/inuit.css b/assets/css/inuit.css new file mode 100644 index 0000000..cb7d0cc --- /dev/null +++ b/assets/css/inuit.css @@ -0,0 +1,1071 @@ +@charset "UTF-8"; +/*------------------------------------*\ + INUIT.CSS +\*------------------------------------*/ +/* +Author: Harry Roberts +Twitter: @inuitcss +Author URL: csswizardry.com +Project URL: inuitcss.com +Version: 1.4.2 +Codename: Eskimo +Date: 8 May 2011 + +Copyright 2011 Harry Roberts + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. + +*/ + + + + + +/*------------------------------------*\ + RESET +\*------------------------------------*/ +html,body,div,span,applet,object,iframe, +h1,h2,h3,h4,h5,h6,p,blockquote,pre, +a,abbr,acronym,address,big,cite,code, +del,dfn,em,img,ins,kbd,q,s,samp, +small,strike,strong,sub,sup,tt,var, +b,u,i,center, +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{ + display: block; +} + +table{ + border-collapse:collapse; + border-spacing:0; +} +fieldset,img{ + border:0; +} +address,caption,cite,dfn,th,var{ + font-style:normal; + font-weight:normal; +} +caption,th{ + text-align:left; +} +h1,h2,h3,h4,h5,h6{ + font-size:100%; + font-weight:normal; +} +q:before,q:after{ + content:''; +} +abbr,acronym{ + border:0; +} + + + + + +/*------------------------------------*\ + MAIN +\*------------------------------------*/ +html{ + overflow-y:scroll; /* Force scrollbars 100% of the time */ + font-size:80%; /* Use 16px as per http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */ + font-family:Cambria, Georgia, "Times New Roman", serif; /* Swap these two lines around to switch between serif and sans */ + font-family:"DejaVu Sans", Calibri, Arial, sans-serif; /* Swap these two lines around to switch between serif and sans */ + line-height:1; + background:#fff; + color:#333; +} +body{ + width:940px; + min-height:100%; + padding:10px; + margin:0 auto; +} + + + + + +/*------------------------------------*\ + GRIDS +\*------------------------------------*/ +/* +Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don’t want to do that so we use a combination of margin- and negative margin-left. It’s clever... +We also alow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in
...
+*/ +.grids{ + margin-left:-20px; + overflow:hidden; + clear:both; +} +ul.grids, +.cols-12 ul.grids{ + /* So we can make grids out of lists */ + margin:0 0 0 -20px; + list-style:none; +} +.grid{ + float:left; + margin:0 20px 0 0; +} +.grids .grid{ + margin:0 0 0 20px; +} + +/* +Grid sizes based on 960.gs by @nathansmith +For the sake of file-size and load-time please delete all CSS pertaining to the grid system you aren’t using. +The ability to use one of two different grid systems from the same file means there is a lot of code needed to alter intricate styles--look out for lists! +*/ + +/* +16 column grid system -- default +*/ +.grid-1 { width:40px; } +.grid-2 { width:100px; } +.grid-3 { width:160px; } +.grid-4 { width:220px; } + +.grid-5 { width:280px; } +.grid-6 { width:340px; } +.grid-7 { width:400px; } +.grid-8 { width:460px; } + +.grid-9 { width:520px; } +.grid-10 { width:580px; } +.grid-11 { width:640px; } +.grid-12 { width:700px; } + +.grid-13 { width:760px; } +.grid-14 { width:820px; } +.grid-15 { width:880px; } +.grid-16 { width:940px; margin:0; } + + +/* +12 column grid system -- add ‘class="cols-12"’ to the html element to invoke this system. +*/ + +/* +12-col version +*/ +.cols-12 body{ + background:url(../img/css/12-grid.png) top center repeat-y; +} + +.cols-12 .grid-1 { width:60px; } +.cols-12 .grid-2 { width:140px; } +.cols-12 .grid-3 { width:220px; } +.cols-12 .grid-4 { width:300px; } + +.cols-12 .grid-5 { width:380px; } +.cols-12 .grid-6 { width:460px; } +.cols-12 .grid-7 { width:540px; } +.cols-12 .grid-8 { width:620px; } + +.cols-12 .grid-9 { width:700px; } +.cols-12 .grid-10 { width:780px; } +.cols-12 .grid-11 { width:860px; } + +/* Take care of grids 12-16 to cater for a switch from one system to the other. */ +.cols-12 .grid-12, +.cols-12 .grid-13, +.cols-12 .grid-14, +.cols-12 .grid-15, +.cols-12 .grid-16 { width:940px; margin:0; } + + + + + +/*------------------------------------*\ + LOGO +\*------------------------------------*/ +/* +Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ +*/ +#logo, +#logo img{ + display:block; + width:auto; /* Width of your logo in pixels (ideally a round grid-number) */ + height:auto; /* Height of your logo in pixels */ +} +/* Based on the fact that we need to use an in our markup, let’s hide the actual image and use a background on the --this gives us sematically sound markup and the ability to use sprites for hover effects! */ +#logo{ + background:url(/path/to/logo); +} +#logo:hover{ + /* Hover states */ + background-position:0 -00px; +} +#logo img{ + position:absolute; + left:-99999px; +} + + + + + +/*------------------------------------*\ + NAV +\*------------------------------------*/ +#nav{ + list-style:none; + width:100%; + overflow:hidden; + margin:0 0 1.5em 0; +} +#nav li{ + float:left; +} +#nav a{ + display:block; +} +/* +http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/ +Add a class of centred/centered to create a centred nav. +*/ +#nav.centred, +#nav.centered{ + text-align:center; +} +#nav.centred li, +#nav.centered li{ + display:inline; + float:none; +} +#nav.centred a, +#nav.centered a{ + display:inline-block; +} + + + + + +/*------------------------------------*\ + TYPE +\*------------------------------------*/ +/*--- HEADINGS ---*/ +h1{ + font-size:2em; /* 32px */ + margin-bottom:0.75em; /* 24px */ + line-height:1.5; /* 48px */ +} +h2{ + font-size:1.5em; /* 24px */ + margin-bottom:1em; /* 24px */ + line-height:1; /* 24px */ +} +h3{ + font-size:1.25em; /* 20px */ + margin-bottom:1.2em; /* 24px */ + line-height:1.2; /* 24px */ +} +h4{ + font-size:1.125em; /* 18px */ + margin-bottom:1.333em; /* 24px */ + line-height:1.333; /* 24px */ +} +h5{ + font-weight:bold; +} +h5, +h6{ + font-size:1em; /* 16px */ + margin-bottom:1.5em; /* 24px */ + line-height:1.5; /* 24px */ +} + +/*--- PARAGRAPHS ---*/ +p{ + margin-bottom:1.5em; +} +/* +Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/ +Uncomment to activate +p+p{ + text-indent:2em; + margin-top:-1.5em; +} */ + +/*--- LINKS ---*/ +/* +Say no to negative hovers! +A negative hover is one whose appearance is subtracted from on hover rather than added to. +*/ +a{ + text-decoration:none; +} +a:visited{ + opacity:0.8; /* A bit generic, but it’s a bare minumum... */ +} +a:hover{ + text-decoration:underline; +} +a:active, +a:focus{ + /* Give clicked links a depressed effect. */ + position:relative; + top:1px; +} + +/*--- LISTS ---*/ +ul, +ol{ + margin:0 0 1.5em 60px; +} +ul ul, +ol ol, +ul ol, +ol ul{ + /* Let’s take care of lists in lists */ + margin:0 0 0 60px; +} +dl{ + margin-bottom:1.5em; +} +dt{ + font-weight:bold; +} +dt:after, +dt::after{ + content:":"; +} +dd{ + margin-left:60px; +} +/* +I personally love this next one. Create a list of keywords by adding a single class to a