API tools faq
paste
southcodes

flow | about page

southcodes
Apr 17th, 2021 (edited)
954
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - 'flow' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.  
  10.  -->
  11. <!DOCTYPE html>
  12. <html>
  13. <head>
  14.     <title>{title}</title>
  15.  
  16.     <meta charset="UTF-8">
  17.     <meta name="viewport" content="width=device-width">
  18.     <meta name="keywords" content="">
  19.  
  20.     <link rel="shortcut icon" href="{favicon}">
  21.     <meta name="description" content="{MetaDescription}"/>
  22.  
  23.     <!-- fonts -->
  24.     <link rel="preconnect" href="https://fonts.gstatic.com">
  25.     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&family=Ubuntu+Mono&display=swap" rel="stylesheet">
  26.  
  27.     <!-- normalize -->
  28.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  29.    
  30. <style>
  31.  
  32. /* quick costumization */
  33.  
  34. :root {
  35.     --text: #333;
  36.     --background: rgb(255, 255, 255);
  37.     --links-color: #d865d8;
  38.     --hover-links-color: purple;
  39.     --circle-links-color: purple;
  40.     --hover-circle-links-color: #000;
  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}
  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:var(--text);background:var(--background);}
  61. a {text-decoration: none;color:var(--links-color);word-break:break-word;}
  62. a:hover {color:var(--hover-links-color)}
  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.  
  67. /*  header  */
  68.  
  69. header {
  70.     margin-bottom:3rem
  71. }
  72.  
  73. #container {
  74.     width:40rem;
  75.     margin:6rem auto 3rem;
  76.     max-width:80vw
  77. }
  78.  
  79. h1{
  80.     font-family: 'Ubuntu Mono', monospace;
  81. }
  82.  
  83. main {
  84.     display:flex;
  85.     flex-flow: row nowrap;
  86. }
  87.  
  88. nav ul,nav li {list-style-type:none;margin:0;padding:0;}
  89.  
  90. nav {
  91.     width:15rem;
  92.     max-width:10vw
  93. }
  94.  
  95. #about  {
  96.     font-size: .9rem;
  97.     letter-spacing: .03rem;
  98.     margin:0 1rem
  99. }
  100.  
  101. #links-navigation {
  102.     margin-top:1rem
  103. }
  104.  
  105. .circle-link {
  106.     width:1.5rem;
  107.     height:1.5rem;
  108.     border-radius: 100%;
  109.     transition-duration: .2s;
  110.     margin-bottom: 2.5rem;
  111. }
  112.  
  113. .circle-link:hover {
  114.     background:var(--hover-circle-links-color);
  115. }
  116.  
  117. .link-one {
  118.     background:var(--circle-links-color);
  119.     opacity:1
  120. }
  121.  
  122. .link-two {
  123.     background:var(--circle-links-color);
  124.     opacity:.5
  125. }
  126.  
  127. .link-three {
  128.     background:var(--circle-links-color);
  129.     opacity:.2
  130. }
  131. </style>
  132. </head>
  133. <body>
  134.  
  135. <section id="container">
  136.  
  137.     <header>
  138.         <h1>title</h1>
  139.     </header>
  140.  
  141.     <main>
  142.        
  143.  
  144.         <nav id="links-navigation"><ul>
  145.             <li title="link name"><a href="link"><div class="circle-link link-one"></div></a></li>
  146.            
  147.             <li title="link name"><a href="link"><div class="circle-link link-two"></div></a></li>
  148.            
  149.             <li title="link name"><a href="link"><div class="circle-link link-three"></div></a></li>
  150.         </ul></nav>
  151.        
  152.         <section id="about">
  153.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio rem expedita repellat facere qui unde explicabo laborum corporis laboriosam deleniti non quia quo, dolor, la <p> udantium, ex tempora ipsum illum ab!
  154.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio rem expedita repellat facere qui unde explicabo laborum corporis laboriosam deleniti non quia quo, dolor, laudantium, ex tempora ipsum illum ab!
  155.             <p>   Lorem ipsum dolora    <a href="">egegege</a> sit amet consectetur adipisicing elit. Distinctio rem expedita repellat facere qui unde explicabo laborum corporis laboriosam deleniti non quia quo, dolor, laudantium, ex tempora ipsum illum ab!
  156.         </section>
  157.  
  158.     </main>
  159.  
  160. </section>
  161.  
  162.  
  163. <!-- do not touch -->
  164. <div style="position:fixed;bottom:1rem;right:1rem;font-size:.8rem;letter-spacing: .03rem;">
  165.     <a target="_blank" href="https://southcodes.tumblr.com/">SC</a>
  166. </div>
  167.  
  168. </body>
  169. </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!