API tools faq
paste
Advertisement
southcodes

calendar #1: filter

southcodes
Feb 13th, 2017
1,235
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     calendar #1 'filter' by sur 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/ask
  7.    
  8. -->
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13.     <title>{Title}</title>
  14.  
  15.     <link rel="shortcut icon" href="{favicon}">
  16.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18.     <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,900,700|Montserrat:500" rel="stylesheet">
  19.  
  20. <style type="text/css">
  21.  
  22. ::-webkit-scrollbar-thumb:vertical {
  23.     background-color: #bbb;
  24.     height:0px;
  25.     border-right: 3px solid #fff;
  26.     border-top: 5px solid #fff;
  27.     border-bottom: 5px solid #fff;
  28. }
  29.  
  30. ::-webkit-scrollbar {
  31.     background-color: inherit;
  32.     height:0px;
  33.     width:4px;
  34. }
  35.  
  36. .tmblr-iframe {
  37.     margin:10px;
  38.     opacity:.2;
  39.     -moz-transition-duration: 0.2s;
  40.     -o-transition-duration: 0.2s;
  41.     -webkit-transition-duration: 0.2s;
  42.     transition-duration: 0.2s;
  43. }
  44.  
  45. .tmblr-iframe:hover{
  46.     opacity:.65;
  47.     -moz-transition-duration: 0.6s;
  48.     -o-transition-duration: 0.6s;
  49.     -webkit-transition-duration: 0.6s;
  50.     transition-duration: 0.6s;
  51. }
  52.  
  53. #s-m-t-tooltip{
  54.     font-family:calibri;
  55.     max-width:300px;
  56.     margin-top:25px;
  57.     margin-left:15px;
  58.     z-index:999999;
  59.     letter-spacing:1.6px;
  60.     text-transform:uppercase;
  61.     font-size:8.5px;
  62.     border: solid 1px #ddd;
  63.     background-color:#fcfcfc;
  64.     color:#666;
  65.     padding:3px 5px;
  66. }
  67.  
  68. body {
  69.     color:#666;
  70.     font-size:14px;
  71.     font-family: 'Roboto', sans-serif;
  72.     background:#fcfcfc;
  73. }
  74.  
  75. a {
  76.     color:#8c8c8c;
  77.     text-decoration:none;
  78.     -moz-transition-duration: 0.6s;
  79.     -o-transition-duration: 0.6s;
  80.     -webkit-transition-duration: 0.6s;
  81.     transition-duration: 0.6s;
  82. }
  83.  
  84. a:hover {
  85.     color:#000;
  86.     -moz-transition-duration: 0.6s;
  87.     -o-transition-duration: 0.6s;
  88.     -webkit-transition-duration: 0.6s;
  89.     transition-duration: 0.6s;
  90. }
  91.  
  92. .topbar {
  93.     width:100%;
  94.     height:100px;
  95.     position: fixed;
  96.     border-bottom: 1px solid #ddd;
  97.     top:0;
  98.     left:0;
  99.     right:0;
  100.     background:white;
  101. }
  102.  
  103. .simg {
  104.     width:70px;
  105.     display:inline-block;
  106.     margin:0px;}
  107. .simg img {
  108.     width:70px;
  109.     border-radius:4px;
  110.     margin:0px;
  111. }
  112.  
  113. .bar {width:433px; margin:15px auto 0;}
  114. .bar hr {
  115.     width:360px;
  116.     border-color:#ddd;
  117.     border-right:0px;
  118.     border-left:0px;
  119.     border-top:0px;
  120.     margin-left:-3px;
  121. }
  122.  
  123. .nav {
  124.     display:inline-block;
  125.     vertical-align:top;
  126.     margin-top:12px;}
  127. .nav span {
  128.     text-transform:uppercase;
  129.     font-size:11px;
  130.     letter-spacing:1.2px;
  131.     font-family: Roboto;
  132.     font-weight:300;
  133.     float:right;
  134. }
  135.  
  136. .links {
  137.     text-transform:uppercase;
  138.     font-size:12.5px;
  139.     letter-spacing:1.2px;
  140.     font-family: Roboto;
  141.     font-weight:100;
  142.     margin: 0 0 7px 20px;}
  143. .links a{color:#333; padding-right:13px;}
  144. .links a:last-child {padding-right:0px;}
  145. .links a:hover {color:#333; text-shadow:0 0 .5px #333;}
  146.  
  147. .searchbar {float:right;margin:88px 50px 0 0;}
  148. #myInput {
  149.     background:#fcfcfc;
  150.     border:1px solid #eee;
  151.     padding:3px 0px 3px 8px;
  152.     border-radius:8px;
  153.     color:#000;
  154. }
  155.  
  156. .content {margin: 150px auto 100px;}
  157.  
  158. .month {
  159.     width:28%;
  160.     min-width:100px;
  161.     border: 4px solid #f1f1f1;
  162.     border-top: 2px solid #f1f1f1;
  163.     border-radius:3px;
  164.     margin:20px auto;
  165.     box-shadow: 4px 4px 5px #ddd;
  166.     background:white;
  167. }
  168.  
  169. .mname {
  170.     border-top-left-radius: 1px;
  171.     border-top-right-radius: 1px;
  172.     padding:7px 5px;
  173.     text-align:center;
  174.     background:#fff5ef;                    /* month mame background */
  175.     color:#444;
  176.     text-transform:uppercase;
  177.     font-size:15px;
  178.     letter-spacing:.8px;
  179.     font-family: 'Montserrat', sans-serif;
  180.     font-weight:500;
  181. }
  182.  
  183. .day {
  184.     font-size:12px;
  185.     font-weight:bold;
  186.     letter-spacing:1px;
  187.     font-family: 'Montserrat', sans-serif;
  188.     text-transform:uppercase;
  189.     background: #fff5ef;                  /* day background */
  190.     padding: 5px;
  191.     text-align:center;
  192.     font-weight:900;
  193.     color:#555;
  194. }
  195.  
  196. .time {
  197.     text-transform:uppercase;
  198.     font-weight:700;
  199.     font-size:12px;
  200. }
  201.  
  202. .events {line-height:20px;}
  203.  
  204. .bottombar {
  205.     width:100%;
  206.     padding:13px 0;
  207.     background:white;
  208.     position:fixed;
  209.     bottom:0px;
  210.     right:0px;
  211.     left:0px;
  212.     border-top: 1px solid #ddd;
  213.     font-size:11px;
  214.     letter-spacing:1px;
  215. }
  216.  
  217. .refbox {margin:0 50px 0 50px;}
  218. .refs {
  219.     width:68%;
  220.     line-height:18px;
  221.     font-size:13px;
  222.     letter-spacing:1px;
  223.     color:#444;
  224.     text-align:center;
  225.     line-height:20px;}
  226. .refst {
  227.     display:block;
  228.     max-width:300px;
  229.     font-family: 'Montserrat', sans-serif;
  230.     font-weight:500;
  231.     font-size:14.5px;
  232.     text-transform:uppercase;
  233.     float:right;
  234.     color:#222;
  235.     font-weight:500;
  236. }
  237.  
  238. #myUL {
  239.     list-style-type: none;
  240.     padding:0;
  241.     margin: 0;
  242.     display: -webkit-flex;
  243.     display: flex;
  244.     -webkit-flex-wrap: wrap;
  245.     flex-wrap: wrap;
  246.     -webkit-align-content: center;
  247.     align-content: center;}
  248. #myUL li {display: block; padding:6px 7px;
  249.     -moz-transition-duration: 0.5s;
  250.     -o-transition-duration: 0.5s;
  251.     -webkit-transition-duration: 0.5s;
  252.     transition-duration: 0.5s;}
  253. #myUL li:nth-child(odd) {
  254.     background-color: #fff}               /* odd row background */
  255. #myUL li:nth-child(even) {
  256.     background-color: #f7f7f7}          /* even row background */
  257. #myUL li:hover {
  258.     background-color: #fffaf7}        /* color on hover */
  259.  
  260. </style></head><body><div class="container"><div class="topbar"><div class="searchbar"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Filter through events.."></div><div class="bar"><div class="simg"><a href="/">
  261.  
  262.             <!--    image   -->
  263.     <img src="IMAGE URL"/>
  264.        
  265. </a></div><div class="nav"><div class="links">
  266.    
  267.             <!--    links   -->
  268.     <a href="/">index</a>
  269.     <a href="/ask">inbox</a>
  270.     <a href="/">link 3</a>
  271.  
  272. <!--    dont touch pls <3   --><a href="https://southcodes.tumblr.com" title ="southcodes">theme</a></div><hr><span>
  273.  
  274.             <!--    title   -->  
  275. 2017 calendar
  276.  
  277. </span></div></div></div><div class="content"><ul id="myUL">
  278.  
  279.             <!--    month template
  280. <div class="month">
  281.     <div class="mname">month</div>
  282.    
  283. <div class="events">
  284.     <div class="day">day 00TH</div>
  285.    
  286.     <li><span class="time">00:00PM</span> event #1</li>
  287.     <li>event #2</li>
  288.  
  289.     <div class="day">day 00TH</div>
  290.     <li>event #3</li>
  291.    
  292.     <li><span class="time">00:00PM</span> event #4
  293.     </li>
  294. </div></div>
  295. -->
  296.  
  297.  
  298.  
  299. <!--    month start    -->
  300. <div class="month">
  301.     <div class="mname">january</div>
  302.    
  303. <div class="events">
  304.     <div class="day">day 00TH</div>
  305.    
  306.     <li><span class="time">00:00PM</span> event #1</li>
  307.     <li>event #2</li>
  308.  
  309.     <div class="day">day 00TH</div>
  310.     <li>event #3</li>
  311.    
  312.     <li><span class="time">00:00PM</span> event #4
  313.     </li>
  314. </div></div>
  315. <!--    month end    -->
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324. <!--    month start    -->
  325. <div class="month">
  326.     <div class="mname">february</div>
  327.    
  328. <div class="events">
  329.     <div class="day">day 00TH</div>
  330.    
  331.     <li><span class="time">00:00PM</span> event #1</li>
  332.     <li>event #2</li>
  333.  
  334.     <div class="day">day 00TH</div>
  335.     <li>event #3</li>
  336.    
  337.     <li><span class="time">00:00PM</span> event #4
  338.     </li>
  339. </div></div>
  340. <!--    month end    -->
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349. <!--    month start    -->
  350. <div class="month">
  351.     <div class="mname">march</div>
  352.    
  353. <div class="events">
  354.     <div class="day">day 00TH</div>
  355.    
  356.     <li><span class="time">00:00PM</span> event #1</li>
  357.     <li>event #2</li>
  358.  
  359.     <div class="day">day 00TH</div>
  360.     <li>event #3</li>
  361.    
  362.     <li><span class="time">00:00PM</span> event #4
  363.     </li>
  364. </div></div>
  365. <!--    month end    -->
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374. <!--    month start    -->
  375. <div class="month">
  376.     <div class="mname">april</div>
  377.    
  378. <div class="events">
  379.     <div class="day">day 00TH</div>
  380.    
  381.     <li><span class="time">00:00PM</span> event #1</li>
  382.     <li>event #2</li>
  383.  
  384.     <div class="day">day 00TH</div>
  385.     <li>event #3</li>
  386.    
  387.     <li><span class="time">00:00PM</span> event #4
  388.     </li>
  389. </div></div>
  390. <!--    month end    -->
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  
  399. <!--    month start    -->
  400. <div class="month">
  401.     <div class="mname">may</div>
  402.    
  403. <div class="events">
  404.     <div class="day">day 00TH</div>
  405.    
  406.     <li><span class="time">00:00PM</span> event #1</li>
  407.     <li>event #2</li>
  408.  
  409.     <div class="day">day 00TH</div>
  410.     <li>event #3</li>
  411.    
  412.     <li><span class="time">00:00PM</span> event #4
  413.     </li>
  414. </div></div>
  415. <!--    month end    -->
  416.  
  417.  
  418.  
  419.  
  420.  
  421.  
  422.  
  423.  
  424. <!--    month start    -->
  425. <div class="month">
  426.     <div class="mname">june</div>
  427.    
  428. <div class="events">
  429.     <div class="day">day 00TH</div>
  430.    
  431.     <li><span class="time">00:00PM</span> event #1</li>
  432.     <li>event #2</li>
  433.  
  434.     <div class="day">day 00TH</div>
  435.     <li>event #3</li>
  436.    
  437.     <li><span class="time">00:00PM</span> event #4
  438.     </li>
  439. </div></div>
  440. <!--    month end    -->
  441.  
  442.  
  443.  
  444.  
  445.  
  446.  
  447.  
  448.  
  449. <!--    month start    -->
  450. <div class="month">
  451.     <div class="mname">july</div>
  452.    
  453. <div class="events">
  454.     <div class="day">day 00TH</div>
  455.    
  456.     <li><span class="time">00:00PM</span> event #1</li>
  457.     <li>event #2</li>
  458.  
  459.     <div class="day">day 00TH</div>
  460.     <li>event #3</li>
  461.    
  462.     <li><span class="time">00:00PM</span> event #4
  463.     </li>
  464. </div></div>
  465. <!--    month end    -->
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472.  
  473.  
  474. <!--    month start    -->
  475. <div class="month">
  476.     <div class="mname">august</div>
  477.    
  478. <div class="events">
  479.     <div class="day">day 00TH</div>
  480.    
  481.     <li><span class="time">00:00PM</span> event #1</li>
  482.     <li>event #2</li>
  483.  
  484.     <div class="day">day 00TH</div>
  485.     <li>event #3</li>
  486.    
  487.     <li><span class="time">00:00PM</span> event #4
  488.     </li>
  489. </div></div>
  490. <!--    month end    -->
  491.  
  492.  
  493.  
  494.  
  495.  
  496.  
  497.  
  498.  
  499. <!--    month start    -->
  500. <div class="month">
  501.     <div class="mname">september</div>
  502.    
  503. <div class="events">
  504.     <div class="day">day 00TH</div>
  505.    
  506.     <li><span class="time">00:00PM</span> event #1</li>
  507.     <li>event #2</li>
  508.  
  509.     <div class="day">day 00TH</div>
  510.     <li>event #3</li>
  511.    
  512.     <li><span class="time">00:00PM</span> event #4
  513.     </li>
  514. </div></div>
  515. <!--    month end    -->
  516.  
  517.  
  518.  
  519.  
  520.  
  521.  
  522.  
  523.  
  524. <!--    month start    -->
  525. <div class="month">
  526.     <div class="mname">october</div>
  527.    
  528. <div class="events">
  529.     <div class="day">day 00TH</div>
  530.    
  531.     <li><span class="time">00:00PM</span> event #1</li>
  532.     <li>event #2</li>
  533.  
  534.     <div class="day">day 00TH</div>
  535.     <li>event #3</li>
  536.    
  537.     <li><span class="time">00:00PM</span> event #4
  538.     </li>
  539. </div></div>
  540. <!--    month end    -->
  541.  
  542.  
  543.  
  544.  
  545.  
  546.  
  547.  
  548.  
  549. <!--    month start    -->
  550. <div class="month">
  551.     <div class="mname">november</div>
  552.    
  553. <div class="events">
  554.     <div class="day">day 00TH</div>
  555.    
  556.     <li><span class="time">00:00PM</span> event #1</li>
  557.     <li>event #2</li>
  558.  
  559.     <div class="day">day 00TH</div>
  560.     <li>event #3</li>
  561.    
  562.     <li><span class="time">00:00PM</span> event #4
  563.     </li>
  564. </div></div>
  565. <!--    month end    -->
  566.  
  567.  
  568.  
  569.  
  570.  
  571.  
  572.  
  573.  
  574. <!--    month start    -->
  575. <div class="month">
  576.     <div class="mname">december</div>
  577.    
  578. <div class="events">
  579.     <div class="day">day 00TH</div>
  580.    
  581.     <li><span class="time">00:00PM</span> event #1</li>
  582.     <li>event #2</li>
  583.  
  584.     <div class="day">day 00TH</div>
  585.     <li>event #3</li>
  586.    
  587.     <li><span class="time">00:00PM</span> event #4
  588.     </li>
  589. </div></div>
  590. <!--    month end    -->
  591.  
  592.  
  593.  
  594.  
  595.  
  596. <!-- if you dont want the references bar, delete from here+ -->
  597.  
  598. <div class="bottombar"><div class="refbox"><div class="refst">
  599.  
  600. <!-- title -->
  601.     quick references
  602.    
  603. </div><div class="refs">
  604.  
  605. <!-- references -->
  606.     ref 1: meaning | ref 2: meaning | ref 3: meaning | ref 4: meaning | ref 5: meaning | ref 5: meaning | ref 6: meaning
  607.    
  608. </div></div></div>
  609. <!-- +to here -->
  610.  
  611. </div></body>
  612. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  613. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  614. <script>
  615. (function($){
  616. $(document).ready(function(){
  617. $("a[title]").style_my_tooltips({
  618. tip_follows_cursor:true,
  619. tip_delay_time:30,
  620. tip_fade_speed:300,
  621. attribute:"title"
  622. });
  623. });
  624. })(jQuery);
  625. </script>
  626. <script>
  627. function myFunction() {
  628.     var input, filter, ul, li, a, i;
  629.     input = document.getElementById("myInput");
  630.     filter = input.value.toUpperCase();
  631.     ul = document.getElementById("myUL");
  632.     li = ul.getElementsByTagName("li");
  633.     for (i = 0; i < li.length; i++) {
  634.         a = li[i];
  635.         if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
  636.             li[i].style.display = "";
  637.         } else {
  638.             li[i].style.display = "none";
  639.         }
  640.     }
  641. }
  642. </script>
  643. </html>
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!