API tools faq
paste
hawkinsgrocery

theme 02 — hero

hawkinsgrocery
Jul 9th, 2022 (edited)
3,631
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4. <!---
  5.  
  6. hero @ hawkinsgrocery.tumblr.com
  7.  
  8. basecode: seyche
  9.  
  10. PLEASE DO NOT:
  11. remove the credits;
  12. claim as your own;
  13. use as a base, take parts of the theme, repost as your own
  14.  
  15. YOU CAN:
  16. edit as much as you want for your own personal use only.
  17.  
  18. --->
  19.  
  20.  
  21.  
  22. <html>
  23. <head>
  24. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  29. <meta charset="utf-8">
  30. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  31.  
  32. <!-- scripts -->
  33. <link href='https://static.tumblr.com/m2fiocp/rlrqq9wlt/outicons.css' rel='stylesheet' type='text/css'>
  34.  
  35. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  36. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  37.  
  38. <script src="//pull.cappuccicons.com/cpf.js"></script>
  39.  
  40. <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  41. <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
  42.  
  43. <link href="https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic,900,900italic" rel="stylesheet">
  44.  
  45. <link href="https://fonts.googleapis.com/css?family=Poppins:400,400italic,700,700italic,900,900italic" rel="stylesheet">
  46.  
  47. <!----- VARIABLES AND OPTIONS ----->
  48.  
  49. {block:Hidden}
  50. <meta name="image:Sidebar" content=""/>
  51.  
  52. <meta name="color:accent" content="#5f8a9b"/>
  53. <meta name="color:posts" content="#191919"/>
  54. <meta name="color:background" content="#0e0e0e"/>
  55. <meta name="color:text" content="#cccccc"/>
  56. <meta name="color:link" content="#eeeeee"/>
  57. <meta name="color:borders" content="#888888">
  58. <meta name="color:post borders" content="#444444"/>
  59. <meta name="color:sidebar borders" content="#d1d1d1"/>
  60. <meta name="color:box shadow" content="#646464"/>
  61.  
  62. <meta name="select:font" content="karla" title="karla"/>
  63. <meta name="select:font" content="poppins" title="poppins"/>
  64. <meta name="select:font" content="karla" title="karla"/>
  65.  
  66. <meta name="select:font size" content="12px" title="12px"/>
  67. <meta name="select:font size" content="13px" title="13px"/>
  68. <meta name="select:font size" content="14px" title="14px"/>
  69. <meta name="select:font size" content="15px" title="15px"/>
  70. <meta name="select:font size" content="16px" title="16px"/>
  71. <meta name="select:font size" content="17px" title="17px"/>
  72. <meta name="select:font size" content="18px" title="18px"/>
  73.  
  74. <meta name="select:border style" content="solid" title="solid">
  75. <meta name="select:border style" content="dotted" title="dotted">
  76. <meta name="select:border style" content="dashed" title="dashed">
  77. <meta name="select:border style" content="double" title="double">
  78. <meta name="select:border style" content="ridge" title="ridge">
  79.  
  80. <meta name="text:border size" content="1px"/>
  81.  
  82. <meta name="select:post width" content="400px" title="400px"/>
  83. <meta name="select:post width" content="500px" title="500px"/>
  84. <meta name="select:post width" content="540px" title="540px"/>
  85.  
  86. <meta name="text:post margin" content="150"/>
  87.  
  88. <meta name="text:home link" content="home"/>
  89. <meta name="text:ask link" content="ask"/>
  90. <meta name="text:archive link" content="archive"/>
  91. <meta name="text:submit link" content=""/>
  92. <meta name="text:link 1 URL" content=""/>
  93. <meta name="text:link 1" content="one"/>
  94. <meta name="text:link 2 URL" content=""/>
  95. <meta name="text:link 2" content="two"/>
  96. <meta name="text:link 3 URL" content=""/>
  97. <meta name="text:link 3" content="three"/>
  98. <meta name="text:link 4 URL" content=""/>
  99. <meta name="text:link 4" content="four"/>
  100. <meta name="text:link 5 URL" content=""/>
  101. <meta name="text:link 5" content="five"/>
  102.  
  103. <meta name="text:updates title" content="updates">
  104. <meta name="text:updates content" content="type your updates here">
  105.  
  106. <meta name="if:search" content="1"/>
  107. <meta name="if:borders" content="0" />
  108. <meta name="if:box shadow" content="1"/>
  109. <meta name="if:show updates tab" content="1"/>
  110. {/block:Hidden}
  111.  
  112.  
  113. <!-- custom icons -->
  114. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  115. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  116. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  117. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  118. <script src="//pull.cappuccicons.com/cpf.js"></script>
  119.  
  120. <!-- custom icons -->
  121.  
  122. <!-- script -->
  123.  
  124. <link href='https://static.tumblr.com/m2fiocp/rlrqq9wlt/outicons.css' rel='stylesheet' type='text/css'>
  125.  
  126.  
  127. <!----- CSS ----->
  128.  
  129. <!--SEARCH-->
  130. <script language="javascript">
  131. function send()
  132. {document.theform.submit()}
  133. </script>
  134.  
  135.  
  136.  
  137. <style type="text/css">
  138.  
  139. :root {
  140. --Iconsax-Size:20px;
  141. --Iconsax-Color:#9fb3c7;
  142. }
  143.  
  144. /*----- BASIC STYLING -----*/
  145.  
  146. body {
  147. font-family: '{select:font}', sans-serif;
  148. font-size: {select:font size};
  149. color: {color:text};
  150. background-color: {color:background};
  151. line-height: 160%;
  152. word-wrap: break-word;
  153. letter-spacing: 0.04em;
  154. margin: 0;
  155. padding: 0;
  156. }
  157.  
  158. a {
  159. color: {color:link};
  160. text-decoration: none;
  161. -webkit-transition: all 0.3s;
  162. -moz-transition: all 0.3s;
  163. -ms-transition: all 0.3s;
  164. -o-transition: all 0.3s;
  165. transition: all 0.3s;
  166. }
  167.  
  168. a:hover {
  169. color: {color:accent};
  170. -webkit-transition: all 0.3s;
  171. -moz-transition: all 0.3s;
  172. -ms-transition: all 0.3s;
  173. -o-transition: all 0.3s;
  174. transition: all 0.3s;
  175. }
  176.  
  177. .updates a
  178. {box-shadow:{color:box shadow} 0px -1px 0px inset;}
  179. .updates a:hover
  180. {box-shadow:{color:box shadow} 0px -12px 0px inset;
  181. }
  182.  
  183. blockquote {
  184. padding: 0 0 0 1.5em;
  185. margin: 1.5em 0 1.5em 1.5em;
  186. border-left:{text:Border Size} {select:Border Style} {color:Borders};
  187. }
  188.  
  189. h1, h2, h3, h4, h5, .title {
  190. font-size: {select:font size};
  191. letter-spacing: 0.06em;
  192. line-height: 115%;
  193. font-weight: bold;
  194. margin-left:3px;
  195. }
  196.  
  197. h1, .title {font-size: 1.5em;}
  198. h2 {font-size: 1.3em;}
  199. h3 {font-size: 1.25em;}
  200. h4 {font-size: 1.1em;}
  201. h5 {font-size: 1em;}
  202.  
  203. small {font-size: 0.9em;}
  204. big {font-size: 1.1em;}
  205.  
  206. hr {
  207. height: 1px;
  208. box-shadow: none;
  209. border-width: {text:Border Size} 0px 0px 0px;
  210. border-style: {select:Border Style};
  211. border-color: {color:Borders};
  212. }
  213.  
  214. pre {
  215. line-height: inherit;
  216. font-size: inherit;
  217. white-space: pre-wrap;
  218. white-space: -moz-pre-wrap;
  219. white-space: -pre-wrap;
  220. white-space: -o-pre-wrap;
  221. word-wrap: break-word;
  222. }
  223.  
  224. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  225.  
  226. .navbg {
  227. box-sizing: border-box;
  228. padding: 2em;
  229. background-color: {color:nav background};
  230. color: {color:nav links};
  231. {block:ifNotSolidPosts}
  232. {block:ifRoundedCorners}border-radius: 8px;{/block:ifRoundedCorners}
  233. {/block:ifNotSolidPosts}
  234. }
  235.  
  236. .navbg a {color: {color:nav links};}
  237. .navbg a:hover {color: {color:accent};}
  238.  
  239. .navbg .title, .navbg .subtitle, .navbg.subtitle {color: {color:nav title};}
  240.  
  241. /* borders on date info, asks, under description title and quote */
  242.  
  243. .short-border { /* info border */
  244. border-color: {color:Borders};
  245. display: inline-block;
  246. width:35px;
  247. margin:-8px 5px;
  248. border-width: {text:Border Size} 0px 0px 0px;
  249. border-style: {select:Border Style};
  250. vertical-align:middle;
  251. }
  252.  
  253. .short-border2 {
  254. border-color: {color:Borders};
  255. display: inline-block;
  256. width:105px;
  257. color:{color:accent};
  258. margin:15px 0 5px;
  259. margin-right:5px;
  260. border-width: {text:Border Size} 0px 0px 0px;
  261. border-style: {select:Border Style};
  262. vertical-align:bottom;
  263. }
  264.  
  265.  
  266. /*----- SIDEBAR -----*/
  267.  
  268. #sidebar {
  269. font-size:10px;
  270. width:135px;
  271. height:250px;
  272. position:fixed;
  273. margin-left:-10px;
  274. margin-right:150px;
  275. padding-bottom:80px;
  276. padding-top:-5px;
  277. text-align:left;
  278. padding:15px;
  279. border-radius:{text:border radius};
  280. line-height:100%;
  281. background:{color:posts};
  282. border:1px solid {color:post borders};
  283. border-radius:10px;
  284. {block:ifboxshadow}
  285. box-shadow:6px 6px 0px rgba({RGBcolor:box shadow}, 0.2);
  286. {/block:ifboxshadow}
  287. }
  288.  
  289. {block:ifSidebarImage}
  290. #side-img {
  291. display:center;
  292. margin:10px 10px; 10px 10px;
  293. margin-left:5px;
  294. max-width:55px;
  295. border-radius:10px;
  296.  
  297. }
  298. {/block:ifSidebarImage}
  299.  
  300. #description, nav {margin-top: 1.25em;}
  301. nav a {
  302. display:inline;
  303. margin-left:5px;
  304. }
  305.  
  306. nav a:after {
  307. content:'';
  308. color:{color:accent};
  309. margin-left:7px;
  310. font-weight:600;
  311. display:inline-block;
  312. }
  313. }
  314.  
  315. .searchbox {
  316. color:{color:link};
  317. margin-top:3px;
  318. margin-right:3px;
  319. text-align:right;
  320. }
  321.  
  322. .searchbox input {
  323. font-size:10px;
  324. outline:none;
  325. background-color: transparent;
  326. border: 0px solid white;
  327. text-transform: lowercase;
  328. line-height:14px;
  329. text-align:right;
  330. padding: 0px 9px;
  331. margin-top:10px;
  332. width:82px;
  333. }
  334.  
  335. .searchbox input, .actual-edit-overlay {
  336. -webkit-text-fill-color: {color:text}; !important;
  337. font-family:'karla';
  338. }
  339.  
  340. /*----- POSTS -----*/
  341.  
  342. main {
  343. position: relative;
  344. width: calc(250px + {select:post width} + 150px);
  345. margin: auto;
  346. margin-top: -50px;
  347. {block:ifBorders}
  348. border: {text:Border Size} {select:Border Style} {color:Borders};
  349. {/block:ifBorders}
  350. }
  351.  
  352. section {
  353. position: relative;
  354. width: {select:post width};
  355. margin-left: 400px;
  356. }
  357.  
  358. article {
  359. width: 100%;
  360. position: relative;
  361. margin: {text:post margin}px auto;
  362. }
  363.  
  364. .posts {
  365. background-color:{color:posts};
  366. border-radius:10px;
  367. border:1px solid {color:post borders};
  368. padding:30px;
  369. {block:ifboxshadow}
  370. box-shadow:6px 6px 0px rgba({RGBcolor:box shadow}, 0.2);
  371. {/block:ifboxshadow}
  372. }
  373.  
  374. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {
  375. max-width: 100%;
  376. {block:ifCaptionBorder}
  377. outline: {text:Border Size} {select:Border Style} {color:Borders};
  378. {/block:ifCaptionBorder}
  379. }
  380.  
  381. .border {
  382. border: 1px solid {color:post border};
  383. }
  384.  
  385. .rounded {
  386. border-radius: {select: border radius}px;
  387. }
  388.  
  389. /*----- CAPTIONS -----*/
  390.  
  391. .caption {
  392. margin-top: 2em;
  393. list-style-type: none;
  394. {block:ifCaptionBorder}
  395. outline: {text:Border Size} {select:Border Style} {color:Borders};
  396. {/block:ifCaptionBorder}
  397. }
  398. .text-caption:first-of-type {margin-top: 0;}
  399.  
  400. .user-icon, .ask-icon {
  401. border-radius:15%;
  402. display: inline-block;
  403. vertical-align: middle;
  404. width: 2em;
  405. height: 2em;
  406. margin-right: 1em;
  407. }
  408.  
  409. .username {
  410. display: inline-block;
  411. vertical-align: middle;
  412. font-weight: bold;
  413. }
  414.  
  415. .deactive::after {
  416. content: '(deactivated)';
  417. margin-left: 1em;
  418. opacity: 0.75;
  419. color: {color:text};
  420. }
  421.  
  422. p.tmblr-attribution {margin-top: 1em !important;}
  423.  
  424. /*----- TEXT -----*/
  425.  
  426. h1.post-title {margin-top: 0;}
  427.  
  428. /*----- LINK -----*/
  429.  
  430. a.link-wrap {display: block; border: 1px solid {color:borders};}
  431. .link {padding: 2em;}
  432. .link-host, .link-txt {margin-top: 1.5em;}
  433.  
  434.  
  435. .npf-link-block {
  436. margin-top: 1.5em;
  437. background-color: inherit;
  438. border: 1px solid inherit;
  439. color: inherit;
  440. }
  441.  
  442. /*----- PHOTO -----*/
  443.  
  444. img {
  445. margin: 0;
  446. display: block;
  447. height: auto;
  448. max-width: 100%;
  449. }
  450.  
  451. .photo img {width: 100%;}
  452. .vignette, #vignette {opacity: 0;}
  453. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  454.  
  455. .lightbox-image, #tumblr_lightbox img {
  456. box-shadow: none !important;
  457. border-radius: 0 !important;
  458. max-width: none;
  459. }
  460.  
  461. #tumblr_lightbox_caption, .lightbox-caption {
  462. color: #fff !important;
  463. font-family: inherit;
  464. margin-top: 1em !important;
  465. }
  466.  
  467. /*----- PHOTOSET -----*/
  468.  
  469. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  470. margin-left: 0 !important;
  471. margin-right: 0 !important;
  472. }
  473.  
  474. /*----- QUOTE -----*/
  475.  
  476. .quote {
  477. line-height: 160%;
  478. font-size: 1.25em;
  479. {block:ifCaptionBorder}
  480. outline: {text:Border Size} {select:Border Style} {color:Borders};
  481. {/block:ifCaptionBorder}
  482. }
  483.  
  484. .quote p:first-of-type {margin-top: 0;}
  485. .quote p:last-of-type {margin-bottom: 0;}
  486.  
  487. .source {margin-top: 1.5em;}
  488.  
  489. /*----- CHAT -----*/
  490.  
  491. .chat {padding: 0; margin: 0;}
  492. .chat li {list-style-type: none; margin-top: 1em;}
  493. .chat li:first-of-type {margin-top: 0;}
  494. .chatter {font-weight: bold;}
  495.  
  496. p.npf_chat, p.npf_chat b {
  497. font-family: inherit;
  498. {block:ifCaptionBorder}
  499. outline: {text:Border Size} {select:Border Style} {color:Borders};
  500. {/block:ifCaptionBorder}
  501. }
  502.  
  503. /*----- ANSWER -----*/
  504.  
  505. .ask-wrap {
  506. border-bottom: 1px solid {color:borders};
  507. padding-bottom: 2em;
  508. {block:ifCaptionBorder}
  509. outline: {text:Border Size} {select:Border Style} {color:Borders};
  510. {/block:ifCaptionBorder}
  511. }
  512.  
  513. .ask-wrap .asking {
  514. display: inline-block;
  515. margin-left: 1em;
  516. font-weight: bold;
  517. }
  518.  
  519. .question {
  520. margin-top: 1em;
  521. {block:ifCaptionBorder}
  522. border-bottom:0px;
  523. padding-bottom:0px;
  524. {/block:ifCaptionBorder}
  525. }
  526. .question p:first-of-type {margin-top: 0;}
  527. .question p:last-of-type {margin-bottom: 0;}
  528.  
  529. /*----- AUDIO -----*/
  530.  
  531. .audiopost {padding: 2em; border: 1px solid {color:borders};}
  532.  
  533. .album-art {
  534. z-index: 1;
  535. display: inline-block;
  536. vertical-align: middle;
  537. float: left;
  538. width: 100px;
  539. height: 100px;
  540. }
  541.  
  542. .audio-player-wrap {
  543. width: 100px;
  544. height: 100px;
  545. display: inline-block;
  546. }
  547.  
  548. .button {
  549. width: 30px;
  550. height: 30px;
  551. overflow: hidden;
  552. position: relative;
  553. z-index: 2;
  554. margin: 7px;
  555. }
  556.  
  557. .audiobox {
  558. background-color: #f2f2f2;
  559. z-index: 3;
  560. position: absolute;
  561. margin: 28px 0 0 28px;
  562. border-radius: 50%;
  563. }
  564.  
  565. .audioinfo {
  566. display: inline-block;
  567. height: 100px;
  568. max-width: calc(100% - 100px);
  569. margin-left: 100px;
  570. display: flex;
  571. justify-content: center;
  572. flex-direction: column;
  573. box-sizing: border-box;
  574. padding-left: 2em;
  575. }
  576.  
  577. .audioinfo li {list-style-type: none;}
  578. .track {font-weight: bold;}
  579.  
  580. /*----- INFO -----*/
  581.  
  582. .info {margin-top: 2em;}
  583. .info a {display: inline-block; vertical-align: middle;}
  584.  
  585. .likeb {
  586. position: relative;
  587. display: inline-block;
  588. height: 1.6em;
  589. margin-bottom: -1px;
  590. }
  591.  
  592. .likeb .like_button iframe {
  593. position: absolute;
  594. top: 0;
  595. left: 0;
  596. bottom: 0;
  597. right: 0;
  598. z-index: 2;
  599. opacity: 0;
  600. }
  601.  
  602. .like_button iframe {width: 100% !important; height: 100% !important;}
  603. .likeb .liked + .actual-button {color: red;}
  604. .likeb .liked + .actual-button:after {content: 'd'; font-weight:bold;}
  605.  
  606. .info a, .tags a {
  607. margin-right: 0.75em;
  608. }
  609.  
  610. a.pinned-post {font-weight: bold; color: {color:accent};}
  611.  
  612. /*---- POST NOTES -----*/
  613.  
  614. .pagenotes {
  615. padding:10px;
  616. margin-top:10px;
  617. width:540px;
  618. border:0;
  619. }
  620.  
  621. .pagenotes a {
  622. font-family:'karla';
  623. font-weight:700;
  624. color:#444444;
  625. }
  626.  
  627. .pagenotes ol, .pagenotes ul {
  628. display:block;
  629. padding:0;
  630. margin:0;
  631. }
  632.  
  633.  
  634. li.note {
  635. display:block;
  636. padding:5px 0 5px 0;
  637. font-size:10px;
  638. margin-left:-30px;
  639. }
  640.  
  641.  
  642. ol.notes li.note img.avatar {
  643. display:none;
  644. }
  645.  
  646.  
  647. a.more_notes_link {
  648. display:block;
  649. margin-top:10px;
  650. text-align:center;
  651. }
  652.  
  653.  
  654.  
  655.  
  656. /*---- PAGINATION -----*/
  657.  
  658. #page-navigation {
  659. text-align: inline-block;
  660. margin-top:20px;
  661. }
  662. #page-navigation a, .current-page {margin: 0 0.5em; margin-right:10px;}
  663. .current-page {font-weight: bold; color: {color:accent};}
  664.  
  665. /* scroll to top */
  666.  
  667. .scrollToTopBtn {
  668. background-color:transparent;
  669. border:none;
  670. color:{color:link};
  671. cursor: pointer;
  672. font-size: 16px;
  673. width:20px;
  674. height:16px;
  675. position: fixed;
  676. bottom:40px;
  677. right:13.5px;
  678. z-index: 100;
  679. opacity: 0;
  680. transition: all .5s ease
  681. }
  682.  
  683. .showBtn {
  684. opacity: 1;
  685. }
  686.  
  687. /* --- captain's mates --- */
  688.  
  689. #trigger {
  690. position:fixed;
  691. z-index:999;
  692. top:20px;
  693. left:20px;
  694. width:35px;
  695. height:35px;
  696. background-color:{color:posts};
  697. text-align:center;
  698. line-height:34px;
  699. font-size:20px;
  700. cursor:pointer;
  701. border-radius:10px;
  702. border:1px solid {color:borders};
  703. }
  704.  
  705. .updates {
  706. position:fixed;
  707. z-index:9999;
  708. top:20px;
  709. left:20px;
  710. width:130px;
  711. height:auto;
  712. box-sizing:border-box;
  713. padding:15px 15px 15px 15px;
  714. background-color:{color:posts};
  715. text-align:left;
  716. border:1px solid {color:post borders};
  717. border-radius:10px;
  718. opacity:0;
  719. transition:all ease 0.5s;
  720. font-size:10px;
  721. background-color:{color:posts};
  722. box-shadow:6px 6px 0px rgba({RGBcolor:box shadow}, 0.2);
  723. }
  724.  
  725. .updates h1 {
  726. text-align:center;
  727. font-size:12px;
  728. margin:0px -10px 5px -10px;
  729. padding:0px 10px 5px 10px;
  730. }
  731.  
  732. .updates a {
  733. font-size:10px;
  734. padding:3px 6px;
  735. margin:0px 0px 1px 0px;
  736. }
  737.  
  738. .updates a:hover {
  739. color:#f2a8d7;
  740. }
  741.  
  742. .updates:hover {
  743. opacity:1;
  744. }
  745.  
  746.  
  747. /*---- CREDIT -----*/
  748.  
  749. #credit {
  750. position: fixed;
  751. bottom: 20px;
  752. right: 20px;
  753. font-size: 15px;
  754. }
  755.  
  756. /*----
  757.  
  758. MEDIA QUERIES AND RESPONSIVENESS:
  759.  
  760. if you change the basic layout (i.e. sidebar to header), you MUST modify or delete this section, or else your theme will get screwed up on smaller screen sizes. if you're unfamiliar with media queries and/or you aren't interested in making responsive themes, I recommend deleting this whole section.
  761.  
  762. -----*/
  763.  
  764. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  765.  
  766. @media only screen and (max-width: 1100px) {
  767. main {width: {select:post width};}
  768.  
  769. #sidebar {
  770. position: relative;
  771. margin: {text:post margin}px auto;
  772. width: 100%;
  773. top: auto;
  774. }
  775.  
  776. section {margin-left: 0;}
  777. }
  778.  
  779. /*--- for mobile devices ---*/
  780.  
  781. @media only screen and (max-width: 720px) {
  782. main, section {width: 80vw;}
  783. }
  784.  
  785. /*---- END OF MEDIA QUERIES -----*/
  786.  
  787. {CustomCSS}
  788.  
  789.  
  790. .views {
  791. position:fixed;
  792. bottom:15px;
  793. left:15px;
  794. font-size:10px
  795. }
  796.  
  797. .credit {
  798. position:fixed;
  799. bottom:15px;
  800. right:15px;
  801. font-size:20px
  802. }
  803.  
  804.  
  805. </style>
  806.  
  807. </head>
  808.  
  809. <!----- HTML ----->
  810.  
  811. <body>
  812.  
  813. <!-- scroll to top -->
  814. <div class="scrollToTopBtn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>️</div>
  815.  
  816. <!-- updates tab -->
  817. {block:ifshowupdatestab}
  818. <div id="trigger">
  819. ?
  820. </div>
  821.  
  822. <div class="updates">
  823. <h1>{text:updates title}</h1>
  824.  
  825. {text:updates content}
  826. </div>
  827. {/block:ifshowupdatestab}
  828.  
  829. <!-- main = main container -->
  830.  
  831. <main>
  832.  
  833. <!----- SIDEBAR ----->
  834.  
  835. <aside id="sidebar">
  836. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="Sidebar image"/></a>{/block:ifSidebarImage}
  837. <div class="title"><a href="/">{Title}</a></div>
  838. {block:Description}<div id="description">{Description}</div>{/block:Description}
  839. <nav>
  840. <div class="sidelinks" style="font-size:9px;">
  841. <a href="/">home</a>
  842. <a href="/ask">ask</a>
  843. <p>
  844. {block:IfLink1}<a href="{text:link 1 URL}">{text:link 1}</a>{/block:IfLink1}
  845.  
  846. {block:IfLink2}<a href="{text:link 2 URL}">{text:link 2}</a>{/block:IfLink2}
  847.  
  848. {block:IfLink3}<a href="{text:link 3 URL}" >{text:link 3}</a>{/block:IfLink3}
  849.  
  850. {block:IfLink4}<a href="{text:link 4 URL}" >{text:link 4}</a>{/block:IfLink4}
  851. </div>
  852. </nav>
  853.  
  854. <br>
  855.  
  856. <form action="/search" method="get" class="searchbox" name="theform">
  857. <i class="fa fa-search" aria-hidden="true" style="font-size:7px;margin-left:6px;margin-right:-5px;color:{color:link}"></i>
  858. <input type="text" name="q" value="" placeholder="search" id="sf"/>
  859. </form>
  860.  
  861. <div class="short-border2"></div>
  862.  
  863. {block:Pagination}
  864. <article id="page-navigation">
  865. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  866. {block:JumpPagination length="3"}
  867. {block:CurrentPage}<span class="current-page" display="color:#000000">{PageNumber}</span>{/block:CurrentPage}
  868. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  869. {/block:JumpPagination}
  870. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  871. </article>
  872. {/block:Pagination}
  873. </aside>
  874.  
  875. <!----- TAG AND DAY PAGES ----->
  876.  
  877. <!-- section = post container -->
  878.  
  879. <section>
  880.  
  881. {block:TagPage}
  882. <article>
  883. #{Tag}
  884. </article>
  885. {/block:TagPage}
  886.  
  887. {block:DayPage}
  888. <article>
  889. {Month} {DayOfMonth}, {Year}
  890. </article>
  891. {/block:DayPage}
  892.  
  893. <!----- POSTS ----->
  894.  
  895. {block:Posts}
  896. <article class="posts" id="{PostID}">
  897.  
  898. {block:Text}
  899. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  900. {block:NotReblog}
  901. <li class="caption text-caption">
  902. {Body}
  903. </li>
  904. {/block:NotReblog}
  905. {block:RebloggedFrom}
  906. {block:Reblogs}
  907. <li class="caption text-caption">
  908. <img src="{PortraitURL-64}" class="user-icon">
  909. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  910. {Body}
  911. </li>
  912. {/block:Reblogs}
  913. {/block:RebloggedFrom}
  914. {/block:Text}
  915.  
  916. {block:Link}
  917. <a href="{URL}" class="link-wrap">
  918. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  919. <div class="link">
  920. <div class="title">{Name}</div>
  921. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  922. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  923. </div>
  924. </a>
  925. {block:Description}
  926. {block:NotReblog}
  927. <li class="caption">
  928. {Description}
  929. </li>
  930. {/block:NotReblog}
  931. {/block:Description}
  932. {block:RebloggedFrom}
  933. {block:Reblogs}
  934. <li class="caption">
  935. <img src="{PortraitURL-64}" class="user-icon">
  936. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  937. {Body}
  938. </li>
  939. {/block:Reblogs}
  940. {/block:RebloggedFrom}
  941. {/block:Link}
  942.  
  943. {block:Photo}
  944. <div class="photo">
  945. {LinkOpenTag}<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"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  946. </div>
  947. {block:Caption}
  948. {block:NotReblog}
  949. <li class="caption">
  950. {Caption}
  951. </li>
  952. {/block:NotReblog}
  953. {block:RebloggedFrom}
  954. {block:Reblogs}
  955. <li class="caption">
  956. <img src="{PortraitURL-64}" class="user-icon">
  957. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  958. {Body}
  959. </li>
  960. {/block:Reblogs}
  961. {/block:RebloggedFrom}
  962. {/block:Caption}
  963. {/block:Photo}
  964.  
  965. {block:Photoset}
  966. <div class="photo">{Photoset-700}</div>
  967. {block:Caption}
  968. {block:NotReblog}
  969. <li class="caption">
  970. {Caption}
  971. </li>
  972. {/block:NotReblog}
  973. {block:RebloggedFrom}
  974. {block:Reblogs}
  975. <li class="caption">
  976. <img src="{PortraitURL-64}" class="user-icon">
  977. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  978. {Body}
  979. </li>
  980. {/block:Reblogs}
  981. {/block:RebloggedFrom}
  982. {/block:Caption}
  983. {/block:Photoset}
  984.  
  985. {block:Video}
  986. <div class="video">{Video-500}</div>
  987. {block:Caption}
  988. {block:NotReblog}
  989. <li class="caption">
  990. {Caption}
  991. </li>
  992. {/block:NotReblog}
  993. {block:RebloggedFrom}
  994. {block:Reblogs}
  995. <li class="caption">
  996. <img src="{PortraitURL-64}" class="user-icon">
  997. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  998. {Body}
  999. </li>
  1000. {/block:Reblogs}
  1001. {/block:RebloggedFrom}
  1002. {/block:Caption}
  1003. {/block:Video}
  1004.  
  1005. {block:Quote}
  1006. <div class="quote">{Quote}</div>
  1007. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1008. {/block:Quote}
  1009.  
  1010. {block:Chat}
  1011. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1012. <ul class="chat">{block:Lines}
  1013. <li>
  1014. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1015. {Line}
  1016. </li>
  1017. {/block:Lines}</ul>
  1018. {/block:Chat}
  1019.  
  1020. {block:Answer}
  1021. <div class="ask-wrap">
  1022. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1023. <div class="asking">{Asker} asked</div>
  1024. <div class="question">{Question}</div>
  1025. </div>
  1026. {block:Answerer}
  1027. <li class="caption">
  1028. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1029. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1030. {Answer}
  1031. </li>
  1032. {/block:Answerer}
  1033. {block:NotReblog}
  1034. <li class="caption">
  1035. {Replies}
  1036. </li>
  1037. {/block:NotReblog}
  1038. {block:RebloggedFrom}
  1039. {block:Reblogs}
  1040. <li class="caption">
  1041. <img src="{PortraitURL-64}" class="user-icon">
  1042. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1043. {Body}
  1044. </li>
  1045. {/block:Reblogs}
  1046. {/block:RebloggedFrom}
  1047. {/block:Answer}
  1048.  
  1049. {block:Audio}
  1050. <div class="audiopost">
  1051. <div class="audiobox">
  1052. <div class="button">
  1053. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1054. </div>
  1055. </div>
  1056. {block:AlbumArt}
  1057. <img src="{AlbumArtURL}" class="album-art">
  1058. {/block:AlbumArt}
  1059. <div class="audioinfo">
  1060. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1061. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1062. {block:Album}<li>{Album}</li>{/block:Album}
  1063. </div>
  1064. </div>
  1065. {block:Caption}
  1066. {block:NotReblog}
  1067. <li class="caption">
  1068. {Caption}
  1069. </li>
  1070. {/block:NotReblog}
  1071. {block:RebloggedFrom}
  1072. {block:Reblogs}
  1073. <li class="caption">
  1074. <img src="{PortraitURL-64}" class="user-icon">
  1075. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1076. {Body}
  1077. </li>
  1078. {/block:Reblogs}
  1079. {/block:RebloggedFrom}
  1080. {/block:Caption}
  1081. {/block:Audio}
  1082.  
  1083. <!----- INFO ----->
  1084.  
  1085. {block:Date}
  1086. <div class="info">
  1087. {block:PinnedPostLabel}<a href="{Permalink}" style="text-transform:lowercase; text-transform:bold; color:{color:accent}" class="pinned-post"><span class="sf sf-push-pin-o">&nbsp;&nbsp;pinned&nbsp;&nbsp;&nbsp;</span>{/block:PinnedPostLabel}
  1088. <a href="{Permalink}" style="text-transform:lowercase; font-size:11px;"><b>{Month} {DayOfMonth}, {Year}</b></a>
  1089. {block:NoteCount}<a href="{Permalink}" style="font-size:11px;" class="notecount"><b>&nbsp;&nbsp;{notecountwithlabel}</b></a>{/block:NoteCount}
  1090.  
  1091. <!-- reblog info and content source on permalink pages -->
  1092.  
  1093. {block:PermalinkPage}
  1094.  
  1095. {block:RebloggedFrom}
  1096. <a style="font-size:11px;" href="{ReblogParentURL}">via</a>
  1097. <a style="font-size:11px;" href="{ReblogRootURL}">source</a>
  1098. {/block:RebloggedFrom}
  1099. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  1100.  
  1101. {/block:PermalinkPage}
  1102.  
  1103. <!-- like and reblog buttons -->
  1104.  
  1105. <div class="short-border"></div>
  1106.  
  1107. <a href="{ReblogURL}" target="_blank" style="font-size:11px;"><b>&nbsp;&nbsp;reblog</b></a>
  1108. <a class="likeb" style="font-size:11px;" href="#">{LikeButton}<span class="actual-button"><b>&nbsp;&nbsp;like</b></span></a>
  1109.  
  1110. </div>
  1111. {/block:Date}
  1112.  
  1113. <!----- TAGS ----->
  1114.  
  1115. {block:HasTags}
  1116. <div class="tags" style="font-size: 10px; margin-top:10px;">
  1117. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1118. </div>
  1119. {/block:HasTags}
  1120.  
  1121. <!----- POST NOTES ----->
  1122.  
  1123. {block:PermalinkPage}{block:Date}{block:PostNotes}
  1124. <div class="notes">
  1125. {PostNotes}
  1126. </div>
  1127. {/block:PostNotes}{/block:Date}{/block:PermalinkPage}
  1128.  
  1129. </article>
  1130. {/block:Posts}
  1131.  
  1132. <!-- end of posts container -->
  1133.  
  1134. </section>
  1135.  
  1136. <!-- end of main container -->
  1137.  
  1138. </a></div>
  1139.  
  1140. <!----- NOTECOUNT ----->
  1141.  
  1142. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1143.  
  1144. <!----- MASONRY ----->
  1145.  
  1146. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  1147. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  1148.  
  1149. <script type="text/javascript">
  1150.  
  1151. $(document).ready(function(){
  1152.  
  1153. /// MASONRY
  1154.  
  1155. var $container = $('#container');
  1156. $container.masonry({
  1157. itemSelector: '.posts',
  1158. gutter: 100,
  1159. horizontalOrder: true
  1160. });
  1161. $container.imagesLoaded(function(){
  1162. $container.masonry();
  1163. $container.find('article').removeClass('masonry-load');
  1164. });
  1165.  
  1166.  
  1167.  
  1168. feather.replace()
  1169.  
  1170. </script>
  1171.  
  1172.  
  1173. <script>
  1174. var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
  1175. var rootElement = document.documentElement
  1176.  
  1177. function handleScroll() {
  1178. var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  1179. if ((rootElement.scrollTop / scrollTotal ) > 0.05) {
  1180. scrollToTopBtn.classList.add("showBtn")
  1181. } else {
  1182. scrollToTopBtn.classList.remove("showBtn")
  1183. }
  1184. }
  1185.  
  1186. function scrollToTop() {
  1187. rootElement.scrollTo({
  1188. top: 0,
  1189. behavior: "smooth"
  1190. })
  1191. }
  1192. scrollToTopBtn.addEventListener("click", scrollToTop)
  1193. document.addEventListener("scroll", handleScroll)
  1194. </script>
  1195.  
  1196.  
  1197.  
  1198. <div class="credit"><a href="https://hawkinsgrocery.tumblr.com" title="hawkinsgrocery"><i class="oi oi-heart"></i></a></div>
  1199. </body></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!