API tools faq
paste
sexycullen

BASE - wip

sexycullen
Jan 6th, 2025
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.90 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}" />
  8. {/block:Description}
  9.  
  10.  
  11. {block:Hidden}
  12. <!-- -------------- THEME: customizations -------------- -->
  13. <meta name="text:Body Font Family" content="Inter" />
  14. <meta name="text:Posts Title Font Family" content="Nunito" />
  15.  
  16. <!-- -------------- THEME: colors -------------- -->
  17. <meta name="color:Body Link Color" content="#7a7a7a" />
  18. <meta name="color:Body Text Color" content="#404040" />
  19. <meta name="color:Body Link Hover Color" content="#131313" />
  20. <meta name="color:Borders Color" content="#ececec" />
  21. <meta name="color:Posts Background Color" content="#ffffff" />
  22.  
  23. <!-- -------------- THEME: conditionals -------------- -->
  24. <meta name="if:Images Black and White" content="0" />
  25. <meta name="if:Show Box Shadow" content="0" />
  26. <meta name="if:Show Borders" content="0" />
  27. <meta name="if:Enable Font Smoothing" content="0" />
  28.  
  29. <!-- -------------- THEME: body styling -------------- -->
  30. <meta name="select:Body Font Size" content="1.3rem" title="13px" />
  31. <meta name="select:Body Font Size" content="0.8rem" title="8px" />
  32. <meta name="select:Body Font Size" content="0.9rem" title="9px" />
  33. <meta name="select:Body Font Size" content="1rem" title="10px" />
  34. <meta name="select:Body Font Size" content="1.1rem" title="11px" />
  35. <meta name="select:Body Font Size" content="1.2rem" title="12px" />
  36. <meta name="select:Body Font Size" content="1.4rem" title="14px" />
  37. <meta name="select:Body Font Size" content="1.5rem" title="15px" />
  38. <meta name="select:Body Font Size" content="1.6rem" title="16px" />
  39. <meta name="select:Body Font Size" content="1.7rem" title="17px" />
  40. <meta name="select:Body Font Size" content="1.8rem" title="18px" />
  41.  
  42. <meta name="select:Body Font Letter Spacing" content="normal" title="none" />
  43. <meta name="select:Body Font Letter Spacing" content="0.015rem" title="0.15px" />
  44. <meta name="select:Body Font Letter Spacing" content="0.025rem" title="0.25px" />
  45. <meta name="select:Body Font Letter Spacing" content="0.075rem" title="0.75px" />
  46. <meta name="select:Body Font Letter Spacing" content="0.08rem" title="0.80px" />
  47. <meta name="select:Body Font Letter Spacing" content="0.085rem" title="0.85px" />
  48. <meta name="select:Body Font Letter Spacing" content="0.09rem" title="0.90px" />
  49. <meta name="select:Body Font Letter Spacing" content="0.095rem" title="0.95px" />
  50. <meta name="select:Body Font Letter Spacing" content="0.1rem" title="1px" />
  51. <meta name="select:Body Font Letter Spacing" content="0.2rem" title="2px" />
  52. <meta name="select:Body Font Letter Spacing" content="0.3rem" title="3px" />
  53.  
  54. <meta name="select:Body Font Weight" content="400" title="normal" />
  55. <meta name="select:Body Font Weight" content="700" title="bold" />
  56. <meta name="select:Body Font Weight" content="300" title="light" />
  57. <meta name="select:Body Font Weight" content="500" title="medium" />
  58. <meta name="select:Body Font Weight" content="600" title="semi-bold" />
  59.  
  60. <meta name="select:Bold Font Weight" content="700" title="bold" />
  61. <meta name="select:Bold Font Weight" content="300" title="light" />
  62. <meta name="select:Bold Font Weight" content="400" title="normal" />
  63. <meta name="select:Bold Font Weight" content="500" title="medium" />
  64. <meta name="select:Bold Font Weight" content="600" title="semi-bold" />
  65.  
  66. <!-- -------------- THEME: posts h1, h2, h3, h4, h5, h6 styling -------------- -->
  67. <meta name="select:Posts Titles Font Size" content="1.6rem" title="16px" />
  68. <meta name="select:Posts Titles Font Size" content="1rem" title="10px" />
  69. <meta name="select:Posts Titles Font Size" content="1.1rem" title="11px" />
  70. <meta name="select:Posts Titles Font Size" content="1.2rem" title="12px" />
  71. <meta name="select:Posts Titles Font Size" content="1.3rem" title="13px" />
  72. <meta name="select:Posts Titles Font Size" content="1.4rem" title="14px" />
  73. <meta name="select:Posts Titles Font Size" content="1.5rem" title="15px" />
  74. <meta name="select:Posts Titles Font Size" content="1.7rem" title="17px" />
  75. <meta name="select:Posts Titles Font Size" content="1.8rem" title="18px" />
  76.  
  77. <meta name="select:Posts Titles Font Letter Spacing" content="normal" title="none" />
  78. <meta name="select:Posts Titles Font Letter Spacing" content="0.015rem" title="0.15px" />
  79. <meta name="select:Posts Titles Font Letter Spacing" content="0.025rem" title="0.25px" />
  80. <meta name="select:Posts Titles Font Letter Spacing" content="0.075rem" title="0.75px" />
  81. <meta name="select:Posts Titles Font Letter Spacing" content="0.08rem" title="0.80px" />
  82. <meta name="select:Posts Titles Font Letter Spacing" content="0.085rem" title="0.85px" />
  83. <meta name="select:Posts Titles Font Letter Spacing" content="0.09rem" title="0.90px" />
  84. <meta name="select:Posts Titles Font Letter Spacing" content="0.095rem" title="0.95px" />
  85. <meta name="select:Posts Titles Font Letter Spacing" content="0.1rem" title="1px" />
  86. <meta name="select:Posts Titles Font Letter Spacing" content="0.2rem" title="2px" />
  87. <meta name="select:Posts Titles Font Letter Spacing" content="0.3rem" title="3px" />
  88.  
  89. <meta name="select:Posts Titles Font Weight" content="700" title="bold" />
  90. <meta name="select:Posts Titles Font Weight" content="300" title="light" />
  91. <meta name="select:Posts Titles Font Weight" content="400" title="normal" />
  92. <meta name="select:Posts Titles Font Weight" content="500" title="medium" />
  93. <meta name="select:Posts Titles Font Weight" content="600" title="semi-bold" />
  94.  
  95. <meta name="select:Posts Titles Font Style" content="normal">
  96. <meta name="select:Posts Titles Font Style" content="italic">
  97.  
  98. <meta name="select:Posts Titles Text Transform" content="none">
  99. <meta name="select:Posts Titles Text Transform" content="uppercase">
  100. <meta name="select:Posts Titles Text Transform" content="lowercase">
  101. <meta name="select:Posts Titles Text Transform" content="capitalize">
  102.  
  103. <meta name="select:Posts Titles Text Position" content="left">
  104. <meta name="select:Posts Titles Text Position" content="center">
  105. <meta name="select:Posts Titles Text Position" content="justify">
  106. <meta name="select:Posts Titles Text Position" content="right">
  107.  
  108. <!-- -------------- THEME: sidebar and posts borders -------------- -->
  109. <meta name="select:Borders Size" content="0.1rem" title="1px" />
  110. <meta name="select:Borders Size" content="0rem" title="0px" />
  111. <meta name="select:Borders Size" content="0.2rem" title="2px" />
  112. <meta name="select:Borders Size" content="0.3rem" title="3px" />
  113. <meta name="select:Borders Size" content="0.4rem" title="4px" />
  114. <meta name="select:Borders Size" content="0.5rem" title="5px" />
  115.  
  116. <meta name="select:Borders Style" content="solid" />
  117. <meta name="select:Borders Style" content="dotted" />
  118. <meta name="select:Borders Style" content="dashed" />
  119. <meta name="select:Borders Style" content="double" />
  120. <meta name="select:Borders Style" content="ridge" />
  121.  
  122.  
  123. <!-- -------------- POSTS: sizes -------------- -->
  124. <meta name="select:Post Width" content="54rem" title="540px" />
  125. <meta name="select:Post Width" content="50rem" title="500px" />
  126. <meta name="select:Post Width" content="40rem" title="400px" />
  127.  
  128. <meta name="select:Photoset Gutter" content="0.44rem" title="For 540px" />
  129. <meta name="select:Photoset Gutter" content="1rem" title="For 500px" />
  130. <meta name="select:Photoset Gutter" content="0.2rem" title="For 400px" />
  131.  
  132. <!-- -------------- POSTS: size, padding, margin -------------- -->
  133. <meta name="text:Theme Container Size" content="140rem" />
  134. <meta name="text:Posts Between Margin" content="9.5rem" />
  135. <meta name="text:Posts and Sidebar Padding" content="1rem" />
  136.  
  137. <!-- SIDEBAR: colors -->
  138. <meta name="color:Sidebar Background Color" content="#ffffff">
  139.  
  140. <!-- -------------- SIDEBAR: position -------------- -->
  141. <meta name="select:Sidebar Position" content="center" title="center">
  142. <meta name="select:Sidebar Position" content="flex-start" title="top">
  143.  
  144. <!-- -------------- SIDEBAR: size, padding, margin -------------- -->
  145. <meta name="text:Sidebar Posts Spacing Gap" content="22rem" />
  146. <meta name="text:Sidebar Posts Spacing Between" content="0rem" />
  147.  
  148. <!-- -------------- SIDEBAR: links styling -------------- -->
  149. <meta name="select:Sidebar Link Font Size" content="1.1rem" title="11px" />
  150. <meta name="select:Sidebar Link Font Size" content="0.8rem" title="8px" />
  151. <meta name="select:Sidebar Link Font Size" content="0.9rem" title="9px" />
  152. <meta name="select:Sidebar Link Font Size" content="1rem" title="10px" />
  153. <meta name="select:Sidebar Link Font Size" content="1.2rem" title="12px" />
  154. <meta name="select:Sidebar Link Font Size" content="1.3rem" title="13px" />
  155. <meta name="select:Sidebar Link Font Size" content="1.4rem" title="14px" />
  156. <meta name="select:Sidebar Link Font Size" content="1.5rem" title="15px" />
  157. <meta name="select:Sidebar Link Font Size" content="1.6rem" title="16px" />
  158. <meta name="select:Sidebar Link Font Size" content="1.7rem" title="17px" />
  159. <meta name="select:Sidebar Link Font Size" content="1.8rem" title="18px" />
  160.  
  161. <meta name="select:Sidebar Link Font Letter Spacing" content="normal" title="none" />
  162. <meta name="select:Sidebar Link Font Letter Spacing" content="0.015rem" title="0.15px" />
  163. <meta name="select:Sidebar Link Font Letter Spacing" content="0.025rem" title="0.25px" />
  164. <meta name="select:Sidebar Link Font Letter Spacing" content="0.075rem" title="0.75px" />
  165. <meta name="select:Sidebar Link Font Letter Spacing" content="0.08rem" title="0.80px" />
  166. <meta name="select:Sidebar Link Font Letter Spacing" content="0.085rem" title="0.85px" />
  167. <meta name="select:Sidebar Link Font Letter Spacing" content="0.09rem" title="0.90px" />
  168. <meta name="select:Sidebar Link Font Letter Spacing" content="0.095rem" title="0.95px" />
  169. <meta name="select:Sidebar Link Font Letter Spacing" content="0.1rem" title="1px" />
  170. <meta name="select:Sidebar Link Font Letter Spacing" content="0.2rem" title="2px" />
  171. <meta name="select:Sidebar Link Font Letter Spacing" content="0.3rem" title="3px" />
  172.  
  173. <meta name="select:Sidebar Link Font Weight" content="400" title="normal" />
  174. <meta name="select:Sidebar Link Font Weight" content="700" title="bold" />
  175. <meta name="select:Sidebar Link Font Weight" content="300" title="light" />
  176. <meta name="select:Sidebar Link Font Weight" content="500" title="medium" />
  177. <meta name="select:Sidebar Link Font Weight" content="600" title="semi-bold" />
  178.  
  179. <meta name="select:Sidebar Link Font Style" content="normal" />
  180. <meta name="select:Sidebar Link Font Style" content="italic" />
  181.  
  182. <meta name="select:Sidebar Link Text Transform" content="none">
  183. <meta name="select:Sidebar Link Text Transform" content="uppercase">
  184. <meta name="select:Sidebar Link Text Transform" content="lowercase">
  185. <meta name="select:Sidebar Link Text Transform" content="capitalize">
  186.  
  187. <meta name="select:Sidebar Link Text Position" content="left" title="left" />
  188. <meta name="select:Sidebar Link Text Position" content="center" title="center" />
  189. <meta name="select:Sidebar Link Text Position" content="right" title="right" />
  190.  
  191. <!-- -------------- SIDEBAR: conditionals -------------- -->
  192. <meta name="if:Sidebar Image" content="1"/>
  193. <meta name="if:Sidebar Title" content="1"/>
  194. <meta name="if:Sidebar Pages Link" content="0"/>
  195. <meta name="if:Sidebar Description" content="1"/>
  196. <meta name="if:Right Sidebar Position" content="0" />
  197. <meta name="if:Sidebar Link 1" content="1" />
  198. <meta name="if:Sidebar Link 2" content="1" />
  199. <meta name="if:Sidebar Link 3" content="1" />
  200. <meta name="if:Sidebar Link 4" content="1" />
  201.  
  202. <!-- -------------- SIDEBAR: links -------------- -->
  203. <meta name="text:Home URL" content="/" />
  204. <meta name="text:Home Text" content="Home" />
  205.  
  206. <meta name="text:Ask URL" content="/ask" />
  207. <meta name="text:Ask Text" content="Ask" />
  208.  
  209. <meta name="text:Sidebar Link 1 URL" content="/" />
  210. <meta name="text:Sidebar Link 1 Text" content="Link 1" />
  211.  
  212. <meta name="text:Sidebar Link 2 URL" content="/" />
  213. <meta name="text:Sidebar Link 2 Text" content="Link 2" />
  214.  
  215. <meta name="text:Sidebar Link 3 URL" content="/" />
  216. <meta name="text:Sidebar Link 3 Text" content="Link 3" />
  217.  
  218. <meta name="text:Sidebar Link 4 URL" content="/" />
  219. <meta name="text:Sidebar Link 4 Text" content="Link 4" />
  220. {/block:Hidden}
  221.  
  222.  
  223. <!-- RESOURCES: photosets.css (html/css/js)
  224. - by: annasthms.github.io/photosets
  225. -->
  226. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  227.  
  228.  
  229. <!-- RESOURCES: custom font
  230. - by: https://fonts.google.com/
  231. -->
  232. <link href="https://fonts.googleapis.com/css2?family={text:Body Font Family}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  233. <link href="https://fonts.googleapis.com/css2?family={text:Posts Title Font Family}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  234.  
  235. <style>
  236. :root {
  237.  
  238. /* -------------- THEME: fonts -------------- */
  239. --bodyFontFamily: {text:Body Font Family};
  240. --postsTitleFontFamily: {text:Posts Title Font Family};
  241. --bodyFontSize: {select:Body Font Size};
  242. --bodyFontLetterSpacing: {select:Body Font Letter Spacing};
  243. --bodyFontWeight: {select:Body Font Weight};
  244. --boldFontWeight: {select:Bold Font Weight};
  245. --poststLineHeight: calc(var(--bodyFontSize) * 1.4);
  246. --postsTextPosition: {select:Posts Text Position};
  247. --postsTitlesLineHeight: calc(var(--postsTitlesFontSize) * 1.2);
  248. --postsTitlesFontSize: {select:Posts Titles Font Size};
  249. --postsTitlesFontWeight: {select:Posts Titles Font Weight};
  250. --postsTitlesFontLetterSpacing: {select:Posts Titles Font Letter Spacing};
  251. --postsTitlesTextTransform: {select:Posts Titles Text Transform};
  252. --postsTitlesFontStyle: {select:Posts Titles Font Style};
  253. --postsTextPosition: {select:Posts Text Position};
  254. --postsTitlesTextPosition: {select:Posts Titles Text Position};
  255.  
  256. /* -------------- THEME: colors -------------- */
  257. --bodyLinkColor: {color:Body Link Color};
  258. --bodyTextColor: {color:Body Text Color};
  259. --bodyLinkHoverColor: {color:Body Link Hover Color};
  260. --bordersColor: {color:Borders Color};
  261.  
  262. /* -------------- THEME: borders and box shadow -------------- */
  263. --bordersStyle: {select:Borders Style};
  264. --bordersSize: {select:Borders Size};
  265. --boxShadowSize:{text:Box Shadow Size};
  266. --boxShadowColor:{text:Box Shadow Color};
  267.  
  268. /* -------------- POSTS -------------- */
  269. --postFixWidth: 1px;
  270. --themeContainerSize: {text:Theme Container Size};
  271. --postWidth: {select:Post Width};
  272. --postsBetweenMargin: {text:Posts Between Margin};
  273. --postsSidebarPadding:{text:Posts and Sidebar Padding};
  274. --sidebarPostsSpacingGap:{text:Sidebar Posts Spacing Gap};
  275. --sidebarPostsSpacingBetween:{text:Sidebar Posts Spacing Between};
  276.  
  277. --postsBackgroundColor: {color:Posts Background Color};
  278.  
  279.  
  280. /* -------------- SIDEBAR -------------- */
  281. --sidebarContentPosition: {select:Sidebar Position};
  282. --sidebarBackgroundColor: {color:Sidebar Background Color};
  283.  
  284. --sidebarLinkFontSize: {select:Sidebar Link Font Size};
  285. --sidebarLinkFontLetterSpacing: {select:Sidebar Link Font Letter Spacing};
  286. --sidebarLinkFontWeight: {select:Sidebar Link Font Weight};
  287. --sidebarLinkTextTransform: {select:Sidebar Link Text Transform};
  288. --sidebarLinkFontStyle: {select:Sidebar Link Font Style};
  289. --sidebarLinkTextPosition: {select:Sidebar Link Text Position};
  290.  
  291. --sidebarLinkLineHeight: calc(var(--sidebarLinkFontSize) * 1.3);
  292.  
  293.  
  294. /* -------------- OTHERS -------------- */
  295. --transitions: all .3s ease;
  296. }
  297.  
  298.  
  299. * {
  300. margin: 0;
  301. padding: 0;
  302. }
  303.  
  304. html {
  305. font-size: 62.5%;
  306. }
  307.  
  308. body {
  309.  
  310. font-family: var(--bodyFontFamily), Arial, sans-serif;
  311. font-size:var(--bodyFontSize);
  312. font-weight: var(--bodyFontWeight);
  313. letter-spacing: var(--bodyFontLetterSpacing);
  314. line-height:var(--poststLineHeight);
  315. {block:ifEnableFontSmoothing}
  316. -webkit-font-smoothing: antialiased;
  317. -moz-osx-font-smoothing: grayscale;
  318. {/block:ifEnableFontSmoothing}
  319. }
  320.  
  321. a {
  322. text-decoration:underline;
  323. color:var(--bodyLinkColor);
  324. transition:var(--transitions);
  325. }
  326.  
  327. a:hover {
  328. color:var(--bodyLinkHoverColor);
  329. }
  330.  
  331. strong, bold, b {
  332. font-weight: var(--boldFontWeight);
  333. }
  334.  
  335. p:first-child {
  336. margin-block-start: 0;
  337. margin-block-end: 0;
  338. }
  339.  
  340. p:last-child {
  341. margin-block-end: 0;
  342. }
  343.  
  344. pre {
  345. word-wrap:break-word!Important;
  346. white-space: pre-wrap;
  347. }
  348.  
  349. h1, h2, h3, h4, h5, h6 {
  350. padding: 1rem 0 0.5rem;
  351. margin: 0;
  352. font-family:var(--postsTitleFontFamily);
  353. font-style:var(--postsTitlesFontStyle);
  354. font-weight:var(--postsTitlesFontWeight);
  355. letter-spacing: var(--postsTitlesFontLetterSpacing);
  356. word-spacing: var(--postsTitlesFontWordSpacing);
  357. color:var(--bodyTextColor);
  358. text-transform:var(--postsTitlesTextTransform);
  359. font-size:var(--postsTitlesFontSize);
  360. text-align:var(--postsTitlesTextPosition);
  361. line-height:var(--postsTitlesLineHeight);
  362. }
  363.  
  364. ul {
  365. list-style: none;
  366. margin: 0;
  367. padding: 0;
  368. }
  369.  
  370. /* -------------- TODO: STYLE -------------- */
  371. ol li {
  372. }
  373.  
  374. hr {
  375. width:10rem;
  376. margin:1rem 0 1rem 0;
  377. border-width: var(--bordersSize) 0px 0px 0px;
  378. border-style: var(--bordersStyle);
  379. border-color: var(--bordersColor);
  380. }
  381.  
  382. img {
  383. max-width:100%;
  384. height:auto;
  385. display:block;
  386. margin: 0;
  387. padding: 0;
  388. transition:var(--transitions);
  389. {block:ifImagesBlackandWhite}
  390. -webkit-filter: grayscale(100%);
  391. filter: grayscale(100%);
  392. {/block:ifImagesBlackandWhite}
  393. }
  394.  
  395. img:hover,
  396. .posts-wrapper:hover img,
  397. .sidebar-content:hover img {
  398. opacity:1;
  399. -webkit-filter: grayscale(0%);
  400. filter: grayscale(0%);
  401. }
  402.  
  403. ::-moz-selection {
  404. background-color: var(--bodyTextColor);
  405. color:var(--postsBackgroundColor);
  406. }
  407.  
  408. ::selection {
  409. background-color: var(--bodyTextColor);
  410. color:var(--postsBackgroundColor);
  411. }
  412.  
  413.  
  414.  
  415. /* -------------- MAIN CONTAINER -------------- */
  416. .theme-container {
  417. width: 100%;
  418. max-width: var(--themeContainerSize);
  419. display: grid;
  420. grid-template-columns: calc(26.8rem + var(--postsSidebarPadding) + var(--postsSidebarPadding) + var(--bordersSize)) auto;
  421. grid-template-rows:1fr;
  422. grid-template-areas:
  423. "sidebar posts";
  424. gap: var(--sidebarPostsSpacingGap);
  425. margin: 5rem auto;
  426. justify-content: var(--themeContentPosition);
  427.  
  428. {block:ifRightSidebarPosition}
  429. grid-template-columns: auto 27rem;
  430. grid-template-areas:
  431. "posts sidebar";
  432. {/block:ifRightSidebarPosition}
  433. }
  434.  
  435.  
  436.  
  437.  
  438. /* -------------- SIDEBAR -------------- */
  439. .sidebar-container {
  440. width: calc(26.8rem + var(--postsSidebarPadding) + var(--postsSidebarPadding) + var(--bordersSize));
  441. height: 100vh;
  442. display: flex;
  443. align-items: var(--sidebarContentPosition);
  444. margin: 0 0 0 var(--sidebarPostsSpacingBetween);
  445. {block:ifRightSidebarPosition}
  446. margin: 0 0 0 0;
  447. {/block:ifRightSidebarPosition}
  448. grid-area: sidebar;
  449. }
  450.  
  451.  
  452. .sidebar-content_wrapper {
  453. position: fixed;
  454. width: 26.8rem;
  455. background-color:var(--postsBackgroundColor);
  456. padding: var(--postsSidebarPadding);
  457.  
  458. {block:ifShowBorders}
  459. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  460. {/block:ifShowBorders}
  461.  
  462. {block:ifShowBoxShadow}
  463. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  464. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  465. {/block:ifShowBoxShadow}
  466. }
  467.  
  468. .sidebar-title {
  469. margin: 0.5rem 0 1rem;
  470. font-family:var(--postsTitleFontFamily);
  471. font-style:var(--postsTitlesFontStyle);
  472. font-weight:var(--postsTitlesFontWeight);
  473. letter-spacing: var(--postsTitlesFontLetterSpacing);
  474. word-spacing: var(--postsTitlesFontWordSpacing);
  475. color:var(--bodyTextColor);
  476. text-transform:var(--postsTitlesTextTransform);
  477. font-size:var(--postsTitlesFontSize);
  478. text-align:var(--postsTitlesTextPosition);
  479. line-height:var(--postsTitlesLineHeight);
  480. }
  481.  
  482. .sidebar-navigation {
  483. font-size:var(--sidebarLinkFontSize);
  484. font-style:var(--sidebarLinkFontStyle);
  485. font-weight:var(--sidebarLinkFontWeight);
  486. letter-spacing: var(--sidebarLinkFontLetterSpacing);
  487. line-height: var(--sidebarLinkLineHeight);
  488. text-transform:var(--sidebarLinkTextTransform);
  489. text-align:var(--sidebarLinkTextPosition);
  490. }
  491.  
  492. .sidebar-description, .sidebar-navigation {
  493. margin: 1rem 0;
  494. }
  495.  
  496. .sidebar-navigation {
  497. ul {
  498. display:flex;
  499. align-items: center;
  500. width:100%;
  501. gap: 0 0.8rem;
  502. flex-wrap: wrap;
  503.  
  504. li a {
  505. color: var(--sidebarLinkColor);
  506. }
  507. }
  508. }
  509.  
  510. .sidebar-search {
  511. width: 100%;
  512. box-sizing: border-box;
  513. margin: 0.5rem 0;
  514. padding: 0 1rem 0 0;
  515. flex: 1;
  516.  
  517. input {
  518. width: 100%;
  519. background-color: inherit;
  520. color: inherit;
  521. border: none;
  522.  
  523. &:placeholder {
  524. font-size: inherit;
  525. font-style: inherit;
  526. font-weight: inherit;
  527. letter-spacing: inherit;
  528. text-transform: inherit;
  529. color: inherit;
  530. }
  531.  
  532. &:focus {
  533. border:none;
  534. outline:none;
  535. color: inherit;
  536. }
  537.  
  538. }
  539. }
  540.  
  541.  
  542.  
  543.  
  544. /* -------------- POSTS -------------- */
  545. .posts-container {
  546. grid-area: posts;
  547. display: flex;
  548. align-items: center;
  549. flex-direction: column;
  550. }
  551.  
  552. .posts-wrapper {
  553. padding: var(--postsSidebarPadding);
  554.  
  555. {block:ifShowBorders}
  556. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  557. {/block:ifShowBorders}
  558.  
  559. {block:ifShowBoxShadow}
  560. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  561. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  562. {/block:ifShowBoxShadow}
  563.  
  564. &:not(:last-of-type) {
  565. margin-bottom: var(--postsBetweenMargin);
  566. text-align:var(--postsTextPosition);
  567. }
  568.  
  569. }
  570.  
  571. .post {
  572. background-color:var(--postsBackgroundColor);
  573. width: calc(var(--postWidth));
  574. height: auto;
  575.  
  576. &.date {
  577. margin-top: 1rem;
  578. }
  579.  
  580. &.tags {
  581. display: inline-block;
  582.  
  583. a {
  584. color:var(--bodyLinkColor);
  585.  
  586. &:not(:last-child) {
  587. margin-right: 1rem;
  588. }
  589. }
  590. }
  591. }
  592.  
  593.  
  594.  
  595.  
  596. /* RESOURCES: npf posts
  597. - by: https://github.com/npf-images-v3/npf-images-v3.github.io
  598. */
  599. .npf_row {
  600. width: var(--postWidth);
  601. /*margin-left:0!important;*/
  602. /*margin-right:0!important;*/
  603. display:flex!important;
  604. align-items:stretch!important;
  605. gap: {select:Photoset Gutter}!important;
  606. };
  607.  
  608. .npf_row {
  609. margin: 0!important;
  610. }
  611.  
  612. .npf_col {
  613. padding-left: 0!important;
  614. padding-right: 0!important;
  615. }
  616.  
  617. [post-type="text"] .npf_col img {
  618. height:100%!important;
  619. }
  620.  
  621. .tmblr-full {
  622. margin:0!important;
  623. padding-bottom:0!important;
  624. }
  625.  
  626.  
  627. .post {
  628. .reblog-list {
  629. .reblog-header {
  630. margin-bottom: 0.5rem;
  631.  
  632. &:not(:first-child) {
  633. margin-top: 1rem;
  634. }
  635. }
  636.  
  637. .reblog-body {
  638. display: flex;
  639. flex-direction: column;
  640. gap: {select:Photoset Gutter};
  641.  
  642. .npf_row {
  643. margin: 0!important;
  644. }
  645.  
  646. .npf_col {
  647. padding-left: 0!important;
  648. padding-right: 0!important;
  649. }
  650. }
  651. }
  652. }
  653.  
  654. .post .reblog-list .reblog-body img {
  655. display: block;
  656. height: 100%;
  657. /*width: 100%; TODO: AFETA POSTS GIFS RP EXEMPLO*/
  658. -o-object-fit: cover;
  659. object-fit: cover;
  660. }
  661.  
  662.  
  663.  
  664.  
  665. /* RESOURCES: photosets.css (html/css/js)
  666. - by: annasthms.github.io/photosets
  667. */
  668. [photoset-layout] {
  669. grid-gap: {select:Photoset Gutter};
  670. }
  671.  
  672. [photoset-layout] img {
  673. display: block;
  674. height: 100%;
  675. width: 100%;
  676. -o-object-fit: cover;
  677. object-fit: cover;
  678. }
  679.  
  680. .photoset-grid {
  681. max-width: 100%;
  682. width: var(--postWidth);
  683. grid-gap: {select:Photoset Gutter};
  684. }
  685.  
  686. .photoset-grid div {
  687. cursor: pointer;
  688. }
  689.  
  690.  
  691.  
  692.  
  693. /* RESOURCES: like text
  694. - by: shythemes.tumblr.com/post/154249052918
  695. */
  696. .post-date_like {
  697. position:relative;
  698. display:inline-block;
  699. height:1em;
  700. /*line-height:1.5em;*/
  701. padding: 0 1px;
  702. }
  703.  
  704. .post-date_like .like_button iframe {
  705. position:absolute;
  706. top:0;
  707. left:0;
  708. bottom:0;
  709. right:0;
  710. z-index:2;
  711. opacity:0;
  712. visibility: hidden;
  713. }
  714.  
  715. .post-date_like .liked + .post-date_time-likeb {
  716. color: var(--likedLinkColor);
  717. font-weight:var(--boldFontWeight);
  718. }
  719.  
  720. .post-date_like .liked + .post-date_time-likeb:after {
  721. content:'d';
  722. }
  723.  
  724. .post-date_like a:hover, .toggle-tags:hover {
  725. color:var(--bodyLinkHoverColor);
  726. transition:var(--transitions);
  727. }
  728.  
  729.  
  730. </style>
  731. </head>
  732.  
  733. <body>
  734. <div class="theme-container">
  735. <aside class="sidebar-container">
  736. <div class="sidebar-content_wrapper">
  737. {block:ifSidebarImage}
  738. <div class="sidebar-image">
  739. <img src="https://static.tumblr.com/0siu224/Mevsp6abl/a__72_.gif" />
  740. </div>
  741. {/block:ifSidebarImage}
  742.  
  743. {block:ifSidebarTitle}
  744. <div class="sidebar-title">
  745. <a href="{text:Home URL}" title="{text:Home Text}">
  746. {Title}
  747. </a>
  748. </div>
  749. {/block:ifSidebarTitle}
  750.  
  751. <nav class="sidebar-navigation">
  752. <ul>
  753. <li>
  754. <a href="{text:Home URL}">
  755. {text:Home Text}
  756. </a>
  757. </li>
  758.  
  759. <li>
  760. <a href="{text:Ask URL}">
  761. {text:Ask Text}
  762. </a>
  763. </li>
  764. {block:ifSidebarLink1}
  765. <li>
  766. <a href="{text:Sidebar Link 1 URL}">
  767. {text:Sidebar Link 1 Text}
  768. </a>
  769. </li>
  770. {/block:ifSidebarLink1}
  771.  
  772. {block:ifSidebarLink2}
  773. <li>
  774. <a href="{text:Sidebar Link 2 URL}">
  775. {text:Sidebar Link 2 Text}
  776. </a>
  777. </li>
  778. {/block:ifSidebarLink2}
  779.  
  780. {block:ifSidebarLink3}
  781. <li>
  782. <a href="{text:Sidebar Link 3 URL}">
  783. {text:Sidebar Link 3 Text}
  784. </a>
  785. </li>
  786. {/block:ifSidebarLink3}
  787.  
  788. {block:ifSidebarLink4}
  789. <li>
  790. <a href="{text:Sidebar Link 4 URL}">
  791. {text:Sidebar Link 4 Text}
  792. </a>
  793. </li>
  794. {/block:ifSidebarLink4}
  795. </ul>
  796. </nav>
  797.  
  798. {block:ifSidebarDescription}
  799. <div class="sidebar-description">
  800. <strong>luciane. 30. she/her.</strong> i don't come here often these days cause i'm in a forever semi-hiatus, but enjoy this mess.
  801. </div>
  802. {/block:ifSidebarDescription}
  803.  
  804. <div class="sidebar-pagination">
  805. {block:PreviousPage}<a href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
  806. {block:NextPage}<a href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
  807. </div>
  808.  
  809. <!--<div class="sidebar-search-input">-->
  810. <!-- <form action="/search" method="get" id="search" class="search sidebar-search">-->
  811. <!-- <input type="text" name="input-search" value="{SearchQuery}" placeholder="{lang:Search}" />-->
  812. <!-- </form>-->
  813. <!--</div>-->
  814. </div>
  815. </aside>
  816.  
  817. <main class="posts-container">
  818. <section class="search-results">
  819. {block:SearchPage}
  820. <div class="search-results_wrapper">
  821. {block:SearchResults}
  822. <p class="search-results_item">{lang:Search results for SearchQuery 2}</p>
  823. {/block:SearchResults}
  824.  
  825. {block:NoSearchResults}
  826. <p class="search-results_item">{lang:Sorry no results for SearchQuery 2}</p>
  827. {/block:NoSearchResults}
  828. </div>
  829. {/block:SearchPage}
  830.  
  831. {block:TagPage}
  832. <div class="search-results_wrapper">
  833. <p class="search-results_item">{lang:Showing TagResultCount posts tagged Tag 2}</p>
  834. </div>
  835. {/block:TagPage}
  836. </section>
  837.  
  838. {block:posts}
  839. <section class="posts-wrapper" id="{PostID}" post-type="{PostType}">
  840.  
  841. <!--NPF & Legacy Text Posts-->
  842. {block:Text}
  843. <article class="post text">
  844. {block:Title}
  845. <h2><a href="{Permalink}">{Title}</a></h2>
  846. {/block:Title}
  847. <!--Original Post-->
  848. {block:NotReblog}
  849. {Body}
  850. {/block:NotReblog}
  851. <!--Post is a reblog-->
  852. {block:RebloggedFrom}
  853. <div class="reblog-list">
  854. {block:Reblogs}
  855. <div class="reblog-header">
  856. {block:IsActive}
  857. <a href="{Permalink}">{Username}</a>
  858. {/block:IsActive}
  859. {block:IsDeactivated}
  860. <span>{Username}</span>
  861. {/block:IsDeactivated}
  862. </div>
  863. <div class="reblog-body">{Body}</div>
  864. {/block:Reblogs}
  865. </div>
  866. {/block:RebloggedFrom}
  867. </article>
  868. {/block:Text}
  869.  
  870. <!--All Answer posts including NPF-->
  871. {block:Answer}
  872. <article class="post answer">
  873. <p><strong>{Asker}</strong> asked:</p>
  874. {Question}
  875. {block:Answerer}
  876. {Answer}
  877. {/block:Answerer}
  878. <!--Original Post-->
  879. {block:NotReblog}
  880. {Replies}
  881. {/block:NotReblog}
  882. <!--Post is a reblog-->
  883. {block:RebloggedFrom}
  884. <div class="reblog-list">
  885. {block:Reblogs}
  886. <div class="reblog-header">
  887. {block:IsActive}
  888. <a href="{Permalink}">{Username}</a>
  889. {/block:IsActive}
  890. {block:IsDeactivated}
  891. <span>{Username}</span>
  892. {/block:IsDeactivated}
  893. </div>
  894. <div class="reblog-body">{Body}</div>
  895. {/block:Reblogs}
  896. </div>
  897. {/block:RebloggedFrom}
  898. </article>
  899. {/block:Answer}
  900.  
  901. <!--Legacy Photo Posts-->
  902. {block:Photo}
  903. <article class="post photo">
  904. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  905. <!--Original Post-->
  906. {block:NotReblog}
  907. {Caption}
  908. {/block:NotReblog}
  909. <!--Post is a reblog-->
  910. {block:RebloggedFrom}
  911. <div class="reblog-list">
  912. {block:Reblogs}
  913. <div class="reblog-header">
  914. {block:IsActive}
  915. <a href="{Permalink}">{Username}</a>
  916. {/block:IsActive}
  917. {block:IsDeactivated}
  918. <span>{Username}</span>
  919. {/block:IsDeactivated}
  920. </div>
  921. <div class="reblog-body">{Body}</div>
  922. {/block:Reblogs}
  923. </div>
  924. {/block:RebloggedFrom}
  925. </article>
  926. {/block:Photo}
  927.  
  928. <!-- RESOURCES: photosets.css (html/css/js)
  929. - by: annasthms.github.io/photosets
  930. -->
  931. {block:Photoset}
  932. <article class="post photoset">
  933. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  934. <!--Original Post-->
  935. {block:NotReblog}
  936. {Caption}
  937. {/block:NotReblog}
  938. <!--Post is a reblog-->
  939. {block:RebloggedFrom}
  940. <div class="reblog-header">
  941. {block:Reblogs}
  942. <div class="reblog-header">
  943. {block:IsActive}
  944. <a href="{Permalink}">{Username}</a>
  945. {/block:IsActive}
  946. {block:IsDeactivated}
  947. <span>{Username}</span>
  948. {/block:IsDeactivated}
  949. </div>
  950. <div class="reblog-body">{Body}</div>
  951. {/block:Reblogs}
  952. </div>
  953. {/block:RebloggedFrom}
  954. </article>
  955. {/block:Photoset}
  956.  
  957. <!--Legacy Quote Posts-->
  958. {block:Quote}
  959. <article class="post quote">
  960. "{Quote}"
  961. {block:Source}
  962. <div class="source">{Source}</div>
  963. {/block:Source}
  964. </article>
  965. {/block:Quote}
  966.  
  967. <!--Legacy Link Posts-->
  968. {block:Link}
  969. <article class="post link">
  970. <a href="{URL}" class="link" {Target}>{Name}</a>
  971. <!--Original Post-->
  972. {block:NotReblog}
  973. {Description}
  974. {/block:NotReblog}
  975. <!--Post is a reblog-->
  976. {block:RebloggedFrom}
  977. <div class="reblog-list">
  978. {block:Reblogs}
  979. <div class="reblog-header">
  980. {block:IsActive}
  981. <a href="{Permalink}">{Username}</a>
  982. {/block:IsActive}
  983. {block:IsDeactivated}
  984. <span>{Username}</span>
  985. {/block:IsDeactivated}
  986. </div>
  987. <div class="reblog-body">{Body}</div>
  988. {/block:Reblogs}
  989. </div>
  990. {/block:RebloggedFrom}
  991. </article>
  992. {/block:Link}
  993.  
  994. <!--Legacy Chat Posts-->
  995. {block:Chat}
  996. <article class="post chat">
  997. {block:Title}
  998. <h3><a href="{Permalink}">{Title}</a></h3>
  999. {/block:Title}
  1000.  
  1001. <ul class="chat">
  1002. {block:Lines}
  1003. <li class="{Alt} user_{UserNumber}">
  1004. {block:Label}
  1005. <span class="label">{Label}</span>
  1006. {/block:Label}{Line}
  1007. </li>
  1008. {/block:Lines}
  1009. </ul>
  1010. </article>
  1011. {/block:Chat}
  1012.  
  1013. <!--Legacy Video Posts-->
  1014. {block:Video}
  1015. <article class="post video">
  1016. {Video-700}
  1017. <!--Original Post-->
  1018. {block:NotReblog}
  1019. {Description}
  1020. {/block:NotReblog}
  1021. <!--Post is a reblog-->
  1022. {block:RebloggedFrom}
  1023. <div class="reblog-list">
  1024. {block:Reblogs}
  1025. <div class="reblog-header">
  1026. {block:IsActive}
  1027. <a href="{Permalink}">{Username}</a>
  1028. {/block:IsActive}
  1029. {block:IsDeactivated}
  1030. span>{Username}</span>
  1031. {/block:IsDeactivated}
  1032. </div>
  1033. <div class="reblog-body">{Body}</div>
  1034. {/block:Reblogs}
  1035. </div>
  1036. {/block:RebloggedFrom}
  1037. </article>
  1038. {/block:Video}
  1039.  
  1040. <!--Legacy Audio Posts-->
  1041. {block:Audio}
  1042. <article class="post audio">
  1043. {AudioEmbed}
  1044. <!--Original Post-->
  1045. {block:NotReblog}
  1046. {Description}
  1047. {/block:NotReblog}
  1048. <!--Post is a reblog-->
  1049. {block:RebloggedFrom}
  1050. <div class="reblog-list">
  1051. {block:Reblogs}
  1052. <div class="reblog-header">
  1053. {block:IsActive}
  1054. <a href="{Permalink}">{Username}</a>
  1055. {/block:IsActive}
  1056. {block:IsDeactivated}
  1057. <span>{Username}</span>
  1058. {/block:IsDeactivated}
  1059. </div>
  1060. <div class="reblog-body">{Body}</div>
  1061. {/block:Reblogs}
  1062. </div>
  1063. {/block:RebloggedFrom}
  1064. </article>
  1065. {/block:Audio}
  1066.  
  1067. {block:Date}
  1068. <article class="post date">
  1069. <a href="{Permalink}" class="date-time" title="{timeago}">{timeago}</a>
  1070. {block:NoteCount}
  1071. {NoteCountWithLabel}
  1072. {/block:NoteCount}
  1073. <a class="post-date_like" href="#" title="Like this post">
  1074. {LikeButton}<span class="post-date_time-likeb">like</span>
  1075. </a>
  1076. <a target="_blank" href="{ReblogURL}" target="_blank" title="Reblog">
  1077. reblog
  1078. </a>
  1079.  
  1080. {block:HasTags}
  1081. <ul class="post tags">
  1082. {block:Tags}
  1083. <a href="{TagURL}">{Tag}</a>
  1084. {/block:Tags}
  1085. </ul>
  1086. {/block:HasTags}
  1087. </article>
  1088. {/block:Date}
  1089.  
  1090. {block:PostNotes}
  1091. <article class="post notes">
  1092. {PostNotes}
  1093. </article>
  1094. {/block:PostNotes}
  1095. </section>
  1096. {/block:Posts}
  1097. </div>
  1098. </div>
  1099.  
  1100. <script>
  1101. // RESOURCES: photosets.css (html/css/js)
  1102. // - by: annasthms.github.io/photosets
  1103. function gatherData(images, arr) {
  1104. for (let i = 0; i < images.length; i++) {
  1105. let currentData = {
  1106. "width": images[i].getAttribute('data-width'),
  1107. "height": images[i].getAttribute('data-height'),
  1108. "low_res": images[i].getAttribute('data-lowres'),
  1109. "high_res": images[i].getAttribute('data-highres')
  1110. };
  1111. arr.push(currentData);
  1112. }
  1113. }
  1114. function getIndex(elem) {
  1115. let i = 0;
  1116. while( (elem = elem.previousElementSibling) != null ) i++;
  1117. return i;
  1118. }
  1119. function lightbox(elem) {
  1120. let currentPhotoset = elem.parentNode;
  1121. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1122. let data = [];
  1123. gatherData(photosetPhotos, data);
  1124. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1125. }
  1126.  
  1127. document.addEventListener('DOMContentLoaded', function() {
  1128. }
  1129. </script>
  1130. </body>
  1131. </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!