API tools faq
paste
rottenfollow229

Theme Portfolio Base

rottenfollow229
Nov 25th, 2022
1,457
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.08 KB | None | 1 0
raw download clone embed print report
  1. <!--
  2.  
  3. CREDITS
  4.  
  5. > Tippy.js: https://atomiks.github.io/tippyjs/
  6.  
  7. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  8.  
  9. > Icons: https://phosphoricons.com/
  10.  
  11. > Removing tumblr app button on mobile themes: https://yeolithm.com/post/172903772712/tutorial-removing-tumblr-app-button-on-mobile
  12.  
  13. > Isotope Combination Filtering: https://magnusthemes.tumblr.com/post/171696773190/isotope-combination-filtering
  14.  
  15. !-->
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  19.  
  20. <script>
  21. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  22. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  23. </script>
  24.  
  25. <head>
  26.  
  27. <!------------Smooth Scroll Script------------>
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  29. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  30. <!------------Smooth Scroll Script------------>
  31.  
  32. <!--------------Custom Fonts-------------->
  33. <link rel="preconnect" href="https://fonts.googleapis.com">
  34. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  35. <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,500&family=Mukta:wght@400;500;700&display=swap" rel="stylesheet">
  36. <!--------------Custom Fonts-------------->
  37.  
  38. <!--Homelinks Icons -->
  39. <script src="https://unpkg.com/phosphor-icons"></script>
  40. <!--Homelinks Icons-->
  41.  
  42.     <title>{Title}</title>
  43.     <link rel="shortcut icon" href="{Favicon}">
  44.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  45.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  46.     <meta name="viewport" content="width=device-width, initial-scale=1">
  47.  
  48.  
  49. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  50. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  51.  
  52. <style type="text/css">
  53.  
  54. /*------
  55.  
  56. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  57.  
  58. ------ */
  59.  
  60. :root {
  61.     --main-font-size: 14px;
  62. }
  63.  
  64. :root, html[data-theme='light'] {
  65.    
  66.     --LightOn: block; /* displays <span> with moon icon */
  67.     --LightOff: none;  /* hides <span> with sun icon */
  68.    
  69.     --accent: #a7bed4;
  70.     --accented-text: #ffffff;
  71.     --main-background: #f8f8f8;
  72.     --text: #444444;
  73.     --bold: #a7bed4;
  74.     --italic #000000;
  75.     --main-links: #000000;
  76.     --link-hover: #a7bed4;
  77.     --scrollbar: #a7bed4;
  78.     --text-selection-background: #a7bed4;
  79.     --text-selection: #fff;
  80.     --tooltip: #fff;
  81.     --tooltip-background: #a7bed4;
  82.    
  83.     --topbar-title: #000000;
  84.     --top-banner: #ffffff;
  85.     --main-posts: #ffffff;
  86.     --post-borders: #e8e8e8;
  87. }
  88.  
  89. html[data-theme='dark'] {
  90.     --LightOn: none; /* hides <span> with moon icon */
  91.     --LightOff: block; /* displays <span> with sun icon */
  92.    
  93.     --accent: #b9cbdd;
  94.     --accented-text: #000000;
  95.     --main-background: #313131;
  96.     --text: #ffffff;
  97.     --bold: #b9cbdd;
  98.     --italic #000000;
  99.     --main-links: #ffffff;
  100.     --link-hover: #b9cbdd;
  101.     --scrollbar: #b9cbdd;
  102.     --text-selection-background: #b9cbdd;
  103.     --text-selection: #00000;
  104.     --tooltip: #000000;
  105.     --tooltip-background: #b9cbdd;
  106.    
  107.     --topbar-title: #ffffff;
  108.     --top-banner: #414141;
  109.     --main-posts: #414141;
  110.     --post-borders: #2e2e2e;
  111. }
  112.  
  113. html.theme-transition,
  114. html.theme-transition *,
  115. html.theme-transition *:before,
  116. html.theme-transition *:after {
  117.   transition: 0s !important;
  118.   transition-delay: 0 !important;
  119. }
  120.  
  121. /*----------FADE-IN ANIMATION----------*/
  122.  
  123. @keyframes fadein {
  124.     from {opacity:0;}
  125.     to {opacity:1;}
  126. }
  127.  
  128. @-moz-keyframes fadein { /* Firefox */
  129.     from {opacity:0;}
  130.     to {opacity:1;}
  131. }
  132.  
  133. @-webkit-keyframes fadein { /* Safari and Chrome */
  134.     from {opacity:0;}
  135.     to {opacity:1;}
  136. }
  137.  
  138. @-o-keyframes fadein { /* Opera */
  139.     from {opacity:0;}
  140.     to {opacity: 1;}
  141. }
  142.  
  143. /*----------TUMBLR CONTROLS----------*/
  144.  
  145. iframe#tumblr_controls, .iframe-controls--desktop {
  146.     right: 10px !important;
  147.     top: 25px !important;
  148.     position: fixed !important;
  149.     z-index: 99999999999999999999 !important;
  150.     -webkit-filter: invert(100%);
  151.     -moz-filter: invert(100%);
  152.     -o-filter: invert(100%);
  153.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  154.     -webkit-transition: all 0.8s ease-out;
  155.     -moz-transition: all 0.8s ease-out;
  156.     transition: all 0.8s ease-out;
  157.     display: none;
  158. }
  159.  
  160. /*----------SCROLLBAR----------*/
  161.  
  162. ::-webkit-scrollbar {
  163.     width: 10px;
  164.     height: 4px;
  165. }
  166. ::-webkit-scrollbar-button {
  167.     width: 0px;
  168.     height: 0px;
  169. }
  170. ::-webkit-scrollbar-thumb {
  171.     background-color: var(--scrollbar);
  172.     border-radius: 6px;
  173. }
  174.  
  175. ::-webkit-scrollbar-track {
  176.     background: var(--main-background);
  177.     border-radius: 6px;
  178. }
  179.  
  180. /*----------TOOLTIPS----------*/
  181.  
  182. .tippy-tooltip.custom-theme {
  183.     background-color: var(--tooltip-background);
  184.     color: var(--tooltip);
  185.     text-align:center;
  186.     font-weight: 700;
  187. }
  188.  
  189. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  190.   fill: var(--tooltip-background);
  191. }
  192.  
  193. /*----------TEXT SELECTION----------*/
  194. ::selection {
  195.     background: var(--text-selection-background);
  196.     color: var(--text-selection);
  197. }
  198.  
  199. ::-moz-selection {
  200.     background: var(--text-selection-background);
  201.     color: var(--text-selection);
  202. }
  203.  
  204. ::-webkit-selection {
  205.     background: var(--text-selection-background);
  206.     color: var(--text-selection);
  207. }
  208.  
  209. /*----------THEME BASICS----------*/
  210.  
  211. body {
  212.     margin: 0;
  213.     padding: 0;
  214.     box-sizing: border-box;
  215.     display: flex;
  216.     justify-content: center;
  217.     min-height: 100vh;
  218.     color: var(--main-font-color);
  219.     font-family: 'Mukta', sans-serif;
  220.     font-weight: 400;
  221.     line-height: 180%;
  222.     font-size: var(--main-font-size);
  223.     background: var(--main-background) url("") center; /*Add a background image between the quotations*/
  224.     background-attachment: fixed;
  225.     background-repeat: repeat;
  226.     -webkit-font-smoothing: antialiased;
  227.     -moz-osx-font-smoothing: grayscale;
  228.     animation: fadein 2.5s;
  229.     -moz-animation: fadein 2.5s;
  230.     -webkit-animation: fadein 2.5s;
  231.     -o-animation: fadein  2.5s;
  232. }
  233.  
  234. b,strong {
  235.     color:var(--bold);
  236.     font-weight: 700;
  237. }
  238.  
  239. i,em {
  240.     color:var(--italic);
  241. }
  242.  
  243. small,sub,sup {
  244.     font-size: calc(var(--main-font-size) - 0.5px);
  245. }
  246.  
  247. h1,h2,h3 {
  248.     font-weight: 700;
  249.     font-size: 1.3em;
  250.     color: var(--bold);
  251. }
  252.  
  253. h4,h5,h6 {
  254.     font-weight: 700;
  255.     font-size: 1.2em;
  256.     color: var(--bold);
  257. }
  258.  
  259. a {
  260.     color: var(--main-links);
  261.     text-decoration:none;
  262.     -moz-transition-duration: 0.5s;
  263.     -o-transition-duration: 0.5s;
  264.     -webkit-transition-duration: 0.5s;
  265.     transition-duration: 0.5s;
  266. }
  267.  
  268. a:hover {
  269.     color: var(--link-hover);
  270.     -moz-transition-duration: 0.5s;
  271.     -o-transition-duration: 0.5s;
  272.     -webkit-transition-duration: 0.5s;
  273.     transition-duration: 0.5s;
  274. }
  275.  
  276. .container {
  277.     position: relative;
  278.     margin: 180px auto 80px;
  279.     width: 1100px;
  280.     display: flex;
  281.     flex-wrap: wrap;
  282.     justify-content: space-between;
  283. }
  284.  
  285. .grid {
  286.     width: 600px;
  287. }
  288.  
  289. .grid .item {
  290.     margin-bottom: 90px;
  291. }
  292.  
  293. .grid-image {
  294.     width: 700px;
  295.     background-color: var(--main-posts);
  296.     box-sizing: border-box;
  297. }
  298.  
  299. .grid-image img {
  300.     width: 100%;
  301.     height: auto;
  302.     object-fit: cover;
  303. }
  304.  
  305. .image-content {
  306.     margin-top: 20px;
  307.     width: 620px;
  308.     padding: 40px;
  309.     display: flex;
  310.     justify-content: space-between;
  311.     align-items: center;
  312.     background-color: var(--main-posts);
  313. }
  314.  
  315. .theme-links a {
  316.     margin-left: 10px;
  317. }
  318.  
  319. .theme-links i {
  320.     font-size: 25px;
  321.     padding: 10px;
  322.     border-radius: 50%;
  323.     background-color: var(--accent);
  324.     color: var(--accented-text);
  325. }
  326.  
  327. .image-content h2 {
  328.     text-transform: uppercase;
  329.     color: var(--main-links);
  330. }
  331.  
  332. #sidebar {
  333.     position: sticky;
  334.     top: 130px;
  335.     width: 450px;
  336.     height: 650px;
  337.     background-color: var(--main-posts);
  338.     padding: 40px;
  339.     box-sizing: border-box;
  340.     color: var(--text);
  341. }
  342.  
  343. #sidebar-header {
  344.     position: relative;
  345. }
  346.  
  347. .image {
  348.     min-width: 80px;
  349.     display: flex;
  350.     align-items: center;
  351. }
  352.  
  353. .image-cont {
  354.     display: flex;
  355.     align-items: center;
  356.     overflow: hidden;
  357. }
  358.  
  359. .image-cont .side-header-text {
  360.     display: flex;
  361.     flex-direction: column;
  362. }
  363.  
  364. .image-cont i {
  365.     background-color: var(--accent);
  366.     color: var(--accented-text);
  367.     padding: 20px;
  368.     font-size: 25px;
  369.     border-radius: 50%;
  370. }
  371.  
  372. .blog-name {
  373.     font-weight: 700;
  374.     font-size: 1.2em;
  375. }
  376.  
  377. .blog-subtitle {
  378.     margin-top: -2px;
  379. }
  380.  
  381. .filters {
  382.     margin-top: 40px;
  383.     border-top: 1px solid var(--post-borders);
  384.     padding-top: 10px;
  385. }
  386.  
  387. .filters h2 {
  388.     margin-bottom: 3px;
  389.     text-transform: uppercase;
  390. }
  391.  
  392. .filters ul {
  393.     padding-left: 0;
  394.     margin-top: 30px;
  395. }
  396.  
  397. .filters li {
  398.     list-style-type: none;
  399.     display: inline-block;
  400.     margin: 10px 10px 10px 0;
  401.     border-bottom: 2px solid transparent;
  402. }
  403.  
  404. .selected {
  405.     color: var(--bold);
  406.     border-bottom: 2px solid var(--accent);
  407. }
  408.  
  409. /*----------LINKBAR---------*/
  410.  
  411. #linkbar {
  412.     height: 70px;
  413.     position: fixed;
  414.     top: 0;
  415.     left: 0;
  416.     right: 0;
  417.     background-color: var(--top-banner);
  418.     z-index: 9;
  419.     display: flex;
  420.     justify-content: space-between;
  421.     align-items: center;
  422.     padding: 0 40px 0 0;
  423. }
  424.  
  425. .topbar-title {
  426.     font-weight: 700;
  427.     font-size: 1.5em;
  428.     text-transform: uppercase;
  429.     color: var(--topbar-title);
  430.     margin-right: 20px;
  431. }
  432.  
  433. .homelinks {
  434.     color: var(--text);
  435. }
  436.  
  437. .homelinks a {
  438.     margin: 0 20px;
  439.     padding-bottom: 6px;
  440.     font-weight: 700;
  441.     box-shadow: inset 0px 0px 0px 0px transparent;
  442.     -webkit-transition: 0.6s ease;
  443.     -moz-transition: 0.6s ease;
  444.     -o-transition: 0.6s ease;
  445.     transition: 0.6s ease;
  446. }
  447.  
  448. .homelinks a:hover {
  449.     box-shadow: inset 0px -3px 0px 0px var(--accent);
  450.     -webkit-transition: 0.6s ease;
  451.     -moz-transition: 0.6s ease;
  452.     -o-transition: 0.6s ease;
  453.     transition: 0.6s ease;
  454. }
  455.  
  456. /*----------DAY/NIGHT MODE---------*/
  457.  
  458. .toggle-header {
  459.     display: flex;
  460.     align-items: center;
  461. }
  462.  
  463. button#theme-toggle {
  464.     outline: none;
  465.     border: 0;
  466.     background: transparent;
  467.     padding: 0;
  468.     cursor: pointer;
  469. }
  470.  
  471. button#theme-toggle i {
  472.     font-size: 25px;
  473.     background-color: var(--accent);
  474.     color: var(--accented-text);
  475.     padding: 23px;
  476.     margin-right: 20px;
  477. }
  478.  
  479. .toggle-header {
  480.     display: flex;
  481. }
  482.  
  483. .light-on{
  484.     display: var(--LightOn);
  485. }
  486.  
  487. .light-off{
  488.     display: var(--LightOff);
  489. }
  490.  
  491. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  492.  
  493. #bottom {
  494.     bottom: 40px;
  495.     position: fixed;
  496.     right: 40px;
  497.     z-index: 99;
  498.     display: flex;
  499. }
  500.  
  501. .ph-copyright {
  502.     padding: 3px;
  503.     font-size: 22px;
  504.     width: 22px;
  505.     height: 22px;
  506.     background-color: var(--accent);
  507.     color: var(--accented-text);
  508.     border-radius: 50%;
  509.     margin: 0 2px;
  510. }
  511.  
  512. </style>
  513.  
  514. </head>
  515.  
  516. <body>
  517.  
  518. <header id="linkbar">
  519.  
  520.     <div class="toggle-header">
  521.         <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  522.         <span class="light-on"><a href="javascript:;" title="toggle dark mode"><i class="ph-moon"></i></a></span>
  523.         <span class="light-off"><a href="javascript:;" title="toggle light mode"><i class="ph-sun"></i></a></span>
  524.         </button>
  525.        
  526.             <div class="topbar-title">Sheathemes Portfolio Page</div>
  527.     </div>
  528.  
  529.    
  530.     <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  531.         <a href="/">Home</a> /
  532.         <a href="/credit">credits</a> /
  533.         <a href="/faq">contact</a> /
  534.         <a href="https://www.tumblr.com/dashboard">Dashboard</a>
  535.     </nav> <!-----------TUMBLR LINKS----------->
  536. </header>
  537.  
  538. <div class="container">
  539.     <aside id="sidebar">
  540.         <section id="sidebar-header">
  541.             <div class="image-cont">
  542.                 <span class="image">
  543.                     <i class="ph-folder-open-thin"></i>
  544.                 </span>
  545.  
  546.             <div class="side-header-text">
  547.                 <span class="blog-name">Sheathemes Portfolio</span>
  548.                 <span class="blog-subtitle">Please abide by the terms</span>
  549.             </div>
  550.            
  551.             </div>
  552.         </section>
  553.    
  554.     <div class="filters">
  555.    
  556.         <ul class="filter option-set exclusive" data-filter-group="code">
  557.         <h2>By code type</h2>
  558.         <li class="option-set"><a href="#" data-filter-value="" class="reset selected">All</a></li>
  559.         <li class="option-set"><a href="#" data-filter-value=".theme">Themes</a></li>
  560.         <li class="option-set"><a href="#" data-filter-value=".page">Pages</a></li>
  561.         </ul>
  562.        
  563.         <ul class="filter option-set" data-filter-group="type">
  564.             <h2>By theme type</h2>
  565.             <li><a href="#" data-filter-value=".sidebar">Sidebar</a></li>
  566.             <li><a href="#" data-filter-value=".header">Header</a></li>
  567.             <li><a href="#" data-filter-value=".allinone">All-in-One</a></li>
  568.             <li><a href="#" data-filter-value=".fansite">Fansite</a></li>
  569.             <li><a href="#" data-filter-value=".contained">Contained</a></li>
  570.         </ul>
  571.        
  572.         <ul class="filter option-set" data-filter-group="feature">
  573.             <h2>By theme features</h2>
  574.             <li><a href="#" data-filter-value=".1col">One Column</a></li>
  575.             <li><a href="#" data-filter-value=".multicol">Multi Columns</a></li>
  576.             <li><a href="#" data-filter-value=".dark">Dark Mode</a></li>
  577.             <li><a href="#" data-filter-value=".resp">Responsive</a></li>
  578.             <li><a href="#" data-filter-value=".update">Update Tabs</a></li>
  579.             <li><a href="#" data-filter-value=".search">Search Bar</a></li>
  580.         </ul>
  581.        
  582.         <ul class="filter option-set" data-filter-group="pagetype">
  583.             <h2>By Page Type</h2>
  584.             <li><a href="#" data-filter-value=".about">About</a></li>
  585.             <li><a href="#" data-filter-value=".character">Character</a></li>
  586.             <li><a href="#" data-filter-value=".portfolio">Portfolio</a></li>
  587.             <li><a href="#" data-filter-value=".blogroll">Blogroll</a></li>
  588.         </ul>
  589.        
  590.     </div>
  591.    
  592.     </aside>
  593.     <article class="grid">
  594.         <div class="item theme header fansite 1col dark resp search">
  595.             <div class="grid-image">
  596.                 <img src="https://dl.dropboxusercontent.com/s/rly1ayz99jy2udd/esp.PNG?dl=0">
  597.             </div>
  598.             <div class="image-content">
  599.                 <h2>ESP</h2>
  600.                 <div class="theme-links">
  601.                 <a href="https://sheathemes.tumblr.com/post/700669345158823936/esp-preview-code-alt-customization-guide" title="theme post"><i class="ph-file-text-thin"></i></a>
  602.                 <a href="http://sheapvs.tumblr.com/esp" title="preview"><i class="ph-eye-thin"></i></a>
  603.                 </div>
  604.             </div>
  605.         </div>
  606.        
  607.         <div class="item page about">
  608.             <div class="grid-image">
  609.                 <img src="https://dl.dropboxusercontent.com/s/3w9e6ics3pa95ln/lukewarm.PNG?dl=0">
  610.             </div>
  611.             <div class="image-content">
  612.                 <h2>lukewarm</h2>
  613.                 <div class="theme-links">
  614.                 <a href="https://sheathemes.tumblr.com/post/678070178226012160/about-page-lukewarm-preview-code-alt" title="theme post"><i class="ph-file-text-thin"></i></a>
  615.                 <a href="https://sheapvs.tumblr.com/lukewarm" title="preview"><i class="ph-eye-thin"></i></a>
  616.                 </div>
  617.             </div>
  618.         </div>
  619.        
  620.         <div class="item theme sidebar 1col dark">
  621.             <div class="grid-image">
  622.                 <img src="https://dl.dropboxusercontent.com/s/iunhri7j037fo6f/breach.PNG?dl=0">
  623.             </div>
  624.             <div class="image-content">
  625.                 <h2>breach</h2>
  626.                 <div class="theme-links">
  627.                 <a href="https://sheathemes.tumblr.com/post/673479993458884609/breach-preview-code-alt-what-better" title="theme post"><i class="ph-file-text-thin"></i></a>
  628.                 <a href="https://sheapvs.tumblr.com/breach" title="preview"><i class="ph-eye-thin"></i></a>
  629.                 </div>
  630.             </div>
  631.         </div>
  632.        
  633.         <div class="item theme sidebar allinone 1col dark resp">
  634.             <div class="grid-image">
  635.                 <img src="https://dl.dropboxusercontent.com/s/5tjgp05oylcai1l/reveberate.PNG?dl=0">
  636.             </div>
  637.             <div class="image-content">
  638.                 <h2>Reverberate</h2>
  639.                 <div class="theme-links">
  640.                 <a href="https://sheathemes.tumblr.com/post/655072004968497152/reverberate-preview-code-alt-an" title="theme post"><i class="ph-file-text-thin"></i></a>
  641.                 <a href="https://sheapvs.tumblr.com/reverberate" title="preview"><i class="ph-eye-thin"></i></a>
  642.                 </div>
  643.             </div>
  644.         </div>
  645.        
  646.         <div class="item theme header multicol">
  647.             <div class="grid-image">
  648.                 <img src="https://dl.dropboxusercontent.com/s/h6kdorsmwdzopnd/monumental.PNG?dl=0">
  649.             </div>
  650.             <div class="image-content">
  651.                 <h2>Monumental</h2>
  652.                 <div class="theme-links">
  653.                 <a href="https://sheathemes.tumblr.com/post/644490444120768512/monumental-preview-code-alt-features" title="theme post"><i class="ph-file-text-thin"></i></a>
  654.                 <a href="https://sheapvs.tumblr.com/monumental" title="preview"><i class="ph-eye-thin"></i></a>
  655.                 </div>
  656.             </div>
  657.         </div>
  658.        
  659.         <div class="item theme sidebar 1col update">
  660.             <div class="grid-image">
  661.                 <img src="https://dl.dropboxusercontent.com/s/zpdg5646frzl963/nefelibata.PNG?dl=0">
  662.             </div>
  663.             <div class="image-content">
  664.                 <h2>Nefelibata</h2>
  665.                 <div class="theme-links">
  666.                 <a href="https://sheathemes.tumblr.com/post/637312250288521216/nefelibata-preview-code-alt" title="theme post"><i class="ph-file-text-thin"></i></a>
  667.                 <a href="http://sheapvs.tumblr.com/nefelibata" title="preview"><i class="ph-eye-thin"></i></a>
  668.                 </div>
  669.             </div>
  670.         </div>
  671.        
  672.         <div class="item page character resp">
  673.             <div class="grid-image">
  674.                 <img src="https://dl.dropboxusercontent.com/s/dxcbjwekvb0jayr/interdimensional.PNG?dl=0">
  675.             </div>
  676.             <div class="image-content">
  677.                 <h2>interdimensional</h2>
  678.                 <div class="theme-links">
  679.                 <a href="https://sheathemes.tumblr.com/post/635345309951819776/character-page-interdimensional-preview" title="theme post"><i class="ph-file-text-thin"></i></a>
  680.                 <a href="http://sheapvs.tumblr.com/interdimensional" title="preview"><i class="ph-eye-thin"></i></a>
  681.                 </div>
  682.             </div>
  683.         </div>
  684.        
  685.         <div class="item theme sidebar 1col update">
  686.             <div class="grid-image">
  687.                 <img src="https://dl.dropboxusercontent.com/s/6x3hcdgl3r0zxsb/denotation.PNG?dl=0">
  688.             </div>
  689.             <div class="image-content">
  690.                 <h2>Denotation</h2>
  691.                 <div class="theme-links">
  692.                 <a href="https://sheathemes.tumblr.com/post/628781610692739073/denotation-preview-code-alt-a-sidebar" title="theme post"><i class="ph-file-text-thin"></i></a>
  693.                 <a href="http://sheapvs.tumblr.com/denotation" title="preview"><i class="ph-eye-thin"></i></a>
  694.                 </div>
  695.             </div>
  696.         </div>
  697.        
  698.         <div class="item theme header 1col update">
  699.             <div class="grid-image">
  700.                 <img src="https://dl.dropboxusercontent.com/s/ru3j8t4heek4v7n/mattefying.PNG?dl=0">
  701.             </div>
  702.             <div class="image-content">
  703.                 <h2>Mattefying</h2>
  704.                 <div class="theme-links">
  705.                 <a href="https://sheathemes.tumblr.com/post/620814936782913537/mattefying-preview-light-preview-dark" title="theme post"><i class="ph-file-text-thin"></i></a>
  706.                 <a href="https://sheapvs.tumblr.com/matte-light" title="preview"><i class="ph-eye-thin"></i></a>
  707.                 </div>
  708.             </div>
  709.         </div>
  710.        
  711.         <div class="item page about resp">
  712.             <div class="grid-image">
  713.                 <img src="https://dl.dropboxusercontent.com/s/vc1g3szphz074xg/eradicate.PNG?dl=0">
  714.             </div>
  715.             <div class="image-content">
  716.                 <h2>Eradicate</h2>
  717.                 <div class="theme-links">
  718.                 <a href="https://sheathemes.tumblr.com/post/615916793336365056/about-eradicate-preview-code-alt-fully" title="theme post"><i class="ph-file-text-thin"></i></a>
  719.                 <a href="http://sheapvs.tumblr.com/eradicate" title="preview"><i class="ph-eye-thin"></i></a>
  720.                 </div>
  721.             </div>
  722.         </div>
  723.        
  724.         <div class="item theme sidebar header multicol update">
  725.             <div class="grid-image">
  726.                 <img src="https://dl.dropboxusercontent.com/s/fsn7txtg9ue2f5l/shimmering.PNG?dl=0">
  727.             </div>
  728.             <div class="image-content">
  729.                 <h2>Shimmering</h2>
  730.                 <div class="theme-links">
  731.                 <a href="https://sheathemes.tumblr.com/post/614243118534049792/shimmering-preview-code-alt-features" title="theme post"><i class="ph-file-text-thin"></i></a>
  732.                 <a href="http://sheapvs.tumblr.com/shimmering" title="preview"><i class="ph-eye-thin"></i></a>
  733.                 </div>
  734.             </div>
  735.         </div>
  736.        
  737.         <div class="item theme sidebar contained 1col allinone">
  738.             <div class="grid-image">
  739.                 <img src="https://dl.dropboxusercontent.com/s/ya6rxe43agdzu4w/contour.PNG?dl=0">
  740.             </div>
  741.             <div class="image-content">
  742.                 <h2>Contour</h2>
  743.                 <div class="theme-links">
  744.                 <a href="https://sheathemes.tumblr.com/post/613244091287863296/contour-preview-code-alt-an" title="theme post"><i class="ph-file-text-thin"></i></a>
  745.                 <a href="http://sheapvs.tumblr.com/contour" title="preview"><i class="ph-eye-thin"></i></a>
  746.                 </div>
  747.             </div>
  748.         </div>
  749.        
  750.         <div class="item page blogroll resp">
  751.             <div class="grid-image">
  752.                 <img src="https://dl.dropboxusercontent.com/s/eqqfv3dafeycd7z/elevation.PNG?dl=0">
  753.             </div>
  754.             <div class="image-content">
  755.                 <h2>Elevation</h2>
  756.                 <div class="theme-links">
  757.                 <a href="https://sheathemes.tumblr.com/post/189669880255/blogroll-elevation-preview-code-alt" title="theme post"><i class="ph-file-text-thin"></i></a>
  758.                 <a href="https://sheapvs.tumblr.com/elevation" title="preview"><i class="ph-eye-thin"></i></a>
  759.                 </div>
  760.             </div>
  761.         </div>
  762.        
  763.         <div class="item theme sidebar header 1col dark">
  764.             <div class="grid-image">
  765.                 <img src="https://dl.dropboxusercontent.com/s/t9ms3wlu2jnd00s/ludic.PNG?dl=0">
  766.             </div>
  767.             <div class="image-content">
  768.                 <h2>Ludic</h2>
  769.                 <div class="theme-links">
  770.                 <a href="https://sheathemes.tumblr.com/post/189439930020/ludic-preview-code-alt-updated-422022" title="theme post"><i class="ph-file-text-thin"></i></a>
  771.                 <a href="https://sheapvs.tumblr.com/ludic" title="preview"><i class="ph-eye-thin"></i></a>
  772.                 </div>
  773.             </div>
  774.         </div>
  775.        
  776.         <div class="item theme sidebar 1col">
  777.             <div class="grid-image">
  778.                 <img src="https://dl.dropboxusercontent.com/s/15qzd7nryknp3yw/duality.PNG?dl=0">
  779.             </div>
  780.             <div class="image-content">
  781.                 <h2>Duality</h2>
  782.                 <div class="theme-links">
  783.                 <a href="https://sheathemes.tumblr.com/post/172637927490/duality-preview-code-alt-revamped" title="theme post"><i class="ph-file-text-thin"></i></a>
  784.                 <a href="http://sheapvs.tumblr.com/duality" title="preview"><i class="ph-eye-thin"></i></a>
  785.                 </div>
  786.             </div>
  787.         </div>
  788.        
  789.         <div class="item theme sidebar 1col">
  790.             <div class="grid-image">
  791.                 <img src="https://dl.dropboxusercontent.com/s/vatojzsbzu4pesr/viridity.PNG?dl=0">
  792.             </div>
  793.             <div class="image-content">
  794.                 <h2>Viridity</h2>
  795.                 <div class="theme-links">
  796.                 <a href="https://sheathemes.tumblr.com/post/171243981780/revamped-code-pack-by-sheathemes-i-guess-i-am" title="theme post"><i class="ph-file-text-thin"></i></a>
  797.                 <a href="http://sheapvs.tumblr.com/viridity" title="preview"><i class="ph-eye-thin"></i></a>
  798.                 </div>
  799.             </div>
  800.         </div>
  801.        
  802.         <div class="item page portfolio">
  803.             <div class="grid-image">
  804.                 <img src="https://dl.dropboxusercontent.com/s/ibfb9xw5lo21cko/dulcet.PNG?dl=0">
  805.             </div>
  806.             <div class="image-content">
  807.                 <h2>Duclet</h2>
  808.                 <div class="theme-links">
  809.                 <a href="https://sheathemes.tumblr.com/post/171243981780/revamped-code-pack-by-sheathemes-i-guess-i-am"></i></a>
  810.                 <a href="http://sheapvs.tumblr.com/dulcet" title="preview"><i class="ph-eye-thin"></i></a>
  811.                 </div>
  812.             </div>
  813.         </div>
  814.        
  815.         <div class="item theme sidebar dark resp">
  816.             <div class="grid-image">
  817.                 <img src="https://dl.dropboxusercontent.com/s/509ru0k86xgg21g/nubivagant.PNG?dl=0">
  818.             </div>
  819.             <div class="image-content">
  820.                 <h2>Nubivagant</h2>
  821.                 <div class="theme-links">
  822.                 <a href="https://sheathemes.tumblr.com/post/169006491790/nubivagant-preview-code-alt-revamped" title="theme post"><i class="ph-file-text-thin"></i></a>
  823.                 <a href="https://sheapvs.tumblr.com/nubivagant" title="preview"><i class="ph-eye-thin"></i></a>
  824.                 </div>
  825.             </div>
  826.         </div>
  827.        
  828.         <div class="item theme header sidebar 1col">
  829.             <div class="grid-image">
  830.                 <img src="https://dl.dropboxusercontent.com/s/rz7i21ginkag3sx/aquiver.PNG?dl=0">
  831.             </div>
  832.             <div class="image-content">
  833.                 <h2>Aquiver</h2>
  834.                 <div class="theme-links">
  835.                 <a href="https://sheathemes.tumblr.com/post/167915878529/aquiver-preview-code-alt" title="theme post"><i class="ph-file-text-thin"></i></a>
  836.                 <a href="http://sheapvs.tumblr.com/aquiver" title="preview"><i class="ph-eye-thin"></i></a>
  837.                 </div>
  838.             </div>
  839.         </div>
  840.        
  841.         <div class="item header multicol dark search">
  842.             <div class="grid-image">
  843.                 <img src="https://dl.dropboxusercontent.com/s/u2ruaelkh6z0lbw/metropolis.PNG?dl=0">
  844.             </div>
  845.             <div class="image-content">
  846.                 <h2>Metropolis</h2>
  847.                 <div class="theme-links">
  848.                 <a href="https://sheathemes.tumblr.com/post/164459159285/metropolis-one-column-preview-multi-column" title="theme post"><i class="ph-file-text-thin"></i></a>
  849.                 <a href="http://sheapvs.tumblr.com/metropolis-two" title="preview"><i class="ph-eye-thin"></i></a>
  850.                 </div>
  851.             </div>
  852.         </div>
  853.        
  854.         <div class="item sidebar 1col">
  855.             <div class="grid-image">
  856.                 <img src="https://dl.dropboxusercontent.com/s/qzoav5ddjt6mbiq/infamy.PNG?dl=0">
  857.             </div>
  858.             <div class="image-content">
  859.                 <h2>Infamy</h2>
  860.                 <div class="theme-links">
  861.                 <a href="https://sheathemes.tumblr.com/post/162787093485/infamy-preview-code-alt-updated"><i class="ph-file-text-thin"></i></a>
  862.                 <a href="https://sheapvs.tumblr.com/infamy" title="preview"><i class="ph-eye-thin"></i></a>
  863.                 </div>
  864.             </div>
  865.         </div>
  866.        
  867.     </article>
  868. </div>
  869.  
  870. <footer id="bottom">
  871. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  872.  <a href="https://sheathemes.tumblr.com" target="_blank" title="sheathemes"><i class="ph-copyright"></i></a>  
  873. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  874. </footer>
  875.  
  876. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  877.  
  878. <!-----------Tooltips Script----------->
  879. <script src="https://unpkg.com/popper.js@1"></script>
  880. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  881. <!-----------Tooltips Script----------->
  882.  
  883. <!-----------Isotope Combintion Filtering Script----------->
  884. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  885. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  886. <!-----------Isotope Combintion Filtering Script----------->
  887.  
  888. <script>
  889.  
  890.     //tooltips script
  891.     $(document).ready(function(){
  892.         tippy('a[title]', {
  893.             theme: 'custom',
  894.             arrow: tippy.roundArrow,
  895.             zIndex: 9999999999,
  896.             placement: 'auto',
  897.             maxWidth: 300,
  898.             content(reference) {
  899.                 const title = reference.getAttribute('title');
  900.                 reference.removeAttribute('title'); return title; },
  901.            
  902.         });
  903.        
  904.     //combination filtering script
  905.     var $container = $(".grid"); // the container with all the elements to filter inside
  906.  var filters = {}; //should be outside the scope of the filtering function
  907.  /* --- read the documentation on isotope.metafizzy.co for more options --- */
  908.  var $grid = $container.isotope({
  909.    itemSelector: ".item", // the elements to filter
  910.    percentPosition: false // put true if you use percentage widths, otherwise put false
  911.  });
  912.  $(".option-set a").click(function(e) {
  913.    var $this = $(this); // cache the clicked link
  914.    var filterAttr = "data-filter-value";
  915.    var filterValue = $this.attr(filterAttr); // cache the filter
  916.    var $optionSet = $this.parents(".option-set"); // cache the parent element
  917.    var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  918.    var filterGroup = filters[group];
  919.    if (!filterGroup) {
  920.      filterGroup = filters[group] = [];
  921.    }
  922.    var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  923.    var activeClass = "selected", // the class for active links
  924.      exclClass = "exclusive"; // the class for exclusive groups
  925.  comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  926.    var comboFilter = getComboFilter(filters);
  927.    $grid.isotope({
  928.      filter: comboFilter
  929.    });
  930.    $this.toggleClass(activeClass);
  931.    e.preventDefault();
  932.  });
  933.     });
  934.  
  935. // toggle dark/light
  936. const toggle = document.getElementById("theme-toggle");
  937.  
  938. toggle.onclick = function () {
  939.     document.documentElement.classList.add("theme-transition");
  940.  
  941.     let currentTheme = document.documentElement.getAttribute("data-theme");
  942.     let targetTheme = "light";
  943.  
  944.     if (currentTheme === "light") {
  945.         targetTheme = "dark";
  946.     }
  947.  
  948.     window.setTimeout(function () {
  949.         document.documentElement.classList.remove("theme-transition");
  950.     }, 50);
  951.  
  952.     document.documentElement.setAttribute("data-theme", targetTheme);
  953.     localStorage.setItem("theme", targetTheme);
  954.     };
  955. </script>
  956.  
  957. </body>
  958. </html> <!---------------------------END--------------------------->
Advertisement
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!