Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
page 04 - fathom (blogroll) - Pastebin.com
[go: Go Back, main page]
API tools faq
paste
annasthms

page 04 - fathom (blogroll)

annasthms
Oct 6th, 2018 (edited)
1,794
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <!----------------------------------------------------
  5.  
  6. credits:
  7.  
  8. - honeybee icon font by themehive
  9.  
  10. - fathom page by annasthms (sept 24, 2018)
  11.  more info @ https://annasthms.tumblr.com/more/page/04
  12.  
  13.  
  14. rules:
  15.  
  16. 1. don't remove the credit
  17. 2. don't steal/claim as yours
  18. 3. don't use as a base code
  19.  
  20. thank you!! ♡♡♡
  21.  
  22. ----------------------------------------------------->
  23.  
  24. <head>
  25.   <meta charset="utf-8">
  26.   <title>blogroll | {Title}</title>
  27.   <meta name="viewport" content="width=device-width, initial-scale=1">
  28.   <link rel="shortcut icon" href="{Favicon}">
  29.   <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  30.   <link href="https://solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  31.   <link href="https://static.tumblr.com/0podkko/Fijpg5uvz/blogroll.css" rel="stylesheet">
  32.   <style>
  33.   * {
  34.     position: relative;
  35.   }
  36.   body {
  37.     /* these four styles apply to the whole page */
  38.     background: #fff; /* change #fff to your desired background color */
  39.     font-family: 'Karla', sans-serif; /* to change the font, change every instance of Karla to your desired font */
  40.     font-size: 16px; /* change 16px to your desired font size */
  41.     color: #000; /* change #000 to your desired font color */
  42.   }
  43.   a {
  44.     color: #528591; /* link color */
  45.     text-decoration: none;
  46.   }
  47.   a:hover {
  48.     color: #85b1d0; /* link hover color */
  49.   }
  50.   img {
  51.     display: block;
  52.     max-height: 100%;
  53.     max-width: 100%;
  54.     height: auto;
  55.     width: auto;
  56.     object-fit: cover;
  57.   }
  58.   ::-webkit-scrollbar {
  59.     width: 11px;
  60.   }
  61.   ::-webkit-scrollbar-thumb {
  62.     background: #abd7e9; /* scrollbar color */
  63.     border-width: 6px 4px;
  64.     border-style: solid;
  65.     border-color: #ffffff;
  66.   }
  67.   ::-webkit-scrollbar-track {
  68.     background: #ffffff;
  69.   }
  70.  
  71.   /* header styles */
  72.   /* blog avatar */
  73.   div#blog_avatar_container {
  74.     width: 6em;
  75.     margin: 3em auto 0;
  76.   }
  77.   div#blog_avatar {
  78.     height: 6em; /* blog avatar height */
  79.     width: 6em; /* blog avatar width */
  80.   }
  81.   div#blog_avatar img {
  82.     border-radius: 0.5em; /* blog avatar "roundness": 0 = square, 100% = circle */
  83.   }
  84.   /* username line */
  85.   div#blog_name {
  86.     width: 6em;
  87.     margin-top: 0.35em;
  88.     text-align: center;
  89.     overflow: hidden;
  90.     text-overflow: ellipsis;
  91.     white-space: nowrap;
  92.     letter-spacing: 0.075em;
  93.   }
  94.   /* blog description */
  95.   div#blog_description {
  96.     width: 95%;
  97.     max-width: 700px;
  98.     margin: 2em auto 0;
  99.     text-align: center;
  100.     line-height: 1.35em;
  101.   }
  102.   /* blog links */
  103.   div#blog_links {
  104.     margin-top: 2em;
  105.     text-align: center;
  106.   }
  107.   div#blog_links a {
  108.     margin: 0 0.35em;
  109.   }
  110.  
  111.   /* blogroll container */
  112.   main {
  113.     margin: 3em auto;
  114.   }
  115.   main:empty {
  116.     padding: 2em;
  117.     text-align: center;
  118.   }
  119.   main:empty::before {
  120.     content: "{lang:Aw This Tumblr isnt following anyone}";
  121.     text-transform: lowercase;
  122.   }
  123.   /* blogroll */
  124.   div#following {
  125.     text-align: center;
  126.     width: 90%;
  127.     margin: auto;
  128.   }
  129.   /* each individual blog */
  130.   .followed {
  131.     display: inline-block;
  132.     margin: 1em; /* space between each icon */
  133.     font-size: 0.9em;
  134.     overflow: hidden;
  135.   }
  136.   /* followed blog avatar */
  137.   img.followed_avatar {
  138.     height: 115px; /* followed blog avatar height */
  139.     width: 115px; /* followed blog avatar width */
  140.     top: 0;
  141.     transition: 0.35s all;
  142.   }
  143.   .followed:hover img.followed_avatar {
  144.     top: -1.5em; /* followed blog avatar moves up on hover */
  145.     filter: blur(10px); /* followed blog avatar blurs on hover */
  146.     transform: scale(1.15); /* followed blog avatar grows on hover */
  147.   }
  148.   /* followed blog links container */
  149.   .followed_info {
  150.     display: grid;
  151.     align-items: center;
  152.     position: absolute;
  153.     top: -25%;
  154.     left: 5%;
  155.     width: 90%;
  156.     height: calc(90% - 1.5em);
  157.     background: rgba(255,255,255,0.75);
  158.     text-align: center;
  159.     opacity: 0;
  160.     transition: 0.35s all;
  161.     box-sizing: border-box;
  162.   }
  163.   .followed:hover .followed_info {
  164.     top: 5%;
  165.     opacity: 1;
  166.   }
  167.   .followed_info::before {
  168.     content: "";
  169.     display: block;
  170.     position: absolute;
  171.     top: 50%;
  172.     left: 50%;
  173.     height: 1px;
  174.     width: 0;
  175.     background: #000;
  176.     opacity: 0;
  177.     transform: translate(-50%, -50%);
  178.     transition: 0.5s all;
  179.   }
  180.   .followed:hover .followed_info::before {
  181.     width: 65%;
  182.     opacity: 1;
  183.     transition-delay: 0.2s;
  184.   }
  185.   .followed_info .info_row2 {
  186.     font-size: 0.9em;
  187.   }
  188.   .followed_info a {
  189.     color: #000;
  190.   }
  191.   .followed_info a.followed_home {
  192.     left: 0;
  193.     transition: 0.5s all;
  194.   }
  195.   .followed_info a.followed_home:hover {
  196.     left: -0.9em;
  197.   }
  198.   .followed_info a.followed_home .th {
  199.     z-index: 1;
  200.   }
  201.   .followed_info .info_row2 a {
  202.     display: inline-block;
  203.     margin: 0 0.5em;
  204.   }
  205.   .followed_info .icon_name {
  206.     position: absolute;
  207.     top: 50%;
  208.     right: 50%;
  209.     padding-left: 0;
  210.     transform: translate(50%, -50%) scale(0.75);
  211.     opacity: 0;
  212.     transition: 0.5s all;
  213.     font-size: 0.8em;
  214.   }
  215.   .followed_info a:hover .icon_name {
  216.     right: 0;
  217.     padding-left: 0.65em;
  218.     transform: translate(100%, -50%);
  219.     opacity: 1;
  220.   }
  221.   /* followed blog username line */
  222.   .followed_name {
  223.     width: 100%;
  224.     text-align: center;
  225.     line-height: 1em;
  226.     padding: 0.25em;
  227.     position: absolute;
  228.     bottom: 0;
  229.     overflow: hidden;
  230.     text-overflow: ellipsis;
  231.     white-space: nowrap;
  232.     background: rgba(255,255,255,0.5);
  233.     transform: translateY(100%) scale(0.75);
  234.     opacity: 0;
  235.     transition: 0.35s all;
  236.     box-sizing: border-box;
  237.   }
  238.   .followed:hover .followed_name {
  239.     transform: translateY(0) scale(1);
  240.     opacity: 1;
  241.   }
  242.   .followed_name a {
  243.     color: #000; /* followed blog username color */
  244.   }
  245.  
  246.   /* tumblr controls: dashboard, follow, message */
  247.   div#blog_controls {
  248.     position: fixed;
  249.     top: 0;
  250.     right: 0;
  251.   }
  252.   div#blog_controls a {
  253.     display: block;
  254.     height: 1em;
  255.     width: 1em;
  256.     margin: 1em;
  257.     text-decoration: none;
  258.     font-size: 0.7em;
  259.     color: #222;
  260.     background: #fafafa;
  261.     padding: 0.65em;
  262.   }
  263.   div#blog_controls a .icon_name {
  264.     position: absolute;
  265.     left: -0.75em;
  266.     bottom: 50%;
  267.     transform: translate(-100%, 50%);
  268.     opacity: 0;
  269.     transition: 0.35s opacity;
  270.     pointer-events: none;
  271.   }
  272.   div#blog_controls a:hover .icon_name {
  273.     opacity: 1;
  274.   }
  275.  
  276.   /* hide the default tumblr controls iframe */
  277.   .tmblr-iframe {
  278.     display: none!important;
  279.   }
  280.  
  281.   /* makes the page responsive */
  282.   /* it's best not to touch */
  283.   @media screen and (min-width: 500px) {
  284.     header {
  285.       margin-top: 8em;
  286.     }
  287.   }
  288.   @media screen and (max-width: 500px) {
  289.     .followed_info {
  290.       display: none;
  291.     }
  292.     .followed_name {
  293.       padding: 0.5em 0.25em;
  294.     }
  295.     div#blog_controls {
  296.       position: relative;
  297.       text-align: center;
  298.       margin: 1em auto 3em;
  299.       padding: 1em;
  300.     }
  301.     div#blog_controls a {
  302.       display: inline-block;
  303.       height: auto;
  304.       width: auto;
  305.       margin: 0.5em;
  306.       font-size: 0.9em;
  307.     }
  308.     div#blog_controls .th {
  309.       display: none;
  310.     }
  311.     div#blog_controls a .icon_name {
  312.       position: relative;
  313.       opacity: 1;
  314.       left: 0;
  315.     }
  316.   }
  317.   </style>
  318. </head>
  319. <body>
  320.   <header>
  321.     <div id="blog_info">
  322.       <div id="blog_avatar_container">
  323.         <div id="blog_avatar">
  324.           <img src="{PortraitURL-128}" alt="avatar" />
  325.         </div>
  326.         <div id="blog_name">{Name}</div>
  327.       </div>
  328.       <div id="blog_description">
  329.         <!-- your description goes here; you can replace this text with {Description} to have your description automatically appear -->
  330.       </div>
  331.       <div id="blog_links">
  332.         <a href="/">home</a>
  333.         <a href="/ask">ask</a>
  334.         <a href="/archive">archive</a>
  335.       </div>
  336.     </div>
  337.   </header>
  338.   <main>{block:Following}
  339.     <div id="following">
  340.       {block:Followed}<div class="followed">
  341.         <img src="{FollowedPortraitURL-128}" alt="{FollowedName} avatar" class="followed_avatar" />
  342.         <div class="followed_info">
  343.           <div class="info_row1">
  344.             <a href="{FollowedURL}" class="followed_home" target="_blank"><span class="th th-house-1-o"></span><span class="icon_name">visit</span></a>
  345.           </div>
  346.           <div class="info_row2">
  347.             <a href="https://www.tumblr.com/follow/{FollowedName}" class="followed_follow" target="_blank"><span class="th th-plus-2-o"></span></a>
  348.             <a href="https://www.tumblr.com/message/{FollowedName}" class="followed_message" target="_blank"><span class="th th-chat-bubbles"></span></a>
  349.           </div>
  350.         </div>
  351.         <div class="followed_name"><a href="{FollowedURL}" target="_blank">{FollowedName}</a></div>
  352.       </div>{/block:Followed}
  353.     </div>
  354.   {/block:Following}</main>
  355.   <div id="blog_controls">
  356.     <a href="https://www.tumblr.com" target="_blank"><span class="th th-house-1-o"></span><span class="icon_name">dashboard</span></a>
  357.     <a href="https://www.tumblr.com/follow/{Name}"><span class="th th-plus-2-o"></span><span class="icon_name">follow</span></a>
  358.     <a href="https://www.tumblr.com/message/{Name}"><span class="th th-chat-bubbles"></span><span class="icon_name">message</span></a>
  359.     <a href="https://annasthms.tumblr.com" target="_blank" id="credit"><span class="th th-code"></span><span class="icon_name">credit</span></a>
  360.   </div>
  361. </body>
  362. </html>
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!