API tools faq
paste
Advertisement
sexycullen

rohanchandra / build-themes base

sexycullen
Sep 4th, 2021
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.82 KB | None | 0 0
raw download clone embed print report
  1. <!--https://github.com/rohanchandra/build-themes-->
  2.  
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <title>{block:TagPage}{Tag} | {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} | {/block:SearchPage}{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  8. {block:Description}
  9. <meta name="description" content="{MetaDescription}" />
  10. {/block:Description}
  11.  
  12. {block:Hidden}
  13. <meta name="font:Title" content="Brutal Type"/>
  14. <meta name="font:Body" content="Sofia Pro"/>
  15. <meta name="color:Masthead text and links" content="{TitleColor}"/>
  16. <meta name="color:Body text" content="#313131"/>
  17. <meta name="image:Background" content=""/>
  18. {/block:Hidden}
  19.  
  20. <meta name="viewport" content="width=device-width, initial-scale=1">
  21. <link rel="shortcut icon" href="{Favicon}"/>
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  23. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  24.  
  25. <link rel="stylesheet" href="https://static.tumblr.com/xeccbfq/9Qenv9yn8/normalize.min.css" />
  26. <link rel="stylesheet" href="https://static.tumblr.com/xeccbfq/lT5nwa5y4/theme.css" />
  27. <style>
  28. /* JS: Grid layout with Salvattore */
  29. main[data-columns]::before {
  30. content: '4 .js-column.js-size-1of4';
  31. }
  32. main {
  33. margin-left: 1.75%;
  34. margin-right: 1.75%;
  35. }
  36. .js-column {
  37. float: left;
  38. margin-left: 0.75%;
  39. margin-right: 0.75%;
  40. }
  41. .js-size-1of1 {
  42. width: 98.5%;
  43. }
  44. .js-size-1of2 {
  45. width: 48.5%;
  46. }
  47. .js-size-1of3 {
  48. width: 31.833333%;
  49. }
  50. .js-size-1of4 {
  51. width: 23.5%;
  52. }
  53. @media screen and (max-width: 1200px) {
  54. main[data-columns]::before {
  55. content: '3 .js-column.js-size-1of3';
  56. }
  57. }
  58. @media screen and (max-width: 900px) {
  59. main[data-columns]::before {
  60. content: '2 .js-column.js-size-1of2';
  61. }
  62. .meta-wrapper, .nav-wrapper {
  63. display: inline-block;
  64. }
  65. }
  66. @media screen and (max-width: 550px){
  67. main[data-columns]::before {
  68. content: '1 .js-column.js-size-1of1';
  69. }
  70. }
  71.  
  72. /* JS: loading message */
  73. .js-loading-message {
  74. text-align: center;
  75. font-weight: bold;
  76. position: fixed;
  77. left: 0;
  78. bottom: 0;
  79. width: 100%;
  80. display: inline-block;
  81. }
  82.  
  83. /* Tumblr: Custom CSS */
  84. {CustomCSS}
  85.  
  86. /* Tumblr: Customizable elements */
  87. body {
  88. font-family: {font:Body};
  89. }
  90. h1, h2, h3, h4, h5, h6 {
  91. font-family: {font:Title};
  92. }
  93.  
  94. body {
  95. color: {color:Body text};
  96. }
  97. .masthead {
  98. color: {color:Masthead text and links};
  99. }
  100. .masthead a {
  101. color: {color:Masthead text and links};
  102. }
  103.  
  104. body {
  105. background-image: url('{image:Background}');
  106. }
  107.  
  108. body {
  109. background-color: {BackgroundColor};
  110. }
  111. .blog-title a {
  112. font-weight: {TitleFontWeight};
  113. }
  114. a {
  115. color: {AccentColor};
  116. }
  117. </style>
  118. </head>
  119.  
  120. <body class="{block:IndexPage}is-index-page{/block:IndexPage} {block:PermalinkPage}is-permalink-page{/block:PermalinkPage}">
  121. <header class="masthead" role="banner">
  122. <div class="meta-wrapper">
  123. {block:ShowAvatar}
  124. <img class="portrait global-shape-{AvatarShape}" src="{PortraitURL-128}"/>
  125. {/block:ShowAvatar}
  126.  
  127. <div class="blog-details">
  128. {block:ShowTitle}
  129. <h1 class="blog-title">
  130. <a href="/" title="{lang:Home}">{Title}</a>
  131. </h1>
  132. {/block:ShowTitle}
  133.  
  134. {block:ShowDescription}
  135. {block:Description}
  136. <p class="blog-description">{Description}</p>
  137. {block:Description}
  138. {/block:ShowDescription}
  139. </div>
  140. </div>
  141.  
  142. <div class="nav-wrapper">
  143. <nav>
  144. <ul>
  145. {block:HasPages}
  146. {block:Pages}
  147. <li>
  148. <a href="{URL}">{Label}</a>
  149. </li>
  150. {/block:Pages}
  151. {/block:HasPages}
  152.  
  153. {block:SubmissionsEnabled}
  154. <li>
  155. <a href="/submit">{SubmitLabel}</a>
  156. </li>
  157. {/block:SubmissionsEnabled}
  158.  
  159. {block:AskEnabled}
  160. <li>
  161. <a href="/ask">{AskLabel}</a>
  162. </li>
  163. {/block:AskEnabled}
  164. </ul>
  165. </nav>
  166. </div>
  167.  
  168. <form action="/search" method="get">
  169. <input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}"/>
  170. </form>
  171. </header>
  172.  
  173. <!-- Search results -->
  174. {block:SearchPage}
  175. <div class="search-page message">
  176. {block:SearchResults}
  177. <p class="search-result">{lang:Search results for SearchQuery 2}</p>
  178. {/block:SearchResults}
  179.  
  180. {block:NoSearchResults}
  181. <p class="search-result">{lang:Sorry no results for SearchQuery 2}</p>
  182. {/block:NoSearchResults}
  183.  
  184. <span class="divider"></span>
  185. </div>
  186. {/block:SearchPage}
  187.  
  188. {block:TagPage}
  189. <div class="tag-page message">
  190. <p class="tag-wrapper">{lang:Showing posts tagged Tag 2}</p>
  191.  
  192. <span class="divider"></span>
  193. </div>
  194. {/block:TagPage}
  195.  
  196. <main role="main" {block:IndexPage}data-columns{/block:IndexPage}>
  197. {block:Posts}
  198. <article {block:PermalinkPage}class='js-column'{/block:PermalinkPage}>
  199. {block:Text}
  200. <div class="type-text post-content">
  201. {block:Title}
  202. <h2 class="title">
  203. <a href="{Permalink}">{Title}</a>
  204. </h2>
  205. {/block:Title}
  206.  
  207. {Body}
  208. </div>
  209. {/block:Text}
  210.  
  211. {block:Photo}
  212. <figure class="type-photo post-content">
  213. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
  214.  
  215. {block:Caption}
  216. <figcaption class="caption">
  217. {Caption}
  218. </figcaption>
  219. {/block:Caption}
  220. </figure>
  221. {/block:Photo}
  222.  
  223. {block:Photoset}
  224. <figure class="type-photoset post-content">
  225. {Photoset}
  226.  
  227. {block:Caption}
  228. <figcaption class="caption">
  229. {Caption}
  230. </figcaption>
  231. {/block:Caption}
  232. </figure>
  233. {/block:Photoset}
  234.  
  235. {block:Quote}
  236. <div class="type-quote post-content">
  237. <blockquote>{Quote}</blockquote>
  238.  
  239. {block:Source}
  240. <cite class="caption">
  241. {Source}
  242. </cite>
  243. {/block:Source}
  244. </div>
  245. {/block:Quote}
  246.  
  247. {block:Link}
  248. <div class="type-link post-content">
  249. <a {Target} href="{URL}" class="link-name">{Name}</a>
  250.  
  251. {block:Description}
  252. <div class="caption">
  253. {Description}
  254. </div>
  255. {/block:Description}
  256. </div>
  257. {/block:Link}
  258.  
  259. {block:Chat}
  260. <div class="type-chat post-content">
  261. <ul class="chat-lines">
  262. {block:Lines}
  263. <li>
  264. {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}
  265. </li>
  266. {/block:Lines}
  267. </ul>
  268. </div>
  269. {/block:Chat}
  270.  
  271. {block:Audio}
  272. <div class="type-audio post-content">
  273. {block:AudioEmbed}
  274. {AudioEmbed color="white"}
  275. {/block:AudioEmbed}
  276.  
  277. {block:Caption}
  278. <div class="caption">
  279. {Caption}
  280. </div>
  281. {/block:Caption}
  282. </div>
  283. {/block:Audio}
  284.  
  285. {block:Video}
  286. <div class="type-video post-content">
  287. {Video-700}
  288.  
  289. {block:Caption}
  290. <div class="caption">
  291. {Caption}
  292. </div>
  293. {/block:Caption}
  294. </div>
  295. {/block:Video}
  296.  
  297. {block:Answer}
  298. <div class="type-answer post-content">
  299. <div class="question">
  300. <p class="asker">
  301. <span class="user-name">{Asker}</span>{block:English} asked{/block:English}:
  302. </p>
  303.  
  304. <h2 class="title">{Question}</h2>
  305. </div>
  306.  
  307. {block:Answerer}
  308. <div class="answer">
  309. <p class="answerer">
  310. <span class="user-name">{Answerer}</span>{block:English} answered{/block:English}:
  311. </p>
  312.  
  313. <div class="caption">
  314. {Answer}
  315. </div>
  316. </div>
  317. {/block:Answerer}
  318.  
  319. <div class="replies">
  320. {Replies}
  321. </div>
  322. </div>
  323. {/block:Answer}
  324.  
  325. {block:Date}
  326. <footer class="contentinfo" role="contentinfo">
  327. <a href="{Permalink}" title="{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year}">
  328. {TimeAgo}
  329. </a>
  330.  
  331. {block:NoteCount}
  332. <a class="note-count" href="{Permalink}#notes">
  333. {NoteCountWithLabel}
  334. </a>
  335. {/block:NoteCount}
  336.  
  337. {block:RebloggedFrom}
  338. <a class="reblog-link" href="{ReblogParentURL}">
  339. {ReblogParentName}
  340. </a>
  341. {/block:RebloggedFrom}
  342.  
  343. {block:PermalinkPage}
  344.  
  345. {block:HasTags}
  346. <ul class="tags">
  347. {block:Tags}<li><a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
  348. </ul>
  349. {/block:HasTags}
  350.  
  351. {block:PostNotes}
  352. <div class="post-notes">
  353. {PostNotes}
  354. </div>
  355. {/block:PostNotes}
  356.  
  357. {/block:PermalinkPage}
  358. </footer>
  359. {/block:Date}
  360. </article>
  361. {/block:Posts}
  362. </main>
  363.  
  364. {block:Pagination}
  365. <nav class="pagination">
  366. <ul>
  367. {block:PreviousPage}<li><a href="{PreviousPage}">{lang:Previous}</a></li>{/block:PreviousPage}
  368. {block:NextPage}<li><a href="{NextPage}">{lang:Next}</a></li>{/block:NextPage}
  369. </ul>
  370. </nav>
  371. {/block:Pagination}
  372.  
  373. <script src="//static.tumblr.com/xeccbfq/Qgqnv9yqb/jquery.min.js"></script>
  374. <script src="//static.tumblr.com/xeccbfq/V7Fnvbb38/libs.min.js"></script>
  375. <script>
  376. // Developer configuration
  377. var config = {
  378. transitions: true,
  379. loadingMessage: '{lang:Loading}...',
  380. loadingMessageClass: 'js-loading-message'
  381. };
  382.  
  383. // Data and theme state
  384. var model = {
  385. $articles: $('.js-column'),
  386. $masthead: $('.masthead'),
  387. $pagination: $('.pagination')
  388. };
  389.  
  390. // Displaying data and state
  391. var view = {
  392. showLoadingMessage: function() {
  393. this.$loadingMessage = $('<p>').text(config.loadingMessage).addClass(config.loadingMessageClass);
  394. this.$loadingMessage.appendTo('body');
  395. },
  396. hideLoadingMessage: function() {
  397. this.$loadingMessage.velocity("transition.slideDownOut", 500);
  398. },
  399. showContent: function() {
  400. model.$articles.velocity("transition.slideLeftIn", { duration: 500, stagger: 250 });
  401. model.$pagination.show();
  402. },
  403. hideContent: function() {
  404. model.$articles.hide();
  405. model.$pagination.hide();
  406. }
  407. };
  408.  
  409. // Manages view and data
  410. var controller = {
  411. init: function() {
  412. if (config.transitions) {
  413. view.hideContent();
  414. view.showLoadingMessage();
  415. }
  416. },
  417. onPageLoad: function() {
  418. if (config.transitions) {
  419. view.showContent();
  420. view.hideLoadingMessage();
  421. }
  422. }
  423. };
  424.  
  425. // Run controller and listen for load event
  426. controller.init();
  427. $(window).load(function() {
  428. controller.onPageLoad();
  429. });
  430. </script>
  431. </body>
  432. </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!