API tools faq
paste
Advertisement
southcodes

book page #2: rain drops

southcodes
Mar 1st, 2017
1,830
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.02 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     book page #2 'rain drops' by sur southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/ask
  7.    
  8. -->
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13.     <title>{Title}</title>
  14.  
  15.     <link rel="shortcut icon" href="{favicon}">
  16.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18.     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Open Sans:400,600|Lora" rel="stylesheet">
  19.  
  20. <style type="text/css">
  21.  
  22. ::-webkit-scrollbar-thumb:vertical {
  23.     background-color: #aaa;
  24.     height:0px;
  25.     border-right: 4px solid #fcfcfc;
  26.     border-bottom: 4px solid #fcfcfc;
  27.     border-top: 4px solid #fcfcfc;}
  28. ::-webkit-scrollbar {
  29.     width:5px;
  30.     height:0px;
  31.     background:inherit;
  32. }
  33.  
  34. .tmblr-iframe.iframe-controls--desktop {
  35.     margin: 10px;
  36.     opacity:.6;
  37.     -moz-transition-duration: 0.2s;
  38.     -o-transition-duration: 0.2s;
  39.     -webkit-transition-duration: 0.2s;
  40.     transition-duration: 0.2s;}
  41. .tmblr-iframe--desktop-logged-in-controls {
  42.   -webkit-filter:invert(100%);
  43.   -moz-filter:invert(100%);
  44.   -o-filter:invert(100%);
  45.   -ms-filter:invert(100%);
  46.   filter:invert(100%);
  47.   opacity:0.6;
  48.   }
  49.  
  50. #s-m-t-tooltip{
  51.     font-family:calibri;
  52.     max-width:300px;
  53.     margin-top:25px;
  54.     margin-left:15px;
  55.     z-index:999999;
  56.     letter-spacing:1.6px;
  57.     text-transform:uppercase;
  58.     font-size:9.5px;
  59.     border: solid 1px #ddd;
  60.     background-color:#fcfcfc;
  61.     color:#777;
  62.     padding:3px 5px;
  63. }
  64.  
  65. body {
  66.     color:#333;
  67.     font-size:14px;
  68.     font-family: 'Open Sans', sans-serif;
  69.     background-color:#fcfcfc;          /* background color */
  70.     letter-spacing:1px;
  71. }
  72.  
  73. a{
  74.     color:#8c8c8c;              /* links color */
  75.     text-decoration:none;
  76.     -moz-transition-duration: 0.6s;
  77.     -o-transition-duration: 0.6s;
  78.     -webkit-transition-duration: 0.6s;
  79.     transition-duration: 0.6s;}
  80. a:hover{
  81.     color:#000;              /* links color on hover*/
  82.     -moz-transition-duration: 0.6s;
  83.     -o-transition-duration: 0.6s;
  84.     -webkit-transition-duration: 0.6s;
  85.     transition-duration: 0.6s;
  86. }
  87.  
  88. hr {border:0px;border-top:1px dotted #aaa;}
  89.  
  90. /* head */
  91.  
  92. .topbar {
  93.     font-size:13px;
  94.     width:100%;
  95.     margin: 0 0 60px 0px;
  96. }
  97.  
  98. .icon {display:inline-block;}
  99. .icon img {
  100.     width:130px;
  101.     height:130px;
  102.     border-radius:100%;
  103. }
  104.  
  105. .inside {
  106.     width:calc(100% - 170px);
  107.     margin:10px 0 0 15px;
  108.     vertical-align:top;
  109.     display:inline-block;}
  110.    
  111. .title {
  112.     font-family: 'Lora', serif;
  113.     font-size:28px;}
  114. .title span {padding:0 0 9px 5px;border-bottom:1px dotted #aaa;
  115. }
  116.  
  117. .navi {
  118.     margin-left:7px;
  119.     font-size:12px;
  120.     font-family: 'Open Sans', sans-serif; border:0px;}
  121. .navi a{padding-right: 7px; font-size:12px;
  122. }
  123.  
  124. .desc {margin:20px 0 0 5px;}
  125.  
  126. /* main body */
  127.  
  128. .story {
  129.     background:#fff;
  130.     border: 1px solid #ddd;
  131.     padding:10px 13px 15px;
  132.     width:55%;
  133.     display:inline-block;
  134.     text-align:justify;
  135.     margin: 0 0 40px 20px;
  136.     letter-spacing:.5px;
  137. }
  138.  
  139. .maint {
  140.     text-align:center;
  141.     font-size:50px;
  142.     margin:60px 0 70px;
  143.     padding-bottom:70px;
  144.     font-family: 'Lora', serif;
  145.     border-bottom:1px dotted #aaa;
  146. }
  147.  
  148. /* second body */
  149.  
  150. .sidebar {
  151.     background:#fff;
  152.     width:340px;
  153.     vertical-align:top;
  154.     display:inline-block;
  155.     border: 1px solid #ddd;
  156.     margin: 0 0 40px 25px;
  157.     font-size:13px;
  158.     padding:10px 15px;}
  159. .sidebar hr {border:0px; border-top:1px dotted #aaa; margin:25px 0;}
  160. .sidebar span {
  161.     font-size:12px;
  162.     line-height:20px;
  163.     font-weight:600;
  164.     text-transform:uppercase;
  165. }
  166.  
  167. .summary {text-align:justify;}
  168.  
  169. .details {
  170.     display:inline-block;
  171.     vertical-align:top;
  172.     line-height:18px;
  173.     margin-left:5px;
  174.     width:260px;
  175.     font-size:12px;
  176. }
  177.  
  178. .char {margin-bottom:30px;}
  179. .char:last-of-type {margin-bottom:0px;}
  180. .char img{
  181.     width:70px;
  182.     height:70px;
  183. }
  184.  
  185. .charn {
  186.     letter-spacing:1.3px;
  187.     font-size:16px;
  188.     margin-bottom:4px;
  189.     padding-bottom:4px;
  190.     border-bottom:1px solid #ddd;
  191.     font-weight:600;
  192.     font-variant:small-caps;
  193.     margin-top:-4px;
  194. }
  195.  
  196. /* extras */
  197.  
  198. /* note title */ h1 {
  199.     font-size:13px;
  200.     margin:5px 0px 0px 0px;
  201.     font-family: 'Open Sans', sans-serif;
  202.     font-weight:300;
  203. }
  204.  
  205. /* story subtitles */ h2 {
  206.     text-transform:uppercase;
  207.     text-align:center;
  208.     font-family: 'Open Sans', sans-serif;
  209.     font-size:20px;
  210.     font-weight:600;
  211. }
  212.  
  213. /* sidebar sections */ h3 {
  214.     margin:0px 0px 10px 0px;
  215.     text-transform:uppercase;
  216.     font-size:16.5px;
  217.     letter-spacing:1px;
  218. }
  219.  
  220. .credit a {border:1px dotted #bbb;padding:0px 5px 1px;font-family:calibri;position:fixed;bottom:10px;right:10px;font-size:13px;background:white;display:block;color:#aaa;font-variant:small-caps;}.credit a:hover {animation: hover 2s;-webkit-animation: hover 2s;} @-webkit-keyframes hover{from {}to {transform:rotate(360deg);-ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}}
  221.  
  222.  
  223.  
  224. </style>
  225. </head>
  226. <body>
  227.  
  228. <div class="topbar">
  229.  
  230.         <div class="icon">
  231.                         <!--    topbar image    -->
  232.             <a href="/"><img src="IMAGE URL"/></a>
  233.         </div>
  234.  
  235. <div class="inside">
  236.         <div class="title"><span>
  237.             page title
  238.            
  239.            
  240.         <span class="navi" style="border-bottom:0px">
  241.                         <!--    links    -->
  242.             › <a href="/">go back</a>
  243.             › <a href="/ask">message me</a>
  244.             › <a href="/">link 3</a>
  245.             › <a href="/">link 4</a>
  246.             › <a href="/">link 5</a>
  247.         </span></span>
  248.         </div>
  249.        
  250.        
  251.         <div class="desc">     <!--    subtitle    -->
  252.         Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  253.         </div>
  254. </div>
  255. </div>
  256.  
  257. <div class="story">
  258.  
  259.      <!--    if you dont want this header delete from here +   -->
  260.     <div class="maint">
  261.         header title      <!--    header title    -->
  262.        
  263.         <h1>header subtitle</h1>  <!--    header subtitle    -->
  264.     </div>
  265.      <!--    + to here    -->
  266.      
  267.      
  268.     <h2>subtitle 1</h2>
  269.     content goes here, go wild
  270.    
  271.     <h2>subtitle 2</h2>
  272.     content goes here, go wild
  273.    
  274. </div>
  275. <div class="sidebar">
  276.      <!--    to add headers wrap them between <h3>title</h3>
  277.              to add separators (dotted lines) add <hr>    -->
  278. <div class="summary">
  279.  
  280.         <h3>summary</h3>
  281.         here goes a summary if you wish. this text is justified
  282. </div>
  283.    
  284.     <hr>
  285.  
  286.         <h3>details</h3>
  287.         <span>smaller subtitles:</span> wrap them like this<br>
  288.         <span>title:</span> story title<br>
  289.         <span>author:</span> author name<br>
  290.         <span>genre:</span> story genre(s)<br>
  291.  
  292.  
  293.     <hr>
  294.  
  295.         <h3>another header</h3>
  296.         your info goes here
  297.        
  298.        
  299. <!--        characters section       -->
  300.  
  301. <hr>
  302.  
  303. <h3>characters</h3>
  304.  
  305.  
  306.  
  307.     <!--    character box start    -->
  308.     <div class="char">
  309.    
  310.         <a href="link" title="character name"> <!-- character page/tag link-->
  311.             <img src="image url"/>
  312.         </a>
  313.        
  314.     <div class="details">
  315.        
  316.         <div class="charn">character name</div>
  317.        
  318.         <b>a | s | l</b><br>
  319.         › character info, try to make it short
  320.            
  321.     </div></div>
  322.    
  323.     <!--    character box end    -->
  324.    
  325.    
  326.    
  327.  
  328.     <!--    character box start    -->
  329.     <div class="char">
  330.    
  331.         <a href="link" title="character name"> <!-- character page/tag link-->
  332.             <img src="image url"/>
  333.         </a>
  334.        
  335.     <div class="details">
  336.        
  337.         <div class="charn">character name</div>
  338.        
  339.         <b>a | s | l</b><br>
  340.         › character info, try to make it short
  341.            
  342.     </div></div>
  343.    
  344.     <!--    character box end    -->
  345.    
  346.    
  347.    
  348.  
  349.     <!--    character box start    -->
  350.     <div class="char">
  351.    
  352.         <a href="link" title="character name"> <!-- character page/tag link-->
  353.             <img src="image url"/>
  354.         </a>
  355.        
  356.     <div class="details">
  357.        
  358.         <div class="charn">character name</div>
  359.        
  360.         <b>a | s | l</b><br>
  361.         › character info, try to make it short
  362.            
  363.     </div></div>
  364.    
  365.     <!--    character box end    -->
  366.    
  367.    
  368. <hr>
  369.  
  370.  
  371.     <h3>another header</h3>
  372.     content
  373.  
  374. <hr>
  375.  
  376.     <span>subheader:</span><br>
  377.     content
  378.    
  379.  
  380. </div><div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">s</a></div>
  381. </body>
  382.  
  383. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  384. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  385. <script>
  386. (function($){
  387. $(document).ready(function(){
  388. $("a[title]").style_my_tooltips({
  389. tip_follows_cursor:true,
  390. tip_delay_time:30,
  391. tip_fade_speed:300,
  392. attribute:"title"
  393. });
  394. });
  395. })(jQuery);
  396. </script>
  397.  
  398. </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!