API tools faq
paste
Advertisement
octomoosey

the rule of eight

octomoosey
Sep 13th, 2015
3,462
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.26 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- octomoosey @ tumblr -->
  4.  
  5. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <meta name="color:postbg" content="#000"/>
  12. <meta name="color:text" content="#fff"/>
  13. <meta name="color:sidebar" content="#000"/>
  14. <meta name="color:title" content="#ddd"/>
  15. <meta name="color:description" content="#fff"/>
  16. <meta name="color:selectiontext" content="#eaeaea" />
  17. <meta name="color:selectionbg" content="#f2992e" />
  18. <meta name="color:border" content="#fff"/>
  19. <meta name="color:bold" content="#eee" />
  20. <meta name="color:italic" content="#f2992e" />
  21. <meta name="color:posttitle" content="#f2992e" />
  22. <meta name="color:scrollbar" content="#f2992e" />
  23. <meta name="color:link" content="#f2992e"/>
  24. <meta name="color:linkhover" content="#b8b8b8"/>
  25. <meta name="color:info" content="#f2992e"/>
  26. <meta name="color:infohover" content="#b8b8b8"/>
  27. <meta name="color:tags" content="#f2992e"/>
  28. <meta name="color:tagshover" content="#b8b8b8"/>
  29. <meta name="color:tabtitle" content="#f2992e"/>
  30. <meta name="color:tabcontent" content="#fff"/>
  31. <meta name="color:tabbackground" content="#000"/>
  32.  
  33. <meta name="font:body font" content="Gibson">
  34. <meta name="text:text size" content="11px" />
  35.  
  36. <meta name="image:background" content="">
  37.  
  38. <meta name="text:link 1" content="link 1"/>
  39. <meta name="text:link 1 url" content="/"/>
  40. <meta name="text:link 2" content="link 2"/>
  41. <meta name="text:link 2 url" content="/"/>
  42. <meta name="text:link 3" content="link 3"/>
  43. <meta name="text:link 3 url" content="/"/>
  44. <meta name="text:link 4" content="link 4"/>
  45. <meta name="text:link 4 url" content="/"/>
  46. <meta name="text:link 5" content="link 5"/>
  47. <meta name="text:link 5 url" content="/"/>
  48.  
  49. <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  50.  
  51. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  52.  
  53. <script type="text/javascript">
  54. jQuery(document).ready(function($) {
  55. $('.toggle').each(function(){
  56. $(this).find('.toggle-content').hide();
  57. });
  58. $('.toggle a.toggle-trigger').click(function(){
  59. var el = $(this), parent = el.closest('.toggle');
  60.  
  61. if( el.hasClass('active') )
  62. {
  63. parent.find('.toggle-content').slideToggle();
  64. el.removeClass('active');
  65. }
  66. else
  67. {
  68. parent.find('.toggle-content').slideToggle();
  69. el.addClass('active');
  70. }
  71. return false;
  72. });
  73.  
  74. });
  75. </script>
  76.  
  77. <style type="text/css">
  78.  
  79. iframe#tumblr_controls {
  80. right:2px !important;
  81. position: fixed !important;
  82. -webkit-transition: opacity 0.7s linear;
  83. opacity: 0.5;
  84. -webkit-transition: all 0.8s ease-out;
  85. -moz-transition: all 0.8s ease-out;
  86. transition: all 0.8s ease-out;
  87. -webkit-filter: invert(100%);}
  88.  
  89. iframe#tumblr_controls:hover {
  90. -webkit-transition: opacity 0.7s linear;
  91. opacity: 0.9;
  92. -webkit-transition: all 0.4s ease-out;
  93. -moz-transition: all 0.4s ease-out;
  94. transition: all 0.4s ease-out;
  95. -webkit-filter: invert(100%);}
  96.  
  97. ::-webkit-scrollbar {
  98. width: 3px;
  99. height: 5px;
  100. background: {color:Background};}
  101.  
  102. ::-webkit-scrollbar-thumb {
  103. background: {color:Scrollbar};
  104. border-radius: 16px;
  105. border-top: 5px solid {color:Background};}
  106.  
  107. ::-moz-selection {
  108. color:{color:selectiontext};
  109. background:{color:selectionbg};}
  110.  
  111. ::selection {
  112. color:{color:selectiontext};
  113. background:{color:selectionbg};}
  114.  
  115. body {
  116. color:{color:text};
  117. font-family:{font:body font};
  118. font-size: {text:text size};
  119. background-color:#fff;
  120. background-attachment:fixed;
  121. background-image:url('{image:background}');
  122. background-repeat:no-repeat;
  123. background-position: bottom right;
  124. margin-top:0px;}
  125.  
  126. a {
  127. text-decoration:none;
  128. outline:none;
  129. -moz-outline-style:none;
  130. color:{color:link};
  131. -webkit-transition: all 0.7s ease;
  132. -moz-transition: all 0.7s ease;
  133. -o-transition: all 0.7s ease;}
  134.  
  135. a:hover {
  136. color:{color:linkhover};
  137. -webkit-transition: all 0.7s ease;
  138. -moz-transition: all 0.7s ease;
  139. -o-transition: all 0.7s ease;}
  140.  
  141. blockquote {
  142. padding:2px 7px;
  143. margin:3px 0 3px 8px;
  144. border-left:1px dashed {color:border};
  145. background-color:transparent;}
  146.  
  147. blockquote img {
  148. max-width:100%;
  149. height:auto;}
  150.  
  151. b, strong {
  152. text-transform:uppercase;
  153. color:{color:bold};
  154. font-size:14px;}
  155.  
  156. i, em {
  157. font-family: 'Fjalla One', sans-serif;
  158. color:{color:italic};
  159. letter-spacing:1.5px;
  160. font-size:14px;}
  161.  
  162. small,sup,sub {
  163. font-size:{text:Text Size};}
  164.  
  165. big {
  166. font-size:12px;}
  167.  
  168. pre {
  169. color:{color:text};
  170. font-size:10px;
  171. padding:20px;
  172. white-space: pre-wrap;
  173. white-space: -moz-pre-wrap;
  174. white-space: -pre-wrap;
  175. white-space: -o-pre-wrap;
  176. word-wrap: break-word;}
  177.  
  178. img {
  179. max-width:100%;
  180. height:auto;}
  181.  
  182. h1 {
  183. font-family: 'Fjalla One', sans-serif;
  184. font-size: 20px;
  185. line-height: 15px;
  186. letter-spacing:2px;
  187. font-weight:normal;
  188. color:{color:posttitle};}
  189.  
  190. h2 {
  191. font-family: 'Fjalla One', sans-serif;
  192. font-size: 20px;
  193. line-height: 15px;
  194. letter-spacing:6px;
  195. font-weight:normal;
  196. color:{color:posttitle};}
  197.  
  198. #content {
  199. position:absolute;
  200. width:400px;
  201. left:230px;
  202. margin-top:0px;
  203. margin-bottom:30px;}
  204.  
  205. #post {
  206. width:400px;
  207. padding:20px;
  208. line-height: 120%;
  209. background-color: {color:postbg};
  210. margin-top:50px;
  211. -webkit-box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.63);
  212. -moz-box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.63);
  213. box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.63);}
  214.  
  215. #header {
  216. position:relative;
  217. margin-right:0px;
  218. margin-top:0px;
  219. width:100%;
  220. height:120px;
  221. background:{color:sidebar};}
  222.  
  223. #title {
  224. font-family: 'Fjalla One', sans-serif;
  225. font-size: 22px;
  226. color:{color:title};
  227. z-index:99999;
  228. position:absolute;
  229. margin-top:80px;
  230. right:10px;
  231. padding:10px;
  232. text-align:right;
  233. letter-spacing:2px;}
  234.  
  235. #side {
  236. z-index:1;
  237. top: 0px;
  238. height:100%;
  239. background:{color:sidebar};
  240. left: 0px;
  241. position: fixed;
  242. width: 180px;}
  243.  
  244. #nav {
  245. margin-top:0px;
  246. float:right;
  247. text-align:right;
  248. width:180px;}
  249.  
  250. #nav a {
  251. font-family: 'Fjalla One', sans-serif;
  252. border-bottom: 1px solid {color:description};
  253. display:block;
  254. line-height:32px;
  255. font-size: 12px;
  256. margin-right: 0px;
  257. padding-right: 20px;
  258. letter-spacing: 0px;
  259. padding-left:10px;
  260. text-shadow: 1px 1px 1px #000;
  261. -moz-transition-duration:0.6s;
  262. -webkit-transition-duration:0.6s;
  263. -o-transition-duration:0.6s;}
  264.  
  265. #nav a:hover {
  266. margin-right: 0px;
  267. padding-right: 20px;
  268. letter-spacing: 2px;
  269. word-spacing: -2px;
  270. -moz-transition-duration:0.6s;
  271. -webkit-transition-duration:0.6s;
  272. -o-transition-duration:0.6s;}
  273.  
  274. #description {
  275. line-height:130%;
  276. width:140px;
  277. padding:20px;
  278. margin-top:100px;
  279. font-size:10px;
  280. position:relative;
  281. text-transform:lowercase;
  282. color:{color:description};}
  283.  
  284. #side2 {
  285. position:fixed;
  286. right:10px;
  287. top:130px;}
  288.  
  289. #quote {
  290. font-size:16px;
  291. font-family: 'Fjalla One', sans-serif;
  292. text-align: center;
  293. font-weight: 300;
  294. letter-spacing: 1.5px;
  295. line-height: 130%;}
  296.  
  297. .note {
  298. color:#fff;
  299. text-transform:uppercase;
  300. width:398px;
  301. font-style:normal;
  302. letter-spacing:0px;
  303. font-size: 10px;
  304. text-align:left;
  305. line-height:100%;
  306. margin-left:-15px;}
  307.  
  308. .note li {
  309. list-style-type:none;
  310. padding:10px ;
  311. text-align:left;
  312. -moz-transition-duration:0.5s;
  313. -webkit-transition-duration:0.5s;
  314. -o-transition-duration:0.5s;}
  315.  
  316. .note img.avatar {
  317. margin-right: 10px;
  318. width: 16px;
  319. height: 16px;}
  320.  
  321. .tags {
  322. font-size:8px;
  323. text-transform:uppercase;
  324. margin-top:5px;
  325. -webkit-transition: all 0.8s ease;
  326. -moz-transition: all 0.8s ease;
  327. transition: all 0.8s ease;}
  328.  
  329. .tags a {
  330. color:{color:tags};}
  331.  
  332. .tags a:hover {
  333. color:{color:tagshover};}
  334.  
  335. #permalink {
  336. opacity:1;
  337. font-size:9px;
  338. line-height:11px;
  339. text-align:center;
  340. margin-top:5px;
  341. letter-spacing:1px;
  342. border-top:1px solid {color:text};
  343. padding-top:8px;
  344. padding-bottom:5px;
  345. -webkit-transition: all 0.8s ease;
  346. -moz-transition: all 0.8s ease;
  347. transition: all 0.8s ease;}
  348.  
  349. #permalink a {
  350. color:{color:info};}
  351.  
  352. #permalink a:hover {
  353. color:{color:infohover};}
  354.  
  355. .toggle { width:180px;
  356. font-size: 11px;
  357. line-height:11px;
  358. background: transparent;
  359. margin-bottom: 0px;}
  360.  
  361. .toggle a.toggle-trigger {
  362. display:block;
  363. letter-spacing:2px;
  364. text-align:right;
  365. padding: 10px 20px 10px 20px;
  366. position:relative;
  367. text-decoration: none;
  368. color:{color:tabtitle};}
  369.  
  370. .toggle a.toggle-trigger:hover {
  371. opacity: .8;
  372. cursor: help;
  373. text-decoration: none;}
  374.  
  375. .toggle a.active {
  376. text-decoration: none;
  377. border-bottom: 1px solid #e5e5e5;
  378. -webkit-box-shadow: 0 8px 6px -6px #ccc;
  379. -moz-box-shadow: 0 8px 6px -6px #ccc;
  380. box-shadow: 0 8px 6px -6px #ccc;
  381. color:{color:tabtitle};}
  382.  
  383. .toggle .toggle-content {
  384. background-color:{color:tabbackground};
  385. text-align:right;
  386. padding: 10px 20px 10px 20px;
  387. color:{color:tabcontent};}
  388.  
  389. #credit {
  390. bottom:5px;
  391. right:5px;
  392. opacity:1;
  393. position:fixed;
  394. padding:5px;}
  395.  
  396. </style>
  397.  
  398.  
  399. <body>
  400.  
  401. <div id="side2">
  402. <div class="toggle">
  403. <a href="#" class="toggle-trigger">THIS IS TAB ONE</a>
  404. <div class="toggle-content">
  405. this is where you can put in extra info<p>
  406. or even <a href="/">links</a> if you like<p>
  407. the content boxes will automatically resize to fit your content. one click to open, one to close - and you can add more boxes as you please!
  408. </div>
  409. </div>
  410.  
  411. <div class="toggle">
  412. <a href="#" class="toggle-trigger">THIS IS TAB TWO</a>
  413. <div class="toggle-content">
  414.  
  415. use for any kind of content you like - <br>
  416. you can even add a music player :)
  417. </div>
  418. </div>
  419.  
  420. <div class="toggle">
  421. <a href="#" class="toggle-trigger">THIS IS TAB THREE</a>
  422. <div class="toggle-content">
  423.  
  424. <a href="/">here's a list of links</a><br>
  425. <a href="/">and more links</a><br>
  426. <a href="/">and even more</a><br>
  427. <a href="/">and - okay - </a><br>
  428. <a href="/">you get the picture- yes XD</a><br>
  429.  
  430. </div>
  431. </div>
  432. </div>
  433.  
  434. <div id="header"><div id="title">{title}</div></div>
  435. <div id="side">
  436.  
  437. <div id="description">{description}<p><center>{block:Pagination}
  438. {block:PreviousPage}<a href="{PreviousPage}"><big>⇜</big></a>{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}<a href="{NextPage}"><big>⇝</big></a>
  439. {/block:NextPage}
  440. {/block:Pagination} </center></div>
  441.  
  442. <div id="nav">
  443. <a href="/">01. Return</a>
  444. <a href="/ask">02. Queries</a>
  445. <a href="/submit">03. Submit</a>
  446. {block:iflink1}<a href="{text:link 1 url}">04. {text:link 1}</a>{/block:iflink1}
  447. {block:iflink2}<a href="{text:link 2 url}">05. {text:link 2}</a>{/block:iflink2}
  448. {block:iflink3}<a href="{text:link 3 url}">06. {text:link 3}</a>{/block:iflink3}
  449. {block:iflink4}<a href="{text:link 4 url}">07. {text:link 4}</a>{/block:iflink4}
  450. {block:iflink5}<a href="{text:link 5 url}">08. {text:link 5}</a>{/block:iflink5}
  451. </div>
  452.  
  453. </div>
  454.  
  455. </div>
  456. </div>
  457. <div id="content">
  458. {block:Posts}
  459. <div id="post">
  460.  
  461. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  462.  
  463. {block:Photo}<center><img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  464. </center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  465.  
  466. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  467.  
  468. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  469.  
  470. {block:Link}<a href="{URL}"{Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  471.  
  472. {block:Quote}<div id="quote">“{Quote}” — <b><i>{Source}</i></b></div> {/block:Quote}
  473.  
  474. {block:Audio}{AudioPlayerWhite}<p>{block:TrackName}Track: {TrackName}<br>{/block:TrackName}{block:Artist}Artist: {Artist}<br>{/block:Artist}{block:Album}Album: {Album}<br>{/block:Album}{block:PlayCount}Played: {PlayCount}{/block:PlayCount}<p>{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  475.  
  476. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label} </b>{/block:Label}<span><i>{Line}</i><br></span>{/block:Lines}{/block:Chat}
  477.  
  478. {block:Answer}
  479. <table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
  480. <tr>
  481. <td style="vertical-align:top;padding-right:10px;" width="42px"><img src="{AskerPortraitURL-96}" height="42px" width="42px"></td>
  482. <td style="vertical-align:top; font-size:14px;"><i>{Asker} asked:</i> {Question}</td>
  483. </tr>
  484. </table>
  485. {Answer}
  486. {/block:Answer}
  487.  
  488. {block:Date}
  489. <div id="permalink">
  490. <a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</a> <a href="{Permalink}">{12Hour}:{Minutes}</a> {block:NoteCount}<a href="{Permalink}">{NoteCount}n</a>{/block:NoteCount}
  491. <br>
  492.  
  493. {block:RebloggedFrom} <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}">source</a>{/block:ContentSource} <a href="{ReblogURL}">reblog</a>{/block:permalinkpage}
  494.  
  495. </div>
  496. {block:HasTags}<div class="tags">{block:Tags} #<a href="{TagUrl}"> {Tag}</a>{/block:Tags}</div>{/block:HasTags}
  497. </div>
  498. {/block:Date}
  499.  
  500. {block:PostNotes}
  501. <div class="note">
  502. {PostNotes}
  503. </div>
  504. {/block:PostNotes}
  505.  
  506. {/block:Posts}
  507.  
  508. </div>
  509.  
  510. {block:ContentSource}
  511. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  512. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  513. {/block:SourceLogo}
  514. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  515. {/block:ContentSource}
  516. </div>
  517.  
  518. </div>
  519.  
  520. <div id="credit"><a href="https://octomoosey.tumblr.com/" title="theme by octomoosey"><img src="https://31.media.tumblr.com/ce8b580be9fa9afaa442fdb216c9b293/tumblr_inline_nj1tziQKpe1ronkfd.png"></a></div>
  521. </div></div></div>
  522. </body>
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!