API tools faq
paste
southcodes

tags #3 ZERO to ONE

southcodes
Jun 14th, 2020 (edited)
1,401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.67 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     tags/navi page #3 'ZERO to ONE' by skye southcodes.tumblr.com
  4.     modify as you please but please do not touch the credit
  5.     any errors? have questions? need help? feel free to contact me: southcodes.tumblr.com/inbox
  6.  
  7.     - honeybee icons by @suiomi
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.  
  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.     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Raleway:wght@600;700&display=swap" rel="stylesheet">
  24.    
  25.     <!-- normalize css -->
  26.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  27.    
  28.     <!-- honeybee icon font by suiomi --> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  29.  
  30. <style type="text/css">
  31.    
  32.     /* quick color customization*/
  33.  
  34. :root {
  35.     --background: #fefefe;
  36.  
  37.     /* links color */
  38.     --links: #666;
  39.  
  40.     /* links hover color */
  41.     --links-hover: blue;
  42.  
  43.     /* header icons color */
  44.     --icons-color: #6db2e3;
  45.  
  46.     /* lines color */
  47.     --line-color:#ddd;
  48.  
  49.     /* background color of the circles */
  50.     --inside-dots: #caecfa;
  51.  
  52.     /* background of the tags boxes & header*/
  53.     --box-background:#fff;
  54.  
  55.     /* boxes shadow color*/
  56.     --box-shadow: #d9d9d9;
  57.  
  58.     /* background of the title in the boxes */
  59.     --titles-background: #f2f7fa;
  60. }
  61.  
  62. /*----------------------*/
  63.  
  64. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  65. .tmblr-iframe:hover {opacity:.8;}
  66.  
  67. body, figure{margin: 0;padding: 0}
  68. html{font-size: 14px}
  69. body {font: 1rem 'Open Sans', sans-serif;color:#333;background: var(--background)}
  70. a {text-decoration: none;color:var(--links);}
  71. a:hover {color:var(--links-hover);}
  72. b {font-weight: 600}
  73.  
  74. /*  header  */
  75.  
  76. header {
  77.     position: relative;
  78.     margin: 3rem auto;
  79.     width: 48rem;
  80.     max-width: 95vw;
  81.     box-sizing: border-box;
  82. }
  83.  
  84. #hline {
  85.     width: 100%;height: 1px;
  86.     background: var(--line-color);
  87.     position: absolute;top:50%;
  88.     z-index: -4}
  89. #hline:before {
  90.     content: '';
  91.     position: absolute;left:0;bottom: -.5rem;
  92.     width: 1rem;height: 1rem;
  93.     background: var(--inside-dots);
  94.     border:1px solid var(--line-color);
  95.     border-radius: 100%;
  96. }
  97.  
  98. #btitle {
  99.     margin: -3.5rem 0 0 1rem;
  100.     width: 50%;
  101.     position: relative;
  102.     z-index: 9;
  103.     font:600 2.3rem 'Raleway', sans-serif;
  104. }
  105.  
  106. header article {
  107.     background: var(--box-background);
  108.     border:1px solid var(--line-color);
  109.     width: calc(50% - 4px);
  110.     float: right;
  111.     padding: 1rem;
  112.     box-sizing: border-box;
  113.     border-radius: 4px;
  114.     box-shadow: 3px 3px 3px var(--box-shadow)
  115. }
  116.  
  117. #bio {
  118.     text-align: center;
  119.     margin-bottom: 2rem;
  120.     font-size: .9rem;
  121.     line-height: 180%;
  122.     color: #555;
  123.     letter-spacing: .025rem
  124. }
  125.  
  126. #dd {
  127.     display: none;
  128.     width: calc(50% - 4px);
  129.     box-sizing: border-box;
  130.     position: absolute;right: 0;
  131.     z-index: 99;
  132.     margin:1rem 0 0;
  133.     border: 1px solid var(--line-color);
  134.     border-top: 0;
  135.     background: var(--box-background);
  136.     padding: 1rem;
  137.     box-shadow: 3px 3px 3px var(--box-shadow)
  138. }
  139. .th-equal-o {transition-duration: .4s}
  140. .th-equal-o:hover {transform: rotate(90deg);cursor: pointer;}
  141.  
  142. /*  nav  */
  143.  
  144. #navi ul,#navi ul li,#dd ul,#dd ul li {list-style-type:none;margin:0;padding:0;}
  145.  
  146. #navi ul li {display: inline-block;}
  147. #navi ul, #dd ul {
  148.     display: flex;
  149.     flex-flow: row wrap;
  150.     justify-content: space-around;
  151. }
  152.  
  153. #navi .th {font-size: 1.4rem;color: var(--icons-color)}
  154.  
  155. #dd ul li {
  156.     display: inline-block;
  157.     font-weight: 600;
  158.     text-transform: uppercase;
  159.     font-size: .9rem;
  160.     border-bottom: 1px solid var(--icons-color);
  161.     padding: 0 .3rem .3rem;
  162.     margin-bottom: .8rem
  163. }
  164.  
  165. /* main */
  166.  
  167. main {
  168.     width: 40rem;
  169.     margin: 4rem auto;
  170.     position: relative;
  171.     display: grid;
  172.     grid-row-gap: 50px;
  173.     grid-template-columns: auto auto;
  174. }
  175.  
  176. #line {
  177.     width: 1px;
  178.     height: 100%;
  179.     position: absolute;
  180.     left: calc(100% - 50%);
  181.     margin: auto;
  182.     z-index: 9;
  183.     background: var(--line-color)}
  184. #line:after,#line:before {
  185.     content: '';
  186.     position: absolute;
  187.     width: 1rem;
  188.     height: 1rem;
  189.     background: var(--inside-dots);
  190.     border-radius: 100%;
  191.     bottom: 0;
  192.     margin-left:-.5rem;
  193.     border: 1px solid var(--line-color);}
  194. #line:before {top: -.5rem;}
  195.  
  196. .box {
  197.     width: 20rem;
  198.     margin: auto;
  199.     box-sizing: border-box;
  200.     position: relative;}
  201. .box:nth-of-type(odd){margin-left: calc(-4rem + 1px)}
  202. .box:nth-of-type(even){margin-right: -4rem}
  203. .box:nth-of-type(odd):after,.box:nth-of-type(even):after {
  204.     content: '';
  205.     position: absolute;top:-1px;right:-4rem;
  206.     width: 4.5rem;height: 1px;
  207.     background:var(--line-color)}
  208. .box:nth-of-type(even):after {left:-4rem;}
  209. .box:first-of-type:after {background: var(--line-color);right: -4rem}
  210.  
  211. .boxtit {
  212.     font: 700 1rem 'Raleway', sans-serif;
  213.     letter-spacing: .07rem;
  214.     border: 1px solid var(--line-color);
  215.     margin: -1px  0 .4rem 0;
  216.     padding: .8rem;
  217.     background: var(--titles-background);
  218.     /*font-style: italic;*/
  219.     box-shadow: 2px 2px 2px var(--box-shadow);
  220.     /*color: #4c86b0;*/
  221.     /*color: var(--icons-color)*/
  222.     text-transform: uppercase;
  223.     text-align: center;
  224. }
  225.  
  226. .tags ul,.tags ul li {list-style-type: none;margin:0;padding: 0}
  227. .tags {
  228.     line-height: 180%;
  229.     border-radius: 5px;
  230.     font-size: .9rem;
  231.     letter-spacing: .03rem;
  232.     border: 1px solid var(--line-color);
  233.     margin: -1px  0 0 0;
  234.     padding: .6rem .8rem;
  235.     background: var(--box-background);
  236.     box-shadow: 3px 3px 3px var(--box-shadow)}
  237. .tags ul li {margin-bottom: .8rem;}
  238. .tags ul li a{display: block;}
  239. .tags ul li a:before{
  240.     content: '› ';
  241.     font-size: 1.3rem;
  242.     color: var(--icons-color);
  243. }
  244. .tags ul li a:hover:before {visibility: hidden;}
  245. .tags ul li:last-of-type{margin-bottom: 0}
  246.  
  247.  
  248. /* DONT TOUCH*/
  249. #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}
  250.  
  251. /* MEDIA */
  252.  
  253. @media only screen and (min-width:0px) and (max-width:699px) {
  254.  
  255.  
  256.     main {
  257.         position: relative;
  258.         display: block;
  259.         width: 100%;
  260.         margin: auto
  261.     }
  262.  
  263.     .box {
  264.         width: 20rem;
  265.         padding: 1rem;
  266.         box-sizing: border-box;
  267.         position: relative;
  268.         display: block;
  269.         background: #fefefe;
  270.         margin: 10rem auto 0;
  271.     }
  272.  
  273.     .box:before {
  274.         content: '';
  275.         width: 1rem;height: 1rem;
  276.         background:  var(--inside-dots);
  277.         position: absolute;
  278.         bottom: -5.5rem;
  279.         left: calc(100% - 50% - .5rem - 1px);
  280.         border-radius: 100%;
  281.         border: 1px solid var(--line-color)}
  282.  
  283.  
  284.     .box:last-of-type:before{display:none;}
  285.     .box:first-of-type {margin-top: 0rem}
  286.     .box:last-of-type {margin-bottom: 2rem;}
  287.  
  288.     .box:nth-of-type(odd){margin-left: auto}
  289.     .box:nth-of-type(even){margin-right: auto}
  290.  
  291.     .box:nth-of-type(odd):after,.box:nth-of-type(even):after {display: none;}
  292.    
  293.     #line {z-index: -1;}
  294.  
  295.     #line:before {display: none;}
  296. }
  297. </style>
  298. </head>
  299. <body>
  300.  
  301. <header>
  302.     <div id="hline">
  303.         <h1 id="btitle">Title</h1>
  304.     </div>
  305.  
  306.     <article>
  307.  
  308.         <p id="bio">
  309.             Description
  310.         </p>
  311.  
  312.         <nav id="navi"><ul>
  313.             <li><a title="home" href="/"><i class="th th-home-o"></i></a></li>
  314.  
  315.             <li><a title="inbox" href="/ask"><i class="th th-envelope-o"></i></a></li>
  316.  
  317.             <li><a title="dashboard" href="https://tumblr.com"><i class="th th-tumblr-o"></i></a></li>
  318.  
  319.             <li id="opendd"><i class="th th-equal-o" title="links"></i></li>
  320.         </ul>
  321.    
  322.  
  323.         <div id="dd">
  324.             <ul>
  325.                 <!-- add as many as you want -->
  326.                 <li><a href="#">link 1</a></li>
  327.                 <li><a href="#">link 2</a></li>
  328.                 <li><a href="#">link 3</a></li>
  329.                 <li><a href="#">link 4</a></li>
  330.             </ul>
  331.         </div>
  332.     </nav>
  333.     </article>
  334.  
  335.     <div style="clear: both;"></div>
  336. </header>
  337.  
  338. <main>
  339. <div id="line"></div>
  340.  
  341. <!--     BOX TEMPLATE
  342.  
  343.         <article class="box">
  344.             <h2 class="boxtit">
  345.                 title
  346.             </h2>
  347.  
  348.             <div class="tags">
  349.                 <ul>
  350.                 <li><a href="tag link">tag name</a></li>
  351.                 </ul>
  352.             </div>
  353.         </article>
  354.  
  355.  -->
  356.  
  357.          <article class="box">
  358.             <h2 class="boxtit">
  359.                 title
  360.             </h2>
  361.  
  362.             <div class="tags">
  363.                 <ul>
  364.                 <li><a href="tag link">tag name</a></li>
  365.                 </ul>
  366.             </div>
  367.         </article>
  368.  
  369.  
  370.                 <article class="box">
  371.             <h2 class="boxtit">
  372.                 title
  373.             </h2>
  374.  
  375.             <div class="tags">
  376.                 <ul>
  377.                 <li><a href="tag link">tag name</a></li>
  378.                 </ul>
  379.             </div>
  380.         </article>
  381.  
  382.  
  383. </main>
  384.  
  385.  
  386. <!-- DON'T TOUCH -->
  387. <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
  388.  
  389. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  390. <script>
  391. $( document ).ready(function() {
  392.    $('#opendd').click(function(){
  393.        $('#dd').slideToggle(500)
  394.    })
  395. });
  396. </script>
  397. </body>
  398. </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!