API tools faq
paste
clerihew

04. blue day

clerihew
Sep 14th, 2018
345
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. © Clerihew Themes 2018
  4.  
  5. Do not use without reading terms of use.
  6.  
  7. Contact me at clerihew.tumblr.com if you have problems with any
  8. un-heavily edited code or if you have questions on how to use this theme.
  9. -->
  10. <!--
  11. Color Hex Codes used in this theme:
  12. #e4f1f7
  13. #f1f8fb
  14. #e4f1f1
  15. #a9d2e6
  16. #c0c0c0
  17. #6b6b6b
  18. -->
  19. <header>
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  22.  
  23. <title>{Title}</title>
  24.  
  25. <style>
  26.  
  27. /* PAGE FADE IN */
  28. body {
  29. opacity: 1;
  30. transition: opacity 2s;
  31. background-color: #f1f8fb;
  32. }
  33.  
  34. body.fade {
  35. opacity: 0;
  36. transition: none;
  37. }
  38.  
  39. /* SIDEBAR */
  40.  
  41. /* sidebar background, shadow */
  42. .sidebar {
  43. width: 300px;
  44. height: 400px;
  45. position: fixed;
  46. top: 150px;
  47. left: 100px;
  48. background-color: #e4f1f7;
  49. box-shadow: 3px 3px 15px #c0c0c0;
  50. }
  51.  
  52. /* sidebar title color, font, shadow color */
  53. .sidebar h1 {
  54. font-family: "Poppins";
  55. text-align: center;
  56. padding: 10px;
  57. margin-bottom: 0;
  58. color: black;
  59. text-shadow: 2px 2px #fff;
  60. border-bottom: 2px solid white;
  61. }
  62.  
  63. /* description color, font*/
  64. .sidebar h5 {
  65. font-family: "Poppins";
  66. color: black;
  67. padding: 10px;
  68. margin-bottom: 0;
  69. margin-top: 0;
  70. border-bottom: 2px solid white;
  71. }
  72.  
  73. /* sidebar link background color, font */
  74. .sidebar .links {
  75. background-color: white;
  76. font-family: "Poppins";
  77. width: 100px;
  78. margin-top: 8px;
  79. margin-bottom: 8px;
  80. margin-left: 100px;
  81. margin-right: 100px;
  82. text-align: center;
  83. }
  84.  
  85. /* sidebar links font color */
  86. .sidebar .link-decoration a {
  87. text-decoration: none;
  88. color: #a9d2e6;
  89. background-color: white;
  90. -webkit-transition: color 1s;
  91. -moz-transition: color 1s;
  92. -o-transition: color 1s;
  93. transition: color 1s;
  94. }
  95.  
  96. /* sidebar links font color hover */
  97. .sidebar .link-decoration a:hover {
  98. color: #e4f1f7;
  99. }
  100.  
  101. /* DO NOT TOUCH THIS */
  102. .credit {
  103. font-family: "Poppins";
  104. position: fixed;
  105. bottom: 3px;
  106. right: 3px;
  107. }
  108.  
  109. .credit a {
  110. color: white;
  111. background-color: #c0c0c0;
  112. text-decoration: none;
  113. padding: 2px;
  114. -webkit-transition: background-color 1s;
  115. -moz-transition: background-color 1s;
  116. -o-transition: background-color 1s;
  117. transition: background-color 1s;
  118. }
  119.  
  120. .credit a:hover {
  121. color: black;
  122. background-color: #6b6b6b;
  123. }
  124.  
  125. /* POSTS */
  126.  
  127. /* posts font family */
  128. #content {
  129. margin-left: 575px;
  130. margin-right: 200px;
  131. margin-top: 0px;
  132. width: 400px;
  133. font-family: "Poppins";
  134. }
  135.  
  136. /* posts links color */
  137. #content a {
  138. text-decoration: none;
  139. color: #a9d2e6;
  140. -webkit-transition: color 1s;
  141. -moz-transition: color 1s;
  142. -o-transition: color 1s;
  143. transition: color 1s;
  144. }
  145.  
  146. /* posts links color hover */
  147. #content a:hover {
  148. color: #e4f1f1;
  149. }
  150.  
  151. #content blockquote {
  152. padding-left: 10px;
  153. }
  154.  
  155. img {
  156. border: 0;
  157. max-width: 100%;
  158. }
  159.  
  160. #content #posts {
  161. background-color: white;
  162. width: 500px;
  163. padding: 10px;
  164. margin: 0 auto 20px;
  165. }
  166.  
  167. /* posts title font size */
  168. #content #posts .title {
  169. font-size: 22px;
  170. }
  171.  
  172. /* posts text font size */
  173. #content #posts .text {
  174. font-size: 14px;
  175. }
  176.  
  177. /* background for questions in asks */
  178. .q {
  179. background-color: rgba(0,0,0,0.1);
  180. padding: 4px;
  181. }
  182.  
  183. #content #posts #permalink {
  184. font-size: 12px;
  185. margin-top: 10px;
  186. }
  187.  
  188. /* individual post pages font family */
  189. #content #notecontainer {
  190. margin: 20px auto;
  191. width: 500px;
  192. font-family: "Poppins";
  193. }
  194.  
  195. /* post pages links color */
  196. #content #notecontainer a {
  197. color: #a9d2e6;
  198. padding: 3px;
  199. -webkit-transition: color 1s;
  200. -moz-transition: color 1s;
  201. -o-transition: color 1s;
  202. transition: color 1s;
  203. }
  204.  
  205. /* post pages links color hover */
  206. #content #notecontainer a:hover {
  207. color: #e4f1f7;
  208. }
  209.  
  210. #content #notecontainer ol.notes {
  211. list-style-type: none;
  212. margin: 0;
  213. padding: 3px;
  214. }
  215.  
  216. #content #postcontainer img.avatar {
  217. width: 16px;
  218. height: 16px;
  219. }
  220.  
  221. /* PAGINATION */
  222.  
  223. /* pagination font family */
  224. .pagenav {
  225. width: 400px;
  226. font-family: "Poppins";
  227. text-align: center;
  228. margin-left: 625px;
  229. margin-right: 225px;
  230. padding: 5px;
  231. }
  232.  
  233. /* pagenav link color */
  234. .pagenav a {
  235. color: black;
  236. text-decoration: none;
  237. -webkit-transition: color 1s;
  238. -moz-transition: color 1s;
  239. -o-transition: color 1s;
  240. transition: color 1s;
  241. display: inline-block;
  242. margin-top: 10px;
  243. }
  244.  
  245. /* pagenav link color hover */
  246. .pagenav a:hover {
  247. color: #a9d2e6;
  248. }
  249.  
  250.  
  251. /* TUMBLR CONTROLS (credit to @cyantists on tumblr) */
  252.  
  253. iframe.tmblr-iframe {
  254. z-index:99999999999999!important;
  255. top:-2px!important;
  256. right:0!important;
  257. opacity:0;
  258. padding-right:38px;
  259. /* delete invert(1) from here */
  260. filter:invert(1) contrast(150%);
  261. -webkit-filter:invert(1) contrast(150%);
  262. -o-filter:invert(1) contrast(150%);
  263. -moz-filter:invert(1) contrast(150%);
  264. -ms-filter:invert(1) contrast(150%);
  265. /* to here if your blog has a dark background */
  266. transform:scale(0.65);
  267. transform-origin:100% 0;
  268. -webkit-transform:scale(0.65);
  269. -webkit-transform-origin:100% 0;
  270. -o-transform:scale(0.65);
  271. -o-transform-origin:100% 0;
  272. -moz-transform:scale(0.65);
  273. -moz-transform-origin:100% 0;
  274. -ms-transform:scale(0.65);
  275. -ms-transform-origin:100% 0;
  276. }
  277.  
  278. iframe.tmblr-iframe:hover {
  279. opacity:0.6!important;
  280. }
  281.  
  282. .hcontrols {
  283. position:fixed;
  284. top:0;
  285. right:0;
  286. z-index:999999999;
  287. }
  288.  
  289. .hcontrols svg {
  290. width:14px;
  291. height:14px;
  292. padding:9px;
  293. }
  294.  
  295. /* gear color */
  296. .hcontrols svg path {
  297. fill: black;/* change this to change the color of the icon */
  298. }
  299.  
  300. /* SCROLLBAR (credit to @help-with-coding on tumblr) */
  301. ::-webkit-scrollbar {
  302. width: 7px; /* width of total scrollbar */
  303. background: #fff; /* background of scrollbar */
  304. border: 1px solid #fff; /* border around whole scrollbar */
  305. }
  306.  
  307. ::-webkit-scrollbar-thumb {
  308. background: #a9d2e6; /* color of the moving part of the scrollbar (thumb) */
  309. border: 1px solid #a9d2e6; /* border around moving part of scrollbar (overlaps with border of total scrollbar) */
  310. }
  311.  
  312.  
  313.  
  314. </style>
  315.  
  316. </head>
  317. <body>
  318.  
  319. <script>
  320. document.body.className = 'fade';
  321. </script>
  322.  
  323. <div class="sidebar">
  324.  
  325. <h1>{Title}</h1>
  326.  
  327. {block:Description}<h5>{Description}</h5>{block:Description}
  328.  
  329. <div class="link-decoration">
  330.  
  331. <a href="/"><div class="links">home</div></a>
  332.  
  333. {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
  334.  
  335. {block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
  336.  
  337. {block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
  338.  
  339. </div>
  340.  
  341.  
  342. </div>
  343.  
  344.  
  345. </div>
  346.  
  347. <script>
  348. document.addEventListener("DOMContentLoaded", function(e) {
  349. document.body.className = '';
  350. });
  351. </script>
  352.  
  353. <!-- DO NOT TOUCH THIS -->
  354. <div class="credit">
  355. <a href="https://clerihew.tumblr.com">CT</a>
  356. </div>
  357.  
  358. <div id="content">
  359. {block:Posts}
  360. <div id="posts">
  361. {block:Photo}
  362. <img src="{PhotoURL-500}">
  363. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  364. {/block:Photo}
  365.  
  366. {block:Photoset}
  367. {Photoset-500}
  368. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:Caption}
  369. {/block:Photoset}
  370.  
  371. {block:Video}
  372. {Video-500}
  373. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  374. {/block:Video}
  375.  
  376. {block:Audio}
  377. {AudioPlayerBlack}
  378. <br /><div class="text">{PlayCountWithLabel}</div>
  379. {block:Caption}<br /><div class="text">{Caption}</div>{/block:Caption}
  380. {/block:Audio}
  381.  
  382. {block:Quote}
  383. <div class="title">"{Quote}"</div>
  384. {block:Source}<br>~ {Source}{/block:Source}
  385. {/block:Quote}
  386.  
  387. {block:Text}
  388. {block:Title}<div class="title">{Title}<br /></div>{/block:Title}
  389. <div class="text">{Body}</div>
  390. {/block:Text}
  391.  
  392. {block:Answer}
  393. <div class="q">{Question}<br />
  394. {Asker}</div><br />
  395. {Answer}
  396. {/block:Answer}
  397.  
  398. {block:Chat}
  399. <div class="title">{block:Title}{Title}<br />{/block:Title}</div>
  400. <div class="text">{block:Lines}
  401. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  402. {/block:Lines}</div>
  403. {/block:Chat}
  404.  
  405. {block:Link}
  406. <a href="{URL}">{Name}</a>
  407. {block:Description}<br /><div class="text">{Description}</div>{/block:Description}
  408. {/block:Link}
  409.  
  410. <div id="permalink">
  411. <a href="{PermaLink}">
  412. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  413. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  414. </a>
  415. </div>
  416. </div>
  417.  
  418. {block:PostNotes}
  419. <div id="notecontainer">{PostNotes}</div>
  420. {/block:PostNotes}
  421.  
  422.  
  423. {/block:Posts}
  424. </div>
  425.  
  426. <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>
  427.  
  428. </div>
  429.  
  430. {block:Pagination}
  431. <div class="pagenav">
  432. <!-- change pagination words here -->
  433. {block:PreviousPage}<a href="{PreviousPage}">Previous</a>{/block:PreviousPage}
  434. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  435. </div>
  436. {/block:Pagination}
  437.  
  438. </body>
  439. </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!