API tools faq
paste
Petra1999

BIRTHDAY PAGE 01 | cloudythms.tumblr.com

Petra1999
Aug 17th, 2018
2,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" href="{Favicon}"/><meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.  
  3.  <!-----------------------------------------------------------------------
  4.  
  5.  
  6.        {   cloudythms
  7.                     birthday page 01    }
  8.          
  9.  
  10.                        by
  11.             cloudythms.tumblr.com
  12.       contact me if you have questions!
  13.  
  14.  
  15. ......  rules  ......
  16.  
  17. * edit as much as you want
  18. * do not remove the credit
  19. * do not steal parts of my codes
  20. * do not redistribute or use as base
  21.  
  22.  
  23. ......  guide  ......
  24.  
  25. > HOW TO SEARCH
  26.   1. Make sure you have already clicked somewhere in the code
  27.   2. Press Ctrl and F
  28.   3. A little "search for" window should open
  29.  
  30. > ADDING CONTENT:
  31.   Search for "edit from here",
  32.   you will be working between that line and "to here".
  33.   After the "to here" line there's a template to copy.
  34.   Follow the guide there.
  35.  
  36. > CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  37.   Search for "page title",
  38.   follow the guide there.
  39.  
  40. > CHANGING HEADER TITLE/LINKS:
  41.   Search for "edit header here",
  42.   follow the guide there.
  43.  
  44. > CHANGING THE COLORS/SIZES:
  45.  Search for "variables",
  46.  follow the guide there.
  47.  If you don't want to use specific colors for months,
  48.  search for "month colors" and follow the guide there.
  49.  
  50. > SHOWING TUMBLR CONTROLS:
  51.   (Tumblr controls are the buttons on the top right corner
  52.   of blogs, like the follow, block, dashboard button etc.)
  53.   By default, my page themes have the tumblr controls hidden.
  54.   If you want them to show, search for "hide tumblr controls"
  55.   and delete the line below it.
  56.  
  57.  
  58.  
  59. ......  credits  ......
  60.  
  61. svg icons:          flaticon.com
  62. icon font:          fontawesome / ionicons / linearicons
  63. fonts:              fonts.google.com
  64. tumblr controls:    @cyantists
  65. smoothscroll:       @zacharyfury
  66. tooltips:           @tutorial-baby
  67.  
  68. full credits:       cloudythms.tumblr.com/credits
  69.  
  70.  
  71. ---------------------------------------------------------------------->
  72.  
  73.  
  74. <!-- Page Title
  75. (Text that appears on the tab / browser window)
  76. Change the text between <title> and </title>.
  77. Write {Title} to let your blogtitle show. -->
  78. <title>
  79. Birthdays
  80. </title>
  81.  
  82.  
  83.  
  84.  
  85. <!-- Variables
  86.  
  87. COLORS:
  88. Only change the color codes (after the : and before the ;)
  89. Make sure there is one # before the hex code.
  90. Example: --color-accent:#efefef;
  91. You can also use "black" and "white".
  92. Example: --color-background:white;
  93. Get hex color codes here:
  94. https://htmlcolorcodes.com/color-picker/
  95.  
  96. OTHERS:
  97. For the sizes, it should look like this: --fontSize:12px;
  98. Change the number to your liking.
  99. Example (smaller font): --fontSize:10px;
  100. Example (bigger font): --fontSize:13px;
  101. Make sure the : and px; are still there.
  102.  
  103. --> <style>:root {
  104.    
  105.     --fontSize:13px;
  106.    
  107.     --color-background:white;
  108.     --color-text:black;
  109.     --color-link:black;
  110.    
  111.     /* this is the color that will be used for every
  112.        month that doesn't have an id like january, february, ... */
  113.     --color-accent:#b5f0a2;
  114.    
  115. }
  116.  
  117.  
  118. /* month colors
  119.  
  120. Below you can change the color for each month.
  121.  
  122. If you don't want to use specific colors for months,
  123. delete the following code: */
  124.  
  125. /* FROM HERE */
  126.  
  127. #january    { --color-accent:#dca2f0; }
  128. #february   { --color-accent:#ada2f0; }
  129. #march      { --color-accent:#7d9aea; }
  130. #april      { --color-accent:#a2d3f0; }
  131. #may        { --color-accent:#a2f0e6; }
  132. #june       { --color-accent:#a2f0bf; }
  133. #july       { --color-accent:#b5f0a2; }
  134. #august     { --color-accent:#dcf0a2; }
  135. #september  { --color-accent:#f0dda2; }
  136. #october    { --color-accent:#f0c2a2; }
  137. #november   { --color-accent:#f0a2a2; }
  138. #december   { --color-accent:#f0a2c2; }
  139.  
  140. /* TO HERE */
  141.  
  142.  
  143.  
  144.  
  145. </style>
  146. <!-- ---------------------------------------------------------------- -->
  147. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  148. <!-- ---------------------------------------------------------------- -->
  149. <style type="text/css">
  150.  
  151.        
  152. /* hide tumblr controls
  153. (delete the line below if you want the controls to show) */
  154. body > iframe:first-child { display: none !important; }
  155.  
  156.        
  157. /* ****************************** BASICS ****************************** */
  158.  
  159. body {
  160.     padding:3%;
  161.     font-family:'Karla', 'Open Sans', sans-serif;
  162.     font-size:var(--fontSize, 12px);
  163.     color:var(--color-text,black);
  164.     background:var(--color-background,white);
  165. }
  166.  
  167. #wrapper {
  168.     display:block;
  169.     width:80%;
  170.     max-width:800px;
  171. }
  172.  
  173. .center {
  174.     position: absolute;
  175.     top:25vh;
  176.     left:50%;
  177.     -ms-transform: translateX(-50%) translateY(0%);
  178.     -webkit-transform: translate(-50%,0%);
  179.     transform: translate(-50%,0%);
  180. }
  181.  
  182. a, a:hover{
  183.     color:var(--color-link,black);
  184. }
  185.  
  186. a, a:focus {
  187.     outline: 0;
  188.     text-decoration:none;
  189. }
  190.  
  191. /* selections */
  192. ::selection {
  193.   background: rgba(0,0,0,0.2);
  194.   color: white;
  195. }
  196. ::-moz-selection {
  197.   background: rgba(0,0,0,0.2);
  198.   color: white;
  199. }
  200.  
  201. /* custom scrollbar */
  202. ::-webkit-scrollbar-thumb:vertical {
  203. background-color:rgba(0,0,0,0.2);
  204. height:100px;
  205. border-radius:15px;
  206. }
  207. ::-webkit-scrollbar-thumb:horizontal {
  208. background-color:rgba(0,0,0,0.2);
  209. height:100px !important;
  210. }
  211. ::-webkit-scrollbar {
  212. height:10px;
  213. width:10px;
  214. background-color:transparent;
  215. }
  216.  
  217. /* tumblr controls */
  218.  iframe.tmblr-iframe {
  219.     z-index:99999999999999!important;
  220.     top:0!important;
  221.     right:0!important;
  222.     opacity:0.3;
  223.         filter:invert(1) contrast(150%);
  224.         -webkit-filter:invert(1) contrast(150%);
  225.         -o-filter:invert(1) contrast(150%);
  226.         -moz-filter:invert(1) contrast(150%);
  227.         -ms-filter:invert(1) contrast(150%);
  228.     transform:scale(0.65);
  229.     transform-origin:100% 0;
  230.     -webkit-transform:scale(0.65);
  231.     -webkit-transform-origin:100% 0;
  232.     -o-transform:scale(0.65);
  233.     -o-transform-origin:100% 0;
  234.     -moz-transform:scale(0.65);
  235.     -moz-transform-origin:100% 0;
  236.     -ms-transform:scale(0.65);
  237.     -ms-transform-origin:100% 0;
  238.      transition:1s ease;
  239.      -o-transition:1s ease;
  240.      -moz-transition:1s ease;
  241.      -webkit-transition:1s ease;
  242.  }
  243. iframe.tmblr-iframe:hover {
  244.     opacity:0.6!important;}
  245. .tmblr-iframe--app-cta-button {
  246.     display: none!important;
  247. }
  248.  
  249. /* ************************** HEADER ************************** */
  250.  
  251. header {
  252.     margin-bottom:5vh;
  253. }
  254.  
  255. header h1 {
  256.     margin-bottom:0;
  257.     font-weight:normal;
  258. }
  259.  
  260. nav {
  261.    
  262. }
  263.  
  264. nav a {
  265.     display:inline-block;
  266.     margin-right:5px;
  267.     border-bottom:1px solid transparent;
  268. }
  269.  
  270. nav a:hover {
  271.     border-bottom:1px solid;
  272. }
  273.  
  274.  
  275. /* ************************** CONTENT ************************** */
  276.  
  277. main {
  278.    
  279. }
  280.  
  281. section {
  282.    
  283. }
  284. @media only screen and (min-width: 800px) {
  285. section {
  286.     column-count: 2;
  287.     column-gap: 100px;
  288. }
  289. }
  290.  
  291.  
  292. .month {
  293.     margin-bottom:20px;
  294.    
  295.     /* do not break month */
  296.     overflow: hidden;
  297.     -webkit-column-break-inside: avoid;
  298.     page-break-inside: avoid;
  299.     break-inside: avoid;
  300.     break-inside: avoid-column;
  301. }
  302.  
  303. .month h1 {
  304.     font-size: 1.3em;
  305.     font-weight: normal;
  306.     position:relative;
  307.     left:30px;
  308. }
  309. .month h1:before {
  310.     content: '\f073';
  311.     font-family: FontAwesome;
  312.     position: absolute;
  313.     left: -23px;
  314.     top: 4px;
  315.     vertical-align: middle;
  316.     font-size: 0.8em;
  317.     color:var(--color-accent);
  318. }
  319.  
  320. .month ol {
  321.   list-style-type:none;
  322.   padding-left:0;
  323.   border-radius:7px;
  324.   border:2px solid var(--color-accent);
  325. }
  326.  
  327. .month li {
  328.     padding:15px;
  329.     padding-left:0;
  330.     border-bottom:2px solid var(--color-accent);
  331.     position:relative;
  332.     min-height: 15px;
  333. }
  334.  
  335. .month li:last-child {
  336.     border:0;
  337. }
  338.  
  339.  
  340.  
  341. .month .left {
  342.     background-color: var(--color-accent);
  343.     width:50px;
  344.     text-align:center;
  345.     font-weight:bold;
  346.     position: absolute;
  347.     height: 103%;
  348.     line-height: 370%;
  349.    
  350.       top: 49%;
  351.       -webkit-transform: translate(0%, -50%);
  352.       -ms-transform: translate(0%, -50%);
  353.       transform: translate(0%, -50%);
  354. }
  355.  
  356. .month .right {
  357.     margin-top:-3px;
  358.     margin-left:60px;
  359. }
  360.  
  361. .month .right a {
  362.     display:inline-block;
  363.     margin-right:10px;
  364.     border-bottom:2px solid transparent;
  365.     transition:0.3s;
  366.     color:black;
  367.     padding-top: 4px;
  368. }
  369.  
  370. .month .right a:hover {
  371.     border-bottom:2px solid var(--color-accent);
  372. }
  373.  
  374.  
  375.  
  376.  
  377. </style>
  378. </head>
  379. <!-- ---------------------------------------------------------------- -->
  380. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  381. <!-- ---------------------------------------------------------------- -->
  382. <body><div id="wrapper" class="center">
  383. <header>
  384.  
  385.  
  386. <!--- edit header here ---->
  387.  
  388. <h1>birthdays</h1>
  389. <nav>
  390.     <a href="/">home</a>
  391.     <a href="/ask">contact</a>
  392.     <a href="/archive">archive</a>
  393. </nav>
  394.  
  395.    
  396.    
  397.    
  398.    
  399. </header><main><section>
  400. <!-- ----------------------- EDIT FROM HERE ------------------------- -->
  401.  
  402.  
  403.  
  404.  
  405. <!------------- start of month ------------->
  406. <div class="month" id="january"><h1>january</h1><ol>
  407. <li><div class="left">01.</div><div class="right">
  408.     <a href="LINK"
  409.   title="additional info">name</a>
  410.     <a href="LINK"
  411.   title="additional info">name</a>
  412. </div></li>
  413. <li><div class="left">02.</div><div class="right">
  414.     <a href="LINK"
  415.   title="additional info">name</a>
  416.     <a href="LINK"
  417.   title="additional info">name</a>
  418.     <a href="LINK"
  419.   title="additional info">name</a>
  420.     <a href="LINK"
  421.   title="additional info">name</a>
  422.     <a href="LINK"
  423.   title="additional info">name</a>
  424.     <a href="LINK"
  425.   title="additional info">name</a>
  426.     <a href="LINK"
  427.   title="additional info">name</a>
  428.     <a href="LINK"
  429.   title="additional info">name</a>
  430. </div></li>
  431. </ol></div>
  432. <!------------- end of month ------------->
  433.    
  434. <!------------- start of month ------------->
  435. <div class="month" id="february"><h1>february</h1><ol>
  436. <li><div class="left">01.</div><div class="right">
  437.     <a href="LINK"
  438.    title="additional info">name</a>
  439. </div></li>
  440. </ol></div>
  441. <!------------- end of month ------------->
  442.    
  443. <!------------- start of month ------------->
  444. <div class="month" id="march"><h1>march</h1><ol>
  445. <li><div class="left">01.</div><div class="right">
  446.     <a href="LINK"
  447.    title="additional info">name</a>
  448. </div></li>
  449. </ol></div>
  450. <!------------- end of month ------------->
  451.  
  452. <!------------- start of month ------------->
  453. <div class="month" id="april"><h1>april</h1><ol>
  454. <li><div class="left">01.</div><div class="right">
  455.     <a href="LINK"
  456.    title="additional info">name</a>
  457. </div></li>
  458. </ol></div>
  459. <!------------- end of month ------------->
  460.  
  461. <!------------- start of month ------------->
  462. <div class="month" id="may"><h1>may</h1><ol>
  463. <li><div class="left">01.</div><div class="right">
  464.     <a href="LINK"
  465.    title="additional info">name</a>
  466. </div></li>
  467. </ol></div>
  468. <!------------- end of month ------------->
  469.  
  470. <!------------- start of month ------------->
  471. <div class="month" id="june"><h1>june</h1><ol>
  472. <li><div class="left">01.</div><div class="right">
  473.     <a href="LINK"
  474.    title="additional info">name</a>
  475. </div></li>
  476. </ol></div>
  477. <!------------- end of month ------------->
  478.  
  479. <!------------- start of month ------------->
  480. <div class="month" id="july"><h1>july</h1><ol>
  481. <li><div class="left">01.</div><div class="right">
  482.     <a href="LINK"
  483.    title="additional info">name</a>
  484. </div></li>
  485. </ol></div>
  486. <!------------- end of month ------------->
  487.  
  488. <!------------- start of month ------------->
  489. <div class="month" id="august"><h1>august</h1><ol>
  490. <li><div class="left">01.</div><div class="right">
  491.     <a href="LINK"
  492.    title="additional info">name</a>
  493. </div></li>
  494. </ol></div>
  495. <!------------- end of month ------------->
  496.  
  497. <!------------- start of month ------------->
  498. <div class="month" id="september"><h1>september</h1><ol>
  499. <li><div class="left">01.</div><div class="right">
  500.     <a href="LINK"
  501.    title="additional info">name</a>
  502. </div></li>
  503. </ol></div>
  504. <!------------- end of month ------------->
  505.  
  506. <!------------- start of month ------------->
  507. <div class="month" id="october"><h1>october</h1><ol>
  508. <li><div class="left">01.</div><div class="right">
  509.     <a href="LINK"
  510.    title="additional info">name</a>
  511. </div></li>
  512. </ol></div>
  513. <!------------- end of month ------------->
  514.  
  515. <!------------- start of month ------------->
  516. <div class="month" id="november"><h1>november</h1><ol>
  517. <li><div class="left">01.</div><div class="right">
  518.     <a href="LINK"
  519.    title="additional info">name</a>
  520. </div></li>
  521. </ol></div>
  522. <!------------- end of month ------------->
  523.  
  524. <!------------- start of month ------------->
  525. <div class="month" id="december"><h1>december</h1><ol>
  526. <li><div class="left">01.</div><div class="right">
  527.     <a href="LINK"
  528.    title="additional info">name</a>
  529. </div></li>
  530. </ol></div>
  531. <!------------- end of month ------------->
  532.  
  533.  
  534.  
  535.  
  536. <!-- -------------------------- TO HERE -----------------------------
  537.  
  538.  
  539.    *** how to add months: ***
  540. 1. copy one of the following blocks of code and
  541.   paste it between "edit from here" and "to here".
  542. 2. change the id to any month (english names),
  543.   or do not set an id at all (it will become the default color),
  544.   like this: id=""
  545. 3. change the title to whatever you want
  546.   (inbetween <h1> and </h1>)
  547. 4. now add days and/or names
  548.  
  549.   *** how to add days: ***
  550.   Copy the entire code between (and including) <li> and </li>
  551.   and copy it below. Then change the number of the day.
  552.   (See third example below)
  553.  
  554.   *** how to add names: ***
  555.   Copy the entire code between (and including) <a> and </a>
  556.   and copy it below. (See second example below)
  557.   Then you will need to change the info:
  558.   - Link: Replace LINK with the link to their blog/website/...
  559.   - Additional Info: Replace this with any info you want to give
  560.     about the person, for example age, pronouns, ...
  561.     If you don't want this, remove the whole title="..."
  562.   - Name: Replace name with the name/username of the person.
  563.  
  564.   Example:
  565.   <a href="https://cloudythms.tumblr.com/"
  566.    title="made this theme">cloudythms</a>
  567.  
  568.    
  569.  
  570.  
  571.  
  572. EXAMPLE: one day, one name
  573.  
  574. <div class="month" id="january"><h1>january</h1><ol>
  575. <li><div class="left">01.</div><div class="right">
  576.    <a href="LINK"
  577.    title="additional info">name</a>
  578. </div></li>
  579. </ol></div>
  580.  
  581.  
  582. EXAMPLE: one day, two names
  583.  
  584. <div class="month" id="january"><h1>january</h1><ol>
  585. <li><div class="left">01.</div><div class="right">
  586.    <a href="LINK"
  587.    title="additional info">name</a>
  588.    <a href="LINK"
  589.    title="additional info">name</a>
  590. </div></li>
  591. </ol></div>
  592.  
  593.  
  594. EXAMPLE: two days, each one name
  595.  
  596. <div class="month" id="january"><h1>january</h1><ol>
  597. <li><div class="left">01.</div><div class="right">
  598.    <a href="LINK"
  599.    title="additional info">name</a>
  600. </div></li>
  601. <li><div class="left">02.</div><div class="right">
  602.    <a href="LINK"
  603.    title="additional info">name</a>
  604. </div></li>
  605. </ol></div>
  606.  
  607.  
  608.  
  609.  
  610. --></section><div style="height:100px"></div></main></div>
  611.  
  612.  
  613. <!-- ---------- credit ---------- -->
  614. <!-- credit link. you may move but not remove. -->
  615. <link href="https://static.tumblr.com/tpbx7ye/yiLpc9kpz/cloudythms.css" rel="stylesheet"><style>#credit { opacity:0.5; }</style>
  616. <div id="credit"><a href="https://cloudythms.tumblr.com/">
  617. <i class="far fa-copyright"></i></a></div>
  618.  
  619.  
  620. <!-- -------------------------- SCRIPTS ---------------------------- -->
  621.    
  622. <!-- jQuery -->
  623. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  624.  
  625. <!-- Fonts -->
  626. <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Lora|Open+Sans|Roboto|Roboto+Mono|Roboto+Slab|Karla&amp;subset=latin-ext" rel="stylesheet">
  627.  
  628. <!-- FontAwesome -->
  629. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  630.  
  631. <!-- Smooth Scroll -->
  632. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  633.  
  634. <!-- no tumblr redirect links -->
  635. <script>
  636. $(document).ready(function(){
  637. //remove tumblr redirects script by magnusthemes@tumblr
  638. $('a[href*="t.umblr.com/redirect"]').each(function(){
  639.   var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  640.   var replaceURL = decodeURIComponent(originalURL);
  641.   $(this).attr("href", replaceURL);
  642. });
  643. });
  644. </script>
  645.    
  646. <!-- Tooltips -->
  647. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  648. <script>
  649. (function($){
  650. $(document).ready(function(){
  651. $("a[title]").style_my_tooltips({
  652. tip_follows_cursor:true,
  653. tip_delay_time:30, /* put a higher number for more delay */
  654. tip_fade_speed:400, /* put a higher number for a slower fade */
  655. attribute:"title"
  656. });
  657. });
  658. })(jQuery);
  659. </script>
  660. <style>
  661. .tooltip{display: inline;
  662. position: relative;}
  663. #s-m-t-tooltip {
  664.     max-width:300px;
  665.     border-radius: 0px;
  666.     padding:3px 4px 5px 4px;
  667.     margin:20px 7px -2px 20px;
  668.     background-color:var(--color-background,white);
  669.     border:1px solid #E0E0E0;
  670.     border-radius: 5px;
  671.     font-size:0.8em;
  672.     letter-spacing:0.5px;
  673.     text-transform:uppercase;
  674.     color:var(--color-text,black);
  675.     z-index:9999999999999999;
  676. }
  677. </style>
  678.  
  679. </body>
  680. </html>
Advertisement
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!