stylesheet.css 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. /* http://meyerweb.com/eric/tools/css/reset/
  2. v2.0 | 20110126
  3. License: none (public domain)
  4. */
  5. html, body, div, span, applet, object, iframe,
  6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7. a, abbr, acronym, address, big, cite, code,
  8. del, dfn, em, img, ins, kbd, q, s, samp,
  9. small, strike, strong, sub, sup, tt, var,
  10. b, u, i, center,
  11. dl, dt, dd, ol, ul, li,
  12. fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td,
  14. article, aside, canvas, details, embed,
  15. figure, figcaption, footer, header, hgroup,
  16. menu, nav, output, ruby, section, summary,
  17. time, mark, audio, video {
  18. margin: 0;
  19. padding: 0;
  20. border: 0;
  21. font-size: 100%;
  22. font: inherit;
  23. vertical-align: baseline;
  24. }
  25. /* HTML5 display-role reset for older browsers */
  26. article, aside, details, figcaption, figure,
  27. footer, header, hgroup, menu, nav, section {
  28. display: block;
  29. }
  30. body {
  31. line-height: 1;
  32. }
  33. ol, ul {
  34. list-style: none;
  35. }
  36. blockquote, q {
  37. quotes: none;
  38. }
  39. blockquote:before, blockquote:after,
  40. q:before, q:after {
  41. content: '';
  42. content: none;
  43. }
  44. table {
  45. border-collapse: collapse;
  46. border-spacing: 0;
  47. }
  48. /* LAYOUT STYLES */
  49. body {
  50. font-size: 15px;
  51. line-height: 1.5;
  52. background: #fafafa url(../images/body-bg.jpg) 0 0 repeat;
  53. font-family: 'Helvetica Neue', Helvetica, Arial, serif;
  54. font-weight: 400;
  55. color: #666;
  56. }
  57. a {
  58. color: #2879d0;
  59. }
  60. a:hover {
  61. color: #2268b2;
  62. }
  63. header {
  64. padding-top: 40px;
  65. padding-bottom: 40px;
  66. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  67. background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x;
  68. border-bottom: solid 1px #275da1;
  69. }
  70. header h1 {
  71. letter-spacing: -1px;
  72. font-size: 72px;
  73. color: #fff;
  74. line-height: 1;
  75. margin-bottom: 0.2em;
  76. width: 540px;
  77. }
  78. header h2 {
  79. font-size: 26px;
  80. color: #9ddcff;
  81. font-weight: normal;
  82. line-height: 1.3;
  83. width: 540px;
  84. letter-spacing: 0;
  85. }
  86. .inner {
  87. position: relative;
  88. width: 940px;
  89. margin: 0 auto;
  90. }
  91. #content-wrapper {
  92. border-top: solid 1px #fff;
  93. padding-top: 30px;
  94. }
  95. #main-content {
  96. width: 690px;
  97. float: left;
  98. }
  99. #main-content img {
  100. max-width: 100%;
  101. }
  102. aside#sidebar {
  103. width: 200px;
  104. padding-left: 20px;
  105. min-height: 504px;
  106. float: right;
  107. background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat;
  108. font-size: 12px;
  109. line-height: 1.3;
  110. }
  111. aside#sidebar p.repo-owner,
  112. aside#sidebar p.repo-owner a {
  113. font-weight: bold;
  114. }
  115. #downloads {
  116. margin-bottom: 40px;
  117. }
  118. a.button {
  119. width: 134px;
  120. height: 58px;
  121. line-height: 1.2;
  122. font-size: 23px;
  123. color: #fff;
  124. padding-left: 68px;
  125. padding-top: 22px;
  126. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  127. }
  128. a.button small {
  129. display: block;
  130. font-size: 11px;
  131. }
  132. header a.button {
  133. position: absolute;
  134. right: 0;
  135. top: 0;
  136. background: transparent url(../images/github-button.png) 0 0 no-repeat;
  137. }
  138. aside a.button {
  139. width: 138px;
  140. padding-left: 64px;
  141. display: block;
  142. background: transparent url(../images/download-button.png) 0 0 no-repeat;
  143. margin-bottom: 20px;
  144. font-size: 21px;
  145. }
  146. code, pre {
  147. font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  148. color: #222;
  149. margin-bottom: 30px;
  150. font-size: 13px;
  151. }
  152. code {
  153. background-color: #f2f8fc;
  154. border: solid 1px #dbe7f3;
  155. padding: 0 3px;
  156. }
  157. pre {
  158. padding: 20px;
  159. background: #fff;
  160. text-shadow: none;
  161. overflow: auto;
  162. border: solid 1px #f2f2f2;
  163. }
  164. pre code {
  165. color: #2879d0;
  166. background-color: #fff;
  167. border: none;
  168. padding: 0;
  169. }
  170. ul, ol, dl {
  171. margin-bottom: 20px;
  172. }
  173. /* COMMON STYLES */
  174. hr {
  175. height: 1px;
  176. line-height: 1px;
  177. margin-top: 1em;
  178. padding-bottom: 1em;
  179. border: none;
  180. background: transparent url('../images/hr.png') 0 0 no-repeat;
  181. }
  182. table {
  183. width: 100%;
  184. border: 1px solid #ebebeb;
  185. }
  186. th {
  187. font-weight: 500;
  188. }
  189. td {
  190. border: 1px solid #ebebeb;
  191. text-align: center;
  192. font-weight: 300;
  193. }
  194. form {
  195. background: #f2f2f2;
  196. padding: 20px;
  197. }
  198. /* GENERAL ELEMENT TYPE STYLES */
  199. #main-content h1 {
  200. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  201. font-size: 2.8em;
  202. letter-spacing: -1px;
  203. color: #474747;
  204. }
  205. #main-content h1:before {
  206. content: "/";
  207. color: #9ddcff;
  208. padding-right: 0.3em;
  209. margin-left: -0.9em;
  210. }
  211. #main-content h2 {
  212. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  213. font-size: 22px;
  214. font-weight: bold;
  215. margin-bottom: 8px;
  216. color: #474747;
  217. }
  218. #main-content h2:before {
  219. content: "//";
  220. color: #9ddcff;
  221. padding-right: 0.3em;
  222. margin-left: -1.5em;
  223. }
  224. #main-content h3 {
  225. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  226. font-size: 18px;
  227. font-weight: bold;
  228. margin-top: 24px;
  229. margin-bottom: 8px;
  230. color: #474747;
  231. }
  232. #main-content h3:before {
  233. content: "///";
  234. color: #9ddcff;
  235. padding-right: 0.3em;
  236. margin-left: -2em;
  237. }
  238. #main-content h4 {
  239. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  240. font-size: 15px;
  241. font-weight: bold;
  242. color: #474747;
  243. }
  244. h4:before {
  245. content: "////";
  246. color: #9ddcff;
  247. padding-right: 0.3em;
  248. margin-left: -2.8em;
  249. }
  250. #main-content h5 {
  251. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  252. font-size: 14px;
  253. color: #474747;
  254. }
  255. h5:before {
  256. content: "/////";
  257. color: #9ddcff;
  258. padding-right: 0.3em;
  259. margin-left: -3.2em;
  260. }
  261. #main-content h6 {
  262. font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
  263. font-size: .8em;
  264. color: #474747;
  265. }
  266. h6:before {
  267. content: "//////";
  268. color: #9ddcff;
  269. padding-right: 0.3em;
  270. margin-left: -3.7em;
  271. }
  272. p {
  273. margin-bottom: 20px;
  274. }
  275. a {
  276. text-decoration: none;
  277. }
  278. p a {
  279. font-weight: 400;
  280. }
  281. blockquote {
  282. font-size: 1.6em;
  283. border-left: 10px solid #e9e9e9;
  284. margin-bottom: 20px;
  285. padding: 0 0 0 30px;
  286. }
  287. ul {
  288. list-style: disc inside;
  289. padding-left: 20px;
  290. }
  291. ol {
  292. list-style: decimal inside;
  293. padding-left: 3px;
  294. }
  295. dl dd {
  296. font-style: italic;
  297. font-weight: 100;
  298. }
  299. footer {
  300. background: transparent url('../images/hr.png') 0 0 no-repeat;
  301. margin-top: 40px;
  302. padding-top: 20px;
  303. padding-bottom: 30px;
  304. font-size: 13px;
  305. color: #aaa;
  306. }
  307. footer a {
  308. color: #666;
  309. }
  310. footer a:hover {
  311. color: #444;
  312. }
  313. /* MISC */
  314. .clearfix:after {
  315. clear: both;
  316. content: '.';
  317. display: block;
  318. visibility: hidden;
  319. height: 0;
  320. }
  321. .clearfix {display: inline-block;}
  322. * html .clearfix {height: 1%;}
  323. .clearfix {display: block;}
  324. /* #Media Queries
  325. ================================================== */
  326. /* Smaller than standard 960 (devices and browsers) */
  327. @media only screen and (max-width: 959px) {}
  328. /* Tablet Portrait size to standard 960 (devices and browsers) */
  329. @media only screen and (min-width: 768px) and (max-width: 959px) {
  330. .inner {
  331. width: 740px;
  332. }
  333. header h1, header h2 {
  334. width: 340px;
  335. }
  336. header h1 {
  337. font-size: 60px;
  338. }
  339. header h2 {
  340. font-size: 30px;
  341. }
  342. #main-content {
  343. width: 490px;
  344. }
  345. #main-content h1:before,
  346. #main-content h2:before,
  347. #main-content h3:before,
  348. #main-content h4:before,
  349. #main-content h5:before,
  350. #main-content h6:before {
  351. content: none;
  352. padding-right: 0;
  353. margin-left: 0;
  354. }
  355. }
  356. /* All Mobile Sizes (devices and browser) */
  357. @media only screen and (max-width: 767px) {
  358. .inner {
  359. width: 93%;
  360. }
  361. header {
  362. padding: 20px 0;
  363. }
  364. header .inner {
  365. position: relative;
  366. }
  367. header h1, header h2 {
  368. width: 100%;
  369. }
  370. header h1 {
  371. font-size: 48px;
  372. }
  373. header h2 {
  374. font-size: 24px;
  375. }
  376. header a.button {
  377. background-image: none;
  378. width: auto;
  379. height: auto;
  380. display: inline-block;
  381. margin-top: 15px;
  382. padding: 5px 10px;
  383. position: relative;
  384. text-align: center;
  385. font-size: 13px;
  386. line-height: 1;
  387. background-color: #9ddcff;
  388. color: #2879d0;
  389. -moz-border-radius: 5px;
  390. -webkit-border-radius: 5px;
  391. border-radius: 5px;
  392. }
  393. header a.button small {
  394. font-size: 13px;
  395. display: inline;
  396. }
  397. #main-content,
  398. aside#sidebar {
  399. float: none;
  400. width: 100% ! important;
  401. }
  402. aside#sidebar {
  403. background-image: none;
  404. margin-top: 20px;
  405. border-top: solid 1px #ddd;
  406. padding: 20px 0;
  407. min-height: 0;
  408. }
  409. aside#sidebar a.button {
  410. display: none;
  411. }
  412. #main-content h1:before,
  413. #main-content h2:before,
  414. #main-content h3:before,
  415. #main-content h4:before,
  416. #main-content h5:before,
  417. #main-content h6:before {
  418. content: none;
  419. padding-right: 0;
  420. margin-left: 0;
  421. }
  422. }
  423. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  424. @media only screen and (min-width: 480px) and (max-width: 767px) {}
  425. /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  426. @media only screen and (max-width: 479px) {}