API tools faq
paste
sexycullen

finish theme update and sidebar icons / posts in blocks

sexycullen
Apr 14th, 2021
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.70 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. // {Thm:base}
  3.  
  4. Base code
  5.  
  6. by egg.design //
  7.  
  8. + basic html and css knowledge is required to customize this theme
  9. + you are free to add your own credts, but please mention this base code with the release of your theme
  10. + instructions and explanations are throughout the code. I will be going under the assumption that you are new to HTML and CSS, so feel free to skip ahead if you need to
  11.  
  12. Version 1.1
  13.  
  14. - simplified theme and added more explanations
  15.  
  16. -->
  17.  
  18.  
  19. <!DOCTYPE html> <!-- this line declares that this is an html5 document -->
  20. <html> <!-- this line actually starts our html document -->
  21. <head> <!-- head tag is where all of our extra info about our document goes. this includes the favicon, title, css, scripts, and meta tags -->
  22.  
  23.  
  24. <link rel="shortcut icon" href="{Favicon}" />
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  26. <title>{Title}</title>
  27. {block:Description}
  28. <meta name="description" content="{MetaDescription}" />
  29. {/block:Description}
  30. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  31.  
  32. <!-- stylesheets -->
  33. <link href="https://static.tumblr.com/0siu224/1Eaqd80d8/normalize.css" rel="stylesheet"> <!-- reset html code -->
  34. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet"> <!-- photosets -->
  35. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"> <!-- custom icons -->
  36. <script src="https://unpkg.com/feather-icons"></script> <!-- custom icons -->
  37.  
  38. <!-- custom fonts -->
  39. <link href="https://fonts.googleapis.com/css2?family={text:Body Font Family}:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
  40.  
  41. <!-- image options -->
  42. <meta name="image:background" content="" />
  43. <meta name="image:Sidebar Header" content="" />
  44. <meta name="image:Sidebar Icon" content="" />
  45. <meta name="image:Sidebar Image" content="" />
  46.  
  47. <!-- color options -->
  48. <meta name="color:Background Theme Color" content="#fdfdfd" />
  49. <meta name="color:Body Text Color" content="#222" />
  50. <meta name="color:Body Link Color" content="#ca0d0d" />
  51. <meta name="color:Body Link Hover Color" content="#fe881c" />
  52. <meta name="color:Bold Color" content="#6272a4">
  53. <meta name="color:Italic Color" content="#9295aa">
  54. <meta name="color:Liked Text Color" content="#d76aa8">
  55. <meta name="color:Hover Text Background Color" content="#da9a9a" />
  56. <meta name="color:Hover Text Color" content="#ffffff" />
  57. <meta name="color:Posts Background Color" content="#ffffff" />
  58. <meta name="color:Borders Color" content="#ededed" />
  59. <meta name="color:Blocks Background Color" content="#202020" />
  60. <meta name="color:Blocks Text Color" content="#ededed" />
  61. <meta name="color:sidebar header" content="#facade" />
  62. <meta name="color:Scrollbar Color" content="#f38830" />
  63. <meta name="color:Tumblr Controls Icon Color" content="#f38830" />
  64.  
  65.  
  66. <!-- text, font style and sizes options -->
  67. <meta name="text:Body Font Family" content="Nunito" />
  68.  
  69. <meta name="select:Body Font Size" content="13px" />
  70. <meta name="select:Body Font Size" content="8px" />
  71. <meta name="select:Body Font Size" content="9px" />
  72. <meta name="select:Body Font Size" content="10px" />
  73. <meta name="select:Body Font Size" content="11px" />
  74. <meta name="select:Body Font Size" content="12px" />
  75. <meta name="select:Body Font Size" content="14px" />
  76. <meta name="select:Body Font Size" content="16px" />
  77. <meta name="select:Body Font Size" content="18px" />
  78.  
  79. <meta name="select:Bold Font Weight" content="bold" />
  80. <meta name="select:Bold Font Weight" content="normal" />
  81.  
  82. <meta name="select:Posts Text Position" content="left" title="left">
  83. <meta name="select:Posts Text Position" content="center" title="center">
  84. <meta name="select:Posts Text Position" content="justify" title="justify">
  85.  
  86.  
  87. <meta name="select:Titles Font Size" content="18px" />
  88. <meta name="select:Titles Font Size" content="10px" />
  89. <meta name="select:Titles Font Size" content="11px" />
  90. <meta name="select:Titles Font Size" content="12px" />
  91. <meta name="select:Titles Font Size" content="13px" />
  92. <meta name="select:Titles Font Size" content="14px" />
  93. <meta name="select:Titles Font Size" content="16px" />
  94.  
  95. <meta name="select:Titles Font Weight" content="bold" title="bold">
  96. <meta name="select:Titles Font Weight" content="normal" title="normal">
  97.  
  98. <meta name="select:Titles Font Style" content="normal" title="normal">
  99. <meta name="select:Titles Font Style" content="italic" title="italic">
  100.  
  101. <meta name="select:Titles Text Transform" content="none" title="none">
  102. <meta name="select:Titles Text Transform" content="uppercase" title="uppercase">
  103. <meta name="select:Titles Text Transform" content="lowercase" title="lowercase">
  104. <meta name="select:Titles Text Transform" content="capitalize" title="capitalize">
  105.  
  106. <meta name="select:Titles Text Position" content="left" title="left">
  107. <meta name="select:Titles Text Position" content="center" title="center">
  108. <meta name="select:Titles Text Position" content="justify" title="justify">
  109. <meta name="select:Titles Text Position" content="right" title="right">
  110.  
  111. <!-- sidebar icons -->
  112. <meta name="select:Sidebar Icons Size" content="14px" />
  113. <meta name="select:Sidebar Icons Size" content="8px" />
  114. <meta name="select:Sidebar Icons Size" content="10px" />
  115. <meta name="select:Sidebar Icons Size" content="11px" />
  116. <meta name="select:Sidebar Icons Size" content="12px" />
  117. <meta name="select:Sidebar Icons Size" content="13px" />
  118. <meta name="select:Sidebar Icons Size" content="15px" />
  119. <meta name="select:Sidebar Icons Size" content="16px" />
  120.  
  121. <meta name="select:Borders Size" content="1px" />
  122. <meta name="select:Borders Size" content="0px" />
  123. <meta name="select:Borders Size" content="2px" />
  124. <meta name="select:Borders Size" content="3px" />
  125.  
  126. <meta name="select:Borders Style" content="solid" />
  127. <meta name="select:Borders Style" content="dotted" />
  128. <meta name="select:Borders Style" content="dashed" />
  129. <meta name="select:Borders Style" content="double" />
  130. <meta name="select:Borders Style" content="ridge" />
  131.  
  132.  
  133. <!-- booleans -->
  134. <meta name="if:full background" content="" />
  135. <meta name="if:grid" content="" />
  136.  
  137. <meta name="if:Posts size 540px" content="1"/>
  138. <meta name="if:Posts size 500px" content="0"/>
  139. <meta name="if:Posts size 400px" content="0"/>
  140.  
  141. <meta name="if:Updates" content="1" />
  142. <meta name="if:Use Header Icon Sidebar" content="1" />
  143. <meta name="if:Use Sidebar Icon" content="1" />
  144. <meta name="if:Images Black and White" content="0" />
  145. <meta name="if:Images Opacity" content="0" />
  146. <meta name="if:Tumblr Captions" content="0"/>
  147. <meta name="if:Caption Avatar" content="0" />
  148. <meta name="if:Custom Caption Icon" content="1" />
  149. <meta name="if:Box Shadow" content="0" />
  150. <meta name="if:Posts and Sidebar Borders" content="1" />
  151. <meta name="if:Custom Controls" content="1"/>
  152.  
  153. <meta name="if:Sidebar Link 1" content="1" />
  154. <meta name="if:Sidebar Link 2" content="1" />
  155. <meta name="if:Sidebar Link 3" content="1" />
  156. <meta name="if:Sidebar Link 4" content="1" />
  157.  
  158. <!-- sidebar links -->
  159. <meta name="text:Index URL" content="/" />
  160. <meta name="text:Index Text" content="Index" />
  161. <meta name="text:Index Icon" content="home" />
  162. <meta name="text:Ask URL" content="/ask" />
  163. <meta name="text:Ask Text" content="Ask" />
  164. <meta name="text:Ask Icon" content="mail" />
  165.  
  166. <meta name="text:Sidebar Link 1 URL" content="/" />
  167. <meta name="text:Sidebar Link 1 Text" content="Link 1" />
  168. <meta name="text:Sidebar Link 1 Icon" content="menu" />
  169. <meta name="text:Sidebar Link 2 URL" content="/" />
  170. <meta name="text:Sidebar Link 2 Text" content="Link 2" />
  171. <meta name="text:Sidebar Link 2 Icon" content="edit" />
  172. <meta name="text:Sidebar Link 3 URL" content="/" />
  173. <meta name="text:Sidebar Link 3 Text" content="Link 3" />
  174. <meta name="text:Sidebar Link 3 Icon" content="user" />
  175. <meta name="text:Sidebar Link 4 URL" content="/" />
  176. <meta name="text:Sidebar Link 4 Text" content="Link 4" />
  177. <meta name="text:Sidebar Link 4 Icon" content="file-text" />
  178.  
  179. <meta name="text:Box Shadow Size" content="0px 4px 8px" />
  180. <meta name="text:Box Shadow Color" content="0, 0, 0, 0.1" />
  181.  
  182.  
  183. <style>
  184.  
  185. :root {
  186.  
  187. /* colors */
  188. --backgroundThemeColor: {color:Background Theme Color};
  189. --bodyTextColor: {color:Body Text Color};
  190. --bodyLinkColor: {color:Body Link Color};
  191. --bodyLinkHoverColor: {color:Body Link Hover Color};
  192. --boldColor: {color:Bold Color};
  193. --italicColor: {color:Italic Color};
  194. --hoverTextBackgroundColor: {color:Hover Text Background Color};
  195. --hoverTextColor: {color:Hover Text Color};
  196. --likedTextColor: {color:Liked Text Color};
  197. --scrollbarColor: {color:Scrollbar Color};
  198. --bordersColor: {color:Borders Color};
  199. --postsBackgroundColor: {color:Posts Background Color};
  200. --blocksBackgroundColor: {color:Blocks Background Color};
  201. --blocksTextColor: {color:Blocks Text Color};
  202. --tumblrControlsIconColor: {color:Tumblr Controls Icon Color};
  203.  
  204.  
  205. /* fonts, sizes, styles */
  206. --bodyFontFamily: {text:Body Font Family};
  207.  
  208.  
  209. --bodyFontSize: {select:Body Font Size};
  210. --titlesFontSize: {select:Titles Font Size};
  211. --sidebarIconsSize: {select:Sidebar Icons Size};
  212.  
  213. --boldFontWeight: {select:Bold Font Weight};
  214. --titlesFontWeight: {select:Titles Font Weight};
  215. --bodyLineHeight: calc(var(--bodyFontSize) * 1.5);
  216. --titlesLineHeight: calc(var(--titlesFontSize) * 1.2);
  217.  
  218. --titlesTextTransform: {select:Titles Text Transform};
  219. --titlesFontStyle: {select:Titles Font Style};
  220.  
  221. --postsTextPosition: {select:Posts Text Position};
  222. --titlesTextPosition: {select:Titles Text Position};
  223.  
  224.  
  225. /* other styles */
  226. --bordersStyle: {select:Borders Style};
  227. --bordersSize: {select:Borders Size};
  228. --boxShadowSize:{text:Box Shadow Size};
  229. --boxShadowColor:{text:Box Shadow Color};
  230. --paddings: 10px;
  231. --transitions: all .3s ease;
  232. }
  233.  
  234.  
  235. /* tumblr controls */
  236.  
  237. {block:ifCustomControls}
  238. iframe.tmblr-iframe {
  239. z-index:99999999999999!important;
  240. top: 15px!important;
  241. right: 15px!important;
  242. opacity:0;
  243. padding-right:38px;
  244. -webkit-transform:scale(0.75);
  245. -ms-transform:scale(0.75);
  246. transform:scale(0.75);
  247. -webkit-transform-origin:100% 0;
  248. -ms-transform-origin:100% 0;
  249. transform-origin:100% 0;
  250. cursor: pointer;
  251. }
  252.  
  253. iframe.tmblr-iframe:hover {
  254. opacity:1!important;
  255. }
  256.  
  257. .hcontrols {
  258. position:fixed;
  259. top:23px;
  260. right:15px;
  261. z-index:999999999;
  262. cursor: pointer;
  263. }
  264.  
  265. .hcontrols .feather {
  266. width:25px;
  267. height:25px;
  268. stroke-width: 2;
  269. stroke:var(--tumblrControlsIconColor);
  270. cursor: pointer;
  271. }
  272.  
  273. .hcontrols .feather:hover {
  274. stroke: var(--bodyLinkHoverColor);
  275. }
  276. {/block:ifCustomControls}
  277.  
  278.  
  279. /* scrollbar */
  280.  
  281. ::-webkit-scrollbar {
  282. width:7px;
  283. height:7px;
  284. }
  285. ::-webkit-scrollbar {
  286. background-color:var(--backgroundThemeColor);
  287. }
  288. ::-webkit-scrollbar-track {
  289. border:8px solid var(--backgroundThemeColor);
  290. background-color:var(--backgroundThemeColor);
  291. }
  292. ::-webkit-scrollbar-thumb {
  293. border:2.1px solid var(--backgroundThemeColor);
  294. background-color:var(--scrollbarColor);
  295. border-radius:10px;
  296. min-height:24px;
  297. min-width:24px;
  298. }
  299.  
  300.  
  301. html {
  302. -webkit-box-sizing: border-box;
  303. box-sizing: border-box;
  304. }
  305.  
  306. * {
  307. transition:var(--transitions);
  308. }
  309.  
  310. *::after,
  311. *::before {
  312. box-sizing: inherit;
  313. }
  314.  
  315.  
  316. html,
  317. body {
  318. height: 100vh;
  319. }
  320.  
  321. body {
  322. margin:0;
  323. background:var(--backgroundThemeColor) url({image:background});
  324. font-size:var(--bodyFontSize);
  325. line-height:var(--bodyLineHeight);
  326. {block:iffullbackground}
  327. background-size:cover;
  328. {/block:iffullbackground}
  329. /* fixed attachments help the repeating background from scrolling with the page */
  330. background-attachment:fixed;
  331. font-family:var(--bodyFontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  332. word-wrap:break-word;
  333. color: var(--bodyTextColor);
  334. }
  335.  
  336.  
  337. a {
  338. text-decoration:none;
  339. color:var(--bodyLinkColor);
  340. }
  341.  
  342. a:hover {
  343. color:var(--bodyLinkHoverColor);
  344. }
  345.  
  346.  
  347. blockquote {
  348. border-left:2px solid {color:blockquote border};
  349. padding-left:10px;
  350. }
  351.  
  352. p:first-child {
  353. margin-block-start: 0;
  354. }
  355.  
  356. p:last-child {
  357. margin-block-end: 0;
  358. }
  359.  
  360. small, sup, sub {
  361. font-size:var(--bodyFontSize);
  362. }
  363.  
  364. pre {
  365. word-wrap:break-word!Important;
  366. white-space: pre-wrap;
  367. }
  368.  
  369. h1, h2 {
  370. margin: 15px;
  371. font-style:var(--titlesFontStyle);
  372. font-weight:var(--titlesFontWeight);
  373. color:var(--boldColor);
  374. text-transform:var(--titlesTextTransform);
  375. font-size:var(--titlesFontSize);
  376. text-align:var(--titlesTextPosition);
  377. line-height:var(--titlesLineHeight);
  378. }
  379.  
  380. bold, b, strong {
  381. color:var(--boldColor);
  382. font-weight:var(--boldFontWeight);
  383. }
  384.  
  385. italic, i, em {
  386. color:var(--italicColor);
  387. }
  388.  
  389. ::-moz-selection {
  390. background-color: var(--hoverTextBackgroundColor);
  391. color:var(--hoverTextColor);
  392. }
  393.  
  394. ::selection {
  395. background-color: var(--hoverTextBackgroundColor);
  396. color:var(--hoverTextColor);
  397. }
  398.  
  399. /* tooltips */
  400. .tippy-tooltip.custom-theme {
  401. text-align:center;
  402. font-weight:var(--boldFontWeight);
  403. color:var(--hoverTextColor);
  404. background-color:var(--hoverTextBackgroundColor);
  405. {block:ifBoxShadow}
  406. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  407. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  408. {/block:ifBoxShadow}
  409. }
  410.  
  411.  
  412.  
  413. /* custom icons */
  414.  
  415. .feather {
  416. stroke-width: 1.75;
  417. width:var(--bodyFontSize);
  418. height:var(--bodyFontSize);
  419. }
  420.  
  421. .toggle-link .feather:hover,
  422. .navigation ul li .feather:hover {
  423. color: var(--bodyLinkHoverColor);
  424. stroke: var(--bodyLinkHoverColor);
  425. }
  426.  
  427.  
  428.  
  429. /* sidebar */
  430.  
  431. /* updates */
  432. .update {
  433. position:absolute;
  434. width: 65px;
  435. left: -67px;
  436. z-index:1;
  437. }
  438.  
  439. .update-content {
  440. height:100%;
  441. max-width: 320px;
  442. min-width: 67px;
  443. position:fixed;
  444. z-index:11;
  445. background:transparent;
  446. -webkit-box-sizing: border-box;
  447. box-sizing: border-box;
  448. }
  449.  
  450. .update-content a {
  451. margin:0 0 10px;
  452. }
  453.  
  454. .update-content .toggle-link,
  455. .update-content .toggle-link-button {
  456. width: 65px;
  457. display:block;
  458. text-align:center;
  459. }
  460.  
  461.  
  462. .toggle-link .update-icon,
  463. .toggle-link-button .update-icon {
  464. width: var(--sidebarIconsSize);
  465. height: var(--sidebarIconsSize);
  466. padding:0 0 10px;
  467. {block:ifPostsAndSidebarBorders}
  468. padding: 10px;
  469. {/block:ifPostsAndSidebarBorders}
  470. cursor:pointer;
  471. border:none;
  472. text-align:center;
  473. font-weight:bold;
  474. background-color: var(--postsBackgroundColor);
  475. {block:ifPostsAndSidebarBorders}
  476. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  477. {/block:ifPostsAndSidebarBorders}
  478. {block:ifBoxShadow}
  479. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  480. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  481. {/block:ifBoxShadow}
  482. }
  483.  
  484.  
  485. .toggle-link .feather,
  486. .toggle-link .feather .toggle-link-button {
  487. width: var(--sidebarIconsSize);
  488. height: var(--sidebarIconsSize);
  489. stroke: var(--bodyLinkColor);
  490. }
  491.  
  492. .update-content .toggle-content {
  493. display:none;
  494. margin: 0 0 10px;
  495. padding:10px;
  496. max-height: 300px;
  497. overflow-y: auto;
  498. background-color:var(--postsBackgroundColor);
  499. {block:ifPostsAndSidebarBorders}
  500. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  501. {/block:ifPostsAndSidebarBorders}
  502. }
  503.  
  504. .update-content .toggle-content div {
  505. margin: 3px auto;
  506. }
  507.  
  508. .update-content li {
  509. text-align:left;
  510. }
  511.  
  512. .update-content li a {
  513. margin-bottom:2px;
  514. }
  515.  
  516. /* this is the sidebar styling.
  517. for responsive purposes, I used 25% for the main width, and set the maxium width to 300px
  518. */
  519. .sidebar {
  520. position:relative;
  521. width: 350px;
  522. margin-top: 50px;
  523. order: 1;
  524. display: flex;
  525. flex-wrap: wrap;
  526. justify-content: space-around;
  527. }
  528.  
  529. .sidebar-main-content {
  530. padding: var(--paddings);
  531. background:var(--postsBackgroundColor);
  532. {block:ifPostsAndSidebarBorders}
  533. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  534. {/block:ifPostsAndSidebarBorders}
  535. {block:ifBoxShadow}
  536. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  537. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  538. {/block:ifBoxShadow}
  539. }
  540.  
  541. .sidebar-content {
  542. position:fixed;
  543. margin-left: 100px;
  544. width:308px;
  545. margin-top:0px;
  546. overflow:hidden;
  547. }
  548.  
  549. {block:IfNotUseHeaderIconSidebar}
  550. .sidebar img {
  551. width:268px;
  552. height:auto;
  553. padding: 0 0 15px;
  554. object-fit: cover;
  555. display:block;
  556. margin:auto;
  557. }
  558.  
  559. .description {
  560. margin-top:0px;
  561. }
  562. {/block:IfNotUseHeaderIconSidebar}
  563.  
  564.  
  565. {block:IfUseHeaderIconSidebar}
  566. /* if you want a header, this is some basic styling for that.
  567. you can adjust this based on if you want the width to be 100% or if you're fine with it only taking the same amount of space as the posts.
  568. If you want this header to go across the whole page, you need to delete the max-width line.
  569. */
  570.  
  571. header {
  572. position:relative;
  573. width:90%;
  574. left:auto;
  575. max-width:700px;
  576. margin:50px auto 100px auto;
  577. }
  578.  
  579.  
  580. /* this is the avatar image. I used transform to move the image up a bit to recreate the Optica look with the header */
  581. .sidebar img {
  582. width:65px;
  583. height:65px;
  584. object-fit: cover;
  585. display:block;
  586. margin:auto;
  587. transform:translateY(107px);
  588.  
  589. {block:IfNotUseSidebarIcon}
  590. display:none;
  591. {/block:IfNotUseSidebarIcon}
  592. }
  593.  
  594. .sideheader {
  595. background:url('{image:Sidebar Header}') center center;
  596. background-repeat: no-repeat;
  597. background-size:cover;
  598. background-color:{color:sidebar header};
  599. height:150px;
  600. }
  601.  
  602. .description {
  603. margin-top:25px;
  604. {block:IfNotUseSidebarIcon}
  605. margin-top:0px;
  606. {/block:IfNotUseSidebarIcon}
  607. }
  608.  
  609. {block:IfUseHeaderIconSidebar}
  610. /* pagination */
  611. .pagination {
  612. text-align:center;
  613. margin: 20px 0;
  614. }
  615.  
  616. .pagination a {
  617. padding: 7px 10px;
  618. margin: 0 5px;
  619. font-weight:bold;
  620. border: 1px solid transparent;
  621. color:var(--bodyLinkColor);
  622. background-color:var(--postsBackgroundColor);
  623. }
  624.  
  625. .pagination a:hover {
  626. color:var(--bodyTextColor);
  627. background-color:var(--boldColor);
  628. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  629. }
  630.  
  631. .nav-content {
  632. /*background:var(--postsBackgroundColor); */
  633. }
  634.  
  635. .navigation {
  636. width: 100%;
  637. margin: 0;
  638. {/block:ifPostsAndSidebarBorders}
  639. margin: 15px 0 0;
  640. {/block:ifPostsAndSidebarBorders}
  641. }
  642.  
  643. .navigation a {
  644. width:100%;
  645. padding: 10px 0 0;
  646. {block:ifPostsAndSidebarBorders}
  647. padding: 20px 0 0;
  648. {/block:ifPostsAndSidebarBorders}
  649. color: var(--bodyLinkColor);
  650. font-size: var(--sidebarIconsSize);
  651. font-weight: var(--sidebarHoverTextFontWeight);
  652. font-style: var(--sidebarHoverTextFontStyle);
  653. text-transform:var(--sidebarHoverTextTransform);
  654. }
  655.  
  656. .navigation a:hover {
  657. color: var(--bodyLinkHoverColor);
  658. }
  659.  
  660.  
  661. .navigation ul {
  662. width:100%;
  663. text-align:center;
  664. margin: 0;
  665. padding:0;
  666. }
  667.  
  668. .navigation ul li {
  669. display:inline-block;
  670. list-style-type:none;
  671. margin: 0;
  672. padding: 0 5px;
  673. }
  674.  
  675.  
  676. .navigation ul li:before {
  677. content: '';
  678. width: 0px;
  679. height: 0px;
  680. margin:0px;
  681. background-color: none;
  682. display: none;
  683. }
  684.  
  685. .navigation ul li .feather {
  686. width: var(--sidebarIconsSize);
  687. height: var(--sidebarIconsSize);
  688. padding: var(--paddings);
  689. background-color: var(--postsBackgroundColor);
  690. {block:ifPostsAndSidebarBorders}
  691. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  692. {/block:ifPostsAndSidebarBorders}
  693. width: var(--sidebarIconsSize);
  694. height: var(--sidebarIconsSize);
  695. stroke: var(--bodyLinkColor);
  696. {block:ifBoxShadow}
  697. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  698. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  699. {/block:ifBoxShadow}
  700. }
  701.  
  702. .navigation ul li:last-child {
  703. padding-right:0px;
  704. }
  705. .navigation ul li:first-child {
  706. padding-left:0px;
  707. }
  708.  
  709. .container {
  710. width: 90%;
  711. max-width: 1090px;
  712. height: 100vh;
  713. display:flex;
  714. flex-wrap:wrap;
  715. justify-content: space-around;
  716. align-items: flex-start;
  717. border: 0px solid red;
  718. margin: auto;
  719. }
  720.  
  721. .pinned-post a {
  722. font-size:var(--bodyFontSize);
  723. display:inline-block;
  724. padding:6px 8px;
  725. cursor: pointer;
  726. border: 1px solid transparent;
  727. font-weight:var(--boldFontWeight);
  728. color:var(--bodyTextColor);
  729. background-color:var(--boldColor);
  730. {block:ifBoxShadow}
  731. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  732. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  733. {/block:ifBoxShadow}
  734. }
  735.  
  736. .pinned-post a:hover {
  737. color:var(--bodyTextColor);
  738. background-color:var(--postsBackgroundColor);
  739. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  740. }
  741.  
  742.  
  743. .posts-container {
  744. order: 2;
  745. width:auto;
  746. border: 0px dotted #000;
  747. }
  748.  
  749. .posts {
  750. background:var(--postsBackgroundColor);
  751. width: 540px;
  752. margin:100px auto;
  753. padding: var(--paddings);
  754. {block:ifPostsAndSidebarBorders}
  755. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  756. {/block:ifPostsAndSidebarBorders}
  757. {block:ifBoxShadow}
  758. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  759. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  760. {/block:ifBoxShadow}
  761. }
  762.  
  763. .posts:first-child {
  764. margin:50px auto;
  765. }
  766. .posts:last-child {
  767. margin:100px auto 50px;
  768. }
  769.  
  770. .posts img {
  771. max-width:100%;
  772. display:block;
  773. /*margin: auto; */
  774. }
  775.  
  776. .posts b, strong {
  777. font-weight:var(--boldFontWeight);
  778. }
  779.  
  780.  
  781. /* photosets */
  782.  
  783. [photoset-layout] {
  784. display: grid;
  785. grid-template-columns: repeat(6, 1fr);
  786.  
  787. {block:ifPostsSize540px}
  788. grid-gap: 4.5px;
  789. {/block:ifPostsSize540px}
  790. {block:ifPostsSize500px}
  791. grid-gap: 9.5px;
  792. {/block:ifPostsSize500px}
  793. {block:ifPostsSize400px}
  794. grid-gap: 4px;
  795. {/block:ifPostsSize400px}
  796. }
  797.  
  798. [photoset-layout] img {
  799. display: block;
  800. height: 100%;
  801. width: 100%;
  802. -o-object-fit: cover;
  803. object-fit: cover;
  804. }
  805.  
  806. .photoset-grid {
  807. {block:ifPostsSize540px}
  808. width: 540px;
  809. {/block:ifPostsSize540px}
  810. {block:ifPostsSize500px}
  811. width: 500px;
  812. {/block:ifPostsSize500px}
  813. {block:ifPostsSize400px}
  814. width:400px;
  815. {/block:ifPostsSize400px}
  816. }
  817.  
  818. .photoset-grid div {
  819. cursor: pointer;
  820. }
  821.  
  822.  
  823. /* neue post format (npf)
  824. images on posts as photosets
  825. */
  826.  
  827. .post-content
  828. div.npf_row,
  829. .post
  830. div.npf_row,
  831. body
  832. div.npf_row {
  833. max-width:100%;
  834. margin:5px auto;
  835. }
  836.  
  837. body p+div.npf_row {
  838. max-width:100%;
  839. margin-top: 5px;
  840. margin-bottom:5px;
  841. }
  842.  
  843.  
  844.  
  845. /* captions & blockquote */
  846.  
  847.  
  848. /* tumblr's dashboad captions style */
  849.  
  850.  
  851.  
  852. /* old captions style */
  853.  
  854. .tumblr_blog {
  855. display:inline-block;
  856. line-height:var(--bodyLineHeight);
  857. margin-right:2px;
  858. text-transform:lowercase;
  859. font-family: var(--bodyFont), Arial, sans-serif;
  860. font-size:var(--bodyFontSize);
  861. color:var(--bodyLinkColor);
  862. }
  863.  
  864.  
  865. .tumblr_blog a {
  866. color:var(--bodyLinkColor);
  867. vertical-align:bottom;
  868. }
  869.  
  870. .tumblr_blog a:hover {
  871. text-decoration:none;
  872. color:var(--bodyLinkHoverColor);
  873. }
  874.  
  875.  
  876.  
  877. /* custom captions */
  878.  
  879. {block:ifCustomCaptionIcon}
  880. .user .feather {
  881. width:var(--bodyFontSize);
  882. height:var(--bodyFontSize);
  883. margin-right: 5px;
  884. position: relative;
  885. top: 2px;
  886. }
  887. {/block:ifCustomCaptionIcon}
  888. {block:ifNotCustomCaptionIcon}
  889. .user .feather {
  890. display:none;
  891. }
  892. {/block:ifNotCustomCaptionIcon}
  893.  
  894.  
  895. .reblog-header {
  896. font-weight:var(--boldFontWeight);
  897. {block:ifCaptionAvatar}
  898. margin-bottom: 2px;
  899. {/block:ifCaptionAvatar}
  900. }
  901.  
  902.  
  903. .reblog-header a::after {
  904. content:none;
  905. }
  906.  
  907. .caption, .description, .ask, .reblog-content, .date-content, .tags, figcaption {
  908. padding: var(--paddings);
  909. border: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  910. color:var(--blocksTextColor);
  911. background-color:var(--blocksBackgroundColor);margin: 10px auto;
  912. }
  913.  
  914.  
  915.  
  916. .reblog-content a {
  917. color:var(--bodyLinkColor);
  918. }
  919.  
  920. figcaption a {
  921. color:var(--bodyLinkColor);
  922. }
  923.  
  924. .reblog-content a:hover {
  925. color:var(--bodyLinkHoverColor);
  926. }
  927.  
  928. figcaption a:hover {
  929. color:var(--bodyLinkHoverColor);
  930. }
  931.  
  932. blockquote {
  933. border-left:1px solid var(--bordersColor);
  934. padding-left: 15px;
  935. margin: 10px 10px;
  936. }
  937.  
  938. figure {
  939. display:inline-block;
  940. }
  941.  
  942.  
  943. /* post info */
  944. .date {
  945. margin-top: 10px;
  946. background-color:var(--postsBackgroundColor);
  947. }
  948.  
  949. .date-content {
  950. display:flex;
  951. align-items:center;
  952. font-size:var(--dateIconsSize);
  953. }
  954.  
  955. .date-icon {
  956. margin-right:15px;
  957. margin-bottom: -4px;
  958. }
  959.  
  960.  
  961. .date-icon:last-child {
  962. margin-right:0px;
  963. }
  964.  
  965. .date-icon a {
  966. font-weight:bold;
  967. }
  968.  
  969.  
  970. /* like text */
  971.  
  972. .like-b {
  973. position:relative;
  974. display:inline-block;
  975. height:1em;
  976. line-height:1.5em;
  977. padding: 0 1px;
  978. }
  979.  
  980. .like-b .like_button iframe {
  981. position:absolute;
  982. top:0;
  983. left:0;
  984. bottom:0;
  985. right:0;
  986. z-index:2;
  987. opacity:0;
  988. }
  989.  
  990. .like-b .liked + .b {
  991. color: var(--likedTextColor);
  992. font-weight:var(--boldFontWeight);
  993. }
  994.  
  995. .like-b .liked + .b:after {
  996. content:'d';
  997. }
  998.  
  999. /* tags */
  1000.  
  1001. .tags {
  1002. text-align:left;
  1003. text-transform: var(--tagsTextTransform);
  1004. font-style:var(--tagsFontStyle);
  1005. color:var(--bodyTextColor);
  1006. font-size:var(--tagsFontSize);
  1007. word-wrap:break-word;
  1008. margin:10px 0 0;
  1009.  
  1010. }
  1011.  
  1012. /*
  1013. .tags a::before {
  1014. content:'\e24c';
  1015. font-family:'saturnicons';
  1016. font-style:none!important;
  1017. display:inline-block;
  1018. vertical-align:middle;
  1019. margin-right:5px;
  1020. font-weight:400;
  1021. color:var(--bodyLinkColor);
  1022. }
  1023.  
  1024. .tags a:hover::before {
  1025. color:var(--bodyLinkHoverColor);
  1026. -webkit-transition: var(--transitions);
  1027. -o-transition: var(--transitions);
  1028. transition: var(--transitions);
  1029. }
  1030. */
  1031.  
  1032. .tags a {
  1033. font-weight:var(--tagsFontWeight);
  1034. color:var(--bodyTextColor);
  1035. margin-right:10px;
  1036. }
  1037.  
  1038. .tags a:last-child{
  1039. margin-right:0px;
  1040. }
  1041.  
  1042. .tags a:first-child {
  1043. margin-left:0px;
  1044. }
  1045.  
  1046.  
  1047. .tags a:hover {
  1048. color:var(--bodyLinkHoverColor);
  1049. }
  1050.  
  1051.  
  1052.  
  1053. /* lists */
  1054.  
  1055. ul {
  1056. margin:15px 0;
  1057. padding: 0;
  1058. list-style:none;
  1059. }
  1060.  
  1061. ul li {
  1062. margin:5px 15px;
  1063. list-style:none;
  1064. }
  1065.  
  1066.  
  1067. ul li::before {
  1068. content: '\e08f';
  1069. font-family:'saturnicons';
  1070. font-size:calc(var(--bodyFontSize) - 50%);
  1071. bottom:0.5px;
  1072. margin-right:7px;
  1073. display:inline-block;
  1074. vertical-align:middle;
  1075. position:relative;
  1076. color: var(--bodyLinkColor);
  1077. }
  1078.  
  1079. ol {
  1080. margin:15px;
  1081. }
  1082.  
  1083. ol li {
  1084. margin:5px 15px;
  1085. list-style-type: decimal;
  1086. }
  1087.  
  1088.  
  1089. /* quote post */
  1090. .quote, .source {
  1091. padding:20px;
  1092. }
  1093.  
  1094. /* link post */
  1095. .link {
  1096. padding:10px;
  1097. }
  1098.  
  1099. /* chat post */
  1100.  
  1101. .chat {
  1102. margin:0;
  1103. padding:0;
  1104. }
  1105. .chat li {
  1106. list-style:none;
  1107. padding:10px;
  1108. }
  1109.  
  1110. .chat li:nth-of-type(odd) {
  1111. }
  1112.  
  1113.  
  1114. /* asks */
  1115.  
  1116. .clearfix::before, .clearfix::after{
  1117. content:'';
  1118. clear:both;
  1119. display:table;
  1120. }
  1121.  
  1122. .ask-user {
  1123. color:var(--bodyLinkColor);
  1124. font-weight:var(--boldFontWeight);
  1125. text-transform:lowercase;
  1126. }
  1127.  
  1128.  
  1129. .ask-user a {
  1130. color:var(--bodyLinkColor);
  1131. font-weight:var(--boldFontWeight);
  1132. }
  1133.  
  1134. .ask-user a:hover {
  1135. color:var(--bodyLinkHoverColor);
  1136. }
  1137.  
  1138.  
  1139. .ask-question {
  1140. position: relative;
  1141. top: -2px;
  1142. }
  1143.  
  1144. .ask-question p {
  1145. margin: 0 0 5px;
  1146. }
  1147.  
  1148. .ask .feather {
  1149. float: left;
  1150. margin: 2px 10px 0 0;
  1151. stroke:var(--bodyLinkColor);
  1152. }
  1153.  
  1154. .ask-answer.reblog-content::after {
  1155. content: '';
  1156. height: 0px;
  1157. }
  1158.  
  1159. /*Audio posts */
  1160.  
  1161. .audiopost img {
  1162. width:120px;
  1163. height:120px;
  1164. }
  1165. .audiopost iframe {
  1166. width:100%;
  1167. }
  1168.  
  1169. .audioinfo {
  1170. width:calc(100% - 140px);
  1171. align-items:center;
  1172. padding:0 10px;
  1173. }
  1174. .theinfo {
  1175. padding:20px;
  1176. }
  1177.  
  1178.  
  1179. /*credit */
  1180. footer {
  1181. width:50%;
  1182. margin:20px auto;
  1183. text-align:center;
  1184. }
  1185.  
  1186. /* mobile friendly sidebar */
  1187.  
  1188.  
  1189. /* this is a media query, important for mobile design.
  1190. This sets the styling for the sidebar but ONLY when the screen size is less than 1100px. Basically, this makes the sidebar function as a header once the screen gets too small to include both a sidebar and the posts */
  1191.  
  1192.  
  1193. @media only screen and (max-width: 1260px) {
  1194. .sidebar {
  1195. position:relative;
  1196. width:100%;
  1197. left:auto;
  1198. max-width:700px;
  1199. margin:50px auto;
  1200. }
  1201.  
  1202. .sidebar-content {
  1203. width:400px;
  1204. position:relative;
  1205. margin: 0 auto;
  1206. }
  1207.  
  1208. .description {
  1209. margin:0;
  1210. text-align:center;
  1211. }
  1212.  
  1213. .update {
  1214. position: absolute;
  1215. left: -65px;
  1216. }
  1217.  
  1218. .update-content {
  1219. position:relative;
  1220. }
  1221.  
  1222. .sideheader {
  1223. display:none;
  1224. }
  1225.  
  1226. .nav-content {
  1227. position:relative;
  1228. width:100%;
  1229. left:auto;
  1230. max-width:700px;
  1231. order: 2;
  1232. }
  1233.  
  1234.  
  1235. .posts-container {
  1236. width:100%;
  1237. order: 3;
  1238. }
  1239.  
  1240. .posts {
  1241. max-width: 540px;
  1242. width: 90%;
  1243. }
  1244.  
  1245. article {
  1246. margin:100px auto; /* since the sidebar is a header here, we're removing the 300px left margin so that the articles stay in the center of the page */
  1247. }
  1248.  
  1249. }
  1250.  
  1251.  
  1252. /* DO NOT REMOVE */
  1253.  
  1254.  
  1255.  
  1256. .mcredito {
  1257. position:fixed;
  1258. right:5px;
  1259. bottom:18px; background: var(--postsBackgroundColor);
  1260. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1261. {block:ifBoxShadow}
  1262. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  1263. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  1264. {/block:ifBoxShadow}
  1265. }
  1266.  
  1267. .mcredito a {
  1268. margin:0;
  1269. padding:0;
  1270. font-weight:var(--boldFontWeight);
  1271. text-transform:lowercase;
  1272. text-align:center;
  1273. color:var(--bodyLinkColor);
  1274. padding:8px 12px;
  1275. }
  1276.  
  1277. .mcredito a:hover {
  1278. color:var(--bodyLinkHoverColor);
  1279. }
  1280.  
  1281.  
  1282. /* tylergaciaposey's theme 203
  1283. css part */
  1284.  
  1285.  
  1286. .nav_container {
  1287. width:100%;
  1288. overflow: hidden;
  1289. margin:0 auto;
  1290. padding:2px;
  1291. }
  1292.  
  1293.  
  1294. .box_left {
  1295. width:50%;
  1296. overflow: hidden;
  1297. float:left;
  1298. padding:10px;
  1299. -webkit-box-sizing: border-box;
  1300. box-sizing: border-box;
  1301.  
  1302. }
  1303.  
  1304. .box_right {
  1305. width:50%;
  1306. overflow: hidden;
  1307. float:right;
  1308. padding:10px;
  1309. -webkit-box-sizing: border-box;
  1310. box-sizing: border-box;
  1311. }
  1312.  
  1313. .nav_title {
  1314. font-weight:bold;
  1315. color:var(--boldColor);
  1316. margin:2px 0 3px;
  1317. padding:0 0 5px;
  1318. }
  1319.  
  1320.  
  1321. .nav_title:after {
  1322. width:100px;
  1323. content:'';
  1324. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1325. display:block;
  1326. margin:5px 0;
  1327. }
  1328.  
  1329.  
  1330. .nav_list {
  1331. margin:0 0 2px 5px;
  1332. }
  1333.  
  1334.  
  1335. .nav_list::before {
  1336. content: '\e08f';
  1337. font-family:'saturnicons';
  1338. font-size:calc(var(--bodyFontSize) - 50%);
  1339. bottom:0.5px;
  1340. margin-right:7px;
  1341. display:inline-block;
  1342. vertical-align:middle;
  1343. position:relative;
  1344. color: var(--bodyLinkColor);
  1345. }
  1346.  
  1347. .nav_list:hover:before {
  1348. color:var(--bodyLinkHoverColor);
  1349. }
  1350.  
  1351.  
  1352. .nav_paragraph {
  1353. margin:7px 0;
  1354. }
  1355.  
  1356.  
  1357. .nav_separator {
  1358. clear:both;
  1359. width:100%;
  1360. display:block;
  1361. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1362. margin:25px 0;
  1363. padding:0 0 25px;
  1364. }
  1365.  
  1366.  
  1367. /* tags aka links lis */
  1368.  
  1369. .nav_tags_title1 {
  1370. font-weight:bold;
  1371. margin:2px 10px 3px;
  1372. padding:0 0 5px;
  1373. }
  1374.  
  1375. .nav_tags_title1:after {
  1376. width:100px;
  1377. content:'';
  1378. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  1379. display:block;
  1380. margin:5px 0;
  1381. }
  1382.  
  1383.  
  1384. .nav_tags_title {
  1385. margin:3px 0 3px;
  1386. padding:0 0 5px;
  1387. font-weight:bold;
  1388. color:var(--boldColor);
  1389. }
  1390.  
  1391. .nav_tags_title:after {
  1392. content:'';
  1393. border-bottom:0px dotted #e2e2e2;
  1394. }
  1395.  
  1396. .nav_tags_box {
  1397. height:180px;
  1398. width:33.3%;
  1399. margin-bottom:25px;
  1400. overflow: hidden;
  1401. float:left;
  1402. padding:10px;
  1403. box-sizing: border-box;
  1404. overflow-y:auto;
  1405. overflow-x:hidden;
  1406. }
  1407.  
  1408.  
  1409. .nav_tags_list {
  1410. margin:0 0 2px 5px;
  1411. }
  1412.  
  1413. .nav_tags_list::before {
  1414. content: '\e08f';
  1415. font-family:'saturnicons';
  1416. font-size:calc(var(--bodyFontSize) - 50%);
  1417. bottom:0.5px;
  1418. margin-right:7px;
  1419. display:inline-block;
  1420. vertical-align:middle;
  1421. position:relative;
  1422. color: var(--bodyLinkColor);
  1423. }
  1424.  
  1425. .nav_tags_list:hover:before {
  1426. color:var(--bodyLinkHoverColor);
  1427. }
  1428.  
  1429.  
  1430.  
  1431.  
  1432.  
  1433. /* this block is required for theme garden. It allows people to add custom css in the customization panel */
  1434.  
  1435. {CustomCSS}
  1436. </style>
  1437. </head>
  1438. <body>
  1439.  
  1440. <!-- this is the basic html structure of a theme (with some extra features in there. This theme uses dashboard captions and contains all the variables (that I can think of) required for the theme garden. -->
  1441.  
  1442.  
  1443. <!-- occassionally you will see blocks containing "has" like hastags. This block is for finding if the blog *has* these things first before rendering it. For example, if a post doesn't have any tags, this way it won't take up any space even if your css has a specific height on it. -->
  1444. <!-- main container -->
  1445.  
  1446. <main class="container">
  1447.  
  1448. <!-- sidebar -->
  1449. <aside class="sidebar">
  1450. <div class="sidebar-content">
  1451.  
  1452. <aside class="update"> <!-- START UPDATE ICONS -->
  1453. <div class="update-content"> <!-- sart update wrapper // don't touch -->
  1454.  
  1455. <!-- sart update 1 // copy all between these comments to add a new one -->
  1456. <a href="#" class="toggle-link" title="things to do"> <!-- the title="" will appear on the icon hover -->
  1457. <i data-feather="clipboard" class="feather update-icon"></i> <!-- the data-feather="" is the icon -->
  1458. </a>
  1459.  
  1460. <div class="toggle-content"> <!-- start update content // it will appear what you write inside here! -->
  1461. <strong>psds</strong>
  1462. <ul>
  1463. <li>for photoshoots</li>
  1464. </ul>
  1465. <strong>HTHAIGTCT</strong>
  1466. <div><em>how the hell am i going to color this?</em></div>
  1467. <p><a href="/tagged/hthaigtct">just small tutorials with fewer layers on how to color correct some scenes</a></p>
  1468. <strong>theme</strong>
  1469. <ul>
  1470. <li>new navigation/faq/tags page</li>
  1471. <li>all in one page</li>
  1472. <li>fan site</li>
  1473. </ul>
  1474. </div> <!-- end update content // it will appear what you write inside here! -->
  1475. <!-- end update 1 // copy all between these comments to add a new one -->
  1476.  
  1477.  
  1478.  
  1479. <!-- sart update 1 // copy all between these comments to add a new one -->
  1480. <a href="#" class="toggle-link" title="requests"> <!-- the title="" will appear on the icon hover -->
  1481. <i data-feather="info" class="feather update-icon"></i> <!-- the data-feather="" is the icon -->
  1482. </a>
  1483.  
  1484. <div class="toggle-content"> <!-- start update content // it will appear what you write inside here! -->
  1485. <strong>psds, themes, icons</strong>
  1486. <p>i'm not taking requests for new stuff</p>
  1487. <strong>psd from recent gifsets / icons</strong>
  1488. <ul>
  1489. <li>i usually save psds from my last gifs, if you want me to post some let me know</li>
  1490. <li>now i'm posting my current icons / headers as psd, so check the tags here: <a
  1491. href="/tagged/icons%20psd">icons</a> & <a href="/tagged/headers%20psd">headers</a></li>
  1492. </ul>
  1493. </div> <!-- end update content // it will appear what you write inside here! -->
  1494. <!-- end update 1 // copy all between these comments to add a new one -->
  1495.  
  1496.  
  1497.  
  1498. <!-- sart update 1 // copy all between these comments to add a new one -->
  1499. <a href="#" class="toggle-link" title="watch list"> <!-- the title="" will appear on the icon hover -->
  1500. <i data-feather="tv" class="feather update-icon"></i> <!-- the data-feather="" is the icon -->
  1501. </a>
  1502.  
  1503. <div class="toggle-content"> <!-- start update content // it will appear what you write inside here! -->
  1504. <strong>watching</strong>
  1505. <ul>
  1506. <li>atla s02 </li>
  1507. <li><strong>doctor who s05</strong></li>
  1508. <li><strong>fear the walking dead s06</strong></li>
  1509. <li>roswell new mexico s01</li>
  1510. <li><strong>skins s03</strong></li>
  1511. <li>she ra s03</li>
  1512. <li>supernatural s15</li>
  1513. <li>skam españa s01</li>
  1514. <li>the boys s01</li>
  1515. <li><strong>the mandalorian s02</strong></li>
  1516. <li><strong>twd: world beyond s01</strong></li>
  1517. <li><s>torchwood s01</s></li>
  1518. <li>westworld s03</li>
  1519.  
  1520.  
  1521. </ul>
  1522. <strong>start</strong>
  1523. <ul>
  1524. <li>trinkets s02</li>
  1525. <li>legends of tomorrow s05</li>
  1526. </ul>
  1527. <strong>catch up</strong>
  1528. <ul>
  1529. <li>arrow s07</li>
  1530. <li>supergirl s04</li>
  1531. <li>the flash s05</li>
  1532. </ul>
  1533. <strong>finished/recommend</strong>
  1534. <ul>
  1535. <li>gypsy</li>
  1536. <li>julie and the phantoms</li>
  1537. <li>lucifer</li>
  1538. <li>outer banks</li>
  1539. <li>the haunting of bly manor</li>
  1540. <li>teenage bounty hunters</li>
  1541. <li>the order</li>
  1542. <li>warrior nun</li>
  1543. <li>wynonna earp</li>
  1544. </ul>
  1545. </div> <!-- end update content // it will appear what you write inside here! -->
  1546. <!-- end update 1 // copy all between these comments to add a new one -->
  1547.  
  1548.  
  1549.  
  1550. <!-- if you want redirect links or "buttons" // each <a> is a link -->
  1551. <a title ="check out my resources blog!" href="http://dailyresources.tumblr.com/" target="_blank" class="toggle-link-button"> <!-- the title="" will appear on the icon hover -->
  1552. <i data-feather="link" class="feather update-icon"></i> <!-- the data-feather="" is the icon -->
  1553. </a>
  1554.  
  1555. <a title ="if you like my content and would like to support me, i'd be very grateful" href="https://ko-fi.com/luciane/" target="_blank" class="toggle-link-button"> <!-- the title="" will appear on the icon hover -->
  1556. <i data-feather="coffee" class="feather update-icon"></i> <!-- the data-feather="" is the icon -->
  1557. </a>
  1558.  
  1559. </div> <!-- end update wrapper // don't touch -->
  1560. {/block:ifUpdates}
  1561. </aside> <!-- END UPDATE ICONS -->
  1562.  
  1563. <div class="sidebar-main-content">
  1564. <div class="sideheader">
  1565. {block:IfUseHeaderIconSidebar}
  1566. {block:IfUseSidebarIcon}
  1567. <img src="{image:Sidebar Icon}">
  1568. {/block:IfUseSidebarIcon}
  1569. {/block:IfUseHeaderIconSidebar}
  1570.  
  1571. {block:IfNotUseHeaderIconSidebar}
  1572. <img src="https://static.tumblr.com/0siu224/jUVqkgjz0/1s2.gif">
  1573. {/block:IfNotUseHeaderIconSidebar}
  1574. </div>
  1575. <div class="description">
  1576. luciane. 26. she/her <a href="https://www.tumblr.com/tagged/maziekeen"
  1577.  
  1578. title="also #userluciane">#maziekeen</a> <br> <a
  1579.  
  1580. href="https://maziekeen.tumblr.com/tagged/gifs" title="above average">gifs</a>,
  1581.  
  1582. <a href="https://maziekeen.tumblr.com/tagged/psds" title="not taking
  1583.  
  1584. requests">psds</a>, and <a href="https://maziekeen.tumblr.com/themees"
  1585.  
  1586. title="pretty much all the same but still cute">themes</a>
  1587.  
  1588. <p><strong>theme slowly under construction, because i'm lazy</strong>
  1589. </div>
  1590. </div>
  1591.  
  1592. <nav class="navigation">
  1593. <div class="nav-content">
  1594. <ul>
  1595. <li>
  1596. <a href="{text:Index URL}" title="{text:Index Text}">
  1597. <i data-feather="{text:Index Icon}" class="feather"></i>
  1598. </a>
  1599. </li>
  1600.  
  1601. <li>
  1602. <a href="{text:Ask URL}" title="{text:Ask Text}">
  1603. <i data-feather="{text:Ask Icon}" class="feather"></i>
  1604. </a>
  1605. </li>
  1606.  
  1607. {block:ifSidebarLink1}
  1608. <li>
  1609. <a href="{text:Sidebar Link 1 URL}" title="{text:Sidebar Link 1 Text}">
  1610. <i data-feather="{text:Sidebar Link 1 Icon}" class="feather"></i>
  1611. </a>
  1612. </li>
  1613. {/block:ifSidebarLink1}
  1614.  
  1615. {block:ifSidebarLink2}
  1616. <li>
  1617. <a href="{text:Sidebar Link 2 URL}" title="{text:Sidebar Link 2 Text}">
  1618. <i data-feather="{text:Sidebar Link 2 Icon}" class="feather"></i>
  1619. </a>
  1620. </li>
  1621. {/block:ifSidebarLink2}
  1622.  
  1623. {block:ifSidebarLink3}
  1624. <li>
  1625. <a href="{text:Sidebar Link 3 URL}" title="{text:Sidebar Link 3 Text}">
  1626. <i data-feather="{text:Sidebar Link 3 Icon}" class="feather"></i>
  1627. </a>
  1628. </li>
  1629. {/block:ifSidebarLink3}
  1630.  
  1631. {block:ifSidebarLink4}
  1632. <li>
  1633. <a href="{text:Sidebar Link 4 URL}" title="{text:Sidebar Link 4 Text}">
  1634. <i data-feather="{text:Sidebar Link 4 Icon}" class="feather"></i>
  1635. </a>
  1636. </li>
  1637. {/block:ifSidebarLink4}
  1638. </ul>
  1639. </div>
  1640. </nav>
  1641.  
  1642. <!-- pagination -->
  1643. {block:Pagination}
  1644. <div class="pagination">
  1645. {block:previouspage}
  1646. <a href="{previouspage}">Previous page</a>
  1647. {/block:previouspage}
  1648. {block:nextpage}
  1649. <a href="{nextpage}">Next page</a>
  1650. {/block:nextpage}
  1651. </div>
  1652. {/block:pagination}
  1653. </div>
  1654. </aside>
  1655.  
  1656.  
  1657.  
  1658. <!-- here we are using the boolean for a grid layout. if the user turns that on, the section will get the grid class and will be styled using the css we put for the grid class -->
  1659. <section class="posts-container" {block:ifgrid} class="grid" {/block:ifgrid}>
  1660.  
  1661. <!-- posts -->
  1662.  
  1663. <!-- all the basic post variables are below. To get a good summary of what each variable means, please read the theme docs: https://www.tumblr.com/docs/en/custom_themes as these are tumblr specific and don't apply to general html -->
  1664.  
  1665.  
  1666. <!-- this removes the default source/via links
  1667. {block:Posts}
  1668. <!-- {block:NoRebloggedFrom}
  1669. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1670. {/block:NoRebloggedFrom} -->
  1671. {block:ContentSource}<!-- {SourceURL}
  1672. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1673. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1674. {/block:ContentSource}
  1675.  
  1676. <!-- by using the {postyype} variable, we can make classes for each post type without having to type them all out individually -->
  1677. <article class="{posttype}post posts">
  1678. <!-- pinned post -->
  1679. {block:PinnedPostLabel}
  1680. <div class="pinned-post">
  1681. <!--<a href="{Permalink}" title="{PinnedPostLabel}" class="sf sf-push-pin-o"></a>-->
  1682. <a href="{Permalink}">{PinnedPostLabel}: Fix icons missing on my themes</a>
  1683. </div>
  1684. {/block:PinnedPostLabel}
  1685.  
  1686. <!-- text posts -->
  1687. {block:Text}
  1688. <!-- title block hides the title section if the post has no title -->
  1689. {block:Title}
  1690. <h1>{Title}</h1>
  1691. {/block:Title}
  1692.  
  1693. <!-- this is styling for when this is an original post/not reblogged -->
  1694. {block:Notreblog}
  1695. <div class="caption">
  1696. {Body}
  1697. </div>
  1698. {/block:Notreblog}
  1699.  
  1700. <!-- styling whenever it is a reblogged post -->
  1701. {block:Rebloggedfrom}
  1702. <div class="caption">
  1703. <div class="reblog-list">
  1704. {block:Reblogs}
  1705. <div class="reblogs">
  1706. <div class="reblog-header">
  1707. {block:isactive}
  1708. <a href="{permalink}">{username}</a>
  1709. {/block:isactive}
  1710. {block:isdeactivated}
  1711. <a href="{permalink}" class="inactive">{username}</a>
  1712. {/block:isdeactivated}
  1713. </div>
  1714. <div class="reblog-content">
  1715. {Body}
  1716. </div>
  1717. </div>
  1718. {/block:Reblogs}
  1719. </div>
  1720. </div>
  1721. {/block:RebloggedFrom}
  1722. {/block:Text}
  1723.  
  1724. <!-- photo posts -->
  1725. {block:Photo}
  1726. <!-- photo alts add a description to the image for screen readers and for if the image doesn't load -->
  1727. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  1728. {/block:Photo}
  1729.  
  1730. <!-- photoset -->
  1731. {block:Photoset}
  1732. <div class="photoset">
  1733.  
  1734. <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>
  1735. </div>
  1736. {/block:Photoset}
  1737.  
  1738. <!-- panorama -->
  1739. {block:Panorama}
  1740. <img src="{photourl-panorama}" alt="{photoalt}">
  1741. {/block:Panorama}
  1742.  
  1743. <!-- quote posts -->
  1744. {block:Quote}
  1745. <div class="quote">
  1746. "{Quote}"
  1747. </div>
  1748. <div class="source">
  1749. -{Source}
  1750. </div>
  1751. {/block:Quote}
  1752.  
  1753. <!-- chat posts -->
  1754. {block:Chat}
  1755. <ul class="chat">
  1756. {block:Lines}
  1757. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  1758. {/block:Lines}
  1759. </ul>
  1760. {/block:Chat}
  1761.  
  1762. <!--Link posts-->
  1763. {block:link}
  1764. <div class="link">
  1765. <a href="{URL}"><span class="lnr lnr-link" aria-hidden="true"></span> {Name}</a>
  1766. </div>
  1767. {/block:link}
  1768.  
  1769. <!-- video posts -->
  1770. {block:Video}
  1771. {Video-500}
  1772. {/block:Video}
  1773.  
  1774. <!--Audio posts-->
  1775. {block:Audio}
  1776. <div class="audio">
  1777. {block:albumart}
  1778. <img src="{AlbumArtURL}" alt="Album art for {block:trackname}{Trackname}{/block:trackname}">
  1779. {/block:albumart}
  1780. <div class="audioinfo">
  1781. {block:trackname}{Trackname}{/block:trackname}<br>
  1782. {block:Album}{Album}{/block:Album} <br>
  1783. {block:Artist}{Artist}{/block:Artist}
  1784. </div>
  1785.  
  1786. </div>
  1787. <div class="player">
  1788. {AudioPlayer}
  1789. </div>
  1790. {/block:Audio}
  1791.  
  1792. <!-- ask -->
  1793. {block:Answer}
  1794. <div class="ask">
  1795. <i data-feather="mail" class="feather"></i>
  1796. <span class="ask-question">
  1797. {Question}
  1798. </span>
  1799. <span class="clearfix"></span>
  1800. <i data-feather="user" class="feather"></i>
  1801. <span class="ask-user">
  1802. {Asker}
  1803. </span>
  1804. </div>
  1805. <div class="reblog-list">
  1806. <div class="ask-answer reblog-content">
  1807. {Answer}
  1808. </div>
  1809. </div>
  1810. {/block:Answer}
  1811. <!-- end ask -->
  1812.  
  1813. <!-- captions -->
  1814. {block:Caption}
  1815. <div class="caption">
  1816. {block:notreblog}
  1817. {Caption}
  1818. {/block:notreblog}
  1819. {block:Rebloggedfrom}
  1820. <div class="reblog-list">
  1821. {block:Reblogs}
  1822. <div class="reblogs">
  1823. <div class="reblog-header">
  1824. {block:isactive}
  1825. <a href="{permalink}">{username}</a>
  1826. {/block:isactive}
  1827. {block:isdeactivated}
  1828. <a href="{permalink}" class="inactive">{username}</a>
  1829. {/block:isdeactivated}
  1830. </div>
  1831. <div class="reblog-content">
  1832. {Body}
  1833. </div>
  1834. </div>
  1835. {/block:Reblogs}
  1836. </div>
  1837. {/block:RebloggedFrom}
  1838. </div>
  1839. {/block:Caption}
  1840.  
  1841.  
  1842. <!-- post info -->
  1843. {block:Date}
  1844. <div class="date">
  1845. <div class="date-content">
  1846.  
  1847. <div class="date-icon">
  1848. <a href="{Permalink}">
  1849. {timeago}
  1850. </a>
  1851. </div>
  1852.  
  1853. {block:NoteCount}
  1854. <div class="date-icon">
  1855. <a href="{Permalink}">
  1856. {NoteCountWithLabel}
  1857. </a>
  1858. </div>
  1859. {/block:NoteCount}
  1860.  
  1861. {block:ContentSource}
  1862. <div class="date-icon">
  1863. <a href="{SourceURL}" title="Posted by {SourceTitle}">
  1864. {SourceTitle}
  1865. </a>
  1866. </div>
  1867. {/block:ContentSource}
  1868.  
  1869. {block:Permalink}
  1870. {block:RebloggedFrom}
  1871. <div class="date-icon">
  1872. <a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}">
  1873. {ReblogParentName}
  1874. </a>
  1875. </div>
  1876. {/block:RebloggedFrom}
  1877. {/block:Permalink}
  1878.  
  1879. <div class="date-icon">
  1880. <a href="{ReblogURL}" target="_blank" class="details">
  1881. reblog
  1882. </a>
  1883. </div>
  1884.  
  1885. <div class="date-icon">
  1886. <a class="like-b" href="#">
  1887. {LikeButton}<span class="b">like</span>
  1888. </a>
  1889. </div>
  1890.  
  1891. {block:IfTagsOnClick}
  1892. {block:HasTags}
  1893. <div class="date-icon toggle-tags">
  1894. <a href="#">
  1895. show tags
  1896. </a>
  1897. </div>
  1898. {/block:HasTags}
  1899. {/block:IfTagsOnClick}
  1900. </div>
  1901.  
  1902. <!-- tags -->
  1903. {block:HasTags}
  1904. <div class="tags">
  1905. {block:Tags}
  1906. <a href="{TagURL}">
  1907. {Tag}</a>
  1908. {/block:Tags}
  1909. </div>
  1910. {/block:HasTags}
  1911. <!-- end tags -->
  1912. </div>
  1913. {/block:Date}
  1914. <!-- end post info -->
  1915.  
  1916. <!-- post note list -->
  1917. {PostNotes}
  1918. </article> <!-- end posts -->
  1919. {/block:Posts}
  1920. </section> <!-- end post section -->
  1921. </main> <!-- end container -->
  1922.  
  1923.  
  1924. <!-- top right icon for custom tumblr controls -->
  1925.  
  1926. {block:ifCustomControls}
  1927. <div class="hcontrols"><i data-feather="more-horizontal" class="feather"></i></div>
  1928. {/block:ifCustomControls}
  1929.  
  1930. <!-- scripts -->
  1931. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- for tooltips -->
  1932. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  1933. <script src="https://unpkg.com/popper.js@1"></script> <!-- tooltips -->
  1934. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <!-- tooltips -->
  1935. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script> <!-- resize videos -->
  1936. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> <!-- smooth scroll -->
  1937. <script src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1938.  
  1939. <script type="text/javascript">
  1940. // update-toggle
  1941. $(document).ready(function() {
  1942. $(".toggle-content").hide();
  1943.  
  1944. $(".toggle-link").click(function(event) {
  1945. event.preventDefault();
  1946. $(this).next(".toggle-content").slideToggle(500);
  1947. });
  1948.  
  1949. });
  1950.  
  1951. // photosets lightbox
  1952.  
  1953. function gatherData(images, arr) {
  1954. for (let i = 0; i < images.length; i++) {
  1955. let currentData = {
  1956. "width": images[i].getAttribute('data-width'),
  1957. "height": images[i].getAttribute('data-height'),
  1958. "low_res": images[i].getAttribute('data-lowres'),
  1959. "high_res": images[i].getAttribute('data-highres')
  1960. };
  1961. arr.push(currentData);
  1962. }
  1963. }
  1964. function getIndex(elem) {
  1965. let i = 0;
  1966. while( (elem = elem.previousElementSibling) != null ) i++;
  1967. return i;
  1968. }
  1969. function lightbox(elem) {
  1970. let currentPhotoset = elem.parentNode;
  1971. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1972. let data = [];
  1973. gatherData(photosetPhotos, data);
  1974. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1975. }
  1976.  
  1977.  
  1978. // tooltips
  1979. tippy('a[title]', {
  1980. theme: 'custom',
  1981. arrow: false,
  1982. zIndex: 9999999999,
  1983. maxWidth: 300,
  1984.  
  1985. content(reference) {
  1986. const title = reference.getAttribute('title');
  1987. reference.removeAttribute('title');
  1988. return title;
  1989. },
  1990. });
  1991.  
  1992. // feather icons (custom icons)
  1993. feather.replace();
  1994.  
  1995. // remove tumblr redirects script by magnusthemes@tumblr
  1996. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1997. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1998. var replaceURL = decodeURIComponent(originalURL);
  1999. $(this).attr("href", replaceURL);
  2000. });
  2001. </script>
  2002. </body>
  2003. </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!