Posted By

nerdfiles on 04/18/12


Tagged

css Stylish informationphilosopher


Versions (?)

Stylish on informationphilosopher.com


 / Published in: HTML
 

URL: http://informationphilosopher.com

CSS facelift for informationphilosopher.com (via Stylish)

  1. /**
  2. * informationphilosopher.com re-style
  3. *
  4. * Tab twice to start at "Introduction" and so on to navigate
  5. *
  6. * @author nerdfiles
  7. * @date 04-18-2012
  8. */
  9.  
  10.  
  11. /**
  12. * Fonts
  13. */
  14.  
  15. /* PT Mono */
  16.  
  17. @import url(http://fonts.googleapis.com/css?family=PT+Mono);
  18.  
  19. /* Philosopher (obv) */
  20.  
  21. @import url(http://fonts.googleapis.com/css?family=Philosopher);
  22.  
  23.  
  24. /**
  25. * wat
  26. */
  27.  
  28. body {
  29. overflow-x: hidden;
  30. }
  31.  
  32.  
  33. /**
  34. * Behaviors
  35. */
  36.  
  37. input:focus {
  38. outline: none;
  39. }
  40.  
  41.  
  42. /**
  43. * Anchors
  44. *
  45. * ...are pretty...
  46. */
  47.  
  48. a {
  49. color: #CA5554;
  50. }
  51.  
  52. a:visited {
  53. color: #CA5554;
  54. }
  55.  
  56. a:focus {
  57. outline: none;
  58. position: relative;
  59. color: #333 !important;
  60. }
  61.  
  62. a:focus:before {
  63. content: "*";
  64. top: -.5em;
  65. left: .25em;
  66. color: #CA5554;
  67. }
  68.  
  69. body > a:focus:before {
  70. content: "" !important;
  71. }
  72.  
  73. #logo a:focus:before {
  74. content: "" !important;
  75. }
  76.  
  77. a[href*="skipnav"]:focus:before {
  78. content: "" !important;
  79. }
  80.  
  81.  
  82. /**
  83. * Main Container
  84. *
  85. * Casted as a table
  86. */
  87.  
  88. table[width="765"] {
  89. width: 90%;
  90. }
  91.  
  92.  
  93. /**
  94. * Left Column
  95. *
  96. * Casted in a table
  97. */
  98.  
  99. table[width="765"] tr td:nth-child(1) {
  100. width: 20%;
  101. height: 50%;
  102. padding: 0;
  103. margin: 0;
  104. }
  105.  
  106.  
  107. /**
  108. * Left Column (guts)
  109. *
  110. * Casted in a table
  111. */
  112.  
  113. table[width="765"] tr td:nth-child(1) #column1 {
  114. width: 10px;
  115. height: 50%;
  116. background-color: #fff;
  117. padding: 0;
  118. margin: 0;
  119. font-family: 'PT Mono', sans-serif;
  120. position: fixed;
  121. overflow: hidden;
  122. border-top: 1px #e0e0e0 solid;
  123. border-right: 1px #e0e0e0 solid;
  124. border-bottom: 1px #e0e0e0 solid;
  125. padding-right: 10px;
  126. bottom: 10px;
  127. z-index: 9001;
  128. }
  129.  
  130. table[width="765"] tr td:nth-child(1) #column1:before {
  131. content: "Author Index";
  132. margin-top: -30px;
  133. position: absolute;
  134. }
  135.  
  136. table[width="765"] tr td:nth-child(1) #column1:hover {
  137. width: 20%;
  138. }
  139.  
  140. table[width="765"] tr td:nth-child(1) #column1:hover div.linksLeftCol {
  141. width: 100%;
  142. }
  143.  
  144. div.linksLeftCol {
  145. padding: 5px;
  146. margin: 0;
  147. background-color: #fff;
  148. border: none;
  149. height: 100%;
  150. position: relative;
  151. width: 10px;
  152. overflow: scroll;
  153. }
  154.  
  155. div.linksLeftCol:hover {
  156. width: 100%;
  157. }
  158.  
  159. div.linksLeftCol br {
  160. display: none;
  161. }
  162.  
  163. .linksLeftCol a,
  164. .linksLeftCol a:link {
  165. display: block;
  166. padding-left: 0px;
  167. font-size: 14px;
  168. color: #333;
  169. padding: 7px 0;
  170. opacity: .7;
  171. }
  172.  
  173. .linksLeftCol a:hover {
  174. opacity: 1;
  175. }
  176.  
  177. .linksLeftCol a:visited {
  178. color: #666;
  179. }
  180.  
  181.  
  182. /**
  183. * Right Column (bodycopy)
  184. *
  185. * Casted in a table
  186. */
  187.  
  188. table[width="765"] tr td:nth-child(2) {
  189. width: 100%;
  190. }
  191.  
  192.  
  193. /**
  194. * Site Header
  195. *
  196. * Some div
  197. */
  198.  
  199. #header-wrapper {
  200. width: 700px;
  201. padding: 0;
  202. margin: 0;
  203. background: #fff;
  204. }
  205.  
  206. #header {
  207. width: 700px;
  208. margin: 0;
  209. padding: 0;
  210. background: #fff;
  211. }
  212.  
  213.  
  214. /**
  215. * Site Logo
  216. *
  217. * prestologo!
  218. */
  219.  
  220. #logo {
  221. top: 10px;
  222. left: 30px;
  223. position: absolute;
  224. color: #2B2840;
  225. }
  226.  
  227. #logo a {
  228. display: none;
  229. }
  230.  
  231. #logo img {
  232. display: none;
  233. }
  234.  
  235. #logo:after {
  236. font-family: 'PT Mono', sans-serif;
  237. /*content:"Information Philosopher";*/
  238. content:" ";
  239. position: absolute;
  240. top: -20px;
  241. font-size: 30px;
  242. color: #2B2840;
  243. height: 300px;
  244. display: block;
  245. width: 400px;
  246. background: url('http://theskepticthinker.com/images/the_information_philosopher.gif') no-repeat;
  247. }
  248.  
  249.  
  250. /**
  251. * Main Menu
  252. *
  253. * Some div
  254. */
  255.  
  256. div#main-menu {
  257. top: 70px;
  258. left: 30px;
  259. width: auto;
  260. font-size: 24px;
  261. }
  262.  
  263. div#main-menu ul {
  264. padding: 0;
  265. margin: 0;
  266. width: auto;
  267. position: relative;
  268. left: -5px;
  269. }
  270.  
  271. div#main-menu ul li {
  272. width: auto;
  273. border: none;
  274. padding: 0;
  275. margin: 0 0 0 20px;
  276. }
  277. div#main-menu ul li:nth-child(1) {
  278. padding-left: 0 !important;
  279. margin-left: 0 !important;
  280. }
  281. div#main-menu ul li:nth-child(1) a {
  282. padding-left: 0 !important;
  283. }
  284.  
  285. div#main-menu ul li a {
  286. font-family: 'PT Mono', sans-serif;
  287. color: #77635F;
  288. padding: 0 10px 0 0 !important;
  289. border-right: 2px #e0e0e0 solid;
  290. }
  291.  
  292. div#main-menu ul li:last-child {
  293.  
  294. }
  295.  
  296. div#main-menu ul li:last-child a {
  297. border-right: none;
  298. }
  299.  
  300. /**
  301. * Submenu
  302. *
  303. * Called by js?
  304. */
  305.  
  306. #introduction.menu {
  307. padding: 0;
  308. margin: 0;
  309. }
  310. #introduction.menu a {
  311. position: relative;
  312. padding-left: 15px;
  313. }
  314.  
  315. div.menu {
  316. background: #fff;
  317. border-bottom: 1px #e0e0e0 solid !important;
  318. padding-top: 20px !important;
  319. padding-bottom: 20px !important;
  320. }
  321.  
  322. div.menu a.menuItem:link,
  323. div.menu a.menuItemSecure:link,
  324. div.menu a.menuItem:visited {
  325. background: #fff;
  326. font-family: 'PT Mono', sans-serif;
  327. color: #77635F;
  328. }
  329.  
  330. div.menu a.menuItem:hover {
  331. color: #333;
  332. text-decoration: underline;
  333. }
  334.  
  335.  
  336. /**
  337. * Site Menu
  338. *
  339. * Horribly structurally marked up
  340. */
  341.  
  342. td.search[nowrap] {
  343. position: absolute;
  344. top: 10px;
  345. right: 12%;
  346. /*background: #999;
  347. color: #fff;
  348. border-radius: 2px;*/
  349. color: #333;
  350. font-family: 'PT Mono', sans-serif;
  351. background: #fff;
  352. padding: 13px 8px 4px;
  353. /*margin-left: 300px;*/
  354. }
  355.  
  356. td.search[nowrap] a {
  357. text-decoration: none;
  358. font-family: 'PT Mono', sans-serif;
  359. }
  360.  
  361.  
  362. /**
  363. * I don't even fucking know (search container)
  364. *
  365. * Casted in a table!!
  366. */
  367.  
  368. td.search[align="right"] {
  369. background: #fff;
  370. text-align: left;
  371. }
  372.  
  373. td.search[align="right"] a {
  374. text-decoration: none;
  375. padding: 5px 8px;
  376. }
  377.  
  378. td.search[align="right"] a:hover {
  379. background: #e0e0e0;
  380. }
  381.  
  382.  
  383. /**
  384. * Search
  385. *
  386. * Originally to the far right under header
  387. */
  388.  
  389. div#search_bar.search {
  390. width: auto;
  391. background: #fff;
  392. }
  393.  
  394. div#search_bar.search a {
  395. color: #333;
  396. color: #BFB1A1;
  397. text-transform: uppercase;
  398. font-family: 'PT Mono', sans-serif;
  399. }
  400.  
  401.  
  402. /**
  403. * "SkyFooter"
  404. *
  405. * This really takes the cake
  406. */
  407.  
  408. form.skyFooterForm {
  409.  
  410. }
  411.  
  412. form.skyFooterForm input {
  413. border-bottom: 1px #e0e0e0 solid;
  414. padding: 5px;
  415. }
  416.  
  417.  
  418. /**
  419.   * "body copy" (body copy)
  420.   * 
  421.   * More cake
  422.   */
  423.  
  424. div.bodycontent,
  425. #column23 {
  426. font-family: 'Philosopher', cursive;
  427. color: #333;
  428. padding: 30px 40px;
  429. line-height: 1.834;
  430. font-size: 16px;
  431. }
  432.  
  433. #column23 a {
  434. color: #CA5554;
  435. }
  436.  
  437. #column23 a:visited {
  438. color: #77635F;
  439. }
  440.  
  441. div.bodycontent img[align="right"] {
  442. float: right;
  443. margin: 0 0 1em 1em;
  444. }
  445.  
  446. #column23 div.bodycontent div.chaptertitle {
  447. font-family: 'Philosopher', cursive;
  448. color: #333;
  449. line-height: 1;
  450. font-size: 82px;
  451. margin-bottom: 40px;
  452. }
  453.  
  454. #column23 div.breadcrumbs {
  455. font-family: 'Philosopher', cursive;
  456. color: #333;
  457. }
  458.  
  459. #column23 div.breadcrumbs a,
  460. #column23 div.breadcrumbs a:link {
  461. color: #CA5554;
  462. text-decoration: none;
  463. }
  464.  
  465. #column23 div.breadcrumbs a:visited {
  466.  
  467. }
  468.  
  469. #column23 div.bodycontent > div:nth-child(1) {
  470. position: relative;
  471. left: 0px;
  472. }
  473.  
  474. /**
  475. * Date
  476. */
  477.  
  478. div.bodycontent div.breadcrumbs:nth-child(3) {
  479. position: relative;
  480. top: -30px;
  481. }
  482.  
  483. div.sectiontitle {
  484. color: #333;
  485. font-family: 'Philosopher', cursive;
  486. }
  487.  
  488. div.subsectiontitle {
  489. color: #333;
  490. }
  491.  
  492. div.bodytext {
  493. font-family: 'Philosopher', cursive;
  494. color: #333;
  495. line-height: 1.834;
  496. margin: 1em 0;
  497. }
  498.  
  499. div.bodytext p {
  500. margin: 1em 0;
  501. }
  502.  
  503. div.bodytext blockquote,
  504. #column23 blockquote {
  505. font-family: 'Philosopher', cursive;
  506. margin: 1.2em 1em;
  507. line-height: 1.834;
  508. background: #e0e0e0;
  509. padding: 1em 1.4em;
  510. }
  511.  
  512. #column23 blockquote:contains(''),
  513. div.bodytext blockquote:contains(''),
  514. blockquote:contains('') {
  515. display: none !important;
  516. }
  517.  
  518. /**
  519. * Page Nav
  520. *
  521. * @see http://www.iconfinder.com/ajax/download/png/?id=43221&s=128
  522. */
  523.  
  524. table.footernav td a,
  525. table.footernav td a:link {
  526. color: #333;
  527. opacity: .6;
  528. text-decoration: none;
  529. }
  530. table.footernav td a:hover {
  531. opacity: 1;
  532. }
  533. table.footernav td a:visited {
  534. color: #333;
  535. }
  536.  
  537. /**
  538. * Top Left
  539. *
  540. * @see http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
  541. */
  542.  
  543. table.footernav tr:first-child td[align="left"],
  544. table.footernav tr:nth-child(2) td[align="left"] { width: 50%; }
  545. table.footernav tr:first-child td[align="left"] img,
  546. table.footernav tr:nth-child(2) td[align="left"] img { display: none; }
  547. table.footernav tr:first-child td[align="left"] a:nth-child(1),
  548. table.footernav tr:nth-child(2) td[align="left"] a:nth-child(1) { display: none; }
  549. table.footernav tr:first-child td[align="left"] a,
  550. table.footernav tr:nth-child(2) td[align="left"] a {
  551. padding: 30px 40px 30px 70px;
  552. display: inline-block;
  553. font-size: 16px;
  554. background: url('http://www.iconfinder.com/ajax/download/png/?id=43218&s=128') left center no-repeat;
  555. background-image: url('http://www.iconfinder.com/ajax/download/png/?id=50798&s=64');
  556. }
  557.  
  558. /**
  559. * Top Right
  560. *
  561. * @see http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
  562. */
  563.  
  564. table.footernav tr:first-child td[align="right"],
  565. table.footernav tr:nth-child(2) td[align="right"] {
  566. width: 50%;
  567. text-align: right;
  568. }
  569. table.footernav tr:first-child td[align="right"] img,
  570. table.footernav tr:nth-child(2) td[align="right"] img { display: none; }
  571. table.footernav tr:first-child td[align="right"] a:nth-child(2),
  572. table.footernav tr:nth-child(2) td[align="right"] a:nth-child(2) { display: none; }
  573. table.footernav tr:first-child td[align="right"] a,
  574. table.footernav tr:nth-child(2) td[align="right"] a {
  575. text-align: right;
  576. background: url('http://www.iconfinder.com/ajax/download/png/?id=43221&s=128') right center no-repeat;
  577. background-image: url('http://www.iconfinder.com/ajax/download/png/?id=50794&s=64');
  578. padding: 30px 70px 30px 40px;
  579. display: inline-block;
  580. font-size: 16px;
  581. }
  582.  
  583. /**
  584. * Bottom Left
  585. *
  586. * @see http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
  587. */
  588.  
  589. table.footernav tr:last-child td[align="left"] { width: 50%; }
  590. table.footernav tr:last-child td[align="left"] img { display: none; }
  591. table.footernav tr:last-child td[align="left"] a:nth-child(1) { display: none; }
  592. table.footernav tr:last-child td[align="left"] a {
  593. padding: 30px 40px 30px 70px;
  594. display: inline-block;
  595. font-size: 20px;
  596. background: url('http://www.iconfinder.com/ajax/download/png/?id=43218&s=128') left center no-repeat;
  597. background-image: url('http://www.iconfinder.com/ajax/download/png/?id=50784&s=64');
  598. }
  599.  
  600.  
  601. /**
  602. * Bottom Right
  603. */
  604.  
  605. table.footernav tr:last-child td[align="right"] { width: 50%; text-align: right; }
  606. table.footernav tr:last-child td[align="right"] img { display: none; }
  607. table.footernav tr:last-child td[align="right"] a:nth-child(2) { display: none; }
  608. table.footernav tr:last-child td[align="right"] a {
  609. background: url('http://www.iconfinder.com/ajax/download/png/?id=43221&s=128') right center no-repeat;
  610. background-image: url('http://www.iconfinder.com/ajax/download/png/?id=50785&s=64');
  611. padding: 30px 70px 30px 40px;
  612. display: inline-block;
  613. font-size: 20px;
  614. }
  615.  
  616.  
  617. /**
  618. * Footer
  619. */
  620.  
  621. #footer {
  622. bottom: 0;
  623. right: 0;
  624. width: auto;
  625. padding: 0 0 20px 0;
  626. text-align: right;
  627. background: #fff;
  628. color: #BFB1A1; }
  629. #footer a {
  630. font-family: 'PT Mono', sans-serif;
  631. color: #BFB1A1;
  632. border: none;
  633. display: inline-block; }
  634. #footer a:visited { color: #333; }
  635. .footernav td { width: auto !important; }
  636. .footernav {
  637. border-bottom: 1px #e0e0e0 solid;
  638. border-top: 1px #e0e0e0 solid; margin: 30px 0; }
  639. .skyFooter { border: 1px solid gold; background: #fff; display: none; }
  640. hr { display: none; }
  641.  
  642.  
  643. /**
  644. * Reader Level Styles
  645. */
  646.  
  647. .reader_level_1 { margin-top: 100px; border-top: 1px #e0e0e0 solid; }
  648. .reader_level_2 { border-top: 1px #e0e0e0 solid; }
  649.  
  650.  
  651. #column23 .glossRefs {
  652. color: #333;
  653. padding: 20px 0;
  654. border-top: 3px #e0e0e0 double;
  655. border-bottom: 3px #e0e0e0 double;
  656. }
  657.  
  658. #column23 .glossRefs a {
  659. color: #BFB1A1;
  660. }
  661.  
  662. ::-webkit-scrollbar-track-piece {
  663. background-color: #fff;
  664. -webkit-border-radius: 0; }
  665.  
  666. ::-webkit-scrollbar {
  667. width: 8px;
  668. height: 8px; }
  669.  
  670. ::-webkit-scrollbar-thumb {
  671. height: 50px;
  672. background-color: #999;
  673. -webkit-border-radius: 4px;
  674. outline: 2px solid #fff;
  675. outline-offset: -2px;
  676. border: 2px solid #fff; }
  677.  
  678. ::-webkit-scrollbar-thumb:hover {
  679. height: 50px;
  680. background-color: #9f9f9f;
  681. -webkit-border-radius: 4px; }
  682.  
  683. ::-webkit-scrollbar { width: 16px; }

Report this snippet  

You need to login to post a comment.