API tools faq
paste
clerihew

12. viaje

clerihew
Jan 11th, 2019
788
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2019
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11.  
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  19.  
  20. <!-- basic variables -->
  21. <!-- colors -->
  22. <meta name="color:Background" content="#000"/>
  23. <meta name="color:Topbar Links" content="#000"/>
  24. <meta name="color:Topbar Links Hover" content="#4c4c4c"/>
  25. <meta name="color:Bars Background" content="#ff6f61"/>
  26. <meta name="color:Description" content="#fff"/>
  27. <meta name="color:Descrip Quote Links" content="#000"/>
  28. <meta name="color:Descrip Quote Links Hover" content="#4c4c4c"/>
  29. <meta name="color:Post Links" content="#ff6f61"/>
  30. <meta name="color:Post Links Hover" content="#ffbdb7"/>
  31. <meta name="color:Title" content="#d9584e"/>
  32. <meta name="color:Ask Background" content="#ffe4e2"/>
  33. <meta name="color:Scrollbar Background" content="#ff6f61"/>
  34. <meta name="color:Scrollbar Thumb" content="#000"/>
  35. <meta name="color:Scrollbar Thumb Hover" content="#ffbdb7"/>
  36. <meta name="color:Post Notes Page Text" content="#fff"/>
  37. <!-- text -->
  38. <meta name="text:Quote"/>
  39. <!-- image -->
  40. <meta name="image:Sidebar 1" content=""/>
  41. <meta name="image:Sidebar 2" content=""/>
  42.  
  43. <style>
  44.  
  45. body {
  46. background-color: {color:Background};
  47. font-family: "PT Sans", sans-serif;
  48. }
  49.  
  50. .topbar {
  51. width: 100%;
  52. height: 30px;
  53. position: fixed;
  54. top: 0;
  55. left: 0;
  56. background-color: {color:Bars Background};
  57. border-bottom: 2px solid white;
  58. }
  59.  
  60. .topbar .all-links {
  61. width: 500px;
  62. text-align: center;
  63. position: fixed;
  64. left: 395px;
  65. }
  66.  
  67. .topbar .links {
  68. font-size: 15px;
  69. display: inline-block;
  70. padding-right: 10px;
  71. padding-left: 10px;
  72. margin-top: 6px;
  73. }
  74.  
  75. .topbar a {
  76. color: {color:Topbar Links};
  77. text-decoration: none;
  78. -moz-transition: color .5s;
  79. -o-transition: color .5s;
  80. -webkit-transition: color .5s;
  81. transition: color .5s;
  82. }
  83.  
  84. .topbar a:hover {
  85. color: {color:Topbar Links Hover};
  86. }
  87.  
  88. .sidebar-1 {
  89. width: 125px;
  90. height: 300px;
  91. position: fixed;
  92. top: 175px;
  93. left: 100px;
  94. background-color: {color:Bars Background};
  95. border: 2px solid white;
  96. }
  97.  
  98. .sidebar-1 img {
  99. width: 125px;
  100. height: 200px;
  101. }
  102.  
  103. .sidebar-1 h1 {
  104. font-size: 50px;
  105. margin-top: 10px;
  106. margin-left: 10px;
  107. }
  108.  
  109. /* must change overlay color here because it is a rgba */
  110. .overlay {
  111. position: absolute;
  112. bottom: 100px;
  113. left: 0;
  114. right: 0;
  115. background-color: rgba(255,111,97, 0.5);
  116. overflow: hidden;
  117. width: 100%;
  118. height: 0;
  119. -moz-transition: .5s ease;
  120. -o-transition: .5s ease;
  121. -webkit-transition: .5s ease;
  122. transition: .5s ease;
  123. }
  124.  
  125. .sidebar-1:hover .overlay {
  126. height: 200px;
  127. }
  128.  
  129. .sidebar-text {
  130. white-space: normal;
  131. color: {color:Description};
  132. font-size: 15px;
  133. position: absolute;
  134. text-align: left;
  135. top: 50%;
  136. left: 50%;
  137. transform: translate(-50%, -50%);
  138. }
  139.  
  140. .sidebar-text a {
  141. color: {color:Descrip Quote Links};
  142. text-decoration: none;
  143. -moz-transition: color .5s;
  144. -o-transition: color .5s;
  145. -webkit-transition: color .5s;
  146. transition: color .5s;
  147. }
  148.  
  149. .sidebar-text a:hover {
  150. color: {color:Descrip Quote Links Hover};
  151. }
  152.  
  153. .sidebar-2 {
  154. width: 125px;
  155. height: 300px;
  156. position: fixed;
  157. top: 175px;
  158. right: 100px;
  159. background-color: {color:Bars Background};
  160. border: 2px solid white;
  161. }
  162.  
  163. .sidebar-2 p {
  164. font-size: 12px;
  165. margin: 12px;
  166. }
  167.  
  168. .sidebar-2 p a {
  169. -moz-transition: color .5s;
  170. -o-transition: color .5s;
  171. -webkit-transition: color .5s;
  172. transition: color .5s;
  173. color: white;
  174. text-decoration: none;
  175. }
  176.  
  177. .sidebar-2 p a:hover {
  178. color: {color:Descrip Quote Links Hover};
  179. }
  180.  
  181. .sidebar-2 img {
  182. width: 125px;
  183. height: 186px;
  184. }
  185.  
  186. #content {
  187. width: 500px;
  188. margin-top: 75px;
  189. margin-left: 385px;
  190. margin-right: 385px;
  191. }
  192.  
  193. /* posts links color */
  194. #content a {
  195. text-decoration: none;
  196. color: {color:Post Links};
  197. -webkit-transition: color 0.5s;
  198. -moz-transition: color 0.5s;
  199. -o-transition: color 0.5s;
  200. transition: color 0.5s;
  201. }
  202.  
  203. /* posts links color hover */
  204. #content a:hover {
  205. color: {color:Post Links Hover};
  206. }
  207.  
  208. #content blockquote {
  209. padding-left: 10px;
  210. }
  211.  
  212. img {
  213. border: 0;
  214. max-width: 100%;
  215. }
  216.  
  217. /* post background color */
  218. #content #posts {
  219. background-color: white;
  220. padding: 2px;
  221. width: 500px;
  222. margin: 0 auto 75px;
  223. }
  224.  
  225. /* posts title font size */
  226. #content #posts .title {
  227. font-size: 22px;
  228. color: {color:Title};
  229. padding-left: 10px;
  230. padding-right: 10px;
  231. }
  232.  
  233. /* posts text font size */
  234. #content #posts .text {
  235. font-size: 14px;
  236. padding-left: 10px;
  237. padding-right: 10px;
  238. }
  239.  
  240. /* background for questions in asks */
  241. .q {
  242. background-color: {color:Ask Background};
  243. color: black;
  244. padding: 4px;
  245. }
  246.  
  247. #content #posts #permalink {
  248. font-size: 12px;
  249. margin-top: 10px;
  250. padding: 5px;
  251. }
  252.  
  253. #content #notecontainer {
  254. margin: 20px auto;
  255. width: 500px;
  256. color: {color:Post Notes Page Text};
  257. }
  258.  
  259. /* post pages links color */
  260. #content #notecontainer a {
  261. color: {color:Post Links};
  262. padding: 3px;
  263. -webkit-transition: color 0.5s;
  264. -moz-transition: color 0.5s;
  265. -o-transition: color 0.5s;
  266. transition: color 0.5s;
  267. }
  268.  
  269. /* post pages links color hover */
  270. #content #notecontainer a:hover {
  271. color: {color:Post Links Hover};
  272. }
  273.  
  274. #content #notecontainer ol.notes {
  275. list-style-type: none;
  276. margin: 0;
  277. padding: 3px;
  278. }
  279.  
  280. #content #postcontainer img.avatar {
  281. width: 16px;
  282. height: 16px;
  283. }
  284.  
  285. {block:PermalinkPage}
  286. #content #posts {
  287. margin-bottom: 20px;
  288. }
  289. {/block:PermalinkPage}
  290.  
  291. .pagenav {
  292. width: 500px;
  293. margin-left: 375px;
  294. margin-right: 385px;
  295. text-align: center;
  296. }
  297.  
  298. /* pagenav color */
  299. .pagenav a {
  300. color: {color:Post Links};
  301. text-decoration: none;
  302. display: inline-block;
  303. margin-top: 15px;
  304. -webkit-transition: color 0.5s;
  305. -moz-transition: color 0.5s;
  306. -o-transition: color 0.5s;
  307. transition: color 0.5s;
  308. }
  309.  
  310. /* pagenav hover color */
  311. .pagenav a:hover {
  312. color: {color:Post Links Hover};
  313. }
  314.  
  315. .footer {
  316. width: 500px;
  317. margin-left: 375px;
  318. margin-right: 385px;
  319. text-align: center;
  320. margin-top: 5px;
  321. font-size: 12px;
  322. }
  323.  
  324. .footer a {
  325. color: #ffbdb7;
  326. text-decoration: none;
  327. -webkit-transition: color 0.5s;
  328. -moz-transition: color 0.5s;
  329. -o-transition: color 0.5s;
  330. transition: color 0.5s;
  331. }
  332.  
  333. .footer a:hover {
  334. color: #ffe4e2;
  335. }
  336.  
  337.  
  338. /* tumblr controls credit to @cyantists on tumblr */
  339. iframe.tmblr-iframe {
  340. z-index:99999999999999!important;
  341. top:-2px!important;
  342. right:15px!important;
  343. opacity:0;
  344. padding-right:38px;
  345. /* delete invert(1) from here */
  346. filter:invert(1) contrast(150%);
  347. -webkit-filter:invert(1) contrast(150%);
  348. -o-filter:invert(1) contrast(150%);
  349. -moz-filter:invert(1) contrast(150%);
  350. -ms-filter:invert(1) contrast(150%);
  351. /* to here if your blog has a dark background */
  352. transform:scale(0.65);
  353. transform-origin:100% 0;
  354. -webkit-transform:scale(0.65);
  355. -webkit-transform-origin:100% 0;
  356. -o-transform:scale(0.65);
  357. -o-transform-origin:100% 0;
  358. -moz-transform:scale(0.65);
  359. -moz-transform-origin:100% 0;
  360. -ms-transform:scale(0.65);
  361. -ms-transform-origin:100% 0;
  362. }
  363.  
  364. iframe.tmblr-iframe:hover {
  365. opacity:0.6!important;
  366. }
  367.  
  368. .hcontrols {
  369. position:fixed;
  370. top:0;
  371. right:0;
  372. z-index:999999999;
  373. }
  374.  
  375. .hcontrols svg {
  376. width:12px;
  377. height:12px;
  378. padding:9px;
  379. }
  380.  
  381. /* gear color */
  382. .hcontrols svg path {
  383. fill: white;/* change this to change the color of the icon */
  384. }
  385.  
  386. ::-webkit-scrollbar {
  387. width: 5px;
  388. }
  389.  
  390. ::-webkit-scrollbar-track {
  391. background-color: {color:Scrollbar Background};
  392. }
  393.  
  394. ::-webkit-scrollbar-thumb {
  395. background-color: {color:Scrollbar Thumb};
  396. }
  397.  
  398. ::-webkit-scrollbar-thumb:hover {
  399. background-color: {color:Scrollbar Thumb Hover};
  400. }
  401.  
  402. </style>
  403.  
  404. </head>
  405. <body>
  406. <div class="topbar">
  407. <div class="all-links">
  408. <a href="/"><div class="links">home</div></a>
  409. {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
  410. {block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
  411. {block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}
  412. </div>
  413. </div>
  414.  
  415. <div class="sidebar-1">
  416. <img src="{image:Sidebar 1}"/>
  417. <h1>{Title}</h1>
  418. <div class="overlay">
  419. <div class="sidebar-text">{block:IfQuote}{text:Quote}{/block:IfQuote}</div>
  420. </div>
  421. </div>
  422.  
  423. <div class="sidebar-2">
  424. <p>{Description}</p>
  425. <img src="{image:Sidebar 2}"/>
  426. </div>
  427.  
  428. <div id="content">
  429. {block:Posts}
  430. <div id="posts">
  431. {block:Photo}
  432. <img src="{PhotoURL-500}">
  433. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  434. {/block:Photo}
  435.  
  436. {block:Photoset}
  437. {Photoset-500}
  438. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:Caption}
  439. {/block:Photoset}
  440.  
  441. {block:Video}
  442. {Video-500}
  443. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  444. {/block:Video}
  445.  
  446. {block:Audio}
  447. {AudioPlayerBlack}
  448. <br /><div class="text">{PlayCountWithLabel}</div>
  449. {block:Caption}<br /><div class="text">{Caption}</div>{/block:Caption}
  450. {/block:Audio}
  451.  
  452. {block:Quote}
  453. <div class="title">"{Quote}"</div>
  454. {block:Source}<br>~ {Source}{/block:Source}
  455. {/block:Quote}
  456.  
  457. {block:Text}
  458. {block:Title}<div class="title">{Title}<br /></div>{/block:Title}
  459. <div class="text">{Body}</div>
  460. {/block:Text}
  461.  
  462. {block:Answer}
  463. <div class="q">{Question}<br />
  464. {Asker}</div><br />
  465. {Answer}
  466. {/block:Answer}
  467.  
  468. {block:Chat}
  469. <div class="title">{block:Title}{Title}<br />{/block:Title}</div>
  470. <div class="text">{block:Lines}
  471. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  472. {/block:Lines}</div>
  473. {/block:Chat}
  474.  
  475. {block:Link}
  476. <a href="{URL}">{Name}</a>
  477. {block:Description}<br /><div class="text">{Description}</div>{/block:Description}
  478. {/block:Link}
  479.  
  480.  
  481. <div id="permalink">
  482. <a href="{PermaLink}">
  483. {block:Date}Posted {MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear} {12HourWithZero}:{Minutes}{AmPm}{/block:Date}
  484. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}
  485. </a>
  486. </div>
  487. </div>
  488.  
  489. {block:PostNotes}
  490. <div id="notecontainer">{PostNotes}</div>
  491. {/block:PostNotes}
  492.  
  493. {/block:Posts}
  494. </div>
  495.  
  496.  
  497. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  498.  
  499.  
  500. {block:Pagination}
  501. <div class="pagenav">
  502. <!-- change words for pagination here -->
  503. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  504. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  505. </div>
  506. {/block:Pagination}
  507.  
  508. <p class="footer">
  509. <a href="https://clerihew.tumblr.com/">theme by clerihew</a>
  510. </p>
  511.  
  512. </body>
  513. </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!