API tools faq
paste
Advertisement
themesbydoori

Blogroll - Elevation

themesbydoori
Dec 14th, 2019
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.27 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Blogroll page ⎾ELEVATION⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Icons: https://themify.me/themify-icons
  27.  
  28. !-->
  29.  
  30. <!DOCTYPE html>
  31.  
  32. <head>
  33.  
  34. <!--Custom Fonts-->
  35. <link href="https://fonts.googleapis.com/css?family=Exo:300,300i,400,400i,500,500i|Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito+Sans:300,300i,400,400i,600,600i,700,700i|Titillium+Web:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i|Oxygen:300,400,700|Arimo:400,400i,700,700i|Lato:300,300i,400,400i,700,700i|Karla:400,400i,700,700i|Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  37. <!--Custom Fonts-->
  38.  
  39. <!------------Smooth Scroll Script------------>
  40. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  41. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  42. <!------------Smooth Scroll Script------------>
  43.  
  44. <!--Homelinks Icons -->
  45. <link href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css" rel="stylesheet">
  46.  
  47. <!--Homelinks Icons-->
  48.  
  49.     <title>{Title}</title>
  50.     <link rel="shortcut icon" href="{Favicon}">
  51.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  52.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  53.     <meta name="viewport" content="width=device-width, initial-scale=1">
  54.  
  55. <style type="text/css">
  56.  
  57. /*------
  58.  
  59. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  60.  
  61. ------ */
  62.  
  63. :root {
  64.    
  65.     --accent: #AD849A;
  66.     --accented-text: #fff;
  67.     --main-font: 13px;
  68.     --bolded: #000;
  69.     --main-links: #000;
  70.     --scrollbar:#AD849A;
  71.     --text-selection-background: #AD849A;
  72.     --text-selection: #fff;
  73.     --tooltip: #fff;
  74.     --tooltip-background:#AD849A;
  75.     --main-background: #fdfdfd;
  76.     --banner:#AD849A;
  77.     --blogroll-title-container: #fff;
  78.     --blogroll-title: #000;
  79.     --homelinks: #000;
  80.     --link-hover: #AD849A;
  81.     --box-shadow: rgba(140, 136, 111, 0.1);
  82. }
  83.  
  84. /*----------FADE-IN ANIMATION----------*/
  85.  
  86. @keyframes fadein {
  87.     from {opacity:0;}
  88.     to {opacity:1;}
  89. }
  90.  
  91. @-moz-keyframes fadein { /* Firefox */
  92.     from {opacity:0;}
  93.     to {opacity:1;}
  94. }
  95.  
  96. @-webkit-keyframes fadein { /* Safari and Chrome */
  97.     from {opacity:0;}
  98.     to {opacity:1;}
  99. }
  100.  
  101. @-o-keyframes fadein { /* Opera */
  102.     from {opacity:0;}
  103.     to {opacity: 1;}
  104. }
  105.  
  106. /*----------TUMBLR CONTROLS----------*/
  107.  
  108. iframe.tmblr-iframe {
  109.     display: none;
  110. }
  111.  
  112. /*----------SCROLLBAR----------*/
  113.  
  114. ::-webkit-scrollbar {
  115.     width: 6px;
  116.     height: 6px;
  117. }
  118. ::-webkit-scrollbar-button {
  119.     width: 0px;
  120.     height: 0px;
  121. }
  122. ::-webkit-scrollbar-thumb {
  123.     background-color: var(--scrollbar);
  124.     border-radius: 6px;
  125.     -webkit-box-shadow: inset 0 0 3px var(--box-shadow);
  126.     -moz-box-shadow: inset 0 0 3px var(--box-shadow);
  127.     box-shadow: inset 0 0 3px var(--box-shadow);
  128. }
  129.  
  130. ::-webkit-scrollbar-track {
  131.     background: var(--continer);
  132.     border-radius: 6px;
  133.     -webkit-box-shadow: inset 0 0 3px var(--box-shadow);
  134.     -moz-box-shadow: inset 0 0 3px var(--box-shadow);
  135.     box-shadow: inset 0 0 3px var(--box-shadow);
  136. }
  137.  
  138. /*----------TOOLTIPS----------*/
  139.  
  140. #s-m-t-tooltip {
  141.     max-width:300px;
  142.     padding:2px 5px;
  143.     margin: -20px 7px -2px 20px;
  144.     font-size:12px;
  145.     letter-spacing:2px;
  146.     text-transform:lowercase;
  147.     background-color: var(--tooltip-background);
  148.     color: var(--tooltip);  /*change the text color of the tooltip*/
  149.     font-weight: 600;
  150.     z-index:999999999999999999999999999999999999;
  151.     -webkit-box-shadow: inset 0 0 3px var(--box-shadow);
  152.     -moz-box-shadow: inset 0 0 3px var(--box-shadow);
  153.     box-shadow: inset 0 0 3px var(--box-shadow);
  154. }
  155.  
  156. /*----------TEXT SELECTION----------*/
  157. ::selection {
  158.     background: var(--text-selection-background);
  159.     color: var(--text-selection);
  160. }
  161.  
  162. ::-moz-selection {
  163.     background: var(--text-selection-background);
  164.     color: var(--text-selection);
  165. }
  166.  
  167. ::-webkit-selection {
  168.     background: var(--text-selection-background);
  169.     color: var(--text-selection);
  170. }
  171.  
  172. /*----------THEME BASICS----------*/
  173.  
  174. body {
  175.     color: var(--main-font);
  176.     font-family: 'Roboto', sans-serif;
  177.     font-weight: 400;
  178.     font-size: var(--main-font);
  179.     line-height: 180%;
  180.     margin: 0;
  181.     text-align: left;
  182.     background: var(--main-background) url("") center; /*change the color of the main background and add a background image between the quotations.*/
  183.     background-attachment: fixed;
  184.     background-repeat: repeat;
  185.     -webkit-font-smoothing: antialiased;
  186.     -moz-osx-font-smoothing: grayscale;
  187.     animation: fadein 2.5s;
  188.     -moz-animation: fadein 2.5s; /* Firefox */
  189.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  190.     -o-animation: fadein  2.5s; /* Opera */
  191. }
  192.  
  193. b,strong {
  194.     color:var(--bolded);
  195.     font-weight: 700;
  196. }
  197.  
  198. i,em {
  199.     color:var(--text);
  200. }
  201.  
  202. u {
  203.     color:var(--bolded);
  204. }
  205.  
  206. hr {
  207.     width: 30%;
  208.     height: 1px;
  209.     background-color: #f6f6f6; /*change horizontal color here in your about section*/
  210.     color: #f6f6f6; /*change horizontal color here in your about section*/
  211.     border: 0px solid transparent;
  212. }
  213.  
  214. small,sub,sup {
  215.     font-size: 10px;
  216. }
  217.  
  218. a {
  219.     color: var(--main-links);
  220.     text-decoration:none;
  221.     font-weight: 700;
  222.     -moz-transition-duration: 0.5s;
  223.     -o-transition-duration: 0.5s;
  224.     -webkit-transition-duration: 0.5s;
  225.     transition-duration: 0.5s;
  226. }
  227.  
  228. a:hover {
  229.     color: var(--link-hover);
  230.     -moz-transition-duration: 0.5s;
  231.     -o-transition-duration: 0.5s;
  232.     -webkit-transition-duration: 0.5s;
  233.     transition-duration: 0.5s;
  234. }
  235.  
  236. /*----------MAIN CONTAINER----------*/
  237.  
  238. .cage {
  239.     width: 100%;
  240.     height: 100vh;
  241. }
  242.  
  243. .container {
  244.     position: relative;
  245.     margin: 0 auto;
  246.     width: 1100px;
  247. }
  248.  
  249. /*----------BANNER----------*/
  250.  
  251. #banner {
  252.     background-color: var(--banner);
  253.     width: 100%;
  254.     position: fixed;
  255.     top: 0;
  256.     height: 80px;
  257.     z-index: 9;
  258.     -webkit-border-radius: 0 0 95px 95px;/*Safari, Chrome*/
  259.     -moz-border-radius: 0 0 95px 95px;/*Firefox*/
  260.     border-radius: 0 0 95px 95px;
  261. }
  262.  
  263. /*----------SMALL BANNER----------*/
  264.  
  265. #header {
  266.     background-color: var(--blogroll-title-container);
  267.     width: 70%;
  268.     height: 70px;
  269.     position: fixed;
  270.     left: 50%;
  271.     right: 50%;
  272.     transform: translate(-50%, 41px);
  273.     border-radius: 40px;
  274.     z-index: 99;
  275.     display: flex;
  276.     justify-content: space-between;
  277.     align-items: center;
  278.     padding: 20px;
  279.     box-sizing: border-box;
  280.      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=63, Color=#737373)";/*IE 8*/
  281.     -moz-box-shadow: -1px 2px 5px 5px var(--box-shadow);/*FF 3.5+*/
  282.     -webkit-box-shadow: -1px 2px 5px 5px var(--box-shadow);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  283.     box-shadow: -1px 2px 5px 5px var(--box-shadow);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  284.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135,     Color=#737373); /*IE 5.5-7*/
  285. }
  286.  
  287. /*----------MAIN TITLE----------*/
  288.  
  289. #title {
  290.     font-size: 1.4em;
  291.     font-weight: 700;
  292. }
  293.  
  294. /*----------NAVIGATION LINKS----------*/
  295.  
  296. .morelinks a {
  297.     margin: 0 10px;
  298. }
  299.  
  300. /*----------BLOGROLL CONTAINER/CONTENT----------*/
  301.  
  302. .blogroll-content {
  303.     margin: 200px auto 100px auto;
  304. }
  305.  
  306. .blogroll-cage {
  307.     display: flex;
  308.     flex-flow: row wrap;
  309.     justify-content: space-between;
  310.     padding: 0;
  311. }
  312.  
  313. .blogroll-container {
  314.     width: 25%;
  315.     padding: 20px;
  316.     background-color: var(--blogroll-title-container);
  317.     margin: 20px;
  318.     display: flex;
  319.     flex-direction: row;
  320.     align-items: center;
  321.     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=63, Color=#737373)";/*IE 8*/
  322.     -moz-box-shadow: -1px 2px 5px 5px var(--box-shadow);/*FF 3.5+*/
  323.     -webkit-box-shadow: -1px 2px 5px 5px var(--box-shadow);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  324.     box-shadow: -1px 2px 5px 5px var(--box-shadow);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  325.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135,     Color=#737373); /*IE 5.5-7*/
  326. }
  327.  
  328. .blogroll-container a {
  329.     margin-left: 10px;
  330.     text-transform: uppercase;
  331. }
  332.  
  333. .blogroll-container a:hover {
  334.     color: var(--link-hover);
  335. }
  336.  
  337. .blogroll-title {
  338.     display: block;
  339.     font-weight: 400;
  340.     text-transform: lowercase;
  341. }
  342.  
  343. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  344.  
  345. #bottom {
  346.     bottom: 15px;
  347.     position: fixed;
  348.     right: 70px;
  349. }
  350.  
  351. .cred {
  352.     padding: 5px;
  353.     width: 12px;
  354.     height: 12px;
  355.     font-size: 15px;
  356.     line-height: 12px;
  357.     display: inline-block;
  358.     background-color: var(--accent);
  359.     color: var(--accented-text);
  360.     border-radius: 100%;
  361. }
  362.  
  363. #credit-bar {
  364.     display: none;
  365. }
  366.  
  367. /* ---------------- DO NOT TOUCH!!! ---------------- */
  368.  
  369. @media screen and (max-width: 1200px) {
  370.     .container {
  371.         width: 90%;
  372.     }
  373.    
  374.     .blogroll-container {
  375.         width: 40%;
  376.     }
  377.    
  378.     #credit-bar {
  379.         width: 100%;
  380.         height: 50px;
  381.         background-color: var(--banner);
  382.         position: relative;
  383.         bottom: 0;
  384.         display: flex;
  385.         justify-content: center;
  386.         align-items: center;
  387.         font-size: 1.1em;
  388.         font-weight: 700;
  389.         -webkit-border-radius: 75px 75px 0 0;/*Safari, Chrome*/
  390.         -moz-border-radius: 75px 75px 0 0;/*Firefox*/
  391.         border-radius: 75px 75px 0 0;
  392.     }
  393.  
  394.     #credit-bar a:hover {
  395.         color: var(--accented-text);
  396.     }
  397.    
  398.     #bottom {
  399.         display: none;
  400.     }
  401. }
  402.  
  403. @media screen and (max-width: 895px) {
  404.     .container {
  405.         width: 90%;
  406.     }
  407.    
  408.     .blogroll-container {
  409.         width: 90%;
  410.     }
  411.    
  412.     #credit-bar {
  413.         width: 100%;
  414.         height: 50px;
  415.         background-color: var(--banner);
  416.         position: relative;
  417.         bottom: 0;
  418.         display: flex;
  419.         justify-content: center;
  420.         align-items: center;
  421.         font-size: 1.1em;
  422.         font-weight: 700;
  423.         -webkit-border-radius: 75px 75px 0 0;/*Safari, Chrome*/
  424.         -moz-border-radius: 75px 75px 0 0;/*Firefox*/
  425.         border-radius: 75px 75px 0 0;
  426.     }
  427.    
  428.      #credit-bar a:hover {
  429.         color: var(--accented-text);
  430.     }
  431.    
  432.     #bottom {
  433.         display: none;
  434.     }
  435. }
  436.  
  437. </style>
  438.  
  439. <!-----------Tooltips Script----------->
  440. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  441. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  442. <script src="https://static.tumblr.com/pbhn8p5/uhVos7fkg/tooltips.js"></script>
  443. <!-----------Tooltips Script----------->
  444.  
  445. <!------------Smooth Scroll Script------------>
  446. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  447. <!------------Smooth Scroll Script------------>
  448.  
  449. </head>
  450.  
  451. <body>
  452.  
  453. <footer id="bottom">
  454. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  455.  <a href="https://sheathemes.tumblr.com" class="cred" title="theme by sheathemes">&#169;</a>  
  456. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  457. </footer>
  458.  
  459. <section class="cage"> <!--------------MAIN CONTAINER-------------->
  460.  
  461.     <header id="banner"> <!--------------HEADER-------------->
  462.         <header id="header">
  463.        
  464.             <div id="title">Blogroll #2</div> <!---- CHANGE TITLE HERE--->
  465.            
  466.             <nav class="morelinks"> <!--------------NAVIGATION LINKS-------------->
  467.                 <a href="/">home</a>
  468.                 <a href="/ask">inbox</a>
  469.                 <a href="/archive">past</a>
  470.                 <a href="/">link 1</a>
  471.                 <a href="/">link 2</a>
  472.                 <a href="/">link 3</a>
  473.             </nav> <!--------------NAVIGATION LINKS-------------->
  474.         </header>
  475.     </header> <!--------------HEADER-------------->
  476.    
  477.    
  478.     <section class="container">
  479.    
  480.    
  481.         <article class="blogroll-content">
  482.        
  483.         <!--------------BLOGROLL CONTAINER-------------->
  484.        
  485.         <ul class="blogroll-cage">
  486.        
  487.         {block:Following}
  488.  
  489.         {block:Followed}
  490.         <li class="blogroll-container">
  491.         <img src="{FollowedPortraitURL-64}">
  492.         <a href="{FollowedURL}">{FollowedName}<span class="blogroll-title">{FollowedTitle}</span></a>
  493.         </li>
  494.         {/block:Followed}
  495.         {/block:Following}
  496.        
  497.         </ul>
  498.        
  499.  <!--------------BLOGROLL CONTAINER-------------->
  500.  
  501.         </article>
  502.        
  503.         <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  504.         <footer id="credit-bar"><a href="http://sheathemes.tumblr.com" title="do not touch the credit">designed by sheathemes</a>
  505.         </footer>
  506.         <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  507.     </section>
  508. </section> <!--------------MAIN CONTAINER-------------->
  509.  
  510.  
  511. </body>
  512. </html> <!---------------------------END--------------------------->
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!