API tools faq
paste
clerihew

02. so pretty

clerihew
Aug 28th, 2018
242
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.63 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. #6b6b6b
  13. #fff3f6
  14. #f2b0ce
  15. #ffc0d0
  16. -->
  17. <head>
  18. <title>{Title}</title>
  19.  
  20. <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Quicksand|Sacramento" rel="stylesheet">
  23.  
  24. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  25.  
  26. <style>
  27. /* change background color and main font */
  28. body {
  29. background-color: #fff3f6;
  30. font-family: "Quicksand";
  31. margin: 0;
  32. word-wrap: break-word;
  33. background-attachment: fixed;
  34. }
  35.  
  36. /* SIDEBAR */
  37. /* change sidebar background and text color */
  38. #sidebar {
  39. background-color: #fff3f6;
  40. width: 300px;
  41. position: fixed;
  42. left: 0;
  43. right: 0;
  44. height: 100%;
  45. color: #6b6b6b;
  46. }
  47.  
  48. /* change size and border sidebar image */
  49. #sidebar img {
  50. width: 200px;
  51. height: 200px;
  52. margin-top: 20px;
  53. border: 4px solid white;
  54. border-radius: 20px;
  55. }
  56.  
  57. /* change sidebar title font size/family */
  58. #sidebar .title {
  59. text-align: center;
  60. font-size: 22px;
  61. font-family: "Sacramento";
  62. }
  63.  
  64. /* sidebar title is a link, change link color here */
  65. #sidebar .title a {
  66. color: #6b6b6b;
  67. text-decoration: none;
  68. padding: 5px;
  69. }
  70.  
  71. /* change title hover color */
  72. #sidebar .title a:hover {
  73. color: #f2b0ce;
  74. }
  75.  
  76. /* change sidebar description, font size, font family */
  77. #sidebar .description {
  78. margin-top: 5px;
  79. text-align: center;
  80. font-size: 14px;
  81. padding: 10px;
  82. }
  83.  
  84. /* sidebar description links color */
  85. #sidebar .description a {
  86. text-decoration: none;
  87. color: #6b6b6b;
  88. }
  89.  
  90. /* change description link hover color */
  91. #sidebar .description a:hover {
  92. color: #f2b0ce;
  93. }
  94.  
  95. /* change sidebar background color, font size/family, text color */
  96. #sidebar .links {
  97. background-color: white;
  98. color: #f2b0ce;
  99. font-size: 12px;
  100. text-align: center;
  101. padding-top: 3px;
  102. padding-bottom: 3px;
  103. width: 100px;
  104. margin-top: 10px;
  105. margin-bottom: 10px;
  106. margin-left: 100px;
  107. margin-right: 100px;
  108. border-radius: 5px;
  109. -webkit-transition: background-color 1s;
  110. -moz-transition: background-color 1s;
  111. -o-transition: background-color 1s;
  112. transition: background-color 1s;
  113. }
  114.  
  115. /* change sidebar links hover */
  116. #sidebar .links:hover {
  117. background-color: #ffc0d0;
  118. color: #fff3f6;
  119. }
  120.  
  121. #sidebar .link-decoration a {
  122. text-decoration: none;
  123. }
  124.  
  125. /* chnage sidebar pagination color */
  126. #sidebar #pagination {
  127. width: 100px;
  128. padding: 5px 0;
  129. margin-top: 10px;
  130. margin-left: 100px;
  131. margin-right: 100px;
  132. color: #fff3f6;
  133. -webkit-transition: color 1s;
  134. -moz-transition: color 1s;
  135. -o-transition: color 1s;
  136. transition: color 1s;
  137. }
  138.  
  139. /* change sidebar pagination color */
  140. #sidebar #pagination a {
  141. color: #f2b0ce;
  142. }
  143.  
  144. /* change sidebar pagination hover color */
  145. #sidebar #pagination a:hover {
  146. color: white;
  147. }
  148.  
  149.  
  150. /* POSTS */
  151. /* change posts text color */
  152. #content {
  153. width: 500px;
  154. margin-left: 550px;
  155. margin-right: 250px;
  156. color: #6b6b6b;
  157. }
  158.  
  159. /* change posts text link color */
  160. #content a {
  161. text-decoration: none;
  162. color: #f9dce9;
  163. }
  164.  
  165. /* change posts text link hover color */
  166. #content a:hover {
  167. color: #f2b0ce;
  168. }
  169.  
  170. #content blockquote {
  171. padding-left: 10px;
  172. }
  173.  
  174. img {
  175. border: 0;
  176. max-width: 100%;
  177. }
  178.  
  179. /* chnage background color of posts */
  180. #content #posts {
  181. background-color: white;
  182. width: 500px;
  183. padding: 10px;
  184. margin: 0 auto 20px;
  185. }
  186.  
  187. /* change post title size */
  188. #content #posts .title {
  189. font-size: 22px;
  190. }
  191.  
  192. /* change post text size */
  193. #content #posts .text {
  194. font-size: 14px;
  195. }
  196.  
  197. /* change ask question background color */
  198. .q {
  199. background-color: rgba(0,0,0,0.1);
  200. padding: 4px;
  201. }
  202.  
  203. #content #posts #permalink {
  204. font-size: 12px;
  205. margin-top: 10px;
  206. }
  207.  
  208. #content #notecontainer {
  209. margin: 20px auto;
  210. width: 500px;
  211. font-family: "Quicksand";
  212. }
  213.  
  214. /* change individual post page link color */
  215. #content #notecontainer a {
  216. color: black;
  217. padding: 3px;
  218. }
  219.  
  220. /* change individual post page link hover color */
  221. #content #notecontainer a:hover {
  222. color: #f2b0ce;
  223. }
  224.  
  225. #content #notecontainer ol.notes {
  226. list-style-type: none;
  227. margin: 0;
  228. padding: 3px;
  229. }
  230.  
  231. #content #postcontainer img.avatar {
  232. width: 24px;
  233. height: 24px;
  234. }
  235.  
  236. /* credit for setting gear code @cyantists */
  237. iframe.tmblr-iframe {
  238. z-index:99999999999999!important;
  239. top:-2px!important;
  240. right:0!important;
  241. opacity:0;
  242. padding-right:38px;
  243. /* delete invert(1) from here */
  244. filter:invert(1) contrast(150%);
  245. -webkit-filter:invert(1) contrast(150%);
  246. -o-filter:invert(1) contrast(150%);
  247. -moz-filter:invert(1) contrast(150%);
  248. -ms-filter:invert(1) contrast(150%);
  249. /* to here if your blog has a dark background */
  250. transform:scale(0.65);
  251. transform-origin:100% 0;
  252. -webkit-transform:scale(0.65);
  253. -webkit-transform-origin:100% 0;
  254. -o-transform:scale(0.65);
  255. -o-transform-origin:100% 0;
  256. -moz-transform:scale(0.65);
  257. -moz-transform-origin:100% 0;
  258. -ms-transform:scale(0.65);
  259. -ms-transform-origin:100% 0;}
  260.  
  261. iframe.tmblr-iframe:hover {
  262. opacity:0.6!important;}
  263.  
  264. .hcontrols {
  265. position:fixed;
  266. top:0;
  267. right:0;
  268. z-index:999999999;}
  269.  
  270. .hcontrols svg {
  271. width:14px;
  272. height:14px;
  273. padding:9px;}
  274.  
  275. /* change this to change the color of the icon */
  276. .hcontrols svg path {
  277. fill: #ffc0d0;}
  278.  
  279. </style>
  280.  
  281. </head>
  282. <body>
  283. <div id="sidebar">
  284. <div align="center">
  285. <!-- Replace link with {PortraitURL-128} for ur icon or image url in "" for any image you want -->
  286. <img src="https://i.imgur.com/jDgBMLz.jpg">
  287. </div>
  288.  
  289. <div class="title"><a href="/">{Title}</a></div>
  290.  
  291. <div class="description">{block:Description}{Description}{/block:Description}</div>
  292.  
  293. <div class="link-decoration">
  294. {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
  295. {block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
  296.  
  297.  
  298. {block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
  299.  
  300. </div>
  301.  
  302. <!-- go to fontawesome.com to find new pagination icons and change "fas..." to whatever you want -->
  303. {block:Pagination}
  304. <div id="pagination">
  305. <div align="center">
  306. {block:PreviousPage}<a href="{PreviousPage}"><i class="fas fa-backward"></i></a>{/block:PreviousPage}
  307. {block:NextPage}<a href="{NextPage}"><i class="fas fa-forward"></i></a>{/block:NextPage}
  308. </div>
  309. </div>
  310. {/block:Pagination}
  311. </div>
  312.  
  313. <div id="content">
  314. {block:Posts}
  315. <div id="posts">
  316. {block:Photo}
  317. <img src="{PhotoURL-500}">
  318. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  319. {/block:Photo}
  320.  
  321. {block:Photoset}
  322. {Photoset-500}
  323. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:Caption}
  324. {/block:Photoset}
  325.  
  326. {block:Video}
  327. {Video-500}
  328. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  329. {/block:Video}
  330.  
  331. {block:Audio}
  332. {AudioPlayerBlack}
  333. <br /><div class="text">{PlayCountWithLabel}</div>
  334. {block:Caption}<br /><div class="text">{Caption}</div>{/block:Caption}
  335. {/block:Audio}
  336.  
  337. {block:Quote}
  338. <div class="title">"{Quote}"</div>
  339. {block:Source}<br>~ {Source}{/block:Source}
  340. {/block:Quote}
  341.  
  342. {block:Text}
  343. {block:Title}<div class="title">{Title}<br /></div>{/block:Title}
  344. <div class="text">{Body}</div>
  345. {/block:Text}
  346.  
  347. {block:Answer}
  348. <div class="q">{Question}<br />
  349. {Asker}</div><br />
  350. {Answer}
  351. {/block:Answer}
  352.  
  353. {block:Chat}
  354. <div class="title">{block:Title}{Title}<br />{/block:Title}</div>
  355. <div class="text">{block:Lines}
  356. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  357. {/block:Lines}</div>
  358. {/block:Chat}
  359.  
  360. {block:Link}
  361. <a href="{URL}">{Name}</a>
  362. {block:Description}<br /><div class="text">{Description}</div>{/block:Description}
  363. {/block:Link}
  364.  
  365. <div id="permalink">
  366. <a href="{PermaLink}">
  367. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  368. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  369. </a>
  370. </div>
  371. </div>
  372.  
  373. {block:PostNotes}
  374. <div id="notecontainer">{PostNotes}</div>
  375. {/block:PostNotes}
  376.  
  377.  
  378. {/block:Posts}
  379. </div>
  380.  
  381. <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>
  382.  
  383. </body>
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!