jekyll-theme-leap-day.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. /*
  2. Leap Day for GitHub Pages
  3. by Matt Graham
  4. */
  5. @import "normalize";
  6. @import "fonts";
  7. @import "rouge-base16-dark";
  8. body {
  9. font:14px/22px 'Quattrocento Sans', "Helvetica Neue", Helvetica,
  10. Arial, sans-serif;
  11. color:#666;
  12. font-weight:300;
  13. margin: 0px;
  14. padding:0px 0 20px 0px;
  15. background: url(../images/body-background.png) #eae6d1;
  16. }
  17. h1, h2, h3, h4, h5, h6 {
  18. color:#333;
  19. margin:0 0 10px;
  20. }
  21. p, ul, ol, table, pre, dl {
  22. margin:0 0 20px;
  23. }
  24. h1, h2, h3 {
  25. line-height:1.1;
  26. }
  27. h1 {
  28. font-size:28px;
  29. }
  30. h2 {
  31. font-size: 24px;
  32. color:#393939;
  33. }
  34. h3, h4, h5, h6 {
  35. color:#666666;
  36. }
  37. h3 {
  38. font-size: 18px;
  39. line-height: 24px;
  40. }
  41. a {
  42. color:#3399cc;
  43. font-weight:400;
  44. text-decoration:none;
  45. }
  46. a small {
  47. font-size:11px;
  48. color:#666;
  49. margin-top:-0.6em;
  50. display:block;
  51. }
  52. ul{
  53. list-style-image:url('../images/bullet.png');
  54. }
  55. strong {
  56. font-weight: bold;
  57. color: #333;
  58. }
  59. .wrapper {
  60. width:650px;
  61. margin:0 auto;
  62. position:relative;
  63. }
  64. section img {
  65. max-width: 100%;
  66. }
  67. blockquote {
  68. border-left:1px
  69. solid #ffcc00;
  70. margin:0;
  71. padding:0 0 0 20px;
  72. font-style:italic;
  73. }
  74. code {
  75. font-family: 'Lucida Sans', Monaco, Bitstream Vera Sans Mono,
  76. Lucida Console, Terminal;
  77. font-size:13px;
  78. color:#efefef;
  79. text-shadow: 0px 1px 0px #000;
  80. margin: 0 4px;
  81. padding: 2px 6px;
  82. background: #333;
  83. border-radius: 2px;
  84. }
  85. pre {
  86. padding:8px 15px;
  87. background: #333333;
  88. border-radius: 3px;
  89. border:1px solid #c7c7c7;
  90. overflow: auto;
  91. overflow-y: hidden;
  92. code {
  93. margin: 0px;
  94. padding: 0px;
  95. }
  96. }
  97. table {
  98. width:100%;
  99. border-collapse:collapse;
  100. }
  101. th {
  102. text-align:left;
  103. padding:5px 10px;
  104. border-bottom:1px solid #e5e5e5;
  105. color: #444;
  106. }
  107. td {
  108. text-align:left;
  109. padding:5px 10px;
  110. border-bottom:1px
  111. solid #e5e5e5;
  112. border-right: 1px solid #ffcc00;
  113. &:first-child {
  114. border-left: 1px solid #ffcc00;
  115. }
  116. }
  117. hr {
  118. border: 0;
  119. outline: none;
  120. height: 11px;
  121. background: transparent url('../images/hr.gif')
  122. center center repeat-x;
  123. margin: 0 0 20px;
  124. }
  125. dt {
  126. color:#444;
  127. font-weight:700;
  128. }
  129. header {
  130. padding: 25px 20px 40px 20px;
  131. margin: 0;
  132. position: fixed;
  133. top: 0;
  134. left:0;
  135. right:0;
  136. width: 100%;
  137. text-align: center;
  138. background: url(../images/background.png) #4276b6;
  139. box-shadow: 1px 0px 2px rgba(0,0,0,.75);
  140. z-index:99;
  141. -webkit-font-smoothing:antialiased;
  142. min-height: 76px;
  143. h1 {
  144. font: 40px/48px 'Copse',
  145. "Helvetica Neue", Helvetica, Arial, sans-serif;
  146. color: #f3f3f3;
  147. text-shadow: 0px 2px 0px #235796;
  148. margin: 0px;
  149. white-space: nowrap;
  150. overflow: hidden;
  151. text-overflow: ellipsis;
  152. -o-text-overflow: ellipsis;
  153. -ms-text-overflow: ellipsis;
  154. }
  155. p {
  156. color: #d8d8d8;
  157. text-shadow:rgba(#000,
  158. 0.2) 0 1px 0;
  159. font-size: 18px;
  160. margin: 0px;
  161. }
  162. }
  163. #banner {
  164. z-index: 100;
  165. left:0;
  166. right:50%;
  167. height: 50px;
  168. margin-right:-382px;
  169. position: fixed;
  170. top: 115px;
  171. background: #1876dfff;
  172. border: 1px solid #00000000;
  173. box-shadow: 0px 1px 3px rgba(0,0,0,.25);
  174. border-radius: 0px 2px 2px 0px;
  175. padding-right: 10px;
  176. .button {
  177. border: 1px solid #dba500;
  178. background:
  179. linear_gradient(rgb(255, 231, 136), rgb(255, 206, 56));
  180. border-radius: 2px;
  181. box-shadow: inset 0px 1px 0px rgba(255,255,255,.4), 0px 1px
  182. 1px rgba(0,0,0,.1);
  183. background-color: #FFE788;
  184. margin-left: 5px;
  185. padding: 10px 12px;
  186. margin-top: 6px;
  187. line-height:14px;
  188. font-size:14px;
  189. color:#333;
  190. font-weight: bold;
  191. display:inline-block;
  192. text-align:center;
  193. &:hover {
  194. background:
  195. linear_gradient(rgb(255, 231, 136), rgb(255, 231, 136));
  196. background-color: #ffeca0;
  197. }
  198. }
  199. .fork {
  200. position:fixed;
  201. left:50%;
  202. margin-left:-325px;
  203. padding: 10px 12px;
  204. margin-top: 6px;
  205. line-height:14px;
  206. font-size:14px;
  207. background-color: #FFE788;
  208. }
  209. .downloads {
  210. float: right;
  211. margin:0
  212. 45px 0 0;
  213. span {
  214. float:left;
  215. line-height:52px;
  216. font-size:90%;
  217. color:#9d7f0d;
  218. text-transform:uppercase;
  219. text-shadow:rgba(#fff, 0.2) 0
  220. 1px 0;
  221. }
  222. }
  223. ul {
  224. list-style:none;
  225. height:40px;
  226. padding:0;
  227. float: left;
  228. margin-left:10px;
  229. li {
  230. display:inline;
  231. a.button {
  232. background-color: #FFE788;
  233. }
  234. }
  235. }
  236. #logo {
  237. position:absolute;
  238. height: 36px;
  239. width: 36px;
  240. right:7px;
  241. top:7px;
  242. display: block;
  243. background: url(../images/g-node_logo2.png);
  244. }
  245. }
  246. section {
  247. width:590px;
  248. padding: 30px 30px 50px 30px;
  249. margin: 20px 0;
  250. margin-top: 190px;
  251. position:relative;
  252. background: #fbfbfb;
  253. border-radius: 3px;
  254. border: 1px solid #cbcbcb;
  255. box-shadow: 0px 1px 2px
  256. rgba(0,0,0,.09), inset 0px 0px 2px 2px rgba(255,255,255,.5), inset 0 0
  257. 5px 5px rgba(255,255,255,.4);
  258. }
  259. small {
  260. font-size:12px;
  261. }
  262. nav {
  263. width: 230px;
  264. position: fixed;
  265. top: 220px;
  266. left:50%;
  267. margin-left:-580px;
  268. text-align: right;
  269. ul {
  270. list-style: none;
  271. list-style-image:none;
  272. font-size: 14px;
  273. line-height:24px;
  274. li {
  275. padding: 5px 0px;
  276. line-height: 16px;
  277. // padding-right:17px;
  278. // position:relative;
  279. // right:-12px;
  280. &.tag-h1 {
  281. font-size: 1.2em;
  282. a {
  283. font-weight: bold;
  284. color: #333;
  285. }
  286. + .tag-h2 {
  287. }
  288. }
  289. &.tag-h2 {
  290. + .tag-h1 {
  291. margin-top:10px;
  292. }
  293. }
  294. }
  295. a {
  296. color: #666;
  297. &:hover { color:
  298. #999; }
  299. }
  300. // .active {
  301. // border-right:solid 4px #39C;
  302. // padding-right:13px;
  303. // }
  304. }
  305. }
  306. footer {
  307. width:180px;
  308. position: fixed;
  309. left:50%;
  310. margin-left:-530px;
  311. bottom:20px;
  312. text-align: right;
  313. line-height: 16px;
  314. }
  315. @media print, screen and
  316. (max-width: 1060px) {
  317. div.wrapper {
  318. width:auto;
  319. margin:0;
  320. }
  321. nav{
  322. display: none;
  323. }
  324. header, section, footer {
  325. float:none;
  326. h1 {
  327. white-space: nowrap;
  328. overflow: hidden;
  329. text-overflow: ellipsis;
  330. -o-text-overflow: ellipsis;
  331. -ms-text-overflow:
  332. ellipsis;
  333. }
  334. }
  335. #banner {
  336. width: 100%;
  337. .downloads {
  338. margin-right: 60px;
  339. }
  340. .fork {
  341. }
  342. #logo {
  343. margin-right: 15px;
  344. }
  345. }
  346. section {
  347. border:1px
  348. solid #e5e5e5;
  349. border-width:1px 0;
  350. padding:20px auto;
  351. margin: 190px auto 20px;
  352. max-width: 600px;
  353. }
  354. footer{
  355. text-align: center;
  356. margin: 20px auto;
  357. position: relative;
  358. left:auto;
  359. bottom:auto;
  360. width:auto;
  361. }
  362. }
  363. @media print, screen
  364. and (max-width: 720px) {
  365. body {
  366. word-wrap:break-word;
  367. }
  368. header {
  369. padding:20px 20px;
  370. margin: 0;
  371. h1 {
  372. font-size: 32px;
  373. white-space: nowrap;
  374. overflow: hidden;
  375. text-overflow: ellipsis;
  376. -o-text-overflow: ellipsis;
  377. -ms-text-overflow:
  378. ellipsis;
  379. }
  380. p { display: none;}
  381. }
  382. #banner {
  383. top: 80px;
  384. .fork {
  385. float: left;
  386. display: inline-block;
  387. margin-left: 0px;
  388. position:fixed;
  389. left:20px;
  390. }
  391. }
  392. section {
  393. margin-top: 130px;
  394. margin-bottom:
  395. 0px;
  396. width: auto;
  397. }
  398. header ul, header p.view {
  399. position:static;
  400. }
  401. }
  402. @media print, screen and (max-width: 480px) {
  403. body {
  404. }
  405. header{
  406. position: relative;
  407. padding: 5px 0px;
  408. min-height: 0px;
  409. h1 {
  410. font-size: 24px;
  411. white-space: nowrap;
  412. overflow: hidden;
  413. text-overflow:
  414. ellipsis;
  415. -o-text-overflow: ellipsis;
  416. -ms-text-overflow: ellipsis;
  417. }
  418. }
  419. section {
  420. margin-top: 5px;
  421. }
  422. #banner { display: none;}
  423. header ul {
  424. display:none;
  425. }
  426. }
  427. @media print {
  428. body {
  429. padding:0.4in;
  430. font-size:12pt;
  431. color:#444;
  432. }
  433. }
  434. @media print,
  435. screen and (max-height: 680px) {
  436. footer {
  437. text-align: center;
  438. margin: 20px auto;
  439. position: relative;
  440. left:auto;
  441. bottom:auto;
  442. width:auto;
  443. }
  444. }
  445. @media print, screen and (max-height:
  446. 480px) {
  447. nav {
  448. display: none;
  449. }
  450. footer {
  451. text-align: center;
  452. margin: 20px auto;
  453. position: relative;
  454. left:auto;
  455. bottom:auto;
  456. width:auto;
  457. }
  458. }