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/
|
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -125,6 +125,11 @@ em {
|
||||||
strong {
|
strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
i,
|
||||||
|
b {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
kbd {
|
kbd {
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
|
|
@ -222,8 +227,8 @@ body > script {display: none !important;}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* float layout */
|
/* float layout */
|
||||||
/* module, contains floats (.item is the same) */
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
.mod, .item {
|
.mod {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -294,11 +299,11 @@ img.left, img.right {
|
||||||
.w20 { width: 20%; }
|
.w20 { width: 20%; }
|
||||||
.w25 { width: 25%; }
|
.w25 { width: 25%; }
|
||||||
.w30 { width: 30%; }
|
.w30 { width: 30%; }
|
||||||
.w33 { width: 33.333%; }
|
.w33 { width: 33.3333%; }
|
||||||
.w40 { width: 40%; }
|
.w40 { width: 40%; }
|
||||||
.w50 { width: 50%; }
|
.w50 { width: 50%; }
|
||||||
.w60 { width: 60%; }
|
.w60 { width: 60%; }
|
||||||
.w66 { width: 66.666%; }
|
.w66 { width: 66.6666%; }
|
||||||
.w70 { width: 70%; }
|
.w70 { width: 70%; }
|
||||||
.w75 { width: 75%; }
|
.w75 { width: 75%; }
|
||||||
.w80 { width: 80%; }
|
.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 */
|
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==header */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==sidebar */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==footer */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
/* ==forms */
|
/* ==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 */
|
/* ==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/
|
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -30,7 +30,6 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
/* ==reset */
|
/* ==reset */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
@ -140,6 +139,11 @@ em {
|
||||||
strong {
|
strong {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
i,
|
||||||
|
b {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
kbd {
|
kbd {
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
|
|
@ -221,8 +225,8 @@ body > script {display: none !important;}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* float layout */
|
/* float layout */
|
||||||
/* module, contains floats (.item is the same) */
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
.mod, .item {
|
.mod {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -345,7 +349,7 @@ img.left, img.right {
|
||||||
/* grids */
|
/* grids */
|
||||||
/* ------------------------------ */
|
/* ------------------------------ */
|
||||||
|
|
||||||
[class*=grid] > * {float: left; } /* direct childrens are floating */
|
[class^=grid] > * {float: left; } /* direct childrens are floating */
|
||||||
|
|
||||||
.grid2 > * {.grid(2);}
|
.grid2 > * {.grid(2);}
|
||||||
.grid3 > * {.grid(3);}
|
.grid3 > * {.grid(3);}
|
||||||
|
|
@ -381,16 +385,69 @@ img.left, img.right {
|
||||||
width: (100%-@gutter) * 3 / 4;
|
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) */
|
/* blocks widths (percentage and pixels) */
|
||||||
.w10 { width: 10%; }
|
.w10 { width: 10%; }
|
||||||
.w20 { width: 20%; }
|
.w20 { width: 20%; }
|
||||||
.w25 { width: 25%; }
|
.w25 { width: 25%; }
|
||||||
.w30 { width: 30%; }
|
.w30 { width: 30%; }
|
||||||
.w33 { width: 33.333%; }
|
.w33 { width: 33.3333%; }
|
||||||
.w40 { width: 40%; }
|
.w40 { width: 40%; }
|
||||||
.w50 { width: 50%; }
|
.w50 { width: 50%; }
|
||||||
.w60 { width: 60%; }
|
.w60 { width: 60%; }
|
||||||
.w66 { width: 66.666%; }
|
.w66 { width: 66.6666%; }
|
||||||
.w70 { width: 70%; }
|
.w70 { width: 70%; }
|
||||||
.w75 { width: 75%; }
|
.w75 { width: 75%; }
|
||||||
.w80 { width: 80%; }
|
.w80 { width: 80%; }
|
||||||
|
|
@ -475,18 +532,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||||
/* hidden on mobile */
|
/* hidden on mobile */
|
||||||
.mobile-hidden { display: block; }
|
.mobile-hidden { display: block; }
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==header */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==sidebar */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==footer */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
/* ==forms */
|
/* ==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 */
|
/* ==iefix */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue