API tools faq
paste
Advertisement
HITOA

Trumblr Simple example theme

HITOA
Nov 24th, 2018
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>{Title}</title>
  5.         <link rel="shortcut icon" href="{Favicon}">
  6.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.         {block:Description}
  8.             <meta name="description" content="{MetaDescription}" />
  9.         {/block:Description}
  10.        
  11.         <style>
  12.            
  13.             @keyframes slideFromLeft {
  14.                 0% {
  15.                     opacity:0;
  16.                     transform: translateX(-10px);
  17.                  }
  18.                 100% {
  19.                     opacity:1;
  20.                     transform: translateX(0);
  21.                 }
  22.             }
  23.            
  24.             @keyframes slideFromRight {
  25.                 0% {
  26.                     opacity:0;
  27.                     transform: translateX(10px);
  28.                  }
  29.                 100% {
  30.                     opacity:1;
  31.                     transform: translateX(0);
  32.                 }
  33.             }
  34.            
  35.             /*@keyframes floating {
  36.                 0% {
  37.                     transform: scale(1);
  38.                  }
  39.                 100% {
  40.                     transform: scale(1.1);
  41.                 }
  42.             }
  43.            
  44.             @keyframes unfloating {
  45.                 0% {
  46.                     transform: scale(1.1);
  47.                  }
  48.                 100% {
  49.                     transform: scale(1);
  50.                 }
  51.             }*/
  52.            
  53.             html,body {
  54.                 height: 100%;
  55.                 width: 100%;
  56.                 margin: 0;
  57.                 background-color: {BackgroundColor};
  58.             }
  59.            
  60.             #container {
  61.                 height: 100%;
  62.                 width: 60%;
  63.                 margin: auto;
  64.                 position relative;
  65.             }
  66.            
  67.             #sidebar {
  68.                 height: 100%;
  69.                 width: 30%;
  70.                 position relative;
  71.                
  72.                 animation-duration: 1s;
  73.                 animation-timing-function: ease-in-out;
  74.                 animation-delay: 0s;
  75.                 animation-iteration-count: 1;
  76.                 animation-name: slideFromLeft;
  77.             }
  78.            
  79.             #content {
  80.                 margin: 60px 0px;
  81.                 width: 70%;
  82.                 position relative;
  83.                
  84.                 animation-duration: 1s;
  85.                 animation-timing-function: ease-in-out;
  86.                 animation-delay: 0s;
  87.                 animation-iteration-count: 1;
  88.                 animation-name: slideFromRight;
  89.             }
  90.            
  91.             #splash {
  92.                 width: 95%;
  93.                 padding:20px;
  94.                 margin:20px 0px;
  95.                 position relative;
  96.                 /*background-color: rgba(255,255,255,0.8);
  97.                 border-radius: 5px;*/
  98.             }
  99.            
  100.             #nav {
  101.                 width: 95%;
  102.                 padding:20px;
  103.                 margin:20px 0px;
  104.                 position relative;
  105.             }
  106.            
  107.             #title {
  108.                 text-align: center;
  109.                 position relative;
  110.                 color: {TitleColor};
  111.                 font-size: 48px;
  112.                 font-family: {TitleFont},"Arial Black";
  113.                 font-weight: {TitleFontWeight};
  114.             }
  115.            
  116.             #logo {
  117.                 /*animation-duration: 0.5s;
  118.                 animation-timing-function: ease-in-out;
  119.                 animation-delay: 0s;
  120.                 animation-iteration-count: 1;
  121.                 animation-name: unfloating;*/
  122.                 width: 128px;
  123.                 height: 128px;
  124.                 margin-left: auto;
  125.                 margin-right: auto;
  126.                 padding: 20px;
  127.                 position: relative;
  128.                 -webkit-transition: transform 1s;
  129.                 transition: transform 1s;
  130.             }
  131.            
  132.             #logo:hover {
  133.                 /*animation-duration: 0.5s;
  134.                 animation-timing-function: ease-in-out;
  135.                 animation-delay: 0s;
  136.                 animation-iteration-count: 1;
  137.                 animation-name: floating;*/
  138.                 transform: scale(1.1);
  139.             }
  140.            
  141.             #desc {
  142.                 text-align: center;
  143.                 position relative;
  144.                 color: {TitleColor};
  145.                 font-size: 12px;
  146.                 font-family: {TitleFont},"Arial Black";
  147.                 font-weight: {TitleFontWeight};
  148.             }
  149.            
  150.             #navlink {
  151.                 text-align: center;
  152.                 padding: 5px;
  153.                 position relative;
  154.                 color: {TitleColor};
  155.                 font-size: 28px;
  156.                 font-family: {TitleFont},"Arial Black";
  157.                 font-weight: {TitleFontWeight};
  158.                 display: block;
  159.                 -webkit-transition: transform 0.2s,color 0.2s;
  160.                 transition: transform 0.2s, color 0.2s;
  161.             }
  162.            
  163.             #navlink:hover {
  164.                 transform: scale(1.1);
  165.                 color: {AccentColor};
  166.             }
  167.            
  168.             #entry {
  169.                 width: 95%;
  170.                 max-width: 600px;
  171.                 padding: 10px;
  172.                 border-radius: 5px;
  173.                 margin: 10px auto;
  174.                 position:; relative;
  175.                 background: white;
  176.                 -webkit-transition: transform 0.5s;
  177.                 transition: transform 0.5s;
  178.             }
  179.            
  180.             #entry:hover {
  181.                 transform: scale(1.04);
  182.             }
  183.            
  184.             #t_top {
  185.                 width: 95%;
  186.                 margin: 5px auto;
  187.                 min-height: 15px;
  188.                 padding: 5px;
  189.                 position: relative;
  190.                 border-bottom: 2px solid #fe92b2;
  191.             }
  192.            
  193.             #t_body {
  194.                 width: 95%;
  195.                 margin: 5px auto;
  196.                 min-height: 70px;
  197.                 padding: 5px;
  198.                 position: relative;
  199.                 border-bottom: 2px solid #fe92b2;
  200.             }
  201.            
  202.             #t_footer {
  203.                 width: 95%;
  204.                 margin: 5px auto;
  205.                 min-height: 5px;
  206.                 padding: 5px;
  207.                 position: relative;
  208.             }
  209.            
  210.             #t_title {
  211.                 text-align: center;
  212.                 position relative;
  213.                 color: {TitleColor};
  214.                 font-size: 20px;
  215.                 font-family: {TitleFont},"Arial Black";
  216.                 font-weight: {TitleFontWeight};
  217.             }
  218.            
  219.             #t_body p {
  220.                 position relative;
  221.                 color: {TitleColor};
  222.                 font-size: 14px;
  223.                 font-family: {TitleFont},"Arial Black";
  224.                 font-weight: {TitleFontWeight};
  225.             }
  226.            
  227.             #t_body hr {
  228.                 position relative;
  229.                 border: 1px solid #fe92b2;
  230.             }
  231.            
  232.             #t_body img {
  233.                 border-radius: 10px;
  234.                 -webkit-transition: transform 0.5s;
  235.                 transition: transform 0.5s;
  236.             }
  237.            
  238.             #t_body img:hover {
  239.                 transform: scale(1.04);
  240.             }
  241.            
  242.             #ref {
  243.                 text-align: center;
  244.             }
  245.            
  246.             #ref a {
  247.                 color: rgb(200,200,200);
  248.                 font-size: 16px;
  249.                 font-family: {TitleFont},"Arial Black";
  250.                 font-weight: {TitleFontWeight};
  251.             }
  252.            
  253.             .read_more_container {
  254.                 text-align: center;
  255.             }
  256.            
  257.             .read_more_container a {
  258.                 color: {TitleColor};
  259.                 font-size: 16px;
  260.                 font-family: {TitleFont},"Arial Black";
  261.                 font-weight: {TitleFontWeight};
  262.             }
  263.            
  264.             .inline {
  265.                 float:left;
  266.             }
  267.            
  268.             .fontborder1px {
  269.                 text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  270.             }
  271.            
  272.             .fontborder2px {
  273.                 text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
  274.             }
  275.            
  276.         </style>
  277.        
  278.     </head>
  279.     <body>
  280.         <div id="container">
  281.        
  282.             <div id="sidebar" class="inline">
  283.            
  284.                 <div id="splash">
  285.                     <div id="logo">
  286.                         <a href="/"><img src={PortraitURL-128}></a>
  287.                     </div>
  288.                     {block:ShowTitle}
  289.                         <div id="title" class="fontborder2px">{Title}</div>
  290.                     {/block:ShowTitle}
  291.                     {block:ShowDescription}
  292.                         <div id="desc" class="fontborder1px">{Description}</div>
  293.                     {/block:ShowDescription}
  294.                 </div>
  295.                
  296.                 <div id="nav">
  297.                     <a href="/" id="navlink" class="fontborder2px">Home</a>
  298.                     <a href="/ask" id="navlink" class="fontborder2px">Message</a>
  299.                     <a href="/archive" id="navlink" class="fontborder2px">Archive</a>
  300.                 </div>
  301.                
  302.             </div>
  303.            
  304.             <div id="content" class="inline">
  305.                 {block:Posts}
  306.                     <div id="entry">
  307.                         {block:Text}
  308.                             {block:Title}
  309.                                 <div id="t_top">
  310.                                     <h1 id="t_title">{Title}</h1>
  311.                                 </div>
  312.                             {/block:Title}
  313.                             <div id="t_body">
  314.                                 {Body}
  315.                             </div>
  316.                             <div id="t_footer">
  317.                                 {TagsAsClasses}
  318.                             </div>
  319.                         {/block:Text}
  320.                     </div>
  321.                 {/block:Posts}
  322.             </div>
  323.            
  324.         </div>
  325.        
  326.         <script>
  327.             var h = document.getElementsByClassName("tmblr-attribution")[0];
  328.             h.setAttribute("id","ref");
  329.             var a = document.getElementsByClassName("tmblr-full")[0];
  330.             var b = document.createElement('a');
  331.             b.setAttribute("href",a.children[0].src)
  332.             b.innerHTML = a.innerHTML;
  333.             a.parentNode.replaceChild(b,a);
  334.         </script>
  335.     </body>
  336. </html>
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!