API tools faq
paste
Advertisement
southcodes

theme pack #1 links chloride

southcodes
Nov 2nd, 2020 (edited)
580
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.09 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - links page 'chloride' 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.     - show on click https://stackoverflow.com/questions/22246626/show-hide-children-on-parent-click
  10.     - colcade layout by https://github.com/desandro/colcade
  11.     - honeybee icons by https://honeybee.suiomi.com/
  12.  
  13.  -->
  14.  <!DOCTYPE html>
  15.  <html>
  16.  <head>
  17.      <title>{title}</title>
  18.  
  19.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.    
  21.      <meta charset="utf-8">
  22.  
  23.      <link rel="shortcut icon" href="{favicon}">
  24.      <meta name="description" content="{MetaDescription}"/>
  25.  
  26.      <!-- fonts -->
  27.      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Dancing+Script:wght@500;700&display=swap" rel="stylesheet">
  28.      
  29.      <!-- normalize -->
  30.      <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  31.  
  32.     <!-- honeybee -->
  33.     <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css">
  34.      
  35. <style>
  36.  
  37. /* quick custom colors */
  38.  
  39. :root{
  40.     --background:#fdfdff;
  41.     --text-color:#333;
  42.     --links:#130a73;
  43.     --links-hover-color: #477edc;
  44.     --accents:#e3eafe;
  45.     --icon-color: #4160a2;
  46.     --borders: #aebbf5
  47. }
  48.  
  49. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  50. .tmblr-iframe:hover {opacity:.8;}
  51.  
  52. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:links};}
  53. ::-webkit-scrollbar {width:6px;height:0}
  54. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  55.  
  56. pre {font-family:consolas;
  57.     white-space: pre-wrap;       /* css-3 */
  58.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  59.     white-space: -pre-wrap;      /* Opera 4- */
  60.     white-space: -o-pre-wrap;    /* Opera 7 */
  61.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  62.  
  63. body, figure{margin:0;padding:0}
  64. html{font: 14px 'Open Sans', sans-serif;}
  65. body {font-size:14px;color:var(--text-color);background:var(--background)}
  66. a {text-decoration: none;color:var(--links);word-break:break-word;}
  67. a:hover {color:var(--links-hover-color);}
  68. blockquote {margin:0;padding:0;}
  69. blockquote blockquote {
  70.     border-left:1px solid var(--borders);padding:.3rem 0 .3rem .6rem
  71. }
  72. img {max-width:100%;height: auto;display: block;margin:0}
  73. hr {border:0;border-top:1px solid #aaa;margin:0;}
  74.  
  75. #container {
  76.     display:flex;
  77.     flex-flow: row wrap;
  78.     align-items: space-between;
  79.     justify-content: space-around;
  80.     width:97%;
  81.     max-width:75rem;
  82.     margin:3rem auto 0rem;
  83. }
  84. /* links boxes */
  85.  
  86. .grid-col {
  87.     width: calc(100% / 3);
  88.     /* margin:1rem */
  89. }
  90.  
  91.  
  92.  
  93. .links-box {
  94.     width:75%;
  95.     max-width:20rem;
  96.     margin: 3rem auto 6rem;}
  97.  
  98. .links-box li{
  99.     padding: 0;margin:0;list-style-type: none;
  100.     padding:.3rem 0
  101. }
  102.  
  103. .box-title {
  104.     margin:0 0 .8rem;
  105.     font:500 1.3rem 'Montserrat', sans-serif;
  106. }
  107. .box-title span {
  108.     padding:0 .7rem ;
  109.     box-shadow:inset 0 -7px var(--borders)}
  110. .links-box-inside {
  111.     font-size:.9rem;
  112.     line-height:175%;
  113.     padding:1rem;
  114.     letter-spacing:.04rem;
  115.     box-sizing: border-box;
  116. }
  117.  
  118.  
  119. .regular-link:before {content:'› ';color:#888}
  120. .child-link:before {content:'- ';color:#888}
  121. .grandchild-link:before {content:'• ';color:#888}
  122.  
  123. .dropdown-child-title:after, .dropdown-grandchild-title:after {
  124.     content:' ⯆';
  125.     font-size: .8rem;
  126.     margin-right: .7rem;
  127. }
  128. .dropdown-child-title span,.dropdown-grandchild-title span {cursor:pointer}
  129.  
  130. .dropdown-child-title {
  131.     margin:.3rem 0;
  132.     font:400 .85rem 'Montserrat', sans-serif;
  133. }
  134.  
  135. .dropdown-grandchild-title {
  136.     margin:.3rem 0;
  137.     font:400 .9rem 'Montserrat', sans-serif;
  138. }
  139.  
  140. .dropdown-child,.dropdown-grandchild{
  141.     display:none;
  142.     margin-left:1rem;
  143. }
  144.  
  145. .dropdown-child {
  146.     font-size:.9rem;
  147.     letter-spacing: .05rem;
  148. }
  149.  
  150. .dropdown-grandchild{
  151.     font-size:.9rem;
  152.     letter-spacing: .07rem;
  153. }
  154.  
  155. /* bottom header */
  156.  
  157. #bottom-header {
  158.     padding:.5rem 2rem;
  159.     position:fixed;bottom:0;left:0;right:0;
  160.     background:var(--accents);
  161.     z-index:99999;
  162.     border-top:1px solid var(--borders);
  163. }
  164.  
  165. #bottom-nav ul,#bottom-nav ul li {margin:0;padding:0;vertical-align:middle;list-style-type:none}
  166.  
  167. #bottom-nav ul {
  168.     font:600 .9rem 'Montserrat', sans-serif;
  169.     text-transform:uppercase;
  170.     margin:auto;
  171.     max-width:40rem;
  172.     display:flex;
  173.     flex-flow:row wrap;
  174.     justify-content:space-around;
  175.     align-items:center;
  176.     letter-spacing:.04rem;
  177.     text-align:center;
  178. }
  179. #bottom-nav .th {
  180.     font-size:1.2rem;
  181.     display:block;
  182.     margin-bottom:.5rem;
  183.     border:2px solid white;
  184.     border-radius:100%;
  185.     padding:.4rem;
  186.     height:2rem;width:2rem;
  187.     line-height:2.4rem;
  188.     background:white;
  189.     color:var(--icon-color);
  190.     border:1px solid var(--borders);
  191. }
  192.  
  193. figure.bottom-header-icon {
  194.     margin:0 auto 1rem;
  195.     width:4rem;
  196.     height:4rem;
  197. }
  198.  
  199. img.bottom-header-icon {
  200.     width:100%;
  201.     height:100%;
  202.     object-fit:cover;
  203.     border-radius:100%;
  204.     border:2px solid white;
  205. }
  206. .bottom-header-icon {transition-duration:.4s;}
  207. .bottom-header-icon:hover {
  208.     opacity:.8;
  209. }
  210.  
  211.  
  212. @media only screen and (min-width:0px) and (max-width:599px) {
  213.  
  214.     .colthree {display:none}
  215.     .coltwo {display:none}
  216.     .grid-col {
  217.         width: calc(100%);
  218.         margin:0;
  219.     }
  220.    
  221. }
  222.  
  223.  
  224. @media only screen and (min-width:600px) and (max-width:699px) {
  225.  
  226.     .colthree {display:none}
  227.     .grid-col {
  228.         width: calc(100% / 2);
  229.     }
  230.    
  231. }
  232. </style>
  233. </head>
  234. <body>
  235.  
  236. <header id="bottom-header">
  237.    
  238.     <nav id="bottom-nav"><ul>
  239.                
  240.       <a href="/"><li><div class="th th-home"></div>home</li></a>
  241.  
  242.        
  243.         <a href="/"><li><figure class="bottom-header-icon"><img class="bottom-header-icon" src="BOTTOM ICON"/></figure></li></a>
  244.  
  245.         <a href="/"><li><div class="th th-user"></div>about</li></a>
  246.        
  247.     </ul></nav>
  248.    
  249. </header>
  250.  
  251.  
  252. <main id="container" class='grid'>
  253.  
  254. <div class="grid-col"></div>
  255. <div class="grid-col coltwo"></div>
  256. <div class="grid-col colthree"></div>
  257.  
  258. <!-- please keep this template handy, it's easy to lose yourself in this code -->
  259.  
  260. <article class="links-box">   <!-- start links box 1 -->
  261.  
  262.    <h2 class="box-title">
  263.      <!-- box title -->
  264.      <span>title</span>
  265.    </h2>
  266.  
  267.    <div class="links-box-inside">
  268.  
  269.  <li><a href="" class="regular-link">regular link</a></li>
  270.  
  271.        <h2 class="dropdown-child-title"><span>
  272.          child dropdown title
  273.        </span></h2>
  274.  
  275.          <div class="dropdown-child">
  276.            <!-- first level dropdown  -->
  277.            
  278.          <li><a href="" class="child-link">child 1</a></li>
  279.  
  280.          
  281.                <h3 class="dropdown-grandchild-title"><span>
  282.                  grandchild dropdown title
  283.                </span></h3>
  284.                
  285.                <div class="dropdown-grandchild">
  286.                  
  287.                  <!-- second level dropdown  -->
  288.            
  289.                  <li><a href="" class="grandchild-link">
  290.                    grandchild link 1
  291.                  </a></li>
  292.                
  293.                <li><a href="" class="grandchild-link">
  294.                    grandchild link 2
  295.                  </a></li>
  296.                
  297.                </div>
  298.  
  299.          <li><a href="" class="child-link">child 2</a></li>
  300.  
  301.          </div>
  302.  
  303.        <li><a href="" class="regular-link">regular link</a></li>
  304.      </div>
  305.  </article> <!-- end links box 1 -->
  306.    
  307.  
  308.  
  309. <article class="links-box">   <!-- start links box 2 -->
  310.  
  311.    <h2 class="box-title">
  312.      <!-- box title -->
  313.      <span>title</span>
  314.    </h2>
  315.  
  316.    <div class="links-box-inside">
  317.  
  318.  <li><a href="" class="regular-link">regular link</a></li>
  319.  
  320.        <h2 class="dropdown-child-title"><span>
  321.          child dropdown title
  322.        </span></h2>
  323.  
  324.          <div class="dropdown-child">
  325.            <!-- first level dropdown  -->
  326.            
  327.          <li><a href="" class="child-link">child 1</a></li>
  328.  
  329.          
  330.                <h3 class="dropdown-grandchild-title"><span>
  331.                  grandchild dropdown title
  332.                </span></h3>
  333.                
  334.                <div class="dropdown-grandchild">
  335.                  
  336.                  <!-- second level dropdown  -->
  337.            
  338.                  <li><a href="" class="grandchild-link">
  339.                    grandchild link 1
  340.                  </a></li>
  341.                
  342.                <li><a href="" class="grandchild-link">
  343.                    grandchild link 2
  344.                  </a></li>
  345.                
  346.                </div>
  347.  
  348.          <li><a href="" class="child-link">child 2</a></li>
  349.  
  350.          </div>
  351.  
  352.        <li><a href="" class="regular-link">regular link</a></li>
  353.      </div>
  354.  </article> <!-- end links box 2 -->
  355.    
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363. </main>
  364.  
  365.  
  366. <a style="position:fixed;bottom:1.3rem;right:1.3rem;font-size:15px;line-height:14px;height:14px;padding:3px;color:{color:links};text-align:center;letter-spacing:.7px;z-index:9999999" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">sc</a>
  367.  
  368.  
  369. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  370. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  371. <script src="https://npmcdn.com/colcade@0/colcade.js"></script>
  372. <script>
  373. $(document).ready(function(){
  374.  $(".dropdown-child-title").click(function (e) {
  375.    e.stopPropagation();
  376.    jQuery(this).siblings('.dropdown-child').slideToggle('slow');
  377. });  
  378.  
  379.  $(".dropdown-grandchild-title").click(function (e) {
  380.    e.stopPropagation();
  381.    jQuery(this).siblings('.dropdown-grandchild').slideToggle('slow');
  382.  });  
  383.  
  384.    $('#container').colcade({
  385.    columns: '.grid-col',
  386.    items: '.links-box'
  387.  });
  388.  
  389. });
  390. </script>
  391. </body>
  392. </html>
  393.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!