API tools faq
paste
reedrph

Reedrph Theme #1: Icarus

reedrph
Jan 1st, 2019
1,424
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.49 KB | None | 0 0
raw download clone embed print report
  1. <!-- REEDRPH — THEME #1: Icarus -->
  2. <!-- basecode kuzuriha -->
  3. <!DOCTYPE html>
  4.  
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.  
  10. <html>
  11. <head>
  12.  
  13.  
  14.  
  15. <meta name="image:background" content=""/>
  16.  
  17. <meta name="color:background" content="#fff"/>
  18. <meta name="color:holder" content="#5c5c5c"/>
  19. <meta name="color:sidebar" content="#202020"/>
  20. <meta name="color:post background" content="#757575"/>
  21. <meta name="color:description" content="#4b4b4b"/>
  22. <meta name="color:title" content="#ffffff"/>
  23. <meta name="color:subtitle" content="#ffffff"/>
  24. <meta name="color:subtitle bg" content="#4b4b4b"/>
  25. <meta name="color:text" content="#d5d5d5"/>
  26. <meta name="color:bold" content="#000000"/>
  27. <meta name="color:italic" content="#000000"/>
  28. <meta name="color:link" content="#E8D2A2"/>
  29. <meta name="color:link hover" content="#FFE5BF"/>
  30. <meta name="color:sidebar text" content="#C9C9C9"/>
  31. <meta name="color:borders" content="#4b4b4b"/>
  32. <meta name="color:question background" content="#F7F7F7"/>
  33. <meta name="color:accent1" content="#202020"/>
  34. <meta name="color:accent2" content="#202020"/>
  35.  
  36.  
  37. <meta name="image:header" content=""/>
  38.  
  39.  
  40. <meta name="text:title" content="Blog title"/>
  41. <meta name="text:subtitle" content="Blog subtitle"/>
  42. <meta name="text:headertitle" content="Header Title"/>
  43. <meta name="text:updatestitle" content="Updates"/>
  44. <meta name="text:updates" content="put some updates or stats here"/>
  45. <meta name="text:link 1" content="link 1"/>
  46. <meta name="text:link 1 url" content="/" />
  47. <meta name="text:link 2" content="link 2"/>
  48. <meta name="text:link 2 url" content="/" />
  49. <meta name="text:link 3" content="link 3"/>
  50. <meta name="text:link 3 url" content="/" />
  51.  
  52. <!--scripts-->
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  55.  
  56. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57.  
  58. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  59.  
  60. <link href="https://fonts.googleapis.com/css?family=News+Cycle:400,700|Roboto:400,400i,700" rel="stylesheet">
  61. <script>
  62.  
  63. (function($){
  64.  
  65. $(document).ready(function(){
  66.  
  67. $("a[title]").style_my_tooltips({
  68.  
  69. tip_follows_cursor:true,
  70.  
  71. tip_delay_time:0,
  72.  
  73. tip_fade_speed:0,
  74.  
  75. attribute:"title"
  76.  
  77. });
  78.  
  79. });
  80.  
  81. })(jQuery);
  82.  
  83. </script>
  84.  
  85. <style type="text/css">
  86. /**webkit scrollbar**/
  87.  
  88. ::-webkit-scrollbar{
  89. width:4px;
  90. }
  91.  
  92. ::-webkit-scrollbar-thumb:vertical{
  93. background:{color:accent2};
  94. height:auto;
  95. }
  96. /**tooltips**/
  97.  
  98. #s-m-t-tooltip {
  99. max-width:150px;
  100. padding:5px 10px 5px 10px;
  101. margin:20px 14px 7px 10px;
  102. background-color:{color:tooltipbg};
  103. font-family: 'Roboto', sans-serif;
  104. font-style: normal;
  105. font-size:10px;
  106. line-height:11px;
  107. letter-spacing:1px;
  108. text-transform:uppercase;
  109. color:{color:tooltipt};
  110. z-index:999999;
  111. }
  112.  
  113. /**general appearance**/
  114.  
  115. body {
  116. background-image:url('{image:Background}');
  117. background-color:{color:Background};
  118. background-size:cover;
  119. background-attachment:fixed;
  120. overflow:hidden;
  121. font-family: 'Roboto', sans-serif;
  122. font-size: 12px;
  123. line-height: 12px;
  124. color:{color:Text};
  125. text-align: justify;
  126. }
  127.  
  128. a{
  129. color:{color:link};
  130. text-decoration:none;
  131. }
  132.  
  133. a:hover{
  134. color:{color:link hover};
  135. }
  136.  
  137. blockquote{
  138. padding-left:10px;
  139. border-left:3px solid {color:accent2};
  140. }
  141.  
  142. blockquote blockquote{
  143. padding-left:10px;
  144. border-left:3px solid {color:accent2};
  145. }
  146.  
  147. small,sup,sub{
  148. font-size: 11px;
  149. letter-spacing: 1px;
  150.  
  151. }
  152.  
  153. i, em {
  154. color:{color:italic};
  155.  
  156. }
  157. b, strong {
  158. color:{color:bold};
  159. font-weight:bold;
  160. text-transform: uppercase;
  161. }
  162.  
  163. /**holder**/
  164. #holder {
  165. width: 910px;
  166. height: 750px;
  167. background-color: {color:holder};
  168. position: absolute;
  169. margin: auto; top: 0; left: 0; bottom: 0; right: 0;
  170. background-size: cover;
  171. overflow: visible;
  172. opacity:0.95; }
  173.  
  174.  
  175. /**sidebar block**/
  176.  
  177. #sidebar {
  178. width: 224px;
  179. height:744px;
  180. border: 3px solid {color:borders};
  181. background-color: {color:sidebar};
  182. }
  183.  
  184. #title {
  185. width: 230px;
  186. position: absolute;
  187. top: 30px;
  188. overflow: hidden;
  189. z-index: 8;
  190. color: {color:title};
  191. text-align: center;
  192. font-family: 'News Cycle', sans-serif;
  193. font-weight: bold;
  194. font-size: 50px;
  195. line-height: 1;
  196. text-transform: uppercase;
  197. letter-spacing: 2px;
  198. }
  199.  
  200. #subtitle {
  201. width: 190px;
  202. height: 13px;
  203. background: {color:subtitle bg};
  204. padding: 5px;
  205. position: absolute;
  206. top: 140px;
  207. left: 15px;
  208. overflow: hidden;
  209. z-index: 8;
  210. color: {color:subtitle};
  211. text-align: center;
  212. font-family: 'News Cycle', sans-serif;
  213. font-weight: bold;
  214. font-size: 13px;
  215. line-height: 1;
  216. text-transform: uppercase;
  217. }
  218.  
  219. #line {
  220. position: absolute;
  221. width: 227px;
  222. height: 3px;
  223. background: {color:borders};
  224. top: 197px;
  225.  
  226. }
  227.  
  228. #headertitle {
  229. width: 190px;
  230. height: 13px;
  231. padding: 5px;
  232. position: absolute;
  233. top: 210px;
  234. left: 17px;
  235. overflow: hidden;
  236. z-index: 8;
  237. color: {color:title};
  238. text-align: center;
  239. font-family: 'News Cycle', sans-serif;
  240. font-weight: bold;
  241. font-size: 19px;
  242. line-height: 1;
  243. text-transform: uppercase;
  244. }
  245.  
  246. #description {
  247. width: 160px;
  248. height: 200px;
  249. top: 241px;
  250. left: 22px;
  251. background: {color:description};
  252. border: 3px solid {color:borders};
  253. padding: 10px;
  254. position: absolute;
  255. font-family: 'Roboto', sans-serif;
  256. font-size: 11px;
  257. color: {color:sidebar text};
  258. text-transform: none;
  259. letter-spacing: 1px;
  260. line-height: 1.3;
  261. }
  262.  
  263. #updatestitle {
  264. width: 190px;
  265. height: 13px;
  266. padding: 5px;
  267. position: absolute;
  268. top: 478px;
  269. left: 17px;
  270. overflow: hidden;
  271. z-index: 8;
  272. color: {color:title};
  273. text-align: center;
  274. font-family: 'News Cycle', sans-serif;
  275. font-weight: bold;
  276. font-size: 19px;
  277. line-height: 1;
  278. text-transform: uppercase;
  279. }
  280.  
  281.  
  282. #updates {
  283. width: 160px;
  284. height: 90px;
  285. top: 509px;
  286. left: 22px;
  287. background: {color:description};
  288. border: 3px solid {color:borders};
  289. padding: 10px;
  290. position: absolute;
  291. font-family: 'Roboto', sans-serif;
  292. font-size: 11px;
  293. color: {color:sidebar text};
  294. text-transform: none;
  295. letter-spacing: 1px;
  296. line-height: 1.3;
  297. }
  298.  
  299. /**header**/
  300.  
  301. #header {
  302. left: 229px;
  303. top: 0px;
  304. position: absolute;
  305. z-index: 10;
  306.  
  307.  
  308. }
  309. #header img {
  310. width: 682px;
  311. height: 200px;
  312. }
  313.  
  314. /**nav**/
  315.  
  316. #nav_bar{
  317. width:260px;
  318. left: 0px;
  319. position:absolute;
  320. margin-left:0px;
  321. margin-top:437px;
  322. padding:10px;
  323. }
  324.  
  325. .nav_link a{
  326. width:20px;
  327. height: 20px;
  328. background:{color:description};
  329. color:{color:sidebar text};
  330. display: inline-block;
  331. font-size: 20px;
  332. text-align: center;
  333. text-decoration: none;
  334. padding: 15px;
  335. border: 3px solid {color:borders};
  336. border-radius: 50%;
  337. margin-left: 9px;
  338. }
  339.  
  340. #customlink_bar{
  341. width:230px;
  342. position:relative;
  343. margin-top:363px;
  344. padding:10px;
  345. margin-left:35px;
  346. }
  347.  
  348. .custom_link a{
  349. min-width:40px;
  350. background:{color:link hover};
  351. color:{color:link};
  352. display:inline-block;
  353. margin:4px;
  354. font:10px
  355. text-align:center;
  356. padding:2px;
  357. text-transform:uppercase;
  358. }
  359.  
  360. /**posts**/
  361.  
  362. #container{
  363.  
  364. position: absolute;
  365. top: 20px;
  366. left: 304px;
  367. overflow: scroll;
  368. overflow-x: hidden;
  369. width: 550px;
  370. max-height: 515px;
  371. text-align: justify;
  372. margin-bottom:30px;
  373.  
  374.  
  375. }
  376.  
  377. .post{
  378.  
  379. width:500px;
  380. position:relative;
  381. word-wrap:break-word;
  382. margin-bottom:20px;
  383. padding:12px;
  384. color: {color:text};
  385. background:{color:post background};
  386. overflow: auto;
  387.  
  388. }
  389.  
  390. .post img{
  391. max-width:100%;
  392. }
  393.  
  394. .title{
  395. display:block;
  396. padding:10px;
  397. text-align:center;
  398. font-family: 'News Cycle', sans-serif;
  399. font-size: 20px;
  400. color:{color:accent1};
  401. text-transform:uppercase;
  402. font-weight: bold;
  403. }
  404.  
  405. /**photo post**/
  406. .photopost{
  407. max-width:500px;
  408.  
  409.  
  410.  
  411.  
  412. }
  413.  
  414.  
  415. /**quote post**/
  416. #quote{
  417. text-align:center;
  418. font-family: 'News Cycle', sans-serif;
  419. font-size:16px;
  420. line-height: 1.5;
  421. font-weight:700;
  422. font-style:italic;
  423. }
  424.  
  425. #source{
  426. display:block;
  427. text-align:right;
  428. text-transform:uppercase;
  429. font-family: 'News Cycle', sans-serif;
  430. font-size:14px;
  431. margin-bottom:10px;
  432. }
  433.  
  434. /**link post**/
  435. #link{
  436. display:block;
  437. padding:10px;
  438. background:{color:link hover};
  439. color:{color:link};
  440. text-transform:uppercase;
  441. font-family: 'News Cycle', sans-serif;
  442. font-size: 16px;
  443. text-align:center;
  444. font-weight:700;
  445. }
  446.  
  447. /**chat post**/
  448. .chat li{
  449. list-style-type:none !important;
  450. padding:8px;
  451. margin-left:-40px;
  452. margin-top:4px;
  453. margin-bottom:2px;
  454. font:11px courier;
  455. }
  456. /**audio post**/
  457.  
  458.  
  459. /**ask post**/
  460. #askimg{
  461. width:48px;
  462. height:48px;
  463. float:left;
  464. }
  465.  
  466. #asker, #asker a{
  467. text-transform:uppercase;
  468. display:inline-block;
  469.  
  470. }
  471.  
  472. .qtext{
  473. margin-left:10px;
  474. }
  475.  
  476. .qbox{
  477.  
  478.  
  479. padding:10px;
  480. min-height:30px;
  481. background:{color:question background};
  482. margin-left:60px;
  483. }
  484.  
  485. /**post info**/
  486. .postinfo{
  487. display:block;
  488. padding:5px;
  489. height:15px;
  490. text-align:right;
  491. background:{color:accent1};
  492. color:{color:text};
  493. text-transform:uppercase;
  494. font-family: 'News Cycle', sans-serif;
  495. font-size: 10px;
  496. line-height:150%;
  497. font-weight:700;
  498. letter-spacing: 3px
  499. }
  500.  
  501. .postinfo a{
  502. color:{color:title};
  503. }
  504.  
  505. /**post tags**/
  506. .tagcont{
  507. margin-top:10px;
  508. }
  509.  
  510. .tagcont a{
  511. display:inline;
  512. text-transform:uppercase;
  513. }
  514.  
  515. /**pagination**/
  516. #pagcont{
  517. position:absolute;
  518. width:110px;
  519. margin-left:65px;
  520. margin-top:140px;
  521. font-size: 20px;
  522. color:{color:title};
  523. text-align: center;
  524. letter-spacing: 15px;
  525. }
  526.  
  527. #pagcont a{
  528. color:{color:title};
  529. }
  530.  
  531.  
  532. ol.notes{
  533. list-style-type:none !important;
  534. padding:8px;
  535. }
  536.  
  537. ol.notes li.note{
  538. top:0;
  539. padding-bottom:10px;
  540. }
  541.  
  542. .pnotes img.avatar{
  543. float:left;
  544. margin-right:10px;
  545. }
  546.  
  547. .pnotes a{
  548. font-family: 'News Cycle', sans-serif;
  549. text-transform:uppercase;
  550. }
  551.  
  552. /**Do NOT touch**/
  553. #credit a{
  554. right:10px;
  555. bottom:10px;
  556. position:fixed;
  557. width:20px;
  558. height:10px;
  559. padding:10px;
  560. color: {color:link};
  561. font-family: 'News Cycle', sans-serif;
  562. text-transform: uppercase;
  563. font-weight: bold;
  564. letter-spacing: 1.5px;
  565. }
  566.  
  567. </style>
  568. </head>
  569.  
  570. <body>
  571. <div id="credit"><a href="http://reedrph.tumblr.com/">Reed.</a></div>
  572. <div id="holder">
  573. <div id="sidebar">
  574. <div id="header"><img src="{image:header}"></div>
  575. <div id="title">{text:title}</div>
  576. <div id="subtitle">{text:subtitle}</div>
  577. <div id="headertitle">{text:headertitle}</div>
  578. <div id="updatestitle">{text:updatestitle}</div>
  579. <div id="updates">{text:updates}</div>
  580. <div id="description">{Description}</div>
  581. <div id="line">
  582.  
  583. <!--navigation block-->
  584. <div id="nav_bar">
  585. <div class="nav_link">
  586.  
  587. <a href="{text:link 1 url}" title="{text:link 1}"><div class= "link"><j class= "fa fa-home"></j></div></a>
  588. <a href="{text:link 2 url}" title="{text:link 2}"><div class= "link"><j class= "fa fa-envelope"></j></div></a>
  589. <a href="{text:link 3 url}" title="{text:link 3}"><div class= "link"><j class= "fa fa-map"></j></div></a>
  590. </div>
  591.  
  592. </div><!--end nav_bar-->
  593.  
  594. <div id="customlink_bar">
  595. <div class="custom_link">
  596.  
  597.  
  598.  
  599. </div>
  600.  
  601. </div><!--end customlink_bar-->
  602.  
  603. <div id="pagcont">
  604. {block:Pagination}
  605. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  606.  
  607. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  608. {/block:Pagination}
  609. </div>
  610. <div id="container">
  611.  
  612. <!--This is the real content of your theme. You can refer to the Tumblr docs for reference as what each block does.-->
  613.  
  614. {block:Posts}
  615. <div class="post">
  616. {block:Text}
  617. {block:Title}<div class="title">{Title}</div>{/block:Title}
  618. {Body}
  619. {/block:Text}
  620.  
  621. {block:Photo}
  622. {linkopentag}<div class="photopost"><center><img class="photo" src="{PhotoURL-HighRes}"></center></div>{linkclosetag}
  623. {block:Caption}{Caption}{/block:Caption}
  624. {/block:Photo}
  625.  
  626. {block:Photoset}
  627. <div class="photopost">{Photoset-500}</div>
  628. {block:Caption}{Caption}{/block:Caption}
  629. {/block:Photoset}
  630.  
  631. {block:Video}
  632. {Video-500}
  633. {block:Caption}{Caption}{/block:Caption}
  634. {/block:Video}
  635.  
  636. {block:Quote}
  637. <div id="quote">{Quote}</div>
  638. {block:Source}<div id="source">{Source}</div>{/block:Source}
  639. {/block:Quote}
  640.  
  641. {block:Link}
  642. <a href="{URL}"><div id="link">{Name} →</div></a>
  643. {block:Description}{Description}{/block:Description}
  644. {/block:Link}
  645.  
  646. {block:Chat}
  647. {block:Title}<div class="title">{Title}</div>{/block:Title}
  648. <ul class="chat">
  649. {block:Lines}
  650. <li class="line_{Alt}"><span class="label">{block:Label}{Label}{/block:Label}</span> {Line}
  651. {/block:Lines}
  652. </li>
  653. </ul>
  654. {/block:Chat}
  655.  
  656. {block:Audio}
  657. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  658. {block:Caption}{Caption}{/block:Caption}
  659. {/block:Audio}
  660.  
  661. {block:Answer}
  662. <img src="{AskerPortraitURL-48}" id="askimg"/><div class="qbox"><div id="asker">{Asker}:</div> {Question}</div>
  663.  
  664. <div class="ans">{Answer}</div>
  665. {/block:Answer}
  666.  
  667. {block:IndexPage}
  668. {block:Date}<div class="postinfo"><a href="{Permalink}">{DayOfMonth} {Month} {Year}</a>{/block:Date} || {NoteCountWithLabel}
  669. {block:RebloggedFrom} {/block:RebloggedFrom}
  670.  
  671. </div>
  672. {block:HasTags}
  673. <div class="tagcont">{block:Tags}<a href="{TagURL}">#{Tag}</a>
  674. {/block:Tags}
  675. </div>
  676. {/block:HasTags}
  677.  
  678. {/block:IndexPage}
  679.  
  680. {block:PermalinkPage}
  681. {block:Date}<div class="pinfoperma">Posted on {MonthNumber}/{DayOfMonth} at {24HourWithZero}:{Minutes} with {NoteCountWithLabel}</div>{/block:Date}
  682.  
  683. {block:PostNotes}
  684. <div class="pnotes">
  685. <ol class="notes">{PostNotes}</ol>
  686. </div>
  687. {/block:PostNotes}
  688. {/block:PermalinkPage}
  689.  
  690. </div>
  691. {/block:Posts}
  692.  
  693.  
  694. </div><!--end main container-->
  695.  
  696. </body>
  697. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!