API tools faq
paste
clerihew

08. ur dreams

clerihew
Nov 3rd, 2018
351
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2018
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11. <!--
  12. Color Hex Codes used in this theme:
  13. #e5e5e5
  14. #bbb
  15. #fbc3ca
  16. #f67b8b
  17. #fddbdf
  18. #fabbc3
  19. #f9abb5
  20. #f893a0
  21. #f67b8b
  22. -->
  23.  
  24.  
  25. <title>{Title}</title>
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  28.  
  29. <!-- basic variables -->
  30. <meta name="text:Link 1 URL" content=""/>
  31. <meta name="text:Link 1" content=""/>
  32. <meta name="text:Link 2 URL" content=""/>
  33. <meta name="text:Link 2" content=""/>
  34. <meta name="text:Link 3 URL" content=""/>
  35. <meta name="text:Link 3" content=""/>
  36. <meta name="text:Link 4 URL" content=""/>
  37. <meta name="text:Link 4" content=""/>
  38. <meta name="text:Link 5 URL" content=""/>
  39. <meta name="text:Link 5" content=""/>
  40. <meta name="text:Link 6 URL" content=""/>
  41. <meta name="text:Link 6" content=""/>
  42.  
  43.  
  44. <style>
  45.  
  46. /* main body background and font */
  47. body {
  48. background: #e5e5e5;
  49. font-family: "Source Sans Pro", sans-serif;
  50. }
  51.  
  52. /* sidebar background color */
  53. .sidebar {
  54. width: 300px;
  55. height: 100%;
  56. background: white;
  57. position: fixed;
  58. left: 0px;
  59. bottom: 0px;
  60. }
  61.  
  62. /* sidebar icon border color */
  63. .sidebar img {
  64. margin-top: 50px;
  65. border: solid #fbc3ca 3px;
  66. }
  67.  
  68. /* sidebar links */
  69. .sidebar .link-1 {
  70. text-align: center;
  71. display: inline-block;
  72. width: 100px;
  73. margin-left: 100px;
  74. margin-top: 50px;
  75. }
  76.  
  77. .sidebar .link-1 a {
  78. color: #fddbdf;
  79. text-decoration: none;
  80. font-size: 24px;
  81. -webkit-transition: color 0.5s;
  82. -moz-transition: color 0.5s;
  83. -o-transition: color 0.5s;
  84. transition: color 0.5s;
  85. }
  86.  
  87. .sidebar .link-1 a:hover {
  88. color: #e5e5e5;
  89. }
  90.  
  91. .sidebar .link-2 {
  92. text-align: center;
  93. display: inline-block;
  94. width: 100px;
  95. margin-left: 100px;
  96. margin-top: 20px;
  97. }
  98.  
  99. .sidebar .link-2 a {
  100. color: #fbc3ca;
  101. text-decoration: none;
  102. font-size: 24px;
  103. -webkit-transition: color 0.5s;
  104. -moz-transition: color 0.5s;
  105. -o-transition: color 0.5s;
  106. transition: color 0.5s;
  107. }
  108.  
  109. .sidebar .link-2 a:hover {
  110. color: #e5e5e5;
  111. }
  112.  
  113. .sidebar .link-3 {
  114. text-align: center;
  115. display: inline-block;
  116. width: 100px;
  117. margin-left: 100px;
  118. margin-top: 20px;
  119. }
  120.  
  121. .sidebar .link-3 a {
  122. color: #fabbc3;
  123. text-decoration: none;
  124. font-size: 24px;
  125. -webkit-transition: color 0.5s;
  126. -moz-transition: color 0.5s;
  127. -o-transition: color 0.5s;
  128. transition: color 0.5s;
  129. }
  130.  
  131. .sidebar .link-3 a:hover {
  132. color: #e5e5e5;
  133. }
  134.  
  135. .sidebar .link-4 {
  136. text-align: center;
  137. display: inline-block;
  138. width: 100px;
  139. margin-left: 100px;
  140. margin-top: 20px;
  141. }
  142.  
  143. .sidebar .link-4 a {
  144. color: #f9abb5;
  145. text-decoration: none;
  146. font-size: 24px;
  147. -webkit-transition: color 0.5s;
  148. -moz-transition: color 0.5s;
  149. -o-transition: color 0.5s;
  150. transition: color 0.5s;
  151. }
  152.  
  153. .sidebar .link-4 a:hover {
  154. color: #e5e5e5;
  155. }
  156.  
  157. .sidebar .link-5 {
  158. text-align: center;
  159. display: inline-block;
  160. width: 100px;
  161. margin-left: 100px;
  162. margin-top: 20px;
  163.  
  164. }
  165.  
  166. .sidebar .link-5 a {
  167. color: #f893a0;
  168. text-decoration: none;
  169. font-size: 24px;
  170. -webkit-transition: color 0.5s;
  171. -moz-transition: color 0.5s;
  172. -o-transition: color 0.5s;
  173. transition: color 0.5s;
  174. }
  175.  
  176. .sidebar .link-5 a:hover {
  177. color: #e5e5e5;
  178. }
  179.  
  180. .sidebar .link-6 {
  181. text-align: center;
  182. display: inline-block;
  183. width: 100px;
  184. margin-left: 100px;
  185. margin-top: 20px;
  186. }
  187.  
  188. .sidebar .link-6 a {
  189. color: #f67b8b;
  190. text-decoration: none;
  191. font-size: 24px;
  192. -webkit-transition: color 0.5s;
  193. -moz-transition: color 0.5s;
  194. -o-transition: color 0.5s;
  195. transition: color 0.5s;
  196. }
  197.  
  198. .sidebar .link-6 a:hover {
  199. color: #e5e5e5;
  200. }
  201.  
  202. /* DO NOT TOUCH THIS */
  203. .credit {
  204. width: 18px;
  205. height: 20px;
  206. background-color: white;
  207. position: fixed;
  208. bottom: 5px;
  209. right: 5px;
  210. text-align: center;
  211. }
  212.  
  213. .credit a {
  214. text-decoration: none;
  215. color: #ccc;
  216. }
  217.  
  218. #content {
  219. width: 500px;
  220. margin-left: 545px;
  221. margin-right: 250px;
  222. }
  223.  
  224. /* posts links color */
  225. #content a {
  226. text-decoration: none;
  227. color: #fbc3ca;
  228. -webkit-transition: color 0.5s;
  229. -moz-transition: color 0.5s;
  230. -o-transition: color 0.5s;
  231. transition: color 0.5s;
  232. }
  233.  
  234. /* posts links color hover */
  235. #content a:hover {
  236. color: #f67b8b;
  237. }
  238.  
  239. #content blockquote {
  240. padding-left: 10px;
  241. }
  242.  
  243. img {
  244. border: 0;
  245. max-width: 100%;
  246. }
  247.  
  248. /* post background color */
  249. #content #posts {
  250. background-color: white;
  251. box-shadow: 5px 10px 20px #bbb;
  252. width: 500px;
  253. padding: 10px;
  254. margin: 0 auto 20px;
  255. }
  256.  
  257. /* posts title font size */
  258. #content #posts .title {
  259. font-size: 22px;
  260. }
  261.  
  262. /* posts text font size */
  263. #content #posts .text {
  264. font-size: 14px;
  265. }
  266.  
  267. /* background for questions in asks */
  268. .q {
  269. background-color: #e5e5e5;
  270. color: black;
  271. padding: 4px;
  272. }
  273.  
  274. #content #posts #permalink {
  275. font-size: 12px;
  276. margin-top: 10px;
  277. padding: 5px;
  278. border-bottom: 2px solid white;
  279. }
  280.  
  281. #content #notecontainer {
  282. margin: 20px auto;
  283. width: 500px;
  284. }
  285.  
  286. /* post pages links color */
  287. #content #notecontainer a {
  288. color: #fcb3ca;
  289. padding: 3px;
  290. -webkit-transition: color 0.5s;
  291. -moz-transition: color 0.5s;
  292. -o-transition: color 0.5s;
  293. transition: color 0.5s;
  294. }
  295.  
  296. /* post pages links color hover */
  297. #content #notecontainer a:hover {
  298. color: #f67b8b;
  299. }
  300.  
  301. #content #notecontainer ol.notes {
  302. list-style-type: none;
  303. margin: 0;
  304. padding: 3px;
  305. }
  306.  
  307. #content #postcontainer img.avatar {
  308. width: 16px;
  309. height: 16px;
  310. }
  311.  
  312. .pagenav {
  313. width: 500px;
  314. margin-left: 545px;
  315. margin-right: 250px;
  316. text-align: center;
  317. }
  318.  
  319. /* pagenav color */
  320. .pagenav a {
  321. color: #fbc3ca;
  322. text-decoration: none;
  323. display: inline-block;
  324. margin-top: 15px;
  325. -webkit-transition: color 0.5s;
  326. -moz-transition: color 0.5s;
  327. -o-transition: color 0.5s;
  328. transition: color 0.5s;
  329. }
  330.  
  331. /* pagenav hover color */
  332. .pagenav a:hover {
  333. color: #f67b8b;
  334. }
  335.  
  336. ::-webkit-scrollbar {
  337. width: 5px;
  338. }
  339.  
  340. /* scrollbar main color */
  341. ::-webkit-scrollbar-track {
  342. background: white;
  343. }
  344.  
  345. /* scrollbar thumb color */
  346. ::-webkit-scrollbar-thumb {
  347. background: #fbc3ca;
  348. }
  349.  
  350. /* scrollbar thumb color on hover */
  351. ::-webkit-scrollbar-thumb:hover {
  352. background: #f67b8b;
  353. }
  354.  
  355. /* tumblr controls credit to @cyantists on tumblr */
  356. iframe.tmblr-iframe {
  357. z-index:99999999999999!important;
  358. top:-2px!important;
  359. right:15px!important;
  360. opacity:0;
  361. padding-right:38px;
  362. /* delete invert(1) from here */
  363. filter:invert(1) contrast(150%);
  364. -webkit-filter:invert(1) contrast(150%);
  365. -o-filter:invert(1) contrast(150%);
  366. -moz-filter:invert(1) contrast(150%);
  367. -ms-filter:invert(1) contrast(150%);
  368. /* to here if your blog has a dark background */
  369. transform:scale(0.65);
  370. transform-origin:100% 0;
  371. -webkit-transform:scale(0.65);
  372. -webkit-transform-origin:100% 0;
  373. -o-transform:scale(0.65);
  374. -o-transform-origin:100% 0;
  375. -moz-transform:scale(0.65);
  376. -moz-transform-origin:100% 0;
  377. -ms-transform:scale(0.65);
  378. -ms-transform-origin:100% 0;
  379. }
  380.  
  381. iframe.tmblr-iframe:hover {
  382. opacity:0.6!important;
  383. }
  384.  
  385. .hcontrols {
  386. position:fixed;
  387. top:0;
  388. right:0;
  389. z-index:999999999;
  390. }
  391.  
  392. .hcontrols svg {
  393. width:14px;
  394. height:14px;
  395. padding:9px;
  396. }
  397.  
  398. /* gear color */
  399. .hcontrols svg path {
  400. fill: white;/* change this to change the color of the icon */
  401. }
  402.  
  403. </style>
  404.  
  405. </head>
  406. <body>
  407.  
  408. <div class="sidebar">
  409.  
  410. <div align="center">
  411. <img src="{PortraitURL-128}">
  412. </div>
  413.  
  414. <div class="link-1">
  415. {block:ifLink1}<a href="{text:Link 1 URL}">1. {text:Link 1}</a>{/block:ifLink1}
  416. </div>
  417. <div class="link-2">
  418. {block:ifLink2}<a href="{text:Link 2 URL}">2. {text:Link 2}</a>{/block:ifLink2}
  419. </div>
  420. <div class="link-3">
  421. {block:ifLink3}<a href="{text:Link 3 URL}">3. {text:Link 3}</a>{/block:ifLink3}
  422. </div>
  423. <div class="link-4">
  424. {block:ifLink4}<a href="{text:Link 4 URL}">4. {text:Link 4}</a>{/block:ifLink4}
  425. </div>
  426. <div class="link-5">
  427. {block:ifLink5}<a href="{text:Link 5 URL}">5. {text:Link 5}</a>{/block:ifLink5}
  428. </div>
  429. <div class="link-6">
  430. {block:ifLink6}<a href="{text:Link 6 URL}">6. {text:Link 6}</a>{/block:ifLink6}
  431. </div>
  432.  
  433. <!-- DO NOT TOUCH THIS -->
  434. <div class="credit">
  435. <a href="https://clerihew.tumblr.com/">C</a>
  436. </div>
  437.  
  438. </div>
  439.  
  440. <div id="content">
  441. {block:Posts}
  442. <div id="posts">
  443. {block:Photo}
  444. <img src="{PhotoURL-500}">
  445. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  446. {/block:Photo}
  447.  
  448. {block:Photoset}
  449. {Photoset-500}
  450. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:Caption}
  451. {/block:Photoset}
  452.  
  453. {block:Video}
  454. {Video-500}
  455. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  456. {/block:Video}
  457.  
  458. {block:Audio}
  459. {AudioPlayerBlack}
  460. <br /><div class="text">{PlayCountWithLabel}</div>
  461. {block:Caption}<br /><div class="text">{Caption}</div>{/block:Caption}
  462. {/block:Audio}
  463.  
  464. {block:Quote}
  465. <div class="title">"{Quote}"</div>
  466. {block:Source}<br>~ {Source}{/block:Source}
  467. {/block:Quote}
  468.  
  469. {block:Text}
  470. {block:Title}<div class="title">{Title}<br /></div>{/block:Title}
  471. <div class="text">{Body}</div>
  472. {/block:Text}
  473.  
  474. {block:Answer}
  475. <div class="q">{Question}<br />
  476. {Asker}</div><br />
  477. {Answer}
  478. {/block:Answer}
  479.  
  480. {block:Chat}
  481. <div class="title">{block:Title}{Title}<br />{/block:Title}</div>
  482. <div class="text">{block:Lines}
  483. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  484. {/block:Lines}</div>
  485. {/block:Chat}
  486.  
  487. {block:Link}
  488. <a href="{URL}">{Name}</a>
  489. {block:Description}<br /><div class="text">{Description}</div>{/block:Description}
  490. {/block:Link}
  491.  
  492.  
  493. <div id="permalink">
  494. <a href="{PermaLink}">
  495. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  496. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  497. </a>
  498. </div>
  499. </div>
  500.  
  501. {block:PostNotes}
  502. <div id="notecontainer">{PostNotes}</div>
  503. {/block:PostNotes}
  504.  
  505.  
  506. {/block:Posts}
  507. </div>
  508.  
  509.  
  510. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  511.  
  512. {block:Pagination}
  513. <div class="pagenav">
  514. <!-- change words for pagination here -->
  515. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  516. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  517. </div>
  518. {/block:Pagination}
  519.  
  520.  
  521.  
  522. </body>
  523. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!