API tools faq
paste
penvmbral

page 03.2 - gyre (book rec)

penvmbral
Feb 5th, 2019
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.45 KB | None | 0 0
raw download clone embed print report
  1. <!doctype HTML>
  2. <html>
  3.  
  4. <!-- page 03.2: gyre (book rec) by penvmbral @ tumblr -->
  5.  
  6. <head>
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!--Fonts-->
  11. <link href="https://fonts.googleapis.com/css?family=Lato|Noto+Serif+SC" rel="stylesheet">
  12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  13.  
  14. <!--Masonry-->
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  16.  
  17. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  18.  
  19. <script>
  20. $(function(){
  21.     var $container = $('#contain');
  22.         $container.imagesLoaded(function(){
  23.         $container.masonry({
  24.         itemSelector: '.item',
  25.         fitWidth: true,
  26.         });
  27.     });
  28. });
  29.  
  30.  
  31. </script>
  32.  
  33. <style type="text/css">
  34.     /* Scrollbar and Selection Styling */
  35.     /* Custom scrollbars are not visible in Firefox. */
  36.    
  37.     ::-webkit-scrollbar-thumb:vertical {
  38.         background-color: #B9DBD1;
  39.         height:5px;
  40.         border: #fff 1px solid;
  41.     }
  42.    
  43.     ::-webkit-scrollbar-thumb:horizontal {
  44.         background-color: #B9DBD1;
  45.         height:5px!important;
  46.         border: #fff 1px solid;
  47.     }
  48.  
  49.     ::-webkit-scrollbar {
  50.         background-color: #ddd;
  51.         border: #fff 2px solid;
  52.         height:3px;
  53.         width:5px;
  54.     }
  55.  
  56.     ::-moz-selection {
  57.        background-color: #B9DBD1;
  58.        color: #477075;
  59.     }
  60.  
  61.     ::selection {
  62.        background-color: #B9DBD1;
  63.        color: #477075;
  64.     }
  65.    
  66.     /* Tumblr Controls Styling */
  67.    
  68.     .tmblr-iframe {
  69.         white-space: nowrap;
  70.         -webkit-filter: invert(100%);
  71.         -moz-filter: invert(100%);
  72.         -o-filter: invert(100%);
  73.         -ms-filter: invert(100%);
  74.         filter: invert(100%);
  75.         opacity: .2;
  76.         transition: .4s;
  77.         -webkit-transition: .4s;
  78.         -moz-transition: .4s;
  79.         position: fixed!important;
  80.         right: -20px!important;
  81.         transform:scale(0.5,0.5);
  82.     }
  83.    
  84.     .tmblr-iframe:hover { opacity:1; }
  85.    
  86.     /* Content Styling */
  87.    
  88.     a {
  89.         text-decoration: none;
  90.         color: #7f7f7f;
  91.         border-bottom: #ddd 1px solid;
  92.         -webkit-transition-duration: 0.5s;
  93.     }
  94.    
  95.     a:hover {
  96.         color: #000;
  97.         border-bottom: 1px #80C7C2 solid;
  98.     }
  99.    
  100.     b, strong, i, em {
  101.         color: #000;
  102.     }
  103.    
  104.     u, underline {
  105.         text-decoration: none;
  106.         border-bottom: 1px #000 solid;
  107.     }
  108.    
  109.     /* Page Styling */
  110.    
  111.     html, body { width: 100%; margin: 0; padding: 0; }
  112.    
  113.     body {
  114.         background: #fff;
  115.         font-family: 'Lato', sans-serif;
  116.         font-size: 12px;
  117.         color: #555;
  118.         line-height: 150%;
  119.     }
  120.    
  121.     #contain {
  122.         max-width: 1150px;
  123.         max-height: 92vh;
  124.         padding: 20px;
  125.         margin: auto;
  126.         margin-top: 1%;
  127.         padding-bottom: 10px;
  128.         overflow-y: scroll;
  129.     }
  130.    
  131.         .item {
  132.             width: 270px;
  133.             height: 405px;
  134.             background: #B9DBD1;
  135.             margin: 6px;
  136.         }
  137.        
  138.         .book {
  139.             display: flex;
  140.             align-items: flex-end;         
  141.             align-content: flex-end;
  142.         }
  143.        
  144.             .hover {
  145.                 width: 220px;
  146.                 height: 350px;
  147.                 margin: auto;
  148.                 background: #fff;
  149.                 text-align: center;
  150.                 opacity: 0;
  151.                 -webkit-transition-duration: 0.5s;
  152.                 padding: 5px;
  153.  
  154.             }
  155.        
  156.         .item:hover .hover {
  157.             opacity: 1;
  158.         }
  159.        
  160.             .hover h1, h2, h3, h4, h5, h6, h7, h8 {
  161.                 display: block;
  162.                 width: 50%;
  163.                 margin: auto;
  164.                 font-size: 14px;
  165.                 font-family: 'Noto Serif SC', serif;
  166.                 text-transform: lowercase;
  167.                 border-bottom: 1px #ddd solid;
  168.                 padding-bottom: 2px;
  169.             }
  170.            
  171.             .hover .r {
  172.                 color: #000;
  173.                 margin-top: 15px;
  174.                 margin-bottom: 0px;
  175.                 font-size: 15px;
  176.             }
  177.            
  178.             .hover .d {
  179.                 height: 275px;
  180.                 padding: 3px;
  181.                 margin: auto;
  182.                 margin-top: 5px;
  183.                 overflow-y: scroll;
  184.             }
  185.        
  186.         .info {
  187.             background: #fff;
  188.             height: 280px;
  189.             width: 250px;
  190.             padding: 10px;
  191.         }
  192.  
  193.             .head {
  194.                 height: 30px;
  195.                 font-family: 'Noto Serif SC', serif;
  196.                 font-size: 24px;
  197.                 text-transform: lowercase;
  198.                 color: #101010;
  199.                 font-style: italic;
  200.             }
  201.    
  202.             .desc {
  203.                 height: 200px;
  204.                 overflow-y: scroll;
  205.                 margin-top: 2px;
  206.                 padding: 3px;
  207.                 clear: both;
  208.             }
  209.            
  210.             .nav {
  211.                 position: relative;
  212.                 width: 70%;
  213.                 float: right;
  214.                 height: 25px;
  215.                 margin: 5px;
  216.                 vertical-align: middle;
  217.                 text-align: right;
  218.             }
  219.    
  220.             .nav a {
  221.                 display: inline-block;
  222.                 padding: 2px;
  223.                 border: 1px transparent solid;
  224.                 vertical-align: middle;
  225.             }
  226.        
  227.             .nav a:hover {
  228.                 color: #000;
  229.                 border-bottom: #80C7C2 1px solid;
  230.                 border-top: #80C7C2 1px solid;
  231.             }
  232.                
  233.     .c {position: absolute; bottom: 10px; right: 10px; width: 19px; height: 10px; padding-top: 1px; padding-bottom: 10px; padding-right: 3px; text-align: center; font-style: italic; border: 1px #ddd solid; font-family: 'Noto Serif SC', serif; opacity: 0.7; -webkit-transition-duration: 0.5s;}
  234.     .c:hover { opacity: 1; border: #B9DBD1 1px solid; }
  235.     .c a { border: none; }
  236.     .c a:hover { color: #B9DBD1; }
  237.    
  238. </style>
  239.  
  240. </head>
  241. <body>
  242.  
  243.     <div id="contain">
  244.  
  245.         <div class="item info">
  246.             <div class="head">
  247.                 read &amp; reading.
  248.             </div>
  249.            
  250.             <div class="nav">
  251.                 <a href="/">home</a>
  252.                 <a href="/ask">message</a>
  253.                 <a href="/">extra</a>
  254.                 <a href="/">extra</a>
  255.             </div>
  256.            
  257.             <div class="desc">
  258.                 <p>write like a paragraph about your stuff here. or more if you really want. the box will scroll. <b>bold</b> <i>italic</i> <u>underline</u> <a href="#">link</a></p>
  259.                 <p>book covers here have an aspect ratio of 1:1.5 with a width. you're gonna want to scale the image down to have a width of 270px and crop if need be. you do NOT want to adjust the width; masonry will get kind of fucky of you so.</p>
  260.                 <p>this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls.  </p>
  261.             </div>
  262.     </div>
  263.        
  264.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  265.             <div class="hover">
  266.                 <h2>book title.</h2>
  267.                 <!--
  268.                 For Empty Stars: ✧
  269.                 For Filled Stars: ✦
  270.                 -->
  271.                 <div class="r">✧✧✧✧✧</div>
  272.                 <div class="d"><p>book description. scrolls if you go over.</p>
  273.                 </div>
  274.             </div>
  275.         </div>
  276.        
  277.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  278.             <div class="hover">
  279.                 <h2>book title.</h2>
  280.                 <!--
  281.                 For Empty Stars: ✧
  282.                 For Filled Stars: ✦
  283.                 -->
  284.                 <div class="r">✧✧✧✧✧</div>
  285.                 <div class="d"><p>book description. scrolls if you go over.</p>
  286.                 </div>
  287.             </div>
  288.         </div>
  289.  
  290.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  291.             <div class="hover">
  292.                 <h2>book title.</h2>
  293.                 <!--
  294.                 For Empty Stars: ✧
  295.                 For Filled Stars: ✦
  296.                 -->
  297.                 <div class="r">✧✧✧✧✧</div>
  298.                 <div class="d"><p>book description. scrolls if you go over.</p>
  299.                 </div>
  300.             </div>
  301.         </div>
  302.  
  303.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  304.             <div class="hover">
  305.                 <h2>book title.</h2>
  306.                 <!--
  307.                 For Empty Stars: ✧
  308.                 For Filled Stars: ✦
  309.                 -->
  310.                 <div class="r">✧✧✧✧✧</div>
  311.                 <div class="d"><p>book description. scrolls if you go over.</p>
  312.                 </div>
  313.             </div>
  314.         </div>
  315.        
  316.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  317.             <div class="hover">
  318.                 <h2>book title.</h2>
  319.                 <!--
  320.                 For Empty Stars: ✧
  321.                 For Filled Stars: ✦
  322.                 -->
  323.                 <div class="r">✧✧✧✧✧</div>
  324.                 <div class="d"><p>book description. scrolls if you go over.</p>
  325.                 </div>
  326.             </div>
  327.         </div>
  328.        
  329.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  330.             <div class="hover">
  331.                 <h2>book title.</h2>
  332.                 <!--
  333.                 For Empty Stars: ✧
  334.                 For Filled Stars: ✦
  335.                 -->
  336.                 <div class="r">✧✧✧✧✧</div>
  337.                 <div class="d"><p>book description. scrolls if you go over.</p>
  338.                 </div>
  339.             </div>
  340.         </div>
  341.        
  342.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  343.             <div class="hover">
  344.                 <h2>book title.</h2>
  345.                 <!--
  346.                 For Empty Stars: ✧
  347.                 For Filled Stars: ✦
  348.                 -->
  349.                 <div class="r">✧✧✧✧✧</div>
  350.                 <div class="d"><p>book description. scrolls if you go over.</p>
  351.                 </div>
  352.             </div>
  353.         </div>
  354.        
  355.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  356.             <div class="hover">
  357.                 <h2>book title.</h2>
  358.                 <!--
  359.                 For Empty Stars: ✧
  360.                 For Filled Stars: ✦
  361.                 -->
  362.                 <div class="r">✧✧✧✧✧</div>
  363.                 <div class="d"><p>book description. scrolls if you go over.</p>
  364.                 </div>
  365.             </div>
  366.         </div>
  367.        
  368.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  369.             <div class="hover">
  370.                 <h2>book title.</h2>
  371.                 <!--
  372.                 For Empty Stars: ✧
  373.                 For Filled Stars: ✦
  374.                 -->
  375.                 <div class="r">✧✧✧✧✧</div>
  376.                 <div class="d"><p>book description. scrolls if you go over.</p>
  377.                 </div>
  378.             </div>
  379.         </div>
  380.        
  381.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  382.             <div class="hover">
  383.                 <h2>book title.</h2>
  384.                 <!--
  385.                 For Empty Stars: ✧
  386.                 For Filled Stars: ✦
  387.                 -->
  388.                 <div class="r">✧✧✧✧✧</div>
  389.                 <div class="d"><p>book description. scrolls if you go over.</p>
  390.                 </div>
  391.             </div>
  392.         </div>
  393.        
  394.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  395.             <div class="hover">
  396.                 <h2>book title.</h2>
  397.                 <!--
  398.                 For Empty Stars: ✧
  399.                 For Filled Stars: ✦
  400.                 -->
  401.                 <div class="r">✧✧✧✧✧</div>
  402.                 <div class="d"><p>book description. scrolls if you go over.</p>
  403.                 </div>
  404.             </div>
  405.         </div>
  406.        
  407.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  408.             <div class="hover">
  409.                 <h2>book title.</h2>
  410.                 <!--
  411.                 For Empty Stars: ✧
  412.                 For Filled Stars: ✦
  413.                 -->
  414.                 <div class="r">✧✧✧✧✧</div>
  415.                 <div class="d"><p>book description. scrolls if you go over.</p>
  416.                 </div>
  417.             </div>
  418.         </div>
  419.        
  420.         <div class="item book" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  421.             <div class="hover">
  422.                 <h2>book title.</h2>
  423.                 <!--
  424.                 For Empty Stars: ✧
  425.                 For Filled Stars: ✦
  426.                 -->
  427.                 <div class="r">✧✧✧✧✧</div>
  428.                 <div class="d"><p>book description. scrolls if you go over.</p>
  429.                 </div>
  430.             </div>
  431.         </div>
  432.        
  433.        
  434.     </div>
  435.        
  436.         <!--CREDIT DO NOT ERASE-->
  437.     <div class="c"><a href="https://penvmbral.tumblr.com">v</a></div>
  438. </body>
  439. </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!