API tools faq
paste
dcylily

foursakens 💌 theme one — sana.

dcylily
Dec 8th, 2021 (edited)
482
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.12 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4. hi! thank you for using my themes.
  5. pop-up base code from str-wrs: https://tinyurl.com/47b9ztm7
  6. fonts from google fonts: https://fonts.google.com/
  7.  
  8. IF U DON'T WANT THE 'CURRENTLY WORKING ON' POP-UP,
  9. DELETE THIS PART OF THE CODE:
  10.  
  11. <div id="wipbox">
  12. <a href="#?w=400" rel="box1" class="poplight">currently working on</a>
  13. </div>
  14. -->
  15.  
  16. <head>
  17.  
  18. <!-- pop-up script -->
  19. <script type="text/javascript"
  20. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  21. <script>
  22. $(document).ready(function() {
  23. //
  24. $('a.poplight[href^=#]').click(function() {
  25. var popID = $(this).attr('rel'); //Get Popup Name
  26. var popURL = $(this).attr('href'); //Get Popup href to define size
  27. var query= popURL.split('?');
  28. var dim= query[1].split('&');
  29. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  30. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  31. var popMargTop = ($('#' + popID).height() + 80) / 2;
  32. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  33. //Apply Margin to Popup
  34. $('#' + popID).css({
  35. 'margin-top' : -popMargTop,
  36. 'margin-left' : -popMargLeft
  37. });
  38. $('body').append('<div id="fade"></div>');
  39. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  40. return false;
  41. });
  42. $('a.close, #fade').live('click', function() {
  43. $('#fade , .popup_block').fadeOut(function() {
  44. $('#fade, a.close').remove(); //fade them both out
  45. });
  46. return false;
  47. });
  48. });
  49. </script>
  50. <!-- end pop-up script -->
  51.  
  52.  
  53.  
  54. <title>{Title}</title>
  55. <link rel="shortcut icon" href="{Favicon}">
  56. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  57. {block:Description}
  58. <meta name="description" content="{MetaDescription}" />
  59. {/block:Description}
  60. </head>
  61.  
  62. <!-- START meta tags -->
  63.  
  64. <meta name="color:background" content=""/>
  65. <meta name="color:container" content=""/>
  66. <meta name="color:posts" content=""/>
  67. <meta name="color:borders" content=""/>
  68.  
  69. <meta name="color:text" content=""/>
  70. <meta name="color:bold" content=""/>
  71. <meta name="color:italic" content=""/>
  72. <meta name="color:accent" content=""/>
  73. <meta name="color:sb links" content=""/>
  74.  
  75. <meta name="image:sidebar" content=""/>
  76.  
  77. <meta name="text:title" content=""/>
  78. <meta name="text:description" content=""/>
  79.  
  80. <meta name="text:link 3 url" content=""/>
  81. <meta name="text:link 3 title" content=""/>
  82. <meta name="text:link 4 url" content=""/>
  83. <meta name="text:link 4 title" content=""/>
  84.  
  85. <!-- END meta tags -->
  86.  
  87.  
  88. <!-- START hosted fonts & icons -->
  89.  
  90. <!-- via google fonts -->
  91. <link rel="preconnect" href="https://fonts.gstatic.com">
  92. <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap" rel="stylesheet">
  93. <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,700&display=swap" rel="stylesheet">
  94. <!-- via honeybee icon font by suiomi -->
  95. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  96.  
  97. <!-- END hosted fonts & icons -->
  98.  
  99.  
  100. <style type="text/css">
  101.  
  102. /* Hide scrollbar for Chrome, Safari and Opera */
  103. #postcontainer::-webkit-scrollbar {
  104. display: none;
  105. }
  106. .description::-webkit-scrollbar {
  107. display: none;
  108. }
  109.  
  110. /* SECTION 1 — CONTAINERS */
  111.  
  112. #box {
  113. /* sizing & positioning - don't edit */
  114. position:relative; margin:auto;
  115. height:100%; width:400px;
  116. right:-150px;
  117. padding-top:40px;
  118.  
  119. /* customizable features */
  120. background-color:transparent;
  121. }
  122.  
  123. #pagination {
  124. /* sizing & positioning - don't edit */
  125. position:static;
  126. margin-top:30px;
  127. text-align:center;
  128. font-size:13px;
  129.  
  130. }
  131.  
  132. body {
  133. /* customizable features */
  134. background-color:{color:background};
  135. background-image:url('{image:background}');
  136.  
  137. /* basic post font details */
  138. font-family:work sans;
  139. font-size: 11px;
  140. color:{color:text};
  141. }
  142.  
  143. /* SECTION 2 - POSTS & PERMALINKS */
  144.  
  145. .posts {
  146. /* sizing & positioning - don't edit */
  147. width:360px;
  148. padding:20px; margin-bottom:30px;
  149. border-radius:5px;
  150.  
  151. /* customizable features */
  152. background-color:{color:posts};
  153. }
  154.  
  155. .posts img {
  156. padding-bottom:5px; max-width:100%; height:auto;
  157. }
  158.  
  159. iframe, img, embed, object, video {
  160. max-width: 100%;
  161. }
  162.  
  163. img {
  164. height: auto;
  165. width: auto;
  166. }
  167.  
  168. .permalinks {
  169. /* sizing & positioning - don't edit */
  170. padding:10px 6px 0px 6px;
  171. height:12px;
  172. margin-top:5px;
  173.  
  174. /* customizable features */
  175. background-color:transparent;
  176. border-top:1px dotted {color:borders};
  177. }
  178.  
  179. .permalinks a {
  180. text-decoration:none;
  181. font-size: 9px;
  182. color:{color:accent};
  183. display:inline-block;
  184. }
  185.  
  186. .permalinks a:hover {
  187. color:{color:italics};
  188. font-weight:bold;
  189. }
  190.  
  191. .th-stopwatch {
  192. font-size:8px;
  193. color:{color:accent};
  194. }
  195.  
  196. .th-shuffle {
  197. font-size:8px;
  198. color:{color:accent};
  199. }
  200.  
  201. ol.notes {
  202. padding: 0px;
  203. margin: 20px 0px;
  204. list-style-type: none;
  205. border-bottom: solid 1px {color:borders};
  206. font-size:10px;
  207. }
  208.  
  209. ol.notes li.note img.avatar {
  210. vertical-align: -4px;
  211. margin-right: 10px;
  212. width: 0px;
  213. height: 0px;
  214. }
  215.  
  216. .date {
  217. float:left;
  218.  
  219. text-transform:uppercase;
  220. color:{color:accent};
  221. }
  222.  
  223. .date a {
  224. color:{color:accent};
  225. }
  226.  
  227. .th-paper-plane {
  228. font-size:8px;
  229. }
  230.  
  231. .reblogs {
  232. float:right;
  233. }
  234.  
  235. .tags {
  236. text-align:left;
  237. padding:5px 6px 0px 6px;
  238. text-transform:normal;
  239. font-size:9px;
  240. line-height:150%;
  241. }
  242.  
  243. .tags a, href {
  244. color:{color:text};
  245. opacity:.7;
  246. }
  247.  
  248. .th-hashtag {
  249. font-size:7px;
  250. color:{color:italic};
  251. }
  252.  
  253. .chat b {
  254. text-transform:uppercase;
  255. font-style:bold;
  256. }
  257.  
  258. .quote {
  259. font-family:work sans;
  260. }
  261.  
  262.  
  263. /* SECTION 3 — TEXT FORMATTING */
  264.  
  265.  
  266. small, sup, sub {
  267. font-size:11px;
  268. }
  269.  
  270. more {
  271. text-align:center;
  272. }
  273.  
  274. /* read more - tutorial from @ themesbytommy */
  275.  
  276. .more-btn-wrap{
  277. position: relative;
  278. padding: 20px 0;
  279. width: 100%;
  280. }
  281.  
  282. .more-btn-wrap a {
  283. color:{color:posts};
  284. }
  285.  
  286. .more-btn-wrap a:link{
  287. -webkit-transition: all 0.5s ease;
  288. -moz-transition: all 0.5s ease;
  289. -o-transition: all 0.5s ease;
  290. transition: all 0.5s ease;
  291. position: relative;
  292. left: calc(50% - 15%);
  293. padding: 7px 14px;
  294. border: 1px solid {color:italic};
  295. border-radius:5px;
  296. background: {color:italic};
  297. color:{color:posts};
  298. }
  299. .more-btn-wrap a:hover{
  300. background:{color:bold};
  301. border: 1px solid {color:bold};
  302. color: white;
  303. border-radius:20px;
  304. }
  305.  
  306. blockquote {
  307. border-left:1px solid {color:borders};
  308. margin-left:8px; padding-left:12px;
  309. width:90%; height:auto;
  310. text-align:justify;
  311. }
  312.  
  313. blockquote img {
  314. max-width:100%;
  315. height:auto;
  316. }
  317.  
  318. blockquote iframe {
  319. max-width:100%;
  320. height:auto;
  321. }
  322.  
  323. b, strong {
  324. /* customizable features */
  325. font-style:bold;
  326. color:{color:bold};
  327. }
  328.  
  329. i, em {
  330. /* customizable features */
  331. font-style:italic;
  332. color:{color:italic};
  333. }
  334.  
  335. a, href {
  336. /* customizable features */
  337. text-decoration:none;
  338. font-weight:500;
  339. color:{color:accent};
  340. }
  341.  
  342. h1 {
  343. /* sizing & positioning - don't edit */
  344. margin-top:-3px;
  345. text-align:center;
  346.  
  347. /* customizable features */
  348. font-family:alegreya sans sc;
  349. font-size:23px;
  350. color:{color:accent};
  351. }
  352.  
  353. h2 {
  354. /* sizing & positioning - don't edit */
  355. text-align:left;
  356. height:15px; width:340px;
  357. padding:10px;
  358.  
  359. /* customizable features */
  360. background-color:{color:container};
  361. color:{color:bold};
  362. font-size:12px;
  363. }
  364.  
  365. h3 {
  366. /* sizing & positioning - don't edit */
  367. text-align:center;
  368.  
  369. /* customizable features */
  370. font-style:italic;
  371. color:{color:italic};
  372. }
  373.  
  374.  
  375. /* SECTION 4 - SIDEBAR BASICS */
  376.  
  377. #wipbox {
  378. position:fixed; margin:auto;
  379. top:0px; bottom:480px; left:0px; right:730px;
  380. height:25px; width:200px;
  381. padding-top:10px;
  382. border-radius:10px;
  383. background-color:{color:accent};
  384. text-align:center;
  385. font-size:12px;
  386. }
  387.  
  388. #wipbox a { color:#fff; }
  389.  
  390. .sidebarcon { position:relative; width:500px; }
  391.  
  392. #sidebar {
  393. /* sizing & positioning - don't edit */
  394. position:fixed; margin:auto;
  395. top:0px; bottom:0px; left:0px; right:730px;
  396. height:385px; width:330px;
  397.  
  398. /* customizable features */
  399. background-color:none;
  400. }
  401.  
  402.  
  403. .sbimg {
  404. height:170px; width:100px;
  405. border-radius:9px;
  406. background-color:{color:accent};
  407. background-image:url('{image:sidebar}');
  408. text-align:center;
  409. position:relative;
  410. }
  411.  
  412. .sbdot {
  413. position:absolute; top:133px; left:30px;
  414. }
  415.  
  416. .sbdot li {
  417. list-style-type:none; display:inline-block;
  418. padding-top:10px; padding-bottom:8px;
  419. padding-left:0.5px;
  420. margin-bottom:10px; margin-right:8px;
  421. width:30px;
  422. background-color:#ba3d40;
  423. border-radius:100%;
  424. text-align:center;
  425. font-size:12px; color:{color:posts};
  426. }
  427.  
  428. .notibox {
  429. position:fixed; margin:auto;
  430. top:0px; bottom:200px; left:0px; right:600px;
  431. z-index:22; opacity:.9;
  432. width:200px; height:157px;
  433. border-radius:0px 0px 9px 9px;
  434.  
  435. background-color:{color:posts};
  436. }
  437.  
  438. #boxtext {
  439. color:{color:text};
  440. text-align:center;
  441.  
  442. width:165px; height:55px;
  443. overflow:none;
  444. margin-top:30px; margin-left:17px;
  445. }
  446.  
  447. .notibar {
  448. position:fixed; margin:auto;
  449. top:0px; bottom:360px; left:0px; right:600px;
  450. z-index:222; opacity:.8;
  451. width:190px; height:15px; padding:5px;
  452. border-radius:9px 9px 0px 0px;
  453.  
  454. background-color:#e2e2e2;
  455. }
  456.  
  457. #bardot {
  458. width:8px; height:8px;
  459. border-radius:100%;
  460. margin-top:4px;
  461. margin-left:5px;
  462.  
  463. background-color:#ba3d40;
  464. }
  465.  
  466. #bartext {
  467. color:{color:text};
  468. text-align:center;
  469. font-size:10px;
  470.  
  471. margin-top:-9px;
  472. }
  473.  
  474.  
  475. /* SECTION 5 - POP-UP */
  476.  
  477.  
  478. /* pop-up stuff begins here! */
  479.  
  480. .tabzclose { /* the close button, u prob dont need to touch this */
  481. text-transform:uppercase;
  482. font-weight:bold;
  483. font-size:10px;
  484. padding:3px;
  485. color:inherit;
  486. margin-top:-8px;
  487. margin-right:-5px;
  488. float:right;
  489. }
  490.  
  491. .popup_block{
  492. display:none;
  493. max-height:480px; /* adjust height of pop-up here if needed! */
  494. overflow-y:none; /* change to none if u don’t want scroll! */
  495. background:#fff;
  496. padding:40px;
  497. float:left;
  498. position:fixed;
  499. top:50%;left:50%;
  500. z-index: 99999;
  501. box-shadow: 0px 0px 10px #eeeeee;
  502. border:1px solid {color:borders};
  503. background:#fff;
  504. border-radius:2px;
  505. }
  506.  
  507. .popup_block h1 {
  508. color:{color:text};
  509. font-size:calc({select:font size} + 6px);
  510. font-weight:600;
  511. }
  512.  
  513. .popup_block h2 { text-align:center; }
  514.  
  515. .containpop {
  516. height:390px;
  517. overflow:auto;
  518. padding-top:-20px;
  519. }
  520.  
  521. .gifi {
  522. display:inline-block;
  523. padding-right:20px;
  524. padding-top:7px;
  525. }
  526.  
  527. .gifi img {
  528. border:2px solid {color:background};
  529. }
  530.  
  531.  
  532. .question {
  533. font-style:normal;
  534. padding-left:50px;
  535. padding-right:50px;
  536. height:auto;
  537. padding:10px;
  538. text-align:center;
  539. }
  540.  
  541. .question a { font-style:bold; text-transform:uppercase; }
  542.  
  543.  
  544.  
  545. </style>
  546.  
  547. <body>
  548.  
  549. <div id="wipbox">
  550. <a href="#?w=400" rel="box1" class="poplight">currently working on</a>
  551. </div>
  552.  
  553.  
  554. <div class="sidebarcon">
  555. <div id="sidebar">
  556. <div class="sbimg">
  557.  
  558. <div class="sbdot">
  559. <li><span class="th th-telephone"></span></li>
  560. </div>
  561.  
  562. <div class="notibar">
  563. <div id="bardot"></div>
  564. <div id="bartext">{text:title}</div>
  565. </div>
  566.  
  567. <div class="notibox">
  568. <div id="boxtext">{text:description}
  569. <p>
  570. <a href="/">refresh</a>&nbsp;
  571. <a href="/ask">inbox</a>&nbsp;
  572. <a href="{text:link 3 url}">{text:link 3 title}</a>&nbsp;
  573. <a href="{text:link 4 url}">{text:link 4 title}</a>
  574. </div>
  575. </div>
  576.  
  577. </div>
  578.  
  579. <div id="pagination">
  580. {block:Pagination}
  581.  
  582. {block:PreviousPage}
  583. <a href="{PreviousPage}">prev</a> &nbsp;/ &nbsp;
  584. {/block:PreviousPage}
  585.  
  586. {block:NextPage}
  587. <a href="{NextPage}"><b>next</b></a>
  588. {/block:NextPage}
  589.  
  590. {/block:Pagination}
  591. </div>
  592.  
  593. </div></div>
  594.  
  595.  
  596. <div id="box">
  597. {block:Posts}
  598.  
  599. <div class="posts">
  600.  
  601. {block:Text}<h1>{block:Title}—&nbsp; {Title} &nbsp;—{/block:Title}</h1>{Body}
  602. {block:More}
  603. <div class="more-btn-wrap">
  604. <a href="{Permalink}" class="more-btn">
  605. continue reading
  606. </a>
  607. </div>
  608. {/block:More}
  609. {/block:Text}
  610.  
  611.  
  612. {block:Photo}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{block:More}
  613. <div class="more-btn-wrap">
  614. <a href="{Permalink}" class="more-btn">
  615. continue reading
  616. </a>
  617. </div>
  618. {/block:More}{/block:Caption}{/block:Photo}
  619.  
  620. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  621.  
  622. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{block:More}
  623. <div class="more-btn-wrap">
  624. <a href="{Permalink}" class="more-btn">
  625. continue reading
  626. </a>
  627. </div>
  628. {/block:More}{/block:Caption}{/block:Photoset}
  629.  
  630. {block:Quote}
  631. <div class="quote">{Quote}</div>
  632. {block:Source}
  633. <div class="quotesource">{Source}</div>
  634. {/block:Source}
  635. {/block:Quote}
  636.  
  637. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  638.  
  639. {block:Chat}
  640. {block:Title}
  641. <h1>—&nbsp; {Title} &nbsp;—</h1>
  642. {/block:Title}
  643.  
  644. <div class="chat">
  645. {block:Lines}<p>
  646. {block:Label}<b>{Label}</b>&nbsp;{/block:Label}{Line}
  647. {/block:Lines}
  648. </div>
  649. {/block:Chat}
  650.  
  651. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  652.  
  653. {block:Audio}
  654. {block:AudioPlayer}
  655. <center>{AudioPlayerWhite}</center>
  656. {/block:AudioPlayer}
  657. {block:Caption}{Caption}{/block:Caption}
  658. {/block:Audio}
  659.  
  660. {block:Answer}
  661. <div class="question">
  662. <a>{Asker} said:</a> {Question}
  663. </div>
  664. {Answer}
  665.  
  666. {block:More}
  667. <div class="more-btn-wrap">
  668. <a href="{Permalink}" class="more-btn">
  669. continue reading
  670. </a>
  671. </div>
  672. {/block:More}
  673.  
  674. {/block:Answer}
  675.  
  676. <div class="permalinks">
  677. <div class="date">
  678. <span class="th th-stopwatch"></span>&nbsp;
  679. <b><a href="{Permalink}">{DayOfMonth} {ShortMonth}</a>&nbsp;</b>
  680. <a href="{Permalink}">
  681. {block:NoteCount}
  682. &nbsp; <span class="th th-paper-plane"></span> &nbsp;{NoteCount}
  683. {/block:NoteCount}&nbsp;
  684. </a>
  685. {block:RebloggedFrom}
  686. &nbsp;<span class="th th-shuffle"></span>&nbsp;
  687. <a href="{ReblogParentURL}">via</a>
  688. {/block:RebloggedFrom}
  689. </div>
  690. <div class="reblogs">
  691. <a href="{ReblogURL}">
  692. <span class="th th-reload"></span></a>
  693. {block:ContentSource}
  694. &nbsp;<a href="{SourceURL}">
  695. <span class="th th-return"></span></a>
  696. {/block:ContentSource}
  697. </div><p>
  698. </div>
  699.  
  700. {block:HasTags}<div class="tags">{block:Tags}<span class="th th-hashtag"></span>&nbsp;<a href="{TagUrl}"> {Tag}</a> &nbsp;{/block:Tags}</div>{/block:HasTags}
  701.  
  702.  
  703. {block:PostNotes}
  704. {PostNotes}
  705. {/block:PostNotes}
  706.  
  707. </div>
  708. {/block:Posts}
  709.  
  710. </div>
  711.  
  712.  
  713. </body>
  714.  
  715. <!-- more pop-up -->
  716.  
  717. <div id="box1" class="popup_block">
  718. <span onclick="this.parentElement.style.display='none'" class="tabzclose">X</span>
  719. <center>
  720.  
  721. <h1>projects in progress!</h1>
  722. <center>
  723. <p>
  724. this box is fully functional, so you can turn it into whatever you'd like <i>!</i> i left the shell of a gifs wip pop-up in case you need that, but i'm sure you could turn it into something cute.
  725. </center>
  726. <p>
  727.  
  728. <div class="containpop">
  729.  
  730. <!-- TO ADD ANOTHER BOX: COPY FROM HERE
  731. <div class="gifi">
  732. <img src="https://static.tumblr.com/drqv4dr/uimqricfx/untitled-10.gif"/><p>
  733. <abt>
  734. <b><i>KELSEY MERRITT.</i></b>
  735. <br>
  736. STARTED APRIL 13.
  737. <br>TBA.
  738. </abt>
  739. </div>
  740. COPY TO HERE - YOU CAN HAVE 4 BOXES PER LINE -->
  741.  
  742. <h2>in progress: gif packs.</h2>
  743.  
  744. <div class="gifi">
  745. <img src="https://img.nickpic.host/5hL5Qb.gif"/><p>
  746. <abt>
  747. <b><i>PROJECT TITLE</i> HERE.</b>
  748. <BR>DESCRIPTION HERE.
  749. </abt>
  750. </div>
  751.  
  752. <h2>upcoming projects.</h2>
  753. list upcoming projects here.
  754.  
  755. </center>
  756. </div></div>
  757.  
  758. </div></div></div></div></div></div></div></div></div></div>
  759.  
  760.  
  761.  
  762.  
  763.  
  764.  
  765. </html>
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!