raintalon24

iv | queendom

Aug 25th, 2021 (edited)
4,343
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.46 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---      
  5.            UNDEAD MAGIKARP THEMES
  6.                    iv | queendom
  7.            http://undeadmagikarp.tumblr.com/
  8.                  
  9. General theme/page rules apply. Thank you!
  10. --->
  11.  
  12. <!--
  13. NOTES:
  14. - Tumblr page preview is a lie. Save the page and view it in your browser to see your full changes.
  15. - Don't add styling to the first letter of your description.
  16. - Icons are from "https://ionic.io/ionicons" (containers are flexible and will expand as you add/delete icons).
  17. - To get the drop caps effect (first letter of your description is stylized and capitalized), make sure to put your text in <p></p> tags.
  18. - Skip to the <body> tag to see how to customize your code.
  19. -->
  20.  
  21. <head>
  22.  
  23. <title>{Title}</title>
  24. <meta name="description" content="{MetaDescription}" />
  25. <link rel="shorcut icon" href="{Favicon}">
  26.  
  27. <link rel="preconnect" href="https://fonts.googleapis.com">
  28. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  29. <link
  30.    href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Roboto&display=swap"
  31.    rel="stylesheet">
  32.  
  33. <style type="text/css">
  34.     body,
  35.     html {
  36.         margin: 0;
  37.         padding: 0;
  38.         height: 100vh;
  39.         width: 100vw;
  40.         word-wrap: break-word;
  41.         font-family: 'Roboto', sans-serif; /* FONT FAMILY (make sure to import it if you use something different) */
  42.         /* CUSTOMIZE COLORS HERE */
  43.         background-color: #f2f2f2;
  44.         --linkUnderline: #919191;
  45.         --navigationTextColor: #5E5E5E;
  46.         --activeNavigationText: #000000;
  47.         --bodyColor: #7e7e7e;
  48.         --titleColor: #000000;
  49.         --subtitleColor: #303030;
  50.         --iconColor: #e4e4e4;
  51.         --searchHighlight: #6f54d8;
  52.         --linkColor: #5E5E5E;
  53.         --linkHover: #919191;
  54.     }
  55.  
  56.     /* tumblr controls by magnusthemes + my own modifications */
  57.     .iframe-controls--phone-mobile {
  58.         display: none !important;
  59.     }
  60.  
  61.     .tmblr-iframe-pushdown {
  62.         padding-top: 0 !important;
  63.     }
  64.  
  65.     .tmblr-iframe--app-cta-button {
  66.         display: none !important;
  67.     }
  68.  
  69.     .iframe-controls--desktop {
  70.         display: none !important;
  71.     }
  72.  
  73.     a {
  74.         cursor: help;
  75.         color: var(--linkColor);
  76.         text-decoration: none;
  77.         transition: all .5s ease;
  78.         -webkit-transition: all .5s ease;
  79.         -moz-transition: all .5s ease;
  80.         -ms-transition: all .5s ease;
  81.         -o-transition: all .5s ease;
  82.     }
  83.  
  84.     a:hover {
  85.         color: var(--linkHover);
  86.     }
  87.  
  88.     p {
  89.         font-size: 0.85rem;
  90.         word-spacing: 2px;
  91.         color: var(--bodyColor);
  92.     }
  93.  
  94.     h1 {
  95.         font-family: 'Playfair Display', serif;
  96.         font-weight: 700;
  97.         font-size: 4.5rem;
  98.         line-height: 100%;
  99.         margin: 0.625rem 0;
  100.         padding: 0;
  101.         color: var(--titleColor);
  102.     }
  103.  
  104.     h2 {
  105.         font-family: 'Playfair Display', serif;
  106.         font-size: 1.625rem;
  107.     }
  108.  
  109.     h3 {
  110.         text-transform: capitalize;
  111.         font-size: 1rem;
  112.         margin: 1rem;
  113.         padding: 0;
  114.         color: var(--subtitleColor);
  115.     }
  116.  
  117.     hr {
  118.         border: 0;
  119.         width: 50%;
  120.         height: 2px;
  121.         margin: 1.5rem 0;
  122.         position: relative;
  123.         /* To change the hr line color, Ctrl+F/Cmd+F "rgba(0, 0, 0," and replace with the color's rgb hex code. Do not touch the fourth number which is the opacity. */
  124.         background: -moz-linear-gradient(left, rgba(126, 126, 126, 0) 0%, rgba(126, 126, 126, 0) 10%, rgba(126, 126, 126, 0.65) 50%, rgba(126, 126, 126, 0) 90%, rgba(126, 126, 126, 0) 100%);
  125.         /* FF3.6+ */
  126.         background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(126, 126, 126, 0)), color-stop(10%, rgba(126, 126, 126, 0)), color-stop(50%, rgba(126, 126, 126, 0.65)), color-stop(90%, rgba(126, 126, 126, 0)), color-stop(100%, rgba(126, 126, 126, 0)));
  127.         /* Chrome,Safari4+ */
  128.         background: -webkit-linear-gradient(left, rgba(126, 126, 126, 0) 0%, rgba(126, 126, 126, 0) 10%, rgba(126, 126, 126, 0.65) 50%, rgba(126, 126, 126, 0) 90%, rgba(126, 126, 126, 0) 100%);
  129.         /* Chrome10+,Safari5.1+ */
  130.         background: -o-linear-gradient(left, rgba(126, 126, 126, 0) 0%, rgba(126, 126, 126, 0) 10%, rgba(126, 126, 126, 0.65) 50%, rgba(126, 126, 126, 0) 90%, rgba(126, 126, 126, 0) 100%);
  131.         /* Opera 11.10+ */
  132.         background: -ms-linear-gradient(left, rgba(126, 126, 126, 0) 0%, rgba(126, 126, 126, 0) 10%, rgba(126, 126, 126, 0.65) 50%, rgba(126, 126, 126, 0) 90%, rgba(126, 126, 126, 0) 100%);
  133.         /* IE10+ */
  134.         background: linear-gradient(left, rgba(126, 126, 126, 0) 0%, rgba(126, 126, 126, 0) 10%, rgba(126, 126, 126, 0.65) 50%, rgba(126, 126, 126, 0) 90%, rgba(126, 126, 126, 0) 100%);
  135.         /* W3C */
  136.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
  137.         /* IE6-9 */
  138.     }
  139.  
  140.     hr:before {
  141.         content: "";
  142.         display: block;
  143.         width: 100%;
  144.         height: 1px;
  145.         position: absolute;
  146.         top: 50%;
  147.         z-index: 1;
  148.     }
  149.  
  150.     hr:last-child {
  151.         margin-top: 2.125rem;
  152.     }
  153.  
  154.     #credit {
  155.         position: fixed;
  156.         bottom: 1rem;
  157.         right: 1rem;
  158.         width: 1.5rem;
  159.         height: 1.5rem;
  160.         z-index: 999;
  161.         display: flex;
  162.         align-items: center;
  163.         justify-content: center;
  164.         color: var(--bodyColor);
  165.     }
  166.  
  167.     #credit a:hover {
  168.         opacity: 0.7;
  169.     }
  170.  
  171.     .socials.navigation {
  172.         position: fixed;
  173.         top: 20px;
  174.         z-index: 99;
  175.     }
  176.  
  177.     ion-icon {
  178.         pointer-events: none;
  179.     }
  180.  
  181.     .socials {
  182.         position: absolute;
  183.         bottom: 20px;
  184.         left: 25px;
  185.         height: max-content;
  186.         width: max-content;
  187.     }
  188.  
  189.     .socials a {
  190.         color: var(--iconColor);
  191.         padding-right: 15px;
  192.         transition: all .5s ease;
  193.         -webkit-transition: all .5s ease;
  194.         -moz-transition: all .5s ease;
  195.         -ms-transition: all .5s ease;
  196.         -o-transition: all .5s ease;
  197.     }
  198.  
  199.     .socials a:last-child {
  200.         padding-right: 0;
  201.     }
  202.  
  203.     .socials a:hover {
  204.         opacity: 0.7;
  205.     }
  206.  
  207.     .container {
  208.         position: absolute;
  209.         width: 60%;
  210.         height: 100vh;
  211.         max-height: 100vh;
  212.         right: 0;
  213.         top: 0;
  214.         display: flex;
  215.         flex-direction: column;
  216.         justify-content: space-between;
  217.     }
  218.  
  219.     .header {
  220.         position: relative;
  221.         top: 0;
  222.         right: 0;
  223.         max-width: 100%;
  224.         padding: 20px 30px;
  225.         height: min-content;
  226.         display: flex;
  227.         flex-direction: row;
  228.         align-items: center;
  229.         flex-wrap: wrap;
  230.         justify-content: space-evenly;
  231.         align-content: space-between;
  232.     }
  233.  
  234.     .searchbar {
  235.         margin: 10px 20px;
  236.         display: flex;
  237.         align-items: flex-start;
  238.     }
  239.  
  240.     .searchbar #searchIcon {
  241.         cursor: pointer;
  242.         transition: all .5s ease;
  243.         -webkit-transition: all .5s ease;
  244.         -moz-transition: all .5s ease;
  245.         -ms-transition: all .5s ease;
  246.         -o-transition: all .5s ease;
  247.     }
  248.  
  249.     .searchbar input[type=text] {
  250.         font-size: 14px;
  251.         display: inline-block;
  252.         width: 0;
  253.         padding: 0 0 5px 0;
  254.         border: none;
  255.         margin: 0;
  256.         background: none;
  257.         border-bottom: 1px solid var(--linkUnderline);
  258.  
  259.         transition: all .5s ease;
  260.         -webkit-transition: all .5s ease;
  261.         -moz-transition: all .5s ease;
  262.         -ms-transition: all .5s ease;
  263.         -o-transition: all .5s ease;
  264.     }
  265.  
  266.     .searchbar input[type=text]:focus {
  267.         outline: none;
  268.         border-bottom: 1px solid var(--activeNavigationText);
  269.     }
  270.  
  271.     .tablink {
  272.         padding: 0;
  273.         padding-bottom: 4px;
  274.         margin: 10px 20px;
  275.         border: none;
  276.         background: none;
  277.         cursor: pointer;
  278.         text-transform: uppercase;
  279.         font-size: 1rem;
  280.         border-bottom: 1px solid transparent;
  281.         font-weight: 500;
  282.         text-align: center;
  283.         color: var(--navigationTextColor);
  284.  
  285.         transition: all .5s ease;
  286.         -webkit-transition: all .5s ease;
  287.         -moz-transition: all .5s ease;
  288.         -ms-transition: all .5s ease;
  289.         -o-transition: all .5s ease;
  290.     }
  291.  
  292.     .tablink.activated {
  293.         font-weight: 700;
  294.         color: var(--activeNavigationText);
  295.         border-bottom: 1px solid var(--linkUnderline);
  296.     }
  297.  
  298.     .tablink:hover {
  299.         opacity: 0.7;
  300.     }
  301.  
  302.     .content {
  303.         position: relative;
  304.         display: flex;
  305.         flex-direction: column;
  306.         align-items: center;
  307.         max-width: 100%;
  308.         padding: 1rem;
  309.         overflow: hidden;
  310.         height: 75%;
  311.         bottom: 0;
  312.         font-size: 1rem;
  313.     }
  314.  
  315.     .textContent {
  316.         display: flex;
  317.         flex-direction: column;
  318.         align-items: center;
  319.         height: 100%;
  320.     }
  321.  
  322.     #searchResults {
  323.         height: 100%;
  324.     }
  325.  
  326.     .titles {
  327.         display: flex;
  328.         flex-direction: column;
  329.         align-items: center;
  330.         text-align: center;
  331.         cursor: default;
  332.     }
  333.  
  334.     .byline {
  335.         font-size: 1rem;
  336.         margin: 0 1rem 1rem 1rem;
  337.         color: var(--subtitleColor);
  338.     }
  339.  
  340.     .description {
  341.         padding: 0 9.5rem;
  342.         overflow-x: hidden;
  343.         overflow-y: auto;
  344.         color: var(--bodyColor);
  345.  
  346.         line-height: 1.625rem;
  347.         text-align: left;
  348.         scrollbar-width: none; /* Firefox */
  349.         -ms-overflow-style: none; /* Internet Explorer 10+ */
  350.     }
  351.  
  352.         .description::-webkit-scrollbar { /* WebKit */
  353.             width: 0;
  354.             height: 0;
  355.         }
  356.  
  357.         .description p:first-child {
  358.             margin-top: 0;
  359.         }
  360.  
  361.         .description p:last-child {
  362.             margin-bottom: 0;
  363.         }
  364.  
  365.         .description a {
  366.             border-bottom: 1px solid var(--linkUnderline);
  367.         }
  368.  
  369.     .first-letter {
  370.         float: left;
  371.         font-family: 'Playfair Display', serif;
  372.         font-size: 3rem;
  373.         font-weight: 600;
  374.         line-height: 100%;
  375.         padding-right: 0.7rem;
  376.         color: var(--titleColor);
  377.     }
  378.  
  379.     .result {
  380.         margin: 0;
  381.         margin-bottom: 25px;
  382.         border: none;
  383.         padding: 0;
  384.         background: none;
  385.         text-align: left;
  386.         color: var(--subtitleColor);
  387.         cursor: pointer;
  388.         font-size: 15px;
  389.         transition: all .5s ease;
  390.         -webkit-transition: all .5s ease;
  391.         -moz-transition: all .5s ease;
  392.         -ms-transition: all .5s ease;
  393.         -o-transition: all .5s ease;
  394.     }
  395.  
  396.     .result:hover {
  397.         opacity: 0.7;
  398.     }
  399.  
  400.     .result h3 {
  401.         margin: 0 0 5px 0;
  402.         font-family: 'Playfair Display', serif;
  403.         font-size: 1.1rem;
  404.  
  405.     }
  406.  
  407.     .result p b {
  408.         color: var(--searchHighlight);
  409.     }
  410.  
  411.     .foundList {
  412.         overflow-y: auto;
  413.         overflow-x: hidden;
  414.     }
  415.  
  416.     .foundList p {
  417.         margin: 5px 0;
  418.     }
  419.  
  420.     .foundList p:first-child {
  421.         margin-top: 0;
  422.     }
  423.  
  424.     .foundList p:last-child {
  425.         margin-bottom: 0;
  426.     }
  427.  
  428.     .status {
  429.         display: block;
  430.         margin: 0;
  431.         position: absolute;
  432.         top: 40%;
  433.         -ms-transform: translateY(-50%);
  434.         transform: translateY(-50%);
  435.         font-family: 'Playfair Display', serif;
  436.         font-weight: 400;
  437.         font-size: 1.1rem;
  438.         margin-bottom: 20px;
  439.     }
  440.  
  441.     .resultContainer {
  442.         margin-bottom: calc(2.125rem + 1.5rem + 1rem + 2px);
  443.         width: 70%;
  444.         overflow-x: hidden;
  445.         overflow-y: auto;
  446.         padding-right: 30px;
  447.         scrollbar-width: none; /* Firefox */
  448.         -ms-overflow-style: none; /* Internet Explorer 10+ */
  449.     }
  450.  
  451.         .resultContainer::-webkit-scrollbar {
  452.             /* WebKit */
  453.             width: 4px;
  454.             height: 4px;
  455.         }
  456.  
  457.         .resultContainer::-webkit-scrollbar-thumb {
  458.             background-color: rgba(0, 0, 0, 0.1);
  459.             height: 4px;
  460.             width: 4px;
  461.         }
  462.  
  463.     .profile {
  464.         position: fixed;
  465.         width: 40%;
  466.         height: 100vh;
  467.         max-height: 100vh;
  468.         left: 0;
  469.         top: 0;
  470.         background-repeat: no-repeat;
  471.         background-position: center;
  472.         background-size: cover;
  473.     }
  474.  
  475.     .footer {
  476.         display: none;
  477.     }
  478.  
  479.     @media screen and (max-width: 1024px) {
  480.         h3 {
  481.             margin-bottom: 0;
  482.         }
  483.  
  484.         .content {
  485.             overflow-y: auto;
  486.             overflow-x: hidden;
  487.             display: block;
  488.             height: 100%;
  489.         }
  490.  
  491.         .container {
  492.             width: 100%;
  493.         }
  494.  
  495.         .titles:first-child {
  496.             margin-top: 3rem;
  497.         }
  498.  
  499.         .profile {
  500.             position: relative;
  501.             display: block;
  502.             width: 100%;
  503.             height: 60vh;
  504.             min-height: 60vh;
  505.             background-repeat: no-repeat;
  506.             background-position: center;
  507.             background-size: contain;
  508.         }
  509.  
  510.         .socials {
  511.             position: relative;
  512.             margin: 0 auto;
  513.             top: calc(100% + 1rem);
  514.             left: 0;
  515.         }
  516.  
  517.         .socials a {
  518.             color: var(--navigationTextColor);
  519.             padding-right: 15px;
  520.             transition: all .5s ease;
  521.             -webkit-transition: all .5s ease;
  522.             -moz-transition: all .5s ease;
  523.             -ms-transition: all .5s ease;
  524.             -o-transition: all .5s ease;
  525.         }
  526.  
  527.         .textContent {
  528.             height: auto;
  529.         }
  530.  
  531.         #searchResults .profile {
  532.             display: none;
  533.             height: 0;
  534.             width: 0;
  535.         }
  536.  
  537.         .socials.navigation {
  538.             width: 0;
  539.             display: none;
  540.         }
  541.  
  542.         #credit {
  543.             display: none;
  544.         }
  545.  
  546.         .footer {
  547.             position: relative;
  548.             display: block;
  549.             height: min-content;
  550.             width: 100%;
  551.             margin: 16px;
  552.         }
  553.  
  554.             .footer .mobileNav {
  555.                 margin: 0 auto;
  556.                 display: flex;
  557.                 flex-direction: row;
  558.                 align-items: center;
  559.                 justify-content: center;
  560.             }
  561.  
  562.                 .footer .mobileNav a {
  563.                     margin-right: 20px;
  564.                     color: var(--navigationTextColor);
  565.                 }
  566.  
  567.                     .footer .mobileNav a:hover {
  568.                         opacity: 0.7;
  569.                     }
  570.  
  571.                     .footer .mobileNav a:last-child {
  572.                         margin-right: 0px;
  573.                     }
  574.     }
  575.  
  576.     @media screen and (max-width: 700px) {
  577.         .header {
  578.             width: 75%;
  579.             margin: 0 auto;
  580.         }
  581.     }
  582.  
  583. </style>
  584. </head>
  585.  
  586. <body>
  587.  
  588.     <div class="socials navigation">
  589.         <a href="/" title="Back to blog">
  590.             <ion-icon name="chevron-back" title="Back to blog" size="small"></ion-icon>
  591.         </a>
  592.         <!-- needs a duplicate for some reason zzz -->
  593.         <ion-icon name="chevron-back" style="display: none;"></ion-icon>
  594.     </div>
  595.  
  596.     <div class="container">
  597.         <div class="header">
  598.             <div class="searchbar">
  599.                 <ion-icon name="search" id="searchIcon" size="small" style="pointer-events: auto;"></ion-icon>
  600.                 <input id="search" type="text" placeholder="Search">
  601.             </div>
  602.  
  603.             <!-- NAVIGATION -->
  604.             <button class="tablink activated" onclick="openTab(event, 'home', 'homePic')">intro</button>
  605.             <button class="tablink" onclick="openTab(event, 'tab1', 'image1')">title 1</button>
  606.             <button class="tablink" onclick="openTab(event, 'tab2', 'image2')">title 2</button>
  607.             <button class="tablink" onclick="openTab(event, 'tab3', 'image3')">title 3</button>
  608.             <!-- ADD MORE NAVIGATION LINKS HERE -->
  609.  
  610.         </div>
  611.  
  612.  
  613.         <!-- HOME PANEL -->
  614.         <div class="content activated" id="home">
  615.  
  616.             <div class="profile" id="homePic"
  617.                style="background-image: url('https://static.tumblr.com/bkdoxe7/lgxqy7i09/group-photo-cropped.jpg');">
  618.                 <div class="socials">
  619.                     <a href="/" target="_blank" title="Instagram">
  620.                         <ion-icon size="small" name="logo-instagram"></ion-icon>
  621.                     </a>
  622.                     <a href="/" target="_blank" title="YouTube">
  623.                         <ion-icon size="small" name="logo-youtube"></ion-icon>
  624.                     </a>
  625.                     <a href="/" target="_blank" title="Link">
  626.                         <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
  627.                     </a>
  628.                 </div>
  629.             </div>
  630.  
  631.             <div class="textContent">
  632.                 <div class="titles">
  633.                     <h3>SUBTITLE</h3>
  634.                     <h1>Intro</h1>
  635.                 </div>
  636.                 <hr>
  637.                 <div class="titles">
  638.                     <span class="byline">by <b>Author</b></span>
  639.                 </div>
  640.                 <div class="description">
  641.                     <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
  642.                         elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  643.                         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  644.                         aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  645.                         pariatur.</p>
  646.                 </div>
  647.                 <hr>
  648.             </div>
  649.         </div>
  650.  
  651.         <!-- PANEL 1 -->
  652.         <div class="content" id="tab1" style="display:none">
  653.             <div class="profile" id="image1"
  654.                style="background-image: url('https://static.tumblr.com/bkdoxe7/NH7qydn63/irene_1_.jpg');">
  655.                 <div class="socials">
  656.                     <a href="/" target="_blank" title="Instagram">
  657.                         <ion-icon size="small" name="logo-instagram"></ion-icon>
  658.                     </a>
  659.                     <a href="/" target="_blank" title="YouTube">
  660.                         <ion-icon size="small" name="logo-youtube"></ion-icon>
  661.                     </a>
  662.                     <a href="/" target="_blank" title="Link">
  663.                         <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
  664.                     </a>
  665.                 </div>
  666.             </div>
  667.             <div class="textContent">
  668.                 <div class="titles">
  669.                     <h3>SUBTITLE</h3>
  670.                     <h1>Title 1</h1>
  671.                 </div>
  672.                 <hr>
  673.                 <div class="titles">
  674.                     <span class="byline">by <b>Author</b></span>
  675.                 </div>
  676.                 <div class="description">
  677.                     <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
  678.                         elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  679.                         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  680.                         aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  681.                         pariatur.</p>
  682.                 </div>
  683.                 <hr>
  684.             </div>
  685.         </div>
  686.  
  687.         <!-- PANEL 2 -->
  688.         <div class="content" id="tab2" style="display:none">
  689.             <div class="profile" id="image2"
  690.                style="background-image: url('https://static.tumblr.com/bkdoxe7/Tc2qy6jqd/seulgi.jpg');">
  691.                 <div class="socials">
  692.                     <a href="/" target="_blank" title="Instagram">
  693.                         <ion-icon size="small" name="logo-instagram"></ion-icon>
  694.                     </a>
  695.                     <a href="/" target="_blank" title="YouTube">
  696.                         <ion-icon size="small" name="logo-youtube"></ion-icon>
  697.                     </a>
  698.                     <a href="/" target="_blank" title="Link">
  699.                         <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
  700.                     </a>
  701.                 </div>
  702.             </div>
  703.             <div class="textContent">
  704.                 <div class="titles">
  705.                     <h3>SUBTITLE</h3>
  706.                     <h1>Title 2</h1>
  707.                 </div>
  708.                 <hr>
  709.                 <div class="titles">
  710.                     <span class="byline">by <b>Author</b></span>
  711.                 </div>
  712.                 <div class="description">
  713.                     <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
  714.                         elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  715.                         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  716.                         aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  717.                         pariatur.</p>
  718.                 </div>
  719.                 <hr>
  720.             </div>
  721.         </div>
  722.  
  723.         <!-- PANEL 3 -->
  724.         <div class="content" id="tab3" style="display:none">
  725.             <div class="profile" id="image3"
  726.                style="background-image: url('https://static.tumblr.com/bkdoxe7/mcjqy6js4/wendy.jpg');">
  727.                 <div class="socials">
  728.                     <a href="/" target="_blank" title="Instagram">
  729.                         <ion-icon size="small" name="logo-instagram"></ion-icon>
  730.                     </a>
  731.                     <a href="/" target="_blank" title="YouTube">
  732.                         <ion-icon size="small" name="logo-youtube"></ion-icon>
  733.                     </a>
  734.                     <a href="/" target="_blank" title="Link">
  735.                         <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
  736.                     </a>
  737.                 </div>
  738.             </div>
  739.             <div class="textContent">
  740.                 <div class="titles">
  741.                     <h3>SUBTITLE</h3>
  742.                     <h1>Title 3</h1>
  743.                 </div>
  744.                 <hr>
  745.                 <div class="titles">
  746.                     <span class="byline">by <b>Author</b></span>
  747.                 </div>
  748.                 <div class="description">
  749.                     <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
  750.                         elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  751.                         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  752.                         aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  753.                         pariatur.</p>
  754.                 </div>
  755.                 <hr>
  756.             </div>
  757.         </div>
  758.  
  759.         <!-- PANEL TEMPLATE -->
  760.         <!-- 1. Give the content panel a unique id (eg. "tab4") -->
  761.         <!-- 2. Set the profile image inside background-image and give it a unique id (eg. image4) -->
  762.         <!-- 3. Add a tablink corresponding to the panel and image id under NAVIGATION
  763.        (eg. <button class="tablink" onclick="openTab(event, 'tab4', 'image4')">tab title</button>) -->
  764.  
  765.         <!-- <div class="content" id="tab4" style="display:none">
  766.            <div class="profile" id="image4"
  767.                style="background-image: url('URL HERE');">
  768.                MODIFY USING ICONS FROM "https://ionic.io/ionicons""
  769.                <div class="socials">
  770.                    <a href="/" target="_blank" title="Instagram">
  771.                        <ion-icon size="small" name="logo-instagram"></ion-icon>
  772.                    </a>
  773.                    <a href="/" target="_blank" title="YouTube">
  774.                        <ion-icon size="small" name="logo-youtube"></ion-icon>
  775.                    </a>
  776.                    <a href="/" target="_blank" title="Link">
  777.                        <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
  778.                    </a>
  779.                </div>
  780.            </div>
  781.            <div class="textContent">
  782.                <div class="titles">
  783.                    <h3>SUBTITLE</h3>
  784.                    <h1>Title 4</h1>
  785.                </div>
  786.                <hr>
  787.                <div class="titles">
  788.                    <span class="byline">by <b>Author</b></span>
  789.                </div>
  790.                <div class="description">
  791.                    <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
  792.                        elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  793.                        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  794.                        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  795.                        pariatur.</p>
  796.                </div>
  797.                <hr>
  798.            </div>
  799.        </div> -->
  800.  
  801.         <div class="content" id="searchResults" style="display:none">
  802.             <span class="status">Loading...</span>
  803.         </div>
  804.  
  805.     </div>
  806.  
  807.     <!-- import icons -->
  808.     <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
  809.     <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
  810.  
  811.     <!-- script to make first letter special -->
  812.     <script>
  813.         document.addEventListener("DOMContentLoaded", function () {
  814.             var descriptions = document.getElementsByClassName("description");
  815.             for (var i = 0; i < descriptions.length; i++) {
  816.                 try {
  817.                     const element = descriptions[i].querySelector('p');
  818.                     const keep = element.innerHTML.substring(1);
  819.                     // store the first character for memory
  820.                     var first = element.innerText[0];
  821.                     // remove first character
  822.                     element.innerText = element.innerText.substring(1);
  823.                     // add span tag
  824.                     var firstLetter = document.createElement("span");
  825.                     firstLetter.innerText = first;
  826.                     firstLetter.classList.add("first-letter");
  827.                     // add to first paragraph
  828.                     element.innerHTML = "<span class='first-letter'>" + first + "</span>" + keep;
  829.                 }
  830.                 catch { console.log("Couldn't stylize drop caps") }
  831.             }
  832.         });
  833.     </script>
  834.  
  835.     <!-- script to open search bar -->
  836.     <script>
  837.         var searchIcon = document.getElementById("searchIcon");
  838.         searchIcon.addEventListener('click', function (ev) {
  839.             const searchBar = document.getElementById("search");
  840.             if (searchBar.style.width) {
  841.                 // closing
  842.                 searchIcon.style.marginRight = '0';
  843.                 searchBar.style.width = "";
  844.             } else {
  845.                 // opening
  846.                 searchIcon.style.marginRight = '8px';
  847.                 searchBar.style.width = '125px';
  848.                 searchBar.focus();
  849.             }
  850.         }, false);
  851.     </script>
  852.  
  853.     <!-- script to change tab panels + search bar functionality -->
  854.     <script>
  855.         // get the id of the default image that displays on page load
  856.         var currImage = document.getElementsByClassName("content activated")[0].getElementsByClassName("profile")[0].id;
  857.  
  858.         // add a footer to every content panel
  859.         document.addEventListener("DOMContentLoaded", function () {
  860.             const panel = document.getElementsByClassName("content");
  861.             for (let i = 0; i < panel.length; i++) {
  862.                const footer = document.createElement("div");
  863.                footer.classList.add("footer");
  864.                footer.innerHTML =
  865.                    '<div class="mobileNav"><a href="/" title="Back to blog">BACK</a><a href="https://undeadmagikarp.tumblr.com/" target="_blank" title="Theme Credit"> CREDIT</a></div>';
  866.                 panel[i].appendChild(footer);
  867.             }
  868.             const c = document.createElement("div");
  869.             c.id = "credit";
  870.             c.innerHTML =
  871.                 '<a href="https://undeadmagikarp.tumblr.com/" target="_blank" title="Theme Credit" style="color: var(--bodyColor);"><ion-icon name="code-slash-outline"></ion-icon></a>';
  872.             document.body.appendChild(c);
  873.         });
  874.  
  875.         function changeImage(imageName) {
  876.             const sidePics = document.getElementsByClassName("profile");
  877.             for (j = 0; j < sidePics.length; j++) {
  878.                sidePics[j].style.display = 'none';
  879.            }
  880.            document.getElementById(imageName).style.display = 'block';
  881.        }
  882.  
  883.        function openTab(evt, tabName, imageName) {
  884.            // change side image
  885.            if (tabName !== "searchResults") {
  886.                changeImage(imageName);
  887.                currImage = imageName;
  888.            } else if (tabName === "searchResults" && !window.matchMedia("(max-width: 1024px)").matches) {
  889.                let dupImage = document.getElementById(currImage).cloneNode(true);
  890.                dupImage.id = "";
  891.                document.getElementById("searchResults").appendChild(dupImage);
  892.            };
  893.  
  894.            var i, j, x, tablinks;
  895.            // display tab panel content
  896.            x = document.getElementsByClassName("content");
  897.            for (i = 0; i < x.length; i++) {
  898.                x[i].style.display = "none";
  899.            }
  900.            document.getElementById(tabName).style.display = "flex";
  901.  
  902.            // activate
  903.            tablinks = document.getElementsByClassName("tablink");
  904.            for (i = 0; i < tablinks.length; i++) {
  905.                tablinks[i].className = tablinks[i].className.replace(" activated", "");
  906.            }
  907.            try {
  908.                evt.currentTarget.className += " activated";
  909.            } catch {
  910.                console.log('searching...')
  911.            }
  912.        }
  913.  
  914.        // SEARCH FEATURE
  915.  
  916.        function getIndicesOf(searchStr, str, caseSensitive) {
  917.            var searchStrLen = searchStr.length;
  918.            if (searchStrLen == 0) {
  919.                return [];
  920.            }
  921.            var startIndex = 0,
  922.                index, indices = [];
  923.            if (!caseSensitive) {
  924.                str = str.toLowerCase();
  925.                searchStr = searchStr.toLowerCase();
  926.            }
  927.            while ((index = str.indexOf(searchStr, startIndex)) > -1) {
  928.                 indices.push(index);
  929.                 startIndex = index + searchStrLen;
  930.             }
  931.             return indices;
  932.         }
  933.  
  934.         var searchInput = document.getElementById("search");
  935.         searchInput.addEventListener('input', onInput);
  936.  
  937.         function onInput() {
  938.             // switch to search panel
  939.             const searchPanel = document.getElementById("searchResults");
  940.             if (!searchPanel.classList.contains("activated")) {
  941.                 let loading = document.createElement("span");
  942.                 loading.classList.add("status");
  943.                 loading.innerText = "Loading...";
  944.                 searchPanel.innerHTML = "";
  945.                 searchPanel.appendChild(loading);
  946.                 openTab(null, "searchResults", null);
  947.             }
  948.             // add timer to run search when user input stops
  949.             var duration = 200;
  950.             clearTimeout(searchInput._timer);
  951.             searchInput._timer = setTimeout(() => {
  952.                 search(this.value);
  953.             }, duration);
  954.         }
  955.  
  956.         function search(query) {
  957.             // if search result is empty go back to first panel
  958.             if (!query) {
  959.                 var tablinks = document.getElementsByClassName("tablink")[0].click();
  960.             } else {
  961.                 const searchPanel = document.getElementById("searchResults");
  962.  
  963.                 // add a container to store results
  964.                 let resultContainer = document.createElement("div");
  965.                 resultContainer.classList.add("resultContainer");
  966.                 searchPanel.appendChild(resultContainer);
  967.  
  968.                 // loop through each content container
  969.                 const content = document.getElementsByClassName("content");
  970.                 let total = 0;
  971.                 for (let i = 0; i < content.length; i++) {
  972.                    // don't search in the search panel
  973.                    if (content[i].id === "searchResults") break;
  974.                    // separate content into array of sentences
  975.                    let sentences = content[i].getElementsByClassName("description")[0].innerText.replace(
  976.                        /([.?!])\s*(?=[A-Z])/g, "$1|").split("|");
  977.                    sentences.push(content[i].querySelector('h1').innerText);
  978.                    sentences.push(content[i].querySelector('h3').innerText);
  979.                    sentences.push(content[i].getElementsByClassName("byline")[0].innerText);
  980.                    // loop through sentences and try to find match
  981.                    let matches = [];
  982.                    let sentenceIndices = [];
  983.                    for (let j = 0; j < sentences.length; j++) {
  984.                        let positions = getIndicesOf(query.trim(), sentences[j].trim(), false);
  985.                        if (positions.length > 0) {
  986.                             matches.push(positions);
  987.                             sentenceIndices.push(j);
  988.                         };
  989.                     };
  990.  
  991.                     // found substring in sentence
  992.                     if (matches.length > 0) {
  993.                         // create result div
  994.                         let result = document.createElement("button");
  995.                         result.classList.add("result");
  996.                         result.onclick = function () {
  997.                             document.getElementsByClassName("tablink")[i].click();
  998.                         };
  999.                         // fill it in with query info
  1000.                         let found = document.createElement('div');
  1001.                         found.classList.add("foundList");
  1002.  
  1003.                         let matchCount = 0;
  1004.  
  1005.                         // loop through matches and create a separate p tag for each sentence with a match
  1006.                         for (let k = 0; k < sentenceIndices.length; k++) {
  1007.                            total += 1;
  1008.                            matchCount += 1;
  1009.                            let resultSentence = sentences[sentenceIndices[k]].trim();
  1010.                            let match = document.createElement("p");
  1011.                            match.innerHTML = resultSentence.slice(0, matches[k][0]) + '<b>' +
  1012.                                 resultSentence.slice(matches[k][0], matches[k][0] + query.trim().length) + '</b>' +
  1013.                                 resultSentence.slice(matches[k][0] + query.trim().length, resultSentence.length);
  1014.                             found.appendChild(match);
  1015.                         };
  1016.  
  1017.                         let title = document.createElement("h3");
  1018.                         title.innerText = document.getElementById(content[i].id).querySelector('h1').innerText + " (" +
  1019.                             matchCount + ")";
  1020.  
  1021.                         result.appendChild(title);
  1022.                         result.appendChild(found);
  1023.                         // add it to the panel
  1024.                         resultContainer.appendChild(result);
  1025.                     };
  1026.                 };
  1027.  
  1028.                 // clear loading notice
  1029.                 searchPanel.removeChild(searchPanel.querySelector('span'));
  1030.  
  1031.                 // Couldn't find anything
  1032.                 if (total == 0) {
  1033.                     let notFound = document.createElement("span");
  1034.                     notFound.classList.add("status");
  1035.                     notFound.innerText = "No results found.";
  1036.                     searchPanel.appendChild(notFound);
  1037.                 } else {
  1038.                     let sum = document.createElement('h2');
  1039.                     sum.innerText = "Results (" + total + ")";
  1040.                     searchPanel.insertBefore(sum, resultContainer);
  1041.                 };
  1042.             };
  1043.         };
  1044.     </script>
  1045.  
  1046. </body>
  1047.  
  1048. </html>
Add Comment
Please, Sign In to add comment