Advertisement
enbythemes

theme 06: plastic hearts

Dec 21st, 2020
318
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.02 KB | None | 0 0
  1. <!--
  2. plastic hearts © xroub.tumblr.com
  3.  
  4. base codes by egg.design, annasthms, and seyche
  5. photosets by egg.design and annasthms
  6. tooltips by malihu
  7. video resize by nouvae
  8. tumblr controls by magnusthemes
  9. honeybee icons by suiomi
  10. -->
  11. <!DOCTYPE html>
  12. <html>
  13. <head>
  14. <link rel="shortcut icon" href="{Favicon}" />
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  16. <title>{Title}</title>
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}" />
  19. {/block:Description}
  20.  
  21. <!-- meta tags -->
  22. <meta name="image:Header" content="">
  23. <meta name="image:Sidebar" content="">
  24.  
  25. <meta name="color:Background" content="#151515">
  26. <meta name="color:Topbar" content="#0d0b10">
  27. <meta name="color:Sidebars" content="#0d0b10">
  28. <meta name="color:Posts" content="#0d0b10">
  29.  
  30. <meta name="color:Font Color" conent="#f0f0f0">
  31. <meta name="color:Accent" content="#e12176">
  32.  
  33. <meta name="text:Google Font" content="Karla">
  34. <meta name="text:Font size" content="14px">
  35.  
  36. <meta name="text:Link one" content="link one">
  37. <meta name="text:Link one url" content="">
  38. <meta name="text:Link two" content="link two">
  39. <meta name="text:Link two url" content="">
  40. <meta name="text:Link three" content="link three">
  41. <meta name="text:Link three url" content="">
  42. <meta name="text:Link four" content="link four">
  43. <meta name="text:Link four url" content="">
  44. <meta name="text:Link five" content="link five">
  45. <meta name="text:Link five url" content="">
  46. <meta name="text:Link six" content="link six">
  47. <meta name="text:Link six url" content="">
  48.  
  49. <meta name="select:Photoset Gutter Size" content="1px">
  50. <meta name="select:Photoset Gutter Size" content="2px">
  51. <meta name="select:Photoset Gutter Size" content="3px">
  52. <meta name="select:Photoset Gutter Size" content="4px">
  53. <meta name="select:Photoset Gutter Size" content="5px">
  54.  
  55. <meta name="if:Header Image" content="1">
  56. <meta name="if:Repeating Header Image" content="">
  57.  
  58. <meta name="if:Inverted Tumblr Controls" content="1">
  59.  
  60. <meta name="if:About" content="1">
  61. <meta name="if:Sidebar links" content="1">
  62. <meta name="if:Projects" content="1">
  63. <meta name="if:Updates" content="1">
  64. <meta name="if:Members" content="1">
  65. <meta name="if:Affiliates" content="1">
  66. <meta name="if:Stats" content="1">
  67.  
  68. <meta name="if:Sidebar link 1" content="1">
  69. <meta name="if:Sidebar link 2" content="1">
  70. <meta name="if:Sidebar link 3" content="1">
  71. <meta name="if:Sidebar link 4" content="1">
  72. <meta name="if:Sidebar link 5" content="1">
  73. <meta name="if:Sidebar link 6" content="1">
  74.  
  75. <!-- scripts -->
  76. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400>" rel="stylesheet">
  77.  
  78. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  79.  
  80. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  81.  
  82. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  83.  
  84. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  85.  
  86. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  87.  
  88. <!-- tooltips by malihu -->
  89. <script>
  90. (function($){
  91. $(document).ready(function(){
  92. $("a[title]").style_my_tooltips({
  93. tip_follows_cursor:true,
  94. tip_delay_time:90,
  95. tip_fade_speed:600,
  96. attribute:"title"
  97. });
  98. });
  99. })(jQuery);
  100. </script>
  101.  
  102. <!-- photosets by annasthms and eggdesigns -->
  103. <script>
  104. function gatherData(images, arr) {
  105. for (let i = 0; i < images.length; i++) {
  106. let currentData = {
  107. "width": images[i].getAttribute('data-width'),
  108. "height": images[i].getAttribute('data-height'),
  109. "low_res": images[i].getAttribute('data-lowres'),
  110. "high_res": images[i].getAttribute('data-highres')
  111. };
  112. arr.push(currentData);
  113. }
  114. }
  115. function getIndex(elem) {
  116. let i = 0;
  117. while( (elem = elem.previousElementSibling) != null ) i++;
  118. return i;
  119. }
  120. function lightbox(elem) {
  121. let currentPhotoset = elem.parentNode;
  122. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  123. let data = [];
  124. gatherData(photosetPhotos, data);
  125. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  126. }
  127. </script>
  128.  
  129. <!-- video resize script by nouvae -->
  130. <script>
  131. function flexFrame() {
  132. $(".caption").each(function() {
  133. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  134. flexibleFrames($(".capframe"));
  135. });
  136. flexibleFrames($(".video"));
  137. }
  138.  
  139. $(document).ready(flexFrame);
  140. </script>
  141.  
  142. <style>
  143. /* html */
  144. body {
  145. background: {color:background};
  146. font-family: {text:google font};
  147. font-size: {text:font size};
  148. color: {color:font color};
  149. word-wrap: break-word;
  150. }
  151.  
  152. /* scrollbar */
  153. ::-webkit-scrollbar {width: 15px; height: 15px;}
  154. ::-webkit-scrollbar-track {background-color: {color:topbar};}
  155. ::-webkit-scrollbar-thumb {background-color: {color:accent};border:5px solid {color:topbar};}
  156.  
  157. /* tooltips */
  158. #s-m-t-tooltip {
  159. max-width: 300px;
  160. margin-top: -30px;
  161. margin-left: -25px;
  162. font-size: .8em;
  163. letter-spacing: 1px;
  164. text-align: center;
  165. text-transform: uppercase;
  166. padding: 6px;
  167. background-color: {color:posts};
  168. color: inherit;
  169. font-family: inherit;
  170. z-index: 999999;
  171. }
  172.  
  173. a {
  174. text-decoration: none;
  175. color: {color:accent};
  176. transition: all .4s ease;
  177. }
  178.  
  179. a:hover {color: {color:font color};}
  180.  
  181. blockquote {
  182. margin: 1em 0 1em 1.25em;
  183. padding-left: 1em;
  184. border-left: 2px solid {color:accent};
  185. }
  186.  
  187. blockquote img {max-width: 100%; height: auto!important;}
  188. h1 {font-size: 1.5em;}
  189. h2 {font-size: 1.3em;}
  190. h3 {font-size: 1.25em;}
  191. h4 {font-size: 1.1em;}
  192. h5 {font-size: 1em;}
  193.  
  194. small {font-size: 0.9em;}
  195. big {font-size: 1.1em;}
  196. b, strong {color:{color:accent};}
  197. article.posts ol, article.posts ul {padding: 0; margin: 1em;}
  198.  
  199. /* header */
  200. {block:IfHeaderImage}
  201. .hdrimg {
  202. width: 100%;
  203. height: 20vh;
  204. background: url("{image:header}");
  205. background-position: center;
  206. {block:IfNotRepeatingHeaderImage}
  207. background-repeat: no-repeat;
  208. background-size: cover;
  209. {/block:IfNotRepeatingHeaderImage}
  210. }
  211. {/block:IfHeaderImage}
  212.  
  213. /* topbar */
  214. #topbar {
  215. background: {color:topbar};
  216. padding: .75em 1em .5em;
  217. position: -webkit-sticky;
  218. position: sticky;
  219. top: 0;
  220. z-index: 9;
  221. }
  222.  
  223. .blogttl {
  224. font-size: 1.5em;
  225. font-weight: 600;
  226. letter-spacing: 1.5px;
  227. text-transform: uppercase;
  228. }
  229.  
  230. .blogttl:first-letter {
  231. text-transform: capitalize;
  232. color: {color:accent};
  233. }
  234.  
  235. .name {
  236. color: {color:accent};
  237. font-weight: 700;
  238. font-size: 1.15em;
  239. margin-right: 20px;
  240. position: relative;
  241. }
  242.  
  243. .name:after {
  244. content: "";
  245. position: absolute;
  246. right: -15px;
  247. top: 11px;
  248. background: {color:font color};
  249. width: 8px;
  250. height: 1px;
  251. }
  252.  
  253. #search {
  254. display: inline-block;
  255. vertical-align: middle;
  256. }
  257.  
  258. #search .query {
  259. border: 0;
  260. outline: 0;
  261. padding: 3px 0 5px;
  262. font-family: inherit;
  263. font-size: inherit;
  264. color: inherit;
  265. background-color: transparent;
  266. }
  267.  
  268. #search .query:focus {
  269. padding-bottom: 3px;
  270. border-bottom: 2px solid {color:accent};
  271. }
  272.  
  273. ::-webkit-input-placeholder {color: inherit;}
  274. :-moz-placeholder {color: inherit; opacity:1;}
  275. ::-moz-placeholder {color: inherit; opacity:1;}
  276. :-ms-input-placeholder {color: inherit;}
  277.  
  278. input:focus::-webkit-input-placeholder {color: transparent;}
  279. input:focus:-moz-placeholder {color: transparent;}
  280. input:focus::-moz-placeholder {color: transparent;}
  281. input:focus:-ms-input-placeholder { color: transparent;}
  282.  
  283. #topbar a {color: {color:font color};margin-right: 8px;}
  284. #topbar a:hover {color: {color:accent};}
  285.  
  286. /* content */
  287. main {
  288. width: 100%;
  289. {block:IfHeaderImage}margin-top: calc(3em + 50px);{/block:IfHeaderImage}
  290. {block:IfNotHeaderImage}margin-top: 50px;{/block:IfNotHeaderImage}
  291. display: flex;
  292. }
  293.  
  294. aside {width: 275px;}
  295.  
  296. aside.left {margin-left: 5%;}
  297. aside.right {
  298. margin-top: 35px;
  299. margin-right: 5%;
  300. order: 3;
  301. }
  302.  
  303. .side {
  304. background: {color:sidebars};
  305. margin-bottom: 80px;
  306. }
  307.  
  308. aside .heading {
  309. width: fit-content;
  310. font-size: 1.6em;
  311. text-transform: uppercase;
  312. letter-spacing: 2px;
  313. font-weight: 700;
  314. padding: .75em 1em;
  315. background: {color:sidebars};
  316. transform: translateY(-40px);
  317. margin: 0 auto -1em;
  318. border-bottom: 2px solid {color:accent};
  319. }
  320.  
  321. /* left sidebar content */
  322. /* about / welcome */
  323. #about img {
  324. width: calc(100% - 1.5em);
  325. height: auto;
  326. padding: .75em;
  327. background: {color:accent};
  328. }
  329.  
  330. #about .desc {padding: .25em .75em 1em;}
  331.  
  332. /* sidebar links */
  333. #links {
  334. padding: 1em;
  335. text-align: center;
  336. }
  337.  
  338. #links a {
  339. display: inline-block;
  340. width: calc(100% / 2 - 1.25em);
  341. padding: .5em 0;
  342. background: {color:accent};
  343. border: 3px solid {color:accent};
  344. color: {color:font color};
  345. margin: 0 .5em .75em 0;
  346. }
  347.  
  348. #links a:hover {
  349. background: #f0f0f0;
  350. color: {color:accent};
  351. border: 3px solid {color:accent};
  352. }
  353.  
  354. /* projects */
  355. #projects {
  356. padding-bottom: .75em;
  357. }
  358.  
  359. #projects img {
  360. width: calc(100% - 1.5em);
  361. height: 275px;
  362. object-fit: cover;
  363. padding: .75em;
  364. background: {color:accent};
  365. }
  366.  
  367. #projects .prj {
  368. margin: 1em 0;
  369. }
  370.  
  371. .prj-title {
  372. font-size: 1.4em;
  373. font-weight: 700;
  374. text-transform: uppercase;
  375. letter-spacing: 2px;
  376. padding: 0 1em;
  377. margin: .5em 0;
  378. text-align: center;
  379. }
  380.  
  381. .prj-title:first-letter {color: {color:accent};}
  382. .prj-content {padding: 0 1em;}
  383.  
  384. .prj-content span {
  385. color: {color:accent};
  386. text-transform: uppercase;
  387. font-weight: 700;
  388. }
  389.  
  390. .prj-date, .project-link {margin: .5em 0;}
  391. .prj-link a {color: {color:font color};}
  392. .prj-content a:hover {color: {color:accent};}
  393.  
  394. /* right sidebar */
  395. /* updates */
  396. .update {padding: 0 1em .75em;}
  397.  
  398. .update span {
  399. color: {color:accent};
  400. text-transform: uppercase;
  401. font-weight: 700;
  402. }
  403.  
  404. /* members and affiliates */
  405. .aff-content, .mbrs-content {
  406. padding: .75em;
  407. text-align: center;
  408. }
  409.  
  410. .aff-content a, .mbrs-content a {
  411. display: inline-block;
  412. margin: 0 .75em .75em 0;
  413. width: 48px;
  414. height: 48px;
  415. padding: 6px;
  416. background: {color:accent};
  417. }
  418.  
  419. .aff-content img, .mbrs-content img {width: 48px; transition: all .5s ease;}
  420. .aff-content a:hover img {transform: scale(0.90);}
  421.  
  422. /* statistics */
  423. #stats {
  424. padding: 1em; line-height: 150%;}
  425.  
  426. #stats span {
  427. font-weight: 700;
  428. color: {color:accent};
  429. text-transform: uppercase;
  430. margin-right: 4px;
  431. }
  432.  
  433. /* posts */
  434. section {
  435. width: calc(100% - 550px - 100px);
  436. margin: 0 auto;
  437. }
  438.  
  439. article.posts {
  440. max-width: 540px;
  441. margin: 0 auto 100px;
  442. padding: 1em;
  443. background: {color:posts};
  444. }
  445.  
  446. /* permalinks */
  447. .permalinks {
  448. margin: -.25em -1em 1em -1em;
  449. padding-bottom: .75em;
  450. border-bottom: 2px solid {color:accent};
  451. }
  452.  
  453. .permalinks a {
  454. padding: .75em 1em;
  455. background: {color:accent};
  456. color: {color:font color};
  457. font-weight: 700;
  458. letter-spacing: 1px;
  459. text-transform: capitalize;
  460. }
  461.  
  462. a.day:hover, .like-reblog a:hover {color: {color:posts};}
  463.  
  464. /* like and reblog buttons */
  465. .like-reblog {float: right; margin-top: -.75em;}
  466.  
  467. .like-reblog svg {
  468. width: 1.4em;
  469. height: auto;
  470. opacity:.5;
  471. display: block;
  472. overflow: visible;
  473. }
  474.  
  475. .like-reblog a {
  476. position: relative;
  477. display: inline-block;
  478. overflow: hidden;
  479. margin-left: -.75em;
  480. }
  481.  
  482. .like-reblog .like .liked + svg {opacity: 1;}
  483. .like-reblog .like .liked + svg path {fill: #ec5a5a;}
  484. .like-reblog .like .like_button {position: relative;}
  485.  
  486. .like-reblog .like .like_button iframe {
  487. position:absolute;
  488. top:0;
  489. left:0;
  490. bottom:0;
  491. right:0;
  492. z-index:2;
  493. opacity:0.000001;
  494. }
  495.  
  496. /* text posts */
  497. .ttl {
  498. text-align: center;
  499. font-size: 1.5em;
  500. color: {color:blog title};
  501. font-weight: 600;
  502. letter-spacing: 1.5px;
  503. text-transform: uppercase;
  504. margin-bottom: -.25em;
  505. }
  506.  
  507. .ttl:first-letter {
  508. text-transform: capitalize;
  509. color: {color:accent};
  510. }
  511.  
  512. a.read_more {
  513. display: block;
  514. width: fit-content;
  515. color: {color:font color};
  516. background: {color:accent};
  517. padding: .5em;
  518. border: 3px solid {color:accent};
  519. margin: 1.5em auto 1em;
  520. }
  521.  
  522. a.read_more:hover {
  523. background: #f0f0f0;
  524. color: {color:accent};
  525. }
  526.  
  527. /* photo posts */
  528. .photo {max-width: 100%; height: auto!important;}
  529.  
  530. /* photoset posts */
  531. [photoset-layout] {grid-gap: {select:photoset gutter size};}
  532. [photoset-layout] div {cursor: pointer;}
  533.  
  534. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  535. margin-left: 0 !important;
  536. margin-right: 0 !important;
  537. }
  538.  
  539. /* quote posts */
  540. .qu, p.npf_quote {font-size: 1.5em;}
  541. .src {text-align: right;}
  542.  
  543. .qu .th {
  544. display: inline-block;
  545. vertical-align: middle;
  546. font-size: .85em;
  547. margin-right: 6px;
  548. color: {color:accent};
  549. }
  550.  
  551. .qu p:first-of-type {margin-top: 0;}
  552. .qu p:last-of-type {margin-bottom: 0;}
  553. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  554.  
  555. /* chat posts */
  556. .chat {list-style: none; padding: 0;}
  557. .chat li {margin: 1em 0;}
  558.  
  559. .chat .label {
  560. font-weight: 700;
  561. color: {color:accent};
  562. text-transform: uppercase;
  563. }
  564.  
  565. /* link */
  566. a.link-wrap {
  567. display: block;
  568. color: {color:font color};
  569. background: {color:accent};
  570. margin-bottom: 1em;
  571. border: 6px solid {color:accent};
  572. transition: all .25s ease-in-out;
  573. }
  574.  
  575. a.link-wrap img {max-width: 100%;}
  576. .link {padding: 1em; margin-top: -4px;}
  577. .link-host, .link-txt {color: {color:font color}; margin-top: .5em;}
  578. .title {font-size: 1.5em;}
  579.  
  580. .link-host .th {
  581. font-size: .75em;
  582. display: inline-block;
  583. vertical-align: middle;
  584. margin-right: 3px;
  585. opacity: .9;
  586. }
  587.  
  588. a.link-wrap:hover {
  589. background: {color:background};
  590. color: {color:accent};
  591. transition: all .15s ease-in;
  592. }
  593.  
  594. a.link-wrap:hover .link-host, a.link-wrap:hover .link-txt {
  595. color: {color:accent};
  596. transition: color .20s ease-in-out;
  597. }
  598.  
  599. /* audio posts */
  600. .audiopost {
  601. max-width: calc(100% - 4em - 6px);
  602. padding: 1em;
  603. }
  604.  
  605. .audiowrap {
  606. padding: 1em;
  607. background: {color:posts};
  608. border: 3px solid {color:accent};
  609. margin-bottom: 1em;
  610. }
  611.  
  612. .album-art {
  613. z-index: 1;
  614. display: inline-block;
  615. vertical-align: middle;
  616. float: left;
  617. width: 100px;
  618. height: 100px;
  619. }
  620.  
  621. .button {
  622. width: 30px;
  623. height: 30px;
  624. overflow: hidden;
  625. position: relative;
  626. z-index: 2;
  627. margin: 7px;
  628. }
  629.  
  630. .audiobox {
  631. background-color: #f2f2f2;
  632. z-index: 3;
  633. position: absolute;
  634. margin: 28px 0 0 28px;
  635. border-radius: 50%;
  636. }
  637.  
  638. .audioinfo {
  639. display: inline-block;
  640. height: 100px;
  641. display: flex;
  642. justify-content: center;
  643. flex-direction: column;
  644. box-sizing: border-box;
  645. padding-left: 2em;
  646. }
  647.  
  648. .audioinfo li {list-style-type: none;}
  649. .track {font-weight: bold; color: {color:title};}
  650.  
  651. /* ask posts */
  652. .question_text {
  653. margin-top: 1em;
  654. background: {color:posts};
  655. border: 3px solid {color:accent};
  656. padding: 1em;
  657. }
  658.  
  659. /* captiona */
  660. .caption {padding: 1em 0;}
  661. .reblog-header a {font-weight: 700; font-size: 1.1em;}
  662.  
  663. .inactive:hover:after {
  664. content:'deactivated';
  665. }
  666.  
  667. /* tags */
  668. .tags {
  669. font-size: .95em;
  670. padding: 1em 0;
  671. font-weight: bold;
  672. }
  673.  
  674. .tags a {
  675. display: inline-block;
  676. color: {color:font color};
  677. background: {color:accent};
  678. padding: .75em;
  679. margin: 0 .5em .5em 0;
  680. }
  681.  
  682. .tags a:hover {color: {color:background};}
  683.  
  684. /* post notes */
  685. ol.notes {
  686. max-width: 540px;
  687. padding: 1em;
  688. margin: 0 auto;
  689. background: {color:posts};
  690. list-style: none;
  691. }
  692.  
  693. ol.notes li {
  694. margin: 0;
  695. padding: .5em 0;
  696. }
  697.  
  698. ol.notes img {display: none;}
  699. ol.notes a {font-weight: bold;}
  700.  
  701. /* pagination */
  702. .pagination {
  703. width: 540px;
  704. background: {color:posts};
  705. padding: 2em 1em;
  706. margin: -10px auto 50px;
  707. text-align: center;
  708. font-size: .9em;
  709. }
  710.  
  711. .pagination a, .current_page {
  712. padding: .5em .75em;
  713. margin: 0 .5em;
  714. background: {color:accent};
  715. color: {color:font color};
  716. border: 3px solid {color:accent};
  717. }
  718.  
  719. .pagination a:hover {
  720. color: {color:accent};
  721. background: {color:font color};
  722. border: 3px solid {color:accent};
  723. }
  724.  
  725. .pagination .current_page {
  726. background: {color:font color};
  727. color: {color:accent};
  728. border: 3px solid {color:accent};
  729. }
  730.  
  731. .crd {
  732. position: fixed;
  733. bottom: 10px;
  734. right: 10px;
  735. background: {color:posts};
  736. padding: .75em;
  737. text-transform: uppercase;
  738. font-size: .9em;
  739. }
  740.  
  741. /* tumlr controls */
  742. .iframe-controls--desktop {
  743. position:fixed;
  744. top:0px;
  745. right:0px;
  746. z-index:214748364789123456789;
  747. {block:IfInvertedTumblrControls}
  748. filter:invert(100%);
  749. -webkit-filter:invert(100%);
  750. {/block:IfInvertedTumblrControls}
  751. -webkit-transform:scale(0.6,0.6);
  752. -webkit-transform-origin: 100% 0%;
  753. -ms-transform-origin:100% 0%;
  754. -ms-transform:scale(0.6,0.6);
  755. transform:scale(0.6,0.6);
  756. transform-origin:100% 0%;
  757. }
  758. {CustomCSS}
  759. </style>
  760. </head>
  761.  
  762. <body>
  763. <!-- header begins -->
  764. {block:IfHeaderImage}
  765. <header>
  766. <div class="hdrimg"></div>
  767. </header>
  768. {/block:IfHeaderImage}
  769.  
  770. <div id="topbar">
  771. <div class="blogttl">{Title}</div>
  772. <span class="name">{Name}</span>
  773. <a href="/">home</a>
  774. <a href="/ask">message</a>
  775. <a href="/archive">archive</a>
  776. {block:SubmissionsEnabled}<a href="/submit">submit</a>{/block:SubmissionsEnabled}
  777. <!-- search bar -->
  778. <div id="search" title="search">
  779. <form action="/search" method="get" id="search-form">
  780. <input type="hidden" name="t" value="{Name}" />
  781. <input type="caption" name="q" class="query" value="{SearchQuery}" placeholder="search…"
  782. />
  783. <div class="clear"></div>
  784. </form></div>
  785. </div>
  786. <!-- header ends -->
  787.  
  788. <!-- content begins -->
  789. <main class="container">
  790. <!-- left sidebar -->
  791. <aside class="left">
  792. <!-- about / welcome begins -->
  793. {block:ifAbout}
  794. <div class="side" id="about">
  795. <img src="{image:sidebar}">
  796. <div class="heading">welcome</div>
  797.  
  798. {block:Description}
  799. <div class="desc">
  800. {Description}
  801. </div>
  802. {/block:Description}
  803. </div>
  804. {/block:IfAbout}
  805. <!-- about / welcome ends -->
  806.  
  807. <!-- links begin -->
  808. {block:IfSidebarLinks}
  809. <div class="side" id="links">
  810. <div class="heading">navigation</div>
  811. {block:IfSidebarLink1}<a href="{text:link one url}">{text:link one}</a>{/block:IfSidebarLink1}
  812. {block:IfSidebarLink2}<a href="{text:link two url}">{text:link two}</a>{/block:IfSidebarLink2}
  813. {block:IfSidebarLink3}<a href="{text:link three url}">{text:link three}</a>{/block:IfSidebarLink3}
  814. {block:IfSidebarLink4}<a href="{text:link four url}">{text:link four}</a>{/block:IfSidebarLink4}
  815. {block:IfSidebarLink5}<a href="{text:link five url}">{text:link five}</a>{/block:IfSidebarLink5}
  816. {block:IfSidebarLink6}<a href="{text:link six url}">{text:link six}</a>{/block:IfSidebarLink6}
  817. </div>
  818. <!-- links end -->
  819. {/block:IfSidebarLinks}
  820.  
  821. {block:IfProjects}
  822. <!-- projects begin -->
  823. <div class="side" id="projects">
  824. <div class="heading">projects</div>
  825.  
  826. <!-- copy from here -->
  827. <div class="project">
  828. <img src="https://placehold.it/275"> <!-- picture -->
  829.  
  830. <div class="prj-content">
  831. <div class="prj-title">project title</div> <!-- title -->
  832. <div class="prj-date"><span>date:</span> xx.xx.xxxx</div> <!-- date -->
  833. <div class="prj-link"><span>more info:</span> <a href="/">link</a></div> <!-- link -->
  834. </div>
  835. </div>
  836. <!-- to here and paste as needed -->
  837. </div>
  838. <!-- projects end -->
  839. {/block:IfProjects}
  840. </aside>
  841. <!-- left sidebar ends -->
  842.  
  843. <!-- right sidebar begins -->
  844. <aside class="right">
  845. {block:IfUpdates}
  846. <!-- updates begin -->
  847. <div class="side" id="updates">
  848. <div class="heading">updates</div>
  849.  
  850. <!-- copy from here -->
  851. <div class="update">
  852. <span>date:</span> update here
  853. </div>
  854. <!-- to here and paste as needed -->
  855.  
  856. </div>
  857. {/block:IfUpdates}
  858. <!-- updates end -->
  859.  
  860. <!-- members begin -->
  861. {block:IfMembers}
  862. <div class="side" id="members">
  863. <div class="heading">members</div>
  864.  
  865. <div class="mbrs-content">
  866.  
  867. {block:GroupMembers}
  868. {block:GroupMember}
  869. <a href="{GroupMemberURL}" title="{GroupMemberName}">
  870. <img src="{GroupMemberPortraitURL-128}" class="mbrimg">
  871. </a>
  872. {/block:GroupMember}
  873. {/block:GroupMembers}
  874. </div>
  875.  
  876. </div>
  877. {/block:IfMembers}
  878. <!-- members end -->
  879.  
  880. {block:IfAffiliates}
  881. <!-- affiliates begin -->
  882. <div class="side" id="affiliates">
  883. <div class="heading">affiliates</div>
  884.  
  885. <!-- copy from here -->
  886. <div class="aff-content">
  887. <a href="/" title="name">
  888. <img src="https://placehold.it/48">
  889. </a>
  890. <!-- to here and paste as needed -->
  891. </div>
  892. </div>
  893. <!-- affiliates end -->
  894. {/block:IfAffiliates}
  895.  
  896. <!-- stats begin -->
  897. {block:IfStats}
  898. <div class="side" id="stats">
  899. <div class="heading">statistics</div>
  900. <!-- copy from here -->
  901. <div class="stat">
  902. <span>stat:</span> xx
  903. </div>
  904. <!-- to here and paste as needed -->
  905. {/block:IfStats}
  906. <!-- stats end -->
  907. </aside>
  908. <!-- right sidebar ends -->
  909.  
  910. <!-- posts begins -->
  911. <section>
  912. {block:Posts}
  913. <!-- {block:NoRebloggedFrom}
  914. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  915. {/block:NoRebloggedFrom} -->
  916. {block:ContentSource}<!-- {SourceURL}
  917. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  918. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  919. {/block:ContentSource}
  920. <article class="{postype}post posts" id="{PostID}">
  921. <!-- permalinks -->
  922. {block:Date}
  923. <div class="permalinks">
  924.  
  925. {block:PinnedPostLabel}
  926. <a style="margin-right: -10px;" title="pinned post">
  927. <span class="th th-push-pin-o"></span>
  928. </a>
  929. {/block:PinnedPostLabel}
  930.  
  931. <a class="day" href="{Permalink}" title="{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}">{DayOfWeek}</a>
  932.  
  933.  
  934. {block:RebloggedFrom}
  935. <a style="margin-left: -15px;" href="{ReblogParentURL}" title="reblogged from: {ReblogParentName}">
  936. via
  937. </a>
  938. {/block:RebloggedFrom}
  939.  
  940. {block:ContentSource}
  941. {block:RebloggedFrom}
  942. <a style="margin-left: -15px;" href="{ReblogRootURL}" title="source: {ReblogRootName}">
  943. source
  944. </a>
  945. {/block:RebloggedFrom}
  946. {/block:ContentSource}
  947.  
  948. <div class="like-reblog">
  949. <a href="{ReblogURL}" target="_blank" class="reblog"><span class="th th-reblog"></span></a>
  950. <a href="#" class="like">{LikeButton}<span class="th th-heart-1-o"></span></a>
  951. </div>
  952. </div>
  953. {/block:Date}
  954.  
  955. <!-- text posts -->
  956. {block:Text}
  957. {block:Title}
  958. <h1 class="ttl">{Title}</h1>
  959. {/block:Title}
  960.  
  961. {block:Notreblog}
  962. <div class="caption">
  963. {Body}
  964. </div>
  965. {/block:Notreblog}
  966.  
  967. {block:Rebloggedfrom}
  968. <div class="caption">
  969. <div class="reblog-list">
  970. {block:Reblogs}
  971. <div class="reblogs">
  972. <div class="reblog-header">
  973. {block:IsActive}
  974. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  975. </a>
  976. {/block:IsActive}
  977. {block:IsDeactivated}
  978. <span class="inactive {block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}">
  979. </span>
  980. {/block:IsDeactivated}
  981. {block:isactive}
  982. <a href="{permalink}">{username}</a>
  983. {/block:isactive}
  984. {block:isdeactivated}
  985. <a href="{permalink}" class="inactive">{username}</a>
  986. {/block:isdeactivated}
  987. </div>
  988. <div class="reblog-content">
  989. {Body}
  990. </div>
  991. </div>
  992. {/block:Reblogs}
  993. </div>
  994. </div>
  995. {/block:RebloggedFrom}
  996. {/block:Text}
  997.  
  998. <!-- photo posts -->
  999. {block:Photo}
  1000. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="photo">
  1001. {/block:Photo}
  1002.  
  1003. <!-- photoset posts -->
  1004. {block:Photoset}
  1005. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1006. {/block:Photoset}
  1007.  
  1008. <!-- quote posts -->
  1009. {block:Quote}
  1010. <div class="qu"><span class="th th-quote-up"></span>{Quote}</div>
  1011. {block:Source}<div class="src">{Source}</div>{/block:Source}
  1012. {/block:Quote}
  1013.  
  1014. <!-- chat posts -->
  1015. {block:Chat}
  1016. <div class="chat">
  1017. {block:Lines}
  1018. <li>{block:Label}<div class="label">{Label}</div>{/block:Label} {Line}</li>
  1019. {/block:Lines}
  1020. </div>
  1021. {/block:Chat}
  1022.  
  1023. <!-- link post -->
  1024. {block:Link}
  1025. <a href="{URL}" class="link-wrap">
  1026. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1027. <div class="link">
  1028. <div class="title">{Name}</div>
  1029. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1030. {block:Host}<div class="link-host"><span class="th th-location-4-o"></span>{Host}</div>{/block:Host}
  1031. </div>
  1032. </a>
  1033. {block:Description}
  1034. <div class="caption">{Description}</div>
  1035. {/block:Description}
  1036. {/block:Link}
  1037.  
  1038. <!-- video posts -->
  1039. {block:Video}
  1040. <div class="video">{Video-500}</div>
  1041. {/block:Video}
  1042.  
  1043. <!-- audio posts -->
  1044. {block:Audio}
  1045. <div class="audiowrap">
  1046. <div class="audiobox"><div class="button">
  1047. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1048. </div></div>
  1049. {block:AlbumArt}
  1050. <img src="{AlbumArtURL}" class="album-art">
  1051. {/block:AlbumArt}
  1052. <div class="audioinfo">
  1053. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1054. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1055. {block:Album}<li>{Album}</li>{/block:Album}
  1056. </div>
  1057. </div>
  1058. {/block:Audio}
  1059.  
  1060. <!-- answer posts -->
  1061. {block:Answer}
  1062. <div class="caption">
  1063. <div class="question_container">
  1064. <div class="asker">
  1065. <b>{Asker}</b> sent a message
  1066. </div>
  1067. <div class="question_text">{Question}</div>
  1068. </div>
  1069. </div>
  1070.  
  1071. {block:Answerer}
  1072. <div class="caption" style="margin-top:-20px;">
  1073. <div class="answer_container">
  1074. <div class="answerer reblog-header">
  1075. {Answerer}
  1076. </div>
  1077. <div class="answer_text">{Answer}</div>
  1078. </div>
  1079. {block:Reblogs}
  1080. <div class="reply_container">
  1081. <div class="replier reblog-header">
  1082. {block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
  1083. </div>
  1084. <div class="reply">{Body}</div>
  1085. </div>
  1086. </div>
  1087. {/block:Reblogs}
  1088. {/block:Answerer}
  1089.  
  1090. {block:NotReblog}
  1091. <div class="caption" style="margin-top:-20px;">
  1092. <div class="answer_container">
  1093. <div class="answer_text">{Answer}</div>
  1094. </div>
  1095. </div>
  1096. {/block:NotReblog}
  1097. {/block:Answer}
  1098.  
  1099. <!-- captions -->
  1100. {block:Caption}
  1101. <div class="caption">
  1102. {block:notreblog}
  1103. {Caption}
  1104. {/block:notreblog}
  1105. {block:Rebloggedfrom}
  1106. <div class="reblog-list">
  1107. {block:Reblogs}
  1108. <div class="reblogs">
  1109. <div class="reblog-header">
  1110. {block:IsActive}
  1111. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1112. </a>
  1113. {/block:IsActive}
  1114. {block:IsDeactivated}
  1115. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1116. </span>
  1117. {/block:IsDeactivated}
  1118. {block:isactive}
  1119. <a href="{permalink}">{username}</a>
  1120. {/block:isactive}
  1121. {block:isdeactivated}
  1122. <a href="{permalink}" class="inactive">{username}</a>
  1123. {/block:isdeactivated}
  1124. </div>
  1125. <div class="reblog-content">
  1126. {Body}
  1127. </div>
  1128. </div>
  1129. {/block:Reblogs}
  1130. </div>
  1131. {/block:RebloggedFrom}
  1132. </div>
  1133. {/block:Caption}
  1134.  
  1135. <!-- tags -->
  1136. {block:HasTags}
  1137. <div class="tags">
  1138. {block:Tags}
  1139. <a href="{TagURL}">{Tag}</a>
  1140. {/block:Tags}
  1141. </div>
  1142. {/block:HasTags}
  1143.  
  1144. </article>
  1145. {/block:Posts}
  1146. </section>
  1147. <!-- posts ends -->
  1148.  
  1149. </main>
  1150. <!-- credit: DO NOT REMOVE. If you ever want to move my credit, send me a message. -->
  1151. <a href="https://enbythemes.tumblr.com" class="crd" title="code by rou">enby</a>
  1152. <!-- content ends -->
  1153. </body>
  1154. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement