PageRenderTime 49ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/build/elpa/org-page-20161121.2129/themes/emacs_love/resources/css/main.css

https://github.com/jixiuf/jixiuf.github.com
CSS | 448 lines | 380 code | 32 blank | 36 comment | 0 complexity | ae62abb01979fb89829e9215dfadbfaa MD5 | raw file
  1. /******************************************************
  2. * I copied these styles from markdotto.com, who is
  3. * the creator of bootstrap, and I also did some
  4. * modification. Thanks Mark for the beautiful theme,
  5. * so I reserved the @mdo sign below.
  6. *****************************************************/
  7. /*
  8. __
  9. __ /\ \
  10. /'_`\_ ___ ___ \_\ \ ___
  11. /'/'_` \ /' __` __`\ /'_` \ / __`\
  12. /\ \ \L\ \/\ \/\ \/\ \/\ \L\ \/\ \L\ \
  13. \ \ `\__,_\ \_\ \_\ \_\ \___,_\ \____/
  14. \ `\_____\\/_/\/_/\/_/\/__,_ /\/___/
  15. `\/_____/
  16. */
  17. /* Body resets
  18. -------------------------------------------------- */
  19. * {
  20. -webkit-box-sizing: border-box;
  21. -moz-box-sizing: border-box;
  22. box-sizing: border-box;
  23. }
  24. html, body {
  25. margin: 0;
  26. padding: 0;
  27. }
  28. html {
  29. font-size: 62.5%;
  30. }
  31. body {
  32. padding: 20px;
  33. font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Microsoft YaHei",sans-serif;
  34. /*Menlo, Monaco, monospace*/
  35. font-size: 14px;
  36. line-height: 1.5;
  37. color: #f0fff0;
  38. background-color: #10103f;
  39. }
  40. p {
  41. margin: 0 0 20px;
  42. }
  43. .title {
  44. margin-bottom: 20px;
  45. text-align: center;
  46. }
  47. h1 {
  48. font-size:20px;
  49. }
  50. h2, h3, h4 {
  51. font-size:18px;
  52. }
  53. h1, h2, h3, h4{
  54. position: relative;
  55. margin: 30px 0 20px;
  56. font-weight: bold;
  57. line-height: 1.1;
  58. color: #ffaa00;
  59. text-rendering: optimizeLegibility;
  60. }
  61. h2:before, h3:before, h4:before {
  62. position: absolute;
  63. top: auto;
  64. color: #cfc;
  65. display: none;
  66. }
  67. h2:before {
  68. content: "*";
  69. left: -1.25em;
  70. }
  71. h3:before {
  72. content: "**";
  73. left: -2em;
  74. }
  75. h4:before {
  76. content: "***";
  77. left: -2.5em;
  78. }
  79. i, em, b, strong {
  80. padding-left: .1em;
  81. padding-right: .1em;
  82. }
  83. b, strong {
  84. font-weight: bold;
  85. color: #00ffff;
  86. }
  87. b:before, b:after, strong:before, strong:after {
  88. content: "*";
  89. }
  90. i:before, i:after, em:before, em:after {
  91. content: "/";
  92. }
  93. hr {
  94. margin: 0;
  95. border: 0;
  96. border-bottom: 1px solid #e2e3e4;
  97. }
  98. ul, ol {
  99. padding: 0;
  100. margin: 0 0 20px;
  101. }
  102. code, pre {
  103. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  104. font-size: 0.9em;
  105. }
  106. .underline {
  107. text-decoration: underline;
  108. color: #3aff3a;
  109. }
  110. .underline:before, .underline:after {
  111. content: "_";
  112. color: #3aff3a;
  113. }
  114. code {
  115. color: #d14;
  116. }
  117. code:before, code:after {
  118. content: "=";
  119. color: #cfc;
  120. }
  121. pre {
  122. display: block;
  123. margin: 0 0 14px;
  124. padding: 15px;
  125. border: 1px solid #e1e1e8;
  126. border-radius: 3px 3px 3px 3px;
  127. line-height: 28px;
  128. background-color: #000000;
  129. white-space: pre;
  130. white-space: pre-wrap;
  131. word-break: break-all;
  132. word-wrap: break-word;
  133. }
  134. pre.src {
  135. padding-top: 1.2em;
  136. position: relative;
  137. }
  138. pre.src:before {
  139. display: none;
  140. position: absolute;
  141. background-color: white;
  142. top: -18px;
  143. right: 10px;
  144. padding: 3px;
  145. border: 1px solid black;
  146. }
  147. pre.src:hover:before {
  148. display: inline;
  149. background-color: #000000;
  150. border: 1px solid #e1e1e8;
  151. }
  152. pre.src-sh:before { content: 'sh'; }
  153. pre.src-bash:before { content: 'sh'; }
  154. pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  155. pre.src-C:before { content: 'C/C++'; }
  156. pre.src-matlab:before { content: 'matlab'; }
  157. pre.src-maxima:before { content: 'maxima'; }
  158. pre.src-lisp:before { content: 'common lisp'; }
  159. blockquote {
  160. padding: 0 0 0 20px;
  161. margin: 0 30px 20px -22.5px;
  162. color: #999;
  163. border-left: 8px solid #e5e5e5;
  164. }
  165. blockquote p:last-child {
  166. margin-bottom: 0;
  167. }
  168. img {
  169. display: block;
  170. margin: 0;
  171. border-radius: 5px;
  172. }
  173. a {
  174. font-weight: inherit;
  175. line-height: inherit;
  176. color: #ffff00;
  177. text-decoration: none;
  178. }
  179. sup a:before {
  180. content: "[";
  181. }
  182. sup a:after {
  183. content: "]";
  184. }
  185. a:hover {
  186. text-decoration: underline;
  187. color: #00ffff;
  188. }
  189. table {
  190. line-height: 2.5;
  191. margin-bottom: 15px;
  192. max-width: 100%;
  193. width: 100%;
  194. }
  195. table td, table th {
  196. padding: 0 15px;
  197. }
  198. table th.left, table td.left {
  199. text-align: left;
  200. }
  201. table th.right, table td.right {
  202. text-align: right;
  203. }
  204. .figure p + p {
  205. text-align: center;
  206. }
  207. /******************************************************/
  208. /* body */
  209. .container {
  210. margin: 0 auto;
  211. max-width: 770px;
  212. }
  213. /* head */
  214. .masthead {
  215. color: #ada;
  216. border-bottom: 1px solid #e2e3e4;
  217. }
  218. .masthead a {
  219. color: #ffff00;
  220. }
  221. .masthead a:hover {
  222. text-decoration: underline;
  223. color: #00ffff;
  224. }
  225. .masthead ul {
  226. list-style: none;
  227. margin: 8px 0;
  228. }
  229. .masthead li {
  230. display: inline-block;
  231. }
  232. .masthead li + li:before {
  233. display: inline-block;
  234. content: "\00B7 \00a0";
  235. color: #cfc;
  236. }
  237. /*site-nav*/
  238. .site-nav {border-top: 1px solid #e8e8e8;}
  239. .site-nav .menu-icon { display: none; }
  240. .site-nav li a {line-height: 1.5; }
  241. .site-nav li a:not(:first-child) { margin-left: 20px; }
  242. /* searchform*/
  243. #searchform {
  244. position: absolute;
  245. top: 54px;
  246. right: 30.4%;
  247. }
  248. #searchform #s {
  249. background: url("/media/img/search.png") no-repeat 5px 6px;
  250. box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  251. border: 1px solid #dfd;
  252. border-radius: 2px;
  253. -moz-border-radius: 2px;
  254. width: 90px;
  255. height: 30px;
  256. line-height: 12px;
  257. padding: 4px 10px 4px 28px;
  258. -webkit-transition-duration: 400ms;
  259. -webkit-transition-property: width, background;
  260. -webkit-transition-timing-function: ease;
  261. -moz-transition-duration: 400ms;
  262. -moz-transition-property: width, background;
  263. -moz-transition-timing-function: ease;
  264. -o-transition-duration: 400ms;
  265. -o-transition-property: width, background;
  266. -o-transition-timing-function: ease;
  267. }
  268. #searchform #s:focus {
  269. background-color: #f9f9f9;
  270. width: 160px;
  271. }
  272. .masthead img.avatar {
  273. position: absolute;
  274. width: 200px;
  275. top: 100px;
  276. right: 29%;
  277. background-color: #fff;
  278. }
  279. /* post */
  280. .post {
  281. position: relative;
  282. border-bottom: 1px solid #e2e3e4;
  283. }
  284. .post img {
  285. max-width: 100%;
  286. }
  287. .post li {
  288. list-style: none outside none;
  289. }
  290. .post ul > li:before {
  291. content: "- ";
  292. margin-left: -0.25em;
  293. color: #cfc;
  294. }
  295. .post ol {
  296. counter-reset: o-list;
  297. }
  298. .post ol > li:before {
  299. content: counter(o-list) ") ";
  300. counter-increment: o-list;
  301. color: #cfc;
  302. }
  303. /* special for li in pre */
  304. .post pre li {
  305. list-style-type: decimal;
  306. }
  307. .post pre li:before {
  308. display: none;
  309. }
  310. /* meta info */
  311. .post-info {
  312. display: inline-block;
  313. margin: -10px 0 -10px;
  314. color: #ffff00;
  315. }
  316. .post-info + .post-info:before {
  317. content: "\2223 \00a0";
  318. }
  319. .post-meta {
  320. border-bottom: 1px solid #e2e3e4;
  321. }
  322. .center { margin-left: auto; margin-right: auto; text-align: center; }
  323. /* table of content */
  324. #table-of-contents {
  325. position: fixed;
  326. right: 0em;
  327. top: 0em;
  328. background: black;
  329. border:1px solid #e1e1e8;
  330. -webkit-box-shadow: 0 0 1em #777777;
  331. -moz-box-shadow: 0 0 1em #777777;
  332. -webkit-border-bottom-left-radius: 5px;
  333. -moz-border-radius-bottomleft: 5px;
  334. text-align: center;
  335. /* ensure doesn't flow off the screen when expanded */
  336. max-height: 80%;
  337. overflow: auto;
  338. z-index: 200;
  339. }
  340. #table-of-contents h2 {
  341. max-width: 20em;
  342. font-weight: normal;
  343. padding-left: 0.5em;
  344. padding-top: 0.05em;
  345. padding-bottom: 0.05em;
  346. }
  347. #table-of-contents ul {
  348. margin-left: 14pt;
  349. margin-bottom: 10pt;
  350. padding: 0
  351. }
  352. #table-of-contents li {
  353. padding: 0;
  354. margin: 1px;
  355. list-style: none;
  356. }
  357. #table-of-contents ul>:first-child {
  358. color: blue;
  359. }
  360. #table-of-contents #text-table-of-contents {
  361. display: none;
  362. text-align: left;
  363. }
  364. #table-of-contents:hover #text-table-of-contents {
  365. display: block;
  366. padding: 0.5em;
  367. margin-top: -1.5em;
  368. }
  369. /* footer */
  370. .footer {
  371. margin: 80px 0 0;
  372. text-align: center;
  373. font-size: 15px;
  374. color: #cfc;
  375. }
  376. .footer > p {
  377. margin: 0;
  378. line-height: 1.5;
  379. }
  380. .footdef {
  381. margin: 0 0 20px;
  382. }
  383. .footpara {
  384. display: inline;
  385. }
  386. /* Responsive
  387. -------------------------------------------------- */
  388. /* site-nav*/
  389. @media screen and (max-width: 512px) {
  390. .site-nav {border-top: 1px solid #e8e8e8; text-align: left; }
  391. .site-nav .menu-icon { display: block; width: 36px; height: 21px; line-height: 0; margin-top: 10px; margin-bottom: 5px; text-align: center;
  392. }
  393. .site-nav .menu-icon > svg { width: 18px; height: 15px; }
  394. .site-nav .menu-icon > svg path { fill: #ffff00; }
  395. .site-nav .trigger { clear: both; display: none; }
  396. .site-nav:hover .trigger { display: block; padding-bottom: 5px; }
  397. .site-nav li{ display: block; padding: 5px 10px; }
  398. .site-nav li:before{ display: inline-block; content: "\00B7 \00a0"; color: #cfc;}}
  399. /* whole page */
  400. @media (min-width: 768px) {
  401. /* Increase body padding and font-sizes */
  402. body {
  403. padding: 30px;
  404. font-size: 18px;
  405. line-height: 1.75;
  406. }
  407. h1:before, h2:before, h3:before, h4:before{
  408. display: inline;
  409. }
  410. }
  411. @media (min-width: 1024px) {
  412. body {
  413. padding: 30px;
  414. }
  415. }