API tools faq
paste
Advertisement
thetruththemes

Simple and Clean: light bg starter

thetruththemes
Apr 24th, 2015
828
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.65 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!----------------------------------------------------------------------------
  3. ,,
  4. ,GG,
  5. GIIG
  6. Gl''lG
  7. ;G' 'G;
  8. GP YG
  9. oQ' 'Qo -Sɪᴍᴘʟᴇ ᴀɴᴅ Cʟᴇᴀɴ ᴛʜᴇᴍᴇ ʙʏ
  10. *TGGGGGGGGGGGGQQQ, ,QQQGGGGGGGGGGGGP* ɴʏᴄᴛᴏᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  11. *TGo, '* *' ,oGP*
  12. *TGo, ɴʏᴄᴛ□ᴛʜᴇᴍᴇs ,oGP* -ᴘʟᴇᴀsᴇ ʀᴇғᴇʀ ᴛᴏ ᴏʀɪɢɪɴᴀʟ
  13. *TGio,, ,,oiGP* ᴘᴏsᴛ ʟɪɴᴋ ғᴏʀ ʀᴜʟᴇs ᴀɴᴅ ᴍɪsᴄ
  14. ;GGT' 'TGG:
  15. GG' ii 'GG -ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴀɴʏ ᴏғ ᴛʜᴇ
  16. GG' ,GG, 'GG ᴄᴏᴅᴇ ᴄʀᴇᴅɪᴛ ᴏʀ ᴍᴏᴠᴇ ɪᴛ ᴛᴏ
  17. GG* oGGGGo. *GG ᴀ ᴘᴀɢᴇ.
  18. oG* oGG* *GGo. *Go
  19. ;GG;oGG* *GGo;GG;
  20. ,GGGT* *TGGG,
  21. ""' '""
  22.  
  23. ----------------------------------------------------------------------------->
  24.  
  25. <!-- hover text 1/2 -->
  26. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  28.  
  29. <head>
  30.  
  31. {block:Ifcustomfavicon}<link rel="shortcut icon" href="{image:favicon}"/>{/block:Ifcustomfavicon}
  32. {block:IfNotcustomfavicon}<link rel="shortcut icon" href="{favicon}"/>{/block:IfNotcustomfavicon}
  33. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  34. <title>{Title}</title>
  35. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  36.  
  37. <!--------------------------------- IMAGES ---------------------------------->
  38. <meta name="image:Symbol BG" content=""/>
  39. <meta name="image:Custom Cursor" content="http://static.tumblr.com/u5vz4xb/e6Dnhiuf0/cursor1.png"/>
  40. <meta name="image:Custom Cursor Links" content="http://static.tumblr.com/u5vz4xb/NMNnhiufk/cursor2.png"/>
  41. <meta name="image:Favicon" content="https://31.media.tumblr.com/0c3fac9adc40f05c6e63bfce4928ea65/tumblr_inline_nilpruOG6u1rg1lxe.png"/>
  42. <meta name="image:Album Art" content="http://static.tumblr.com/u5vz4xb/AW1nhiug8/delete_png.png"/>
  43.  
  44. <!--------------------------------- COLORS ---------------------------------->
  45. <!-- Full Body -->
  46. <meta name="color:Scroll BG" content="#f8f8f8"/>
  47. <meta name="color:Scroll Thumb" content="#9c83ff"/>
  48. <!-- Sidebar -->
  49. <meta name="color:Symbol Color" content="#9c83ff"/>
  50. <meta name="color:Description Text" content="#808080"/>
  51. <meta name="color:Description Links" content="#9c83ff"/>
  52. <meta name="color:Description Links Hover" content="#dddddd"/>
  53. <meta name="color:Description Scrollbar" content="#dddddd"/>
  54. <meta name="color:Sidelinks" content="#dddddd"/>
  55. <meta name="color:Sidelinks Hover" content="#9c83ff"/>
  56. <!-- Posts -->
  57. <meta name="color:Posts Title" content="#b6b6b6"/>
  58. <meta name="color:Posts Text" content="#949494"/>
  59. <meta name="color:Posts Bold" content="#949494"/>
  60. <meta name="color:Posts Italic" content="#949494"/>
  61. <meta name="color:Posts Code" content="#aaaaaa"/>
  62. <meta name="color:Posts Code BG" content="#eeeeee"/>
  63. <meta name="color:Posts Links" content="#9c83ff"/>
  64. <meta name="color:Posts Links Hover" content="#cecece"/>
  65. <meta name="color:Posts Blockquote" content="#eeeeee"/>
  66. <meta name="color:Ask BG" content="#eeeeee"/>
  67. <meta name="color:Audio Player" content="#9c83ff"/>
  68. <!-- Post Endings -->
  69. <meta name="color:Info Circles" content="#dddddd"/>
  70. <meta name="color:Info Circles Hover" content="#9c83ff"/>
  71. <meta name="color:Ending BG" content="#eeeeee"/>
  72. <meta name="color:Ending Text" content="#b4bac3"/>
  73. <meta name="color:Ending Links" content="#9c83ff"/>
  74. <meta name="color:Ending Links Hover" content="#58648f"/>
  75. <!-- Permalink -->
  76. <meta name="color:Permalink Text" content="#b8b8b8"/>
  77. <meta name="color:Permalink Links" content="#abadb0"/>
  78. <meta name="color:Permalink Links Hover" content="#9c83ff"/>
  79. <meta name="color:Permalink Blockquote" content="#eeeeee"/>
  80. <meta name="color:Permalink Scroll Thumb" content="#eeeeee"/>
  81. <!-- Misc. -->
  82. <meta name="color:Link Hover BG" content="#58648f"/>
  83. <meta name="color:Link Hover Text" content="#f7f7f9"/>
  84. <meta name="color:Selection BG" content="#9c83ff"/>
  85. <meta name="color:Selection Text" content="#f7f7f9"/>
  86. <meta name="color:Selection Links" content="#dcdcdc"/>
  87.  
  88. <!------------------------------- SELECTIONS -------------------------------->
  89. <meta name="select:Symbol If Light" content="https://41.media.tumblr.com/6ad456db96ab391773fa4f28ccb3fbba/tumblr_nnbumwsOsB1s60yyoo5_250.png" title="Heart"/>
  90. <meta name="select:Symbol If Light" content="https://40.media.tumblr.com/46693713454639c311655740a0cf0bed/tumblr_nnbumwsOsB1s60yyoo2_250.png" title="Keyblade"/>
  91. <meta name="select:Symbol If Light" content="https://41.media.tumblr.com/e19a8cf0698cfc768f549deae7119847/tumblr_nnbumwsOsB1s60yyoo3_250.png" title="Sora's Crown"/>
  92. <meta name="select:Symbol If Light" content="https://40.media.tumblr.com/815b750c00f6be78207aae386d209c24/tumblr_nnbumwsOsB1s60yyoo4_250.png" title="Roxas's Symbol "/>
  93. <meta name="select:Symbol If Light" content="https://40.media.tumblr.com/95cf8082ec4b6e67f4383a4fd715e37c/tumblr_nnbumwsOsB1s60yyoo1_250.png" title="Mickey"/>
  94. <meta name="select:Symbol If Light" content="https://40.media.tumblr.com/b6db6bb02a86d822953797a0c81a21a9/tumblr_nnbumwsOsB1s60yyoo6_250.png" title="Heartless"/>
  95. <meta name="select:Symbol If Light" content="https://41.media.tumblr.com/5b6b75e683979edf3fefe1848851a908/tumblr_nnbumwsOsB1s60yyoo7_250.png" title="Nobody"/>
  96. <meta name="select:Symbol If Light" content="https://36.media.tumblr.com/def735604c7020303e991425ed45dc2d/tumblr_nnbumwsOsB1s60yyoo9_250.png" title="Chaser"/>
  97. <meta name="select:Symbol If Light" content="https://41.media.tumblr.com/c94b8f13fc4cf9538bad31c7de540a10/tumblr_nnbumwsOsB1s60yyoo8_250.png" title="Unversed"/>
  98. <meta name="select:Symbol If Light" content="https://36.media.tumblr.com/eed56b4a3b51272b2ea1f9c255de4597/tumblr_nnbumwsOsB1s60yyoo10_r1_250.png" title="Spirits"/>
  99. <meta name="select:Symbol If Light" content="https://41.media.tumblr.com/92abc117d38485cee11f2b8fe72753dd/tumblr_nnbumwsOsB1s60yyoo10_250.png" title="Nightmares"/>
  100.  
  101. <meta name="select:Symbol If Dark" content="https://41.media.tumblr.com/8780cd653d8d472e752312af65fde3f7/tumblr_nnc0kqVLNc1s60yyoo5_250.png" title="Heart"/>
  102. <meta name="select:Symbol If Dark" content="https://36.media.tumblr.com/1edf81ef4ff75c0317ff73b1ff72b398/tumblr_nnc0kqVLNc1s60yyoo2_250.png" title="Keyblade"/>
  103. <meta name="select:Symbol If Dark" content="https://41.media.tumblr.com/3ab71ec3c2346c8b14ba309df9560207/tumblr_nnc0kqVLNc1s60yyoo3_250.png" title="Sora's Crown"/>
  104. <meta name="select:Symbol If Dark" content="https://40.media.tumblr.com/ea4bcd2c10745b93efeb25b269986b7d/tumblr_nnc0kqVLNc1s60yyoo4_250.png" title="Roxas's Symbol "/>
  105. <meta name="select:Symbol If Dark" content="https://36.media.tumblr.com/d755885049d745159e4f5bb747d95634/tumblr_nnc0kqVLNc1s60yyoo1_250.png" title="Mickey"/>
  106. <meta name="select:Symbol If Dark" content="https://40.media.tumblr.com/25fc53a481402ec2cdc0bd87b33d65d3/tumblr_nnc0kqVLNc1s60yyoo6_250.png" title="Heartless"/>
  107. <meta name="select:Symbol If Dark" content="https://41.media.tumblr.com/5bd0ed85742bac5088d89675d906e783/tumblr_nnc0kqVLNc1s60yyoo7_250.png" title="Nobody"/>
  108. <meta name="select:Symbol If Dark" content="https://41.media.tumblr.com/3a1c5ccb6c99d470f3d2e02b2d77aaf0/tumblr_nnc0kqVLNc1s60yyoo9_250.png" title="Chaser"/>
  109. <meta name="select:Symbol If Dark" content="https://40.media.tumblr.com/ee8e4bbb055aeac8fd175d6133685e5a/tumblr_nnc0kqVLNc1s60yyoo8_250.png" title="Unversed"/>
  110. <meta name="select:Symbol If Dark" content="https://40.media.tumblr.com/c2b00e97dad8755245e8f9ca8d35a929/tumblr_nnc0kqVLNc1s60yyoo10_r1_250.png" title="Spirits"/>
  111. <meta name="select:Symbol If Dark" content="https://40.media.tumblr.com/680db96847a0579ab0c57d24c1edd4b6/tumblr_nnc0kqVLNc1s60yyoo10_250.png" title="Nightmares"/>
  112.  
  113. <!-------------------------------- OPTIONS ---------------------------------->
  114. <meta name="if:Dark Background" content="0"/>
  115. <meta name="if:Monochrome Photos" content="1"/>
  116. <meta name="if:Fade Photos" content="1"/>
  117. <meta name="if:Info Circles for Indexpage" content="1"/>
  118. <meta name="if:Custom Cursor" content="1"/>
  119. <meta name="if:Custom Favicon" content="1"/>
  120. <meta name="if:Dark Audio Player" content="0"/>
  121. <meta name="if:Credit on the Right" content="1"/>
  122.  
  123. <!--------------------------------- TEXTS ----------------------------------->
  124. <meta name="text:Link 1 URL" content="/" />
  125. <meta name="text:Link 1 Hover" content="Link 1" />
  126. <meta name="text:Link 2 URL" content="/" />
  127. <meta name="text:Link 2 Hover" content="Link 2" />
  128. <meta name="text:Link 3 URL" content="/" />
  129. <meta name="text:Link 3 Hover" content="Link 3" />
  130. <meta name="text:Link 4 URL" content="/" />
  131. <meta name="text:Link 4 Hover" content="Link 4" />
  132. <meta name="text:Ask Verb" content="asked" />
  133.  
  134. <!-- custom fonts 1/3 -->
  135. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  136. <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
  137.  
  138. </head>
  139.  
  140. <!-- hover text 2/2 -->
  141. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  142. <script type="text/javascript" src="http://static.tumblr.7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  143. <script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  144.  
  145. <!-- custom fonts 2/3 -->
  146. <script type="text/javascript">
  147. WebFontConfig = {
  148. google: { families: [ 'Noto+Sans:400,700,400italic:latin' ] }
  149. };
  150. (function() {
  151. var wf = document.createElement('script');
  152. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  153. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  154. wf.type = 'text/javascript';
  155. wf.async = 'true';
  156. var s = document.getElementsByTagName('script')[0];
  157. s.parentNode.insertBefore(wf, s);
  158. })(); </script>
  159.  
  160. <style type="text/css">
  161.  
  162. /* custom fonts 3/3 */
  163. @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic);
  164.  
  165. /* --------------------------- DECORATION ---------------------------- */
  166.  
  167. /* body */
  168. body {
  169. background:{block:IfDarkBackground}#222222{/block:IfDarkBackground}{block:IfNotDarkBackground}#f8f8f8{/block:IfNotDarkBackground};
  170. color:{color:Posts Text};
  171. font-family:Calibri;
  172. font-size:10px;
  173. line-height:12px;
  174. text-align:justify;}
  175.  
  176. /*-------------------------- CREDIT; DON'T REMOVE --------------------------*/
  177.  
  178. #credit {
  179. z-index:99999;
  180. position:fixed;
  181. bottom:10px;
  182. {block:IfNotCreditOnTheRight}left:10px;{/block:IfNotCreditOnTheRight}
  183. {block:IfCreditOnTheRight}right:10px;{/block:IfCreditOnTheRight}
  184. width:20px; height:20px;
  185. font-size:20px;
  186. letter-spacing:1px;
  187. font-weight:bold;}
  188. #credit a {
  189. color:{color:Info Circles};
  190. -webkit-transition: all 0.3s linear;
  191. -moz-transition: all 0.3s linear;
  192. transition: all 0.3s linear;}
  193. #credit a:hover {
  194. color:{color:Info Circles Hover};}
  195.  
  196. /* --------------------------- MINOR STUFF ---------------------------- */
  197.  
  198. /* hover text */
  199. #s-m-t-tooltip {
  200. z-index: 99999;
  201. display: block;
  202. margin-left: 15px;
  203. margin-top: 5px;
  204. max-width:150px;
  205. padding: 3px 5px 4px 6px;
  206. color: {color:Link Hover Text};
  207. font-family:Calibri;
  208. font-size:8px;
  209. font-weight:bold;
  210. line-height:10px;
  211. text-transform:uppercase;
  212. letter-spacing:1px;
  213. text-align:left;
  214. background: {color:Link Hover BG};}
  215.  
  216. /* scrollbar */
  217. ::-webkit-scrollbar {
  218. height: 14px;
  219. width: 14px;
  220. background: {color:Scroll BG};}
  221. ::-webkit-scrollbar-thumb {
  222. background: {color:Scroll Thumb};
  223. border:4px solid {color:Scroll BG};
  224. border-radius:5px;}
  225.  
  226. /* drag n' click selection */
  227. ::selection {
  228. background: {color:Selection BG};
  229. color: {color:Selection Text};}
  230. ::-moz-selection {
  231. background: {color:Selection BG};
  232. color: {color:Selection Text};}
  233. a::selection {
  234. background: {color:Selection BG};
  235. color: {color:Selection Links};}
  236. a::-moz-selection {
  237. background: {color:Selection BG};
  238. color: {color:Selection Links};}
  239.  
  240. /* top right tumblr buttons */
  241. #tumblr_controls {
  242. opacity:0.33;
  243. -webkit-filter: invert(100%) brightness(97%) hue-rotate(180deg);}
  244.  
  245. /* ------------------------- FONT STUFF --------------------------- */
  246.  
  247. /* links */
  248. a:link, a:active, a:visited{
  249. text-decoration:none;
  250. color:{color:Posts Links};
  251. -webkit-transition: all 0.5s linear;
  252. -moz-transition: all 0.5s linear;
  253. transition: all 0.5s linear;}
  254. a:hover {
  255. color:{color:Posts Links Hover};
  256. -webkit-transition: all 0.2s linear;
  257. -moz-transition: all 0.2s linear;
  258. transition: all 0.2s linear;}
  259.  
  260. /* main font decorations */
  261. b, strong{color:{color:Posts Bold};}
  262. i, em {color:{color:Posts Italic};}
  263. pre {color:{color:Posts Code};
  264. font-size:10px;
  265. max-width:100%;
  266. font-family:consolas;
  267. word-break: break-all;
  268. background:{color:Posts Code BG};
  269. padding:4px 6px 4px 6px;
  270. white-space: pre-wrap;
  271. white-space: -moz-pre-wrap;
  272. white-space: -pre-wrap;
  273. white-space: -o-pre-wrap;
  274. word-wrap: break-word;}
  275. code {
  276. color:{color:Posts Code};
  277. font-size:10px;
  278. font-family:consolas;
  279. background:{color:Posts Code BG};
  280. padding:0px 1px 0px 1px;}
  281.  
  282. /* text and link post titles */
  283. h1 {font: italic normal bold 18px/18px Georgia;
  284. color:{color:Posts Title};
  285. text-align:center;
  286. letter-spacing:0px;}
  287. /* quote and ask post titles */
  288. h2 {font: italic normal bold 16px/16px Georgia;
  289. color:{color:Posts Bold};
  290. text-align:center;
  291. letter-spacing:0px;}
  292. .posts h1:first-child, .posts h2:first-child {margin-top:0px;}
  293.  
  294. /* --------------------------------- SIDEBAR ------------------------------ */
  295.  
  296. /* before hovering the sidebar */
  297. #side {
  298. position:fixed;
  299. left:45%; margin-left:-360px;
  300. top:50%; margin-top:-90px;
  301. width:180px; height:180px;
  302. -webkit-transition: all 0.5s linear;
  303. -moz-transition: all 0.5s linear;
  304. transition: all 0.5s linear;}
  305.  
  306. /* KH symbol */
  307. #symbol {
  308. z-index:3;
  309. position:fixed;
  310. left:45%; margin-left:-350px;
  311. top:50%; margin-top:-80px;
  312. width:160px; height:160px;
  313. background:{color:Symbol Color} url({image:Symbol BG}) center;
  314. -webkit-transition: all 0.5s linear;
  315. -moz-transition: all 0.5s linear;
  316. transition: all 0.5s linear;}
  317.  
  318. #desc-holder {
  319. opacity:0; z-index:2;
  320. position:fixed;
  321. top:50%; margin-top:-65px;
  322. left:45%; margin-left:-350px;
  323. width:155px; height:140px;
  324. -webkit-transition: all 0.5s linear;
  325. -moz-transition: all 0.5s linear;
  326. transition: all 0.5s linear;}
  327.  
  328. /* page navigation & description */
  329. #pagination, #description {
  330. text-transform:uppercase;
  331. font-family:Calibri;
  332. color:{color:Description Text};
  333. font-size:8px;
  334. letter-spacing:1px;}
  335. #pagination a, #description a {
  336. font-weight:bold;
  337. color:{color:Description Links};}
  338. #pagination a:hover, #description a:hover {
  339. color:{color:Description Links Hover};}
  340.  
  341. #pagination {
  342. text-align:center;
  343. margin-bottom:5px;}
  344.  
  345. #description {
  346. width:150px; padding-right:4px;
  347. max-height:90px; overflow:auto;
  348. text-align:justify;
  349. margin-bottom:10px;}
  350. #description::-webkit-scrollbar {
  351. height: 2px;
  352. width: 2px;
  353. background: transparent;}
  354. #description::-webkit-scrollbar-thumb {
  355. background: {color:description scrollbar};
  356. border:none;}
  357.  
  358. /* sidebar links */
  359. #sidelinks {
  360. font-size:8px;
  361. letter-spacing:12px;
  362. text-align:center;}
  363. #sidelinks a {
  364. font-size:8px;
  365. text-decoration:none;
  366. display:inline-block;
  367. width:10px;
  368. height:10px;
  369. border-radius:5px;
  370. background:{color:Sidelinks};
  371. -webkit-transition: all 0.2s linear;
  372. -moz-transition: all 0.2s linear;
  373. transition: all 0.2s linear;}
  374. #sidelinks a:hover {
  375. background:{color:Sidelinks Hover};}
  376.  
  377. /* after hovering the sidebar */
  378. #side:hover {
  379. margin-left:-435px;
  380. width:340px;}
  381. #side:hover #symbol {
  382. position:fixed;
  383. margin-left:-425px;}
  384. #side:hover #desc-holder {
  385. opacity:1; margin-left:-260px;}
  386.  
  387. /* ----------------------------- POSTS ------------------------------- */
  388.  
  389. /* posts position */
  390. #entries {
  391. margin-top:70px;
  392. margin-left:45%;
  393. text-align:justify;}
  394. /* posts themselves */
  395. .posts {
  396. margin:0 0 70px 0;
  397. overflow:hidden;
  398. width: 500px;
  399. min-height:33px;
  400. text-align:justify;
  401. padding:20px;}
  402.  
  403. /* ------------------------------ POST TYPES ------------------------------ */
  404.  
  405. /* text post */
  406. blockquote {
  407. padding:0px;
  408. padding-left:6px;
  409. margin:-3px 0 -1px 6px;
  410. border-left:3px solid {color:posts blockquote};}
  411. hr {display: block;
  412. margin-top: 0.5em;
  413. margin-bottom: 0.5em;
  414. margin-left: auto;
  415. margin-right: auto;
  416. border-style: solid;
  417. border-width: 1px;
  418. border-color: {color:posts blockquote};}
  419.  
  420. /* bullet lists */
  421. ul {margin-left:-20px;
  422. list-style-type:circle;}
  423. ol {margin-left:-20px;
  424. list-style-type:decimal;}
  425. li {margin-bottom:3px;}
  426.  
  427. /* text-images */
  428. .posts img {
  429. max-width:100%;
  430. {block:IfFadePhotos}opacity:0.85;{/block:IfFadePhotos}
  431. -webkit-transition-duration: 0.2s;
  432. -moz-transition-duration:0.2s;
  433. -o-transition-duration:0.2s;
  434. transition-duration:0.2s;}
  435. .posts:hover img {opacity:1;}
  436. /* the credit below images that are from other people */
  437. .tmblr-full {margin:0;}
  438. .tmblr-attribution {
  439. opacity:.8;
  440. margin-top:0px;
  441. font-family:Calibri;
  442. font-size:8px; line-height:8px;
  443. text-transform:uppercase;
  444. letter-spacing:1px;}
  445. .tmblr-attribution::before {content: "└";}
  446. .tmblr-attribution::after {content: " >";}
  447. img a{border:none; max-width:100%;}
  448.  
  449. /* link posts */
  450. .link-posts a {
  451. background: {color:Posts Links};
  452. display:inline-block;
  453. width: 480px;
  454. border-radius:3px;
  455. padding:10px;
  456. color:{block:IfDarkBackground}#222222{/block:IfDarkBackground}{block:IfNotDarkBackground}#f8f8f8{/block:IfNotDarkBackground};}
  457. .link-posts a:hover {
  458. background: {color:Posts Links Hover}}
  459.  
  460. /* ask posts */
  461. .ask-posts {
  462. min-height:64px;
  463. padding: 10px;
  464. background: {color:ask bg};
  465. border-radius:3px;}
  466. .ask-posts img {
  467. border-radius:2px;
  468. max-width:64px;}
  469. .ask-posts .question {
  470. margin-top:-64px; margin-left:74px;
  471. width:406px;}
  472. .ask-posts h2 {text-align:left; margin:0px 0px 5px 0px;}
  473.  
  474. /* quote posts */
  475. .quote-posts {
  476. border-top:3px solid {color:Posts Blockquote};
  477. border-bottom:3px solid {color:Posts Blockquote};
  478. margin:0px 0px 5px 0px;
  479. padding:10px;
  480. text-align:center}
  481. .fa-quote-left {float:left; color:{color:Posts Blockquote}}
  482. .fa-quote-right {float:right; color:{color:Posts Blockquote}}
  483.  
  484. /* chat posts */
  485. ul.chat, .chat ol, .chat li {
  486. list-style:none;
  487. margin:0px;
  488. padding:4px 0px 4px 2px;}
  489. ul.chat, .chat ol {margin:-2px 0px;}
  490. .chat li {
  491. border-bottom:2px solid {color:Posts Blockquote};}
  492. .chat li:first-of-type {
  493. border-top:2px solid {color:Posts Blockquote};}
  494. .person {
  495. color:{color:Posts Bold};
  496. font-weight:bold}
  497.  
  498. /* photo posts */
  499. .posts .photo-posts {
  500. {block:IfFadePhotos}opacity:0.85;{/block:IfFadePhotos}
  501. {block:IfMonochromePhotos}-webkit-filter: grayscale(100%);{/block:IfMonochromePhotos}
  502. -webkit-transition-duration: 0.5s;
  503. -moz-transition-duration:0.5s;
  504. transition-duration:0.5s;
  505. -o-transition-duration:0.5s;}
  506. .posts:hover .photo-posts {
  507. opacity:1;
  508. -webkit-filter: grayscale(0%);
  509. -webkit-transition-duration: 0.5s;
  510. -moz-transition-duration:0.5s;
  511. transition-duration:0.5s;
  512. -o-transition-duration:0.5s;}
  513. .posts .html_photoset {
  514. {block:IfFadePhotos}opacity:0.7;{/block:IfFadePhotos}
  515. {block:IfMonochromePhotos}-webkit-filter: grayscale(100%);{/block:IfMonochromePhotos}
  516. -webkit-transition-duration: 0.5s;
  517. -moz-transition-duration:0.5s;
  518. transition-duration:0.5s;
  519. -o-transition-duration:0.5s;}
  520. .posts:hover .html_photoset {
  521. opacity:1;
  522. -webkit-filter: grayscale(0%);
  523. -webkit-transition-duration: 0.5s;
  524. -moz-transition-duration:0.5s;
  525. transition-duration:0.5s;
  526. -o-transition-duration:0.5s;}
  527.  
  528. /* video posts */
  529. .caption #youtube_iframe, .caption iframe {
  530. margin:5px 0px 5px 0px;
  531. max-width:100%;}
  532.  
  533. /* audio posts */
  534. /* album image */
  535. #albumart {
  536. position:absolute;
  537. margin-right:10px;
  538. width:100px; height:100px;
  539. background: url('{image:Album Art}');
  540. background-size:cover;
  541. border-radius:1px;}
  542. .posts #albumart {
  543. {block:IfMonochromePhotos}-webkit-filter: grayscale(100%);{/block:IfMonochromePhotos}
  544. {block:IfFadePhotos}opacity:.7;{/block:IfFadePhotos}
  545. -webkit-transition: all 0.2s linear;
  546. -moz-transition: all 0.2s linear;
  547. transition: all 0.2s linear;}
  548. .posts:hover #albumart {
  549. -webkit-filter: grayscale(0%);
  550. opacity:1;}
  551. /* music player */
  552. .posts #audio-player {
  553. margin-left:110px;
  554. max-width:207px;
  555. max-height:27px;
  556. {block:IfMonochromePhotos}background:#808080;{/block:IfMonochromePhotos}
  557. {block:IfNotMonochromePhotos}background:{color:Audio Player};{/block:IfNotMonochromePhotos}
  558. border-radius:1px;
  559. -webkit-transition: all 0.2s linear;
  560. -moz-transition: all 0.2s linear;
  561. transition: all 0.2s linear;}
  562. .posts:hover #audio-player {
  563. background:{color:Audio Player}}
  564. /* audio information */
  565. #audioinfo {
  566. height:66px;
  567. margin:-3px 0px 5px 110px;
  568. text-transform:uppercase;
  569. font-family:Calibri;
  570. font-size:8px;
  571. line-height:13px;
  572. letter-spacing:1px;}
  573.  
  574. /* ------------------------------ POSTS INFO ------------------------------ */
  575.  
  576. /* if circles */
  577. #postinfo {
  578. margin-top:20px;
  579. position:absolute;
  580. text-align:center;
  581. margin-left:-20px;
  582. width:540px;
  583. height:10px;
  584. letter-spacing:20px;}
  585. /* individual circles */
  586. #postinfo a {
  587. text-decoration:none;
  588. display:inline-block;
  589. width:10px;
  590. height:10px;
  591. border-radius:5px;
  592. background:{color:Info Circles};
  593. -webkit-transition: all 0.2s linear;
  594. -moz-transition: all 0.2s linear;
  595. transition: all 0.2s linear;}
  596. #postinfo a:hover {
  597. background:{color:Info Circles Hover};}
  598.  
  599. /* if no circles */
  600. #postending {
  601. border-radius:3px;
  602. padding:10px;
  603. width:500px;
  604. padding:10px;
  605. margin:15px 0px -10px -10px;
  606. background: {color:Ending BG};
  607. text-align:center;
  608. border-radius:1px;
  609. margin-top:15px;
  610. text-transform:uppercase;
  611. font-family:Calibri;
  612. font-size:8px;
  613. letter-spacing:1px;
  614. color: {color:Ending Text};}
  615. #postending a {
  616. color:{color:Ending Links};}
  617. #postending a:hover {
  618. color:{color:Ending Links Hover};}
  619.  
  620. /* ----------------------------- PERMALINK -------------------------------- */
  621.  
  622. /* permalink position */
  623. #permalink {
  624. margin-top:-70px;
  625. max-height:600px;
  626. padding-top:20px;
  627. padding-bottom:20px;
  628. width: 540px;
  629. max-width: 540px;
  630. text-transform:uppercase;
  631. font-family:Calibri;
  632. font-size:8px;
  633. letter-spacing:1px;
  634. text-align:left;
  635. color:{color:Permalink Text};}
  636. #permalink a {
  637. font-weight:bold;
  638. text-decoration:none;
  639. color:{color:Permalink Links};}
  640. #permalink a:hover {
  641. color:{color:Permalink Links Hover};}
  642.  
  643. /* post notes container */
  644. #notescontainer {
  645. width: 500px;
  646. max-height:580px;
  647. padding-right:20px;
  648. overflow: auto;
  649. line-height:14px;}
  650. #notescontainer blockquote {
  651. margin-top:3px;
  652. margin-bottom:3px;
  653. border-left:3px solid {color:Permalink Blockquote};}
  654.  
  655. /* permalink etc */
  656. .notes img {
  657. width: 10px;
  658. position: relative;
  659. vertical-align: middle;
  660. padding-right: 5px;}
  661. ol.notes, .notes li {
  662. width: 480px;
  663. list-style: none;
  664. margin: 0px 5px 0px 5px;
  665. padding-left: 5px}
  666.  
  667. /* permalink scrollbar */
  668. #permalink ::-webkit-scrollbar {
  669. height: 5px;
  670. width: 5px;
  671. background: transparent;}
  672. #permalink ::-webkit-scrollbar-thumb:vertical {
  673. background: {color:Permalink Scroll Thumb};
  674. border:none;
  675. border-radius: 1px;}
  676.  
  677. </style>
  678. <body>
  679.  
  680. <!--------------------------------- CURSOR ---------------------------------->
  681.  
  682. {block:IfCustomCursor}
  683. <style type="text/css"> body {cursor: url({image:Custom Cursor}), auto;} a, a:hover{cursor:url({image:Custom Cursor Links}), auto;}
  684. </style>
  685. <!-- Custom cursors don't show up on empty spaces, but this fixes that -->
  686. <div style="position:fixed; background:rgba(0,0,0,0); top:0px; left:0px; width:100%; height:100%; z-index: -99999999999999;"></div>{/block:IfCustomCursor}
  687.  
  688. <!--------------------------- CREDIT; DON'T REMOVE -------------------------->
  689. <div id="credit">
  690. <a href="http://nyctothemes.tumblr.com/" title="© nyctothemes">
  691. <l class="fa fa-th"></l>
  692. </a>
  693. </div>
  694.  
  695. <!--------------------------------- SIDEBAR --------------------------------->
  696. <div id="side">
  697.  
  698. <!-- KH symbol -->
  699. <img src="{block:IfNotDarkBackground}{select:Symbol If Light}{/block:IfNotDarkBackground}{block:IfDarkBackground}{select:Symbol If Dark}{/block:IfDarkBackground}" id="symbol">
  700.  
  701. <div id="desc-holder"><div style="position:relative; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);">
  702. <!-- pagination -->
  703. {block:Pagination}<div id="pagination">
  704. {block:PreviousPage}<a href="{PreviousPage}" title="return">{/block:PreviousPage}◀&nbsp;{block:PreviousPage}</a>{/block:PreviousPage}
  705. Page {CurrentPage} of {TotalPages}.
  706. {block:NextPage}<a href="{NextPage}" title="continue">{/block:NextPage}&nbsp;▶{block:NextPage}</a>{/block:NextPage}
  707. </div>{/block:Pagination}
  708.  
  709. <!-- description -->
  710. <div id="description">{description}</div>
  711.  
  712. <!-- sidebar links -->
  713. <div id="sidelinks">
  714. <a href="/" title="Home"></a>
  715. <a href="/ask" title="Ask"></a>
  716. <a href="/archive" title="Past"></a>
  717. <a href="{text:link 1 URL}" title="{text:link 1 hover}"></a>
  718. <a href="{text:link 2 URL}" title="{text:link 2 hover}"></a>
  719. <a href="{text:link 3 URL}" title="{text:link 3 hover}"></a>
  720. <a href="{text:link 4 URL}" title="{text:link 4 hover}"></a>
  721. </div>
  722.  
  723. </div></div>
  724. </div>
  725.  
  726.  
  727. <!--------------------------------- POSTS --------------------------------->
  728. <div id="entries">
  729. {block:posts}
  730.  
  731. <div class="posts">
  732. <!-- text posts -->
  733. {block:Text}
  734. {block:Title}<h1>{Title}</h1>{/block:Title}
  735. <div class="caption">{Body}</div>
  736. {/block:Text}
  737.  
  738. <!-- link posts -->
  739. {block:Link}
  740. {block:Thumbnail}<center>
  741. <a href="{Thumbnail-HighRes}">
  742. <img src="{Thumbnail}" class="photo-posts" style="margin-bottom:5px; border-radius:3px">
  743. </a>
  744. </center>{/block:Thumbnail}
  745. <div class="link-posts"><h1><a href="{URL}">
  746. {Name}&nbsp;&nbsp;&#8594;</l>
  747. </a></h1></div>
  748. {block:Description}<div class="caption">
  749. <p>{Description}</p>
  750. </div>{/block:Description}
  751. {/block:Link}
  752.  
  753. <!-- ask posts -->
  754. {block:Answer}
  755. <div class="ask-posts">
  756. <img src="{AskerPortraitURL-64}">
  757. <div class="question">
  758. <h2>{Asker} {text:Ask Verb}:</h2> {Question}
  759. </div></div><br>
  760. <div id="caption">{Answer}</div>
  761. {/block:Answer}
  762.  
  763. <!-- quote posts -->
  764. {block:Quote}
  765. <h2 class="quote-posts">
  766. <l class="fa fa-quote-left"></l>
  767. <l class="fa fa-quote-right"></l>
  768. {Quote}</h2>
  769. <div style="text-align:right; margin-right:20px">
  770. {block:Source}<b>- {Source}</b>{/block:Source}
  771. </div>
  772. {/block:Quote}
  773.  
  774. <!-- chat posts -->
  775. {block:Chat}
  776. {block:Title}<h1>{Title}</h1>{/block:Title}
  777. <ul class="chat">{block:Lines}
  778. <li class="user_{UserNumber}">{block:Label}<span class="person">{Label}</span>{/block:Label} {Line}</li>
  779. {/block:Lines}</ul>
  780. {/block:Chat}
  781.  
  782. <!-- photo posts -->
  783. {block:Photo}
  784. <center>
  785. {block:HighRes}<a href="{PhotoURL-HighRes}">{/block:HighRes}<img src="{PhotoURL-500}" class="photo-posts"/>{block:HighRes}</a>{/block:HighRes}
  786. </center>
  787. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  788.  
  789. {block:Photoset}
  790. <center>
  791. {Photoset-500}
  792. </center>
  793. {block:Caption}<br><div class="caption">{Caption}</div>{/block:Caption}
  794. {/block:Photoset}
  795.  
  796. <!-- video post -->
  797. {block:Video}
  798. {Video-500}
  799. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  800. {/block:Video}
  801.  
  802. <!-- audio post -->
  803. {block:Audio}
  804. <!--image-->
  805. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}<div id="albumart" {block:AlbumArt}style="background:none"{/block:AlbumArt}>
  806. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  807. </div>{block:IndexPage}</a>{/block:IndexPage}
  808. <!--player-->
  809. <div id="audio-player"><div style="opacity:0.66">
  810. {block:ifDarkAudioPlayer}{AudioPlayerBlack}{/block:ifDarkAudioPlayer}
  811. {block:ifNotDarkAudioPlayer}{AudioPlayerWhite}{/block:ifNotDarkAudioPlayer}
  812. </div></div>
  813. </br>
  814. <!--info-->
  815. <div id="audioinfo">
  816. {block:TrackName}<b>Track:</b> {TrackName}</br>{/block:TrackName}
  817. {block:Artist}<b>Artist:</b> {Artist}</br>{/block:Artist}
  818. {block:Album}<b>Album:</b> {Album}</br>{/block:Album}
  819. {block:PlayCount}<b>Plays:</b> {FormattedPlayCount}{/block:PlayCount}
  820. </div>
  821. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  822.  
  823. <!------------------------------ POST ENDING ------------------------------->
  824.  
  825. {block:PermalinkPage}{block:Date}<div id="postending">
  826.  
  827. <!-- date posted -->
  828. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  829. <!-- notes counter -->
  830. {block:NoteCount}
  831. || {NoteCountWithLabel}
  832. {/block:NoteCount}
  833. <!-- reblogged from -->
  834. {block:RebloggedFrom}<br>
  835. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  836. {/block:RebloggedFrom}
  837. <!-- original poster -->
  838. {block:ContentSource}
  839. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  840. {/block:ContentSource}
  841. <!-- tags -->
  842. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  843. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  844. </div>{/block:HasTags}
  845.  
  846. </div>{/block:Date}{/block:PermalinkPage}
  847.  
  848. <!------------- If Circles for Index Page ------------->
  849. {block:IfInfoCirclesForIndexpage}
  850. {block:IndexPage}
  851. <div id="postinfo">
  852.  
  853. <!-- date posted -->
  854. {block:Date}
  855. <a href="{Permalink}" title="{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}"></a>
  856. {/block:Date}
  857. <!-- notes counter -->
  858. {block:NoteCount}
  859. <a href="{Permalink}" title="{NoteCountWithLabel}"></a>
  860. {/block:NoteCount}
  861. <!-- original poster -->
  862. {block:ContentSource}
  863. <a href="{SourceURL}" title="Source: {SourceTitle}"></a>
  864. {/block:ContentSource}
  865. <!-- reblogged from -->
  866. {block:RebloggedFrom}
  867. <a href="{ReblogParentURL}" title="Via: {ReblogParentName}"></a>
  868. {/block:RebloggedFrom}
  869. <!-- tags -->
  870. {block:HasTags}
  871. <a href="{Permalink}" title="# {block:Tags}{Tag}, {/block:Tags}"></a>
  872. {/block:HasTags}
  873. <!-- reblog -->
  874. <a href="{ReblogURL}" title="Reblog"></a>
  875.  
  876. </div>
  877. {/block:IndexPage}
  878. {/block:IfInfoCirclesForIndexpage}
  879.  
  880. <!------------- If NO Circles for Index Page ------------->
  881. {block:IfNotInfoCirclesForIndexpage}
  882. {block:IndexPage}
  883. {block:Date}<div id="postending">
  884.  
  885. <!-- date posted -->
  886. <a href="{Permalink}">{ShortMonth}.{DayOfMonthWithZero}.{ShortYear}</a>
  887. <!-- notes counter -->
  888. {block:NoteCount}
  889. || {NoteCountWithLabel}
  890. {/block:NoteCount}
  891. <!-- reblogged from -->
  892. {block:RebloggedFrom}<br>
  893. Via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  894. {/block:RebloggedFrom}
  895. <!-- original poster -->
  896. {block:ContentSource}
  897. || Source: <a href="{SourceURL}">{SourceTitle}</a>
  898. {/block:ContentSource}
  899. <!-- tags -->
  900. {block:HasTags}<br><div style="padding:0px 20px 0px 20px">
  901. Tags: {block:Tags}<a href="{TagURL}">{Tag}</a>, {/block:Tags}
  902. </div>{/block:HasTags}
  903.  
  904. </div>{/block:Date}
  905. {/block:IndexPage}
  906. {/block:IfNotInfoCirclesForIndexpage}
  907.  
  908. </div> <!-- ending div tag for "posts" -->
  909.  
  910. {/block:Posts}
  911.  
  912. <!------------------------------ PERMALINK ------------------------------->
  913.  
  914. {block:PostNotes}
  915. <div id="permalink">
  916. <div id="notescontainer">{PostNotes}</div>
  917. </div>
  918. {/block:PostNotes}
  919.  
  920. </div> <!-- ending div tag for "entries" -->
  921.  
  922. </body>
  923. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!