API tools faq
paste
Advertisement
tomura

#01: left aligned ver.

tomura
May 2nd, 2018 (edited)
436
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. theme by @youngjaes.tumblr.com
  6. pls don't steal or copy. don't edit or remove the credit.
  7. feel free to tweak as much as you'd like for personal use only.
  8. ----->
  9.  
  10. <meta charset="utf-8">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12. {block:Description}
  13. <meta name="description" content="{MetaDescription}" />
  14. {/block:Description}
  15.  
  16. <title>{Title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. <link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  21.  
  22. <script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  23.  
  24. <meta name="select:font" content="Poppins"/>
  25. <meta name="select:font" content="Karla"/>
  26. <meta name="select:font" content="Nunito"/>
  27. <meta name="select:font" content="Lora"/>
  28. <meta name="color:background" content="#fff"/>
  29. <meta name="color:text"content="#000"/>
  30. <meta name="color:link"content="#000"/>
  31. <meta name="color:link Hover"content="#000"/>
  32. <meta name="text:font Size"content="10px"/>
  33. <meta name="text:search placeholder"content="explore"/>
  34. <meta name="text:link1 URL" content="/"/>
  35. <meta name="text:link1" content="about"/>
  36. <meta name="text:link2 URL" content="/"/>
  37. <meta name="text:link2" content="navi"/>
  38. <meta name="text:link3 URL" content="/"/>
  39. <meta name="text:link3" content=""/>
  40. <meta name="image:header image" content="1"/>
  41. <link href="https://fonts.googleapis.com/css?family={select:font}:400,700,800" rel="stylesheet">
  42. <link href="https://fonts.googleapis.com/css?family=Karla:400,700,800" rel="stylesheet">
  43. <style type="text/css">
  44.  
  45.  
  46. body {
  47. margin:0px;
  48. background:{color:background};
  49. font-family: '{select:font}', sans-serif;
  50. font-size:{text:font size};
  51. line-height:180%;
  52. color: {color:text};
  53. }
  54.  
  55.  
  56. p{
  57. margin:0 0 10px 0;
  58. padding:0;
  59. }
  60.  
  61. pre {
  62. white-space: pre-wrap;
  63. white-space: -moz-pre-wrap;
  64. white-space: -pre-wrap;
  65. white-space: -o-pre-wrap;
  66. word-wrap: break-word;
  67. }
  68.  
  69. a{
  70. color:{color:Link};
  71. }
  72.  
  73.  
  74. a:hover{
  75. color:{color:Link Hover};
  76. }
  77.  
  78. li{
  79. margin-left:-15px;
  80. }
  81.  
  82. #wrapper{
  83. width:600px;
  84. margin-left:100px;
  85. margin-top:80px;
  86. }
  87.  
  88. #sidebar{
  89. top:15px;
  90. height:200px;
  91. position:relative;
  92. }
  93.  
  94. #title {
  95. letter-spacing:.8px;font-size:10.5px;text-transform:uppercase;padding:0px;padding-left:0px;margin-bottom:-2px;font-weight:800;font-family:"Karla"}
  96.  
  97. #navigation{
  98. margin-top:-30px
  99. text-transform:uppercase;
  100. }
  101.  
  102. #content{
  103. margin-top:40px;
  104. width:500px;
  105. overflow:hidden;
  106. }
  107.  
  108. .post{
  109. width:500px;
  110. margin:0 0 120px 0;
  111. overflow:hidden;
  112. }
  113.  
  114. .tags {opacity:0;
  115. -webkit-transition: all 0.8s ease;
  116. transition: all 0.8s ease;
  117. -moz-transition: all 0.8s ease;
  118. -o-transition: all 0.8s ease;}
  119.  
  120. .tagsp {opacity:1;}
  121.  
  122.  
  123. .post:hover .tags{opacity:1;
  124. -webkit-transition: all 0.8s ease;
  125. transition: all 0.8s ease;
  126. -moz-transition: all 0.8s ease;
  127. -o-transition: all 0.8s ease;};
  128.  
  129.  
  130. #sidebar img, .post img{
  131. max-width:100%;
  132. }
  133.  
  134. #nav{
  135. bottom:50px;
  136. }
  137.  
  138. .media{
  139. margin:0 0 10px 0;
  140. }
  141.  
  142. .title{
  143. font-weight:normal;
  144. font-size:18px;
  145. margin:0 0 10px 0;
  146. }
  147.  
  148. .quote{
  149. font-size:12px;
  150. }
  151.  
  152. .question{
  153. margin-bottom:10px;
  154. }
  155.  
  156. blockquote{
  157. margin:0 0 10px 10px;
  158. padding:0 0 0 10px;
  159. border-left:solid 1px #000;
  160. }
  161.  
  162. .post .footer{
  163. margin:0;
  164. text-align:left;
  165. line-height:20px;
  166. }
  167.  
  168. .postnotes {
  169. height:100px; overflow:auto;}
  170.  
  171.  
  172. ol.notes {
  173. list-style-type:none;
  174. padding:0px;
  175. margin:0px;
  176. }
  177.  
  178. ol.notes li.note {
  179. display:block;
  180. padding:0;
  181. margin:5px 0;
  182. }
  183.  
  184. ol.notes li.note img.avatar {display:none!important;}
  185.  
  186. .player {
  187. width:29px;
  188. height:29px;
  189. position:absolute;
  190. left:15px;
  191. padding:5px;
  192. border-radius:100px;
  193. background:#f2f2f2;
  194. display:block;
  195. overflow:hidden;
  196. top:calc(50% - 20px);
  197. opacity:.4;
  198. }
  199.  
  200. .hold {
  201. text-align:left;
  202. background:#fff;
  203. border:1px solid #e5e5e5;
  204. position:relative;
  205. display:block;
  206. min-height:24px;
  207. padding:20px;
  208. }
  209.  
  210.  
  211. .audio_info {
  212. vertical-align:left;
  213. text-align:left;
  214. line-height:16px;
  215. margin-left:55px;
  216. max-width:calc(100% - 35px);
  217. }
  218.  
  219. .audio_info span {
  220. white-space:nowrap;
  221.  
  222. text-overflow:ellipsis;
  223. display:block;
  224. }
  225.  
  226.  
  227. #credit {
  228. position:fixed;right:20px;bottom:20px;letter-spacing:0px;z-index:999999;}
  229.  
  230. #credit a {
  231. text-decoration:none;}
  232.  
  233. ::-webkit-scrollbar{
  234. height:11px;
  235. width:11px;
  236. background:inherit;
  237. }
  238.  
  239. ::-webkit-scrollbar-thumb {background:#000;}
  240.  
  241. ::-webkit-scrollbar-track {background:#fff;}
  242.  
  243. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid #fff;}
  244.  
  245. .search .query {
  246. border:0;
  247. outline:0;
  248. padding:0;
  249. text-align:left;
  250. font-family:inherit;
  251. font-size:inherit;
  252. letter-spacing:inherit;
  253. background-color:transparent;
  254. width:120px;
  255. opacity:0.5;
  256. }
  257.  
  258. {CustomCSS}
  259. </style>
  260. </head>
  261.  
  262. <body>
  263. <div id="wrapper">
  264.  
  265.  
  266. <div id="credit">
  267. <a href="http://youngjaes.tumblr.com/" title="@youngjaes">💘</a>
  268.  
  269. </div>
  270.  
  271.  
  272. <div id="sidebar" style="margin-bottom:55px;line-height:23px">
  273.  
  274. <a title="index" href="/"><img src="{image:Header Image}" style="border-radius:100%;width:60px;"></a><br>
  275.  
  276. <div id="title">{Title}</div>
  277. {Description}
  278.  
  279. <br>
  280. <a href="/">index</a>&nbsp;
  281. <a href="/ask">contact</a>&nbsp;
  282. <a href="{text:Link1 URL}">{text:Link1}</a>&nbsp;
  283. <a href="{text:Link2 URL}">{text:Link2}</a>&nbsp;
  284. <a href="{text:Link3 URL}">{text:Link3}</a>&nbsp;
  285.  
  286. <form action="/search" method="get" class="search">
  287. <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="{text:Search Placeholder}">
  288. </div>
  289.  
  290. <div id="content">
  291.  
  292. {block:Posts}
  293.  
  294. {block:NoRebloggedFrom}
  295. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  296. {/block:NoRebloggedFrom}
  297.  
  298.  
  299. {block:ContentSource}<!-- {SourceURL}
  300. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  301. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  302. {/block:ContentSource}
  303.  
  304. <div class="post {TagsAsClasses}">
  305.  
  306. {block:Text}
  307. {block:Title}
  308. <div class="title">{Title}</div>
  309. {/block:Title}
  310. {Body}
  311. {/block:Text}
  312.  
  313. {block:Photo}
  314. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  315. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  316. {/block:Photo}
  317.  
  318. {block:Photoset}
  319. <div class="media">{Photoset-500}</div>
  320. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  321. {/block:Photoset}
  322.  
  323. {block:Quote}
  324. <div class="quote"><b>{Quote}</b></div>
  325. {block:Source}
  326. <div class="quotesource">{Source}</div>
  327. {/block:Source}
  328. {/block:Quote}
  329.  
  330. {block:Link}
  331. <div class="title"><a href="{URL}">{Name}</a></div>
  332. {block:Description}
  333. <div class="description">{Description}</div>
  334. {/block:Description}
  335. {/block:Link}
  336.  
  337. {block:Chat}
  338. {block:Title}
  339. <div class="title">{Title}</div>
  340. {/block:Title}
  341.  
  342. {block:Lines}
  343. <div class="{Alt} user_{UserNumber}">
  344. {block:Label}
  345. <b>{Label}</b>{/block:Label}
  346. &nbsp;{Line}
  347. </div>
  348. {/block:Lines}
  349. {/block:Chat}
  350.  
  351. {block:Video}
  352. <div class="media">{Video-500}</div>
  353. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  354. {/block:Video}
  355.  
  356. {block:Audio}
  357. {block:audioplayer}
  358. <div class="hold">
  359. <div class="player">{audioplayerblack}</div>
  360. <div class="audio_info">
  361. {block:trackname}<span class="track"><b>track:</b> {trackname}</span>{/block:trackname}
  362. {block:artist}<span class="artist"><b>artist:</b> {artist}</span>{/block:artist}
  363. </div>
  364. </div>
  365. {/block:AudioPlayer}
  366. <p>
  367. {/block:Audio}
  368.  
  369.  
  370. {block:Answer}
  371. <div class="question"><b>{Asker}</b>: {Question}</div>
  372. <div class="caption">{Answer}</div>
  373. {/block:Answer}
  374.  
  375.  
  376. {block:Date}
  377. <div class="footer">
  378. <a href="{Permalink}">{DayOfMonth}.{MonthNumberWithZero}.{Year}</a>{block:PermalinkPage} +<a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount} </a>
  379. {block:HasTags}
  380. <div class="tagsp" style:"margin-top:5px">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  381.  
  382. {block:RebloggedFrom}
  383. <span style="margin-top:5px">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  384. {block:ContentSource} &mdash; source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
  385. </span>
  386. {/block:RebloggedFrom} {/block:PermalinkPage}
  387. {block:IndexPage}
  388. <div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:IndexPage}
  389. {block:PermalinkPage}
  390. {block:NoteCount}
  391. {block:PostNotes}<p><div class="postnotes" stlye="margin-top:20px; height:100px; overflow:auto;">{PostNotes}</div>{/block:PostNotes}
  392. {/block:NoteCount}
  393. {/block:PermalinkPage}
  394. {/block:Date}
  395. </div>
  396. </div>
  397. {/block:Posts}
  398.  
  399. {block:Pagination}
  400. <div id="nav">
  401. {block:PreviousPage}<a href="{PreviousPage}">prev.</a>{/block:PreviousPage}
  402.  
  403. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  404. </div>
  405. {/block:Pagination}<p><br>
  406. </div>
  407. </div>
  408.  
  409.  
  410. </div>
  411.  
  412. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  413. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  414.  
  415. </body>
  416. </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!