API tools faq
paste
clerihew

11. lovestruck

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