]>
Commit | Line | Data |
---|---|---|
943ac3c7 NL |
1 | /* |
2 | Ratatouille mini Framework css by Thomas LEBEAU | |
3 | Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations | |
4 | and normalize.css | |
5 | */ | |
6 | ||
7 | * { | |
8 | -webkit-box-sizing: border-box; | |
9 | -moz-box-sizing: border-box; | |
10 | box-sizing: border-box; | |
11 | } | |
12 | ||
13 | html { | |
14 | font-family: sans-serif; /* 1 */ | |
15 | -ms-text-size-adjust: 100%; /* 2 */ | |
16 | -webkit-text-size-adjust: 100%; /* 2 */ | |
17 | } | |
18 | ||
19 | body { | |
20 | font-size: 1em; | |
21 | line-height:1.5; | |
22 | margin: 0; | |
23 | } | |
24 | ||
25 | /* ========================================================================== | |
26 | Mise en forme | |
27 | ========================================================================== */ | |
28 | ||
29 | h1:first-child, | |
30 | h2:first-child, | |
31 | h3:first-child, | |
32 | h4:first-child, | |
33 | h5:first-child, | |
34 | h6:first-child, | |
35 | p:first-child, | |
36 | ul:first-child, | |
37 | ol:first-child, | |
38 | dl:first-child{ | |
39 | margin-top: 0; | |
40 | } | |
41 | ||
42 | code, | |
43 | kbd, | |
44 | pre, | |
45 | samp { | |
46 | font-family: monospace, serif; | |
47 | } | |
48 | ||
49 | pre { | |
50 | white-space: pre-wrap; | |
51 | } | |
52 | ||
53 | ||
54 | .upper { | |
55 | text-transform: uppercase; | |
56 | } | |
57 | ||
58 | .bold { | |
59 | font-weight: bold; | |
60 | } | |
61 | ||
62 | .inner { | |
63 | margin: 0 auto; | |
64 | max-width: 61.25em;/*980px*/ | |
65 | } | |
66 | ||
67 | table, img { | |
68 | max-width: 100%; | |
69 | height :auto; | |
70 | } | |
71 | ||
72 | iframe { | |
73 | max-width: 100%; | |
74 | } | |
75 | ||
76 | .fl { | |
77 | float: left; | |
78 | } | |
79 | ||
80 | .fr { | |
81 | float: right; | |
82 | } | |
83 | ||
84 | table { | |
85 | border-collapse: collapse; | |
86 | } | |
87 | ||
88 | figure { | |
89 | margin: 0; | |
90 | } | |
91 | ||
92 | button, | |
93 | input, | |
94 | select, | |
95 | textarea { | |
96 | font-family: inherit; | |
97 | font-size: 100%; | |
98 | margin: 0; | |
99 | } | |
100 | ||
101 | input[type="search"] { | |
102 | -webkit-appearance: textfield; | |
103 | } | |
104 | ||
105 | /* ========================================================================== | |
106 | Mise en page | |
107 | ========================================================================== */ | |
108 | ||
109 | .dib { | |
110 | display: inline-block; | |
111 | vertical-align: middle; | |
112 | } | |
113 | ||
114 | .dnone { | |
115 | display: none; | |
116 | } | |
117 | ||
118 | .dtable { display:table } | |
119 | ||
120 | .dtable > * { display:table-row; } | |
121 | ||
122 | .dtable > * > * { display:table-cell; } | |
123 | ||
124 | .element-invisible { | |
125 | border: 0; | |
126 | clip: rect(0 0 0 0); | |
127 | height: 1px; | |
128 | margin: -1px; | |
129 | overflow: hidden; | |
130 | padding: 0; | |
131 | position: absolute; | |
132 | width: 1px; | |
133 | } | |
134 | ||
135 | .small { | |
136 | font-size:0.8em; | |
137 | } | |
138 | ||
139 | .big { | |
140 | font-size: 1.2em; | |
141 | } | |
142 | ||
143 | /*Width*/ | |
144 | ||
145 | .w100 { width:100%; } | |
146 | .w90 { width:90%; } | |
147 | .w80 { width:80%; } | |
148 | .w70 { width:70%; } | |
149 | .w60 { width:60%; } | |
150 | .w50 { width:50%; } | |
151 | .w40 { width:40%; } | |
152 | .w30 { width:30%; } | |
153 | .w20 { width:20%; } | |
154 | .w10 { width:10%; } | |
155 | ||
156 | ||
157 | /* ========================================================================== | |
158 | Internet Explorer | |
159 | ========================================================================== */ | |
160 | ||
161 | /*IE8 and IE9*/ | |
162 | ||
163 | article, | |
164 | aside, | |
165 | details, | |
166 | figcaption, | |
167 | figure, | |
168 | footer, | |
169 | header, | |
170 | hgroup, | |
171 | main, | |
172 | nav, | |
173 | section, | |
174 | summary { | |
175 | display: block; | |
176 | } | |
177 | ||
178 | /*IE8 and IE9*/ | |
179 | ||
180 | audio, | |
181 | canvas, | |
182 | video { | |
183 | display: inline-block; | |
184 | } | |
185 | ||
186 | @media screen and (-webkit-min-device-pixel-ratio:0){ | |
187 | select{ | |
188 | -webkit-appearance: none; | |
189 | border-radius: 0; | |
190 | } | |
191 | } | |
192 | ||
193 | /* ========================================================================== | |
194 | Medias Queries | |
195 | ========================================================================== */ | |
196 | ||
197 | /*Desktop 1080px*/ | |
198 | ||
199 | @media screen and (max-width: 67.50em) { | |
200 | } | |
201 | ||
202 | /*Tablet 800px*/ | |
203 | ||
204 | @media screen and (max-width: 50em) { | |
205 | } | |
206 | ||
207 | /*Mobile 640px*/ | |
208 | ||
209 | @media screen and (max-width: 40em) { | |
210 | } | |
211 |