From 1a268ba710b2cdb4ede98af3368c43d66c4c5e53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Wed, 3 Apr 2013 15:14:01 +0200 Subject: first commit --- css/index.html | 0 css/knacss.css | 1070 ++++++++++++++++++++++++++++++++++++++++++++++++++++ css/reset.css | 35 ++ css/style.css | 35 ++ css/typography.css | 85 +++++ 5 files changed, 1225 insertions(+) create mode 100755 css/index.html create mode 100644 css/knacss.css create mode 100755 css/reset.css create mode 100644 css/style.css create mode 100755 css/typography.css (limited to 'css') diff --git a/css/index.html b/css/index.html new file mode 100755 index 00000000..e69de29b diff --git a/css/knacss.css b/css/knacss.css new file mode 100644 index 00000000..56e91f9d --- /dev/null +++ b/css/knacss.css @@ -0,0 +1,1070 @@ +/* +* www.KNACSS.com V2.6c @author: Raphael Goetter, Alsacreations +* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ +*/ + +/* ----------------------------- */ +/* ==reset */ +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ +html { + font-size: 62.5%; +} +body { + background-color: #fff; + color: #000; + font-family: "Century Gothic", helvetica, arial, sans-serif; + font-size: 1.4em; /* equiv 14px */ + line-height: 1.5; /* adapt to your design */ +} + +/* font-sizing for content */ +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure, +hgroup { + font-size: 1em; /* equiv 14px */ + line-height: 1.5; + margin: .75em 0 0; +} +h1, .h1-like { + font-size: 1.8571em; /* equiv 26px */ + font-weight: normal; + line-height: 1.6154em; + margin: .8077em 0 0 0; +} +h2, .h2-like { + font-size: 1.7143em; /* equiv 24px */ + font-weight: normal; + line-height: 1.75em; + margin: .875em 0 0 0; +} +h3, .h3-like { + font-size: 1.5714em; /* equiv 22px */ + font-weight: normal; + line-height: 1.909em; + margin: .9545em 0 0 0; +} +h4, .h4-like { + font-size: 1.4286em; /* equiv 20px */ + font-weight: normal; + line-height: 1.05em; + margin: 1.05em 0 0 0; +} +h5, .h5-like { + font-size: 1.2857em; /* equiv 18px */ + font-weight: normal; + line-height: 1.1667em; + margin: 1.1667em 0 0 0; +} +h6, .h6-like { + font-size: 1.1429em; /* equiv 16px */ + font-weight: normal; + line-height: 1.3125em; + margin: 1.3125em 0 0 0; +} + +/* alternate font-sizing */ +.smaller { + font-size: .7143em; /* equiv 10px */ +} +.small { + font-size: .8571em; /* equiv 12px */ +} +.big { + font-size: 1.1429em; /* equiv 16px */ +} +.bigger { + font-size: 1.2857em; /* equiv 18px */ +} +.biggest { + font-size: 1.4286em; /* equiv 20px */ +} + +/* soft reset */ +html, +body, +textarea, +figure, +label { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +code, +pre, +samp, +kbd { + white-space: pre-wrap; + font-family: consolas, 'DejaVu Sans Mono', courier, monospace; + line-height: 1em; +} +code, kbd, mark { + border-radius: 2px; +} +em { + font-style: italic; +} +strong { + font-weight: bold; +} +kbd { + padding: 0 2px; + border: 1px solid #999; +} +code { + padding: 2px 4px; + background: rgba(0,0,0,.04); + color: #b11; +} +mark { + padding:2px 4px; + background: #ff0; +} + +table { margin-bottom: 1.5em; } + +/* avoid top margins on first content element */ +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-top: 0; +} + +/* avoid margins on nested elements */ +li p, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} + +/* max values */ +img, table, td, blockquote, code, pre, textarea, input, video { + max-width: 100%; +} + +/* you shall not pass */ +div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; +} + +/* pictures */ +img { + height: auto; + vertical-align: middle; +} +/* Gmap3 max-width bug fix on images */ +#map_canvas img, +.gmnoprint img {max-width: none;} + +a img { border: 0; } + +/* scripts */ +body > script {display: none !important;} + +/* skip-links */ +.skip-links { + position: absolute; +} +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: #000; + color:#fff; + text-decoration: none; +} +.skip-links a:focus { + position: static; +} + +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* float layout */ +/* ----------- */ + +/* module, contains floats (.item is the same) */ +.mod, .item { + overflow: hidden; +} + +/* table layout */ +/* ------------------ */ +.row { + display: table; + table-layout: fixed; + width: 100%; +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ +.clearfix:after, +.line:after, +.mod:after { + content: ""; + display: table; + clear: both; +} + +/* alignments (blocks and inline) */ +/* ------------------------------ */ + +/* left elements */ +.left { + float: left; +} +img.left { + margin-right: 1em; +} + +/* right elements */ +.right { + float: right; +} +img.right { + margin-left: 1em; +} + +img.left, img.right { + margin-bottom: 5px; +} + +.center { margin-left: auto; margin-right: auto; } +.txtleft { text-align: left; } +.txtright { text-align: right; } +.txtcenter { text-align: center; } + +/* just inline-block */ +.inbl { + display: inline-block; + vertical-align: top; + margin-right: -.25em; +} + +/* blocks widths (percentage and pixels) */ +.w10 { width: 10%; } +.w20 { width: 20%; } +.w25 { width: 25%; } +.w30 { width: 30%; } +.w33 { width: 33.333%; } +.w40 { width: 40%; } +.w50 { width: 50%; } +.w60 { width: 60%; } +.w66 { width: 66.666%; } +.w70 { width: 70%; } +.w75 { width: 75%; } +.w80 { width: 80%; } +.w90 { width: 90%; } +.w100 { width: 100%; } + +.w50p { width: 50px; } +.w100p { width: 100px; } +.w150p { width: 150px; } +.w200p { width: 200px; } +.w300p { width: 300px; } +.w400p { width: 400px; } +.w500p { width: 500px; } +.w600p { width: 600px; } +.w700p { width: 700px; } +.w800p { width: 800px; } +.w960p { width: 960px; } +.mw960p { max-width: 960px; } + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small(10px),medium(20px),large(30px),none(0) +source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css +*/ +.m-reset, .ma0 { margin: 0 !important; } +.p-reset, .pa0 { padding: 0 !important; } +.ma1, .mas { margin: 10px !important; } +.ma2, .mam { margin: 20px !important; } +.ma3, .mal { margin: 30px !important; } +.pa1, .pas { padding: 10px; } +.pa2, .pam { padding: 20px; } +.pa3, .pal { padding: 30px; } + +.mt0, .mtn { margin-top: 0 !important; } +.mt1, .mts { margin-top: 10px !important; } +.mt2, .mtm { margin-top: 20px !important; } +.mt3, .mtl { margin-top: 30px !important; } +.mr0, .mrn { margin-right: 0; } +.mr1, .mrs { margin-right: 10px; } +.mr2, .mrm { margin-right: 20px; } +.mr3, .mrl { margin-right: 30px; } +.mb0, .mbn { margin-bottom: 0 !important; } +.mb1, .mbs { margin-bottom: 10px !important; } +.mb2, .mbm { margin-bottom: 20px !important; } +.mb3, .mbl { margin-bottom: 30px !important; } +.ml0, .mln { margin-left: 0; } +.ml1, .mls { margin-left: 10px; } +.ml2, .mlm { margin-left: 20px; } +.ml3, .mll { margin-left: 30px; } + +.pt0, .ptn { padding-top: 0; } +.pt1, .pts { padding-top: 10px; } +.pt2, .ptm { padding-top: 20px; } +.pt3, .ptl { padding-top: 30px; } +.pr0, .prn { padding-right: 0; } +.pr1, .prs { padding-right: 10px; } +.pr2, .prm { padding-right: 20px; } +.pr3, .prl { padding-right: 30px; } +.pb0, .pbn { padding-bottom: 0; } +.pb1, .pbs { padding-bottom: 10px; } +.pb2, .pbm { padding-bottom: 20px; } +.pb3, .pbl { padding-bottom: 30px; } +.pl0, .pln { padding-left: 0; } +.pl1, .pls { padding-left: 10px; } +.pl2, .plm { padding-left: 20px; } +.pl3, .pll { padding-left: 30px; } + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { display: none; } /* hidden on desktop */ + +/* ----------------------------- */ +/* ==header */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==sidebar */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==footer */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + vertical-align: middle; /* @bugfix alignment */ + font-family: inherit; +} +textarea { + resize: vertical; + font-family: inherit; +} + +/* ----------------------------- */ +/* ==main */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==iefix */ +/* ----------------------------- */ + +/* haslayout for IE6/IE7 */ +.ie67 .clearfix, +.ie67 .line, +.ie67 .mod, +.ie67 .row, +.ie67 .col { + zoom: 1; +} + +/* inline-block and table-cell for IE6/IE7 */ +/* warning: .col needs width on IE6/IE7 */ +.ie67 .btn, +.ie67 .col, +.ie67 .inbl { + display: inline; + zoom: 1; +} +.ie8 img { + width: auto; /* @bugfix for IE8 */ +} + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill */ +/* +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* ----------------------------- */ +/* ==print */ +/* ----------------------------- */ + +/* quick print reset */ +@media print { + p, + blockquote { + orphans: 2; + widows: 2; + } + blockquote, + ul, + ol { + page-break-inside: avoid; + } + h1, + h2, + h3, + caption { + page-break-after: avoid; + } +} + +/* orientation iOS font-size fix */ +@media (orientation: landscape) and (max-device-width: 768px) { + html, + body { + -webkit-text-size-adjust: 100%; + } +} +/* ----------------------------- */ +/* ==grids */ +/* ----------------------------- */ + +/* equal grids with 2% gutter */ +[class*=grid] > * {float: left; } /* direct childrens are floating */ +[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */ +.grid2 > * { width: 49%; } +.grid3 > * { width: 32%; } +.grid4 > * { width: 23.5%; } +.grid5 > * { width: 18.4%; } +.grid6 > * { width: 15%; } + +/* unequal grids (1-2, 2-1, 1-3 and 3-1) */ +.grid2-1 > *:first-child, +.grid1-2 > * + * { width: 66%; } +.grid1-2 > *:first-child, +.grid2-1 > * + * { width: 32%; } +.grid1-3 > *:first-child, +.grid3-1 > * + * { width: 23.5%; } +.grid3-1 > *:first-child, +.grid1-3 > * + * { width: 74.5%; } + + +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ + +table, +.table { + max-width : 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; +} +table { + width: 100%; +} +.table { + display: table; +} +caption { + padding: 10px; + color: #555; + font-style: italic; +} +table { + border: 1px solid #ccc; +} +tr > * + * { + border-left: 1px solid #ccc; +} +th, +td { + padding: .3em .8em; + text-align: left; + border-bottom: 1px solid #ccc; +} +td { + color: #333; +} + +/* alternate tables */ +.alternate { border: 0; } +.alternate tbody { + border: 1px solid #ccc; +} +.alternate thead tr > * + * { + border-left: 0; +} +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} + +/* alternate-vert tables */ +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} +.alternate-vert tr > :first-child { + border-bottom: 0; +} +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} + +/* striped tables */ +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, .05); +} + +/* striped-vert tables */ +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, .05); +} +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ + +/* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */ + + +/* buttons */ +.btn { display: inline-block; } + +.btn.alternate {} +.btn.highlight {} +.login {} +.logout {} +.primary {} +.warning {} +.error {} +.success {} + +/* forms items */ +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; +} +legend { + border: 0; + white-space: normal; +} +button, +input, +select { + font-family: "Century Gothic", helvetica, arial, sans-serif; + font-size: 100%; + margin: 0; + vertical-align: middle; +} +textarea { + overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + min-height: 5em; + font-size: 1.75em; + vertical-align: top; + resize: vertical; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; /* clickable input types in iOS */ + *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */ +} +input[type="checkbox"], +input[type="radio"] { + padding: 0; /* Corrects excess space around these inputs in IE8/9 */ + *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */ +} +input[type="search"] { -webkit-appearance: textfield; } + +/* if select styling bugs on WebKit */ +/* select { -webkit-appearance: none; } */ + +/* 'x' appears on right of search input when text is entered. This removes it */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} +::-webkit-input-placeholder { color: #777; } +input:-moz-placeholder, +textarea:-moz-placeholder { color: #777; } + +/* Removes inner padding and border in FF3+ */ +button::-moz-focus-inner, +input[type='button']::-moz-focus-inner, +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* ----------------------------- */ +/* ==icons and bullets */ +/* ----------------------------- */ + +.icon {display: inline-block;} + +.icon:before, +.icon > li:before, +.icon.after:after, +.icon.after > li:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; top: -.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0,0,0,.1); + speak: none; +} + +@media (min-device-width: 768px) { + .icon:before, + .icon > li:before, + .icon.after:after, + .icon.after > li:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} + +.icon.after:after, +.icon.after > li:after { + margin: 0 0 0 8px; +} + +ul.icon {display: block;} +ul.icon > li {list-style: none;} +ul.icon:before, +ul.icon.after:after {content:""} +.icon.after:before, +.icon.after > li:before {content: "" !important} + +.icon-rate:before, +.icon-rate > li:before, +.icon-rate.after:after, +.icon-rate.after > li:after { + content: "\2605"; +} +.icon-unrate:before, +.icon-unrate > li:before, +.icon-unrate.after:after, +.icon-unrate.after > li:after { + content: "\2606"; +} +.icon-check:before, +.icon-check > li:before, +.icon-check.after:after, +.icon-check.after > li:after { + content: "\2713"; +} +.icon-uncheck:before, +.icon-uncheck > li:before, +.icon-uncheck.after:after, +.icon-uncheck.after > li:after { + content: "\2717"; +} +.icon-cloud:before, +.icon-cloud > li:before, +.icon-cloud.after:after, +.icon-cloud.after > li:after { + content: "\2601"; +} +.icon-dl:before, +.icon-dl > li:before, +.icon-dl.after:after, +.icon-dl.after > li:after { + content: "\21E3"; + font-weight: bold; +} +.icon-cross:before, +.icon-cross > li:before, +.icon-cross.after:after, +.icon-cross.after > li:after { + content: "\2716"; + font-weight: bold; +} +.icon-arrow1:before, +.icon-arrow1 > li:before, +.icon-arrow1.after:after, +.icon-arrow1.after > li:after { + content: "\2192"; + position: relative; top: -0.15em; +} +.icon-arrow2:before, +.icon-arrow2 > li:before, +.icon-arrow2.after:after, +.icon-arrow2.after > li:after { + content: "\279E"; +} +.icon-arrow3:before, +.icon-arrow3 > li:before, +.icon-arrow3.after:after, +.icon-arrow3.after > li:after { + content: "\279A"; +} +.icon-bracket1:before, +.icon-bracket1 > li:before, +.icon-bracket1.after:after, +.icon-bracket1.after > li:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; top: -0.15em; +} +.icon-bracket2:before, +.icon-bracket2 > li:before, +.icon-bracket2.after:after, +.icon-bracket2.after > li:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; top: -0.15em; +} +.icon-up:before, +.icon-up > li:before, +.icon-up.after:after, +.icon-up.after > li:after { + content: "\25B2"; +} +.icon-down:before, +.icon-down > li:before, +.icon-down.after:after, +.icon-down.after > li:after { + content: "\25BC"; +} +.icon-bull:before, +.icon-bull > li:before, +.icon-bull.after:after, +.icon-bull.after > li:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} +.icon-bull2:before, +.icon-bull2 > li:before, +.icon-bull2.after:after, +.icon-bull2.after > li:after { + content: "\25E6"; + top: -0.05em; +} +.icon-bull3:before, +.icon-bull3 > li:before, +.icon-bull3.after:after, +.icon-bull3.after > li:after { + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} +.icon-nav:before, +.icon-nav > li:before, +.icon-nav.after:after, +.icon-nav.after > li:after { + content: "\2261"; + font-weight: bold; + font-size: 1.6em; +} +.icon-losange:before, +.icon-losange > li:before, +.icon-losange.after:after, +.icon-losange.after > li:after { + content: "\25C6"; +} +.icon-asteri:before, +.icon-asteri > li:before, +.icon-asteri.after:after, +.icon-asteri.after > li:after { + content: "\2731"; + font-weight: bold; +} +.icon-mail:before, +.icon-mail > li:before, +.icon-mail.after:after, +.icon-mail.after > li:after { + content: "\2709"; + font-size: 1.6em; + top: -.05em; +} + +ol.styled {counter-reset: styled;} +ol.styled > li { + list-style-type: none; + counter-increment: styled; + margin-bottom: .3em; +} +ol.styled > li:before { + content: counter(styled); + display: inline-block; + width: 1em; height: 1em; + line-height: 1; + padding: 2px; + margin-right: .4em; + vertical-align: middle; + background: rgba(0,0,0,.5); + border-radius: 50%; + font-size: .9em; + text-align: center; + text-indent: -0.1em; + color: white; +} +/* ----------------------------- */ +/* ==desktop and retina medias */ +/* ----------------------------- */ + +@media (min-width: 641px) { +/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { +/* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / medium / tiny */ +/* ---------------------------------- */ + +@media (min-width: 1280px) { + + /* layouts for large (l) screens */ + .large-hidden, + .tablet-hidden { display: none !important; } + .large-visible { display: block !important; } + .large-no-float {float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large (l) screens */ + .large-w25 { width: 25% !important; } + .large-w33 { width: 33.3333% !important; } + .large-w50 { width: 50% !important; } + .large-w66 { width: 66.6666% !important; } + .large-w75 { width: 75% !important; } + .large-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large (l) screens */ + .large-ma0, + .large-man { margin: 0 !important; } +} + +@media (max-width: 768px) { + + /* quick tablet reset */ + .w60, + .w66, + .w70, + .w75, + .w80, + .w90, + .w100, + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p, + .medium-wauto { width: auto; } + + /* layouts for medium (m) screens */ + .medium-hidden, + .tablet-hidden { display: none !important; } + .medium-visible { display: block !important; } + .medium-no-float {float: none; } + .medium-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .medium-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .medium-col { + display: table-cell; + vertical-align: top; + } + + /* widths for medium (m) screens */ + .medium-w25 { width: 25% !important; } + .medium-w33 { width: 33.3333% !important; } + .medium-w50 { width: 50% !important; } + .medium-w66 { width: 66.6666% !important; } + .medium-w75 { width: 75% !important; } + .medium-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + /* margins for medium (m) screens */ + .medium-ma0, + .medium-man { margin: 0 !important; } + + /* Responsive grids */ + .grid4 > * {width: 49% !important; } + .grid4 > :first-child + * + * {margin-left: 0 !important;} + .grid6 > * {width: 32% !important; } + .grid6 > :first-child + * + * + * {margin-left: 0 !important;} +} + +@media (max-width: 640px) { + + /* quick smartphone reset */ + .mod, + .item, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .w30, + .w33, + .w40, + .w50, + .w300p, + .w400p, + .w500p { + width: auto; + } + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny (t) screens */ + .tiny-hidden, + .phone-hidden { display: none !important; } + .tiny-visible { display: block !important; } + .tiny-no-float {float: none;} + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .tiny-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .tiny-col { + display: table-cell; + vertical-align: top; + } + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + thead { display: none; } + + /* widths for tiny (t) screens */ + .tiny-w25 { width: 25% !important; } + .tiny-w33 { width: 33.3333% !important; } + .tiny-w50 { width: 50% !important; } + .tiny-w66 { width: 66.6666% !important; } + .tiny-w75 { width: 75% !important; } + .tiny-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + /* margins for tiny (t) screens */ + .tiny-ma0, + .tiny-man { margin: 0 !important; } +} + diff --git a/css/reset.css b/css/reset.css new file mode 100755 index 00000000..530ddc3d --- /dev/null +++ b/css/reset.css @@ -0,0 +1,35 @@ +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, code, +del, dfn, em, img, q, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + vertical-align: baseline; +} + + +/* Tables still need 'cellspacing="0"' in the markup. */ +table { border-collapse: separate; border-spacing: 0; } +caption, th, td { text-align: left; font-weight: normal; } +table, td, th { vertical-align: middle; } + +/* Remove possible quote marks (") from ,
. */ +blockquote:before, blockquote:after, q:before, q:after { content: ""; } +blockquote, q { quotes: "" ""; } + +/* Remove annoying border on linked images. */ +a img { border: none; } + + +body { + + margin: 10px; +} + diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..41a61780 --- /dev/null +++ b/css/style.css @@ -0,0 +1,35 @@ +body { + color: #222222; + font: 20px/1.3em Palatino,Georgia,serif; + background-color: #e6e6e6; +} + +a, a:hover, a:visited { + color: #000; +} +header { + text-align: center; +} + +#main { + margin: 0 auto; +} + +#main ul#links { + padding: 0; + list-style-type: none; + text-align: center; +} + +#main ul#links li { + display: inline; + padding: 15px; +} + +#main a.tool { + text-decoration: none; +} + +footer { + text-align: right; +} \ No newline at end of file diff --git a/css/typography.css b/css/typography.css new file mode 100755 index 00000000..e41db096 --- /dev/null +++ b/css/typography.css @@ -0,0 +1,85 @@ + +body { + font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; + font-size-adjust:none; + font-style:normal; + font-variant:normal; + font-weight:normal; + padding: 15px; + margin: 15px auto; +} + +article { + border: 3px solid grey; + max-width:700px; + margin: 15px auto; + padding: 15px; +} + +footer { + border: 1px solid black; + padding: 15px; + margin: 15px auto; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +img { display: block; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } + +p > img { display: inline-block; margin: 0; } + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; line-height: 1.5em;} +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; } +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } -- cgit v1.2.3