API tools faq
paste
Laighlin

#29: Leafless [Portfolio]

Laighlin
Aug 14th, 2020 (edited)
669
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.38 KB | None | 0 0
raw download clone embed print report
  1. <!-- [Theme 29] Leafless by Laighlin (portfolio ver.)
  2.  
  3. hmu at linthm.tumblr with all comments and questions! :>
  4.  
  5. -->
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9. <head>
  10. <!--start of head-->
  11.  
  12. <title>
  13. {block:HomePage}{Title}{/block:HomePage}
  14. {block:PostSummary}{Title} &mdash; {PostSummary}{/block:PostSummary}
  15. {block:TagPage}{Title} &mdash; {Tag}{/block:TagPage}
  16. </title>
  17. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <!-- duplicate these options if you want more categories -->
  22. <meta name="text:Label 1" content="One"/>
  23. <meta name="text:Label 2" content="Two"/>
  24. <meta name="text:Label 3" content="Three"/>
  25. <meta name="text:Label 4" content="Four"/>
  26.  
  27. <meta name="image:Thumbnail 1" content=""/>
  28. <meta name="image:Thumbnail 2" content=""/>
  29. <meta name="image:Thumbnail 3" content=""/>
  30. <meta name="image:Thumbnail 4" content=""/>
  31.  
  32. <meta name="text:Tag 1" content=""/>
  33. <meta name="text:Tag 2" content=""/>
  34. <meta name="text:Tag 3" content=""/>
  35. <meta name="text:Tag 4" content=""/>
  36.  
  37. <meta name="text:Font size" content="18"/>
  38.  
  39. <meta name="color:Background" content="#f0f0f0"/>
  40. <meta name="color:Category background" content="#555"/>
  41. <meta name="color:Header background" content="#ccc"/>
  42. <meta name="color:Text" content="#333"/>
  43. <meta name="color:Accent" content="#bb9955"/>
  44.  
  45. <meta name="if:Solid header" content="1"/>
  46. <meta name="if:Shadows" content="1"/>
  47. <meta name="if:Click through button" content="1"/>
  48.  
  49. <meta name="font:Body" content="Favorit, sans-serif"/>
  50.  
  51. <meta name="select:Accent shape" content="star thin" title="Thin star"/>
  52. <meta name="select:Accent shape" content="star thick" title="Thick star"/>
  53. <meta name="select:Accent shape" content="square" title="Square"/>
  54. <meta name="select:Accent shape" content="rounded-square" title="Rounded square"/>
  55. <meta name="select:Accent shape" content="circle" title="Circle"/>
  56.  
  57. <style type="text/css">
  58. /* start of CSS styling */
  59. body {
  60.     margin:0;
  61.     font:1em {font:Body};
  62.     font-size:{text:font size}px;
  63.     background:{color:background};
  64.     color:{color:text};
  65. }
  66.  
  67. a {
  68.     text-decoration:none;
  69.     transition:.2s all ease;
  70. }
  71.  
  72. .caption a, .nav-link, #foot a {
  73.     color:{color:accent};
  74.     font-weight:bold;
  75. }
  76.  
  77. .caption a, #foot a {
  78.     border-bottom:1px solid rgba({RGBcolor:text},.5);
  79. }
  80.  
  81. .caption a:hover, .nav-link:hover, #foot a:hover {
  82.     border-bottom:2px solid {color:accent};
  83. }
  84.  
  85. .nav-link {
  86.     border-bottom:2px solid transparent;
  87. }
  88.  
  89. iframe.tmblr-iframe { display:none!important; }
  90.  
  91. h1, h2, h3, h4, h5 {
  92.     margin:.2em 0;
  93. }
  94.  
  95. h1.post-title {
  96.     font-size:2em;
  97. }
  98.  
  99. hr#header-flair {
  100.     border:none;
  101.     height:0;
  102.     border-top:5px solid {color:accent};
  103.     display:inline-block;
  104.     margin-bottom:15px;
  105.     margin-top:-20px;
  106.     width:20px;
  107.     float:top;
  108.     {block:ShowHeaderImage}{block:HomePage}
  109.     display:none;
  110.     {/block:HomePage}{/block:ShowHeaderImage}
  111. }
  112.  
  113. .caption hr {
  114.     margin-left:4em;
  115.     margin-right:4em;
  116.     border-top:2px solid {color:accent};
  117. }
  118.  
  119. #everything-wrapper {
  120.     position:relative;
  121.     margin:2em 20px;
  122.     max-width:700px;
  123. }
  124.  
  125. @media screen and (min-width:760px) {
  126.     #everything-wrapper {
  127.         margin: 2em auto;
  128.     }
  129. }
  130.  
  131. #header-image {
  132.     position:absolute;
  133.     top:0;
  134.     left:0;
  135.     right:0;
  136.     height:110px;
  137.     opacity:.7;
  138.     background:{color:Header background} {block:ifNotSolidHeader}url('{HeaderImage}'){/block:ifNotSolidHeader};
  139.     background-size:cover;
  140.     /*background-blend-mode:screen;*/
  141.     /*uncomment the above line for a funky blend effect!*/
  142.     z-index:-1;
  143. }
  144.  
  145. #blog-title {
  146.     margin:0 0 .3em 0;
  147.     font-size:1.5em;
  148.     line-height:1.1em;
  149.     text-transform:uppercase;
  150.     letter-spacing:1px;
  151.     font-family:{TitleFont};
  152.     font-weight:{TitleFontWeight};
  153. }
  154.  
  155. .star.thin {
  156.     clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  157. }
  158.  
  159. .star.thick {
  160.     clip-path: polygon(50% 0%, 65% 28%, 98% 35%, 75% 60%, 79% 91%, 50% 78%, 21% 91%, 25% 60%, 2% 35%, 35% 28%);
  161. }
  162.  
  163. .square { border-radius:.2em; }
  164. .rounded-square { border-radius:.8em; }
  165. .circle, .click-thru.star { border-radius:50%; clip-path:none; }
  166. .category-label.star { border-radius:.2em; clip-path:none; }
  167. .category-label.circle { border-radius:1.5em; }
  168.  
  169. #blog-avatar {
  170.     margin-top:-73px;
  171.     {block:ShowTitle}margin-top:-40px;{/block:ShowTitle}
  172.     width:150px;
  173.     height:150px;
  174.     float:left;
  175.     margin-right:1.5em;
  176. }
  177.  
  178. #blog-avatar.star { margin-left:-5px; }
  179.  
  180. #description {
  181.     {block:ShowTitle}
  182.     margin-top:0;
  183.     {/block:ShowTitle}
  184.     color:rgba({RGBcolor:text},.7);
  185. }
  186.  
  187. #head {
  188.     margin-top:140px;
  189.     {block:ShowTitle}
  190.     margin-top:130px;
  191.     {/block:ShowTitle}
  192.     padding:0 1em;
  193. }
  194.  
  195. #content {
  196.     margin-top:4em;
  197.     position:relative;
  198. }
  199.  
  200. {block:HomePage}
  201. #content.postes { display:none; }
  202. {/block:HomePage}
  203.  
  204. #content.categories {
  205.     margin-top:2em;
  206.     display:flex;
  207.     justify-content:space-between;
  208.     flex-flow:row wrap;
  209. }
  210.  
  211. .category-link {
  212.     position:relative;
  213.     border-radius:.2em;
  214.     flex-grow:3;
  215.     margin:2em 1em;
  216.     flex-basis:calc(50% - 2em);
  217.     min-width:250px;
  218.     height:250px;
  219.     background-color:{color:Category background};
  220. }
  221.  
  222. .category-thumb-wrapper {
  223.     overflow:hidden;
  224.     border-radius:.2em;
  225. }
  226.  
  227. .category-thumb {
  228.     background-size:cover;
  229.     background-position:center;
  230.     z-index:1;
  231.     opacity:.7;
  232. }
  233.  
  234. .category-thumb, .category-thumb-wrapper {
  235.     position:absolute;
  236.     top:0;
  237.     left:0;
  238.     height:100%;
  239.     width:100%;
  240.     transition:.5s all ease;
  241. }
  242.  
  243. .category-label {
  244.     z-index:4;
  245.     margin:3em;
  246.     display:block;
  247.     margin-top:calc(250px - 1.5em);
  248.     padding:.8em;
  249. }
  250.  
  251. .category-link:hover .category-thumb, .category-link:focus .category-thumb {
  252.     transform:scale(1.2);
  253.     opacity:1;
  254. }
  255.  
  256. /*duplicate this bit for more categories. don't forget to increase the numbers too!*/
  257. .category-thumb.cat-1 {
  258.     background-image:url('{image:Thumbnail 1}');
  259. }
  260.  
  261. .category-thumb.cat-2 {
  262.     background-image:url('{image:Thumbnail 2}');
  263. }
  264.  
  265. .category-thumb.cat-3 {
  266.     background-image:url('{image:Thumbnail 3}');
  267. }
  268.  
  269. .category-thumb.cat-4 {
  270.     background-image:url('{image:Thumbnail 4}');
  271. }
  272.  
  273. .post {
  274.     margin:4em 0;
  275. }
  276.  
  277. .tmblr-full * {
  278.     width:100%;
  279.     height:auto;
  280. }
  281.  
  282. .tmblr-full {
  283.     border-radius:.2em;
  284.     overflow:hidden;
  285.     line-height:0;
  286. }
  287.  
  288. .type-Link, .type-Video, .type-Audio, .type-Chat, .type-Quote { display:none; }
  289.  
  290. .media-wrap {
  291.     line-height:0;
  292.     position:relative;
  293.     border-radius:.2em;
  294.     overflow:hidden;
  295. }
  296.  
  297. .media-wrap img { width:100%; }
  298.  
  299. {block:ifShadows}
  300. .media-wrap, #blog-avatar, .category-link, .tmblr-full {
  301.     box-shadow:0 2px 4px 0 rgba({RGBcolor:text},.7);
  302. }
  303. {/block:ifShadows}
  304.  
  305. .caption {
  306.     margin-top:2em;
  307.     display:none;
  308. }
  309.  
  310. .caption p { margin:1em; }
  311.  
  312. .click-thru {
  313.     display:block;
  314.     height:30px;
  315.     width:30px;
  316.     font-size:12px;
  317.     line-height:31px;
  318.     padding:10px;
  319.     margin-top:-26px;
  320.     margin-left:calc(100% - 65px);
  321.     z-index:2;
  322. }
  323.  
  324. .click-thru, .category-label {
  325.     background:{color:accent};
  326.     color:{color:background};
  327.     position:relative;
  328.     transition:.1s all ease;
  329.     text-align:center;
  330.     font-weight:bold;
  331.     text-transform:uppercase;
  332. }
  333.  
  334. .click-thru:hover, .category-label:hover,
  335. .click-thru:focus, .category-label:focus {
  336.     animation:ripple .5s ease-out;
  337. }
  338.  
  339. .click-thru:active, .category-label:active {
  340.     background:{color:text};
  341. }
  342.  
  343. {block:PermalinkPage}
  344. .caption {
  345.     display:block;
  346. }
  347. {/block:PermalinkPage}
  348.  
  349. #navigation {
  350.     margin-top:.7em;
  351.     text-transform:uppercase;
  352. }
  353.  
  354. .nav-link, .pagi-link {
  355.     margin-right:.5em;
  356. }
  357.  
  358. #foot {
  359.     z-index:5;
  360.     bottom:0;
  361.     font-size:.9em;
  362.     text-transform:uppercase;
  363.     margin-top:1em;
  364.     padding:1em;
  365.     color:rgba({RGBcolor:text},.7);
  366. }
  367.  
  368. #foot .right { float:right; }
  369.  
  370. .clearfix { clear:both; }
  371.  
  372. /*Animations*/
  373.  
  374. @keyframes ripple {
  375.     0% { box-shadow:0 0 0 3px {color:accent}; }
  376.     75% { box-shadow:0 0 0 10px rgba({RGBcolor:accent},.1); }
  377.     100% { box-shadow:0 0 0 20px transparent; }
  378. }
  379.  
  380. @keyframes zoom {
  381.     0% { background-size:cover; }
  382.     100% { background-size:110%; }
  383. }
  384.  
  385. </style>
  386. <!-- end of CSS -->
  387. </head>
  388.  
  389. <body>
  390.  
  391. {block:HomePage}{block:ShowHeaderImage}
  392. <header id="header-image"></header>
  393. {/block:ShowHeaderImage}{/block:HomePage}
  394.  
  395. <div id="everything-wrapper">
  396. <!-- container to keep everything together -->
  397.  
  398. <header id="head">
  399. {block:HomePage}{block:ShowAvatar}
  400.     <a href="/" id="back-home">
  401.     <img id="blog-avatar" class="{select:Accent shape}" src="{PortraitURL-128}">
  402.     </a>
  403. {/block:ShowAvatar}{/block:HomePage}
  404.  
  405. <hr id="header-flair"/>
  406. {block:HomePage}
  407. {block:ShowTitle}<h1 id="blog-title">{Title}</h1>{/block:ShowTitle}
  408. <aside id="description">{Description}</aside>
  409. {/block:HomePage}
  410.  
  411. <nav id="navigation">
  412.     <a class="nav-link" href="/">{lang:Home}</a>
  413.     {block:HasPages}
  414.     <!-- only renders if the blog has custom links enabled. CHECK THE FAQ -->
  415.     {block:Pages}
  416.     <a class="nav-link" href="{URL}">{Label}</a>
  417.     {/block:Pages}
  418.     {/block:HasPages}
  419.     {block:AskEnabled}<a class="nav-link" href="/ask">{AskLabel}</a>{/block:AskEnabled}
  420.     <!-- only renders if asks are enabled -->
  421. </nav>
  422. </header>
  423.  
  424. <div class="clearfix"></div>
  425.  
  426. <!-- categories - these won't show up on non-home pages -->
  427. {block:HomePage}
  428. <nav id="content" class="categories">
  429.     <!-- duplicate this section for as many categories as you want. remember to increment the numbers too! -->
  430.     <a href="/tagged/{text:Tag 1}" class="category-link">
  431.         <div class="category-thumb-wrapper">
  432.         <div class="category-thumb cat-1"></div>
  433.         </div>
  434.         <span class="category-label {select:Accent shape}">{text:Label 1}</span>
  435.     </a>
  436.     <!-- end of section -->
  437.     <a href="/tagged/{text:Tag 2}" class="category-link">
  438.         <div class="category-thumb-wrapper">
  439.         <div class="category-thumb cat-2"></div>
  440.         </div>
  441.         <span class="category-label {select:Accent shape}">{text:Label 2}</span>
  442.     </a>
  443.    
  444.     <a href="/tagged/{text:Tag 3}" class="category-link">
  445.         <div class="category-thumb-wrapper">
  446.         <div class="category-thumb cat-3"></div>
  447.         </div>
  448.         <span class="category-label {select:Accent shape}">{text:Label 3}</span>
  449.     </a>
  450.    
  451.     <a href="/tagged/{text:Tag 4}" class="category-link">
  452.         <div class="category-thumb-wrapper">
  453.         <div class="category-thumb cat-4"></div>
  454.         </div>
  455.         <span class="category-label {select:Accent shape}">{text:Label 4}</span>
  456.     </a>
  457. </nav>
  458. {/block:HomePage}
  459.  
  460. <main id="content" class="postes"> <!-- start of posts block -->
  461.  
  462. {block:Posts}
  463. <article class="post type-{PostTypeNoun}{block:Date} is-post{/block:Date}">
  464.  
  465.     {block:Title}<h2 class="post-title">{Title}</h2>{/block:Title}
  466.     {block:Text}<div class="caption">{Body}</div>{/block:Text}
  467.     <!-- if not enclosed in those blocks, the title variable will display the title of the blog instead of the post title -->
  468.    
  469.     <!-- media -->
  470.     {block:Photo}
  471.     <figure class="media-wrap"><img src="{PhotoURL-HighRes}"></figure>
  472.     {/block:Photo}
  473.    
  474.     {block:Photoset}
  475.     <figure class="media-wrap">{Photoset}</figure>
  476.     <!-- this element is responsive - finally! lmao photosets used to be really annoying to style -->
  477.     {/block:Photoset}
  478.    
  479.     {block:Video}
  480.     <figure class="media-wrap">{Video-500}</figure>
  481.     {/block:Video}
  482.    
  483.     {block:Caption}
  484.     <!-- this will render for any media post that has a caption! hax -->
  485.     <div class="media-post caption {block:NotReblog}single{/block:NotReblog}">
  486.         {block:NotReblog}{Caption}{/block:NotReblog}
  487.         {block:RebloggedFrom}
  488.         {block:Reblogs}
  489.         <!-- renders for reblogs only -->
  490.         <div class="reblogged-comment">
  491.             <a class="user {block:IsDeactivated}inactive{/block:isDeactivated}" href="{Permalink}">{Username}</a>
  492.             <div class="comment-content">{Body}</div>
  493.         </div>
  494.         {/block:Reblogs}
  495.         {/block:RebloggedFrom}
  496.     </div>
  497.     {/block:Caption}
  498.    
  499.     {block:ifClickThroughButton}{block:IndexPage}
  500.     <a class="click-thru {select:Accent shape}" href="{Permalink}">Info</a>
  501.     {/block:IndexPage}{/block:ifClickThroughButton}
  502.    
  503. </article>
  504. {/block:Posts}
  505.  
  506. </main> <!-- end of posts block -->
  507.  
  508. {block:Pagination}
  509. <nav id="pagination">
  510.     {block:PreviousPage}
  511.     <a class="pagi-link" href="{PreviousPage}">{lang:Previous}</a>
  512.     {/block:PreviousPage}
  513.     {block:NextPage}
  514.     <a class="pagi-link" href="{NextPage}">{lang:Next}</a>
  515.     {/block:NextPage}
  516. </nav>
  517. {/block:Pagination}
  518.  
  519. <footer id="foot">
  520.     <span class="left">
  521.     Powered by <a href="https://tumblr.com/">Tumblr</a>
  522.     </span>
  523.     <span class="right">
  524.     <a href="https://linthm.tumblr.com/thm" title="Leafless by Laighlin">Theme</a>
  525.     </span>
  526. </footer>
  527.  
  528. </div> <!-- wrapper finishes just before the end of the body -->
  529.  
  530. </body>
  531.  
  532. <script type="text/javascript">
  533. // JS goes here, if any
  534.  
  535. </script>
  536.  
  537. </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!