Petra1999

SAKURA THEME | cloudythms.tumblr.com

Jul 31st, 2018
4,566
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 33.77 KB | None | 0 0
  1. <!DOCTYPE html><head><link rel="alternate" type="application/rss+xml" href="{RSS}">{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  2.  
  3. <!-----------------------------------------------------------------------
  4.  
  5.  
  6.         {   cloudythms
  7.                   theme "sakura"    }
  8.          
  9.                       by
  10.              cloudythms.tumblr.com
  11.        contact me if you have questions!
  12.        
  13.        Updated in January 2019
  14.  
  15.  
  16. ......  rules  ......
  17.  
  18. * edit as much as you want
  19. * do not remove the credit
  20. * do not steal parts of my codes
  21. * do not redistribute or use as base
  22.  
  23.    
  24. ......  guide  ......
  25.  
  26. sidebar image size: 250 px * 125 px
  27.                (but 500 px * 250 px works too)
  28.  
  29.  
  30. ......  credits  ......
  31.  
  32. fonts:              fonts.google.com
  33. icons:              @suiomi
  34.  
  35. source/via fix:     @neothm
  36. unnest captions:    @neothm
  37. audio post style:   @lmthemeslp-tut
  38. pxu photosets:      @shythemes
  39. tag search box:     @shythemes
  40. video resizer:      @shythemes
  41. custom like/reblog: @shythemes
  42. text like/reblog:   @shythemes
  43. soundcloud player:  @shythemes
  44. tumblr controls:    @cyantists
  45. smoothscroll:       @zacharyfury
  46. tooltips:           @tutorial-baby
  47.  
  48. full credits:       cloudythms.tumblr.com/credits
  49.  
  50. ---------------------------------------------------------------------->
  51.  
  52.  
  53. <!-- Text that appears on the tab / browser window
  54.    Change the {Title} to any text if you want to. -->
  55. <title>{Title}</title>
  56.  
  57. <!-- Favicon (little image that's shown in the browser)
  58.    Change {Favicon} to your image URL. Leave the "". -->
  59. <link rel="shortcut icon" href="{Favicon}"/>
  60.  
  61.  
  62.  
  63. <!-- --------------------------- OPTIONS --------------------------- -->
  64.  
  65. <!-- Images -->
  66. <meta name="image:Background" content="0"/>
  67. <meta name="image:Sidebar" content="0"/>
  68.  
  69. <!-- Colors -->
  70. <meta name="color:Background" content="#fcfcfc" />
  71. <meta name="color:Content Background" content="#f7edf0" />
  72. <meta name="color:Text" content="#000000" />
  73. <meta name="color:Link" content="#404040" />
  74. <meta name="color:Accent" content="#e197ad" />
  75. <meta name="color:Icons" content="#b16a8c" />
  76.  
  77. <!-- Dropdowns -->
  78.  
  79. <meta name="select:Font" content="Karla" title="Karla (sans)">
  80. <meta name="select:Font" content="Open Sans" title="Open Sans (sans)">
  81. <meta name="select:Font" content="Roboto Slab" title="Roboto Slab (serif)">
  82. <meta name="select:Font" content="Lora" title="Lora (serif)">
  83. <meta name="select:Font" content="Fira Mono" title="Fira (mono)">
  84. <meta name="select:Font" content="Roboto Mono" title="Roboto (mono)">
  85. <meta name="select:Font Size" content="12px" title="medium">
  86. <meta name="select:Font Size" content="10px" title="tiny">
  87. <meta name="select:Font Size" content="11px" title="small">
  88. <meta name="select:Font Size" content="13px" title="big">
  89.  
  90. <meta name="select:Post Width" content="250" title="250px">
  91. <meta name="select:Post Width" content="300" title="300px">
  92. <meta name="select:Post Width" content="350" title="350px">
  93. <meta name="select:Grid Columns" content="1" title="1">
  94. <meta name="select:Grid Columns" content="2" title="2">
  95. <meta name="select:Grid Gutter" content="10" title="10px">
  96. <meta name="select:Grid Gutter" content="30" title="30px">
  97. <meta name="select:Grid Gutter" content="50" title="50px">
  98. <meta name="select:Grid Gutter" content="70" title="70px">
  99. <meta name="select:Grid Gutter" content="90" title="90px">
  100. <meta name="select:Grid Gutter" content="110" title="110px">
  101. <meta name="select:Grid Gutter" content="130" title="130px">
  102. <meta name="select:Grid Gutter" content="0" title="none">
  103.  
  104. <meta name="select:Icon Spacing" content="5px" title="small">
  105. <meta name="select:Icon Spacing" content="7px" title="medium">
  106. <meta name="select:Icon Spacing" content="10px" title="big">
  107. <meta name="select:Icon Spacing" content="15px" title="huge">
  108.  
  109. <meta name="select:Link 1 Icon" content="star-o" title="star">
  110. <meta name="select:Link 1 Icon" content="heart-1-o" title="heart">
  111. <meta name="select:Link 1 Icon" content="bookmark-1-o" title="bookmark">
  112. <meta name="select:Link 1 Icon" content="link" title="link">
  113. <meta name="select:Link 1 Icon" content="loupe-o" title="loupe">
  114. <meta name="select:Link 1 Icon" content="blossom-o" title="flower">
  115. <meta name="select:Link 2 Icon" content="star-o" title="star">
  116. <meta name="select:Link 2 Icon" content="heart-1-o" title="heart">
  117. <meta name="select:Link 2 Icon" content="bookmark-1-o" title="bookmark">
  118. <meta name="select:Link 2 Icon" content="link" title="link">
  119. <meta name="select:Link 2 Icon" content="loupe-o" title="loupe">
  120. <meta name="select:Link 2 Icon" content="blossom-o" title="flower">
  121. <meta name="select:Link 3 Icon" content="star-o" title="star">
  122. <meta name="select:Link 3 Icon" content="heart-1-o" title="heart">
  123. <meta name="select:Link 3 Icon" content="bookmark-1-o" title="bookmark">
  124. <meta name="select:Link 3 Icon" content="link" title="link">
  125. <meta name="select:Link 3 Icon" content="loupe-o" title="loupe">
  126. <meta name="select:Link 3 Icon" content="blossom-o" title="flower">
  127. <meta name="select:Link 4 Icon" content="star-o" title="star">
  128. <meta name="select:Link 4 Icon" content="heart-1-o" title="heart">
  129. <meta name="select:Link 4 Icon" content="bookmark-1-o" title="bookmark">
  130. <meta name="select:Link 4 Icon" content="link" title="link">
  131. <meta name="select:Link 4 Icon" content="loupe-o" title="loupe">
  132. <meta name="select:Link 4 Icon" content="blossom-o" title="flower">
  133. <meta name="select:Link 5 Icon" content="star-o" title="star">
  134. <meta name="select:Link 5 Icon" content="heart-1-o" title="heart">
  135. <meta name="select:Link 5 Icon" content="bookmark-1-o" title="bookmark">
  136. <meta name="select:Link 5 Icon" content="link" title="link">
  137. <meta name="select:Link 5 Icon" content="loupe-o" title="loupe">
  138. <meta name="select:Link 5 Icon" content="blossom-o" title="flower">
  139.  
  140.  
  141. <!-- Options -->
  142. <meta name="if:Show Tumblr Controls" content="1"/>
  143. <meta name="if:Repeat Background Image" content="1"/>
  144. <meta name="if:Rainbow" content="0"/>
  145. <meta name="if:Hiragana Numbers" content="1"/>
  146. <meta name="if:Show Tags" content="1"/>
  147. <meta name="if:Show Captions" content="1"/>
  148. <meta name="if:Show Home Link" content="1"/>
  149. <meta name="if:Show Ask Link" content="1"/>
  150. <meta name="if:Show Submit Link" content="1"/>
  151. <meta name="if:Show Archive Link" content="1"/>
  152. <meta name="if:Show Link 1" content="0"/>
  153. <meta name="if:Show Link 2" content="0"/>
  154. <meta name="if:Show Link 3" content="0"/>
  155. <meta name="if:Show Link 4" content="0"/>
  156. <meta name="if:Show Link 5" content="0"/>
  157.  
  158. <!-- Text -->
  159. <meta name="text:Home Link Text" content="Index"/>
  160. <meta name="text:Submit Link Text" content="Submit"/>
  161. <meta name="text:Archive Link Text" content="Archive"/>
  162. <meta name="text:Ask Link Text" content="Contact"/>
  163. <meta name="text:Ask Link" content="/ask"/>
  164.  
  165. <meta name="text:Link1 Title" content="example"/>
  166. <meta name="text:Link1 URL" content="/link1"/>
  167. <meta name="text:Link2 Title" content=""/>
  168. <meta name="text:Link2 URL" content=""/>
  169. <meta name="text:Link3 Title" content=""/>
  170. <meta name="text:Link3 URL" content=""/>
  171. <meta name="text:Link4 Title" content=""/>
  172. <meta name="text:Link4 URL" content=""/>
  173. <meta name="text:Link5 Title" content=""/>
  174. <meta name="text:Link5 URL" content=""/>
  175.  
  176.  
  177.  
  178. <!-- ---------------------------------------------------------------- -->
  179. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  180. <!-- ---------------------------------------------------------------- -->
  181. <style>
  182.  
  183. /* variables */
  184.     :root {
  185.         --distance-left:10vw;    
  186.     }
  187. @media only screen and (max-width: 1300px) {
  188.     :root {
  189.         --distance-left:3vw;    
  190.     }
  191. }
  192.  
  193. body {
  194.     background-color:{color:background};
  195.     color:{color:text};  
  196.     font-family: "{select:Font}", Arial, sans-serif;
  197.     font-size: {select:Font Size};
  198.     text-align:left;
  199.     margin:0;
  200.    
  201.     /* background image */
  202.     {block:IfBackgroundImage}
  203.         background-image:url({image:Background});
  204.         background-attachment: fixed;
  205.         {block:IfRepeatBackgroundImage}
  206.             background-repeat: repeat;
  207.         {/block:IfRepeatBackgroundImage}
  208.         {block:IfNotRepeatBackgroundImage}
  209.             background-repeat: no-repeat;
  210.             -webkit-background-size: cover;
  211.             -moz-background-size: cover;
  212.             -o-background-size: cover;
  213.             background-size: cover;
  214.         {/block:IfNotRepeatBackgroundImage}
  215.     {/block:IfBackgroundImage}
  216.    
  217. }
  218.  
  219. pre {
  220.     white-space: pre-wrap;
  221.     white-space: -moz-pre-wrap;
  222.     white-space: -pre-wrap;
  223.     white-space: -o-pre-wrap;
  224.     word-wrap: break-word;
  225. }
  226.  
  227. blockquote{
  228.    border-left:1px solid #d3d3d3;
  229.    padding-left:10px;
  230.    margin-left:5px;
  231. }
  232.  
  233. hr {
  234.     border: 0;
  235.     height: 0;
  236.     border-top: 1px solid rgba(0, 0, 0, 0.1);
  237.     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  238. }
  239.  
  240. b, strong {
  241.    
  242. }
  243.  
  244. i, em {
  245.    
  246. }
  247.  
  248. a, a:visited, a:link, a:active {
  249.     color:{color:link};
  250.     text-decoration:none;
  251.     transition:0.3s;
  252. }
  253.  
  254. a:hover {
  255.     color:{color:accent};
  256. }
  257.  
  258. a, a:focus {  
  259.     outline: 0;
  260. }
  261.  
  262.  
  263. strike {
  264.     text-decoration: line-through solid black;
  265. }
  266.    
  267. img{
  268.     opacity:1;
  269.     border:none;
  270.     text-decoration:none;
  271. }
  272.  
  273. h1, h2, h3, h4, h5, h6{
  274.     font-weight:normal;
  275.     margin:0;
  276. }
  277.  
  278. small {
  279.     font-size: calc({select:Font Size} - 2px);
  280. }
  281.  
  282. big, h2 {
  283.     font-size: calc({select:Font Size} + 2px);
  284. }
  285.  
  286.  
  287.  
  288. /* lists */
  289.  
  290. ol{
  291.    {block:IfHiraganaNumbers}
  292.    list-style-type: hiragana;
  293.    {/block:IfHiraganaNumbers}
  294.    padding-left: 27px;
  295. }
  296.  
  297. ul{
  298.    list-style: none;
  299.    padding-left:10px;
  300. }
  301.  
  302. ul li:before {
  303.   content: '\00BB';
  304.   margin:0 5px;
  305. }
  306.  
  307.  
  308. /* selection */
  309.  
  310. ::selection {
  311.   background: rgba(0,0,0,0.3);
  312.   color: #ffffff;
  313. }
  314. ::-moz-selection {
  315.   background: rgba(0,0,0,0.3);
  316.   color: #ffffff;
  317. }
  318.  
  319.  
  320. /* scrollbar */
  321.  
  322. ::-webkit-scrollbar-thumb:vertical {
  323. background-color:rgba(0,0,0,0.3); /* slider color*/
  324. height:100px;
  325. border-radius:15px;
  326. }
  327. ::-webkit-scrollbar-thumb:horizontal {
  328. background-color:rgba(0,0,0,0.3); /* slider color*/
  329. height:100px !important;
  330. }
  331. ::-webkit-scrollbar {
  332. height:10px;
  333. width:10px; /*width of slider*/
  334. background-color:{color:background}; /* main color*/
  335. }
  336.  
  337.  
  338.  
  339. /* topbar  */
  340.  
  341. .topbar {
  342.   position: fixed;
  343.   width: 100%;
  344.   left: 0;
  345.   z-index:99999999;
  346.   background-color:{color:background};
  347.   height:35px;
  348.   top: 0;
  349. }
  350. .topbar:after {
  351.     content:'';
  352.     background-color:{color:accent};
  353.     opacity:0.2;
  354.     width: 100%;
  355.     height: 100%;
  356.     position: absolute;
  357. }
  358.  
  359.  
  360.  
  361. /****************************** sidebar ******************************/
  362.  
  363. .sidebar {
  364.   position: fixed;
  365.   box-sizing: border-box;
  366.   width: calc(250px + 40px);
  367.   top: 15vh;
  368.   padding: 20px;
  369.   left:var(--distance-left, 10vw);
  370.   padding-top: 0;
  371. }
  372.  
  373. .sidebar img {
  374.     width: 250px;
  375.     height: 125px;
  376.     border-top-left-radius: 10px;
  377.     border-top-right-radius: 10px;
  378.     -webkit-top-bottom-left-radius: 10px;
  379.     -webkit-top-bottom-right-radius: 10px;
  380.     -moz-border-top-left-radius: 10px;
  381.     -moz-border-top-right-radius: 10px;
  382.    
  383. }
  384.  
  385. .sidebar-content {
  386.     background:{color:content background};
  387.     margin-top: -4px;
  388.     margin-bottom: 15px;
  389.     padding: 20px;
  390.     padding-bottom: 17px;
  391.     max-height: 200px;
  392.     overflow: hidden;
  393.     border-radius:10px;
  394.     -moz-border-radius:10px;
  395.     -webkit-border-radius:10px;
  396.  
  397.     {block:IfSidebarImage}
  398.     border-top-left-radius: 0;
  399.     border-top-right-radius: 0;
  400.     -webkit-top-bottom-left-radius: 0;
  401.     -webkit-top-bottom-right-radius: 0;
  402.     -moz-border-top-left-radius: 0;
  403.     -moz-border-top-right-radius: 0;
  404.     {/block:IfSidebarImage}
  405. }
  406.  
  407. #blogtitle, #blogtitle:hover {
  408.     font-size: calc({select:Font Size} + 5px);
  409.     letter-spacing:2px;
  410.     color:{color:Text};
  411.     text-align: right;
  412.     display: block;
  413.     margin-right: 10px;
  414.     line-height: 100%;
  415.     margin-bottom: 10px;
  416. }
  417.  
  418. #description {
  419.     margin:7px 0;
  420.     text-align:left;
  421. }
  422.  
  423.  
  424.  
  425. /* navigation */
  426.  
  427. .navigation {
  428.     text-align: center;
  429.     margin-bottom:20px;
  430.     line-height: 25px;
  431. }
  432.  
  433. .navigation a {
  434.     display: inline-block;
  435.     margin-right: {select:Icon Spacing};
  436.     margin-left: {select:Icon Spacing};
  437.     transition:0.3s ease;
  438.     color:{color:icons};
  439. }
  440. .navigation a:first-of-type { margin-left:0; }
  441. .navigation a:last-of-type { margin-right:0;margin-bottom:10px; }
  442.  
  443. {block:IfRainbow}
  444. .navigation a:nth-of-type(1){ color:#ef7d92; }
  445. .navigation a:nth-of-type(2){ color:#f6aa61; }
  446. .navigation a:nth-of-type(3){ color:#e3d112; }
  447. .navigation a:nth-of-type(4){ color:#65db90; }
  448. .navigation a:nth-of-type(5){ color:#79c2ea; }
  449. .navigation a:nth-of-type(6){ color:#b396ed; }
  450. .navigation a:nth-of-type(7){ color:#ef7d92; }
  451. .navigation a:nth-of-type(8){ color:#f6aa61; }
  452. .navigation a:nth-of-type(9){ color:#e3d112; }
  453. .navigation a:nth-of-type(10){ color:#65db90; }
  454. .navigation a:nth-of-type(11){ color:#79c2ea; }
  455. .navigation a:nth-of-type(12){ color:#b396ed; }
  456. {/block:IfRainbow}
  457.  
  458. .navigation a:hover {
  459.     color:{color:accent};
  460. }
  461.  
  462.  
  463.  
  464. .rainbow {
  465.     opacity:0.7;
  466. }
  467.  
  468. .bow {
  469.     width:80%;
  470.     height:2px;
  471.     background-color:{color:accent};
  472.     margin:auto;
  473.     margin-bottom:6px;
  474. }
  475. .bow:nth-of-type(2){ width: 70%; }
  476. .bow:nth-of-type(3){ width: 60%; }
  477. .bow:nth-of-type(4){ width: 45%; }
  478. .bow:nth-of-type(5){ width: 25%; }
  479. .bow:nth-of-type(6){ width: 9%; }
  480.  
  481. {block:IfRainbow}
  482. .bow:nth-of-type(1n){ background-color:#fb8f8f; }
  483. .bow:nth-of-type(2n){ background-color:#efc992; }
  484. .bow:nth-of-type(3n){ background-color:#d0f593; }
  485. .bow:nth-of-type(4n){ background-color:#a3e98d; }
  486. .bow:nth-of-type(5n){ background-color:#91c8e6; }
  487. .bow:nth-of-type(6n){ background-color:#c6b1ef; }
  488. {/block:IfRainbow}
  489.  
  490.  
  491.  
  492. /* pagination */
  493.  
  494. .pagination {
  495.     text-align:center;
  496.     padding-bottom:50px;
  497.     position:absolute;
  498.     width:inherit;
  499.    
  500.    
  501. }
  502.  
  503.  
  504.  
  505. /******************************* posts *******************************/
  506.  
  507. .wrapper, .posts {
  508.     {block:IndexPage}
  509.         width: calc( ({select:Post Width}px * {select:Grid Columns}) + ({select:Grid Gutter}px * ({select:Grid Columns} - 1)) );
  510.     {/block:IndexPage}
  511.     {block:PermalinkPage}
  512.        width: 400px;
  513.     {/block:PermalinkPage}
  514.     margin-bottom: 20vh;
  515. }
  516.  
  517. .wrapper {
  518.     left:calc(var(--distance-left, 10vw) + (250px + 40px) + 3vw);
  519.     position:relative;
  520.     top:15vh;
  521. }
  522.  
  523. .posts {
  524.   margin-bottom:50px;
  525.   {block:IndexPage}position:absolute;{/block:IndexPage}
  526.  
  527. }
  528.  
  529. .post {
  530.   background-color:rgba(255, 255, 255, 0.5);
  531.   box-sizing: content-box;
  532.   {block:IndexPage}
  533.     width: {select:Post Width}px;
  534.     float: left;
  535.   {/block:IndexPage}
  536.   {block:PermalinkPage}
  537.        width: 400px;
  538.   {/block:PermalinkPage}
  539.   padding:10px;
  540.   margin: 0 auto;
  541.   box-sizing:border-box;
  542.   margin-bottom: {select:Grid Gutter}px;
  543.   {block:PermalinkPage}margin-bottom:0px;{/block:PermalinkPage}
  544.   background:{color:content background};
  545.   border-radius: 7px;
  546.   -webkit-border-radius: 7px;
  547.   -moz-border-radius: 7px;
  548. }
  549. .post:last-child {  margin-bottom:0; }
  550. .post img, .post li, .post blockquote { max-width: 100%; }
  551.  
  552.  
  553.  
  554.  
  555. /* caption */
  556.  
  557. .caption {
  558.     width:100%;
  559.     margin-top:10px;
  560.     {block:IfNotShowCaptions}{block:IndexPage}
  561.         display:none;
  562.     {/block:IndexPage}{/block:IfNotShowCaptions}
  563. }
  564. .caption.textpostcaption {
  565.     display:block;
  566. }
  567. .caption a {
  568.     text-decoration:underline;
  569. }
  570. .tumblr_parent {
  571.  
  572. }
  573. .tumblr_parent p {
  574.     margin:5px 10px 5px 0px;
  575. }
  576. .tumblr_avatar {
  577.  
  578. }
  579. a.tumblr_blog {
  580.   text-decoration:none !important;
  581. }
  582.  
  583.  
  584.  
  585. /* post types */
  586.  
  587. /*text*/
  588. .title {
  589.     font-size: calc({select:Font Size} + 3px);
  590.     margin-bottom:10px;
  591.     text-align:left;
  592.     word-wrap: break-word;
  593. }
  594.  
  595. /*link*/
  596. .title a {
  597.     text-align: center;
  598.     width: 100%;
  599.     display: inline-block;
  600.     text-decoration: underline;
  601. }
  602. .title a:hover {
  603.    
  604. }
  605.  
  606. /*quote*/
  607. .quote{
  608.     text-align:center;
  609.     font-size: calc({select:Font Size} + 4px);
  610.     font-style:italic;
  611.     padding:10px;
  612. }
  613. .source {
  614.     text-align:center;
  615. }
  616.  
  617. /*audio*/
  618. .audio {
  619.     padding:5px;
  620. }
  621. .cover {
  622.     display:inline-block;
  623.     vertical-align:middle;
  624.     position: relative;
  625.     z-index: 1;
  626.     width:64px;
  627.     height:64px;
  628.     border-radius:50%;
  629. }
  630. .cover img {
  631.     border-radius:50%;
  632. }
  633. .playbutton {
  634.     width: 30px;
  635.     height: 30px;
  636.     overflow: hidden;
  637.     position: relative;
  638.     z-index: 1000;
  639.     margin-top:6px;
  640.     margin-left:5px;
  641. }
  642. .playbox {
  643.     display:inline-block;
  644.     vertical-align:middle;
  645.     background-color: #f2f2f2;
  646.     position: absolute;
  647.     z-index: 1000;
  648.     margin-top: 12px;
  649.     margin-left: 12px;
  650.     width:40px;
  651.     height:40px;
  652.     opacity:0.8;
  653.     border-radius:50%;
  654. }
  655. .audioinfo {
  656.     border-left:2px solid rgba(0,0,0,0.05);
  657.     display: inline-block;
  658.     margin-left: 20px;
  659.     padding: 5px 10px;
  660.     vertical-align: middle;
  661.     white-space:nowrap;
  662.     overflow:hidden;
  663.     max-width:50%;
  664. }
  665. .tn {
  666.     font-weight:bold;
  667. }
  668. .al {
  669.     font-style:italic;
  670. }
  671. .ar {
  672.    
  673. }
  674.  
  675.  
  676. /*asks*/
  677. .ask {
  678.    
  679. }
  680. .question {
  681.     margin-bottom:10px;
  682.     background-color: rgba(0, 0, 0, 0.05);
  683.     padding:10px;
  684.     border-radius: 15px;
  685.     -moz-border-radius: 15px;
  686.     -webkit-border-radius: 15px;
  687. }
  688. .asker, .asker a, .asker a:hover {
  689.     margin-left:5px;
  690. }
  691. .answer {
  692.     margin-top:10px;
  693. }
  694.  
  695. /*chat*/
  696.  
  697. .chat ol {
  698.     padding:0;
  699.     list-style:none;
  700. }
  701. .line {
  702.     padding:5px 0;
  703.     border-left:2px solid rgba(0, 0, 0, 0.2);
  704.     padding-left:10px;
  705.     margin-bottom:5px;
  706. }
  707. .line:last-child {
  708.     border-bottom:0;
  709. }
  710. .label {
  711.     font-weight:bold;
  712.     display:block;
  713. }
  714.  
  715. /*video*/
  716. .tumblr_video_container {
  717.      max-height:540px!important;
  718.      /*overflow:hidden!important;*/
  719. }
  720.  
  721.  
  722.  
  723.  
  724. /***************************** post info *****************************/
  725.  
  726. .postinfo {
  727.     margin-top:15px;
  728.     font-size: calc({select:Font Size} + 2px);
  729.     text-transform:lowercase;
  730.     text-align:center;
  731.     position:relative !important;
  732. }
  733.  
  734. .postinfo a {
  735.     margin-left:5px;
  736.     margin-right:5px;
  737.     transition:0.3s ease;
  738.     color:{color:icons};
  739. }
  740. .postinfo a:first-of-type { margin-left:0; }
  741. .postinfo a:last-of-type { margin-right:0; }
  742.  
  743. {block:IfRainbow}
  744. .postinfo a:nth-of-type(1){ color: #ef7d92; }
  745. .postinfo a:nth-of-type(2){ color: #b396ed; }
  746. .postinfo a:nth-of-type(3){ color: #65db90; }
  747. {/block:IfRainbow}
  748.  
  749. .postinfo a:hover{
  750.     color:{color:accent};
  751. }
  752.  
  753. .postinfo .tags {
  754.     word-wrap: break-word;
  755.     font-size: calc({select:Font Size} - 2px);
  756.     text-transform:initial;
  757.     padding:0 20px;
  758.     margin-top: 5px;
  759.    
  760.     {block:IfNotShowTags}{block:IndexPage}
  761.         display:none;
  762.     {/block:IndexPage}{/block:IfNotShowTags}
  763. }
  764.  
  765. .postinfo .tags a {
  766.     color:{color:icons};
  767.     {block:IfRainbow}
  768.         color:{color:accent};
  769.     {/block:IfRainbow}
  770. }
  771.  
  772. .postinfo .tags a:hover {
  773.     color:{color:text};
  774.     text-decoration:underline dotted;
  775. }
  776.  
  777. .srcvia a {
  778.     color:{color:icons} !important;
  779. }
  780.  
  781.  
  782.  
  783. /* list of notes */
  784.  
  785. .pagenotes {
  786.     {block:IndexPage}display: none!important;{/block:IndexPage}
  787.     width:400px;
  788.     text-align:left;
  789.     font-size: calc({select:Font Size} - 1px);
  790. }
  791.  
  792. .pagenotes a {
  793.     cursor:help;
  794. }
  795.  
  796. .pagenotes img {
  797.     border-radius:50%;
  798.     vertical-align:middle;
  799.     margin-right:5px;
  800. }
  801.  
  802. .pagenotes ol {
  803.     list-style:none;
  804. }
  805.  
  806. .pagenotes li {
  807.     padding:1px 0px;
  808.     text-align:left;
  809.     margin:0 0 0 -20px;
  810. }
  811.  
  812. .pagenotes li.like:before, .pagenotes li.reblog:before {
  813.     padding-right:7px;
  814.     font-family: FontAwesome;
  815.     color:black;
  816.     opacity:0.8;
  817. }
  818. .pagenotes li.like:before {
  819.     content: "\f004";
  820.     font-size:8px;
  821.     padding-left:2px;
  822. }
  823. .pagenotes li.reblog:before {
  824.     content: "\f079";
  825.     font-size:10px;
  826. }
  827.  
  828. .more_notes_link_container {
  829.     text-align:left!important;
  830.     text-transform:lowercase;
  831. }
  832.  
  833. .retags, div.retags a { /* xkit */
  834.     color:gray!important;
  835.     font-size:9px!important; }
  836.     div.retags {
  837.     margin-bottom:5px;
  838.     margin-left:40px;
  839. }
  840.  
  841.  
  842.  
  843.  
  844.  
  845. /* like link */
  846.  
  847. .like-b {
  848.   position:relative;
  849.   display:inline-block;
  850.   height:1em;
  851.   line-height:1em;
  852.   overflow:hidden;
  853.   margin-bottom:-1px;
  854.   width: 17px;
  855. }
  856. .like-b .like_button iframe {
  857.    position:absolute;
  858.    top:0;
  859.    left:0;
  860.    bottom:0;
  861.    right:0;
  862.    z-index:2;
  863.    opacity:0;
  864. }
  865. .like-b .liked + .b {
  866.   /*color:#9b2e2e;  liked color */
  867. }
  868. .like-b .liked + .b:after {
  869.    content:'d';
  870. }
  871.  
  872.  
  873.  
  874.  
  875. /***************************** your css *****************************/
  876. /* paste css here */
  877.  
  878.  
  879.  
  880. {CustomCSS}</style></head><body>
  881. <!-- ---------------------------------------------------------------- -->
  882. <!-- ----------------------- H T M L - S T A R T -------------------- -->
  883. <!-- ---------------------------------------------------------------- -->
  884. <!-- pastehtmlhere -->
  885. <div id="container" style="max-width: 100vw;">
  886.  
  887. <div class="topbar"></div>
  888.  
  889.  
  890.  
  891. <!-- ---------------------------- sidebar -------------------------- -->
  892. <div class="sidebar">
  893.  
  894.    
  895.     {block:IfSidebarImage}
  896.     <img src="{image:Sidebar}">
  897.     {/block:IfSidebarImage}
  898.    
  899.     <div class="sidebar-content">
  900.         <a href="/" id="blogtitle">{Title}</a>
  901.         <div id="description">{Description}</div>
  902.     </div>
  903.    
  904.     <!-- ---------- navigation ---------- -->
  905.    
  906.     <div class="navigation block">
  907.    
  908.    
  909. {block:IfShowHomeLink}<a href="/" {block:IfHomeLinkText}title="{text:Home Link Text}"{/block:IfHomeLinkText}>
  910. <span class="th th-home-o"></span>
  911. </a>{/block:IfShowHomeLink}
  912.  
  913. {block:AskEnabled}{block:IfShowAskLink}<a href="{text:Ask Link}"
  914. {block:IfAskLinkText}title="{text:Ask Link Text}"{/block:IfAskLinkText}>
  915. <span class="th th-chat-bubble-o"></span>
  916. </a>{/block:IfShowAskLink}{/block:AskEnabled}
  917.  
  918. {block:SubmissionsEnabled}{block:IfShowSubmitLink}
  919. <a href="/submit" {block:IfSubmitLinkText}title="{text:Submit Link Text}"{/block:IfSubmitLinkText}>
  920. <span class="th th-upload-o"></span>
  921. </a>{/block:IfShowSubmitLink}{/block:SubmissionsEnabled}
  922.  
  923. {block:IfShowLink1}
  924. <a href="{text:Link1 URL}" {block:IfLink1Title}title="{text:Link1 Title}"{/block:IfLink1Title}>
  925. <span class="th th-{select:Link 1 Icon}"></span>
  926. </a>{/block:IfShowLink1}
  927.  
  928. {block:IfShowLink2}
  929. <a href="{text:Link2 URL}" {block:IfLink2Title}title="{text:Link2 Title}"{/block:IfLink2Title}>
  930. <span class="th th-{select:Link 2 Icon}"></span>
  931. </a>{/block:IfShowLink2}
  932.  
  933. {block:IfShowLink3}
  934. <a href="{text:Link3 URL}" {block:IfLink3Title}title="{text:Link3 Title}"{/block:IfLink3Title}>
  935. <span class="th th-{select:Link 3 Icon}"></span>
  936. </a>{/block:IfShowLink3}
  937.  
  938. {block:IfShowLink4}
  939. <a href="{text:Link4 URL}" {block:IfLink4Title}title="{text:Link4 Title}"{/block:IfLink4Title}>
  940. <span class="th th-{select:Link 4 Icon}"></span>
  941. </a>{/block:IfShowLink4}
  942.  
  943. {block:IfShowLink5}
  944. <a href="{text:Link5 URL}" {block:IfLink5Title}title="{text:Link5 Title}"{/block:IfLink5Title}>
  945. <span class="th th-{select:Link 5 Icon}"></span>
  946. </a>{/block:IfShowLink5}
  947.  
  948. {block:IfShowArchiveLink}<a href="/archive" {block:IfArchiveLinkText}title="{text:Archive Link Text}"{/block:IfArchiveLinkText}>
  949. <span class="th th-calendar-1-o"></span>
  950. </a>{/block:IfShowArchiveLink}
  951.  
  952. {block:Pagination}
  953. {block:PreviousPage}
  954. <a href="{PreviousPage}" title="previous page">
  955. <span class="th th-chevron-left"></span></a>
  956. {/block:PreviousPage}
  957.  
  958. {block:NextPage}
  959. <a href="{NextPage}" title="next page">
  960. <span class="th th-chevron-right"></span></a>
  961. {/block:NextPage}
  962. {/block:Pagination}
  963.  
  964. <div class="rainbow">
  965.     <div class="bow"></div>
  966.     <div class="bow"></div>
  967.     <div class="bow"></div>
  968.     <div class="bow"></div>
  969.     <div class="bow"></div>
  970.     <div class="bow"></div>
  971. </div>
  972.  
  973.    
  974.     </div> <!-- /navigation -->
  975.    
  976.    
  977.  
  978.  
  979. </div> <!-- /sidebar -->
  980. <!-- ---------------------------- posts -------------------------- -->
  981. <div class="wrapper">
  982. <div class="posts">
  983. {block:Posts}
  984. <div class="post" id="{PostID}">
  985.  
  986. <!-- source/via fix -->
  987. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  988.  
  989.  
  990.  
  991. <!-- ---------- post types ---------- -->
  992.  
  993. {block:Quote}
  994.     <div class="quote">{Quote}</div>
  995.     {block:Source}
  996.     <div class="source">{Source}</div>
  997.     {/block:Source}
  998. {/block:Quote}
  999.  
  1000. {block:Text}
  1001.     {block:Title}<div class="title">{Title}</div>{/block:Title}
  1002.     <div class="caption textpostcaption">{Body}</div>
  1003. {/block:Text}
  1004.  
  1005. {block:Link}
  1006.     <div class="title"><a href="{URL}">{Name}</a></div>
  1007.     {block:Description}
  1008.     <div class="caption">{Description}</div>{/block:Description}
  1009. {/block:Link}
  1010.  
  1011. {block:Chat}
  1012.     {block:Title}<div class="title">{Title}</div>{/block:Title}
  1013.     <div class="chat">
  1014.     <ol>{block:Lines}
  1015.     <li class="line {Alt}">
  1016.         {block:Label}<span class="label">{Label}</span>{/block:Label}
  1017.         {Line}
  1018.     </li>
  1019.     {/block:Lines}</ol>
  1020.     </div>
  1021. {/block:Chat}
  1022.  
  1023. {block:Photo}
  1024.     <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1025. {/block:Photo}
  1026.  
  1027. {block:Photoset}
  1028.     <!-- pxu code -->
  1029.     <div class="photo-slideshow" id="photoset_{PostID}"
  1030.    data-layout="{PhotosetLayout}">{block:Photos}
  1031.     <div class="photo-data">
  1032.     <div class="pxu-photo">
  1033.     <img src="{PhotoURL-500}"
  1034.    width="{PhotoWidth-500}" height="{PhotoHeight-500}"
  1035.    data-highres="{PhotoURL-HighRes}"
  1036.    data-width="{PhotoWidth-HighRes}"
  1037.    data-height="{PhotoHeight-HighRes}">
  1038.     </div><a class="tumblr-box" rel="post-{PostID}"
  1039.    href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1040. {/block:Photoset}
  1041.  
  1042. {block:Video}
  1043.     <div class="video">{Video-500}</div>
  1044. {/block:Video}
  1045.  
  1046. {block:Audio}
  1047.     <div class="audio">
  1048.     <div class="playbox"><div class="playbutton">
  1049.     {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  1050.     </div></div>
  1051.     <div class="cover">
  1052.         {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  1053.     </div>
  1054.     <div class="audioinfo">
  1055.     <div class="tn">{block:TrackName}{TrackName}{/block:TrackName}</div>
  1056.     <div class="al">{block:Album}{Album}{/block:Album}</div>
  1057.     <div class="ar">{block:Artist}{Artist}{/block:Artist}</div>
  1058.     </div></div>
  1059. {/block:Audio}
  1060.  
  1061. {block:Answer}
  1062.     <div class="ask">
  1063.         <div class="asker">{Asker}</div>
  1064.         <div class="question">{Question}</div>
  1065.     </div>
  1066.     <div class="answer">{Answer}</div>
  1067. {/block:Answer}
  1068.  
  1069.  
  1070.  
  1071.  
  1072. <!-- ---------- caption ---------- -->
  1073.  
  1074. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1075.  
  1076.  
  1077.  
  1078. <!-- ---------- post information ---------- -->
  1079.  
  1080. {block:Date}
  1081. <div class="postinfo">
  1082.  
  1083. <!-- date -->
  1084. <a href="{Permalink}" {block:NoteCount}title="{NoteCount} notes"{/block:NoteCount}><span class="th th-blossom-o"></span></a>
  1085.  
  1086. <!-- reblog/like links -->
  1087. <a class="like-b" href="#" title="like">{LikeButton}<span class="b">
  1088. <span class="th th-heart-1-o"></span></span></a>
  1089.  
  1090. <a href="{ReblogURL}" target="_blank" title="reblog">
  1091. <span class="th th-reblog"></span></a>
  1092.  
  1093. <!-- src/via -->
  1094. <div class="srcvia">
  1095. {block:PermalinkPage}
  1096. {block:RebloggedFrom}
  1097. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1098. {block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">src</a>{/block:ContentSource}
  1099. {/block:RebloggedFrom}
  1100. {/block:PermalinkPage}
  1101. </div>
  1102.  
  1103. <!-- ---------- tags ---------- -->
  1104.  
  1105. {block:HasTags}<div class="tags">
  1106.     {block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}
  1107. </div>{/block:HasTags}
  1108.  
  1109.  
  1110. </div>
  1111. {/block:Date}
  1112.  
  1113.  
  1114.  
  1115. </div> <!-- /post -->
  1116.  
  1117.  
  1118. <!-- ---------- notes ---------- -->
  1119. {block:PostNotes}
  1120. <div class="pagenotes">{PostNotes}</div>
  1121. {/block:PostNotes}
  1122.  
  1123.  
  1124.  
  1125.  
  1126. {/block:Posts}
  1127. </div> <!-- /posts -->
  1128.  
  1129.  
  1130.  
  1131. <!-- ---------------------------- etc -------------------------- -->
  1132.  
  1133. </div> <!-- /wrapper -->
  1134. </div> <!-- /container -->
  1135.  
  1136.  
  1137. <!-- ---------- credit ---------- -->
  1138.  
  1139. <link href="https://static.tumblr.com/tpbx7ye/yiLpc9kpz/cloudythms.css" rel="stylesheet">
  1140. <style>
  1141. #credit { font-size:10px; width: 15px; height: auto; padding: 4px; }
  1142. #credit a, #credit a:before { color:{color:accent}; top:inherit;  } #credit a:hover, #credit :hover:before { color:{color:text} !important;}
  1143. </style>
  1144. <!-- credit link. you may move but not remove. -->
  1145. <div id="credit"><a href="https://cloudythms.tumblr.com/">
  1146. <i class="far fa-copyright"></i></a></div>
  1147. <!-- theme by cloudythms.tumblr.com -->
  1148.  
  1149.  
  1150.  
  1151.  
  1152. <!-- --------------------------- SCRIPTS --------------------------- -->
  1153.  
  1154. <!-- jQuery -->
  1155. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1156.  
  1157. <!-- Fonts -->
  1158. <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Lora|Open+Sans|Roboto|Roboto+Mono|Roboto+Slab|Karla&amp;subset=latin-ext" rel="stylesheet">
  1159. <link href="https://fonts.googleapis.com/css?family=Bad+Script|Calligraffitti|Caveat|Cedarville+Cursive|Courgette|Dancing+Script|Dawning+of+a+New+Day|Euphoria+Script|Homemade+Apple|Just+Me+Again+Down+Here|Kaushan+Script|La+Belle+Aurore|Meddon|Nanum+Pen+Script|Nothing+You+Could+Do|Pacifico|Reenie+Beanie|Sacramento|Satisfy|Zeyada&amp;subset=latin-ext" rel="stylesheet">
  1160.  
  1161. <!-- Icon Fonts -->
  1162. <!-- FontAwesome --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  1163. <!-- Ionicons --> <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
  1164. <!-- Linearicons --> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  1165. <!-- Honeybee Icon Font by @Themehive --> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  1166.  
  1167. <!-- Smooth Scroll -->
  1168. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  1169.  
  1170. <!-- Video Resizer -->
  1171. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1172.  
  1173.  
  1174. <!-- Tooltips -->
  1175. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1176. <script>
  1177. (function($){
  1178. $(document).ready(function(){
  1179. $("a[title]").style_my_tooltips({
  1180. tip_follows_cursor:true,
  1181. tip_delay_time:30, /* put a higher number for more delay */
  1182. tip_fade_speed:300, /* put a higher number for a slower fade */
  1183. attribute:"title" /* recommended: delay:10-100 fade:200-600 */
  1184. });
  1185. });
  1186. })(jQuery);
  1187. </script>
  1188. <style>
  1189. .tooltip{
  1190. display: inline;
  1191. position: relative;
  1192. }
  1193. #s-m-t-tooltip {
  1194.     max-width:300px;
  1195.     border-radius: 0px;
  1196.     padding:3px 5px 4px 5px;
  1197.     margin:20px 7px -2px 20px;
  1198.     background-color:{color:background};
  1199.     border:1px solid {color:accent};
  1200.     border-radius: 5px 5px 5px 5px;
  1201.     font-size:11px;
  1202.     letter-spacing:0.5px;
  1203.     color:#000;
  1204.     z-index:9999999999999999;
  1205.     text-transform:lowercase;
  1206. }
  1207. </style>
  1208.  
  1209.  
  1210. <!-- un-nest tumblr captions -->
  1211. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1212. <script> $(function(){  $('.post').unnest({
  1213.     yourCaption: ".caption",
  1214.     wrapName: ".tumblr_parent",
  1215.     newCaptionUsername: false,
  1216.     originalPostCaptionUsername: false,
  1217.     tumblrAvatars: false,
  1218.     tumblrAvatarClass: ".tumblr_avatar",
  1219.     usernameColon: false
  1220.     // .tumblr_blog
  1221.   }); }); </script>
  1222. <style>
  1223.   blockquote.tumblr_parent { border:0; margin:0; }
  1224. </style>
  1225.  
  1226.  
  1227. <!-- pixel union photosets -->
  1228. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1229. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1230. <script>
  1231. $(document).ready(function(){
  1232.    $('.photo-slideshow').pxuPhotoset({
  1233.        lightbox: true,
  1234.        rounded: false,
  1235.        gutter: '5px',
  1236.        borderRadius: '0px',
  1237.        photoset: '.photo-slideshow',
  1238.        photoWrap: '.photo-data',
  1239.        photo: '.pxu-photo'
  1240.    });
  1241. });
  1242. </script>
  1243.  
  1244.  
  1245. <!-- tumblr controls -->
  1246. <style>
  1247.  
  1248. iframe.tmblr-iframe {
  1249.     z-index:9999999999999999999999!important;
  1250.     top:0!important;
  1251.     right:0!important;
  1252.     opacity:0.1;
  1253.         filter:invert(1) contrast(150%);
  1254.         -webkit-filter:invert(1) contrast(150%);
  1255.         -o-filter:invert(1) contrast(150%);
  1256.         -moz-filter:invert(1) contrast(150%);
  1257.         -ms-filter:invert(1) contrast(150%);
  1258.     transform:scale(0.65);
  1259.     transform-origin:100% 0;
  1260.     -webkit-transform:scale(0.65);
  1261.     -webkit-transform-origin:100% 0;
  1262.     -o-transform:scale(0.65);
  1263.     -o-transform-origin:100% 0;
  1264.     -moz-transform:scale(0.65);
  1265.     -moz-transform-origin:100% 0;
  1266.     -ms-transform:scale(0.65);
  1267.     -ms-transform-origin:100% 0;
  1268.     transition:0.5s ease;
  1269. }
  1270.  
  1271. iframe.tmblr-iframe:hover {
  1272.     opacity:0.4 !important;
  1273. }
  1274.    
  1275. {block:IfNotShowTumblrControls}
  1276. iframe.tmblr-iframe, iframe.tmblr-iframe:hover {
  1277.     display:none;
  1278. }
  1279. {/block:IfNotShowTumblrControls}
  1280.  
  1281. </style>
  1282.  
  1283.  
  1284.  
  1285. <!-- soundcloud player -->
  1286. <script>
  1287. // minimal soundcloud player © shythemes.tumblr
  1288. $(document).ready(function(){
  1289.    var color = '#efefef'; // color of play button (hex)
  1290.    $('.soundcloud_audio_player').each(function(){
  1291.        $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  1292.    });
  1293. });
  1294. </script>
  1295.  
  1296.  
  1297. <!-- masonry -->
  1298. {block:IndexPage}
  1299. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script><script>
  1300.   $(function() {
  1301.     $('.posts').masonry({
  1302.       itemSelector: '.post',
  1303.       columnWidth: {select:Post Width},
  1304.       gutter: {select:Grid Gutter}
  1305. });});</script>
  1306. {/block:IndexPage}
  1307.  
  1308.  
  1309. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment