Advertisement
dolcevitae

theme no. four - teenage fantasy

Nov 19th, 2018
690
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.64 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html><head>
  3.  
  4.  
  5. <!-- THEME 04 BY DOLCEVITAE -->
  6.  
  7. <!-- BASICS -->
  8. <title>{title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="stylesheet" href="hint.css">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  12.  
  13. <!-- ICONS -->
  14. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  15. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  16.  
  17.  
  18. <!-- STYLESHEETS & SCRIPTS -->
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  20. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  21.  
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  23. <script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  24.  
  25.  
  26. <!-- FONTS -->
  27. <link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Nunito:300,400,70|ABeeZee|Karla:400,700" rel="stylesheet">
  28.  
  29.  
  30.  
  31. <!-- TOOLTIP SCRIPT -->
  32. <script> (function($){ $(document).ready(function() { $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:20, tip_fade_speed:200, attribute:"title" }); }); })(jQuery); </script>
  33.  
  34.  
  35.  
  36. <!-- META TAGS -->
  37.  
  38. <meta name="color:background" content="#f2f2f2">
  39. <meta name="color:text" content="#868686" />
  40. <meta name="color:posts" content="#ffffff"/>
  41. <meta name="color:sidebar" content="#eaeaea"/>
  42. <meta name="color:links bg" content="#cecece" />
  43. <meta name="color:link" content="#aaa" />
  44. <meta name="color:pagination link" content="#fff"/>
  45. <meta name="color:linkhover" content="#f1ac9a"/>
  46. <meta name="color:Bold" content="#f1ac9a" />
  47. <meta name="color:Italic" content="#393939"/>
  48. <meta name="color:navi links" content="#4f4f4f"/>
  49. <meta name="color:sidebar title" content="#121212"/>
  50. <meta name="color:date box" content="#121212"/>
  51. <meta name="color:date box text" content="#fff"/>
  52.  
  53. <meta name="image:background" content=""/>
  54. <meta name="image:sbimage" content=""/>
  55.  
  56. <meta name="text:link1 url" content="/url" />
  57. <meta name="text:link1 name" content="Link 1" />
  58.  
  59. <meta name="if:bw posts" content="0" />
  60.  
  61. <meta name="select:Post size" content="300px" title="300px" />
  62. <meta name="select:Post size" content="350px" title="350px" />
  63. <meta name="select:Post size" content="400px" title="400px" />
  64. <meta name="select:Post size" content="450px" title="450px" />
  65. <meta name="select:Post size" content="500px" title="500px" />
  66.  
  67. <meta name="select:Font size" content="9px" title="9px" />
  68. <meta name="select:Font size" content="10px" title="10px" />
  69. <meta name="select:Font size" content="11px" title="11px" />
  70. <meta name="select:Font size" content="12px" title="12px" />
  71.  
  72. <meta name="select:SB Img size" content="100px" title="100px" />
  73. <meta name="select:SB Img size" content="90px" title="90px" />
  74. <meta name="select:SB Img size" content="80px" title="80px" />
  75. <meta name="select:SB Img size" content="70px" title="70px" />
  76. <meta name="select:SB Img size" content="60px" title="60px" />
  77.  
  78. <meta name="select:SB Img border" content="100%" title="circle" />
  79. <meta name="select:SB Img border" content="5%" title="rounded corners" />
  80. <meta name="select:SB Img border" content="0%" title="square" />
  81.  
  82. <meta name="select:Posts border" content="7px" title="rounded corners" />
  83. <meta name="select:Posts border" content="0px" title="square" />
  84.  
  85. <meta name="select:Desc alignment" content="center" title="center" />
  86. <meta name="select:Desc alignment" content="justify" title="justify" />
  87.  
  88. <meta name="if:Sidebar far left" content="1" />
  89.  
  90. <meta name="select:Font" content="Nunito" title="Nunito" />
  91. <meta name="select:Font" content="Roboto" title="Roboto" />
  92. <meta name="select:Font" content="ABeeZee" title="ABeeZee" />
  93. <meta name="select:Font" content="Karla" title="Karla" />
  94.  
  95. </head>
  96.  
  97.  
  98. <style type="text/css">
  99.  
  100.  
  101. /*-- IFRAME CONTROLS --*/
  102. #tumblr_controls, .tmblr-iframe{ z-index:999999999999999999!important; -webkit-filter:invert(100%); -moz-filter:invert(100%); -o-filter:invert(100%); -ms-filter:invert(100%); filter:invert(100%); position:fixed!important; top:-5px!important; right:-35px!important; opacity:.5; -webkit-transition:all 0.5s ease-out;-webkit-transition: opacity 0.5s linear;opacity: 0.2;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.5s ease-out; transform:scale(0.6);}
  103. #tumblr_controls, .tmblr-iframe:hover{ opacity:.3;webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out; -webkit-transition:all 0.6s ease-out;-webkit-filter:invert(70%); -moz-filter:invert(70%); -o-filter:invert(70%); -ms-filter:invert(70%); filter:invert(70%); }
  104.  
  105.  
  106. /*-- SCROLLBAR --*/
  107. ::-webkit-scrollbar { width:0px; height: 4px; }
  108. ::-webkit-scrollbar-thumb { background-color: {color:scrollbar};
  109. -webkit-border-radius: 5px; }
  110.  
  111.  
  112. /*-- TOOLTIPS --*/
  113. #s-m-t-tooltip {
  114. max-width:300px;
  115. padding:6px;
  116. padding-left:8px;
  117. padding-right:8px;
  118. margin:20px 20px 5px 10px;
  119. font-weight:bold;
  120. text-transform:lowercase;
  121. font-family:{select:Font size};
  122. font-size:9px;
  123. font-weight:bold;
  124. background:{color:posts};
  125. z-index:99999999;
  126. border-radius:5px;
  127. letter-spacing:1px;
  128. color:{color:text};
  129. }
  130.  
  131.  
  132. /* BODY */
  133. body {
  134. color:{color:text};
  135. background-color:{color:background};
  136. line-height:12px;
  137. text-align:justify;
  138. background-image:url('{image:background}');
  139. font-family:{select:font};
  140. font-size:{select:Font size};
  141. -moz-osx-font-smoothing:grayscale;
  142. -webkit-font-smoothing:antialiased;
  143. font-smoothing:antialiased;
  144. }
  145.  
  146. #container {
  147. position:fixed;
  148. margin:auto;
  149. left:0px;
  150. {block:IfSidebarFarLeft}
  151. right:0px;
  152. {/block:IfSidebarFarLeft}
  153. top:0px;
  154. bottom:0px;
  155. width:calc({select:Post size} + 290px);
  156. height:100%;
  157. }
  158.  
  159.  
  160. /*-- LINKS --*/
  161. a:link, a:active, a:visited { color: {color:link}; text-decoration:none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
  162. a:hover { color:{color:linkhover}; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
  163. .posts a:link, a:active, a:visited { color:{color:link hover}; text-decoration:none; }
  164. .posts a:hover { color:{color:link hover}; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
  165.  
  166. #info a:link, a:active, a:visited { color:{color:link}; text-decoration:none; }
  167. #info a:hover, #tags a:hover, #links a:hover { color:{color:linkhover}; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
  168.  
  169.  
  170. /*-- TEXT TYPES --*/
  171. small { font-size:10px; }
  172. sub, sup { font-size:9px; }
  173. pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
  174. big {font-size:auto;}
  175. h2, h1 {
  176. font-weight:700;
  177. font-size:19px;
  178. font-family:{select:font};
  179. }
  180. p { margin-top:6px; margin-bottom:6px;}
  181. li { list-style-type: circle;}
  182. blockquote { margin:12px; padding-left:10px; padding-right:10px; border-left:1px solid {color:background}; }
  183. img a { border:none; width:100%;}
  184. blockquote img { height:auto; }
  185. .posts img { height:auto; }
  186.  
  187.  
  188. /*-- POSTS --*/
  189. #postcontainer {
  190. height:100%;
  191. position:absolute;
  192. top:0px;
  193. overflow:auto;
  194. right:0px;
  195. width:calc({select:Post size} + 60px);
  196. }
  197.  
  198. .posts {
  199. width:{select:Post size};
  200. margin-top:30px;
  201. margin-bottom:30px;
  202. text-align:justify;
  203. padding:15px;
  204. background-color:{color:posts};
  205. font-size:{select:Font size};
  206. border-radius:{select:Posts border};
  207. }
  208.  
  209. .posts img {
  210. max-width:100%;
  211. }
  212.  
  213.  
  214. /*-- INFO --*/
  215. #info {
  216. padding:10px;
  217. text-align:left;
  218. text-transform:lowercase;
  219. margin:-15px;
  220. padding-bottom:5px;
  221. font-size:{select:Font size};
  222. text-transform:lowercase;
  223. display: table;
  224. border-bottom:1px solid {color:background};
  225. width:calc({select:Post size} + 15px);
  226. margin-bottom:15px;
  227. }
  228.  
  229. #info a {
  230. font-weight:bold;
  231. color:{color:text};
  232. }
  233.  
  234. #postinfo2 {
  235. position:absolute;
  236. margin-left:50px;
  237. margin-top:9px;
  238. display: table-cell;
  239. vertical-align: middle;
  240. }
  241.  
  242.  
  243. #datebox {
  244. background:{color:date box};
  245. color:{color:date box text};
  246. font-family:nunito;
  247. text-transform:uppercase;
  248. font-weight:700;
  249. width:40px;
  250. height:40px;
  251. font-size:10px;
  252. text-align:center;
  253. border-radius:5px;
  254. float:left;
  255. display: table;
  256. margin-right:0px;
  257. margin-bottom:5px;
  258. }
  259.  
  260. #dateboxin {
  261. display: table-cell;
  262. vertical-align: middle;
  263. }
  264.  
  265.  
  266. /*-- CREDIT --*/
  267. #credit {
  268. position:fixed;
  269. bottom:13px;
  270. left:13px;
  271. background:{color:posts};
  272. padding:5px;
  273. font-size:9px;
  274. color:{color:text};
  275. font-weight:900;
  276. font-family:{select:font};
  277. text-transform:uppercase;
  278. border-radius:6px;
  279. z-index:999;
  280. }
  281.  
  282.  
  283. /*-- ASK POSTS --*/
  284. #question {
  285. margin:0px;
  286. padding:4px;
  287. text-align:center;
  288. font-size:{select:Font size};
  289. text-transform:lowercase;
  290. }
  291.  
  292. #asker {
  293. border:1px solid {color:background};
  294. text-align:center;
  295. text-transform:lowercase;
  296. padding:6px;
  297. margin:-17px;
  298. margin-bottom:15px;
  299. margin-top:15px;
  300. }
  301.  
  302.  
  303. #asker b {
  304. text-transform:lowercase;
  305. border-radius:4px;
  306. padding:2px;
  307. padding-left:4px;
  308. padding-right:4px;
  309. color:{color:text};
  310. }
  311.  
  312.  
  313. /*-- AUDIO POSTS --*/
  314. #audioplayer {
  315. width:31px;
  316. height:31px;
  317. background:#f2f2f2;
  318. overflow:hidden;
  319. position:absolute;
  320. padding:0px;
  321. margin-top:-3px;
  322. margin-left:0px;
  323. opacity:0.4;
  324. z-index:9999;
  325. -webkit-transition:0.5s;
  326. border:22px solid #f2f2f2;
  327. }
  328.  
  329. #audioplayer:hover {
  330. opacity:0.9;
  331. -webkit-transition:0.5s;
  332. }
  333.  
  334. #audioart {
  335. float:left;
  336. margin-top:-3px;
  337. margin-left:0px;
  338. padding-right:10px;
  339. }
  340.  
  341. #audioart img { width:75px; }
  342.  
  343. #audioinfo {
  344. height:45px;
  345. padding-bottom:5px;
  346. text-transform:lowercase;
  347. font-size:10px;
  348. text-align:left;
  349. padding-left:25px;
  350. padding-top:20px;
  351. letter-spacing:1px;
  352. margin-bottom:0px;
  353. }
  354.  
  355. #audio b {
  356. font-size:15px;
  357. }
  358.  
  359.  
  360. /*-- PERMALINK NOTES STYLING --*/
  361. ol.notes {
  362. width:{select:Post size};
  363. margin:3px;
  364. margin-top:-5px;
  365. margin-left:0px;
  366. padding:0px;
  367. margin-bottom:10px;
  368. }
  369.  
  370. .notes li a {
  371. font-weight:bold;
  372. color:{color:link};
  373. text-transform:lowercase;
  374. }
  375.  
  376. .notes li {
  377. list-style:none;
  378. margin-top:5px;
  379. }
  380.  
  381. ol.notes img {
  382. width:15px;
  383. height:15px;
  384. border-radius:100%;
  385. margin-right:5px;
  386. vertical-align:middle;
  387. }
  388.  
  389.  
  390. /*-- TAGS --*/
  391. #tags {
  392. width:{select:Post size};
  393. text-align:justify;
  394. padding-left:2px;
  395. line-height:10px;
  396. color:{color:link};
  397. margin-top:-20px;
  398. }
  399.  
  400. #tags a {
  401. padding:0px;
  402. border-bottom:none;
  403. color:{color:link};
  404. text-shadow:none;
  405. text-transform:lowercase;
  406. font-size:{select:Font size};
  407. font-size:9px;
  408. }
  409.  
  410. #tags i {
  411. color:{color:bold};
  412. }
  413.  
  414.  
  415. /*-- CHAT STYLING --*/
  416. ul.convo {
  417. list-style: none;
  418. padding:0;
  419. margin:0;
  420. margin-top:-15px;
  421. margin-bottom:-5px;
  422. }
  423.  
  424. .convo li {
  425. list-style-type:none;
  426. padding:4px;
  427. }
  428.  
  429. .label {
  430. text-transform:uppercase;
  431. font-weight:bold;
  432. }
  433.  
  434.  
  435. /*-- GREYSCALE FILTER --*/
  436. {block:IfBWPosts}
  437. .photoset, .posts img, .video { -webkit-filter:grayscale(100%); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; }
  438. {/block:IfBWPosts}
  439.  
  440. {block:IfBWToColorHover}
  441. .photoset:hover, .posts img:hover, .video:hover { -webkit-filter:grayscale(10%); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; }
  442. {/block:IfBWToColorHover}
  443.  
  444.  
  445. /*-- SIDEBAR --*/
  446.  
  447. #pagination {
  448. text-transform:lowercase;
  449. font-weight:bold;
  450. margin-top:15px;
  451. font-size:{select:Font size}
  452. letter-spacing:1px;
  453. color:{color:pagination link};
  454. }
  455.  
  456. #pagination a {
  457. color:{color:pagination link};
  458. }
  459.  
  460.  
  461. #left {
  462. position:absolute;
  463. top:0px;
  464. bottom:0px;
  465. background:{color:sidebar};
  466. width:{select:Post size};
  467. height:100%;
  468. left:0px;
  469. }
  470.  
  471. #sidebar1 {
  472. display:table;
  473. width:230px;
  474. height:100%;
  475. }
  476.  
  477. #sidebar2 {
  478. text-align:center;
  479. display: table-cell;
  480. vertical-align: middle;
  481. }
  482.  
  483. #left img {
  484. width:{select:SB Img size};
  485. height:{select:SB Img size};
  486. border-radius:{select:SB Img border};
  487.  
  488. }
  489.  
  490. #description {
  491. margin-top:20px;
  492. margin-left:20px;
  493. margin-right:20px;
  494. text-align:{select:Desc alignment};
  495. }
  496.  
  497.  
  498. /*-- LINKS --*/
  499.  
  500. .linkscontainer {
  501. margin-bottom:20px;
  502. }
  503.  
  504. .linkscontainer a {
  505. margin:5px;
  506. font-size:calc({select:Font size} + 2px);
  507. vertical-align:Middle;
  508. }
  509.  
  510. .dvicon-011-house {
  511. }
  512.  
  513. </style>
  514.  
  515. <!-- START OF HTML -->
  516. <body>
  517.  
  518.  
  519. <!-- CREDIT -->
  520. <a href="http://dolcevitae.tumblr.com">
  521. <div id="credit">dv
  522. </div></a>
  523.  
  524.  
  525. <!-- BODY CONTAINER -->
  526. <div id="container">
  527.  
  528.  
  529. <!-- SIDEBAR -->
  530. <div id="left">
  531.  
  532. <div id="sidebar1"><div id="sidebar2">
  533.  
  534. <!-- LINKS -->
  535. <div class="linkscontainer">
  536. <a href="/" title="refresh"><span class="th th-home-o"></span></a>
  537. <a href="/ask" title="message"><span class="th th-envelope-o"></span></a>
  538. <a href="{text:link1 url}" title="{text:link1 name}"><span class="th th-app-o"></span></i></a>
  539. </div>
  540.  
  541. <!-- SIDEBAR IMAGE -->
  542. <img src="{image:sbimage}">
  543.  
  544. <!-- DESCRIPTION -->
  545. <div id="description">{Description}</div>
  546.  
  547. <!-- PAGINATION -->
  548. {block:Pagination}<div id="pagination">{block:PreviousPage}<a href="{PreviousPage}">prev /</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a><br />{/block:NextPage}</div>{/block:Pagination}
  549.  
  550. </div></div>
  551.  
  552. </div>
  553.  
  554.  
  555.  
  556. <!-- POSTS HTML -->
  557. <div id="postcontainer">
  558. {block:posts}
  559. <div class="posts" id="{PostID}">
  560.  
  561. {block:Date}
  562. <div id="info">
  563. <a href="{Permalink}">
  564. <div id="datebox"><div id="dateboxin">
  565. {DayOfMonthWithZero}<br>{ShortMonth}
  566. </div></div></a>
  567.  
  568. <div id="postinfo2">
  569. this post has <a href="{Permalink}">{NoteCountWithLabel}</a>
  570. <br>posted <a href="{Permalink}">{TimeAgo}</a>
  571. </div>
  572.  
  573. {block:ContentSource}{/block:NoSourceLogo}{/block:ContentSource}
  574.  
  575. </div>
  576. {/block:Date}
  577.  
  578. <!-- {block:NoRebloggedFrom}
  579. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  580. {/block:NoRebloggedFrom} -->
  581.  
  582. {block:ContentSource}<!-- {SourceURL}
  583. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  584. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  585. {/block:ContentSource}
  586.  
  587.  
  588. {block:Text}{block:Title}
  589. <h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  590.  
  591.  
  592. {block:Quote}<h2>{Quote} <div class="quoter">— {Source}</div></h2>{/block:Quote}
  593.  
  594.  
  595. {block:Link}<a href="{URL}"><h1>{Name}</h1></a>
  596. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  597.  
  598.  
  599. {block:Photo}<center><img src="{PhotoURL-500}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}{block:Photoset}<center>{Photoset}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  600.  
  601.  
  602. {block:Chat} {block:Title} <h1>{Title}</h1>{/block:Title}<br>
  603. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  604. {Line}</li>{/block:Lines}</ul>{/block:Chat}
  605.  
  606.  
  607. {block:Video}
  608. <div class="video">{Video-500}</div>
  609. {block:Caption}{Caption}{/block:Caption}{/block:Video}
  610.  
  611.  
  612. {block:Answer}
  613. <div id="question"> {Question}</div>
  614. <div id="asker"><b>asked by: {Asker}</b></div>
  615. {Answer}{/block:Answer}
  616.  
  617.  
  618. {block:Audio}
  619. <div id="audio">
  620. <div id="audioplayer">{AudioPlayerWhite}</div>
  621. <div id="audioart">{block:AlbumArt}<img src="{AlbumArtURL}" width="60">{/block:AlbumArt}</div>
  622.  
  623. <div id="audioinfo">
  624. <b>{block:TrackName}{TrackName}{/block:TrackName}</b>
  625. <br>by {block:Artist}{Artist}{/block:Artist}
  626. </div>
  627. </div>
  628. <br>
  629. {block:Caption}{Caption}{/block:Caption} {/block:Audio}
  630. </div>
  631.  
  632. <!-- TAGS -->
  633. {block:HasTags}
  634. <div id="tags">
  635. {block:Tags}<a href="{TagURL}">#{Tag} </a>&nbsp; {/block:Tags}
  636. </div>{/block:HasTags}
  637.  
  638.  
  639.  
  640. {block:PostNotes} {PostNotes} {/block:PostNotes}
  641.  
  642.  
  643. {/block:Posts}
  644. </div></div></div>
  645.  
  646. </div>
  647.  
  648.  
  649.  
  650. </body>
  651. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement