API tools faq
paste
clerihew

03. sun in the sky

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