API tools faq
paste
Advertisement
userbru

theme thirty-six.

userbru
Jul 13th, 2024 (edited)
1,301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4.  
  5.  
  6. THEME BY BRU
  7.  
  8.  
  9. credits:
  10. google fonts,
  11. cappuccicons,
  12. aidensthemes
  13. yukoki,
  14. maziekeen,
  15. shythemes
  16.  
  17.  
  18.  
  19.  
  20. -->
  21. <html>
  22. <head>
  23. <title>{Title}</title>
  24. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  28. {block:Options}
  29.  
  30.  
  31. <meta name="color:background" content="#f6f6f6"/>
  32. <meta name="color:posts" content="#ffffff"/>
  33. <meta name="color:text" content="#11261c"/>
  34. <meta name="color:links" content="#56bc8a" />
  35. <meta name="color:tags" content="#56bc8a" />
  36. <meta name="color:user bg" content="#9ad7b9"/>
  37. <meta name="color:user text" content="#0f291c"/>
  38. <meta name="color:user hover" content="#bbe4d0"/>
  39. <meta name="color:search background" content="#fff" />
  40. <meta name="color:search text" content="#000"/>
  41. <meta name="color:borders" content="#ddd"/>
  42. <meta name="color:side img shadow" content="#459684"/>
  43. <meta name="color:sticky note bg" content="#fff"/>
  44.  
  45.  
  46. <meta name="text:border width" content="1px"/>
  47. <meta name="text:border radius" content="4px"/>
  48. <meta name="text:font size" content="16px" />
  49. <meta name="text:desktop description" content="Write your description here."/>
  50.  
  51. <meta name="text:name" content="write your name"/>
  52. <meta name="text:tracked tag" content="write your tracked tag"/>
  53. <meta name="text:age" content="write your age"/>
  54. <meta name="text:pronouns" content="write your pronouns"/>
  55. <meta name="text:zodiac" content="write your zodiac"/>
  56. <meta name="text:country" content="write your country"/>
  57. <meta name="text:sexuality" content="write your sexuality"/>
  58.  
  59. <meta name="text:watching" content="write here what you're watching."/>
  60. <meta name="text:listening" content="write here what you're listening."/>
  61. <meta name="text:reading" content="write here what you're reading."/>
  62. <meta name="text:playing" content="write here what you're playing."/>
  63.  
  64.  
  65.  
  66. <meta name="image:background" content=""/>
  67. <meta name="image:sidebar" content=""/>
  68. <meta name="image:icon" content=""/>
  69.  
  70.  
  71. <meta name="color:night mode background" content="#0a0a0a"/>
  72. <meta name="color:night mode text" content="#fff"/>
  73. <meta name="color:night mode posts" content="#050505"/>
  74. <meta name="color:night mode accent" content="#fff" />
  75. <meta name="color:night mode borders" content="#fff" />
  76. <meta name="color:night mode search" content="#fff" />
  77.  
  78.  
  79. <meta name="if:Remove background image in night mode" content=""/>
  80. <meta name="if:full background" content=""/>
  81. <meta name="if:sidebar image" content=""/>
  82.  
  83. <meta name="select:Font" content="Helvetica" title="Helvetica" />
  84. <meta name="select:Font" content="Roboto" title="Roboto" />
  85. <meta name="select:Font" content="Favorit" title="Favorit" />
  86. <meta name="select:Font" content="Calluna" title="Calluna" />
  87. <meta name="select:Font" content="Fairwater" title="Fairwater" />
  88. <meta name="select:Font" content="Source Code Pro" title="Source Code Pro" />
  89. <meta name="select:Font" content="Nunito" title="Nunito"/>
  90. {/block:Options}
  91.  
  92. {NewPostStyles}
  93. <script>
  94. const themed = localStorage.getItem('night-mode');
  95. if (themed === "enabled") {
  96. sessionStorage.setItem('night-mode', 'enabled');
  97. document.documentElement.classList.add('night-mode-theme');
  98. }
  99. </script>
  100. <script src="https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
  101.  
  102. <!--- fonts ---->
  103. <link rel="preconnect" href="https://fonts.googleapis.com">
  104. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  105. <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
  106.  
  107. <script src="//pull.cappuccicons.com/cpf.js"></script>
  108.  
  109.  
  110. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  111. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  112. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  113. <script>
  114. (function($){
  115. $(document).ready(function(){
  116. $("[title]").style_my_tooltips();
  117. });
  118. })(jQuery);
  119. </script>
  120.  
  121.  
  122.  
  123.  
  124.  
  125. <!--yukoki sticky note scripts-->
  126. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  127. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  128. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  129. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  130. <script>
  131. $(function() {
  132. $( "#stickynote1" ).draggable({ handle: "div.dragstickynote1" });
  133. $(".closestickynote1").click(function(){$("#stickynote1").fadeOut();});
  134. $( "#stickynote2" ).draggable({ handle: "div.dragstickynote2" });
  135. $(".closestickynote2").click(function(){$("#stickynote2").fadeOut();});
  136. });
  137. </script>
  138. <!--yukoki sticky note scripts end-->
  139.  
  140.  
  141.  
  142. <style>
  143. @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
  144.  
  145. * {
  146. box-sizing: border-box;
  147. }
  148. :root {
  149. --background-image: url({image:background});
  150. --background: {color:background};
  151. --accent: {AccentColor};
  152. --text: {color:text};
  153. --borders: {color:borders};
  154. --spacing: 1rem;
  155. --border-width: {text:border width};
  156. --border-radius: {text:border radius};
  157. --posts: {color:posts};
  158. --tags: {color:tags};
  159. --links: {color:links};
  160. --sidebar-links: {color:sidebar links};
  161. --search-background: {color:search background};
  162. --search-text: {color:search text};
  163. --headerimage: url({HeaderImage});
  164. --invert: invert(0);
  165. --night-mode-accent: {color:night mode accent};
  166.  
  167. }
  168.  
  169. .night-mode-theme {
  170. --background: {color:night mode background};!important;
  171. --accent: var(--night-mode-accent);
  172. {block:ifRemoveBackgroundImageInNightMode}
  173. --background-image: url('');
  174. {/block:ifRemoveBackgroundImageInNightMode}
  175. --text: {color:night mode text};
  176. --posts: {color:night mode posts};
  177. --invert: invert(1);
  178. --links: var(--night-mode-accent);
  179. --tags: var(--night-mode-accent);
  180. --search-background:{color:night mode search};
  181. --borders:{color:night mode borders};
  182. }
  183.  
  184. body {
  185. font-family: {select:Font}, sans-serif;
  186. font-size: clamp(.92rem, {text:font size}, 20px);
  187. margin: 0;
  188. height: 100vh;
  189. color: var(--text);
  190. background: var(--background) var(--background-image) center center fixed;
  191. {block:iffullbackground}
  192. background-size: cover;
  193. {/block:iffullbackground}}
  194.  
  195. a {
  196. color: {color:links};
  197. }
  198.  
  199. a:hover {
  200. color:{color:user hover};
  201. transition: 0.3s;
  202. text-decoration:none!important;
  203. }
  204.  
  205. /*GENERAL: SELECTION */
  206.  
  207. ::selection {
  208. background: {color:links};
  209. color: {color:text};
  210. }
  211.  
  212. ::-moz-selection {
  213. background: {color:links};
  214. color: {color:text};
  215. }
  216.  
  217.  
  218.  
  219. /* SCROLLBAR */
  220.  
  221. ::-webkit-scrollbar {
  222. width:0px;
  223. height:0px;
  224. }
  225. ::-webkit-scrollbar {
  226. background-color:rgb(255,255,255); /* background color */
  227. }
  228. ::-webkit-scrollbar-track {
  229. border:8px solid rgb(255,255,255); /* background color */
  230. background-color:rgb(230,230,230); /* light border color */
  231. }
  232. ::-webkit-scrollbar-thumb {
  233. border:8px solid rgb(255,255,255); /* background color */
  234. background-color:rgb(144,144,144); /* dark border color */
  235. min-height:0px;
  236. min-width:0px;
  237. }
  238.  
  239.  
  240. /* --- TOOLTIPS --*/
  241.  
  242. #s-m-t-tooltip {
  243. z-index: 9999;
  244. background: #fff;
  245. font-size: 14px;
  246. padding:10px;
  247. font-family:'Nunito', sans-serif;
  248. line-height: 13px;
  249. letter-spacing: 1px;
  250. border-radius:5%;
  251. background-color:{color:user hover};
  252. color:{color:user text};
  253. moz-border-radius-bottomright: 5px;
  254. border-bottom-right-radius: 5px;
  255. -moz-border-radius-topleft: 5px;
  256. border-top-left-radius: 5px;
  257. -moz-border-radius-bottomleft: 5px;
  258. border-bottom-left-radius: 5px;
  259. -moz-border-radius-topright: 5px;
  260. border-top-right-radius: 5px;
  261. -o-transition: all 0.3s ease-out;
  262. -webkit-transition: all 0.3s ease-out;
  263. -moz-transition: all 0.3s ease-out;
  264. text-transform: uppercase;
  265. font-weight:bold;
  266. max-width: 150px;
  267. word-wrap: break-word;
  268. display: block;
  269. margin: 24px 14px 7px 12px;
  270. }
  271.  
  272.  
  273.  
  274. /*---- sticky notes -------*/
  275. #stickynote1 {
  276. width: 300px;
  277. margin-bottom: 20px;
  278. position: fixed;
  279. z-index: 100000000000;
  280. top: 30px; /** position from top of screen **/
  281. left: 50px; /** position from left of screen **/
  282. }
  283.  
  284. #stickynote2 {
  285. width: 300px;
  286. margin-bottom: 20px;
  287. position: fixed;
  288. z-index: 100000000000;
  289. top: 240px; /** position from top of screen **/
  290. left: 40px; /** position from left of screen **/
  291. }
  292.  
  293. #stickynote1, #stickynote2 {
  294. border-radius:10px 10px 10px 10px;
  295. color:{color:user text};
  296. box-shadow: 2px 2px {color:side img shadow};
  297. width: 300px; /** width of your sticky note **/
  298. background-color: {color:sticky note bg}; /** background colour **/
  299. } .dragstickynote1, .dragstickynote2 {
  300. font-family: 'Nunito', sans-serif;
  301. font-size: 12px;
  302. font-weight:bold;
  303. border-bottom:1px solid {color:borders};
  304. border-radius:10px 10px 0 0;
  305. color:{color:user text};
  306. text-transform: uppercase;
  307. letter-spacing: 1px;
  308. padding: 10px;
  309. background-color: {color:user bg};
  310. } .closestickynote1, .closestickynote2 {
  311. cursor: pointer;
  312. margin-left: 268px;
  313. width: 32px;
  314. height: 34px;
  315. line-height: 32px;
  316. font-family: arial;
  317. font-size: 10px;
  318. position: absolute;
  319. text-align: center;
  320. float: right;
  321. margin-top:1px;
  322. }
  323. .stickynotecontent {
  324. padding: 10px;
  325. font-family: 'Nunito', sans-serif;
  326. font-size: 13px!important;
  327. margin-left:10px;
  328.  
  329. }
  330. .stickynotecontent b,strong {
  331. color: {color:user text};
  332. font-weight:600;
  333. font-style:bold;
  334. }
  335. .stickynotecontent i,em {
  336. color: #666666; /** colour of italic text **/
  337. }
  338.  
  339. .stickynotecontent a {
  340. text-decoration: underline;
  341. color: #666666; /** colour of linked text **/
  342. }
  343. .stickynotecontent a:hover {
  344. color: #aaaaaa; /** colour of hovered linked text **/
  345. }
  346.  
  347. #stickynote1, #stickynote2 li {
  348. list-style-type: circle;
  349. margin-bottom:20px;
  350. }
  351.  
  352. /*---- sticky notes -------*/
  353.  
  354.  
  355.  
  356. /*---------- masonry code ------*/
  357.  
  358. .masonry-navigation {
  359. width: 100%;
  360. border-bottom: 1px solid #e2e2e2;
  361. margin-bottom:15px;
  362. }
  363.  
  364. .masonry-navigation:last-child {
  365. border:none;
  366. }
  367.  
  368. .masonry-navigation-item.one-column {
  369. width: 100%;
  370. padding: 0 5px;
  371. margin-bottom: 10px;
  372. }
  373.  
  374. .masonry-navigation-item.one-column ul {
  375. display: flex;
  376. flex-wrap: wrap;
  377. margin: 0;
  378. padding: 0;
  379. }
  380.  
  381. /* if you have any problem with one colum lists (ul li) you edit here */
  382. .masonry-navigation-item.one-column ul li {
  383. margin: 4px 15px;
  384. padding: 0;
  385. }
  386.  
  387. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  388. .masonry-navigation-item.two-columns {
  389. width: 240px;
  390. padding: 0 5px;
  391. margin-bottom: 10px;
  392. }
  393.  
  394. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  395. .masonry-navigation-item.three-columns {
  396. width: 160px;
  397. padding: 0 5px;
  398. margin-bottom: 10px;
  399. }
  400.  
  401. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  402. .masonry-navigation-item.scroll {
  403. height:215px;
  404. overflow-y: scroll;
  405. }
  406. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  407.  
  408.  
  409.  
  410. article a {
  411. text-decoration: none;
  412. }
  413.  
  414. article a:hover {
  415. text-decoration: underline;
  416. }
  417.  
  418. article iframe, .tumblr_video_container {
  419. max-width: 100%;
  420. }
  421.  
  422. .blog-title {
  423. font-family: 'Source Code Pro', sans-serif;
  424. font-size:18px;
  425. font-weight:bold;
  426. letter-spacing:-1px;
  427. text-transform:normal;
  428. text-shadow: 0.5px 0.5px;
  429. }
  430.  
  431. main, .pagination {
  432. display: flex;
  433. flex-wrap: wrap;
  434. align-items: flex-start;
  435. justify-content: space-around;
  436. }
  437.  
  438. main {
  439. max-width:1100px;
  440. margin:auto;
  441. }
  442.  
  443. article {
  444. box-shadow: 5px 5px {color:side img shadow};
  445. border-radius:20px 20px 20px 20px;
  446. }
  447.  
  448. article, .pagination {
  449. width: 100%;
  450. position:relative;
  451. max-width: 540px;
  452. margin: calc(var(--spacing) * 4) auto;
  453. border: var(--border-width) solid var(--borders);
  454. border-radius: var(--border-radius);
  455. background:var(--posts);
  456. }
  457. aside .pagination {
  458. margin: var(--spacing) auto auto auto;
  459. }
  460.  
  461. article img {
  462. max-width: 100%;
  463. }
  464.  
  465. .link-container {
  466. padding: var(--spacing);
  467. margin:var(--spacing);
  468. border:var(--border-width) solid var(--borders);
  469. border-radius: var(--border-radius);
  470. }
  471.  
  472. .caption:empty, p:empty {
  473. display:none;
  474. }
  475.  
  476. .reblog-header a {
  477. display: flex;
  478. align-items:center;
  479. }
  480.  
  481.  
  482. .reblog-header img {
  483. padding-right: .4rem;
  484. max-height: 1.4rem;
  485. }
  486. .contained :is(header, footer, main) {
  487. width: 100%;
  488. max-width: 1000px;
  489. margin: 1rem auto;
  490. background: var(--background);
  491. border: var(--border-width) solid var(--borders);
  492. }
  493.  
  494. .contained header {
  495. margin-bottom: 0;
  496. padding: var(--spacing);
  497. }
  498. .contained main {
  499. height: 70vh;
  500. overflow: auto;
  501.  
  502. }
  503.  
  504. .contained article, .contained .pagination {
  505. max-width: 500px;
  506. }
  507.  
  508. .grid main {
  509. max-width: 98%;
  510. }
  511.  
  512. .grid section {
  513. column-count: 2;
  514. break-inside: avoid;
  515. grid-gap: calc(var(--spacing) * 2);
  516. margin-bottom:var(--spacing);
  517. }
  518.  
  519. .grid article {
  520. display: inline-block;
  521. max-width: calc(100% - var(--spacing));
  522. margin: var(--spacing) 0;
  523. }
  524.  
  525. .original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
  526. padding: var(--spacing);
  527. }
  528.  
  529. .reblog-header a {
  530. background:{color:user bg};
  531. color:{color:user text};
  532. width:auto;
  533. padding:10px;
  534. border-radius:10px 10px 10px 10px;
  535. font-weight:bold;
  536. }
  537.  
  538. .reblog-header a:hover {
  539. color:{color:user hover};
  540. }
  541.  
  542. .reblog-content p, .reblog-content h2, .reblog-content h1 {
  543. margin-left: var(--spacing);
  544. margin-right: var(--spacing);
  545. }
  546.  
  547. .quote-container, .replies, .question {
  548. border: var(--border-width) solid var(--borders);
  549. margin: var(--spacing);
  550. }
  551.  
  552. .description, aside h2 {
  553. padding: calc(var(--spacing) /2) 0;
  554. margin: 0;
  555. }
  556. #search-form input {
  557. padding: calc(var(--spacing) / 2);
  558. width:100%;
  559. background:var(--search-background);
  560. margin: calc(var(--spacing) /2) 0 0 0;
  561. border:var(--border-width) solid var(--borders);
  562. border-radius:var(--border-radius);
  563. color:var(--search-text);
  564. }
  565. ::placeholder {
  566. text-transform:lowercase;
  567. color:var(--search-text);
  568. }
  569.  
  570.  
  571. .post-info, .like-and-reblog, .contained {
  572. display: flex;
  573. flex-wrap: wrap;
  574. align-items: center;
  575. justify-content: space-between;
  576. }
  577.  
  578. .like-and-reblog a {
  579. color:{color:user text}!important;
  580. }
  581.  
  582.  
  583. .post-info {
  584. background:{color:user bg};
  585. color:{color:user text};
  586. border-radius:0 0 10px 10px;
  587. }
  588.  
  589. .post-info a {
  590. color:{color:user text};
  591. justify-content:space-between;
  592. padding:10px;
  593. }
  594.  
  595. .post-info a:hover {
  596. color:{color:user hover};
  597. transition: 0.3s;
  598. background:{color:background};
  599. padding:10px;
  600. border-radius:10px 10px 10px 10px;
  601. justify-content:space-between;
  602. }
  603.  
  604. .pinned {
  605. font-weight:bold;
  606. color:var(--accent);
  607. }
  608.  
  609. .pinned {
  610. font-weight:bold;
  611. text-transform:uppercase;
  612. font-family:'Source Code Pro';
  613. font-size:10px;
  614. letter-spacing:-1px;
  615. color:{color:user text};
  616. border:1px solid {color:borders};
  617. background:{color:user bg};
  618. border-radius:10px 10px 0 0;
  619. }
  620. .pinned-default {
  621. padding:var(--spacing);
  622. }
  623.  
  624. .like-and-reblog .reblog_button, .like-and-reblog .like_button:not(.liked) {
  625. filter: var(--invert);
  626. }
  627.  
  628.  
  629. aside {
  630. width: calc(30% - calc(var(--spacing) * 2));
  631. height:100vh;
  632. position: sticky;
  633. top: 0;
  634. }
  635.  
  636. .sidebar-container {
  637. background: var(--posts);
  638. margin: calc(var(--spacing) * 4) auto 0 auto;
  639. border: var(--border-width) solid var(--borders);
  640. padding:var(--spacing);
  641. max-width: 300px;
  642. border-radius: var(--border-radius);
  643. }
  644. .sidebar-style-dash {
  645. padding:0;
  646. text-align:center;
  647. }
  648.  
  649. .sidebar-style-dash .pagination {
  650. border:0 solid transparent;
  651. }
  652. .sidebar-style-dash :is(h2, div){
  653. padding:var(--spacing);
  654. }
  655. .sidebar-style-dash h2 + div, .sidebar-style-dash div + div {
  656. padding-top:0;
  657. }
  658.  
  659. .sidebar-style-bubble {
  660. padding: 0;
  661. border: 0;
  662. background:transparent;
  663. }
  664.  
  665.  
  666. .user-sidebar a {
  667. margin-left:5px;
  668. font-family: "Nunito", sans-serif;
  669. margin-bottom:50px;
  670. padding:10px;
  671. border-radius:80px 80px 80px 80px;
  672. text-decoration:none;
  673. font-size:16px;
  674. color:{color:user text};
  675. background:{color:user bg};
  676. font-size:16px;
  677. text-transform:uppercase;
  678. font-weight:bold;
  679. letter-spacing:-1px;
  680. box-shadow: 2px 2px {color:user hover};
  681. }
  682.  
  683.  
  684.  
  685.  
  686. .user-sidebar a:hover {
  687. font-family: "Nunito", sans-serif;
  688. margin-bottom:50px;
  689. padding:10px;
  690. border-radius:80px 80px 80px 80px;
  691. text-decoration:none;
  692. font-size:16px;
  693. color:{color:user text};
  694. background:{color:user hover};
  695. font-size:16px;
  696. text-transform:uppercase;
  697. font-weight:bold;
  698. letter-spacing:-1px;
  699. transition: 0.3s;
  700. box-shadow: 0 2px 4px 0 {color:user hover};
  701. }
  702.  
  703.  
  704. .avatar-user {
  705. background:{color:user bg};
  706. padding:10px;
  707. border-radius:10px 10px 0px 0px;
  708. width:100%;
  709. margin-top:30px;
  710. margin-bottom:-20px;
  711. }
  712.  
  713.  
  714. .bubble {
  715. display:flex;
  716. flex-wrap:wrap;
  717. align-items:center;
  718. width:320px;
  719.  
  720. }
  721.  
  722. .bubble-desc {
  723. border:var(--border-width) solid var(--borders);
  724. padding: var(--spacing);
  725. width:320px!important;
  726. background:var(--posts);
  727. border-radius:0 0 10px 10px;
  728. border-top-left-radius:0;
  729. margin:var(--spacing) 0;
  730. text-align:center;
  731. box-shadow: 0 1px 1px 0 {color:user hover};
  732. }
  733.  
  734.  
  735.  
  736.  
  737. .sidebar-style-bubble img {
  738. width:48px;
  739. border-radius:50%;
  740. margin-right:.4rem;
  741. }
  742.  
  743. {block:ShowHeaderImage}
  744. {block:ShowAvatar}
  745. .header-image + * {
  746. margin-top:24px;
  747. }
  748. {/block:ShowAvatar}
  749. {/block:ShowHeaderImage}
  750.  
  751.  
  752. section {
  753. width: 70%;
  754. }
  755.  
  756. .contained section {
  757. width:60%;
  758. }
  759.  
  760.  
  761. .reblog_button {
  762. margin-right: .6rem;
  763. }
  764. .like_button {
  765. height:20px;
  766. }
  767.  
  768. .pages-container, .nav-container {
  769. margin: calc(var(--spacing) /4) 0;
  770. }
  771. .pages-container a, .nav-container a, .pagination a, .tags a {
  772. display: inline-block;
  773. margin-right: .4rem;
  774. text-decoration:none;
  775. }
  776.  
  777.  
  778.  
  779. .nav-container {
  780. width:400px!important;
  781. text-align:center;
  782.  
  783. }
  784.  
  785. .nav-container a {
  786. text-align:center;
  787. font-size:10px;
  788. text-transform:lowercase;
  789. color:{color:user text};
  790. background:{color:user bg};
  791. justify-content:space-between;
  792. padding:7px;
  793. border-radius:10px;
  794. box-shadow: 2px 2px {color:side img shadow};
  795. }
  796.  
  797. .nav-container a:hover {
  798. font-family: "Nunito", sans-serif;
  799. border-radius:10px;
  800. text-decoration:none;
  801. font-size:10px;
  802. color:{color:user text};
  803. background:{color:user hover};
  804. transition: 0.3s;
  805. }
  806.  
  807. .pagination a {
  808. text-align:center;
  809. font-size:10px;
  810. text-transform:lowercase;
  811. color:{color:user text};
  812. background:{color:user bg};
  813. justify-content:space-between;
  814. padding:7px;
  815. border-radius:10px;
  816. box-shadow: 2px 2px {color:side img shadow};
  817.  
  818. }
  819.  
  820. .pagination a:hover {
  821. font-family: "Nunito", sans-serif;
  822. padding:7px;
  823. border-radius:10px;
  824. text-decoration:none;
  825. font-size:10px;
  826. color:{color:user text};
  827. background:{color:user hover};
  828. transition: 0.3s;
  829. }
  830.  
  831.  
  832. .pagination {
  833. border:none;
  834. width:320px;
  835. background:transparent;
  836. }
  837.  
  838.  
  839.  
  840. .sidebar-image {
  841. width:320px;
  842. margin-top:65px;
  843. margin-bottom:-30px;
  844. padding:0px;
  845. border-radius:10px 10px 10px 10px;
  846. }
  847.  
  848.  
  849. .sidebar-image img {
  850. border-radius:10px 10px 10px 10px;
  851. margin-left:0px;
  852. padding:10px;
  853. background:{color:user bg};
  854. box-shadow: 10px 10px {color:side img shadow};
  855. }
  856.  
  857.  
  858.  
  859. aside a {
  860. color: var(--sidebar-links);
  861. }
  862.  
  863. a.asker {
  864. font-weight:bold;
  865. text-transform:lowercase;
  866. vertical-align:middle;
  867. margin-left:10px;
  868. }
  869.  
  870. .question img {
  871. width:35px;
  872. vertical-align:middle;
  873. border-radius:100%;
  874. }
  875.  
  876. .question p {
  877. width:auto;
  878. color:{color:user text};
  879. margin-left:50px;
  880. margin-top:0px;
  881. background:{color:user bg};
  882. padding:10px;
  883. border-radius:0px 10px 10px 10px;
  884. }
  885.  
  886. .tags a {
  887. color: var(--tags);
  888. }
  889.  
  890. .pages-container a {
  891. font-weight:bold;
  892. color:var(--accent);
  893. }
  894.  
  895. .reblogs {
  896. padding:10px;
  897. }
  898. .reblogs a, .caption a {
  899. color:var(--accent);
  900. }
  901.  
  902. .tumblr_audio_player {
  903. width: 100%;
  904. }
  905.  
  906. ol.notes {
  907. list-style-type:none;
  908. padding:10px;
  909. margin-left:10px;
  910. }
  911.  
  912. ol.notes a {
  913. margin-left:10px;
  914. }
  915.  
  916. ol.notes img.avatar {
  917. border-radius:100%;
  918. }
  919.  
  920. @media only screen and (max-width: 1100px) {
  921. main, .contained main, section {
  922. width: 80%;
  923. height: auto;
  924. }
  925. aside, .sidebar-container{
  926. width: 100%;
  927. max-width:100%;
  928. height: auto;
  929. position:relative;
  930. }
  931. .sidebar-container {
  932. max-width:90%;
  933. margin:var(--spacing) auto;
  934. }
  935.  
  936. .bubble-desc, .nav-container {
  937. width:100%!important;
  938. }
  939.  
  940. .bubble {
  941. display:flex;
  942. flex-wrap:wrap;
  943. align-items:center;
  944. width:100%;
  945. }
  946.  
  947. .sidebar-image {
  948. display:none;
  949. }
  950.  
  951.  
  952. article {
  953. max-width:90%;
  954. margin: var(--spacing) auto;
  955.  
  956. }
  957.  
  958. .grid section {
  959. column-count: 1;
  960. }
  961.  
  962. }
  963.  
  964. .screen-reader {
  965. border: 0;
  966. clip: rect(1px, 1px, 1px, 1px);
  967. clip-path: inset(50%);
  968. height: 1px;
  969. margin: -1px;
  970. overflow: hidden;
  971. padding: 0;
  972. position: absolute;
  973. width: 1px;
  974. word-wrap: normal !important;
  975. }
  976. #daynight-toggle {
  977. cursor:pointer;
  978. background:;
  979. position:fixed;
  980. top:var(--spacing);
  981. left:var(--spacing);
  982. z-index:2;
  983. height:2rem;
  984. width:2rem;
  985. border-radius:50%;
  986. background:white;
  987. display:flex;
  988. border:var(--border-width) solid var(--borders);
  989. flex-wrap:wrap;
  990. justify-content:center;
  991. align-items:center;
  992. }
  993.  
  994. #daynight-toggle:before {
  995. content:'☀';
  996. }
  997.  
  998. #daynight-toggle.night-mode-toggle:before {
  999. content:'';
  1000. width:1rem;
  1001. height:1rem;
  1002. transform:translate(-.32rem, -.32rem);
  1003. border-radius: 50%;
  1004. box-shadow: .32rem .32rem 0 0 black;
  1005. }
  1006.  
  1007.  
  1008. /*---- CREDIT -----*/
  1009.  
  1010. #credit {
  1011. position: fixed;
  1012. bottom: 20px;
  1013. right: 20px;
  1014. font-size: 20px;
  1015. text-decoration:none;
  1016. }
  1017.  
  1018. #credit a:hover {
  1019. background:{color:hover};
  1020. border-radius:10px;
  1021. -webkit-transition: all 0.3s;
  1022. -moz-transition: all 0.3s;
  1023. -ms-transition: all 0.3s;
  1024. -o-transition: all 0.3s;
  1025. transition: all 0.3s;
  1026. color:{color:text};
  1027. }
  1028.  
  1029. #credit a {
  1030. text-decoration:none;
  1031. }
  1032.  
  1033.  
  1034. {CustomCSS}
  1035. </style>
  1036. </head>
  1037. <body class="default {block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  1038. <button id="daynight-toggle"><span class="screen-reader">toggle day and night mode</span></button>
  1039.  
  1040.  
  1041. <div id="stickynote1">
  1042. <div class="closestickynote1"><i class="cp cp-cross"></i></div>
  1043. <div class="dragstickynote1"><i class="cp cp-lightbulb-o"></i> quick stats</div>
  1044. <div class="stickynotecontent">
  1045.  
  1046. <li><i class="cp cp-alien"></i> <b>NAME:</b> {text:name}</li>
  1047. <li><i class="cp cp-hashtag"></i> <b>TRACKED TAG:</b> {text:tracked tag}</li>
  1048. <li><i class="cp cp-heart-o"></i> <b>AGE:</b> {text:age}</li>
  1049. <li><i class="cp cp-card-o"></i> <b>PRONOUNS:</b> {text:pronouns}</li>
  1050. <li><i class="cp cp-z-gemini"></i> <b>ZODIAC:</b> {text:zodiac}</li>
  1051. <li><i class="cp cp-earth-o"></i> <b>COUNTRY:</b> {text:country}</li>
  1052. <li><i class="cp cp-rainbow-o"></i> <b>SEXUALITY:</b> {text:sexuality}</li>
  1053.  
  1054.  
  1055.  
  1056. </div>
  1057. </div><!--stickynote1 end-->
  1058.  
  1059.  
  1060.  
  1061. <div id="stickynote2">
  1062. <div class="closestickynote2"><i class="cp cp-cross"></i></div>
  1063. <div class="dragstickynote2"><i class="cp cp-stars-o"></i> currently </div>
  1064. <div class="stickynotecontent">
  1065.  
  1066. <li><i class="cp cp-tv"></i> <b>WATCHING:</b> {text:watching}</li>
  1067. <li><i class="cp cp-spotify"></i> <b>LISTENING:</b> {text:listening}</li>
  1068. <li><i class="cp cp-book-o"></i> <b>READING:</b> {text:reading}</li>
  1069. <li><i class="cp cp-gaming-controller-o"></i> <b>PLAYING:</b> {text:playing}</li>
  1070.  
  1071.  
  1072.  
  1073.  
  1074. </div>
  1075. </div><!--stickynote2 end-->
  1076.  
  1077.  
  1078. <main>
  1079. <section>
  1080. {block:SearchPage}
  1081. <article>
  1082. <div class="reblogs">{lang:Found SearchResultCount results for SearchQuery}</div>
  1083. </article>
  1084. {/block:SearchPage}
  1085. {block:TagPage}
  1086. <article>
  1087. <div class="reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
  1088. </article>
  1089. {/block:TagPage}
  1090. {block:DayPage}
  1091. <article>
  1092. <div class="reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
  1093. </article>
  1094. {/block:DayPage}
  1095. {block:Posts}
  1096. <!-- {block:NoRebloggedFrom}
  1097. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1098. {/block:NoRebloggedFrom} -->
  1099. {block:ContentSource}<!-- {SourceURL}
  1100. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1101. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1102. {/block:ContentSource}
  1103. <article id="post-{PostID}">
  1104. {block:PinnedPostLabel}<div class="pinned pinned-default"><i></i>{PinnedPostLabel}</div>{/block:PinnedPostLabel}
  1105.  
  1106.  
  1107. {block:RebloggedFrom}
  1108. <div class="reblog-header">
  1109. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  1110. <img src={ReblogRootPortraitURL-64} alt="{ReblogRootName}"> {ReblogRootName}
  1111. </a>
  1112. </div>
  1113. {/block:RebloggedFrom}
  1114. {block:Photo}
  1115. <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos">
  1116. {/block:Photo}
  1117.  
  1118. {block:Photoset}
  1119. {Photoset}
  1120. {/block:Photoset}
  1121.  
  1122. {block:Panorama}
  1123. <img src="{photourl-panorama}" alt="{photoalt}">
  1124. {/block:Panorama}
  1125.  
  1126. {block:Quote}
  1127. <div class="quote-container">
  1128. <div class="quote">
  1129. "{Quote}"
  1130. </div>
  1131. <div class="source">
  1132. -{Source}
  1133. </div>
  1134. </div>
  1135. {/block:Quote}
  1136.  
  1137. {block:Chat}
  1138. <ul class="chat">
  1139. {block:Lines}
  1140. <li>
  1141. {block:Label}{Label}{/block:Label}
  1142. {Line}
  1143. </li>
  1144. {/block:Lines}
  1145. </ul>
  1146. {/block:Chat}
  1147.  
  1148. {block:link}
  1149. <div class="link-container">
  1150. <a href="{URL}">
  1151. {Name}
  1152. </a>
  1153. </div>
  1154. {/block:link}
  1155.  
  1156. {block:Video}
  1157. {Video-700}
  1158. {/block:Video}
  1159.  
  1160. {block:Audio}
  1161. {audioembed}
  1162. {/block:Audio}
  1163.  
  1164. {block:Answer}
  1165. <div class="question">
  1166. <img src={AskerPortraitURL-64} alt="{username}"> {Asker} asked: {Question}
  1167. </div>
  1168. {block:Answerer}
  1169. <div class="replies">
  1170. {Answerer}: {Answer}
  1171. </div>
  1172. {/block:Answerer}
  1173. {block:NotReblog}
  1174. <div class="replies">
  1175. {Replies}
  1176. </div>
  1177. {/block:NotReblog}
  1178. {/block:Answer}
  1179. <!-- captions -->
  1180. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  1181. {block:Text}
  1182. {block:Title}<h2>{Title}</h2>{/block:Title}
  1183. {/block:Text}
  1184. {block:notreblog}
  1185. {block:caption}{Caption}{/block:caption}
  1186. {block:Text}{body}{/block:Text}
  1187. {/block:notreblog}
  1188. {block:Rebloggedfrom}
  1189. {block:Reblogs}
  1190. <div class="reblogs">
  1191. {block:IsNotOriginalEntry}
  1192. <div class="reblog-header">
  1193. <a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  1194. <img src={PortraitURL-64} alt="{username}"> {username}
  1195. </a>
  1196. </div>
  1197. {/block:IsNotOriginalEntry}
  1198. <div class="reblog-content">
  1199. {Body}
  1200. </div>
  1201. </div>
  1202. {/block:Reblogs}
  1203. {/block:RebloggedFrom}
  1204. </div>
  1205. {block:Date}<div class="post-info">
  1206. <div class="note-info">
  1207.  
  1208.  
  1209. <a href="{Permalink}" title="permalink"><i class="cp cp-info-alt"></i></a>
  1210. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonth}" title="{TimeAgo}"><i class="cp cp-calendar-o"></i></a>
  1211. <a href="{Permalink}"> {NoteCountwithLabel}</a></div>
  1212.  
  1213.  
  1214.  
  1215.  
  1216. <div class="like-and-reblog"> {LikeButton}</div>
  1217. </div>{/block:Date}
  1218. {block:Hastags}
  1219. <div class="tags">
  1220. {block:Tags}
  1221. <a href="{TagURL}">#{Tag}</a>
  1222. {/block:Tags}
  1223. </div>
  1224. {/block:Hastags}
  1225. {PostNotes}
  1226. </article>
  1227. {/block:Posts}
  1228. </section>
  1229.  
  1230.  
  1231.  
  1232. <aside>
  1233.  
  1234. {block:ifSidebarImage}
  1235. <div class="sidebar-image">
  1236. <img src="{image:sidebar}">
  1237. </div>
  1238. {/block:ifSidebarImage}
  1239.  
  1240. <div class="sidebar-container sidebar-style-bubble">
  1241.  
  1242.  
  1243.  
  1244.  
  1245. <div class="user-sidebar">
  1246.  
  1247. <i class="cp cp-mushroom-o" style="font-size:18px; vertical-align:middle; padding:10px; background:{color:user bg}; border-radius:100%; color:{color:user text}; box-shadow: 2px 2px {color:user hover};"></i>
  1248. <a href="/"> @{name}</a>
  1249. </div>
  1250. <div class="bubble">
  1251. <div class="avatar-user">
  1252. <div class="avatar-user-content">
  1253. <center><img src="{image:icon}"></center>
  1254. </div></div>
  1255.  
  1256. <div class="bubble-desc">
  1257.  
  1258.  
  1259. <div class="blog-title">{Title}</div>
  1260. <div class="description">{text:desktop description}</div> {block:HasPages}
  1261. <div class="pages-container">
  1262. {block:Pages}
  1263. <a href="{URL}">{Label}</a>
  1264. {/block:Pages}
  1265. </div>
  1266. {/block:HasPages}
  1267. <form action="/search" method="get" id="search-form">
  1268. <input type="text" name="q" class="query" value="" placeholder="Search">
  1269. </form></div>
  1270.  
  1271.  
  1272. <div class="nav-container">
  1273. <a href="/" title="home"><i class="cp cp-home-o"></i></a>
  1274. <a href="/ask" title="inbox"><i class="cp cp-chat-bubble-o"></i></a>
  1275. <a href="{text:Link 1 Url}" title="{text:Link 1 Title}"><i class="cp cp-map-o"></i></a>
  1276. <a href="{text:Link 2 Url}" title="{text:Link 2 Title}"><i class="cp cp-jellyfish-o"></i></a>
  1277. <a href="{text:Link 3 Url}" title="{text:Link 3 Title}"><i class="cp cp-heart-o"></i></a>
  1278. <a href="{text:Link 4 Url}" title="{text:Link 4 Title}"><i class="cp cp-fried-egg-o"></i></a>
  1279. <a href="{text:Link 5 Url}" title="{text:Link 5 Title}"><i class="cp cp-forest-o"></i></a>
  1280.  
  1281.  
  1282.  
  1283. </div>
  1284. </div>
  1285.  
  1286. {block:Pagination}
  1287. <div class="pagination flex centered">
  1288. {block:previouspage}
  1289. <a href="{previouspage}">Prev</a>
  1290. {/block:previouspage}
  1291. {block:JumpPagination length="3"}
  1292. {block:CurrentPage}
  1293. <span class="current-page">
  1294. {PageNumber}
  1295. </span>
  1296. {/block:CurrentPage}
  1297. {block:JumpPage}
  1298. <a href="{URL}">
  1299. {PageNumber}
  1300. </a>
  1301. {/block:JumpPage}
  1302. {/block:JumpPagination}
  1303. {block:nextpage}
  1304. <a href="{nextpage}">Next</a>
  1305. {/block:nextpage}
  1306. </div>
  1307. {/block:Pagination}
  1308.  
  1309. </div>
  1310.  
  1311.  
  1312. </aside>
  1313.  
  1314.  
  1315.  
  1316. </main>
  1317.  
  1318. <!----- CREDIT ----->
  1319.  
  1320. <a href="https://geminicodes.tumblr.com" title="by bru" id="credit"><i class="cp cp-moon-o"></i></a>
  1321.  
  1322.  
  1323.  
  1324.  
  1325.  
  1326. <!-- masonry navigation -->
  1327. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  1328.  
  1329. <script type="text/javascript">
  1330. // masonry navigation
  1331. var elements = document.getElementsByClassName('masonry-navigation');
  1332. var msnry;
  1333. var nElements = elements.length;
  1334. for(var i = 0; i < nElements; i++){
  1335. msnry = new Masonry( elements[i], {
  1336. // columnWidth: 268,
  1337. gutter: 10,
  1338. itemSelector: '.masonry-navigation-item',
  1339. });
  1340. }
  1341. </script>
  1342.  
  1343. </body>
  1344. </html>
  1345.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!