Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- [Theme 27] Earworm by @Laighlin
- (A reimagining of Theme 5: Melody)
- 1. Leave the credit intact, don't move it to a different page or obscure it with anything. Be nice thanks xoxo
- 2. Don't redistribute the theme/claim as your own/lift large chunks of code to use in your own themes
- 3. Check my FAQ if you can't get the unlimited custom links to work!
- -->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="image:Favicon" content=""/>
- <meta name="image:Avatar" content=""/>
- <meta name="select:Sidebar position" content="left" title="Left"/>
- <meta name="select:Sidebar position" content="right" title="Right"/>
- <meta name="if:400px posts" content="1"/>
- <meta name="if:Custom avatar" content="0"/>
- <meta name="if:Custom favicon" content="0"/>
- <meta name="if:Glow effects" content="0"/>
- <meta name="if:Show captions" content="1"/>
- <meta name="color:Background" content="#4f4545"/>
- <meta name="color:Headphones" content="#e29e97"/>
- <meta name="color:Text highlight" content="#fff"/>
- <meta name="color:Text highlight bg" content="#799a95"/>
- <meta name="color:Text" content="#e5e5e5"/>
- <meta name="color:Text accent" content="#5ecec2"/>
- <meta name="color:Link" content="#afcecc"/>
- <meta name="color:Link hover" content="#ff9a89"/>
- <!-- text fields -->
- <meta name="text:Sidebar height" content="120px"/>
- <meta name="text:Accent font" content="Share"/>
- <meta name="text:Body font" content="Roboto"/>
- <meta name="text:Body font size" content="14px"/>
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <head><title>{Title}{block:PostSummary} ♪ {PostSummary}{/block:PostSummary}{block:SearchPage} ♪ {lang:Search results for SearchQuery}{/block:SearchPage}{block:TagPage} ♪ {lang:Posts tagged Tag}{/block:TagPage}</title>
- {block:ifCustomFavicon}
- <link rel="shortcut icon" href="{image:favicon}"/>
- {/block:ifCustomFavicon}
- {block:ifNotCustomFavicon}
- <link rel="shortcut icon" href="{Favicon}"/>
- {/block:ifNotCustomFavicon}
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
- <link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i|{text:Accent font}:400,400i,700,700i" rel="stylesheet">
- <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
- <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css"/>
- <script src="https://static.tumblr.com/xwoxjom/tTHpcsp7s/jquery.style-my-tooltips.min.js"></script>
- <style type="text/css">
- * {
- transition:.2s all ease-out;
- }
- .tmblr-iframe {
- position: fixed !important;
- transform: scale(.8) !important;
- transform-origin: 100% 100%;
- margin-top: -11px !important;
- }
- body, html {
- margin:0;
- padding:0;
- }
- ::selection {
- background:rgba({RGBcolor:text highlight bg},.9);
- color:{color:text highlight};
- }
- ::moz-selection {
- background:rgba({RGBcolor:text highlight bg},.9);
- color:{color:text highlight};
- }
- #s-m-t-tooltip {
- margin:0 16px;
- z-index:999999999;
- padding:3px 7px;
- background:{color:text highlight bg};
- color:{color:text highlight};
- pointer-events:none;
- max-width:200px;
- font-size:.9em;
- line-height:1.2em;
- font-style:italic;
- transition:none;
- }
- a, .title.link-post {
- color:{color:link};
- text-decoration:none;
- }
- a .fas { transition:none!important; }
- a:hover, .title.link-post:hover {
- color:{color:link hover};
- }
- .post ol {
- list-style-type:decimal-leading-zero;
- padding-left:40px;
- }
- .post ul {
- list-style-type:none;
- padding-left:35px;
- }
- .post ul li { position:relative; }
- .post ul li:before {
- content:'\266B';
- color:{color:headphones};
- position:absolute;
- left:-1.2em;
- top:0;
- }
- hr {
- border:none;
- border-top:1px dashed {color:headphones};
- margin:1em 20%;
- }
- code {
- font-family:monospace;
- border:1px solid {color:borders};
- padding:10px;
- display:inline-block;
- }
- code, #s-m-t-tooltip, .media-wrap.no-text {
- border-radius:5px;
- overflow:hidden;
- }
- h1, h2 {
- margin:0;
- font-weight:inherit;
- }
- b, strong, i, em, strike, u { color:{color:text accent}; }
- p { margin:.9em 0; }
- p:first-child { margin-top:0; }
- p:last-child { margin-bottom:0; }
- blockquote, blockquote blockquote {
- margin:.5em 0 .5em 10px;
- padding-left:10px;
- border-left:1px dashed {color:headphones};
- }
- body {
- color:{color:text};
- font-family:'{text:body font}',sans-serif;
- font-size:{text:body font size};
- word-wrap:break-word;
- overflow-y:scroll;
- overflow-x:hidden;
- line-height:1.7em;
- background:{color:background};
- }
- ::-webkit-scrollbar {
- height:9px;
- width:9px;
- border:3px solid {color:background};
- background:rgba({RGBcolor:text accent},.5);
- }
- ::-webkit-scrollbar-thumb {
- background:{color:headphones} padding-box;
- border:solid {color:background};
- border-width:3px 0;
- }
- #sidebar {
- width:280px;
- position:fixed;
- top:{text:sidebar height};
- bottom:0;
- {select:sidebar position}:calc(50% - 390px);
- /*display:none;*/
- }
- #headline-wrap {
- position:relative;
- width:100%;
- height:110px;
- }
- /*headphone code starts here lmao kms... this was extremely annoying to do in every way*/
- {block:ifGlowEffects}
- #headphone:before, .nav-link {
- box-shadow:0 0 10px 1px {color:headphones};
- }
- {/block:ifGlowEffects}
- #headphone-wrap {
- position:absolute;
- width:110px;
- height:110px;
- border-radius:50%;
- left:-30px;
- top:-10px;
- }
- #user-icon {
- border-radius:50%;
- width:100px;
- position:absolute;
- top:4px;
- left:4px;
- z-index:2;
- }
- #headphone {
- width:100px;
- height:50px;
- position:absolute;
- z-index:1;
- border:4px solid {color:headphones};
- border-radius:50px 50px 0 0;
- transform:rotate(-30deg) translate(0,-7px);
- transform-origin:50% 100%;
- border-bottom-width:0;
- }
- #headphone:before {
- content:'';
- position:absolute;
- width:130px;
- height:40px;
- left:-15px;
- top:38px;
- border-radius:15px;
- background:{color:headphones};
- }
- #title {
- font-size:1.8em;
- line-height:1em;
- position:absolute;
- left:75px;
- text-indent:8px;
- bottom:20px;
- text-shadow:2px 2px 0 rgba({RGBcolor:headphones},.5);
- }
- #title:hover {
- color:{color:text};
- text-shadow:2px 2px 0 rgba({RGBcolor:text accent},.5);
- }
- #desc {
- margin-left:10px;
- margin-top:-10px;
- line-height:1.5em;
- position:relative;
- padding:0 10px;
- }
- /*Headphone wires*/
- #desc:before, #desc:after {
- border:solid {color:headphones};
- content:'';
- position:absolute;
- width:15px;
- }
- #desc:before {
- border-width:0 0 4px 4px;
- left:-25px;
- top:-30px;
- bottom:10px;
- border-bottom-left-radius:15px;
- }
- #desc:after {
- right:-25px;
- bottom:-34px;
- height:40px;
- border-radius:0 15px 15px 0;
- border-width:4px 4px 4px 0;
- }
- /*Navigation links*/
- #blog-nav {
- text-align:right;
- margin-top:15px;
- width:calc(100% + 8px);
- cursor:default;
- }
- .nav-link, #cred {
- display:inline-block;
- margin-left:2px;
- padding:6px;
- border-radius:50%;
- font-size:16px;
- height:1em;
- width:1em;
- text-align:center;
- border:4px solid {color:headphones};
- cursor:pointer;
- }
- .nav-link.fa-play { text-align:right; }
- .nav-link:hover, #cred:hover {
- box-shadow:0 0 0 1px {color:headphones}, 0 0 0 1px {color:headphones} inset;
- }
- .nav-link:active, #cred:active {
- box-shadow:none;
- }
- /*Custom links*/
- #cust-links {
- margin-top:20px;
- counter-reset:linq-num;
- width:calc(100% + 8px);
- }
- .linq {
- margin:.3em 0;
- font:1.1em '{text:accent font}', sans-serif;
- }
- .linq:before {
- font-weight:bold;
- content:counter(linq-num,decimal-leading-zero)".";
- counter-increment:linq-num;
- margin-right:.3em;
- }
- .lien {
- height:2px;
- background:rgba({RGBcolor:text accent},.5);
- margin-right:.6em;
- }
- .linq:before, .mus-note {
- color:rgba({RGBcolor:text accent},.85);
- }
- .mus-note {
- float:right;
- font-size:.8em;
- }
- /*Start of content styling*/
- #content {
- position:absolute;
- {block:if400pxposts}
- width:400px;
- {/block:if400pxposts}
- {block:ifnot400pxposts}
- width:500px;
- {/block:ifnot400pxposts}
- {select:sidebar position}:calc(50% - 25px);
- /*display:none;*/
- }
- .post-wrapper {
- margin:50px auto;
- position:relative;
- }
- .title, #title {
- color:{color:text accent};
- text-transform:uppercase;
- font-family:'{text:accent font}';
- font-weight:bold;
- }
- .caption a, #desc a { border-bottom:1px solid {color:borders}; }
- .caption a:hover, #desc a:hover { border-color:transparent; }
- .caption img {
- margin:0;
- max-width:100%;
- }
- .caption h1 { font-size:1.5em; }
- .caption h2 { font-size:1.3em; }
- {block:ifNotShowCaptions}
- {block:IndexPage}
- .type-audio .caption, .type-video .caption, .type-photo .caption, .type-photoset .caption {
- display:none;
- }
- {/block:IndexPage}
- {/block:ifNotShowCaptions}
- .media-wrap.no-text {
- margin:0;
- line-height:0;
- }
- .chat.even { padding-left:25px; }
- .chat b { color:{color:link}; }
- iframe.tumblr_audio_player { height:85px!important }
- .a-url {
- position:relative;
- }
- .a-url img {
- border-radius:50%;
- width:36px;
- }
- .askr {
- text-transform:uppercase;
- position:absolute;
- top:calc(18px - .5em);
- line-height:1em;
- margin-left:10px;
- }
- .post-wrapper a:not(.rb):hover, .linq:hover, #desc a:hover {
- animation:linkblink .7s ease;
- }
- @keyframes linkblink {
- 0% { text-shadow: 0 0 0; }
- 100% { text-shadow: 0 -5px 1px transparent; }
- }
- .tag-wrap {
- margin-top:5px;
- font-size:.9em;
- }
- .via {
- margin-bottom:10px;
- }
- .via, .info {
- font-family:'{text:accent font}';
- text-transform:uppercase;
- display:flex;
- align-items:center;
- width:inherit;
- }
- .info .fas, .via .fas { color:{color:text accent}; }
- .info {
- position:relative;
- margin-top:10px;
- }
- .src { margin-right:.6em; }
- .noleft { margin-left:0; }
- .controls {
- font-size:1em;
- cursor:default;
- /* ^ really nitpicky, sorry, i just hate that text cursor that pops up between the like and reblog buttons*/
- }
- .controls a:hover {
- color:{color:headphones};
- }
- .controls .fa-random {
- margin-right:3px;
- }
- .controls * {
- cursor:pointer;
- color:{color:text accent};
- }
- .controls .fa-random {
- font-size:1.1em;
- }
- .like-wrap {
- position:relative;
- width:1em;
- height:1em;
- }
- .like_button {
- position:absolute;
- z-index:5;
- top:0;
- left:0;
- opacity:.00001;
- height:1em;
- }
- .like_button iframe {
- width:100% !important;
- height:100% !important;
- }
- .like-btn { z-index:1; }
- .like_button.liked + .like-btn { color:{color:headphones}; }
- #notes { margin:10px auto 50px 22px; }
- #notes ol.notes {
- list-style-type:decimal-leading-zero;
- padding:0;
- margin:0;
- font-size:.9em;
- }
- li.note { margin-bottom:10px; }
- #notes blockquote { margin-left:9px; }
- #notes ol.notes img.avatar { display:none; }
- #notes .tumblelog, #notes .source_tumblelog, .note.like a {
- font-family:'{text:accent font}';
- }
- #cred {
- position:fixed;
- bottom:15px;
- {select:sidebar position}:15px;
- }
- .result { margin-top:50px; }
- .stretch { flex-grow:9; }
- .line-stretch .lien { margin-left:.6em; }
- .line-stretch {
- display:flex;
- align-items:center;
- text-transform:uppercase;
- }
- {CustomCSS}
- </style>
- </head>
- <body class="background">
- <aside id="sidebar">
- <div id="mini-wrap">
- <!--Headphone stuff is here, it's janky so don't touch lmao-->
- <div id="headline-wrap">
- <div id="headphone-wrap">
- <img id="user-icon" {block:ifNotCustomAvatar}src="{PortraitURL-128}"{/block:ifNotCustomAvatar} {block:ifCustomAvatar}src="{image:avatar}"{/block:ifCustomAvatar}>
- <div id="headphone"></div>
- </div>
- <a href="/"><h1 id="title">{Title}</h1></a>
- </div>
- <aside id="desc">{Description}</aside>
- <nav id="blog-nav">
- {block:PreviousPage}
- <a href="{PreviousPage}" class="nav-link fas fa-step-backward" title="Previous page"></a>
- {/block:PreviousPage}
- {block:AskEnabled}
- <a href="/ask" class="nav-link fas fa-pause" title="Ask"></a>
- {/block:AskEnabled}
- <a href="/" class="nav-link fas fa-play" title="Home"></a>
- {block:SubmissionsEnabled}
- <a href="/submit" class="nav-link fas fa-stop" title="Submit"></a>
- {/block:SubmissionsEnabled}
- {block:NextPage}
- <a href="{NextPage}" class="nav-link fas fa-step-forward" title="Next page"></a>
- {/block:NextPage}
- </nav>
- </div>
- {block:HasPages}
- <nav id="cust-links">
- {block:Pages}
- <a class="linq line-stretch" href="{URL}">{Label}
- <span class="stretch lien"></span><span class="fas fa-music mus-note"></span></a>
- {/block:Pages}
- </nav>
- {/block:HasPages}
- </aside>
- <main id="content">
- {block:SearchPage}
- <h2 class="title result">
- {block:SearchResults}
- {lang:SearchResultCount results for SearchQuery 2}
- {/block:SearchResults}
- {block:NoSearchResults}
- {lang:No search results for SearchQuery 2}
- {/block:NoSearchResults}
- </h2>
- {/block:SearchPage}
- {block:TagPage}
- <h2 class="title result">
- {lang:Posts tagged Tag 3}
- </h2>
- {/block:TagPage}
- {block:Posts inlineMediaWidth="400" nestedMediaWidth="380"}
- <div class="post-wrapper">
- {block:Date}
- <header class="via">
- {block:Reblog}
- <span class="src">
- <span class="fas fa-random" aria-label="reblogged from"></span> <a href="{ReblogParentURL}" title="Reblogged from">{ReblogParentName}</a>
- </span>
- {/block:Reblog}
- <span class="lien stretch"></span>
- <span class="fas fa-calendar" aria-label="posted on"></span> <a href="{Permalink}" title="{TimeAgo}">{DayofMonth}.{MonthNumber}.{Year}</a>
- </header>
- {/block:Date}
- <article class="post {block:Date}not-page{/block:Date} type-{PostType}">
- {block:Title}
- <h2 class="title">{Title}</h2>
- {/block:Title}
- {block:Text}
- <div class="text-body caption">{Body}</div>
- {/block:Text}
- {block:Answer}
- <div class="ques">
- <div class="a-url"><img src="{AskerPortraitURL-48}"> <span class="askr">{Asker} says —</span></div>
- <div style="text-indent:46px;margin-top:-5px">“{Question}”</div>
- </div>
- <div class="caption">{Answer}</div>
- {/block:Answer}
- {block:Chat}
- {block:Lines}
- <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
- {/block:Lines}
- {/block:Chat}
- {block:Link}
- <a href="{URL}">
- <h2 class="title link-post">
- <span class="fas fa-link"></span> {Name} 🡒
- </h2></a>
- <div class="caption">
- {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
- {block:Description}{Description}{/block:Description}
- </div>
- {/block:Link}
- {block:Quote}
- <h2 class="post-title quote">“{Quote}”</h2>
- {block:Source}<div class="caption" style="text-align:right">— {Source}</div>{/block:Source}
- {/block:Quote}
- {block:Photo}
- <figure class="media-wrap no-text">
- {LinkOpenTag}<img src="{PhotoURL-500}" width="100%">{LinkCloseTag}
- </figure>
- {block:Caption}
- <div class="caption">{Caption}</div>
- {/block:Caption}
- {/block:Photo}
- {block:Photoset}
- <figure class="media-wrap no-text">
- {block:if400pxposts}
- {Photoset-400}
- {/block:if400pxposts}
- {block:ifnot400pxposts}
- {Photoset-500}
- {/block:ifnot400pxposts}
- </figure>
- {block:Caption}
- <div class="caption">{Caption}</div>
- {/block:Caption}
- {/block:Photoset}
- {block:Audio}
- <figure class="media-wrap no-text">
- {block:if400pxposts}
- {AudioEmbed-400}
- {/block:if400pxposts}
- {block:ifnot400pxposts}
- {AudioEmbed-500}
- {/block:ifnot400pxposts}
- </figure>
- {block:Caption}
- <div class="caption">{Caption}</div>
- {/block:Caption}
- {/block:Audio}
- {block:Video}
- <figure class="media-wrap no-text">
- {block:if400pxposts}
- {Video-400}
- {/block:if400pxposts}
- {block:ifnot400pxposts}
- {Video-500}
- {/block:ifnot400pxposts}
- </figure>
- {block:Caption}
- <div class="caption">{Caption}</div>
- {/block:Caption}
- {/block:Video}
- {block:More}
- <a class="more" href="{Permalink}">{lang:Keep reading}</a>
- {/block:More}
- {block:HasTags}
- <footer class="tag-wrap">
- {block:Tags}#<a class="tag" href="{TagURL}">{Tag}</a> {/block:Tags}
- </footer>
- {/block:HasTags}
- </article>
- {block:Date}
- <footer class="info">
- {block:NoteCount}
- <span class="fas fa-bookmark" aria-hidden="true"></span> <a href="{Permalink}#notes">{NoteCountWithLabel}</a>
- {block:RebloggedFrom} {/block:RebloggedFrom}
- {/block:NoteCount}
- {block:RebloggedFrom}
- <span class="src" {block:ContentSource} style="display:none" {/block:ContentSource}> <span class="fas fa-user" aria-label="originally posted by"></span> <a href="{ReblogRootURL}" title="Originally by">{ReblogRootName}</a></span>
- {/block:RebloggedFrom}
- {block:ContentSource}
- <span class="src">
- <span class="fas fa-user" aria-label="source"></span> <a href="{SourceURL}">SRC</a>
- </span>
- {/block:ContentSource}
- <div class="lien stretch"></div>
- <div class="controls">
- <a href="{ReblogURL}" class="rb fas fa-random"></a>
- <span class="like-wrap">{LikeButton}<a class="rb like-btn fas fa-heart"></a></span>
- </div>
- </footer>
- {/block:Date}
- {block:PostNotes}
- <div class="note-title via" style="margin-top:50px" name="notes">Notes</div>
- <footer id="notes">
- {PostNotes}
- </footer>
- {/block:PostNotes}
- </div>
- {/block:Posts}
- </main>
- <a class="fas fa-music" id="cred" title="Theme © Laighlin"></a>
- </body>
- <script type="text/javascript">
- $(document).ready(function() {
- $('[title]').style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:100,
- tip_fade_speed:300
- }); // tooltip script
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement