API tools faq
paste
Advertisement
foundcas

theme 20 update

foundcas
Jan 24th, 2021
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. THEME 20 BY FOUNDCAS/CAPECODING
  8. - If you have any questions or experience troubles send a message to https://capecoding.tumblr.com/ask
  9. - Do not remove the credit
  10. - Do not use this as a base code
  11.  
  12. Photo by S O C I A L . C U T on Unsplash
  13. Go to S O C I A L . C U T's profile
  14. S O C I A L . C U T
  15. @socialcut
  16. white, red, and green abstract painting
  17. -->
  18.  
  19. <title>{Title}</title>
  20.  
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <meta name="color:Background" content="#fff">
  26. <meta name="color:Text" content="#fff">
  27. <meta name="color:Title" content="#000">
  28. <meta name="color:Accent" content="#eee">
  29. <meta name="color:Link" content="#fff">
  30. <meta name="color:Link Hover" content="#c0ffee">
  31. <meta name="color:Sidebar Background" content="#fff">
  32. <meta name="color:Scrollbar" content="#fff">
  33. <meta name="color:Selection" content="#000">
  34. <meta name="color:Selection Background" content="#fff">
  35.  
  36. <meta name="image:Sidebar" content="https://40.media.tumblr.com/bd049c7f6d8866a889ff3dc9dc191a7d/tumblr_nammtbuMTw1rqdh9fo3_250.png">
  37.  
  38. <meta name="text:URL 1" content="url 1">
  39. <meta name="text:Link 1" content="link 1">
  40. <meta name="text:URL 2" content="url 2">
  41. <meta name="text:Link 2" content="link 2">
  42. <meta name="text:URL 3" content="url 3">
  43. <meta name="text:Link 3" content="link 3">
  44.  
  45. <!--font families-->
  46. <meta name="select:font" content="arvo" title="Arvo">
  47. <meta name="select:font" content="consolas" title="Consolas">
  48. <meta name="select:font" content="courier new" title="Courier">
  49. <meta name="select:font" content="didot" title="Didot">
  50. <meta name="select:font" content="monaco" title="Monaco">
  51. <meta name="select:font" content="roboto mono" title="Roboto Mono">
  52. <meta name="select:font" content="times" title="Times">
  53. <!--font sizes-->
  54. <meta name="select:font size" content="14px" title="14px">
  55. <meta name="select:font size" content="16px" title="16px">
  56. <meta name="select:font size" content="18px" title="18x">
  57. <!--post width-->
  58. <meta name="select:Post Width" content="400px" title="400px">
  59. <meta name="select:Post Width" content="500px" title="500px">
  60. <meta name="select:Post Width" content="540px" title="540px">
  61. <meta name="select:Post Width" content="600px" title="600px">
  62. <!--post border-->
  63. <meta name="select:Post Border Width" content="0px" title="0px">
  64. <meta name="select:Post Border Width" content="5px" title="5px">
  65. <meta name="select:Post Border Width" content="10px" title="10px">
  66. <meta name="select:Post Border Width" content="15px" title="15px">
  67. <meta name="select:Post Border Width" content="20px" title="20px">
  68.  
  69. <link rel="preconnect" href="https://fonts.gstatic.com">
  70. <link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:ital,wght@0,100;0,400;0,700;1,700&display=swap" rel="stylesheet">
  71.  
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  73. <!--
  74. NPF IMAGES READJUSTMENT | @glenthemes
  75. v2.0 [last updated: 2021-01-06]
  76. -->
  77. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  78. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  79.  
  80. <style type="text/css">
  81. :root {
  82. --NPF-Image-Spacing:4px;
  83. --NPF-Bottom-Gap-From-Captions:1em;
  84. }
  85. </style>
  86. <style type="text/css">
  87. /*tool tips*/
  88. .tippy-tooltip.custom-theme{
  89. background-color:{color:accent};
  90. color:{color:text};
  91. text-align:center;
  92. text-transform:lowercase;
  93. }
  94. .tippy-tooltip.custom-theme .tippy-svg-arrow{
  95. fill:{color:accent};
  96. }
  97. ::selection{
  98. background:{color:Selection Background};
  99. color:{color:Selection};
  100. }
  101.  
  102. ::-webkit-scrollbar{
  103. background:transparent;
  104. width:3px;
  105. }
  106.  
  107. ::-webkit-scrollbar-thumb{
  108. background:{color:Scrollbar};
  109. width:3px;
  110. height:auto;
  111. }
  112.  
  113. blockquote{
  114. border-left:2px solid {color:Text};
  115. padding:0px 5px;
  116. }
  117.  
  118. pre, code {
  119. padding:10px;
  120. box-sizing:border-box;
  121. -moz-box-sizing:border-box;
  122. webkit-box-sizing:border-box;
  123. display:block;
  124. white-space: pre-wrap;
  125. white-space: -moz-pre-wrap;
  126. white-space: -pre-wrap;
  127. white-space: -o-pre-wrap;
  128. word-wrap: break-word;
  129. width:100%; overflow-x:auto;
  130. background:{color:Accent};
  131. border-left:2px solid {color:Text};
  132. }
  133.  
  134. a{
  135. color:{color:Link};
  136. text-decoration:none;
  137. -moz-transition:.8s ease-in-out;
  138. -webkit-transition:.8s ease-in-out;
  139. -o-transition:.8s ease-in-out;
  140. }
  141.  
  142. a:hover{
  143. background:{color:Link Hover};
  144. -moz-transition:.8s ease-in-out;
  145. -webkit-transition:.8s ease-in-out;
  146. -o-transition:.8s ease-in-out;
  147. }
  148.  
  149. body{
  150. background:{color:Background};
  151. color:{color:Text};
  152. font-family:{select:font};
  153. font-size:{select:font size};
  154. word-break:break-word;
  155. }
  156. /*headings*/
  157. h1, h2, h3, h4, h5, h6{
  158. text-align:center;
  159. border-bottom:2px solid {color:text};
  160. }
  161. /*bold, italic text*/
  162. b{
  163. text-shadow:1px 2px 2px {color:accent};
  164. }
  165. i{
  166. text-shadow:1px 2px 2px {color:accent};
  167. }
  168. /*list items*/
  169. li{
  170. padding:10px;
  171. }
  172. /*sidebar*/
  173. .sidebar{
  174. position:fixed;
  175. text-align:center;
  176. border-left:2px solid {color:Accent};
  177. width:40%;
  178. height:100%;
  179. top:0px;
  180. right:0px;
  181. z-index:9;
  182. }
  183.  
  184. .title{
  185. transform:translateY(130px);
  186. padding:25px;
  187. font-weight:bold;
  188. font-size:50px;
  189. color:{color:title};
  190. text-shadow:2px 2px {color:accent};
  191. }
  192.  
  193. .nav{
  194. transform:translateY(140px);
  195. margin-bottom:25px;
  196. line-height:30px;
  197. padding:0px 25px;
  198. }
  199.  
  200. .nav a{
  201. display:inline-block;
  202. background:{color:Accent};
  203. margin:10px;
  204. padding:0px 3px;
  205. text-transform:lowercase;
  206. }
  207. .desc{
  208. transform:translateY(150px);
  209. margin-left:auto;
  210. margin-right:auto;
  211. padding:10px;
  212. width:250px;
  213. max-height:200px;
  214. overflow-y:auto;
  215. background:{color:Accent};
  216. }
  217.  
  218. .bg{
  219. position:fixed;
  220. background:url('{image:Sidebar}');
  221. background-position:center center;
  222. background-repeat:no-repeat;
  223. background-attachment:fixed;
  224. background-size:cover;
  225. top:0px;
  226. right:0px;
  227. width:40%;
  228. height:100%;
  229. opacity:.8;
  230. }
  231. /*posts*/
  232. .entries{
  233. margin:50px 0px;
  234. width:60%;
  235. }
  236.  
  237. .post{
  238. border:{select:post border width} solid {color:Accent};
  239. max-width:{select:post width};
  240. margin:50px auto;
  241. padding:15px;
  242. }
  243. iframe{
  244. max-width:100%;
  245. margin:auto;
  246. height:auto;
  247. }
  248. figure img{
  249. width:100%;
  250. height:auto;
  251. }
  252. .audio_player_iframe{
  253. margin-bottom:10px;
  254. }
  255. .audio-player{
  256. position:absolute;
  257. width:33px;
  258. height:30px;
  259. margin-left:-55px;
  260. margin-top:18px;
  261. opacity:.8;
  262. }
  263. /*reblogs*/
  264. .reblog-header{
  265. margin:10px auto;
  266. font-size:20px;
  267. }
  268. .reblog-header img{
  269. width:30px;
  270. vertical-align:middle;
  271. }
  272. /*quote posts*/
  273. .quote{
  274. padding:5px;
  275. line-height:25px;
  276. }
  277.  
  278. .quotation{
  279. font-size:25px;
  280. font-weight:bold;
  281. }
  282. /*chat posts*/
  283. .chat-post ul{
  284. list-style-type:none;
  285. margin-left:-40px;
  286. line-height:40px;
  287. }
  288.  
  289. .label{
  290. font-style:italic;
  291. border:2px solid {color:Text};
  292. padding:5px;
  293. }
  294. /*answer posts*/
  295. .ask{
  296. float:right;
  297. width:85%;
  298. border-left:1px solid {color:Text};
  299. }
  300.  
  301. .portrait{
  302. width:10%;
  303. padding:5px;
  304. border:1px solid {color:Text};
  305. }
  306.  
  307. .question{
  308. padding:5px;
  309. border-bottom:1px solid {color:Text};
  310. }
  311.  
  312. .answer{
  313. padding:0px 5px;
  314. }
  315. /*post info*/
  316. .info{
  317. clear:both;
  318. margin-top:15px;
  319. }
  320.  
  321. .tags a{
  322. margin-right:5px;
  323. }
  324. /*notes*/
  325. .noted li{
  326. list-style-type:none;
  327. padding:4px;
  328. }
  329.  
  330. .noted img.avatar{
  331. vertical-align:middle;
  332. height:30px;
  333. width:30px;
  334. border:1px solid {color:Text};
  335. padding:4px;
  336. margin-right:4px;
  337. }
  338. /*credit*/
  339. footer{
  340. width:60%;
  341. text-align:center;
  342. margin:15px 0px;
  343. text-transform:uppercase;
  344. }
  345.  
  346. @media only screen and (max-width: 992px) {
  347. .bg,.sidebar{
  348. width:25%;
  349. }
  350. .entries{
  351. width:75%;
  352. }
  353. .post{
  354. max-width:400px;
  355. }
  356. .title{
  357. transform:translateY(100px);
  358. font-size:30px;
  359. }
  360. .desc{
  361. display:none;
  362. }
  363. .nav{
  364. transform:translateY(120px);
  365. }
  366. .nav a{
  367. display:block;
  368. }
  369. }
  370. @media only screen and (max-width: 600px) {
  371. .post{
  372. max-width:250px;
  373. }
  374. }
  375. {CustomCSS}
  376. </style>
  377. </head>
  378. <body>
  379.  
  380. <div class="bg"></div>
  381. <div class="sidebar">
  382. <div class="title">{Title}</div>
  383. <div class="nav">
  384. <a href="/">{lang:home}</a>
  385. {block:AskEnabled}<a title="{asklabel}" href="/ask">{lang:mail}</a>{/block:AskEnabled}
  386. {block:SubmissionsEnabled}<a title="{submitlabel}" href="/submit">submit</a>{/block:SubmissionsEnabled}
  387. <a href="{text:URL 1}">{text:Link 1}</a>
  388. <a href="{text:URL 2}">{text:Link 2}</a>
  389. <a href="{text:URL 3}">{text:Link 3}</a>
  390. <a href="/archive">archive</a>
  391.  
  392. <div id="pagi">
  393. {block:Pagination}
  394. {block:PreviousPage}
  395. <a href="{PreviousPage}">prev</a>
  396. {/block:PreviousPage}
  397.  
  398. {block:JumpPagination length="5"}
  399. {block:CurrentPage}<a href="{URL}">{PageNumber}</a>{/block:CurrentPage}
  400. {block:JumpPage}<a class="jump2" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  401. {/block:JumpPagination}
  402.  
  403. {block:NextPage}
  404. <a href="{NextPage}">next</a>
  405. {/block:NextPage}
  406. {/block:Pagination}
  407. </div>
  408.  
  409. </div>
  410. <div class="desc">{Description}</div>
  411. </div>
  412.  
  413.  
  414. <div class="entries">
  415. {block:Posts}
  416. <div class="post {PostType}-post" post-type="{PostType}">
  417.  
  418. <!--pinned posts-->
  419. {block:HomePage}
  420. {block:PinnedPostLabel}<div class="pin"><i class="fas fa-thumbtack"></i> Pinned Post</div>{/block:PinnedPostLabel}
  421. {/block:HomePage}
  422.  
  423. {block:Text}
  424. {block:Title}<h3>{Title}</h3>{/block:Title}
  425. {block:NotReblog}
  426. {Body}
  427. {/block:NotReblog}
  428.  
  429. {block:RebloggedFrom}
  430. <div class="reblog-list">
  431. {block:Reblogs}
  432. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  433. <div class="reblog-header">
  434. {block:IsActive}
  435. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  436. <img src="{PortraitURL-64}">
  437. </a>
  438. {/block:IsActive}
  439.  
  440. {block:IsDeactivated}
  441. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  442. <img src="{PortraitURL-64}">
  443. </span>
  444. {/block:IsDeactivated}
  445.  
  446. {block:IsActive}
  447. <a target="_blank" href="{Permalink}">{Username}</a>
  448. {/block:IsActive}
  449.  
  450. {block:IsDeactivated}
  451. <span class="inactive">{Username} - deactivated</span>
  452. {/block:IsDeactivated}
  453. </div>
  454. <div class="reblog-content">
  455. {Body}
  456. </div>
  457. </div>
  458. {/block:Reblogs}
  459. </div>
  460. {/block:RebloggedFrom}
  461. {/block:Text}
  462.  
  463. {block:Link}
  464. <a href="{URL}">{Name}</a>
  465. {block:Description}{Description}{/block:Description}
  466. {/block:Link}
  467.  
  468. {block:Quote}
  469. <div class="quote">
  470. <span class="quotation">&#147;</span>{Quote}<span class="quotation">&#148;</span>
  471. </div>
  472. {block:Source}<i>- {Source}</i>{/block:Source}
  473. {/block:Quote}
  474.  
  475. {block:Chat}
  476. {block:Title}<h3>{Title}</h3>{/block:Title}
  477. <ul class="chat">
  478. {block:Lines}
  479. <li class="{Alt} user_{UserNumber}">
  480. {block:Label}<span class="label">{Label}</span>{/block:Label}
  481. {Line}</li>
  482. {/block:Lines}</ul>
  483. {/block:Chat}
  484.  
  485. {block:Photo}
  486. <figure>
  487. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  488. </figure>
  489. {/block:Photo}
  490.  
  491. {block:Video}
  492. {block:PostTitle}{PostTitle}{/block:PostTitle}
  493. {Video-700}
  494. {/block:Video}
  495.  
  496.  
  497.  
  498. {block:Audio}<left>
  499.  
  500. {block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px"></left>
  501. {/block:AlbumArt}
  502. {block:AudioPlayer}<span style="float:right;" class="audio-player">{AudioPlayerBlack}</span>
  503. {/block:AudioPlayer}
  504. {block:TrackName}<b>Title:</b> {TrackName}<br>{/block:TrackName}
  505. {block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  506. <b>Played:</b> {PlayCount} times <br>
  507. {/block:Audio}
  508.  
  509. {block:Answer}
  510. <img class="portrait" src="{AskerPortraitURL-128}">
  511. <div class="ask">
  512. <div class="question">{Asker} asked: {Question}</div>
  513. <div class="answer"> {Answer}</div>
  514. </div>
  515.  
  516. {/block:Answer}
  517.  
  518. <!--captions-->
  519. {block:Caption}
  520. {block:NotReblog}
  521. <figcaption>
  522. {Caption}
  523. </figcaption>
  524. {/block:NotReblog}
  525.  
  526. {block:RebloggedFrom}
  527. <div class="reblog-list">
  528. {block:Reblogs}
  529. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  530. <div class="reblog-header">
  531.  
  532. {block:IsActive}
  533. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  534. <img src="{PortraitURL-64}">
  535. </a>
  536. {/block:IsActive}
  537.  
  538. {block:IsDeactivated}
  539. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  540. <img src="{PortraitURL-64}">
  541. </span>
  542. {/block:IsDeactivated}
  543.  
  544. {block:IsActive}
  545. <a target="_blank" href="{Permalink}">{Username}</a>
  546. {/block:IsActive}
  547.  
  548. {block:IsDeactivated}
  549. <span class="inactive">{Username} - deactivated</span>
  550. {/block:IsDeactivated}
  551.  
  552. </div>
  553. <div class="reblog-content">
  554. {Body}
  555. </div>
  556. </div>
  557. {/block:Reblogs}
  558. </div>
  559. {/block:RebloggedFrom}
  560. {/block:Caption}
  561.  
  562. <div class="info">
  563. {block:Date}<a title="{lang:Posted on Month DayOfMonth Year}" href="{Permalink}">{DayofMonthWithZero}.{MonthNumberWithZero}.{ShortYear} A.D</a>{/block:Date} /
  564. {block:NoteCount}{NoteCount} /{/block:NoteCount}
  565. <a href="{ReblogURL}">reblog</a>
  566. <span style="float:right">
  567. {block:RebloggedFrom}<a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>
  568. {block:ContentSource}- <a title="{ReblogRootName}" href="{ReblogRootURL}">src</a>{/block:ContentSource}{/block:RebloggedFrom}
  569. </span>
  570. {block:HasTags}
  571. <div class="tags">{block:Tags}<a href="{TagURL}">({Tag})</a>{/block:Tags}</div>
  572. {/block:HasTags}
  573. </div>
  574.  
  575. {block:PostNotes}<div class="noted">{PostNotes-64}</div>{/block:PostNotes}
  576.  
  577. </div>
  578. {/block:Posts}
  579.  
  580. {block:ContentSource}
  581. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  582. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  583. {/block:SourceLogo}
  584. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  585. {/block:ContentSource}
  586.  
  587. </div>
  588. <footer>
  589. <div class="credit">
  590. <a title="credit" href="https://foundcas.tumblr.com">theme by foundcas/capecoding</a>
  591. </div>
  592. </footer>
  593. <!--tippy tooltips scripts-->
  594. <script src="https://unpkg.com/popper.js@1"></script>
  595. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  596. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css"/>
  597. <script>
  598. tippy('[title]', {
  599. theme: 'custom',
  600. arrow: tippy.roundArrow,
  601. zIndex: 9999999999,
  602. maxWidth: 300,
  603.  
  604. content(reference) {
  605. const title = reference.getAttribute('title');
  606. reference.removeAttribute('title');
  607. return title;
  608. },
  609. });
  610. </script>
  611. </body>
  612. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!