hawkinsgrocery

theme 01 — state of grace

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