API tools faq
paste
study_ace

theme 03: lota

study_ace
Oct 8th, 2018
1,025
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}#{Tag} | {/block:TagPage}{block:SearchPage}search results for: {SearchQuery} | {/block:SearchPage}{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5.  
  6. <link href="https://fonts.googleapis.com/css?family=Raleway:600,800|Merriweather:300" rel="stylesheet">
  7. <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  8.  
  9. <!---theme: lota
  10. by @studyace
  11. please do not touch the credit, copy code/ideas, or use as a base
  12. credits:
  13. background by unsplash
  14. unnest captions by magnusthemes+neothm
  15. fontawesome icons
  16. --->
  17.  
  18. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  19. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  20. <script> $(function(){ $('.post').unnest({
  21. yourCaption: ".cap", //your caption selector, the div wrapping {Caption}
  22. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  23. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  24. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  25. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  26. usernameColon: false //if turned to false, removes the colon at the end of usernames
  27. }); }); </script>
  28.  
  29. <script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("a[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:30,
  36. tip_fade_speed:300,
  37. attribute:"title"
  38. });
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <link rel="stylesheet" type="text/css" href="https://static.tumblr.com/n7gvaew/8gop026qc/normalize.css">
  44.  
  45. <meta name="image:Background" content="https://78.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo1_250.png"/>
  46. <meta name="image:Sidebar" content="https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bff1627fffb987bb0026180a324f56e8&auto=format&fit=crop&w=750&q=80"/>
  47.  
  48. <meta name="text:Link 1 URL" content="/"/>
  49. <meta name="text:Link 1" content="link one"/>
  50. <meta name="text:Link 2 URL" content="/"/>
  51. <meta name="text:Link 2" content="link two"/>
  52. <meta name="text:Link 3 URL" content="/"/>
  53. <meta name="text:Link 3" content="link three"/>
  54. <meta name="text:Link 4 URL" content="/"/>
  55. <meta name="text:Link 4" content="link four"/>
  56. <meta name="text:Link 5 URL" content="/"/>
  57. <meta name="text:Link 5" content="link five"/>
  58. <meta name="text:Link 6 URL" content="/"/>
  59. <meta name="text:Link 6" content="link six"/>
  60.  
  61. <meta name="color:Links" content="#888"/>
  62. <meta name="color:Links Hover" content="#000"/>
  63. <meta name="color:Tooltip" content="#fff"/>
  64. <meta name="color:Tooltip BG" content="#000"/>
  65. <meta name="color:Post BG" content="#fff"/>
  66. <meta name="color:Post Info" content="#fff"/>
  67. <meta name="color:Tags" content="#fff"/>
  68. <meta name="color:Tags BG" content="#000"/>
  69. <meta name="color:Tags Hover" content="#ccc"/>
  70. <meta name="color:Ask" content="#000"/>
  71. <meta name="color:Ask BG" content="#ccc"/>
  72.  
  73. <style type="text/css">
  74.  
  75. #s-m-t-tooltip{
  76. max-width:300px;
  77. margin:15px;
  78. padding:6px 8px;
  79. background:{color:Tooltip BG};
  80. color:{color:Tooltip};
  81. z-index:999999;
  82. font-size:13px;
  83. }
  84.  
  85. body { font:14px 'Merriweather', helvetica, sans-serif; font-weight:300;
  86. background-image:url({image:Background});
  87. background-repeat:repeat;
  88. background-attachment:fixed;
  89. line-height:21px;
  90. }
  91. h1 { font-size:18px; font-family:'Raleway', sans-serif; font-weight:600; }
  92. strong, b, h2 { font-weight:600; }
  93. a { text-decoration:none; color:{color:Links}; transition:all 0.5s ease; }
  94. a:hover { color:{color:Links Hover}; }
  95. .post img { max-width:100%; }
  96. .post { word-break:break-word; }
  97.  
  98. /*sidebar 1*/
  99. #sidebar1 {
  100. width:300px;
  101. left:calc(50% - 650px);
  102. position:fixed;
  103. top: 50%;
  104. transform: translateY(-50%);
  105. }
  106.  
  107. #title {
  108. font-weight:800;
  109. font-size:55px;
  110. background: url({image:Sidebar}) no-repeat;
  111. -webkit-background-clip: text;
  112. -webkit-text-fill-color: transparent;
  113. background-size:cover;
  114. background-position:center;
  115. margin-bottom:10px;
  116. margin-top:0px;
  117. line-height:60px;
  118. }
  119.  
  120. #desc {
  121. font-size:15px;
  122. line-height:24px;
  123. }
  124.  
  125. /*sidebar 2*/
  126. #sidebar2 {
  127. width:250px;
  128. }
  129.  
  130. #links {
  131. position:fixed;
  132. font-size:35px;
  133. top:50%;
  134. width:250px;
  135. transform:translateY(-50%);
  136. left:calc(50% + 360px);
  137. line-height:45px;
  138. }
  139.  
  140. .link {
  141. background: url({image:Sidebar}) no-repeat;
  142. -webkit-background-clip: text;
  143. -webkit-text-fill-color: transparent;
  144. background-size:cover;
  145. background-position:center;
  146. font-weight:800;
  147. font-family:'Raleway', sans-serif;
  148. transition:all 0.6s ease;
  149. background-color:transparent;
  150. background-blend-mode:luminosity;
  151. }
  152.  
  153. .link:hover {
  154. padding-left:20px;
  155. }
  156.  
  157. /*media queries*/
  158. @media only screen and (min-width: 1600px) {
  159. #sidebar1 {
  160. width:400px;
  161. left:calc(50% - 750px);
  162. }
  163. #title {
  164. font-size:65px;
  165. line-height:75px;
  166. }
  167. #desc {
  168. font-size:17px;
  169. line-height:26px;
  170. margin-top:10px;
  171. }
  172. #links {
  173. left:calc(50% + 375px);
  174. line-height:55px;
  175. }
  176. .link {
  177. font-size:45px;
  178. }
  179. }
  180.  
  181. @media only screen and (max-width: 1300px) {
  182. #sidebar1 {
  183. width:200px;
  184. left:calc(50% - 550px);
  185. }
  186. #title {
  187. font-size:35px;
  188. line-height:45px;
  189. }
  190. #desc {
  191. font-size:13px;
  192. line-height:20px;
  193. }
  194. #links {
  195. left:calc(50% + 345px);
  196. line-height:35px;
  197. }
  198. .link {
  199. font-size:25px;
  200. }
  201. }
  202.  
  203. @media only screen and (max-width: 1120px) {
  204. #sidebar1 {
  205. width:150px;
  206. left:calc(50% - 500px);
  207. }
  208. #title {
  209. font-size:35px;
  210. line-height:45px;
  211. }
  212. }
  213.  
  214. /*posts*/
  215. .posts {
  216. width:650px;
  217. padding:50px 0px;
  218. margin:auto;
  219. position:relative;
  220. height:100%;
  221. min-height:100vh;
  222. background: url({image:Sidebar}) no-repeat;
  223. background-size:cover;
  224. background-position:center;
  225. background-attachment:fixed;
  226. }
  227.  
  228. .post {
  229. width:500px;
  230. padding:10px;
  231. margin:20px auto 70px auto;
  232. position:relative;
  233. background-color:{color:Post BG};
  234. }
  235.  
  236. .tumblr_parent {
  237. margin:10px 0px 10px 0px;
  238. padding: 0px 10px;
  239. }
  240.  
  241. .tumblr_avatar {
  242. margin-right: 10px;
  243. }
  244.  
  245. .tumblr_blog, .tumblr_avatar {
  246. vertical-align:middle;
  247. }
  248.  
  249. .post:first-child { margin-top:0px; }
  250. .info:first-child { margin-top:0px; }
  251. .post:last-child { margin-bottom:0px; }
  252.  
  253. .info {
  254. width:300px;
  255. margin:50px auto 0px auto;
  256. text-align:center;
  257. font-size:16px;
  258. text-transform:lowercase;
  259. }
  260.  
  261. .info h1 {
  262. font-size:30px;
  263. }
  264.  
  265. .info, .info a {
  266. color:{color:Post Info};
  267. }
  268.  
  269. .fa-circle {
  270. font-size:7px;
  271. vertical-align:middle;
  272. margin:0px 2px;
  273. }
  274.  
  275. .tags {
  276. background:{color:Tags BG};
  277. padding:10px;
  278. margin-left:-10px;
  279. margin-bottom:-10px;
  280. width:100%;
  281. margin-top:10px;
  282. color:{color:Tags};
  283. }
  284.  
  285. .tags a {
  286. color:{color:Tags};
  287. }
  288.  
  289. .tag { font-size:13px; transition:all 0.5s ease; }
  290. .tag:hover { color:{color:Tags Hover}; }
  291.  
  292. .tag:after {
  293. content:",";
  294. margin-right:5px;
  295. }
  296.  
  297. .tags a:last-child:after {
  298. content:"";
  299. }
  300.  
  301. .fa-tags {
  302. color:{color:Tags};
  303. margin-right:5px;
  304. }
  305.  
  306. .ask {
  307. background-color:{color:Ask BG};
  308. color:{color:Ask};
  309. padding:10px;
  310. }
  311.  
  312. .asker, .question {
  313. margin-left:58px;
  314. margin-top:-48px;
  315. }
  316.  
  317. .asker a {
  318. margin-left:0px;
  319. }
  320.  
  321. .answer {
  322. margin-top:10px;
  323. }
  324.  
  325. .quote {
  326. text-align:center;
  327. }
  328.  
  329. .qt {
  330. font-size:18px;
  331. padding:10px;
  332. line-height:25px;
  333. }
  334.  
  335. .linkp {
  336. font-size:23px;
  337. line-height:30px;
  338. text-align:center;
  339. }
  340.  
  341. .chat {
  342. padding:10px 0px;
  343. border-bottom:1px solid #ccc;
  344. }
  345.  
  346. .album {
  347. border:10px solid #ccc;
  348. z-index:10000;
  349. background-image:url('https://static.tumblr.com/xdzt0ir/87ho6heum/cursive_default_album_art_sign.png');
  350. width:100px;
  351. margin:15px 0px 0px 15px;
  352. height:100px;
  353. background-position:center;
  354. }
  355.  
  356. .audinf h1 {
  357. margin:0px 0px -10px 0px;
  358. }
  359.  
  360. .audinf {
  361. position:absolute;
  362. left:150px;
  363. top:0px;
  364. }
  365.  
  366. .audp {
  367. width:30px;
  368. height:30px;
  369. overflow:hidden;
  370. position:absolute;
  371. top:47.5px;
  372. left:57.5px;
  373. }
  374.  
  375. .pagination {
  376. background:#fff;
  377. padding:10px;
  378. text-align:center;
  379. margin:30px 0px;
  380. width:500px;
  381. margin:auto;
  382. }
  383.  
  384. .pagination a, .current_page {
  385. margin-right:10px;
  386. vertical-align:middle;
  387. }
  388.  
  389. .pn img {
  390. margin-right:10px;
  391. }
  392.  
  393. #credit { bottom:10px; right:10px; position:fixed; z-index:99999999999999999999999999999999999; padding:8px 10px; border-radius:100%; background:#fff; color:#000; }
  394.  
  395. {CustomCSS}
  396.  
  397. </style>
  398. </head>
  399. <body>
  400.  
  401. <div id="sidebar1">
  402. <h1 id="title"><a href="/" title="refresh">{Title}</a></h1>
  403. <div id="desc">{Description}</div>
  404. </div>
  405.  
  406. <div class="posts">
  407. {block:Posts}
  408.  
  409. {block:Date}
  410. <div class="info">
  411. <h1 style="margin-bottom:5px">{Month} {DayOfMonth}, {Year}</h1>
  412. <span><a href="{Permalink}" title="go to post" style="margin-right:10px">{NoteCountWithLabel}</a> {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> {/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}">src</a> {/block:ContentSource} </span>
  413. </div>
  414. {/block:Date}
  415.  
  416. <div class="post">
  417.  
  418. {block:Text}
  419. <div class="cap">
  420. {block:Title}<h1>{Title}</h1>{/block:Title}
  421. {Body}
  422. </div>
  423. {/block:Text}
  424.  
  425. {block:Photo}
  426. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  427. <img src="{PhotoURL-HighRes}" width="500px">
  428. </a>
  429. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  430. {/block:Photo}
  431.  
  432. {block:Photos}
  433. {Photoset-500}
  434. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  435. {/block:Photos}
  436.  
  437. {block:Quote}
  438. <div class="quote">
  439. <div class="qt">{Quote}</div>
  440. <h1 class="src">{Source}</h1>
  441. </div>
  442. {/block:Quote}
  443.  
  444. {block:Link}
  445. <div class="cap">
  446. <h1 class="linkp"><a href="{LinkURL}" target="_blank">{Name}</a></h1>
  447. {block:Description}{Description}{/block:Description}
  448. </div>
  449. {/block:Link}
  450.  
  451. {block:Video}
  452. {Video-500}
  453. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  454. {/block:Video}
  455.  
  456. {block:Chat}
  457. {block:Title}<h1>{Title}</h1>{/block:Title}
  458. {block:Lines}
  459. <div class="chat">{block:Label}{Label}{/block:Label} {Line}</div>{/block:Lines}
  460. {/block:Chat}
  461.  
  462. <div class="audio" style="position:relative">
  463. {block:Audio}
  464. <div class="album">{block:AlbumArt}<img src="{AlbumArtURL}" width="100px" height="100px"/>{/block:AlbumArt}</div>
  465. <div class="audp">{AudioPlayerWhite}</div>
  466. <div class="aud">
  467. <div class="audinf"><br>{block:TrackName}<h1 style="margin-top:-5px">{TrackName}</h1>{/block:TrackName}
  468. <br>{block:Artist}{Artist}{/block:Artist}
  469. <p style="margin-top:5px;">{PlayCountWithLabel}</p></div>
  470. </div>
  471. <div class="cap" style="margin-top:10px">{block:Caption}{Caption}{/block:Caption}</div>
  472. {/block:Audio}
  473. </div>
  474.  
  475. {block:Answer}
  476. <div class="ask">
  477. <img src="{AskerPortraitURL-48}" class="ask_img"/>
  478. <h1 class="asker">{Asker}</h1>
  479. <span class="question">{Question}</span>
  480. </div>
  481. <div class="cap answer">
  482. {Answer}
  483. </div>
  484. {/block:Answer}
  485.  
  486. {block:PermalinkPage}
  487. <div class="pn">
  488. {block:PostNotes}
  489. {PostNotes-16}
  490. {/block:PostNotes}
  491. </div>
  492. {/block:PermalinkPage}
  493.  
  494. {block:Date}
  495. {block:HasTags}
  496. <div class="tags">
  497. <a href="{ReblogURL}" title="reblog this post" style="margin-right:7px"><i class="fas fa-redo-alt"></i></a><i class="fas fa-tags"></i> {block:Tags}<a href="{TagURL}" class="tag">{Tag}</a>{/block:Tags}
  498. </div>
  499. {/block:HasTags}
  500. {/block:Date}
  501.  
  502. </div>
  503.  
  504. {/block:Posts}
  505.  
  506. {block:Pagination}<div class="pagination">{block:PreviousPage}
  507. <a href="{PreviousPage}"><i class="fas fa-angle-double-left"></i></a>
  508. {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}
  509. <span class="current_page">{PageNumber}</span>
  510. {/block:CurrentPage}{block:JumpPage}
  511. <a class="jump_page" href="{URL}">{PageNumber}</a>
  512. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  513. <a href="{NextPage}"><i class="fas fa-angle-double-right"></i></a>
  514. {/block:NextPage}</div>{/block:Pagination}
  515.  
  516. </div>
  517.  
  518. <div id="links">
  519. <a href="{text:Link 1 URL}"><div class="link" id="l1">{text:Link 1}</div></a>
  520. <a href="{text:Link 2 URL}"><div class="link" id="l2">{text:Link 2}</div></a>
  521. <a href="{text:Link 3 URL}"><div class="link" id="l3">{text:Link 3}</div></a>
  522. <a href="{text:Link 4 URL}"><div class="link" id="l4">{text:Link 4}</div></a>
  523. <a href="{text:Link 5 URL}"><div class="link" id="l5">{text:Link 5}</div></a>
  524. <a href="{text:Link 6 URL}"><div class="link" id="l6">{text:Link 6}</div></a>
  525. </div>
  526.  
  527. <a id="credit" href="https://studyace.tumblr.com" title="theme">☂</a>
  528.  
  529. </body>
  530. </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!