API tools faq
paste
southcodes

BIAS PAGE #1 lullaby

southcodes
Sep 14th, 2020 (edited)
1,171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.48 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - bias page #1 'lullaby' 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.     - honeybee icon font by https://honeybee.suiomi.com/
  11.  
  12.  -->
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.     <title>{title}</title>
  17.  
  18.     <meta name="viewport" content="width=device-width">
  19.  
  20.     <link rel="shortcut icon" href="{favicon}">
  21.     <meta name="description" content="{MetaDescription}"/>
  22.  
  23.     <!-- fonts -->
  24.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Montserrat:500,600" rel="stylesheet">
  25.    
  26.     <!-- normalize -->
  27.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  28.  
  29.     <!-- honeybee icon font --> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  30.    
  31.  
  32. <style>
  33. /*   quick color customization  */
  34.  
  35. :root {
  36.     --background: #fff;
  37.     --links-color:#D9ADE6;
  38.     --links-hover: purple;
  39.     --boxes-background:#fcfcfc;
  40.     --borders:#eeeeee;
  41. }
  42.  
  43.  
  44. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  45. .tmblr-iframe:hover {opacity:.8;}
  46.  
  47. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links-color);}
  48. ::-webkit-scrollbar {width:6px;height: 0}
  49. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  50.  
  51. pre {font-family:consolas;
  52.     white-space: pre-wrap;       /* css-3 */
  53.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  54.     white-space: -pre-wrap;      /* Opera 4- */
  55.     white-space: -o-pre-wrap;    /* Opera 7 */
  56.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  57.  
  58. body, figure{margin:0;padding:0}
  59. html{font: 14px 'Open Sans', sans-serif;}
  60. body {font-size:14px;color:#333;background:var(--background);}
  61. a {text-decoration: none;color:var(--links-color);word-break:break-word;}
  62. a:hover {color:var(--links-hover);}
  63. blockquote {margin:0;padding:0;}
  64. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  65. hr {border:0;border-top:1px solid #aaa;margin:0;}
  66. u {text-decoration: none;
  67. padding: 0 .3rem .3rem;border-bottom: 1px solid var(--links-color)}
  68.  
  69. /*  header  */
  70.  
  71. header {
  72.     width: 90vw;
  73.     max-width: 40rem;
  74.     margin: 7rem auto 5rem;
  75. }
  76.  
  77. .himg {
  78.     width: 7rem;
  79.     height: 7rem;
  80.     margin-right: 1rem;
  81.     display: inline-block;
  82.     vertical-align: middle;}
  83. img.himg {
  84.     object-fit: cover;
  85.     border-radius: 100%;
  86.     margin: 0}
  87.  
  88. #hinside {
  89.     width: calc(100% - 8.4rem);
  90.     display: inline-block;
  91.     vertical-align: middle;
  92.     padding: 0 1rem;
  93.     box-sizing: border-box;
  94.     background: var(--boxes-background);
  95.     border:1px solid var(--borders)}
  96.  
  97. #title {
  98.     font:500 1.2rem 'Montserrat', sans-serif;
  99.     margin: 1rem 0 1.5rem;
  100.     letter-spacing: .03rem;
  101. }
  102. #title span {
  103.     padding:0 .5rem .5rem;
  104.     border-bottom: 1px solid var(--links-color);
  105.     }
  106.  
  107. #desc {
  108.     font-size: .9rem;
  109.     letter-spacing: .05rem;
  110.     font-style: italic;
  111.     margin: 1.5rem 0;
  112.     line-height: 175%
  113. }
  114.  
  115.  
  116. /*  nav  */
  117.  
  118. #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
  119. #navi ul li {display: inline-block;margin: 0 .7rem}
  120. #navi {
  121.     font:500 .95rem 'Montserrat', sans-serif;
  122.     text-transform: uppercase;
  123.     margin-top: 1rem;
  124.     width: calc(100% - 8.4rem);
  125.     float: right;
  126.     line-height: 170%}
  127.  
  128.  
  129. /*  main  */
  130.  
  131. main { 
  132.     width: calc((23rem * 3) + (4rem * 3) + 14px);
  133.     margin: 7rem auto;
  134. }
  135.  
  136. .bias  {
  137.     width: calc(23rem + 2px);
  138.     display: inline-block;
  139.     margin: 2rem 2rem;
  140.     border:1px solid var(--borders);
  141.     box-sizing: border-box;
  142.     vertical-align:middle;
  143. }
  144.  
  145. figure.bimg {
  146.     float: left;
  147.     width: 11rem;
  148.     height: 11rem;
  149.     box-sizing: border-box;
  150.     border:.7rem solid #ffffff;
  151. }
  152. img.bimg {
  153.     width: 100%;
  154.     height: 100%;
  155.     object-fit: cover;
  156.     margin: 0;
  157. }
  158.  
  159. .binside {
  160.     width: 12rem;
  161.     height: 11rem;
  162.     float: right;
  163.     background: var(--boxes-background);
  164.     overflow: scroll;
  165.     padding: .5rem 1rem;
  166.     box-sizing: border-box;
  167.     word-break: break-word;
  168.     border-left: 1px solid var(--borders)
  169. }
  170.  
  171. .name {
  172.     margin-top: 0rem;
  173.     font:600 .95rem 'Montserrat', sans-serif;
  174.     text-transform: uppercase;
  175.     letter-spacing: .04rem;
  176.     line-height: 220%
  177. }
  178.  
  179. .name span {
  180.  
  181.     padding:0 .5rem .5rem;
  182.     border-bottom: 1px solid var(--links-color);
  183. }
  184.  
  185. .group {
  186.     font:400 .9rem 'Open Sans', sans-serif;
  187.     text-align: right;
  188.     font-style: italic;
  189.     letter-spacing: .08rem;
  190.     margin-top: 1rem
  191. }
  192.  
  193. .details {
  194.     font-size: .9rem;
  195.     margin-top: 1.5rem;
  196.     padding-top: .5rem;
  197.     border-top: 1px solid var(--borders)
  198. }
  199. .details .tag {
  200.     font-weight: 600;
  201.     text-transform: uppercase;
  202.     font:.95rem;
  203. }
  204.  
  205. .details .th {
  206.     color: var(--links-color);
  207.     margin-right: .2rem
  208. }
  209.  
  210. .details .value {
  211.     margin-top: -.5rem;
  212.     margin-bottom: 0;
  213.     font-size: .8rem;
  214.     font-style: italic;
  215.     text-align: right;
  216.     letter-spacing: .04rem
  217. }
  218.  
  219. .bdesc {
  220.     border-top:1px solid var(--borders);
  221.     width: 100%;
  222.     background: var(--boxes-background);
  223.     box-sizing: border-box;
  224.     padding: 1px 1rem;
  225.     text-align: center;
  226.     font-size: .9rem;
  227.     font-style: italic;
  228.     letter-spacing: .07rem;
  229.     clear: both
  230. }
  231. .value,.tag {
  232.     margin: 1rem 0
  233. }
  234.  
  235.  
  236. /* DONT TOUCH */
  237.  
  238. #sc {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif;color:#777;}
  239.  
  240.  
  241. /* MEDIA */
  242.  
  243.  
  244.  
  245. @media only screen and (min-width:0) and (max-width:820px) {
  246.  
  247.     main,.bias {
  248.         width: calc(31rem + 2px);
  249.         margin:3rem auto;
  250.     }
  251.  
  252.     figure.bimg,.binside {
  253.         width: 15rem;
  254.         height: 15rem;
  255.     }
  256.  
  257.     .binside {
  258.         width: 16rem
  259.     }
  260.  
  261. }
  262.  
  263.  
  264. @media only screen and (min-width:821px) and (max-width:1050px) {
  265.                
  266.  
  267.         main { 
  268.             width: calc((23rem * 2) + (4rem * 2) + 14px);
  269.             margin: 7rem auto
  270.         }
  271.  
  272.         .bias  {
  273.         width: calc(23rem + 2px);  
  274.             margin: 2rem 2rem
  275.         }
  276.  
  277.         figure.bimg {
  278.  
  279.         }
  280. }
  281.  
  282.  
  283. </style>
  284.    
  285. </head>
  286. <body>
  287.  
  288. <header>
  289.    
  290.     <article class="himg">
  291.  
  292.         <!-- header image, will automatically crop as a circle -->
  293.  
  294.         <img class="himg" src="image url"></img>
  295.  
  296.     </article>
  297.  
  298.     <article id="hinside">
  299.         <h1 id="title"><span>
  300.  
  301.             TITLE
  302.  
  303.         </span></h1>
  304.  
  305.         <div id="desc">
  306.  
  307.         <!-- please wrap all paragraphs <p></p> -->
  308.  
  309.             <p>description</p>
  310.  
  311.         </div>
  312.     </article>
  313.  
  314.         <nav id="navi"><ul>
  315.  
  316.         <li><a href="/">home</a></li>
  317.         <li><a href="/ask">inbox</a></li>
  318.         <li><a href="link 3">link 3</a></li>
  319.  
  320.     </ul></nav>
  321.  
  322. </header>
  323.  
  324.  
  325.  
  326. <main>
  327.  
  328.  
  329. <!-- bias box start -->    <article class="bias">
  330.  
  331.         <figure class="bimg">
  332.  
  333.         <!-- bias image, will automatically crop as a square -->
  334.  
  335.             <img class="bimg" src="IMAGE URL"></img>
  336.            
  337.         </figure>
  338.  
  339.         <article class="binside">
  340.  
  341.            
  342.             <h2 class="name"><span>
  343.  
  344.                 name
  345.  
  346.             </span></h2>
  347.  
  348.             <h3 class="group">
  349.  
  350.                 group
  351.  
  352.             </h3>
  353.  
  354.             <div class="details">
  355.  
  356.  
  357.                 <div class="tag">
  358.                     <span class="th th-calendar-1-o"></span>
  359.                     birthday:
  360.                 </div>
  361.  
  362.                 <div class="value">
  363.                     102297
  364.                 </div>
  365.  
  366.                 <div class="tag">
  367.                     name
  368.                 </div>
  369.  
  370.                 <div class="value">
  371.                     info
  372.                 </div>
  373.  
  374.             </div>            <!-- details end -->
  375.  
  376.         </article>          <!-- inside end -->
  377.  
  378.         <div class="bdesc">
  379.             <!-- please wrap all your paragraphs between <p></p> -->
  380.  
  381.             <p>description</p>
  382.  
  383.         </div>
  384.  
  385.     </article> <!-- bias box end -->
  386.  
  387.  
  388.  
  389.  
  390.  
  391. <!-- bias box start -->    <article class="bias">
  392.  
  393.         <figure class="bimg">
  394.  
  395.         <!-- bias image, will automatically crop as a square -->
  396.  
  397.             <img class="bimg" src="IMAGE URL"></img>
  398.            
  399.         </figure>
  400.  
  401.         <article class="binside">
  402.  
  403.            
  404.             <h2 class="name"><span>
  405.  
  406.                 name
  407.  
  408.             </span></h2>
  409.  
  410.             <h3 class="group">
  411.  
  412.                 group
  413.  
  414.             </h3>
  415.  
  416.             <div class="details">
  417.  
  418.  
  419.                 <div class="tag">
  420.                     <span class="th th-calendar-1-o"></span>
  421.                     birthday:
  422.                 </div>
  423.  
  424.                 <div class="value">
  425.                     102297
  426.                 </div>
  427.  
  428.                 <div class="tag">
  429.                     name
  430.                 </div>
  431.  
  432.                 <div class="value">
  433.                     info
  434.                 </div>
  435.  
  436.             </div>            <!-- details end -->
  437.  
  438.         </article>          <!-- inside end -->
  439.  
  440.         <div class="bdesc">
  441.             <!-- please wrap all your paragraphs between <p></p> -->
  442.  
  443.             <p>description</p>
  444.  
  445.         </div>
  446.  
  447.     </article> <!-- bias box end -->
  448.  
  449.  
  450.  
  451.  
  452.  
  453.  
  454. <!-- bias box start -->    <article class="bias">
  455.  
  456.         <figure class="bimg">
  457.  
  458.         <!-- bias image, will automatically crop as a square -->
  459.  
  460.             <img class="bimg" src="IMAGE URL"></img>
  461.            
  462.         </figure>
  463.  
  464.         <article class="binside">
  465.  
  466.            
  467.             <h2 class="name"><span>
  468.  
  469.                 name
  470.  
  471.             </span></h2>
  472.  
  473.             <h3 class="group">
  474.  
  475.                 group
  476.  
  477.             </h3>
  478.  
  479.             <div class="details">
  480.  
  481.  
  482.                 <div class="tag">
  483.                     <span class="th th-calendar-1-o"></span>
  484.                     birthday:
  485.                 </div>
  486.  
  487.                 <div class="value">
  488.                     102297
  489.                 </div>
  490.  
  491.                 <div class="tag">
  492.                     name
  493.                 </div>
  494.  
  495.                 <div class="value">
  496.                     info
  497.                 </div>
  498.  
  499.             </div>            <!-- details end -->
  500.  
  501.         </article>          <!-- inside end -->
  502.  
  503.         <div class="bdesc">
  504.             <!-- please wrap all your paragraphs between <p></p> -->
  505.  
  506.             <p>description</p>
  507.  
  508.         </div>
  509.  
  510.     </article> <!-- bias box end -->
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517. <!-- bias box start -->    <article class="bias">
  518.  
  519.         <figure class="bimg">
  520.  
  521.         <!-- bias image, will automatically crop as a square -->
  522.  
  523.             <img class="bimg" src="IMAGE URL"></img>
  524.            
  525.         </figure>
  526.  
  527.         <article class="binside">
  528.  
  529.            
  530.             <h2 class="name"><span>
  531.  
  532.                 name
  533.  
  534.             </span></h2>
  535.  
  536.             <h3 class="group">
  537.  
  538.                 group
  539.  
  540.             </h3>
  541.  
  542.             <div class="details">
  543.  
  544.  
  545.                 <div class="tag">
  546.                     <span class="th th-calendar-1-o"></span>
  547.                     birthday:
  548.                 </div>
  549.  
  550.                 <div class="value">
  551.                     102297
  552.                 </div>
  553.  
  554.                 <div class="tag">
  555.                     name
  556.                 </div>
  557.  
  558.                 <div class="value">
  559.                     info
  560.                 </div>
  561.  
  562.             </div>            <!-- details end -->
  563.  
  564.         </article>          <!-- inside end -->
  565.  
  566.         <div class="bdesc">
  567.             <!-- please wrap all your paragraphs between <p></p> -->
  568.  
  569.             <p>description</p>
  570.  
  571.         </div>
  572.  
  573.     </article> <!-- bias box end -->
  574.  
  575.  
  576. </main>
  577.  
  578. <!-- DONT TOUCH -->
  579. <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
  580.  
  581. </body>
  582. </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!