KNACSS/css/01-base.css

540 lines
6.4 KiB
CSS
Raw Permalink Normal View History

/*!
2014-05-19 10:46:39 +02:00
* www.KNACSS.com V3.0.3 (2014-05-19) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* == soft reset */
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* switching box model for all elements */
2014-05-03 14:38:58 +02:00
* {
2014-05-19 10:46:39 +02:00
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* soft reset */
2014-05-03 14:38:58 +02:00
html,
body {
2014-05-19 10:46:39 +02:00
margin: 0;
padding: 0;
}
ul,
ol {
2014-05-19 10:46:39 +02:00
padding-left: 2em;
}
ul.unstyled {
2014-05-19 10:46:39 +02:00
list-style: none;
}
img {
2014-05-19 10:46:39 +02:00
height: auto;
vertical-align: middle;
border: 0;
}
audio,
canvas,
video {
2014-05-19 10:46:39 +02:00
display: inline-block;
}
svg:not(:root) {
2014-05-19 10:46:39 +02:00
overflow: hidden;
}
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* == typography */
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
html {
2014-05-19 10:46:39 +02:00
/* set base font-size to equiv "10px", which is adapted to rem unit */
font-size: 62.5%;
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
2014-05-19 10:46:39 +02:00
/* set body font-size in em (1.4em equiv "14px") */
font-size: 1.4em;
background-color: #ffffff;
color: #000000;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
}
2014-05-03 14:38:58 +02:00
2014-05-19 10:53:43 +02:00
/* font-sizing for content */
p,
2014-05-03 14:38:58 +02:00
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
2014-05-07 10:53:15 +02:00
figure {
2014-05-19 10:46:39 +02:00
margin-top: 0.75em;
margin-bottom: 0;
line-height: 1.5;
}
h1,
.h1-like {
2014-05-19 10:46:39 +02:00
font-size: 3.2rem;
}
h2,
.h2-like {
2014-05-19 10:46:39 +02:00
font-size: 2.8rem;
}
h3,
.h3-like {
2014-05-19 10:46:39 +02:00
font-size: 2.4rem;
}
h4,
.h4-like {
2014-05-19 10:46:39 +02:00
font-size: 2rem;
}
h5,
.h5-like {
2014-05-19 10:46:39 +02:00
font-size: 1.8rem;
}
h6,
.h6-like {
2014-05-19 10:46:39 +02:00
font-size: 1.6rem;
}
/* alternate font-sizing */
2014-05-03 14:38:58 +02:00
.smaller {
2014-05-19 10:46:39 +02:00
font-size: 0.71em;
}
.small {
2014-05-19 10:46:39 +02:00
font-size: 0.86em;
}
.big {
2014-05-19 10:46:39 +02:00
font-size: 1.14em;
}
.bigger {
2014-05-19 10:46:39 +02:00
font-size: 1.29em;
}
.biggest {
2014-05-19 10:46:39 +02:00
font-size: 1.43em;
}
code,
pre,
samp,
kbd {
2014-05-19 10:46:39 +02:00
/* IE fix */
white-space: pre-line;
white-space: pre-wrap;
font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
line-height: normal;
}
2014-05-03 14:38:58 +02:00
em,
.em,
address,
cite,
dfn,
i,
var {
2014-05-19 10:46:39 +02:00
font-style: italic;
}
2014-05-03 14:38:58 +02:00
.no-em {
2014-05-19 10:46:39 +02:00
font-style: normal;
2014-05-03 14:38:58 +02:00
}
strong,
.strong {
2014-05-19 10:46:39 +02:00
font-weight: bold;
}
2014-05-03 14:38:58 +02:00
.no-strong {
2014-05-19 10:46:39 +02:00
font-weight: normal;
2014-05-03 14:38:58 +02:00
}
small,
sub,
sup {
2014-05-19 10:46:39 +02:00
font-size: smaller;
2014-05-03 14:38:58 +02:00
}
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* == hiding content */
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
2014-05-07 10:53:15 +02:00
/* hidden but not for assistance tools, Yahoo! method */
.visually-hidden {
2014-05-19 10:46:39 +02:00
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
2014-05-03 14:38:58 +02:00
body > script {
2014-05-19 10:46:39 +02:00
display: none !important;
2014-05-03 14:38:58 +02:00
}
@media (max-width: 480px) {
2014-05-19 10:46:39 +02:00
.no-small-screen {
display: none;
}
2014-05-03 14:38:58 +02:00
}
@media (min-width: 1024px) {
2014-05-19 10:46:39 +02:00
.no-large-screen {
display: none;
}
2014-05-03 14:38:58 +02:00
}
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* == browsers consistency */
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* avoid top margins on first content element */
2014-05-03 14:38:58 +02:00
p:first-child,
2014-05-03 14:38:58 +02:00
.p-like: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 {
2014-05-19 10:46:39 +02:00
margin-top: 0;
}
/* avoid margins on nested elements */
2014-05-03 14:38:58 +02:00
li p,
2014-05-03 14:38:58 +02:00
li .p-like,
li ul,
li ol {
2014-05-19 10:46:39 +02:00
margin-top: 0;
margin-bottom: 0;
}
/* max values */
2014-05-03 14:38:58 +02:00
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video {
2014-05-19 10:46:39 +02:00
max-width: 100%;
}
/* margin-bottom on tables */
2014-05-03 14:38:58 +02:00
table {
2014-05-19 10:46:39 +02:00
margin-bottom: 2em;
}
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* ==layout and modules */
2014-05-03 14:38:58 +02:00
/* ----------------------------- */
2014-05-03 14:38:58 +02:00
/* float layout */
2014-05-03 14:38:58 +02:00
/* module, gains superpower "BFC" Block Formating Context */
2014-05-03 14:38:58 +02:00
.mod {
2014-05-19 10:46:39 +02:00
overflow: hidden;
}
/* blocks that needs to be placed under floats */
2014-05-03 14:38:58 +02:00
.clear,
.line,
.row {
2014-05-19 10:46:39 +02:00
clear: both;
}
/* blocks that must contain floats */
2014-05-03 14:38:58 +02:00
.clearfix:after,
2014-04-20 19:35:39 +02:00
.line:after {
2014-05-19 10:46:39 +02:00
content: "";
display: table;
clear: both;
}
/* table layout */
2014-05-03 14:38:58 +02:00
.row {
2014-05-19 10:46:39 +02:00
display: table;
table-layout: fixed;
width: 100%;
}
.row > *,
.col {
2014-05-19 10:46:39 +02:00
display: table-cell;
vertical-align: top;
}
/* inline-block */
2014-05-03 14:38:58 +02:00
.inbl {
2014-05-19 10:46:39 +02:00
display: inline-block;
vertical-align: top;
}
/* alignments (blocks and inline) */
2014-05-03 14:38:58 +02:00
/* ------------------------------ */
2014-05-03 14:38:58 +02:00
2014-04-20 20:02:32 +02:00
/* left (or starting) elements */
2014-05-03 14:38:58 +02:00
2014-04-20 20:02:32 +02:00
.left,
.start {
2014-05-19 10:46:39 +02:00
float: left;
}
2014-04-20 20:02:32 +02:00
img.left,
img.start {
2014-05-19 10:46:39 +02:00
margin-right: 1em;
}
2014-04-20 20:02:32 +02:00
/* right (or ending) elements */
2014-05-03 14:38:58 +02:00
2014-04-20 20:02:32 +02:00
.right,
.end {
2014-05-19 10:46:39 +02:00
float: right;
}
2014-04-20 20:02:32 +02:00
img.right,
img.end {
2014-05-19 10:46:39 +02:00
margin-left: 1em;
}
img.left,
2014-04-20 20:02:32 +02:00
img.right,
img.start,
img.end {
2014-05-19 10:46:39 +02:00
margin-bottom: 0.5em;
}
.center {
2014-05-19 10:46:39 +02:00
margin-left: auto;
margin-right: auto;
}
.txtleft {
2014-05-19 10:46:39 +02:00
text-align: left;
}
.txtright {
2014-05-19 10:46:39 +02:00
text-align: right;
}
.txtcenter {
2014-05-19 10:46:39 +02:00
text-align: center;
}
.w10 {
2014-05-19 10:46:39 +02:00
width: 10%;
}
.w20 {
2014-05-19 10:46:39 +02:00
width: 20%;
}
.w25 {
2014-05-19 10:46:39 +02:00
width: 25%;
}
.w30 {
2014-05-19 10:46:39 +02:00
width: 30%;
}
.w33 {
2014-05-19 10:46:39 +02:00
width: 33.3333%;
}
.w40 {
2014-05-19 10:46:39 +02:00
width: 40%;
}
.w50 {
2014-05-19 10:46:39 +02:00
width: 50%;
}
.w60 {
2014-05-19 10:46:39 +02:00
width: 60%;
}
.w66 {
2014-05-19 10:46:39 +02:00
width: 66.6666%;
}
.w70 {
2014-05-19 10:46:39 +02:00
width: 70%;
}
.w75 {
2014-05-19 10:46:39 +02:00
width: 75%;
}
.w80 {
2014-05-19 10:46:39 +02:00
width: 80%;
}
.w90 {
2014-05-19 10:46:39 +02:00
width: 90%;
}
.w100 {
2014-05-19 10:46:39 +02:00
width: 100%;
}
.w50p {
2014-05-19 10:46:39 +02:00
width: 50px;
}
.w100p {
2014-05-19 10:46:39 +02:00
width: 100px;
}
.w150p {
2014-05-19 10:46:39 +02:00
width: 150px;
}
.w200p {
2014-05-19 10:46:39 +02:00
width: 200px;
}
.w300p {
2014-05-19 10:46:39 +02:00
width: 300px;
}
.w400p {
2014-05-19 10:46:39 +02:00
width: 400px;
}
.w500p {
2014-05-19 10:46:39 +02:00
width: 500px;
}
.w600p {
2014-05-19 10:46:39 +02:00
width: 600px;
}
.w700p {
2014-05-19 10:46:39 +02:00
width: 700px;
}
.w800p {
2014-05-19 10:46:39 +02:00
width: 800px;
}
.w960p {
2014-05-19 10:46:39 +02:00
width: 960px;
}
.mw960p {
2014-05-19 10:46:39 +02:00
max-width: 960px;
}
.w1140p {
2014-05-19 10:46:39 +02:00
width: 1140px;
}
.mw1140p {
2014-05-19 10:46:39 +02:00
max-width: 1140px;
}
.wauto {
2014-05-19 10:46:39 +02:00
width: auto;
}
2014-05-03 14:38:58 +02:00
.man {
2014-05-19 10:46:39 +02:00
margin: 0;
}
2014-05-03 14:38:58 +02:00
.pan {
2014-05-19 10:46:39 +02:00
padding: 0;
}
.mas {
2014-05-19 10:46:39 +02:00
margin: 1em;
}
.mam {
2014-05-19 10:46:39 +02:00
margin: 2em;
}
.mal {
2014-05-19 10:46:39 +02:00
margin: 4em;
}
.pas {
2014-05-19 10:46:39 +02:00
padding: 1em;
}
.pam {
2014-05-19 10:46:39 +02:00
padding: 2em;
}
.pal {
2014-05-19 10:46:39 +02:00
padding: 4em;
}
.mtn {
2014-05-19 10:46:39 +02:00
margin-top: 0;
}
.mts {
2014-05-19 10:46:39 +02:00
margin-top: 1em;
}
.mtm {
2014-05-19 10:46:39 +02:00
margin-top: 2em;
}
.mtl {
2014-05-19 10:46:39 +02:00
margin-top: 4em;
}
.mrn {
2014-05-19 10:46:39 +02:00
margin-right: 0;
}
.mrs {
2014-05-19 10:46:39 +02:00
margin-right: 1em;
}
.mrm {
2014-05-19 10:46:39 +02:00
margin-right: 2em;
}
.mrl {
2014-05-19 10:46:39 +02:00
margin-right: 4em;
}
.mbn {
2014-05-19 10:46:39 +02:00
margin-bottom: 0;
}
.mbs {
2014-05-19 10:46:39 +02:00
margin-bottom: 1em;
}
.mbm {
2014-05-19 10:46:39 +02:00
margin-bottom: 2em;
}
.mbl {
2014-05-19 10:46:39 +02:00
margin-bottom: 4em;
}
.mln {
2014-05-19 10:46:39 +02:00
margin-left: 0;
}
.mls {
2014-05-19 10:46:39 +02:00
margin-left: 1em;
}
.mlm {
2014-05-19 10:46:39 +02:00
margin-left: 2em;
}
.mll {
2014-05-19 10:46:39 +02:00
margin-left: 4em;
}
.ptn {
2014-05-19 10:46:39 +02:00
padding-top: 0;
}
.pts {
2014-05-19 10:46:39 +02:00
padding-top: 1em;
}
.ptm {
2014-05-19 10:46:39 +02:00
padding-top: 2em;
}
.ptl {
2014-05-19 10:46:39 +02:00
padding-top: 4em;
}
.prn {
2014-05-19 10:46:39 +02:00
padding-right: 0;
}
.prs {
2014-05-19 10:46:39 +02:00
padding-right: 1em;
}
.prm {
2014-05-19 10:46:39 +02:00
padding-right: 2em;
}
.prl {
2014-05-19 10:46:39 +02:00
padding-right: 4em;
}
.pbn {
2014-05-19 10:46:39 +02:00
padding-bottom: 0;
}
.pbs {
2014-05-19 10:46:39 +02:00
padding-bottom: 1em;
}
.pbm {
2014-05-19 10:46:39 +02:00
padding-bottom: 2em;
}
.pbl {
2014-05-19 10:46:39 +02:00
padding-bottom: 4em;
}
.pln {
2014-05-19 10:46:39 +02:00
padding-left: 0;
}
.pls {
2014-05-19 10:46:39 +02:00
padding-left: 1em;
}
.plm {
2014-05-19 10:46:39 +02:00
padding-left: 2em;
}
.pll {
2014-05-19 10:46:39 +02:00
padding-left: 4em;
2014-05-03 14:38:58 +02:00
}