API tools faq
paste
southcodes

skye | book page

southcodes
Apr 21st, 2022 (edited)
695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.07 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - book page 'skye' by skye 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/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by https://fontawesome.com/icons
  11.     - multiple dropdowns http://jsfiddle.net/SzQwS/
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.  
  20.     <meta charset="UTF-8">
  21.  
  22.     <meta name="viewport" content="width=device-width">
  23.  
  24.     <link rel="shortcut icon" href="{favicon}">
  25.  
  26.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28.     <meta name="description" content="{MetaDescription}"/>
  29.  
  30.     <!-- fonts -->
  31.     <link rel="preconnect" href="https://fonts.googleapis.com">
  32.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  33.     <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=Square+Peg&display=swap" rel="stylesheet">
  34.  
  35.     <!-- normalize css -->
  36.     <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  37.  
  38. <style>
  39.  
  40. :root {
  41.    
  42.      --borders:#eee;
  43.     --background:white;
  44.     --text:#444;
  45.     --links: lightblue;
  46.     --links-hover: blue;
  47.     --icons: lightblue;
  48.  
  49. }
  50.  
  51. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  52. .tmblr-iframe:hover {opacity:.8;}
  53.  
  54. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links);}
  55. ::-webkit-scrollbar {width:6px;height:0;}
  56. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  57.  
  58. pre {font-family:consolas;
  59.     white-space: pre-wrap;       /* css-3 */
  60.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  61.     white-space: -pre-wrap;      /* Opera 4- */
  62.     white-space: -o-pre-wrap;    /* Opera 7 */
  63.     word-wrap: break-word;      /* Internet Explorer 5.5+ */
  64.     background:#fafafa;
  65.     border:1px solid var(--borders);
  66.     padding:1rem;
  67. }
  68.  
  69. body, figure{margin:0;padding:0}
  70. html{font: 14px 'Open Sans', sans-serif;}
  71. body {font-size:1rem;color:var(--text);background:var(--background)}
  72. a {text-decoration: none;color:var(--links);word-break:break-word;}
  73. a:hover {color:var(--links-hover);}
  74. blockquote {margin:0;padding:0;}
  75. blockquote blockquote {border-left:1px solid var(--borders);padding:.1rem 0 .1rem .7rem;}
  76. img {max-width:100%;height: auto;display: block;margin: 0}
  77. hr {border:0;border-top:1px solid var(--borders);margin:1rem 0;}
  78. video { max-width:100%;}
  79.  
  80.  
  81. /* containers */
  82.  
  83. #container {
  84.     display: flex;
  85.     flex-flow: row nowrap;
  86.     justify-content: space-evenly;
  87.     align-items: center;
  88.     background-color: var(--background);
  89. }
  90.  
  91. #divider {
  92.     width:1px;
  93.     height:90vh;
  94.     background:var(--borders);
  95. }
  96.  
  97. header,main {
  98.     width: 50%;
  99.     height: 100vh;
  100.     overflow:auto
  101. }
  102.  
  103. /* header */
  104.  
  105. #header-wrapper {
  106.     padding:5rem 3rem 3rem;
  107.     box-sizing: border-box;
  108. }
  109.  
  110. #header-wrapper article:last-of-type{
  111.     border:0;
  112.     padding-bottom: 0;
  113.     margin-bottom: 3rem;
  114. }
  115.  
  116.  
  117. /* links */
  118.  
  119. #links {
  120.     display: flex;
  121.     flex-flow: row wrap;
  122.     justify-content: space-around;
  123.     margin-bottom: 3rem;
  124.     padding-bottom: 3rem;
  125.     border-bottom:1px solid var(--borders);
  126.     text-transform: uppercase;
  127.     font-weight: 600;
  128.     font-family: 'Montserrat', sans-serif;
  129.     font-size: .9rem;
  130. }
  131.  
  132. #links li {
  133.     margin:0 1.5rem 1rem;
  134.     list-style: none;
  135. }
  136.  
  137. /* summary */
  138.  
  139. #summary {
  140.     font-size: .9rem;
  141.     line-height: 160%;
  142.     font-style: italic;
  143.     border-bottom:1px solid var(--borders);
  144.     letter-spacing: .04rem;
  145.     padding-bottom: 2rem;
  146. }
  147.  
  148. /* gallery */
  149.  
  150. #gallery {
  151.     display: flex;
  152.     flex-flow: row wrap;
  153.     justify-content: space-around;
  154.     border-bottom:1px solid var(--borders);
  155.     margin:4rem 0;
  156.     padding-bottom: 4rem;
  157. }
  158.  
  159. figure.gallery-image {
  160.     width:8rem;
  161.     height:8rem;
  162.     border:10px solid var(--background);
  163.     outline: 1px solid var(--borders);
  164.     margin:2rem .5rem;
  165.     box-sizing: border-box;
  166. }
  167. img.gallery-image {
  168.     width: 100%;
  169.     height: 100%;
  170.     object-fit: cover;
  171. }
  172.  
  173. /* characters */
  174.  
  175. #characters-wrapper {
  176.     margin-top: 3rem;
  177.     display: flex;
  178.     flex-flow: row wrap;
  179.     justify-content: space-between;
  180.     border-bottom:1px solid var(--borders);
  181.     margin:4rem 0 4rem;
  182.     padding-bottom: 4rem;
  183. }
  184.  
  185. .character {
  186.     display: flex;
  187.     flex-flow: row wrap;
  188.     justify-content: space-between;
  189.     margin:1rem 1rem 1rem;
  190.     vertical-align: top;
  191.     width: calc(50% - 2rem);
  192.     font-size: .9rem!important;
  193.     letter-spacing: .05rem;
  194. }
  195.  
  196. figure.character-image {
  197.     width:5rem;
  198.     height:5rem;
  199.     border:7px solid var(--background);
  200.     outline: 1px solid var(--borders);
  201.     margin:1rem 0;
  202.     box-sizing: border-box;
  203.     display: inline-block;
  204.     vertical-align: middle;
  205.     border-radius: 100%;
  206. }
  207. img.character-image {
  208.     width: 100%;
  209.     height: 100%;
  210.     object-fit: cover;
  211.     border-radius: 100%;
  212. }
  213.  
  214. .character-inside {
  215.     vertical-align: middle;
  216.     display: inline-block;
  217.     background-color: #fcfcfc;
  218.     width: calc(100% - 6rem);
  219.     height: 7rem;
  220.     overflow: auto;
  221.     border: 1px solid var(--borders);
  222.     box-sizing: border-box;
  223.     padding:1rem
  224. }
  225.  
  226. .character-name {
  227.     text-transform: uppercase;
  228.     font-family: 'Montserrat', sans-serif;
  229.     font-weight: 600;
  230.     margin-bottom: 1.5rem;
  231.     font-size: 1rem;
  232. }
  233.  
  234. .character-description li {
  235.     list-style: none;
  236.     margin:1rem 0;
  237.     border-bottom: 1px solid #eee;
  238.     padding-bottom: 1rem;
  239. }
  240.  
  241. /* details & triggers */
  242.  
  243. #details-triggers {
  244.     display: flex;
  245.     font-size: .9rem;
  246.     line-height: 160%;
  247.     letter-spacing: .04rem;
  248.     padding-bottom: 4rem;
  249.     margin-bottom: 4rem;
  250.     border-bottom: 1px solid #eee;
  251. }
  252.  
  253. #details,#triggers {
  254.     flex-grow:1;
  255.     width:50%;
  256.     margin:0 1rem;
  257.     list-style: none;
  258. }
  259.  
  260. #details li,#triggers li{
  261.     margin:1rem 0
  262. }
  263.  
  264. #details li:before {
  265.     content: '\f138';
  266.     font-weight: 900;
  267.     margin-right: 1rem;
  268.     font-family: 'Font Awesome 5 Free';
  269.     color:var(--icons)
  270. }
  271.  
  272. #triggers li:before {
  273.     content: '\f05e';
  274.     font-family: 'Font Awesome 5 Free';
  275.     margin-right: 1rem;
  276.     font-weight: 900;
  277.     color:red
  278. }
  279.  
  280. /* faq */
  281.  
  282. #faq {
  283. }
  284.  
  285. .question-wrapper {
  286.     margin-bottom: 4rem;
  287.     padding-bottom: 4rem;
  288.     position: relative;
  289. }
  290.  
  291. .question-wrapper:after {
  292.     content: '';
  293.     width:50%;
  294.     height:1px;
  295.     position: absolute;bottom:0;right:0;left:0;
  296.     background-color: var(--borders);
  297.     margin:auto
  298. }
  299.  
  300. .question-wrapper:last-of-type:after {
  301.     display: none;
  302. }
  303.  
  304. .question-wrapper:last-of-type {
  305.     margin-bottom: 0;
  306.     padding-bottom: 0;
  307. }
  308.  
  309. .question {
  310.     line-height: 155%;
  311.     font-weight: 600;
  312.     cursor: pointer;
  313. }
  314.  
  315. .question:before {
  316.     content:'O ';
  317.     font-weight: 900;
  318.     color:var(--icons);
  319.     font-family: 'Montserrat', sans-serif;
  320.     font-size: 1.1rem;
  321.     margin-right: 1rem;
  322. }
  323.  
  324. .answer {
  325.     display:none;
  326.     margin-top: 2rem;
  327.     font-size: .9rem;
  328.     line-height: 150%;
  329. }
  330.  
  331. /* book section */
  332.  
  333. #main-wrapper {
  334.     max-width: 45rem;
  335.     padding:3rem 2rem;
  336.     box-sizing: border-box;
  337.     margin:auto
  338. }
  339.  
  340. /* banner */
  341.  
  342. figure.banner {
  343.     width:100%;
  344.     height: 15rem;
  345.     position:relative
  346. }
  347.  
  348. img.banner {
  349.     width: 100%;
  350.     height: 100%;
  351.     object-fit: cover;
  352. }
  353.  
  354. #book-title {
  355.     background-color: rgba(255, 255, 255,.5);
  356.     width: 100%;
  357.     margin:0;
  358.     position: absolute;
  359.     padding:2rem 1rem;
  360.     box-sizing: border-box;
  361.     text-align: center;
  362.     top: 50%;
  363.     left: 50%;
  364.     transform: translate(-50%, -50%);
  365.     font-size: 1.4rem;
  366.     overflow: auto;
  367.     max-height: 15rem;
  368.     font-size: 4rem;
  369.     font-weight: 400;
  370.     font-family: 'Corinthia', cursive;
  371. }
  372.  
  373. /* chapters */
  374.  
  375. .chapter-title {
  376.     text-align: center;
  377.     text-transform: uppercase;
  378.     font-family: 'Montserrat', sans-serif;
  379.     margin: 5rem 0;
  380.     padding-top: 5rem;
  381.     border-top: 1px solid var(--borders);
  382. }
  383.  
  384. .chapter-title:first-of-type {
  385.     border:0;
  386.     padding:0
  387. }
  388.  
  389. .book-chapter {
  390.     margin-top:5rem;
  391.     line-height: 160%;
  392. }
  393.  
  394. #open-popup {
  395.     display: none;
  396. }
  397.  
  398. /* MEDIA */
  399.  
  400. @media only screen and (min-width:0px) and (max-width:770px) {
  401.        
  402.     #container {
  403.         display: block;
  404.         align-items: center;
  405.         background-color: var(--background);
  406.     }
  407.  
  408.     #divider {
  409.         display:none;
  410.     }
  411.  
  412.     header,main {
  413.         width: 100%;
  414.     }
  415.  
  416.     #characters-wrapper {
  417.         display: block;
  418.         border-bottom:1px solid var(--borders);
  419.         margin:4rem 0 4rem;
  420.         padding-bottom: 4rem;
  421.     }
  422.  
  423.     .character {
  424.         display: block;
  425.         margin:2rem 0 ;
  426.         vertical-align: top;
  427.         width: 100%!important;
  428.     }
  429.    
  430.     .character:last-of-type{
  431.         margin-bottom: 0;
  432.     }
  433.  
  434.     figure.character-image {
  435.         display: block;
  436.         margin:0 auto 2rem
  437.     }
  438.    
  439.     .character-inside {
  440.         display: block;
  441.         width: 100%;
  442.         height: 100%;
  443.         overflow: auto;
  444.         max-width: 35rem;
  445.         margin: auto;
  446.     }
  447.        
  448.     #details-triggers {
  449.         display: block;
  450.         font-size: .9rem;
  451.         line-height: 160%;
  452.         letter-spacing: .04rem;
  453.         padding-bottom: 4rem;
  454.         margin-bottom: 4rem;
  455.         border-bottom: 1px solid #eee;
  456.     }
  457.  
  458.     #details,#triggers {
  459.         flex-grow:1;
  460.         width:100%;
  461.         margin:1rem;
  462.         list-style: none;
  463.     }
  464.  
  465.     #triggers {
  466.         margin-top: 3rem;
  467.     }
  468. }
  469.  
  470.  
  471. @media only screen and (min-width:770px) and (max-width:1150px) {
  472.  
  473.     #characters-wrapper {
  474.         display: block;
  475.     }    
  476.  
  477.     .character-inside {
  478.         width: calc(100% - 7rem);
  479.     }
  480.  
  481.     .character {
  482.         display: flex;
  483.         flex-flow: row wrap;
  484.         justify-content: space-between;
  485.         margin:3rem 0 ;
  486.         vertical-align: top;
  487.         width: 100%;
  488.     }
  489. }
  490.  
  491.  
  492.  
  493. @media only screen and (min-width:0) and (max-width:950px) {
  494.  
  495.     .show-popup {
  496.         display: block;
  497.     }
  498.  
  499.     .overflow {
  500.         overflow:hidden
  501.     }
  502.  
  503.     #open-popup {
  504.         background:var(--icons);
  505.         /* width:3rem; */
  506.         text-align: center;
  507.         display: block;
  508.         position: fixed;top:2rem;left:2rem;
  509.         z-index: 9999999;
  510.         font-size: .8rem;
  511.         cursor: pointer;
  512.         padding:1rem;
  513.         font-family: 'Montserrat', sans-serif;
  514.         border: 1px solid var(--borders);
  515.         font-weight: 600;
  516.         text-transform: uppercase;
  517.         border-radius: 3px;
  518.     }
  519.     #open-popup .fa-solid {
  520.         font-size: 1.4rem;
  521.         margin-left: 1rem;
  522.         color:var(--background);
  523.         vertical-align: middle;
  524.     }
  525.    
  526.      #container {
  527.         display: block;
  528.         align-items: center;
  529.         background-color: var(--background);
  530.     }
  531.  
  532.     #divider {
  533.         display:none;
  534.     }
  535.  
  536.     header,main {
  537.         width: 100%;
  538.         height: 100%;
  539.         overflow:auto
  540.     }
  541.  
  542.     #main-wrapper {
  543.         min-height: 100%;
  544.         position: relative;
  545.         padding-top: 7rem;
  546.     }
  547.  
  548.     header {
  549.         position: fixed;
  550.         top:0;right:0;left:0;bottom:0;
  551.         padding-top: 3rem;
  552.         display: none;
  553.         background-color: var(--background);
  554.     }
  555.  
  556.     #links {
  557.         margin-top: 3rem;
  558.     }
  559.  
  560. }
  561. </style>
  562. </head>
  563. <body>
  564.  
  565. <div id="open-popup">find out more <i class="fa-solid fa-book-open"></i></div>
  566.  
  567. <div id="container">
  568.  
  569. <main>
  570.  
  571. <section id="main-wrapper">
  572.  
  573.     <figure class="banner">
  574.         <img src="IMAGE URL" alt="" class="banner">
  575.  
  576.         <h1 id="book-title">title</h1>
  577.     </figure>
  578.  
  579.     <!-- chapter start -->
  580.     <div class="book-chapter">
  581.  
  582.         <h2 class="chapter-title">chapter I</h2>
  583.  
  584.         chapter 1
  585.  
  586.     </div>
  587.     <!-- chapter end -->
  588.  
  589.     <!-- chapter start -->
  590.     <div class="book-chapter">
  591.  
  592.         <h2 class="chapter-title">chapter II</h2>
  593.  
  594.         chapter 2
  595.  
  596.     </div>
  597.     <!-- chapter end -->
  598.  
  599.  
  600. </section> <!-- main wrapper end -->
  601.  
  602. </main>
  603.  
  604. <div id="divider"></div>
  605.  
  606. <header>
  607.  
  608. <section id="header-wrapper">
  609.    
  610.     <!-- links start -->
  611.     <article id="links">
  612.  
  613.         <li><a href="">link 1</a></li>
  614.  
  615.         |
  616.  
  617.         <li><a href="">link 2</a></li>
  618.  
  619.         |
  620.  
  621.         <li><a href="">link 3</a></li>
  622.  
  623.     </article>
  624.     <!-- links end -->
  625.  
  626.  
  627.     <!-- summary start -->
  628.     <article id="summary">
  629.         <p>summary</p>
  630.     </article>
  631.     <!-- summary end -->
  632.  
  633.  
  634.     <!-- gallery start -->
  635.     <article id="gallery">
  636.  
  637.         <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>
  638.  
  639.         <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>
  640.  
  641.         <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>
  642.  
  643.         <figure class="gallery-image"><img src="IMAGE URL" alt="" class="gallery-image"></figure>
  644.  
  645.     </article>
  646.     <!-- gallery end -->
  647.    
  648.  
  649.  
  650.     <!-- characters wrapper -->
  651.     <article id="characters-wrapper">
  652.  
  653.         <!-- character start -->
  654.         <div class="character">
  655.            
  656.             <figure class="character-image">
  657.                 <img class="character-image" src="IMAGE URL" alt="" align="left">
  658.             </figure>
  659.            
  660.             <div class="character-inside">
  661.  
  662.                 <div class="character-name">name</div>
  663.  
  664.                 <div class="character-description">
  665.                    
  666.                     <li>detail 1</li>
  667.  
  668.                     <li>detail 2</li>
  669.                    
  670.                     <p>paragraph</p>
  671.                 </div>
  672.  
  673.             </div> <!-- character inside -->
  674.  
  675.         </div>
  676.         <!-- character end -->
  677.        
  678.  
  679.         <!-- character start -->
  680.         <div class="character">
  681.            
  682.             <figure class="character-image">
  683.                 <img class="character-image" src="IMAGE URL" alt="" align="left">
  684.             </figure>
  685.            
  686.             <div class="character-inside">
  687.  
  688.                 <div class="character-name">name</div>
  689.  
  690.                 <div class="character-description">
  691.                    
  692.                     <li>detail 1</li>
  693.  
  694.                     <li>detail 2</li>
  695.                    
  696.                     <p>paragraph</p>
  697.                 </div>
  698.  
  699.             </div> <!-- character inside -->
  700.  
  701.         </div>
  702.         <!-- character end -->
  703.        
  704.     </article>
  705.     <!-- characters wrapper -->
  706.  
  707.  
  708.     <!-- details and triggers start -->
  709.     <article id="details-triggers">
  710.  
  711.         <div id="details">
  712.             <li>details 1</li>
  713.  
  714.             <li>details 2</li>
  715.            
  716.             <li>details 3</li>
  717.         </div>
  718.  
  719.  
  720.         <div id="triggers">
  721.            
  722.             <li>trigger 1</li>
  723.  
  724.             <li>trigger 2</li>
  725.  
  726.             <li>trigger 3</li>
  727.  
  728.         </div>
  729.  
  730.     </article>
  731.     <!-- details and triggers end -->
  732.  
  733.  
  734.     <!-- faq start -->
  735.     <article id="faq">
  736.  
  737.         <!-- question start -->
  738.         <div class="question-wrapper">
  739.  
  740.             <div class="question">
  741.                 question?
  742.             </div>
  743.  
  744.             <div class="answer">
  745.                 answer!
  746.             </div>
  747.            
  748.         </div>
  749.         <!-- question end -->
  750.  
  751.        
  752.         <!-- question start -->
  753.         <div class="question-wrapper">
  754.  
  755.             <div class="question">
  756.                 question 2?
  757.             </div>
  758.  
  759.             <div class="answer">
  760.                 answer 2!
  761.             </div>
  762.            
  763.         </div>
  764.         <!-- question end -->
  765.  
  766.     </article>
  767.     <!-- faq end -->
  768.  
  769. </section>  <!-- header wrapper -->
  770.  
  771. </header>
  772.  
  773. </div> <!-- container -->
  774.  
  775. <!-- dont touch -->
  776. <div style="position: fixed;bottom: 2rem;right: 2rem;background:white;border-radius:5px;width:25px;height:25px;text-align: center;line-height: 25px;z-index: inherit;9999999999999!important"><a target="_blank" style="color:#333" href="https://southcodes.tumblr.com/">sc</a></div>
  777.  
  778. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  779.  
  780. <!-- icons font -->
  781. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  782.  
  783. <script>
  784. $( document ).ready(function() {
  785.  
  786.     // disable scroll
  787.     $('#open-popup').click(function(){
  788.         $('body').toggleClass('overflow');
  789.         return false;
  790.     });
  791.  
  792.     // show popup
  793.     $( "#open-popup" ).click(function() {
  794.     $( 'header' ).toggleClass( "show-popup" );
  795.     });
  796.  
  797.     // faq dropdowns
  798.     $('.question').click(function(){
  799.         $(this).next('.answer').slideToggle();
  800.     });
  801.  
  802.     // anchor links animation
  803.     $('.anchor').click(function(){
  804.         $('html, body').animate({
  805.         scrollTop: $( $(this).attr('href') ).offset().top
  806.         }, 450); return false;
  807.     });
  808.    
  809. });
  810. </script>
  811. </body>
  812. </html>
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!