API tools faq
paste
Advertisement
roxiestheme

Fic Recs Page

roxiestheme
Aug 12th, 2015
9,650
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. >> THEMES OF ROXIE
  8.  
  9. Fic Rec Page by roxiestheme
  10. roxiestheme.tumblr.com
  11. 2015-2018 ⓒ All Rights Reserved.
  12.  
  13. ---
  14.  
  15. >> TERMS OF USE
  16.  
  17. Do NOT remove the credit
  18. Do NOT use as a base code
  19. Do NOT republish
  20. Do NOT claim as your own
  21.  
  22. ---
  23.  
  24. >> SPECIAL THANKS
  25.  
  26. Fonts by Google Fonts
  27. Icons by FontAwesome (v4.7)
  28. Isotope by Metafizzy
  29. style-my-tooltips by Malihu
  30.  
  31. -->
  32.  
  33. <meta charset="utf-8" />
  34. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  35.  
  36. <title>Fic Recs</title>
  37. <link rel="shortcut icon" href="{Favicon}" />
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  39.  
  40. <!-- STYLESHEETS -->
  41. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- FONTAWESOME ICONS -->
  42. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" /> <!-- GOOGLE FONT -->
  43.  
  44. <style type="text/css">
  45.  
  46. /*--------------------------------------------------------------*/
  47. /* BASIC -------------------------------------------------------*/
  48. /*--------------------------------------------------------------*/
  49.  
  50. html, body {
  51. font-family: 'Open Sans', sans-serif;
  52. letter-spacing: 0.5px;
  53. background-image: url('http://static.tumblr.com/a0dmjhi/9dQnnpz7c/tiny_grid.png');
  54. margin: 0;
  55. padding: 0;
  56. }
  57.  
  58. /* HYPERLINKS */
  59. a, a:hover, a:active {
  60. text-decoration: none;
  61. -webkit-transition: all 0.3s ease-in-out;
  62. -moz-transition: all 0.3s ease-in-out;
  63. -o-transition: all 0.3s ease-in-out;
  64. -ms-transition: all 0.3s ease-in-out;
  65. transition: all 0.3s ease-in-out;
  66. }
  67.  
  68. /* HEADINGS BASIC */
  69. h1, h2, h3, h4, h5, h6 {
  70. margin: 0;
  71. line-height: 100%;
  72. }
  73.  
  74. /* LIST BASIC */
  75. ul, ol, menu, dir {
  76. margin: 0;
  77. padding: 0;
  78. list-style-type: none;
  79. -webkit-margin-before: 0;
  80. -webkit-margin-after : 0;
  81. -webkit-margin-start : 0;
  82. -webkit-margin-end : 0;
  83. -webkit-padding-start: 0;
  84. }
  85.  
  86. /* TOOL TIP */
  87. #s-m-t-tooltip {
  88. position: absolute;
  89. z-index: 9999;
  90. display: block;
  91. max-width: 150px;
  92. margin-top: 5px;
  93. margin-left: 10px;
  94. padding: 8px;
  95. background: #222;
  96. font-size: 9px;
  97. color: #eee;
  98. letter-spacing: 1px;
  99. }
  100.  
  101. /* SCROLL BAR */
  102. ::-webkit-scrollbar-thumb {
  103. height: 9px;
  104. background-color: #222;
  105. }
  106. ::-webkit-scrollbar {
  107. width: 9px;
  108. height: 4px;
  109. background-color: #eee;
  110. }
  111.  
  112. /* SELECTION */
  113. ::-moz-selection {
  114. color: #fff;
  115. background-color: #222;
  116. }
  117. ::selection {
  118. color: #fff;
  119. background-color: #222;
  120. }
  121.  
  122. /* CONTAINER */
  123. .container {
  124. width: 900px;
  125. margin: auto;
  126. }
  127.  
  128. /*--------------------------------------------------------------*/
  129. /* HEADER ------------------------------------------------------*/
  130. /*--------------------------------------------------------------*/
  131.  
  132. /* HEADER BASIC */
  133. #header {
  134. width: 100%;
  135. padding: 50px 0;
  136. background-color: #222;
  137. }
  138. #header .container {
  139. display: flex;
  140. justify-content: space-between;
  141. align-items: center;
  142. }
  143. #header ul {
  144. list-style-type: none;
  145. }
  146.  
  147. /* HEADLINE */
  148. #header h1 {
  149. font-size: 48px;
  150. color: #fff;
  151. font-weight: 700;
  152. letter-spacing: -2px;
  153. }
  154. #header h1:first-letter {
  155. color: #00ced1;
  156. }
  157. #header h2 {
  158. font-size: 8px;
  159. color: #fff;
  160. font-weight: 300;
  161. text-transform: uppercase;
  162. letter-spacing: 3px;
  163. }
  164. #header h2 span {
  165. color: #00ced1;
  166. }
  167.  
  168. /* LINKS */
  169. #header .links {
  170. line-height: 120%;
  171. text-align: center;
  172. display: flex;
  173. }
  174. #header .links > li + li {
  175. margin-left: 7px;
  176. }
  177. #header .links a {
  178. display: block;
  179. border-radius: 50%;
  180. width: 35px;
  181. height: 35px;
  182. line-height: 35px;
  183. background-color: #fff;
  184. font-size: 16px;
  185. color: #222;
  186. }
  187. #header .links .fa-home {
  188. font-size: 20px;
  189. }
  190. #header .links a:hover {
  191. background-color: #00ced1;
  192. }
  193.  
  194. /*--------------------------------------------------------------*/
  195. /* MAIN --------------------------------------------------------*/
  196. /*--------------------------------------------------------------*/
  197.  
  198. #main {
  199. margin-top: 50px;
  200. overflow: hidden;
  201. }
  202.  
  203. /* SIDEBAR */
  204. .sidebar {
  205. width: 170px;
  206. float: left;
  207. }
  208. .sidebar .tags {
  209. padding: 10px;
  210. background: #fff;
  211. border: 1px solid #eee;
  212. margin-bottom: 20px;
  213. }
  214. .sidebar .tags h3 {
  215. background: #222;
  216. padding: 10px;
  217. color: #fff;
  218. text-align: left;
  219. font-size: 10px;
  220. font-weight: 400;
  221. text-transform: uppercase;
  222. letter-spacing: 3px;
  223. margin-bottom: 5px;
  224. }
  225. .sidebar .tags h3:first-letter{
  226. color: #00ced1;
  227. font-weight: 700;
  228. }
  229. .sidebar .tags ul {
  230. list-style-type: none;
  231. }
  232. .sidebar .tags ul > li + li {
  233. border-top: 1px solid #eee;
  234. }
  235. .sidebar .tags button {
  236. display: block;
  237. width: 150px;
  238. padding: 10px 0 10px 10px;
  239. text-align: left;
  240. font-size: 8px;
  241. letter-spacing: 1.5px;
  242. text-transform: uppercase;
  243. color: #222;
  244. outline: none;
  245. border: none;
  246. background: transparent;
  247. cursor: pointer;
  248. -webkit-transition: all 0.3s ease-in-out;
  249. -moz-transition: all 0.3s ease-in-out;
  250. -o-transition: all 0.3s ease-in-out;
  251. -ms-transition: all 0.3s ease-in-out;
  252. transition: all 0.3s ease-in-out;
  253. }
  254. .sidebar .tags button:before {
  255. font-family: 'FontAwesome';
  256. content: '\f02b';
  257. padding-right: 10px;
  258. }
  259. .sidebar .tags button:hover,
  260. .sidebar .tags button.is-checked {
  261. color: #fff;
  262. background-color: #00ced1;
  263. }
  264.  
  265. /* LIST */
  266. .list {
  267. float: right;
  268. width: 670px;
  269. margin-bottom: 30px;
  270. }
  271. .list .category {
  272. position: relative;
  273. width: 128px;
  274. padding: 15px;
  275. margin-bottom: 10px;
  276. background-color: #fff;
  277. color: #222;
  278. border: 1px solid #eee;
  279. float: left;
  280. }
  281. .list .category .title {
  282. font-size: 11px;
  283. font-weight: 600;
  284. }
  285. .list .category .title a {
  286. color: #222;
  287. }
  288. .list .category .title a:hover {
  289. color: #00ced1;
  290. }
  291. .list .category .author {
  292. display: block;
  293. font-size: 8px;
  294. font-style: italic;
  295. letter-spacing: 1px;
  296. font-weight: 400;
  297. margin: 3px 0 0;
  298. color: #00ced1;
  299. }
  300. .list .category .author:before{
  301. content:'by ';
  302. }
  303. .list .category .desc {
  304. display: block;
  305. font-size: 7px;
  306. letter-spacing: 1px;
  307. font-weight: 300;
  308. margin: 2px 0 0;
  309. color: #aaa;
  310. text-transform: uppercase;
  311. }
  312. .list .category ul {
  313. list-style-type: none;
  314. margin-top: 10px;
  315. font-size: 8px;
  316. font-weight: 400;
  317. color: #aaa;
  318. }
  319. .list .category ul > li + li {
  320. margin-top: 5px;
  321. }
  322. .list .category ul > li:before {
  323. color: #00ced1;
  324. text-transform: uppercase;
  325. letter-spacing: 1px;
  326. }
  327. .category .words{
  328. line-height: 100%;
  329. }
  330. .category .words:before{
  331. content: 'words: ';
  332. }
  333. .category .summary:before{
  334. content:'summary: ';
  335. }
  336. </style>
  337.  
  338. </head>
  339. <body>
  340. <header id="header">
  341. <nav class="container">
  342. <ul class="headline">
  343. <li><h1>fic recs</h1></li>
  344. <li><h2>list by <span>{name}</span></h2></li>
  345. <!-- This will automatically generate your username,
  346. no need to edit unless you want to customize it
  347. (it may not be displayed in the preview)-->
  348. </ul>
  349. <ul class="links">
  350. <li><a href="/" class="fa fa-home" title="home"></a></li>
  351. <li><a href="/ask" class="fa fa-envelope" title="mail"></a></li>
  352. <li><a href="/" class="fa fa-heart" title="bookmark"></a></li>
  353. <!-- !!! DO NO REMOVE THE CREDIT !!! -->
  354. <li><a href="http://roxiestheme.tumblr.com" target="_blank" class="fa fa-copyright" title="credit"></a></li>
  355. </ul>
  356. </nav>
  357. </header>
  358. <main id="main" class="container">
  359. <div class="sidebar filters">
  360. <!-- start of a group -->
  361. <div class="tags button-group" data-filter-group="group-name">
  362. <h3>Overview</h3>
  363. <ul>
  364. <li><button class="button is-checked" data-filter="">show all</button></li>
  365. <li><button class="button" data-filter=".tag1">tag name</button></li>
  366. <li><button class="button" data-filter=".tag2">tag name</button></li>
  367. </ul>
  368. </div>
  369. <!-- end of a group -->
  370. <!-- start of a group -->
  371. <div class="tags button-group" data-filter-group="group-name">
  372. <h3>Overview</h3>
  373. <ul>
  374. <li><button class="button is-checked" data-filter="">show all</button></li>
  375. <li><button class="button" data-filter=".tag3">tag name</button></li>
  376. <li><button class="button" data-filter=".tag4">tag name</button></li>
  377. </ul>
  378. </div>
  379. <!-- end of a group -->
  380. </div><!-- //sidebar -->
  381. <div class="list">
  382. <!-- start of a category -->
  383. <div class="category tag1 tag3"><!-- add your tags here-->
  384. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  385. <span class="author">username</span>
  386. <span class="desc">pairing / rating</span>
  387. <ul>
  388. <li class="words">word count</li>
  389. <li class="summary">summary</li>
  390. </ul>
  391. </div>
  392. <!-- end of a category -->
  393. <!-- start of a category -->
  394. <div class="category tag2 tag4"><!-- add your tags here-->
  395. <h3 class="title"><a href="/ficrecs">Fanfic Title</a></h3>
  396. <span class="author">username</span>
  397. <span class="desc">pairing / rating</span>
  398. <ul>
  399. <li class="words">word count</li>
  400. <li class="summary">summary</li>
  401. </ul>
  402. </div>
  403. <!-- end of a category -->
  404. </div><!-- //list-->
  405. </main>
  406. <!-- SCRIPTS -->
  407. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><!-- JQUERY -->
  408. <script src="https://static.tumblr.com/ickcbh2/sFepe3zg2/isotope.pkgd.min.js"></script><!-- ISOTOPE BY METAFIZZY -->
  409. <script src="https://static.tumblr.com/a0dmjhi/hpUpe5tj0/jquery.style-my-tooltips.min.js"></script><!-- STYLE-MY-TOOLTOPS BY MALIHU -->
  410. <script type="text/javascript">
  411. (function($) {
  412. $(window).on('load', function() {
  413. // init Isotope
  414. var $grid = $('.list').isotope({
  415. itemSelector: '.category',
  416. masonry: {
  417. columnWidth: 160,
  418. gutter: 10
  419. }
  420. });
  421. // store filter for each group
  422. var filters = {};
  423.  
  424. $('.filters').on('click', '.button', function(event) {
  425. var $button = $( event.currentTarget );
  426. // get group key
  427. var $buttonGroup = $button.parents('.button-group');
  428. var filterGroup = $buttonGroup.attr('data-filter-group');
  429. // set filter for group
  430. filters[ filterGroup ] = $button.attr('data-filter');
  431. // combine filters
  432. var filterValue = concatValues( filters );
  433. // set filter for Isotope
  434. $grid.isotope({ filter: filterValue });
  435. });
  436.  
  437. // change is-checked class on buttons
  438. $('.button-group').each(function(i, buttonGroup) {
  439. var $buttonGroup = $(buttonGroup);
  440. $buttonGroup.on('click', 'button', function(event) {
  441. $buttonGroup.find('.is-checked').removeClass('is-checked');
  442. var $button = $(event.currentTarget);
  443. $button.addClass('is-checked');
  444. });
  445. });
  446.  
  447. // flatten object by concatting values
  448. function concatValues( obj ) {
  449. var value = '';
  450. for ( var prop in obj ) {
  451. value += obj[ prop ];
  452. }
  453. return value;
  454. }
  455. });
  456. // tooltips
  457. $(document).ready(function(){
  458. $("[title]").style_my_tooltips({
  459. tip_follows_cursor: true,
  460. tip_delay_time: 200,
  461. tip_fade_speed: 300
  462. });
  463. });
  464. }(jQuery));
  465. </script>
  466. </body>
  467. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!