API tools faq
paste
aeternaphantasia

nojs challenge: hestia

aeternaphantasia
Oct 28th, 2018 (edited)
2,863
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  8.  
  9. <!--
  10.  
  11. hestia::coded by kuzuriha
  12.  
  13. this theme is an entry to the #nojschallenge hosted by @themehive, @baechys, @magnusthemes and @annathms. as its name implies, there is no js in this theme so please do not ask me to add functionalities using js!
  14.  
  15. credits:
  16. >abeezee, libre baskerville from google fonts
  17. >honeybee icon fonts by @themehive
  18. >nojs photosets by @espoirthemes and @annasthms
  19. >balloon.css by kazzkiq @github.io
  20.  
  21. 1. Don't remove the credit.
  22. 2. Don't move the credit. Just leave it there.
  23. 3. Don't use as a base code.
  24. 4. Please enjoy! If you find any bugs, please contact me! c:
  25.  
  26. -->
  27.  
  28. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  29. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
  30. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  31.  
  32. <!--variables-->
  33.  
  34. <meta name="image:bg" content=""/>
  35.  
  36. <meta name="color:bg" content="#fff"/>
  37. <meta name="color:body" content="#404040"/>
  38. <meta name="color:first accent" content="#FFB157"/>
  39. <meta name="color:second accent" content="#ff4571"/>
  40. <meta name="color:postbg" content="#fff"/>
  41.  
  42. <meta name="image:icon" content=""/>
  43.  
  44. <meta name="text:link1" content=""/>
  45. <meta name="text:link1URL" content=""/>
  46. <meta name="text:link2" content=""/>
  47. <meta name="text:link2URL" content=""/>
  48. <meta name="text:link3" content=""/>
  49. <meta name="text:link3URL" content=""/>
  50. <meta name="text:link4" content=""/>
  51. <meta name="text:link4URL" content=""/>
  52.  
  53. <style type="text/css">
  54. @import url('https://fonts.googleapis.com/css?family=ABeeZee|Libre+Baskerville');
  55.  
  56. [data-balloon]:after{
  57. background:linear-gradient(111deg, {color:first accent} 0%, {color:second accent} 71%) !important;
  58. font-family:'ABeeZee' !important;
  59. }
  60.  
  61. [data-balloon]:before{
  62. background:none !important;
  63. }
  64.  
  65. iframe.tmblr-iframe {
  66. z-index:99999999999999!important;
  67. top:0!important;
  68. right:0!important;
  69. opacity:0.4;
  70. /* delete invert(1) from here */
  71. filter:invert(1) contrast(150%);
  72. -webkit-filter:invert(1) contrast(150%);
  73. -o-filter:invert(1) contrast(150%);
  74. -moz-filter:invert(1) contrast(150%);
  75. -ms-filter:invert(1) contrast(150%);
  76. /* to here if your blog has a dark background */
  77. transform:scale(0.65);
  78. transform-origin:100% 0;
  79. -webkit-transform:scale(0.65);
  80. -webkit-transform-origin:100% 0;
  81. -o-transform:scale(0.65);
  82. -o-transform-origin:100% 0;
  83. -moz-transform:scale(0.65);
  84. -moz-transform-origin:100% 0;
  85. -ms-transform:scale(0.65);
  86. -ms-transform-origin:100% 0;}
  87.  
  88. iframe.tmblr-iframe:hover {
  89. opacity:0.6!important;}
  90.  
  91. ::selection{
  92. background:transparent;
  93. color:{color:second accent};
  94. }
  95.  
  96. ::-moz-selection{
  97. background:transparent;
  98. color:{color:second accent};
  99. }
  100.  
  101. ::-webkit-scrollbar{
  102. width:10px;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb:vertical{
  106. height:auto;
  107. background: linear-gradient(110deg, {color:first accent} 0%, {color:second accent} 71%);
  108. border:4px solid #fff;
  109. }
  110. body{
  111. margin:0;
  112. padding:0;
  113. font-family:'ABeeZee';
  114. font-size:12px;
  115. color:{color:body};
  116. background:{color:bg} url('{image:bg}') fixed;
  117. }
  118.  
  119. a{
  120. color:{color:first accent};
  121. text-decoration:none;
  122. }
  123.  
  124. a:hover{
  125. color:{color:second accent};
  126. }
  127.  
  128. #sidebar{
  129. width:30%;
  130. height:100%;
  131. position:fixed;
  132. top:0;
  133. left:0;
  134. }
  135.  
  136. #navbar{
  137. width:60px;
  138. height:100%;
  139. background: linear-gradient(110deg, {color:first accent} 0%, {color:second accent} 71%);
  140. left:0;
  141. position:absolute;
  142. top:0;
  143. }
  144.  
  145. .navlink a{
  146. display:block;
  147. width:20px;
  148. height:20px;
  149. padding:10px;
  150. color:#fff;
  151. text-align:center;
  152. line-height:100%;
  153. transition:.5s ease;
  154. font-size:20px;
  155. margin:10px;
  156. }
  157.  
  158. .navlink a:hover{
  159. margin-bottom:20px;
  160. }
  161.  
  162. #desc{
  163. width:75%;
  164. padding:10px;
  165. min-height:200px;
  166. margin-top:180px;
  167. margin-left:70px;
  168. }
  169.  
  170. #icon{
  171. width:64px;
  172. height:64px;
  173. float:left;
  174. margin-right:10px;
  175. border-radius:5px;
  176. }
  177.  
  178. #icon img{
  179. width:64px;
  180. height:64px;
  181. max-width:64px;
  182. max-height:64px;
  183. border-radius:5px;
  184. }
  185.  
  186. #blogtitle{
  187. padding:6px;
  188. text-transform:lowercase;
  189. font-size:16px;
  190. display:block;
  191. margin-top:15px;
  192. position:absolute;
  193. font-weight:700;
  194. margin-left:70px;
  195. font-family:'Libre Baskerville';
  196. }
  197.  
  198. #customlink{
  199. width:64px;
  200. margin-top:72px;
  201. position:absolute;
  202. }
  203.  
  204. .customlink a{
  205. display:block;
  206. margin-bottom:10px;
  207. background: linear-gradient(110deg, {color:first accent} 0%, {color:second accent} 71%);
  208. text-align:center;
  209. padding:6px;
  210. color:#fff;
  211. text-transform:uppercase;
  212. }
  213.  
  214. #desct{
  215. margin-top:74px;
  216. margin-left:74px;
  217. position:absolute;
  218. text-align:justify;
  219. }
  220.  
  221. #container{
  222. margin-left:calc(30% + 150px);
  223. margin-top:80px;
  224. }
  225.  
  226. .post{
  227. width:500px;
  228. position:relative;
  229. margin-bottom:90px;
  230. margin-left:0 auto;
  231. background:{color:postbg};
  232. }
  233.  
  234. .cap{
  235. padding:15px;
  236. word-wrap:break-word;
  237. text-align:justify;
  238. border-bottom:1px solid {color:first accent};
  239. }
  240.  
  241. .post img{
  242. max-width:100%;
  243. }
  244.  
  245. blockquote{
  246. border-left:1px solid {color:second accent};
  247. padding-left:10px;
  248. }
  249.  
  250. blockquote blockquote{
  251. border-left:1px solid {color:second accent};
  252. padding-left:10px;
  253. }
  254.  
  255. .title{
  256. font-family:'Libre Baskerville';
  257. font-size:20px;
  258. padding:10px;
  259. background:linear-gradient(110deg, {color:first accent} 0%, {color:second accent} 71%);
  260. color:#fff;
  261. font-weight:700;
  262. text-align:center;
  263. }
  264.  
  265. #link a{
  266. display:block;
  267. color:{color:second accent};
  268. font-family:'Libre Baskerville';
  269. font-size:20px;
  270. font-weight:700;
  271. border:1px solid {color:second accent};
  272. }
  273.  
  274. #quote{
  275. font-family:'Libre Baskerville';
  276. font-size:16px;
  277. text-align:right;
  278. font-style:italic;
  279. }
  280.  
  281. .tagcont{
  282. margin-top:10px;
  283. padding-left:10px;
  284. }
  285.  
  286. .tagcont a{
  287. display:inline-block;
  288. font-size:10px;
  289. margin-right:5px;
  290. margin-bottom:5px;
  291. }
  292.  
  293. .reblogcont{
  294. position:absolute;
  295. top:0;
  296. left:510px;
  297. }
  298.  
  299. .reblogcont img{
  300. padding:5px;
  301. background:#fff;
  302. border:1px solid {color:first accent};
  303. margin-bottom:10px;
  304. }
  305.  
  306. .reblogheader a{
  307. box-shadow:inset 0 -5px 0 {color:second accent};
  308. color:{color:body};
  309. font-weight:700;
  310. }
  311.  
  312. .pinfo{
  313. display:block;
  314. padding-top:15px;
  315. text-align:center;
  316. padding-bottom:15px;
  317. }
  318.  
  319. svg {
  320. width:10px;
  321. height:auto;
  322. opacity:.5;
  323. padding:1px;
  324. display:block;
  325. overflow:visible;
  326. }
  327.  
  328. .controls{
  329. margin-top:-5px;
  330. float:right;
  331. }
  332.  
  333. .controls a{
  334. display:inline-block;
  335. margin-right:8px;
  336. width:12px;
  337. line-height:120%;
  338. height:12px;
  339. background:linear-gradient(111deg, {color:first accent} 0%, {color:second accent} 71%);
  340. color:#fff;
  341. padding:6px;
  342. border-radius:2px;
  343. text-align:center;
  344. }
  345.  
  346. .controls .like{
  347. display:inline-block;
  348. }
  349.  
  350. .controls .like .liked + svg {
  351. opacity:1;
  352. }
  353.  
  354. .controls .like .liked + svg path {
  355. fill:#ec5a5a;
  356. }
  357.  
  358. .controls .like .like_button {
  359. position:relative;
  360. }
  361.  
  362. .controls .like .like_button iframe {
  363. position:absolute;
  364. top:0;
  365. left:0;
  366. bottom:0;
  367. right:0;
  368. z-index:2;
  369. opacity:0;
  370. }
  371.  
  372. .qbox{
  373. color:#fff;
  374. padding:10px;
  375. background:{color:first accent};
  376. }
  377.  
  378. #asker{
  379. display:block;
  380. margin-top:10px;
  381. text-align:right;
  382. }
  383.  
  384. [photoset-layout]{
  385. grid-gap:3px;
  386. }
  387.  
  388. div.pnotes{
  389. width:480px;
  390. padding:10px;
  391. }
  392.  
  393. .pnotes a{
  394. color:#fff;
  395. }
  396.  
  397. ol.notes{
  398. list-style-type:none !important;
  399. margin-left:-40px;
  400. }
  401.  
  402. ol.notes li.note{
  403. min-width:100px;
  404. margin-bottom:10px;
  405. float:left;
  406. padding:5px;
  407. background:linear-gradient(111deg, {color:first accent} 0%, {color:second accent} 71%);
  408. color:#fff;
  409. margin-right:10px;
  410. }
  411.  
  412. .pnotes img.avatar{
  413. display:none;
  414. }
  415.  
  416. footer{
  417. text-align:center;
  418. padding:10px;
  419. width:480px;
  420. margin-bottom:20px;
  421. }
  422.  
  423. .pag{
  424. background:linear-gradient(111deg, {color:first accent} 0%, {color:second accent} 71%);
  425. color:#fff;
  426. text-align:center;
  427. display:inline-block;
  428. margin-right:10px;
  429. padding:5px;
  430. border-radius:20px;
  431. margin-left:10px;
  432. }
  433.  
  434. .pag:hover{
  435. color:#fff;
  436. }
  437. </style>
  438. </head>
  439.  
  440. <body>
  441. <div id="sidebar">
  442. <div id="navbar">
  443.  
  444. <div style="margin-top:230px;"><div class="navlink">
  445.  
  446. <a href="/" data-balloon="home" data-balloon-pos="down"><span class="th th-home"></span></a>
  447. </div>
  448. <div class="navlink">
  449. <a href="/ask" data-balloon="ask" data-balloon-pos="down"><span class="th th-paper-plane"></span></a>
  450. </div>
  451. <div class="navlink">
  452. <a href="/archive" data-balloon="archive" data-balloon-pos="down"><span class="th th-briefcase"></span></a>
  453. </div>
  454. <div class="navlink">
  455. <a href="http://kuzuriha.tumblr.com" data-balloon="theme" data-balloon-pos="down"><span class="th th-code"></span></a>
  456. </div>
  457. </div>
  458. </div>
  459.  
  460. <div id="desc">
  461. <div id="icon"><img src="{image:icon}"/></div>
  462.  
  463. <div id="blogtitle">{Title}</div>
  464.  
  465. <div id="desct">{Description}</div>
  466.  
  467. <div id="customlink">
  468. {block:ifLink1}
  469.  
  470. <div class="customlink"><a href="{text:Link1URL}">{text:Link1}</a></div>
  471. {/block:ifLink1}
  472.  
  473. {block:ifLink2}
  474.  
  475. <div class="customlink"><a href="{text:Link2URL}">{text:Link2}</a></div>
  476. {/block:ifLink2}
  477.  
  478. {block:ifLink3}
  479.  
  480. <div class="customlink"><a href="{text:Link3URL}">{text:Link3}</a></div>
  481. {/block:ifLink3}
  482. {block:ifLink4}
  483.  
  484. <div class="customlink"><a href="{text:Link4URL}">{text:Link4}</a></div>
  485. {/block:ifLink4}
  486.  
  487.  
  488. </div>
  489. </div>
  490. </div>
  491.  
  492.  
  493. </div>
  494.  
  495. <div id="container">
  496. {block:Posts}
  497. <div class="post" id="{PostID}">
  498.  
  499. {block:Text}
  500. {block:Title}<div class="title">{Title}</div>{/block:Title}
  501. {block:NotReblog}<div class="cap" style="border-left:1px solid {color:first accent}; border-right:1px solid {color:first accent}; border-top:1px solid {color:first accent}">{Body}</div>{/block:NotReblog}
  502.  
  503. {block:RebloggedFrom}
  504. {block:Reblogs}
  505.  
  506. <div class="cap" style="border-left:1px solid {color:first accent}; border-right:1px solid {color:first accent};border-top:1px solid {color:first accent}">
  507. <div class="reblogheader">
  508. {block:IsActive}
  509. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  510.  
  511. {block:IsDeactivated}
  512. <strike>{Username}</strike>{/block:IsDeactivated}
  513. </div>{Body}</div>
  514. {/block:Reblogs}
  515. {/block:RebloggedFrom}
  516. {/block:Text}
  517.  
  518. {block:Photo}
  519. {LinkOpenTag}<div class="photopost"><img src="{PhotoURL-HighRes}"/></div>
  520. {LinkCloseTag}
  521. {block:NotReblog}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:NotReblog}
  522.  
  523. {block:RebloggedFrom}
  524. {block:Reblogs}
  525. <div class="cap">
  526. <div class="reblogheader">
  527. {block:IsActive}
  528. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  529.  
  530. {block:IsDeactivated}
  531. <strike>{Username}</strike>{/block:IsDeactivated}
  532. </div>{Body}</div>
  533. {/block:Reblogs}
  534. {/block:RebloggedFrom}
  535. {/block:Photo}
  536.  
  537. {block:Photoset}
  538. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  539.  
  540. {block:NotReblog}
  541. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  542. {/block:NotReblog}
  543.  
  544. {block:RebloggedFrom}
  545. {block:Reblogs}
  546.  
  547. <div class="cap">
  548. <div class="reblogheader">
  549. {block:IsActive}
  550. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  551.  
  552. {block:IsDeactivated}
  553. <strike>{Username}</strike>{/block:IsDeactivated}
  554. </div>{Body}</div>
  555. {/block:Reblogs}
  556. {/block:RebloggedFrom}
  557. {/block:Photoset}
  558.  
  559. {block:Video}
  560. {Video-500}
  561. {block:NotReblog}
  562. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  563. {/block:NotReblog}
  564.  
  565. {block:RebloggedFrom}
  566. {block:Reblogs}
  567. <div class="cap">
  568. <div class="reblogheader">
  569. {block:IsActive}
  570. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  571.  
  572. {block:IsDeactivated}
  573. <strike>{Username}</strike>{/block:IsDeactivated}
  574. </div>{Body}</div>
  575. {/block:Reblogs}
  576. {/block:RebloggedFrom}
  577. {/block:Video}
  578.  
  579. {block:Quote}
  580. <div class="cap">
  581. <div id="quote">{Quote}</div>
  582. {block:Source}<div id="source">{Source}</div>{/block:Source}
  583. </div>
  584. {/block:Quote}
  585.  
  586. {block:Link}
  587. <div id="link"><a href="{URL}"><span class="th th-link-1-o" style="margin-right:10px;line-height:100%;background:{color:second accent};color:#fff;padding:10px;"></span>{Name}</a></div>
  588. {block:NotReblog}
  589. {block:Description}<div class="cap">{Description}</div>{/block:Description}
  590. {/block:NotReblog}
  591.  
  592. {block:RebloggedFrom}
  593. {block:Reblogs}
  594.  
  595. <div class="cap">
  596. <div class="reblogheader">
  597. {block:IsActive}
  598. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  599.  
  600. {block:IsDeactivated}
  601. <strike>{Username}</strike>{/block:IsDeactivated}
  602. </div>{Body}</div>
  603. {/block:Reblogs}
  604. {/block:RebloggedFrom}
  605. {/block:Link}
  606.  
  607. {block:Chat}
  608. {block:Title}<div class="title">{Title}</div>{/block:Title}
  609. <div class="cap">
  610. <ul class="chat">
  611. {block:Lines}
  612. <li class="line_{Alt}"><span class="label">{block:Label}{Label}{/block:Label}</span> {Line}
  613. {/block:Lines}
  614. </li>
  615. </ul>
  616. </div>
  617. {/block:Chat}
  618.  
  619. {block:Audio}
  620. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  621.  
  622. {block:NotReblogged}
  623. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  624. {/block:NotReblogged}
  625.  
  626. {block:RebloggedFrom}
  627. {block:Reblogs}
  628. <div class="cap">
  629. <div class="reblogheader">
  630. {block:IsActive}
  631. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  632.  
  633. {block:IsDeactivated}
  634. <strike>{Username}</strike>{/block:IsDeactivated}
  635. </div>{Body}</div>
  636. {/block:Reblogs}
  637. {/block:RebloggedFrom}
  638. {/block:Audio}
  639.  
  640. {block:Answer}
  641. <div class="qbox">{Question}</div>
  642. <div id="asker">sent by {Asker}</div>
  643.  
  644. {block:Answerer}{Answerer} said:
  645.  
  646. {Answer}
  647. {/block:Answerer}
  648.  
  649. {block:NotReblog}
  650. <div class="cap">{Replies}</div>
  651. {/block:NotReblog}
  652.  
  653. {block:RebloggedFrom}
  654. {block:Reblogs}
  655. <div class="reblogheader">
  656. {block:IsActive}
  657. <a href="{Permalink}">{Username}</a> {/block:IsActive}
  658.  
  659. {block:IsDeactivated}
  660. <strike>{Username}</strike>{/block:IsDeactivated}
  661. </div>
  662.  
  663. <div class="cap">{Body}</div>{/block:Reblogs}
  664. {/block:RebloggedFrom}
  665. {/block:Answer}
  666.  
  667. {block:IndexPage}
  668. {block:Date}
  669. <div class="pinfo">
  670. {DayOfWeek} - {NoteCountWithLabel}
  671. <div class="controls">
  672. <a href="{ReblogURL}" target="_blank" class="reblog" data-balloon="reblog"data-balloon-pos="down">
  673. <span class="th th-reblog"></span>
  674. </a>
  675. <a href="#" class="like" data-balloon="like" data-balloon-pos="down">{LikeButton}<span class="th th-heart-1-o"></span>
  676. </a>
  677. <a href="{Permalink}" data-balloon="link to post" data-balloon-pos="down"><span class="th th-bookmark-1-o"></span></a>
  678. </div>
  679.  
  680. </div>
  681. {/block:Date}
  682.  
  683. {block:RebloggedFrom}
  684. <div class="reblogcont">
  685. <a href="{ReblogParentURL}" data-balloon="via: {ReblogParentName}" data-balloon-pos="right"><img src="{ReblogParentPortraitURL-48}"></a> <a href="{ReblogRootURL}" data-balloon="src: {ReblogRootName}" data-balloon-pos="right"><img src="{ReblogRootPortraitURL-48}"></a>
  686. </div>
  687. {/block:RebloggedFrom}
  688.  
  689. {block:HasTags}
  690. <div class="tagcont"> {block:Tags}<a href="{TagURL}">#{Tag}</a>
  691. {/block:Tags}
  692. </div>
  693. {/block:HasTags}
  694. {/block:IndexPage}
  695.  
  696. {block:ContentSource}
  697. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  698. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  699. {/block:SourceLogo}
  700. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  701. {/block:ContentSource}
  702.  
  703. {block:PermalinkPage}
  704. {block:PostNotes}
  705. <div class="pnotes">
  706. <ol class="notes">{PostNotes}</ol>
  707. </div>
  708. {/block:PostNotes}
  709. {/block:PermalinkPage}
  710. </div>
  711. {/block:Posts}
  712.  
  713. {block:Pagination}
  714. <footer>
  715. {block:PreviousPage}
  716. <a href="{PreviousPage}" class="pag">
  717. <span class="th th-left-arrow"></span>
  718. </a>
  719. {/block:PreviousPage}
  720.  
  721. <span class="current_page">{CurrentPage} // {TotalPages}</span>
  722.  
  723. {block:NextPage}
  724. <a href="{NextPage}" class="pag"><span class="th th-right-arrow"></span></a>
  725. {/block:NextPage}
  726.  
  727. </footer>
  728. {/block:Pagination}
  729. </div>
  730. </body>
  731. </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!