skeleton.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. /*
  2. * Skeleton V2.0.4
  3. * Copyright 2014, Dave Gamache
  4. * www.getskeleton.com
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. * 12/29/2014
  8. */
  9. /* Table of contents
  10. ––––––––––––––––––––––––––––––––––––––––––––––––––
  11. - Grid
  12. - Base Styles
  13. - Typography
  14. - Links
  15. - Buttons
  16. - Forms
  17. - Lists
  18. - Code
  19. - Tables
  20. - Spacing
  21. - Utilities
  22. - Clearing
  23. - Media Queries
  24. */
  25. /* Grid
  26. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  27. .container {
  28. position: relative;
  29. width: 100%;
  30. max-width: 960px;
  31. margin: 0 auto;
  32. padding: 0 20px;
  33. box-sizing: border-box; }
  34. .column,
  35. .columns {
  36. width: 100%;
  37. float: left;
  38. box-sizing: border-box; }
  39. /* For devices larger than 400px */
  40. @media (min-width: 400px) {
  41. .container {
  42. width: 85%;
  43. padding: 0; }
  44. }
  45. /* For devices larger than 550px */
  46. @media (min-width: 550px) {
  47. .container {
  48. width: 80%; }
  49. .column,
  50. .columns {
  51. margin-left: 4%; }
  52. .column:first-child,
  53. .columns:first-child {
  54. margin-left: 0; }
  55. .one.column,
  56. .one.columns { width: 4.66666666667%; }
  57. .two.columns { width: 13.3333333333%; }
  58. .three.columns { width: 22%; }
  59. .four.columns { width: 30.6666666667%; }
  60. .five.columns { width: 39.3333333333%; }
  61. .six.columns { width: 48%; }
  62. .seven.columns { width: 56.6666666667%; }
  63. .eight.columns { width: 65.3333333333%; }
  64. .nine.columns { width: 74.0%; }
  65. .ten.columns { width: 82.6666666667%; }
  66. .eleven.columns { width: 91.3333333333%; }
  67. .twelve.columns { width: 100%; margin-left: 0; }
  68. .one-third.column { width: 30.6666666667%; }
  69. .two-thirds.column { width: 65.3333333333%; }
  70. .one-half.column { width: 48%; }
  71. /* Offsets */
  72. .offset-by-one.column,
  73. .offset-by-one.columns { margin-left: 8.66666666667%; }
  74. .offset-by-two.column,
  75. .offset-by-two.columns { margin-left: 17.3333333333%; }
  76. .offset-by-three.column,
  77. .offset-by-three.columns { margin-left: 26%; }
  78. .offset-by-four.column,
  79. .offset-by-four.columns { margin-left: 34.6666666667%; }
  80. .offset-by-five.column,
  81. .offset-by-five.columns { margin-left: 43.3333333333%; }
  82. .offset-by-six.column,
  83. .offset-by-six.columns { margin-left: 52%; }
  84. .offset-by-seven.column,
  85. .offset-by-seven.columns { margin-left: 60.6666666667%; }
  86. .offset-by-eight.column,
  87. .offset-by-eight.columns { margin-left: 69.3333333333%; }
  88. .offset-by-nine.column,
  89. .offset-by-nine.columns { margin-left: 78.0%; }
  90. .offset-by-ten.column,
  91. .offset-by-ten.columns { margin-left: 86.6666666667%; }
  92. .offset-by-eleven.column,
  93. .offset-by-eleven.columns { margin-left: 95.3333333333%; }
  94. .offset-by-one-third.column,
  95. .offset-by-one-third.columns { margin-left: 34.6666666667%; }
  96. .offset-by-two-thirds.column,
  97. .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
  98. .offset-by-one-half.column,
  99. .offset-by-one-half.columns { margin-left: 52%; }
  100. }
  101. /* Base Styles
  102. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  103. /* NOTE
  104. html is set to 62.5% so that all the REM measurements throughout Skeleton
  105. are based on 10px sizing. So basically 1.5rem = 15px :) */
  106. html {
  107. font-size: 62.5%; }
  108. body {
  109. font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  110. line-height: 1.6;
  111. font-weight: 400;
  112. font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  113. color: #222; }
  114. /* Typography
  115. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  116. h1, h2, h3, h4, h5, h6 {
  117. margin-top: 0;
  118. margin-bottom: 2rem;
  119. font-weight: 300; }
  120. h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
  121. h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
  122. h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
  123. h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
  124. h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
  125. h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
  126. /* Larger than phablet */
  127. @media (min-width: 550px) {
  128. h1 { font-size: 5.0rem; }
  129. h2 { font-size: 4.2rem; }
  130. h3 { font-size: 3.6rem; }
  131. h4 { font-size: 3.0rem; }
  132. h5 { font-size: 2.4rem; }
  133. h6 { font-size: 1.5rem; }
  134. }
  135. p {
  136. margin-top: 0; }
  137. /* Links
  138. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  139. a {
  140. color: #1EAEDB; }
  141. a:hover {
  142. color: #0FA0CE; }
  143. /* Buttons
  144. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  145. .button,
  146. button,
  147. input[type="submit"],
  148. input[type="reset"],
  149. input[type="button"] {
  150. display: inline-block;
  151. height: 38px;
  152. padding: 0 30px;
  153. color: #555;
  154. text-align: center;
  155. font-size: 11px;
  156. font-weight: 600;
  157. line-height: 38px;
  158. letter-spacing: .1rem;
  159. text-transform: uppercase;
  160. text-decoration: none;
  161. white-space: nowrap;
  162. background-color: transparent;
  163. border-radius: 4px;
  164. border: 1px solid #bbb;
  165. cursor: pointer;
  166. box-sizing: border-box; }
  167. .button:hover,
  168. button:hover,
  169. input[type="submit"]:hover,
  170. input[type="reset"]:hover,
  171. input[type="button"]:hover,
  172. .button:focus,
  173. button:focus,
  174. input[type="submit"]:focus,
  175. input[type="reset"]:focus,
  176. input[type="button"]:focus {
  177. color: #333;
  178. border-color: #888;
  179. outline: 0; }
  180. .button.button-primary,
  181. button.button-primary,
  182. input[type="submit"].button-primary,
  183. input[type="reset"].button-primary,
  184. input[type="button"].button-primary {
  185. color: #FFF;
  186. background-color: #33C3F0;
  187. border-color: #33C3F0; }
  188. .button.button-primary:hover,
  189. button.button-primary:hover,
  190. input[type="submit"].button-primary:hover,
  191. input[type="reset"].button-primary:hover,
  192. input[type="button"].button-primary:hover,
  193. .button.button-primary:focus,
  194. button.button-primary:focus,
  195. input[type="submit"].button-primary:focus,
  196. input[type="reset"].button-primary:focus,
  197. input[type="button"].button-primary:focus {
  198. color: #FFF;
  199. background-color: #1EAEDB;
  200. border-color: #1EAEDB; }
  201. /* Forms
  202. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  203. input[type="email"],
  204. input[type="number"],
  205. input[type="search"],
  206. input[type="text"],
  207. input[type="tel"],
  208. input[type="url"],
  209. input[type="password"],
  210. textarea,
  211. select {
  212. height: 38px;
  213. padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  214. background-color: #fff;
  215. border: 1px solid #D1D1D1;
  216. border-radius: 4px;
  217. box-shadow: none;
  218. box-sizing: border-box; }
  219. /* Removes awkward default styles on some inputs for iOS */
  220. input[type="email"],
  221. input[type="number"],
  222. input[type="search"],
  223. input[type="text"],
  224. input[type="tel"],
  225. input[type="url"],
  226. input[type="password"],
  227. textarea {
  228. -webkit-appearance: none;
  229. -moz-appearance: none;
  230. appearance: none; }
  231. textarea {
  232. min-height: 65px;
  233. padding-top: 6px;
  234. padding-bottom: 6px; }
  235. input[type="email"]:focus,
  236. input[type="number"]:focus,
  237. input[type="search"]:focus,
  238. input[type="text"]:focus,
  239. input[type="tel"]:focus,
  240. input[type="url"]:focus,
  241. input[type="password"]:focus,
  242. textarea:focus,
  243. select:focus {
  244. border: 1px solid #33C3F0;
  245. outline: 0; }
  246. label,
  247. legend {
  248. display: block;
  249. margin-bottom: .5rem;
  250. font-weight: 600; }
  251. fieldset {
  252. padding: 0;
  253. border-width: 0; }
  254. input[type="checkbox"],
  255. input[type="radio"] {
  256. display: inline; }
  257. label > .label-body {
  258. display: inline-block;
  259. margin-left: .5rem;
  260. font-weight: normal; }
  261. /* Lists
  262. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  263. ul {
  264. list-style: circle inside; }
  265. ol {
  266. list-style: decimal inside; }
  267. ol, ul {
  268. padding-left: 0;
  269. margin-top: 0; }
  270. ul ul,
  271. ul ol,
  272. ol ol,
  273. ol ul {
  274. margin: 1.5rem 0 1.5rem 3rem;
  275. font-size: 90%; }
  276. li {
  277. margin-bottom: 1rem; }
  278. /* Code
  279. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  280. code {
  281. padding: .2rem .5rem;
  282. margin: 0 .2rem;
  283. font-size: 90%;
  284. white-space: nowrap;
  285. background: #F1F1F1;
  286. border: 1px solid #E1E1E1;
  287. border-radius: 4px; }
  288. pre > code {
  289. display: block;
  290. padding: 1rem 1.5rem;
  291. white-space: pre; }
  292. /* Tables
  293. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  294. th,
  295. td {
  296. padding: 12px 15px;
  297. text-align: left;
  298. border-bottom: 1px solid #E1E1E1; }
  299. th:first-child,
  300. td:first-child {
  301. padding-left: 0; }
  302. th:last-child,
  303. td:last-child {
  304. padding-right: 0; }
  305. /* Spacing
  306. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  307. button,
  308. .button {
  309. margin-bottom: 1rem; }
  310. input,
  311. textarea,
  312. select,
  313. fieldset {
  314. margin-bottom: 1.5rem; }
  315. pre,
  316. blockquote,
  317. dl,
  318. figure,
  319. table,
  320. p,
  321. ul,
  322. ol,
  323. form {
  324. margin-bottom: 2.5rem; }
  325. /* Utilities
  326. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  327. .u-full-width {
  328. width: 100%;
  329. box-sizing: border-box; }
  330. .u-max-full-width {
  331. max-width: 100%;
  332. box-sizing: border-box; }
  333. .u-pull-right {
  334. float: right; }
  335. .u-pull-left {
  336. float: left; }
  337. /* Misc
  338. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  339. hr {
  340. margin-top: 3rem;
  341. margin-bottom: 3.5rem;
  342. border-width: 0;
  343. border-top: 1px solid #E1E1E1; }
  344. /* Clearing
  345. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  346. /* Self Clearing Goodness */
  347. .container:after,
  348. .row:after,
  349. .u-cf {
  350. content: "";
  351. display: table;
  352. clear: both; }
  353. /* Media Queries
  354. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  355. /*
  356. Note: The best way to structure the use of media queries is to create the queries
  357. near the relevant code. For example, if you wanted to change the styles for buttons
  358. on small devices, paste the mobile query code up in the buttons section and style it
  359. there.
  360. */
  361. /* Larger than mobile */
  362. @media (min-width: 400px) {}
  363. /* Larger than phablet (also point when grid becomes active) */
  364. @media (min-width: 550px) {}
  365. /* Larger than tablet */
  366. @media (min-width: 750px) {}
  367. /* Larger than desktop */
  368. @media (min-width: 1000px) {}
  369. /* Larger than Desktop HD */
  370. @media (min-width: 1200px) {}