gkm

04 Sentimental

gkm
Aug 13th, 2015
840
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.15 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <!--
  3.  
  4. Theme 04
  5. "Sentimental"
  6.  
  7. Made by Gretchen Marlow
  8. gretchcodes.tumblr.com
  9.  
  10.  
  11. This work is licensed under a
  12. Creative Commons Attribution-NonCommercial 4.0 International License
  13.  
  14. Read about what that means here:
  15. http://creativecommons.org/licenses/by-nc/4.0/
  16.  
  17.  
  18. Thank you for using my themes!
  19.  
  20. <3
  21.  
  22. -->
  23. <head>
  24.  
  25. <style>
  26. .tmblr-iframe { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:1; z-index:999;}
  27. </style>
  28.  
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <!-- JQUERY for header scroll animation-->
  32. <script>
  33. $(function(){
  34. var shrinkHeader = 80;
  35. $(window).scroll(function() {
  36. var scroll = getCurrentScroll();
  37. if ( scroll >= shrinkHeader ) {
  38. $('#links').addClass('smaller');
  39. $('#header').addClass('smaller');
  40. $('.home').addClass('smaller');
  41. $('.askbutton').addClass('smaller');
  42. $('#headerimg').addClass('fade');
  43. }
  44.  
  45. else {
  46. $('#header').removeClass('smaller');
  47. $('#links').removeClass('smaller');
  48. $('.home').removeClass('smaller');
  49. $('.askbutton').removeClass('smaller');
  50. $('#headerimg').removeClass('fade');
  51. }
  52.  
  53. });
  54. function getCurrentScroll() {
  55. return window.pageYOffset;
  56. }
  57. });
  58. </script>
  59.  
  60. <title>{Title}</title>
  61.  
  62. <link rel="shortcut icon" href="{Favicon}">
  63. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  64. {block:Description}<meta name="Description" content="{MetaDescription}"/>{/block:Description}
  65.  
  66. <meta name="image:Header Image" content=""/>
  67. <meta name="color:Background" content="white"/>
  68. <meta name="color:Text" content="black"/>
  69. <meta name="color:Links" content="#5a779d"/>
  70. <meta name="color:Links Hover" content="black"/>
  71. <meta name="color:Title" content="black"/>
  72. <meta name="color:Title Hover" content="black"/>
  73. <meta name="color:Header Links" content="black"/>
  74. <meta name="color:Header Links Hover" content="#5a779d"/>
  75. <meta name="color:Permalink Links" content="black"/>
  76. <meta name="color:Permalink Links Hover" content="#5a779d"/>
  77. <meta name="color:Permalink Background" content="#f8f8f8"/>
  78. <meta name="color:Blockquote" content="#eee"/>
  79. <meta name="color:Pagination" content="black"/>
  80. <meta name="color:Pagination Hover" content="black"/>
  81.  
  82. <meta name="if:Show Links" content="1"/>
  83.  
  84. <meta name="text:Header Links Opacity" content="1"/>
  85. <meta name="text:Header Links Hover Opacity" content="1"/>
  86.  
  87. <meta name="text:Link 1" content="link1" />
  88. <meta name="text:Link 1 URL" content="/" />
  89. <meta name="text:Link 2" content="link2" />
  90. <meta name="text:Link 2 URL" content="/"/>
  91. <meta name="text:Link 3" content="link3"/>
  92. <meta name="text:Link 3 URL" content="/" />
  93. <meta name="text:Link 4" content="link4"/>
  94. <meta name="text:Link 4 URL" content="/" />
  95.  
  96.  
  97. <style type="text/css">
  98.  
  99.  
  100.  
  101. /*Basics*/
  102.  
  103. body{font-family:Arial;
  104. background:{color:Background};
  105. color:{color:Text};
  106. letter-spacing:1;
  107. font-size:11px;
  108. line-height:17px;
  109. text-align:justify;
  110. word-wrap:break-word;}
  111.  
  112. a{color:{color:Links};
  113. text-decoration:none;
  114. -webkit-transition: all 0.3s;
  115. -moz-transition: all 0.3s;
  116. -ms-transition: all 0.3s;
  117. -o-transition: all 0.3s;
  118. transition: all 0.3s;}
  119.  
  120. a:hover{color:{color:Links Hover};}
  121.  
  122. img{opacity:1;
  123. max-width:100%;
  124. border:none;
  125. text-decoration:none}
  126.  
  127. blockquote {padding:0px 0px 0px 20px;
  128. border-left:1px solid {color:Blockquote};
  129. margin-left:15px;}
  130.  
  131. small{font-size:10px;}
  132.  
  133. big{font-size:14px;}
  134.  
  135.  
  136. /* Header */
  137.  
  138. #contain{position:fixed;
  139. z-index:99;}
  140.  
  141. #header{width:100%;
  142. top:0;
  143. left:0;
  144. margin:0;
  145. text-align:center;
  146. font-size:13px;
  147. font-weight:bold;
  148. line-height:25px;
  149. border-bottom:1px solid #f8f8f8;
  150. letter-spacing:4px;
  151. height:120px;
  152. background:{color:Background};
  153. position:fixed;
  154. text-transform:uppercase;}
  155.  
  156. .title{height:120px;
  157. line-height:120px;
  158. color:{color:Title};}
  159. .title:hover{color:{color:Title Hover};}
  160.  
  161. /* classes for JQUERY */
  162.  
  163. #header.smaller {height: 50px;}
  164. #header.smaller .title {letter-spacing:2px;
  165. height: 50px;
  166. line-height: 50px;}
  167. #links.smaller {font-size:10px;
  168. letter-spacing:1;
  169. height:50px;
  170. top:0;
  171. margin-top:0;
  172. line-height: 50px;}
  173. #header:hover~#links.smaller{margin-top:50.5px!important;}
  174. #links.smaller:hover{margin-top:50.5px!important;}
  175. #header.smaller .home{display:none;}
  176. #header.smaller .askbutton{display:none;}
  177. #header a:hover{color:{color:Title Hover};}
  178.  
  179. /* Home and Ask buttons */
  180.  
  181. .home{position:fixed;
  182. height:120px;
  183. line-height:120px;
  184. left:50px;
  185. margin-top:5px;}
  186. .home img{width:20px;
  187. height:20px;}
  188. .askbutton{position:fixed;
  189. height:120px;
  190. line-height:120px;
  191. right:50px;
  192. margin-top:5px;}
  193. .askbutton img{width:19px;
  194. height:19px;}
  195.  
  196. /* Links */
  197.  
  198. #links{width:100%;
  199. position:fixed;
  200. left:0;
  201. top:50px;
  202. margin-top:0px;
  203. height:70px;
  204. border-bottom:1px solid #f8f8f8;
  205. background:{color:Background};
  206. font-weight:bold;
  207. text-align:center;
  208. letter-spacing:2px;
  209. font-size:11px;
  210. line-height:70px;
  211. text-transform:uppercase;
  212. opacity:0;
  213. z-index:-999;
  214. -webkit-transition: all 0.5s ease-in-out;
  215. -moz-transition: all 0.5s ease-in-out;
  216. -o-transition: all 0.5s ease-in-out;
  217. -ms-transition: all 0.5s ease-in-out;
  218. -transition: all 0.5s ease-in-out;}
  219.  
  220. #links a{z-index:-999;
  221. color:{color:Header Links};
  222. padding:10px;
  223. margin:30px;
  224. opacity:{text:Header Links Opacity};}
  225.  
  226. #links a:hover{color:{color:Header Links Hover};
  227. opacity:{text:Header Links Hover Opacity}}
  228.  
  229. /* Header Image */
  230.  
  231. #headerimg{top:0px;
  232. left:0px;
  233. width:100%;
  234. display:block;
  235. overflow:hidden;
  236. height:100%;
  237. background-image:url("{image:Header Image}");
  238. background-size: 100%;
  239. position:fixed;
  240. background-repeat:no-repeat;
  241. z-index:0;
  242. -webkit-transition: all 1s ease-in-out;
  243. -moz-transition: all 1s ease-in-out;
  244. -o-transition: all 1s ease-in-out;
  245. -ms-transition: all 1s ease-in-out;
  246. -transition: all 1s ease-in-out;}
  247.  
  248. #headerimg.fade{
  249. opacity:.1;
  250. -webkit-transition: all 1s ease-in-out;
  251. -moz-transition: all 1s ease-in-out;
  252. -o-transition: all 1s ease-in-out;
  253. -ms-transition: all 1s ease-in-out;
  254. -transition: all 1s ease-in-out;}
  255.  
  256. #header:hover~#links{opacity:1;
  257. z-index:-999;
  258. margin-top:70.5px;
  259. -webkit-transition: all 0.5s ease-in-out;
  260. -moz-transition: all 0.5s ease-in-out;
  261. -o-transition: all 0.5s ease-in-out;
  262. -ms-transition: all 0.5s ease-in-out;
  263. -transition: all 0.5s ease-in-out;}
  264.  
  265. #links:hover{opacity:1;
  266. margin-top:70.5px;
  267. -webkit-transition: all 0.5s ease-in-out;
  268. -moz-transition: all 0.5s ease-in-out;
  269. -o-transition: all 0.5s ease-in-out;
  270. -ms-transition: all 0.5s ease-in-out;
  271. -transition: all 0.5s ease-in-out;}
  272.  
  273.  
  274. /* Post Styling */
  275.  
  276. /* Post Container */
  277.  
  278. #entries{
  279. left:0;
  280. padding-top:150px;
  281. top:100%;
  282. width:100%;
  283. z-index:1;
  284. position:absolute;
  285. {block:PermalinkPage}
  286. padding-bottom:400px;
  287. {/block:PermalinkPage}
  288. {block:IndexPage}
  289. padding-bottom:150px;
  290. {/block:IndexPage}
  291. background:{color:Background};}
  292.  
  293. /* Individual Post Styling */
  294.  
  295. #posts{width:400px;
  296. margin-left:auto;
  297. margin-right:auto;
  298. padding:10px;}
  299.  
  300. #posts img, #posts li, #posts blockquote{height:auto;
  301. max-width: 100%;}
  302.  
  303. .caption{max-width:400px;
  304. height:auto;
  305. padding-left:0px;
  306. padding-right:0px;}
  307.  
  308. /* Text and Link Posts */
  309.  
  310. .text{padding-left:0px;
  311. width:400px;
  312. padding-right:0px;}
  313.  
  314. .titles{font-size:12px;
  315. color:{color:Text};
  316. font-weight:bold;
  317. margin-bottom:15px;
  318. letter-spacing:2.5px;
  319. line-height:15px;
  320. text-align:center;
  321. text-transform:uppercase;}
  322.  
  323. /* Quotes */
  324.  
  325. #titlequote{text-align:center;
  326. font-size:15px;
  327. text-transform:uppercase;
  328. border-radius:20px;
  329. background:{color:Permalink Background};
  330. color:{color:Permalink Links};
  331. line-height:35px;
  332. letter-spacing:1px;
  333. padding:20px;
  334. font-weight:bold;}
  335.  
  336. #source{margin-top:15px;
  337. font-weight:bold;
  338. font-size:11px;
  339. margin-bottom:8px;
  340. font-style:italic;
  341. text-align:center;}
  342.  
  343. /* Asks */
  344.  
  345. .q{margin-bottom:10px;
  346. padding:20px;
  347. letter-spacing:1;
  348. color:{color:Permalink Links};
  349. border-radius:15px;
  350. background:{color:Permalink Background};}
  351.  
  352. .as{text-transform:uppercase;
  353. font-weight:bold;
  354. color:{color:Permalink Links};
  355. margin-bottom:10px;
  356. font-size:9px;
  357. letter-spacing:1.5px;}
  358. .as a{color:{color:Permalink Links};}
  359.  
  360. .a{margin-top:20px;
  361. padding-left:10px;
  362. padding-right:10px;}
  363.  
  364. /* Chat */
  365.  
  366. .chat ol{padding:5px;
  367. list-style:none;}
  368.  
  369. .line{padding:5px 0;}
  370.  
  371. .label{font-weight:bold;}
  372.  
  373. /* Video */
  374.  
  375. #video{max-width:400px;}
  376.  
  377. /* Audio */
  378.  
  379. .play {height:27px;
  380. color:white;
  381. overflow:hidden;
  382. background:white;
  383. border-radius:10px;
  384. position:relative;
  385. padding:15px;
  386. z-index:100;
  387. margin:9px 50px 7px 7.5px;}
  388.  
  389. .audiocontain{margin-top:-2px;
  390. position: absolute;
  391. z-index:100;}
  392.  
  393. .audiodata{background-color:{color:Permalink Background};
  394. border-radius:15px;
  395. z-index:100;
  396. font-size:9px;
  397. letter-spacing:2px;
  398. padding:6px 10px 10px 10px;
  399. text-transform:uppercase;
  400. line-height:200%;
  401. height:55px;
  402. width:380px;
  403. text-align:right;}
  404.  
  405. .artisttrack{margin-left:213px;
  406. height:37px;
  407. border-radius:10px;
  408. padding:10px;
  409. background:white;
  410. width:150px;
  411. margin-top:1px;}
  412.  
  413. /* Permalink Tags and Notes */
  414.  
  415. #permalink{font-size:8px;
  416. width:380px;
  417. display:block;
  418. text-align:center;
  419. padding:10px;
  420. {block:IndexPage}
  421. margin-bottom:150px;
  422. {/block:IndexPage}
  423. {block:PermalinkPage}
  424. margin-bottom:20px;
  425. {/block:PermalinkPage}
  426. border-radius:12px;
  427. text-transform:uppercase;
  428. margin-left:auto;
  429. margin-right:auto;
  430. {block:AskPage}
  431. display:none;
  432. {/block:AskPage}
  433. font-weight:bold;
  434. background:{color:Permalink Background};}
  435.  
  436. #permalink a{
  437. display:inline;
  438. letter-spacing:1px;
  439. padding-right:15px;
  440. padding:13px;
  441. margin-left:-3px;
  442. color:{color:Permalink Links};}
  443.  
  444. #permalink a:hover{color:{color:Permalink Links Hover};}
  445.  
  446. .tags{word-wrap:normal;
  447. font-size:8px;
  448. font-weight:bold;
  449. line-height:20px;
  450. margin-left:auto;
  451. margin-right:auto;
  452. padding-left:10px;
  453. text-transform:none;
  454. {block:PermalinkPage}
  455. margin-top:8px;
  456. {/block:PermalinkPage}
  457. text-align:left;
  458. width:380px;
  459. padding:10px;
  460. padding-top:0px;
  461. padding-bottom:0px;
  462. letter-spacing:1px;}
  463.  
  464. .tags a{padding:3px;
  465. opacity:.8;
  466. font-weight:normal;
  467. font-size:8.5px;
  468. margin-left:5px;}
  469.  
  470. .tags a:hover{
  471. opacity:1;}
  472.  
  473. .pagenotes{{block:IndexPage}
  474. display: none!important;
  475. {/block:IndexPage}
  476. width:390px;
  477. font-size:10px;
  478. margin-left:auto;
  479. margin-right:auto;
  480. padding-left:15px;
  481. padding-right:15px;
  482. padding-bottom:5px;}
  483.  
  484. .pagenotes img{display:none!important;}
  485.  
  486. .pagenotes li{list-style-type:none;
  487. padding:5px 0px;
  488. text-align:left;
  489. margin:0 0 0 -40px;}
  490.  
  491. /* Pagination */
  492.  
  493. #pagination{text-align:center;
  494. font-size:11px;
  495. font-weight:bold;
  496. letter-spacing:2px;
  497. color:{color:Pagination};}
  498. #pagination a{color:{color:Pagination};}
  499. #pagination a:hover{color:{color:Pagination Hover};}
  500.  
  501. /* Credit DO NOT REMOVE */
  502.  
  503. #credit{float:right;
  504. position:fixed;
  505. bottom:10px;
  506. height:23px;
  507. font-size:8px;
  508. right:10px;
  509. opacity:.4;
  510. background:white;
  511. z-index:999;
  512. text-align:center;
  513. -webkit-transition: all 0.3s;
  514. -moz-transition: all 0.3s;
  515. -ms-transition: all 0.3s;
  516. -o-transition: all 0.3s;
  517. transition: all 0.3s;}
  518. #credit:hover{opacity:1;}
  519. #credit a:hover{opacity:1;}
  520. #credit img{
  521. width:40px;}
  522.  
  523. {CustomCSS}
  524. </style>
  525.  
  526. </head>
  527.  
  528. <body>
  529. <div id="contain">
  530. <div id="header"><a href="/">
  531. <span class="home"><img src="https://40.media.tumblr.com/75ba667900d7be2eeab7e76328f6d1d8/tumblr_nsvqqilqOW1qfrnkno4_r1_100.png"></span></a>
  532. <a class="title" href="/">{Title}</a>
  533. <a href="/ask">
  534. <span class="askbutton"><img src="https://41.media.tumblr.com/9d464922b5b6f75020feb4ec962a7343/tumblr_nsvqqilqOW1qfrnkno5_r1_250.png"></span></a></div>
  535. {block:ifShowLinks}
  536. <div id="links">
  537. <span class="link">
  538. {block:ifLink1}
  539. <a href="{text:Link 1 Url}">{text:Link 1}</a>
  540. {/block:ifLink1}
  541. {block:ifLink2}
  542. <a href="{text:Link 2 Url}">{text:Link 2}</a>
  543. {/block:ifLink2}
  544. {block:ifLink3}
  545. <a href="{text:Link 3 Url}">{text:Link 3}</a>
  546. {/block:ifLink3}
  547. {block:ifLink4}
  548. <a href="{text:Link 4 Url}">{text:Link 4}</a>
  549. {/block:ifLink4}
  550. </span>
  551. </div>
  552. {/block:ifShowLinks}
  553. </div>
  554. <div id="headerimg">
  555. </div>
  556.  
  557. <!-- Posts -->
  558.  
  559. <div id="entries" >
  560.  
  561. {block:Posts}
  562.  
  563. <div id="posts">
  564.  
  565. {block:Quote}
  566.  
  567. <div id="titlequote">❝ {Quote} ❞</div>
  568. {block:Source}<div id="source">{Source}</div>{/block:Source}
  569. {/block:Quote}
  570.  
  571. {block:Text}
  572. {block:Title}
  573. <div class="titles">{Title}</div>{/block:Title}
  574. <div class="text">
  575. {Body}</div>
  576. {/block:Text}
  577.  
  578. {block:Link}
  579. <div class="titles"><a href="{URL}">{Name}</a></div>{block:Description}<div class="text">{Description}</div>{/block:Description}
  580. {/block:Link}
  581.  
  582. {block:Chat}
  583. {block:Title}
  584. <h1>{Title}</h1>
  585. {/block:Title}
  586. <div class="chat">
  587. <ol>{block:Lines}
  588. <li class="line {Alt}">
  589. {block:Label}
  590. <span class="label">
  591. {Label}</span>
  592. {/block:Label}{Line}</li>
  593. {/block:Lines}
  594. </ol></div>
  595. {/block:Chat}
  596.  
  597. {block:Photo}
  598. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
  599. {/block:Photo}
  600.  
  601. {block:Photoset}
  602. {Photoset-400}
  603. {/block:Photoset}
  604. <div id="video">
  605. {block:Video}
  606. {Video-400}
  607. {/block:Video}
  608. </div>
  609. {block:Audio}
  610. <div class="audiocontain"> <div class="play">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  611. <div class="audiodata">
  612. <div class="artisttrack">
  613. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br><b>{Artist}</b>{/block:Artist}</div>
  614.  
  615. </div>
  616. {/block:Audio}
  617.  
  618.  
  619. {block:Answer}
  620. <div class="q">
  621. <div class="as">{Asker} asked:</div>
  622. {Question}</div>
  623. <div class="a">{Answer}</div>
  624. {/block:Answer}
  625.  
  626. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  627.  
  628.  
  629. </div>
  630.  
  631. <div id="permalink">{block:Date}
  632. <a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}, {Year}</a>{/block:Date}
  633.  
  634. {block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}{block:ContentSource}<a href="{ReblogRootURL}">source</a>{/block:ContentSource}
  635. {block:NoteCount}<a href="{Permalink}">{NoteCount} ♥</a>{/block:NoteCount}
  636.  
  637. </div>
  638.  
  639. {block:PermalinkPage}{block:HasTags}
  640. <div class="tags">FILED UNDER: {block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  641. {/block:PermalinkPage}
  642.  
  643. {block:PostNotes}
  644. <div class="pagenotes">
  645. {PostNotes}
  646. </div>
  647. {/block:PostNotes}
  648.  
  649. {/block:Posts}
  650.  
  651. <div id="pagination">
  652. {block:Pagination}{block:NextPage}
  653. <a href="{NextPage}">● NEXT</a><br><br>
  654. {/block:NextPage}
  655. {block:PreviousPage}
  656. <a href="{PreviousPage}">BACK ●</a>
  657. {/block:PreviousPage}
  658. {/block:Pagination}
  659. </div>
  660.  
  661. </div>
  662.  
  663.  
  664. {block:ContentSource}
  665. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  666. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  667. {/block:SourceLogo}
  668. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  669. {/block:ContentSource}
  670.  
  671. <!-- {block:NoRebloggedFrom}
  672. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  673. {/block:NoRebloggedFrom} -->
  674.  
  675.  
  676.  
  677. <!-- Credit -->
  678. <div id="credit">
  679. <a href="http://gretchcodes.tumblr.com"><img alt="gretchcodes" src="https://40.media.tumblr.com/4224da920bc44f032a599abb29202832/tumblr_nsvqqilqOW1qfrnkno7_r1_250.png"></a>
  680. </div>
  681.  
  682. </body>
  683. </html>
Advertisement
Add Comment
Please, Sign In to add comment