fallingforthemes

summer solstice - unfinished

Jul 27th, 2021 (edited)
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.13 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. MAIN THEME
  5. Credits:
  6. - Suiomi Cappuccicons icons
  7. - Shythemes like & rebglog button
  8.  
  9. If you need any help, feel free to send me a message at fallingforthemes.tumblr.com/ask
  10. -->
  11. <head>
  12. <title>{Title}</title>
  13. <!---------------- META -------------->
  14. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  15. <meta name="select:Post Size" content="250px" title="250px" />
  16. <meta name="select:Post Size" content="400px" title="400px" />
  17. <meta name="select:Post Size" content="540px" title="540px" />
  18. <meta name="select:Post Size" content="600px" title="600px" />
  19. <meta name="select:Post Size" content="650px" title="650px" />
  20. <meta name="select:Post Size" content="700px" title="700px" />
  21. <meta name="color:Background" content="#2f3136"/>
  22. <meta name="color:Container" content="#f6f6f6"/>
  23. <meta name="color:Header Font" content="#2f3136"/>
  24. <meta name="color:Header Font Hightlighted" content="#2f3136"/>
  25. <meta name="color:Navigation Links Bkgd" content="#5aa6e6" />
  26. <meta name="color:Links" content="#5aa6e6" />
  27. <meta name="color:Highlighted Link" content="#3247d2" />
  28. <meta name="color:Post" content="#ffffff" />
  29. <meta name="color:Post Accent" content="#ffffff" />
  30. <meta name="color:Post Font" content="#000000">
  31. <meta name="color:Post Border" content="#ffffff" />
  32. <meta name="text:URL 1 Label" content="" />
  33. <meta name="text:URL 1" content="" />
  34. <meta name="text:URL 2 Label" content="" />
  35. <meta name="text:URL 2" content="" />
  36. <meta name="text:URL 3 Label" content="" />
  37. <meta name="text:URL 3" content="" />
  38. <meta name="text:URL 4 Label" content="" />
  39. <meta name="text:URL 4" content="" />
  40. <meta name="text:URL 5 Label" content="" />
  41. <meta name="text:URL 5" content="" />
  42. <meta name="text:Description Name" content="" />
  43. <meta name="text:Description Age" content="" />
  44. <meta name="text:Description Gender" content="" />
  45. <meta name="text:Description Pronouns" content="" />
  46. <meta name="text:Description Other" content="" />
  47. <meta name="if:Show Tags" content=""/>
  48.  
  49. <!---------------- FEATHERICONS -------------->
  50. <script src="https://unpkg.com/feather-icons"></script>
  51. <!---------------- FONT (POPPINS) ---------------->
  52. <link rel="preconnect" href="https://fonts.googleapis.com">
  53. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  54. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
  55. <!---------------- TOOLTIPS SCALE ANIMATION -------------->
  56. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  57.  
  58. <!---------------- CSS -------------->
  59. <style type="text/css">
  60. /*********** GENERAL: BODY, IMGS, LINKS, IFRAME ************/
  61. * {
  62. margin: 0;
  63. padding: 0;
  64. box-sizing: border-box;
  65. }
  66.  
  67. body {
  68. word-wrap: break-word;
  69. background: {color:Background};
  70. font-family: 'Poppins', sans-serif;
  71. display: grid;
  72. grid-template-columns: auto;
  73. grid-template-rows: 0.5fr 4fr;
  74. grid-template-areas:
  75. "header"
  76. "content";
  77. }
  78.  
  79. img {
  80. border: 0; /*Precaution for IE*/
  81. max-width: 100%; /*Prevent imgs from spilling over*/
  82. }
  83.  
  84. ol, ul {
  85. padding: 10px 30px;
  86. }
  87.  
  88. a, .comma {
  89. color: {color:Links};
  90. }
  91.  
  92. a:hover, .comma:hover {
  93. color: {color:Highlighted Link};
  94. }
  95.  
  96. .tumblr_audio_player, .embed_iframe {
  97. width: 100%;
  98. }
  99.  
  100. .html_photoset iframe {
  101. width: 100%;
  102. }
  103.  
  104.  
  105. /* REMOVES TUMBLR CONTROLS IN UPPER RIGHT*/
  106. /* .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  107. display: none !important;
  108. }*/
  109.  
  110. /********* CAROUSEL *********/
  111. #container {
  112. grid-area: content;
  113. height: 650px;
  114. width: 1000px;
  115. background: {color:Container};
  116. margin: 0 auto;
  117. overflow: scroll;
  118. overflow-x: hidden;
  119. }
  120.  
  121. #carousel, #navigation {
  122. flex: initial;
  123. display: block;
  124. }
  125.  
  126. #carousel {
  127. overflow: hidden;
  128. height: 700px;
  129. border-radius: 4px;
  130. background-color: #fff;
  131. flex-flow: row nowrap;
  132. }
  133.  
  134. .p-wrapper {
  135. position: relative;
  136. width: 100%;
  137. height: 100%;
  138. transition: transform 0.4s ease-in-out;
  139. }
  140.  
  141. #button_a:checked ~ #carousel .p-wrapper {
  142. -webkit-transform: translateY(0);
  143. transform: translateY(0);
  144. }
  145.  
  146. #button_b:checked ~ #carousel .p-wrapper {
  147. -webkit-transform: translateY(-100%);
  148. transform: translateY(-100%);
  149. }
  150.  
  151. #button_c:checked ~ #carousel .p-wrapper {
  152. -webkit-transform: translateY(-200%);
  153. transform: translateY(-200%);
  154. }
  155.  
  156. #button_d:checked ~ #carousel .p-wrapper {
  157. -webkit-transform: translateY(-300%);
  158. transform: translateY(-300%);
  159. }
  160.  
  161. #button_e:checked ~ #carousel .p-wrapper {
  162. -webkit-transform: translateY(-400%);
  163. transform: translateY(-400%);
  164. }
  165. [class^="panel_"] {
  166. overflow: auto;
  167. position: relative;
  168. width: inherit;
  169. height: inherit;
  170. padding: 48px;
  171. }
  172.  
  173. #navigation {
  174. position: absolute;
  175. top: 20px;
  176. display: flex;
  177. text-align: center;
  178. justify-content: space-evenly;
  179. width: 1000px;
  180. }
  181.  
  182. [class^="label_"] {
  183. display: block;
  184. cursor: pointer;
  185. margin: 8px 0;
  186. height: 32px;
  187. line-height: 32px;
  188. text-align: center;
  189. border-radius: 4px;
  190. color: {color:Header Font};
  191. background-color: {color:Background};
  192. padding: 0 10px;
  193. transition: all 0.3s ease;
  194. }
  195.  
  196. [class^="label_"]:hover {
  197. color: #444;
  198. background-color: {color:Header Font Hightlighted};
  199. }
  200.  
  201. #button_a:checked ~ #navigation .label_a,
  202. #button_b:checked ~ #navigation .label_b,
  203. #button_c:checked ~ #navigation .label_c,
  204. #button_d:checked ~ #navigation .label_d,
  205. #button_e:checked ~ #navigation .label_e {
  206. cursor: default;
  207. color: #fff;
  208. background-color: #222;
  209. }
  210.  
  211. #ask_form {
  212. background-color:transparent;
  213. overflow:hidden;
  214. }
  215.  
  216. #submit_form {
  217. background-color:transparent;
  218. overflow:hidden;
  219. }
  220.  
  221. /*********** HEADER ************/
  222. header {
  223. grid-area: header;
  224. position: relative;
  225. top: 30px;
  226. }
  227.  
  228. header a {
  229. text-decoration: none;
  230. }
  231.  
  232. /***** ICON *****/
  233. .icon {
  234. display: none;
  235. }
  236.  
  237. /***** TITLES *****/
  238. .title, .post_title {
  239. font-weight: bold;
  240. font: 'Lora', sans-serif;
  241. }
  242.  
  243. /*****LINKS *****/
  244. .link {
  245. padding: 20px 25px;
  246. background-color: {color:Navigation Links Bkgd};
  247. margin: 5px;
  248. }
  249.  
  250. .link:hover {
  251. background-color: {color:Highlighted Link};
  252. color: {color:Links};
  253. }
  254.  
  255. /***** PAGINATION *****/
  256. #pagination {
  257. padding: 10px;
  258. margin-top: 10px;
  259. display: flex;
  260. justify-content: space-evenly;
  261. }
  262.  
  263. #pagination span {
  264. text-decoration: underline;
  265. }
  266.  
  267. /***** DESCRIPTION *****/
  268. .desc {
  269. color: {color:Post Font};
  270. background-color: {color:Post};
  271. position: relative;
  272. margin-bottom: 5px;
  273. }
  274.  
  275. .desc h2, #about_me h2 {
  276. font-family: 'Lora', sans-serif;
  277. }
  278.  
  279. .info h4{
  280. display: inline-block;
  281. }
  282.  
  283. .desc, #about_me {
  284. width: 600px;
  285. margin: 0 auto;
  286. }
  287.  
  288. .exit {
  289. position: absolute;
  290. color: {color:Links};
  291. font-size: 2em;
  292. margin-left: 10px;
  293. }
  294.  
  295. /*********** CONTENT ************/
  296. #content {
  297. grid-area: content;
  298. height: 700px;
  299. width: 1000px;
  300. background: {color:Container};
  301. margin: 0 auto;
  302. overflow: scroll;
  303. overflow-x: hidden;
  304. }
  305.  
  306. /*********** POSTS ************/
  307. .posts {
  308. width:{select:Post Size};
  309. margin: 0 auto;
  310. margin-top: 20px;
  311. color: {color:Post Font};
  312. border: 3px solid {color:Post Border};
  313. border-radius: 5px;
  314. padding: 20px;
  315. position: relative;
  316. }
  317.  
  318.  
  319. .posts img {
  320. max-width: 100%;
  321. display: block;
  322. margin: auto;
  323. }
  324.  
  325. /*** POST INFO (LIKE, REBLOG, PERMALINK, NOTES, TAGS) ***/
  326. .post_header {
  327. width: 160px;
  328. position: absolute;
  329. left: calc({select:Post Size} + 5px);
  330. text-decoration: none;
  331. }
  332.  
  333. .post_info {
  334. max-height: 110px;
  335. overflow-y: scroll;
  336. border: 3px solid {color:Post Accent};
  337. border-radius: 5px;
  338. padding: 5px 10px;
  339. margin-top: 5px;
  340. }
  341.  
  342. .like_reblog, .permalink {
  343. margin-right: 5px;
  344. }
  345.  
  346. .like-b, .reblog_button, .permalink {
  347. text-decoration: none;
  348. }
  349.  
  350. .like-b {
  351. position:relative;
  352. overflow:hidden;
  353. margin-bottom:-1px;
  354. margin-right: 10px;
  355. }
  356.  
  357. .like-b .like_button iframe {
  358. position:absolute;
  359. top:0;
  360. bottom:0;
  361. right:0;
  362. z-index:2;
  363. opacity:0;
  364. }
  365.  
  366. .like-b .liked + .b {
  367. color:inherit;
  368. }
  369.  
  370. .like-b .liked + .b:after {
  371. content:'d';
  372. }
  373.  
  374. .permalink {
  375. padding: 9px 14px 11px 14px;
  376. font-size: 18px;
  377. }
  378.  
  379. .note_count {
  380. color: {color:Links};
  381. }
  382.  
  383. .posts .tags .comma:last-child {
  384. display: none;
  385. }
  386.  
  387. /***** POST CONTENT *****/
  388. .caption p, .chat li{
  389. padding-bottom: 5px;
  390. }
  391.  
  392. .post_title, .caption, .reblog-list, .quote, .chat, .source, .answering, .asking {
  393. background:{color:Post};
  394. padding: 10px 20px;
  395. }
  396.  
  397. .reblog-list, .chat, .quote, .text_post .caption {
  398. border-radius: 5px;
  399. }
  400.  
  401. .caption, .answering, .source {
  402. border-radius: 0 0 5px 5px;
  403. }
  404.  
  405. /*** ASK POST ***/
  406. .asking {
  407. background-color: {color:Ask Post};
  408. border-radius: 5px 5px 0 0;
  409. }
  410.  
  411. /*** QUOTE POST ***/
  412. .quote_post .quote {
  413. font-size: 18px;
  414. }
  415.  
  416. /*** LIST OF NOTES ***/
  417. #note_list {
  418. background-color: white;
  419. width: {select:Post Size};
  420. padding: 10px 10px 60px;
  421. border-radius: 5px;
  422. margin-top: 10px;
  423. }
  424.  
  425. #note_list a:first-child {
  426. margin-left: 5px;
  427. }
  428.  
  429. /***** FOOTER *****/
  430. footer {
  431. height: 25px;
  432. grid-area: footer;
  433. z-index: 100;
  434. position: fixed;
  435. bottom: 0;
  436. width: 100%;
  437. line-height: 25px;
  438. }
  439.  
  440. footer .thememaker {
  441. float: right;
  442. text-decoration: none;
  443. font-size: 0.9em;
  444. color: black;
  445. background-color: white;
  446. padding: 0 5px;
  447. border-radius: 5px;
  448. }
  449.  
  450. /***** HANDLES DISPLAY FOR DIFFERENT SCREENS *****/
  451. @media only screen and (max-width: 1125px) {
  452. .embed_iframe {
  453. height: 100%;
  454. }
  455. }
  456. {CustomCSS}
  457. </style>
  458. </head>
  459.  
  460. <body>
  461. <!-------------- HEADER -------------->
  462. <div id="container">
  463. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  464. <input hidden type="radio" name="carousel-control" id="button_b"/>
  465. <input hidden type="radio" name="carousel-control" id="button_c"/>
  466. <input hidden type="radio" name="carousel-control" id="button_d"/>
  467. <input hidden type="radio" name="carousel-control" id="button_e"/>
  468.  
  469. <div id="navigation">
  470. <label for="button_a" class="label_a"> <span> Home </span> </label>
  471. <label for="button_b" class="label_b"> <span> Description </span> </label>
  472. <label for="button_c" class="label_c"> <span> Navigation </span> </label>
  473. <label for="button_d" class="label_d"> <span> Ask </span> </label>
  474. <label for="button_e" class="label_e"> <span> Submit </span> </label>
  475. </div> <!-- // #navigation -->
  476.  
  477. <div id="carousel">
  478. <div class="p-wrapper">
  479. <section class="panel_a">
  480. <!-------------- MAIN CONTENT -------------->
  481. {block:Posts}
  482. <!-------------- POSTS -------------->
  483. <article class="{PostType}_post posts" id="{PostID}">
  484. <!-------------- HEADER -------------->
  485. <aside class="post_header">
  486. <i data-feather="settings" class="settings"></i>
  487. <div class="post_info">
  488. <a href="{Permalink}" class="date">
  489. {block:Date}{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero}{/block:Date}
  490. </a>
  491. <div class="like_reblog">
  492. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  493. <a href="{ReblogURL}" target="_blank" class="reblog_button">reblog</a>
  494. <div class="note_count">
  495. {NoteCountWithLabel}
  496. </div>
  497.  
  498. {block:IfShowtags}
  499. {block:HasTags}
  500. <!-------------- TAGS --------------> <div class="tags">
  501. {block:Tags}
  502. <a href="{TagURL}">#{Tag}</a><span class="comma">, </span>
  503. {/block:Tags}
  504. </div>
  505. {/block:HasTags}
  506. {block:IfShowTags}
  507. </div>
  508. </div>
  509. </aside>
  510.  
  511. {block:Title}
  512. <!-------------- POST TITLE -------------->
  513. <div class="post_title">{Title}</div>
  514. {/block:Title}
  515.  
  516. {block:Photo}
  517. <!-------------- PHOTO POST -------------->
  518. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
  519. {/block:Photo}
  520.  
  521. {block:Photoset}
  522. <!-------------- PHOTOSET POST -------------->
  523. {Photoset-700}
  524. {/block:Photoset}
  525.  
  526. {block:Panorama}
  527. <!-------------- PANORAMA POST -------------->
  528. <img src="{PhotoUrl-Panorama}" alt="{PhotoAlt}">
  529. {/block:Panorama}
  530.  
  531. {block:Video}
  532. <!-------------- VIDEO POST -------------->
  533. {Video-500}
  534. {/block:Video}
  535.  
  536. {block:Audio}
  537. <!-------------- ADUIO POST -------------->
  538. <div class="audio_container" alt="Album art for {block:TrackName}{Trackname}{/block:TrackName}">
  539. {block:AudioEmbed}
  540. {AudioEmbed}
  541. {/block:AudioEmbed}
  542. </div>
  543. {/block:Audio}
  544.  
  545. {block:Quote}
  546. <!-------------- QUOTE POST -------------->
  547. <div class="quote">"{Quote}"</div>
  548. {block:Source}<p class="source">&mdash; {Source}</p>{/block:Source}
  549. {/block:Quote}
  550.  
  551. {block:Text}
  552. <!-------------- TEXT POST -------------->
  553. {block:NotReblog}
  554. <!-------------- ORIGINAL POST/NOT REBLOGGED -------------->
  555. <div class="caption">{Body}</div>
  556. {/block:NotReblog}
  557.  
  558. {block:RebloggedFrom}
  559. <!-------------- REBLOGGED POST -------------->
  560. <div class="reblog-list">
  561. {block:Reblogs}
  562. <div class="reblog-item">
  563. <div class="reblog-header">
  564. {block:IsActive}
  565. <a target="_blank" class="active reblogged_from" href="{Permalink}">{Username}</a>
  566. {/block:IsActive}
  567. {block:IsDeactivated}
  568. <span class="inactive reblogged_from">{Username}</span>
  569. {/block:IsDeactivated}
  570. </div>
  571.  
  572. <div class="post-reblog-content">
  573. <div class="caption">{Body}</div>
  574. </div>
  575. </div>
  576. {/block:Reblogs}
  577. </div>
  578. {/block:RebloggedFrom}
  579. {/block:Text}
  580.  
  581. {block:Answer}
  582. <!-------------- ASK POST -------------->
  583. <div class="asking">
  584. <div class="asker">{Asker} asked:</div>
  585. <div class="question">{Question}</div>
  586. </div>
  587.  
  588. <div class="answering">
  589. {block:Answerer}
  590. <div class="answerer">{Answerer}</div>
  591. {/block:Answerer}
  592. <div class="answer">{Answer}</div>
  593. </div>
  594. {/block:Answer}
  595.  
  596. {block:Chat}
  597. <!-------------- CHAT POST -------------->
  598. <ul class="chat">
  599. {block:Lines}
  600. <li>{block:Label}<strong>{Label}</strong>{/block:Label}{Line}</li>
  601. {/block:Lines}
  602. </ul>
  603. {/block:Chat}
  604.  
  605. {block:Link}
  606. <!-------------- LINK POST -------------->
  607. <a href="{URL}" class="post_link">{Name}</a>
  608. {block:Description}<div class="link_desc"><br>{Description}</div>{/block:Description}
  609. {/block:Link}
  610.  
  611. {block:Caption}
  612. <!-------------- CAPTION -------------->
  613. <div class="caption">
  614. {Caption}
  615. </div>
  616. {/block:Caption}
  617. </article>
  618. {block:PostNotes}
  619. <!-- LIST OF NOTES (user liked/reblogged this) -->
  620. <div id="note_list">{PostNotes}</div>
  621. {/block:PostNotes}
  622. {/block:Posts}
  623. <!-------------- PAGING (BACK & NEXT) -------------->
  624. {block:Pagination}
  625. <div id="pagination">
  626. {block:PreviousPage}<a href="{PreviousPage}" class="prev"><i data-feather="arrow-left"></i></a>{/block:PreviousPage}
  627. {block:NextPage}<a href="{NextPage}" class="next"><i data-feather="arrow-right"></i></a>{/block:NextPage}
  628. </div>
  629. {/block:Pagination}
  630. </section>
  631. <section class="panel_b">
  632. <article id="about_me">
  633. <h2>About Me</h2>
  634. <div class="info">
  635. <p>
  636. <h4>Name:</h4><span> {text:Description Name}</span>
  637. </p>
  638. <p>
  639. <h4>Age:</h4><span> {text:Description Age}</span>
  640. </p>
  641. <p>
  642. <h4>Gender:</h4><span> {text:Description Gender}</span>
  643. </p>
  644. <p>
  645. <h4>Pronouns:</h4><span> {text:Description Pronouns}</span>
  646. </p>
  647. <p>
  648. <h4>Other: </h4><span> {text:Description Other}</span>
  649. </p>
  650. </div>
  651. </article>
  652. <div class="desc">
  653. <h2>Description</h2>
  654. {Description}
  655. </div>
  656. </section>
  657. <section class="panel_c">
  658. <h2>Navigation</h2>
  659. <a href="{text:URL 1}" class="link1"><div class="link">{text:URL 1 Label}</div></a>
  660. <a href="{text:URL 2}" class="link2"><div class="link">{text:URL 2 Label}</div></a>
  661. <a href="{text:URL 3}" class="link3"><div class="link">{text:URL 3 Label}</div></a>
  662. <a href="{text:URL 4}" class="link4"><div class="link">{text:URL 4 Label}</div></a>
  663. <a href="{text:URL 5}" class="link5"><div class="link">{text:URL 5 Label}</div></a>
  664. </section>
  665. <section class="panel_d">
  666. <h2>Ask</h2>
  667. <p>
  668. <iframe frameborder="0" scrolling="no" width="100%" height="190px" src="https://www.tumblr.com/ask_form/fallingthms.tumblr.com" id="ask_form"></iframe>
  669. </p>
  670. </section>
  671. <section class="panel_e">
  672. <h2>Submit</h2>
  673. <p>
  674. <iframe frameborder="0" border="0" scrolling="no" width="100%" height="650px" allowtransparency="true" src="https://www.tumblr.com/submit_form/fallingthms.tumblr.com"></iframe>
  675. </p>
  676. </section>
  677. </div> <!-- // .p-wrapper -->
  678. </div> <!-- // #carousel -->
  679. </div> <!-- // #container -->
  680. <footer>
  681. <a href="https://fallingforthemes.tumblr.com" class="thememaker">fallingforthms</a>
  682. </footer>
  683.  
  684. <!-------------- SCRIPTS -------------->
  685. <script>
  686. feather.replace()
  687. </script>
  688. <script>
  689. $(".settings").click(function() {
  690. $( ".post_info" ).toggle( "fast", function() {});
  691. });
  692. </script>
  693. </body>
  694. </html>
Advertisement
Add Comment
Please, Sign In to add comment