Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!---
- UNDEAD MAGIKARP THEMES
- iv | queendom
- http://undeadmagikarp.tumblr.com/
- General theme/page rules apply. Thank you!
- --->
- <!--
- NOTES:
- - Tumblr page preview is a lie. Save the page and view it in your browser to see your full changes.
- - Don't add styling to the first letter of your description.
- - Icons are from "https://ionic.io/ionicons" (containers are flexible and will expand as you add/delete icons).
- - 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.
- - Skip to the <body> tag to see how to customize your code.
- -->
- <head>
- <title>{Title}</title>
- <meta name="description" content="{MetaDescription}" />
- <link rel="shorcut icon" href="{Favicon}">
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link
- href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Roboto&display=swap"
- rel="stylesheet">
- <style type="text/css">
- body,
- html {
- margin: 0;
- padding: 0;
- height: 100vh;
- width: 100vw;
- word-wrap: break-word;
- font-family: 'Roboto', sans-serif; /* FONT FAMILY (make sure to import it if you use something different) */
- /* CUSTOMIZE COLORS HERE */
- background-color: #f2f2f2;
- --linkUnderline: #919191;
- --navigationTextColor: #5E5E5E;
- --activeNavigationText: #000000;
- --bodyColor: #7e7e7e;
- --titleColor: #000000;
- --subtitleColor: #303030;
- --iconColor: #e4e4e4;
- --searchHighlight: #6f54d8;
- --linkColor: #5E5E5E;
- --linkHover: #919191;
- }
- /* tumblr controls by magnusthemes + my own modifications */
- .iframe-controls--phone-mobile {
- display: none !important;
- }
- .tmblr-iframe-pushdown {
- padding-top: 0 !important;
- }
- .tmblr-iframe--app-cta-button {
- display: none !important;
- }
- .iframe-controls--desktop {
- display: none !important;
- }
- a {
- cursor: help;
- color: var(--linkColor);
- text-decoration: none;
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- a:hover {
- color: var(--linkHover);
- }
- p {
- font-size: 0.85rem;
- word-spacing: 2px;
- color: var(--bodyColor);
- }
- h1 {
- font-family: 'Playfair Display', serif;
- font-weight: 700;
- font-size: 4.5rem;
- line-height: 100%;
- margin: 0.625rem 0;
- padding: 0;
- color: var(--titleColor);
- }
- h2 {
- font-family: 'Playfair Display', serif;
- font-size: 1.625rem;
- }
- h3 {
- text-transform: capitalize;
- font-size: 1rem;
- margin: 1rem;
- padding: 0;
- color: var(--subtitleColor);
- }
- hr {
- border: 0;
- width: 50%;
- height: 2px;
- margin: 1.5rem 0;
- position: relative;
- /* 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. */
- 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%);
- /* FF3.6+ */
- 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)));
- /* Chrome,Safari4+ */
- 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%);
- /* Chrome10+,Safari5.1+ */
- 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%);
- /* Opera 11.10+ */
- 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%);
- /* IE10+ */
- 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%);
- /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
- /* IE6-9 */
- }
- hr:before {
- content: "";
- display: block;
- width: 100%;
- height: 1px;
- position: absolute;
- top: 50%;
- z-index: 1;
- }
- hr:last-child {
- margin-top: 2.125rem;
- }
- #credit {
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- width: 1.5rem;
- height: 1.5rem;
- z-index: 999;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--bodyColor);
- }
- #credit a:hover {
- opacity: 0.7;
- }
- .socials.navigation {
- position: fixed;
- top: 20px;
- z-index: 99;
- }
- ion-icon {
- pointer-events: none;
- }
- .socials {
- position: absolute;
- bottom: 20px;
- left: 25px;
- height: max-content;
- width: max-content;
- }
- .socials a {
- color: var(--iconColor);
- padding-right: 15px;
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .socials a:last-child {
- padding-right: 0;
- }
- .socials a:hover {
- opacity: 0.7;
- }
- .container {
- position: absolute;
- width: 60%;
- height: 100vh;
- max-height: 100vh;
- right: 0;
- top: 0;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .header {
- position: relative;
- top: 0;
- right: 0;
- max-width: 100%;
- padding: 20px 30px;
- height: min-content;
- display: flex;
- flex-direction: row;
- align-items: center;
- flex-wrap: wrap;
- justify-content: space-evenly;
- align-content: space-between;
- }
- .searchbar {
- margin: 10px 20px;
- display: flex;
- align-items: flex-start;
- }
- .searchbar #searchIcon {
- cursor: pointer;
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .searchbar input[type=text] {
- font-size: 14px;
- display: inline-block;
- width: 0;
- padding: 0 0 5px 0;
- border: none;
- margin: 0;
- background: none;
- border-bottom: 1px solid var(--linkUnderline);
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .searchbar input[type=text]:focus {
- outline: none;
- border-bottom: 1px solid var(--activeNavigationText);
- }
- .tablink {
- padding: 0;
- padding-bottom: 4px;
- margin: 10px 20px;
- border: none;
- background: none;
- cursor: pointer;
- text-transform: uppercase;
- font-size: 1rem;
- border-bottom: 1px solid transparent;
- font-weight: 500;
- text-align: center;
- color: var(--navigationTextColor);
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .tablink.activated {
- font-weight: 700;
- color: var(--activeNavigationText);
- border-bottom: 1px solid var(--linkUnderline);
- }
- .tablink:hover {
- opacity: 0.7;
- }
- .content {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- max-width: 100%;
- padding: 1rem;
- overflow: hidden;
- height: 75%;
- bottom: 0;
- font-size: 1rem;
- }
- .textContent {
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 100%;
- }
- #searchResults {
- height: 100%;
- }
- .titles {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- cursor: default;
- }
- .byline {
- font-size: 1rem;
- margin: 0 1rem 1rem 1rem;
- color: var(--subtitleColor);
- }
- .description {
- padding: 0 9.5rem;
- overflow-x: hidden;
- overflow-y: auto;
- color: var(--bodyColor);
- line-height: 1.625rem;
- text-align: left;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* Internet Explorer 10+ */
- }
- .description::-webkit-scrollbar { /* WebKit */
- width: 0;
- height: 0;
- }
- .description p:first-child {
- margin-top: 0;
- }
- .description p:last-child {
- margin-bottom: 0;
- }
- .description a {
- border-bottom: 1px solid var(--linkUnderline);
- }
- .first-letter {
- float: left;
- font-family: 'Playfair Display', serif;
- font-size: 3rem;
- font-weight: 600;
- line-height: 100%;
- padding-right: 0.7rem;
- color: var(--titleColor);
- }
- .result {
- margin: 0;
- margin-bottom: 25px;
- border: none;
- padding: 0;
- background: none;
- text-align: left;
- color: var(--subtitleColor);
- cursor: pointer;
- font-size: 15px;
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .result:hover {
- opacity: 0.7;
- }
- .result h3 {
- margin: 0 0 5px 0;
- font-family: 'Playfair Display', serif;
- font-size: 1.1rem;
- }
- .result p b {
- color: var(--searchHighlight);
- }
- .foundList {
- overflow-y: auto;
- overflow-x: hidden;
- }
- .foundList p {
- margin: 5px 0;
- }
- .foundList p:first-child {
- margin-top: 0;
- }
- .foundList p:last-child {
- margin-bottom: 0;
- }
- .status {
- display: block;
- margin: 0;
- position: absolute;
- top: 40%;
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- font-family: 'Playfair Display', serif;
- font-weight: 400;
- font-size: 1.1rem;
- margin-bottom: 20px;
- }
- .resultContainer {
- margin-bottom: calc(2.125rem + 1.5rem + 1rem + 2px);
- width: 70%;
- overflow-x: hidden;
- overflow-y: auto;
- padding-right: 30px;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* Internet Explorer 10+ */
- }
- .resultContainer::-webkit-scrollbar {
- /* WebKit */
- width: 4px;
- height: 4px;
- }
- .resultContainer::-webkit-scrollbar-thumb {
- background-color: rgba(0, 0, 0, 0.1);
- height: 4px;
- width: 4px;
- }
- .profile {
- position: fixed;
- width: 40%;
- height: 100vh;
- max-height: 100vh;
- left: 0;
- top: 0;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- }
- .footer {
- display: none;
- }
- @media screen and (max-width: 1024px) {
- h3 {
- margin-bottom: 0;
- }
- .content {
- overflow-y: auto;
- overflow-x: hidden;
- display: block;
- height: 100%;
- }
- .container {
- width: 100%;
- }
- .titles:first-child {
- margin-top: 3rem;
- }
- .profile {
- position: relative;
- display: block;
- width: 100%;
- height: 60vh;
- min-height: 60vh;
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- }
- .socials {
- position: relative;
- margin: 0 auto;
- top: calc(100% + 1rem);
- left: 0;
- }
- .socials a {
- color: var(--navigationTextColor);
- padding-right: 15px;
- transition: all .5s ease;
- -webkit-transition: all .5s ease;
- -moz-transition: all .5s ease;
- -ms-transition: all .5s ease;
- -o-transition: all .5s ease;
- }
- .textContent {
- height: auto;
- }
- #searchResults .profile {
- display: none;
- height: 0;
- width: 0;
- }
- .socials.navigation {
- width: 0;
- display: none;
- }
- #credit {
- display: none;
- }
- .footer {
- position: relative;
- display: block;
- height: min-content;
- width: 100%;
- margin: 16px;
- }
- .footer .mobileNav {
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- }
- .footer .mobileNav a {
- margin-right: 20px;
- color: var(--navigationTextColor);
- }
- .footer .mobileNav a:hover {
- opacity: 0.7;
- }
- .footer .mobileNav a:last-child {
- margin-right: 0px;
- }
- }
- @media screen and (max-width: 700px) {
- .header {
- width: 75%;
- margin: 0 auto;
- }
- }
- </style>
- </head>
- <body>
- <div class="socials navigation">
- <a href="/" title="Back to blog">
- <ion-icon name="chevron-back" title="Back to blog" size="small"></ion-icon>
- </a>
- <!-- needs a duplicate for some reason zzz -->
- <ion-icon name="chevron-back" style="display: none;"></ion-icon>
- </div>
- <div class="container">
- <div class="header">
- <div class="searchbar">
- <ion-icon name="search" id="searchIcon" size="small" style="pointer-events: auto;"></ion-icon>
- <input id="search" type="text" placeholder="Search">
- </div>
- <!-- NAVIGATION -->
- <button class="tablink activated" onclick="openTab(event, 'home', 'homePic')">intro</button>
- <button class="tablink" onclick="openTab(event, 'tab1', 'image1')">title 1</button>
- <button class="tablink" onclick="openTab(event, 'tab2', 'image2')">title 2</button>
- <button class="tablink" onclick="openTab(event, 'tab3', 'image3')">title 3</button>
- <!-- ADD MORE NAVIGATION LINKS HERE -->
- </div>
- <!-- HOME PANEL -->
- <div class="content activated" id="home">
- <div class="profile" id="homePic"
- style="background-image: url('https://static.tumblr.com/bkdoxe7/lgxqy7i09/group-photo-cropped.jpg');">
- <div class="socials">
- <a href="/" target="_blank" title="Instagram">
- <ion-icon size="small" name="logo-instagram"></ion-icon>
- </a>
- <a href="/" target="_blank" title="YouTube">
- <ion-icon size="small" name="logo-youtube"></ion-icon>
- </a>
- <a href="/" target="_blank" title="Link">
- <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
- </a>
- </div>
- </div>
- <div class="textContent">
- <div class="titles">
- <h3>SUBTITLE</h3>
- <h1>Intro</h1>
- </div>
- <hr>
- <div class="titles">
- <span class="byline">by <b>Author</b></span>
- </div>
- <div class="description">
- <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur.</p>
- </div>
- <hr>
- </div>
- </div>
- <!-- PANEL 1 -->
- <div class="content" id="tab1" style="display:none">
- <div class="profile" id="image1"
- style="background-image: url('https://static.tumblr.com/bkdoxe7/NH7qydn63/irene_1_.jpg');">
- <div class="socials">
- <a href="/" target="_blank" title="Instagram">
- <ion-icon size="small" name="logo-instagram"></ion-icon>
- </a>
- <a href="/" target="_blank" title="YouTube">
- <ion-icon size="small" name="logo-youtube"></ion-icon>
- </a>
- <a href="/" target="_blank" title="Link">
- <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
- </a>
- </div>
- </div>
- <div class="textContent">
- <div class="titles">
- <h3>SUBTITLE</h3>
- <h1>Title 1</h1>
- </div>
- <hr>
- <div class="titles">
- <span class="byline">by <b>Author</b></span>
- </div>
- <div class="description">
- <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur.</p>
- </div>
- <hr>
- </div>
- </div>
- <!-- PANEL 2 -->
- <div class="content" id="tab2" style="display:none">
- <div class="profile" id="image2"
- style="background-image: url('https://static.tumblr.com/bkdoxe7/Tc2qy6jqd/seulgi.jpg');">
- <div class="socials">
- <a href="/" target="_blank" title="Instagram">
- <ion-icon size="small" name="logo-instagram"></ion-icon>
- </a>
- <a href="/" target="_blank" title="YouTube">
- <ion-icon size="small" name="logo-youtube"></ion-icon>
- </a>
- <a href="/" target="_blank" title="Link">
- <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
- </a>
- </div>
- </div>
- <div class="textContent">
- <div class="titles">
- <h3>SUBTITLE</h3>
- <h1>Title 2</h1>
- </div>
- <hr>
- <div class="titles">
- <span class="byline">by <b>Author</b></span>
- </div>
- <div class="description">
- <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur.</p>
- </div>
- <hr>
- </div>
- </div>
- <!-- PANEL 3 -->
- <div class="content" id="tab3" style="display:none">
- <div class="profile" id="image3"
- style="background-image: url('https://static.tumblr.com/bkdoxe7/mcjqy6js4/wendy.jpg');">
- <div class="socials">
- <a href="/" target="_blank" title="Instagram">
- <ion-icon size="small" name="logo-instagram"></ion-icon>
- </a>
- <a href="/" target="_blank" title="YouTube">
- <ion-icon size="small" name="logo-youtube"></ion-icon>
- </a>
- <a href="/" target="_blank" title="Link">
- <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
- </a>
- </div>
- </div>
- <div class="textContent">
- <div class="titles">
- <h3>SUBTITLE</h3>
- <h1>Title 3</h1>
- </div>
- <hr>
- <div class="titles">
- <span class="byline">by <b>Author</b></span>
- </div>
- <div class="description">
- <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur.</p>
- </div>
- <hr>
- </div>
- </div>
- <!-- PANEL TEMPLATE -->
- <!-- 1. Give the content panel a unique id (eg. "tab4") -->
- <!-- 2. Set the profile image inside background-image and give it a unique id (eg. image4) -->
- <!-- 3. Add a tablink corresponding to the panel and image id under NAVIGATION
- (eg. <button class="tablink" onclick="openTab(event, 'tab4', 'image4')">tab title</button>) -->
- <!-- <div class="content" id="tab4" style="display:none">
- <div class="profile" id="image4"
- style="background-image: url('URL HERE');">
- MODIFY USING ICONS FROM "https://ionic.io/ionicons""
- <div class="socials">
- <a href="/" target="_blank" title="Instagram">
- <ion-icon size="small" name="logo-instagram"></ion-icon>
- </a>
- <a href="/" target="_blank" title="YouTube">
- <ion-icon size="small" name="logo-youtube"></ion-icon>
- </a>
- <a href="/" target="_blank" title="Link">
- <ion-icon size="small" name="link" style="pointer-events: auto;"></ion-icon>
- </a>
- </div>
- </div>
- <div class="textContent">
- <div class="titles">
- <h3>SUBTITLE</h3>
- <h1>Title 4</h1>
- </div>
- <hr>
- <div class="titles">
- <span class="byline">by <b>Author</b></span>
- </div>
- <div class="description">
- <p>Lorem <b>bold</b> <i>italic</i> <u>underline</u> ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod <a href="">link</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur.</p>
- </div>
- <hr>
- </div>
- </div> -->
- <div class="content" id="searchResults" style="display:none">
- <span class="status">Loading...</span>
- </div>
- </div>
- <!-- import icons -->
- <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
- <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
- <!-- script to make first letter special -->
- <script>
- document.addEventListener("DOMContentLoaded", function () {
- var descriptions = document.getElementsByClassName("description");
- for (var i = 0; i < descriptions.length; i++) {
- try {
- const element = descriptions[i].querySelector('p');
- const keep = element.innerHTML.substring(1);
- // store the first character for memory
- var first = element.innerText[0];
- // remove first character
- element.innerText = element.innerText.substring(1);
- // add span tag
- var firstLetter = document.createElement("span");
- firstLetter.innerText = first;
- firstLetter.classList.add("first-letter");
- // add to first paragraph
- element.innerHTML = "<span class='first-letter'>" + first + "</span>" + keep;
- }
- catch { console.log("Couldn't stylize drop caps") }
- }
- });
- </script>
- <!-- script to open search bar -->
- <script>
- var searchIcon = document.getElementById("searchIcon");
- searchIcon.addEventListener('click', function (ev) {
- const searchBar = document.getElementById("search");
- if (searchBar.style.width) {
- // closing
- searchIcon.style.marginRight = '0';
- searchBar.style.width = "";
- } else {
- // opening
- searchIcon.style.marginRight = '8px';
- searchBar.style.width = '125px';
- searchBar.focus();
- }
- }, false);
- </script>
- <!-- script to change tab panels + search bar functionality -->
- <script>
- // get the id of the default image that displays on page load
- var currImage = document.getElementsByClassName("content activated")[0].getElementsByClassName("profile")[0].id;
- // add a footer to every content panel
- document.addEventListener("DOMContentLoaded", function () {
- const panel = document.getElementsByClassName("content");
- for (let i = 0; i < panel.length; i++) {
- const footer = document.createElement("div");
- footer.classList.add("footer");
- footer.innerHTML =
- '<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>';
- panel[i].appendChild(footer);
- }
- const c = document.createElement("div");
- c.id = "credit";
- c.innerHTML =
- '<a href="https://undeadmagikarp.tumblr.com/" target="_blank" title="Theme Credit" style="color: var(--bodyColor);"><ion-icon name="code-slash-outline"></ion-icon></a>';
- document.body.appendChild(c);
- });
- function changeImage(imageName) {
- const sidePics = document.getElementsByClassName("profile");
- for (j = 0; j < sidePics.length; j++) {
- sidePics[j].style.display = 'none';
- }
- document.getElementById(imageName).style.display = 'block';
- }
- function openTab(evt, tabName, imageName) {
- // change side image
- if (tabName !== "searchResults") {
- changeImage(imageName);
- currImage = imageName;
- } else if (tabName === "searchResults" && !window.matchMedia("(max-width: 1024px)").matches) {
- let dupImage = document.getElementById(currImage).cloneNode(true);
- dupImage.id = "";
- document.getElementById("searchResults").appendChild(dupImage);
- };
- var i, j, x, tablinks;
- // display tab panel content
- x = document.getElementsByClassName("content");
- for (i = 0; i < x.length; i++) {
- x[i].style.display = "none";
- }
- document.getElementById(tabName).style.display = "flex";
- // activate
- tablinks = document.getElementsByClassName("tablink");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" activated", "");
- }
- try {
- evt.currentTarget.className += " activated";
- } catch {
- console.log('searching...')
- }
- }
- // SEARCH FEATURE
- function getIndicesOf(searchStr, str, caseSensitive) {
- var searchStrLen = searchStr.length;
- if (searchStrLen == 0) {
- return [];
- }
- var startIndex = 0,
- index, indices = [];
- if (!caseSensitive) {
- str = str.toLowerCase();
- searchStr = searchStr.toLowerCase();
- }
- while ((index = str.indexOf(searchStr, startIndex)) > -1) {
- indices.push(index);
- startIndex = index + searchStrLen;
- }
- return indices;
- }
- var searchInput = document.getElementById("search");
- searchInput.addEventListener('input', onInput);
- function onInput() {
- // switch to search panel
- const searchPanel = document.getElementById("searchResults");
- if (!searchPanel.classList.contains("activated")) {
- let loading = document.createElement("span");
- loading.classList.add("status");
- loading.innerText = "Loading...";
- searchPanel.innerHTML = "";
- searchPanel.appendChild(loading);
- openTab(null, "searchResults", null);
- }
- // add timer to run search when user input stops
- var duration = 200;
- clearTimeout(searchInput._timer);
- searchInput._timer = setTimeout(() => {
- search(this.value);
- }, duration);
- }
- function search(query) {
- // if search result is empty go back to first panel
- if (!query) {
- var tablinks = document.getElementsByClassName("tablink")[0].click();
- } else {
- const searchPanel = document.getElementById("searchResults");
- // add a container to store results
- let resultContainer = document.createElement("div");
- resultContainer.classList.add("resultContainer");
- searchPanel.appendChild(resultContainer);
- // loop through each content container
- const content = document.getElementsByClassName("content");
- let total = 0;
- for (let i = 0; i < content.length; i++) {
- // don't search in the search panel
- if (content[i].id === "searchResults") break;
- // separate content into array of sentences
- let sentences = content[i].getElementsByClassName("description")[0].innerText.replace(
- /([.?!])\s*(?=[A-Z])/g, "$1|").split("|");
- sentences.push(content[i].querySelector('h1').innerText);
- sentences.push(content[i].querySelector('h3').innerText);
- sentences.push(content[i].getElementsByClassName("byline")[0].innerText);
- // loop through sentences and try to find match
- let matches = [];
- let sentenceIndices = [];
- for (let j = 0; j < sentences.length; j++) {
- let positions = getIndicesOf(query.trim(), sentences[j].trim(), false);
- if (positions.length > 0) {
- matches.push(positions);
- sentenceIndices.push(j);
- };
- };
- // found substring in sentence
- if (matches.length > 0) {
- // create result div
- let result = document.createElement("button");
- result.classList.add("result");
- result.onclick = function () {
- document.getElementsByClassName("tablink")[i].click();
- };
- // fill it in with query info
- let found = document.createElement('div');
- found.classList.add("foundList");
- let matchCount = 0;
- // loop through matches and create a separate p tag for each sentence with a match
- for (let k = 0; k < sentenceIndices.length; k++) {
- total += 1;
- matchCount += 1;
- let resultSentence = sentences[sentenceIndices[k]].trim();
- let match = document.createElement("p");
- match.innerHTML = resultSentence.slice(0, matches[k][0]) + '<b>' +
- resultSentence.slice(matches[k][0], matches[k][0] + query.trim().length) + '</b>' +
- resultSentence.slice(matches[k][0] + query.trim().length, resultSentence.length);
- found.appendChild(match);
- };
- let title = document.createElement("h3");
- title.innerText = document.getElementById(content[i].id).querySelector('h1').innerText + " (" +
- matchCount + ")";
- result.appendChild(title);
- result.appendChild(found);
- // add it to the panel
- resultContainer.appendChild(result);
- };
- };
- // clear loading notice
- searchPanel.removeChild(searchPanel.querySelector('span'));
- // Couldn't find anything
- if (total == 0) {
- let notFound = document.createElement("span");
- notFound.classList.add("status");
- notFound.innerText = "No results found.";
- searchPanel.appendChild(notFound);
- } else {
- let sum = document.createElement('h2');
- sum.innerText = "Results (" + total + ")";
- searchPanel.insertBefore(sum, resultContainer);
- };
- };
- };
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment