summer refreshing
This commit is contained in:
raphaelgoetter
parent
a1b4fd6b05
commit
6d1bd3f825
2 changed files with 99 additions and 49 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* www.KNACSS.com V2.6k @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V2.6l @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*/
|
||||
|
||||
|
|
@ -125,6 +125,11 @@ em {
|
|||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
i,
|
||||
b {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
|
|
@ -222,8 +227,8 @@ body > script {display: none !important;}
|
|||
}
|
||||
|
||||
/* float layout */
|
||||
/* module, contains floats (.item is the same) */
|
||||
.mod, .item {
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -294,11 +299,11 @@ img.left, img.right {
|
|||
.w20 { width: 20%; }
|
||||
.w25 { width: 25%; }
|
||||
.w30 { width: 30%; }
|
||||
.w33 { width: 33.333%; }
|
||||
.w33 { width: 33.3333%; }
|
||||
.w40 { width: 40%; }
|
||||
.w50 { width: 50%; }
|
||||
.w60 { width: 60%; }
|
||||
.w66 { width: 66.666%; }
|
||||
.w66 { width: 66.6666%; }
|
||||
.w70 { width: 70%; }
|
||||
.w75 { width: 75%; }
|
||||
.w80 { width: 80%; }
|
||||
|
|
@ -382,18 +387,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
|
||||
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==header */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==sidebar */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==footer */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==forms */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -415,9 +408,15 @@ textarea {
|
|||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==main */
|
||||
/* ==own stylesheet */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Here should go your own CSS styles */
|
||||
/* You can link them with an @import or, better for webperf, just paste them here */
|
||||
|
||||
/* @import url(my-styles.css); */
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==iefix */
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* www.KNACSS.com V2.6i @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V2.6l @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*/
|
||||
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==reset */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -140,6 +139,11 @@ em {
|
|||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
i,
|
||||
b {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
|
|
@ -221,8 +225,8 @@ body > script {display: none !important;}
|
|||
}
|
||||
|
||||
/* float layout */
|
||||
/* module, contains floats (.item is the same) */
|
||||
.mod, .item {
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -345,7 +349,7 @@ img.left, img.right {
|
|||
/* grids */
|
||||
/* ------------------------------ */
|
||||
|
||||
[class*=grid] > * {float: left; } /* direct childrens are floating */
|
||||
[class^=grid] > * {float: left; } /* direct childrens are floating */
|
||||
|
||||
.grid2 > * {.grid(2);}
|
||||
.grid3 > * {.grid(3);}
|
||||
|
|
@ -381,16 +385,69 @@ img.left, img.right {
|
|||
width: (100%-@gutter) * 3 / 4;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==autogrids */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* auto-justified equal grids */
|
||||
|
||||
[class^="autogrid"] {
|
||||
text-align: justify;
|
||||
font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
|
||||
}
|
||||
[class^="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
[class^="autogrid"] > * {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */
|
||||
*display: inline; *zoom: 1; /* ie6 / ie7 hack */
|
||||
}
|
||||
.autogrid2 > * {width: 49.55%}
|
||||
.autogrid3 > * {width: 32.8%}
|
||||
.autogrid4 > * {width: 24.4%}
|
||||
.autogrid5 > * {width: 19.4%}
|
||||
.autogrid6 > * {width: 16%}
|
||||
.autogrid8 > * {width: 11.75%}
|
||||
.autogrid10 > * {width: 9.3%}
|
||||
.autogrid12 > * {width: 7.6%}
|
||||
|
||||
/* Responsiv-o-matic */
|
||||
|
||||
@media (max-width: @largescreen) {
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {width: 32.8%}
|
||||
}
|
||||
@media (max-width: @mediumscreen) {
|
||||
.autogrid3 > *,
|
||||
.autogrid4 > *,
|
||||
.autogrid5 > *,
|
||||
.autogrid6 > *,
|
||||
.autogrid8 > *,
|
||||
.autogrid10 > *,
|
||||
.autogrid12 > * {width: 49.55%}
|
||||
}
|
||||
@media (max-width: @tinyscreen) {
|
||||
[class^="autogrid"] > * {width: 100%}
|
||||
}
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
.w25 { width: 25%; }
|
||||
.w30 { width: 30%; }
|
||||
.w33 { width: 33.333%; }
|
||||
.w33 { width: 33.3333%; }
|
||||
.w40 { width: 40%; }
|
||||
.w50 { width: 50%; }
|
||||
.w60 { width: 60%; }
|
||||
.w66 { width: 66.666%; }
|
||||
.w66 { width: 66.6666%; }
|
||||
.w70 { width: 70%; }
|
||||
.w75 { width: 75%; }
|
||||
.w80 { width: 80%; }
|
||||
|
|
@ -475,18 +532,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|||
/* hidden on mobile */
|
||||
.mobile-hidden { display: block; }
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==header */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==sidebar */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==footer */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==forms */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -508,9 +553,15 @@ textarea {
|
|||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==main */
|
||||
/* ==own stylesheet */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Here should go your own CSS styles */
|
||||
/* You can link them with an @import or, better for webperf, just paste them here */
|
||||
|
||||
/* @import url(my-styles.css); */
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==iefix */
|
||||
/* ----------------------------- */
|
||||
|
|
|
|||
Loading…
Reference in a new issue