poole.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. /*
  2. * ___
  3. * /\_ \
  4. * _____ ___ ___\//\ \ __
  5. * /\ '__`\ / __`\ / __`\\ \ \ /'__`\
  6. * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
  7. * \ \ ,__/\ \____/\ \____//\____\ \____\
  8. * \ \ \/ \/___/ \/___/ \/____/\/____/
  9. * \ \_\
  10. * \/_/
  11. *
  12. * Designed, built, and released under MIT license by @mdo. Learn more at
  13. * https://github.com/poole/poole.
  14. */
  15. /*
  16. * Contents
  17. *
  18. * Body resets
  19. * Custom type
  20. * Messages
  21. * Container
  22. * Masthead
  23. * Posts and pages
  24. * Pagination
  25. * Reverse layout
  26. * Themes
  27. */
  28. /*
  29. * Body resets
  30. *
  31. * Update the foundational and global aspects of the page.
  32. */
  33. * {
  34. -webkit-box-sizing: border-box;
  35. -moz-box-sizing: border-box;
  36. box-sizing: border-box;
  37. }
  38. html,
  39. body {
  40. margin: 0;
  41. padding: 0;
  42. }
  43. html {
  44. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  45. font-size: 16px;
  46. line-height: 1.5;
  47. }
  48. @media (min-width: 38em) {
  49. html {
  50. font-size: 20px;
  51. }
  52. }
  53. body {
  54. color: #515151;
  55. background-color: #fff;
  56. -webkit-text-size-adjust: 100%;
  57. -ms-text-size-adjust: 100%;
  58. }
  59. /* No `:visited` state is required by default (browsers will use `a`) */
  60. a {
  61. color: #268bd2;
  62. text-decoration: none;
  63. }
  64. a strong {
  65. color: inherit;
  66. }
  67. /* `:focus` is linked to `:hover` for basic accessibility */
  68. a:hover,
  69. a:focus {
  70. text-decoration: underline;
  71. }
  72. /* Headings */
  73. h1, h2, h3, h4, h5, h6 {
  74. margin-bottom: .5rem;
  75. font-weight: bold;
  76. line-height: 1.25;
  77. color: #313131;
  78. text-rendering: optimizeLegibility;
  79. }
  80. h1 {
  81. font-size: 2rem;
  82. }
  83. h2 {
  84. margin-top: 1rem;
  85. font-size: 1.5rem;
  86. }
  87. h3 {
  88. margin-top: 1.5rem;
  89. font-size: 1.25rem;
  90. }
  91. h4, h5, h6 {
  92. margin-top: 1rem;
  93. font-size: 1rem;
  94. }
  95. /* Body text */
  96. p {
  97. margin-top: 0;
  98. margin-bottom: 1rem;
  99. }
  100. strong {
  101. color: #303030;
  102. }
  103. /* Lists */
  104. ul, ol, dl {
  105. margin-top: 0;
  106. margin-bottom: 1rem;
  107. }
  108. dt {
  109. font-weight: bold;
  110. }
  111. dd {
  112. margin-bottom: .5rem;
  113. }
  114. /* Misc */
  115. hr {
  116. position: relative;
  117. margin: 1.5rem 0;
  118. border: 0;
  119. border-top: 1px solid #eee;
  120. border-bottom: 1px solid #fff;
  121. }
  122. abbr {
  123. font-size: 85%;
  124. font-weight: bold;
  125. color: #555;
  126. text-transform: uppercase;
  127. }
  128. abbr[title] {
  129. cursor: help;
  130. border-bottom: 1px dotted #e5e5e5;
  131. }
  132. /* Code */
  133. code,
  134. pre {
  135. font-family: Menlo, Monaco, "Courier New", monospace;
  136. }
  137. code {
  138. padding: .25em .5em;
  139. font-size: 85%;
  140. color: #bf616a;
  141. background-color: #f9f9f9;
  142. border-radius: 3px;
  143. }
  144. pre {
  145. display: block;
  146. margin-top: 0;
  147. margin-bottom: 1rem;
  148. padding: 1rem;
  149. font-size: .8rem;
  150. line-height: 1.4;
  151. white-space: pre;
  152. white-space: pre-wrap;
  153. word-break: break-all;
  154. word-wrap: break-word;
  155. background-color: #f9f9f9;
  156. }
  157. pre code {
  158. padding: 0;
  159. font-size: 100%;
  160. color: inherit;
  161. background-color: transparent;
  162. }
  163. /* Pygments via Jekyll */
  164. .highlight {
  165. margin-bottom: 1rem;
  166. border-radius: 4px;
  167. }
  168. .highlight pre {
  169. margin-bottom: 0;
  170. }
  171. /* Gist via GitHub Pages */
  172. .gist .gist-file {
  173. font-family: Menlo, Monaco, "Courier New", monospace !important;
  174. }
  175. .gist .markdown-body {
  176. padding: 15px;
  177. }
  178. .gist pre {
  179. padding: 0;
  180. background-color: transparent;
  181. }
  182. .gist .gist-file .gist-data {
  183. font-size: .8rem !important;
  184. line-height: 1.4;
  185. }
  186. .gist code {
  187. padding: 0;
  188. color: inherit;
  189. background-color: transparent;
  190. border-radius: 0;
  191. }
  192. /* Quotes */
  193. blockquote {
  194. padding: .5rem 1rem;
  195. margin: .8rem 0;
  196. color: #7a7a7a;
  197. border-left: .25rem solid #e5e5e5;
  198. }
  199. blockquote p:last-child {
  200. margin-bottom: 0;
  201. }
  202. @media (min-width: 30em) {
  203. blockquote {
  204. padding-right: 5rem;
  205. padding-left: 1.25rem;
  206. }
  207. }
  208. img {
  209. display: block;
  210. max-width: 100%;
  211. margin: 0 0 1rem;
  212. border-radius: 5px;
  213. }
  214. /* Tables */
  215. table {
  216. margin-bottom: 1rem;
  217. width: 100%;
  218. border: 1px solid #e5e5e5;
  219. border-collapse: collapse;
  220. }
  221. td,
  222. th {
  223. padding: .25rem .5rem;
  224. border: 1px solid #e5e5e5;
  225. }
  226. tbody tr:nth-child(odd) td,
  227. tbody tr:nth-child(odd) th {
  228. background-color: #f9f9f9;
  229. }
  230. /*
  231. * Custom type
  232. *
  233. * Extend paragraphs with `.lead` for larger introductory text.
  234. */
  235. .lead {
  236. font-size: 1.25rem;
  237. font-weight: 300;
  238. }
  239. /*
  240. * Messages
  241. *
  242. * Show alert messages to users. You may add it to single elements like a `<p>`,
  243. * or to a parent if there are multiple elements to show.
  244. */
  245. .message {
  246. margin-bottom: 1rem;
  247. padding: 1rem;
  248. color: #717171;
  249. background-color: #f9f9f9;
  250. }
  251. /*
  252. * Container
  253. *
  254. * Center the page content.
  255. */
  256. .container {
  257. max-width: 38rem;
  258. padding-left: 1rem;
  259. padding-right: 1rem;
  260. margin-left: auto;
  261. margin-right: auto;
  262. }
  263. /*
  264. * Masthead
  265. *
  266. * Super small header above the content for site name and short description.
  267. */
  268. .masthead {
  269. padding-top: 1rem;
  270. padding-bottom: 1rem;
  271. margin-bottom: 3rem;
  272. }
  273. .masthead-title {
  274. margin-top: 0;
  275. margin-bottom: 0;
  276. color: #505050;
  277. }
  278. .masthead-title a {
  279. color: #505050;
  280. }
  281. .masthead-title small {
  282. font-size: 75%;
  283. font-weight: 400;
  284. color: #c0c0c0;
  285. letter-spacing: 0;
  286. }
  287. /*
  288. * Posts and pages
  289. *
  290. * Each post is wrapped in `.post` and is used on default and post layouts. Each
  291. * page is wrapped in `.page` and is only used on the page layout.
  292. */
  293. .page,
  294. .post {
  295. margin-bottom: 4em;
  296. }
  297. /* Blog post or page title */
  298. .page-title,
  299. .post-title,
  300. .post-title a {
  301. color: #303030;
  302. }
  303. .page-title,
  304. .post-title {
  305. margin-top: 0;
  306. }
  307. /* Meta data line below post title */
  308. .post-date {
  309. display: block;
  310. margin-top: -.5rem;
  311. margin-bottom: 1rem;
  312. color: #9a9a9a;
  313. }
  314. /* Related posts */
  315. .related {
  316. padding-top: 2rem;
  317. padding-bottom: 2rem;
  318. border-top: 1px solid #eee;
  319. }
  320. .related-posts {
  321. padding-left: 0;
  322. list-style: none;
  323. }
  324. .related-posts h3 {
  325. margin-top: 0;
  326. }
  327. .related-posts li small {
  328. font-size: 75%;
  329. color: #999;
  330. }
  331. .related-posts li a:hover {
  332. color: #268bd2;
  333. text-decoration: none;
  334. }
  335. .related-posts li a:hover small {
  336. color: inherit;
  337. }
  338. /*
  339. * Pagination
  340. *
  341. * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
  342. * there are no more previous or next posts to show.
  343. */
  344. .pagination {
  345. overflow: hidden; /* clearfix */
  346. margin-left: -1rem;
  347. margin-right: -1rem;
  348. font-family: "PT Sans", Helvetica, Arial, sans-serif;
  349. color: #ccc;
  350. text-align: center;
  351. }
  352. /* Pagination items can be `span`s or `a`s */
  353. .pagination-item {
  354. display: block;
  355. padding: 1rem;
  356. border: 1px solid #eee;
  357. }
  358. .pagination-item:first-child {
  359. margin-bottom: -1px;
  360. }
  361. /* Only provide a hover state for linked pagination items */
  362. a.pagination-item:hover {
  363. background-color: #f5f5f5;
  364. }
  365. @media (min-width: 30em) {
  366. .pagination {
  367. margin: 3rem 0;
  368. }
  369. .pagination-item {
  370. float: left;
  371. width: 50%;
  372. }
  373. .pagination-item:first-child {
  374. margin-bottom: 0;
  375. border-top-left-radius: 4px;
  376. border-bottom-left-radius: 4px;
  377. }
  378. .pagination-item:last-child {
  379. margin-left: -1px;
  380. border-top-right-radius: 4px;
  381. border-bottom-right-radius: 4px;
  382. }
  383. }