API tools faq
paste
Advertisement
wyvernlynch

cascara

wyvernlynch
Mar 23rd, 2019
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ____________________________________________________________________________
  3.  
  4. cascara
  5. a wip page
  6. by wyvernlynch
  7. https://writingsbywyvern.tumblr.com
  8. please don't remove the credit
  9. thank you
  10.  
  11. ____________________________________________________________________________
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.  
  18. <!-- tab title -->
  19. <title>cascara</title>
  20.  
  21. <!-- font -->
  22. <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,600,700" rel="stylesheet">
  23.  
  24. <!-- navi icons -->
  25. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  26.  
  27. <!-- script -->
  28. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  29. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("a[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:0,
  36. tip_fade_speed:300,
  37. attribute:"title"
  38. });
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <style>
  44.  
  45. /* s c r o l l b a r */
  46. ::-webkit-scrollbar {
  47. width: 3px;
  48. height: 6px;
  49. }
  50.  
  51. ::-webkit-scrollbar-thumb {
  52. border:1px solid white;
  53. background-color: #ddd; /* scrollbar color */
  54. }
  55.  
  56. /* t o o l t i p */
  57. #s-m-t-tooltip {
  58. z-index: 1000000000;
  59. background-color:#ccacb8;
  60. color:#fff;
  61. text-transform: uppercase;
  62. letter-spacing: 2px;
  63. font-weight:300;
  64. font-family:'work sans';
  65. font-size: 7px;
  66. padding:2px 6px;
  67. margin: 20px 0 0 20px;
  68. }
  69.  
  70. /* b o d y */
  71. body {
  72. font:10px/1.7 'work sans', sans-serif; /* main font */
  73. color:#444; /* font color */
  74. line-height:14px;
  75. background:#fff; /* background color */
  76. cursor:url('https://66.media.tumblr.com/51aa4b0cb73356472f4336df13b2fc6b/tumblr_inline_p7nrx1388N1r1shc4_540.png'), progress !important; /* cursor */
  77. }
  78.  
  79. a {
  80. text-decoration:none;
  81. color:#ccacb8; /* link color */
  82. transition:.8s;
  83. cursor:url('https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_p7nrx1hoRW1r1shc4_540.png'), progress !important; /* cursor */
  84. }
  85.  
  86. a:hover {
  87. color:#444; /* link hover color */
  88. }
  89. b {
  90. color:#ccacb8; /* bold color */
  91. font-weight:600;
  92. }
  93. strong {
  94. color:#ccacb8; /* strong color */
  95. font-weight:400;
  96. }
  97. i {
  98. color:#ccacb8; /* italic color */
  99. }
  100.  
  101. /* l e f t s i d e b a r */
  102. #left {
  103. width:200px;
  104. top:150px;
  105. left:50%;
  106. margin-left:-540px;
  107. position:fixed;
  108. text-align:center;
  109. }
  110. .cover {width:200px;}
  111. .nav {text-align:center;margin-top:20px;}
  112. .nav a {
  113. font-size:15px;
  114. color:#444; /* navigation icon color */
  115. margin:5px;
  116. text-align:center;
  117. transition:.8s;
  118. }
  119. .nav a:hover {
  120. color:#a2c0e2; /* navigation icon hover color */
  121. }
  122. /* progress bar */
  123. progress {
  124. width: 200px;
  125. height: 5px;
  126. -webkit-appearance: none;
  127. appearance: none;
  128. margin-top:10px;
  129. }
  130. progress[value]::-webkit-progress-bar {
  131. background-color: #eee; /* progress bar background color */
  132. border-radius: 2px;
  133. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  134. }
  135. progress[value]::-webkit-progress-value {
  136. border-radius:2px;
  137. background-color: #ccacb8; /* progress bar color */
  138. }
  139.  
  140.  
  141. /* m a i n b a r */
  142. #center {
  143. width:550px;
  144. margin:100px auto;
  145. }
  146. .title {
  147. font-size:25px; /* title font size */
  148. letter-spacing:2px;
  149. margin-top:20px;
  150. font-weight:300;
  151. }
  152. .series {
  153. font-size:10px; /* series font size */
  154. font-weight:300;
  155. margin-top:10px;
  156. }
  157. .authorname {
  158. font-size:12px; /* author name font size */
  159. font-weight:400;
  160. margin-top:1px;
  161. letter-spacing:1px;
  162. margin-bottom:20px;
  163. }
  164.  
  165. h1 {
  166. font-size:12px; /* section divider font size */
  167. font-weight:400;
  168. line-height:11px;
  169. text-transform:uppercase;
  170. border-bottom:1px solid #444; /* line color */
  171. padding-bottom:7px;
  172. margin:40px 0 10px 0;
  173. }
  174. .chars-odd, .chars-even{
  175. width:70px; /* char img width */
  176. height:70px; /* char img height */
  177. margin:10px;
  178. position:relative;
  179. border-radius:100%;
  180. }
  181. .chars-odd {float:left;}
  182. .chars-even {float:right;}
  183. /* character section alignment */
  184. .chars:nth-of-type(odd) {text-align:right;}
  185. .chars:nth-of-type(even) {text-align:left;}
  186.  
  187.  
  188. /* r i g h t s i d e b a r */
  189. #right {
  190. width:220px;
  191. top:150px;
  192. left:50%;
  193. position:fixed;
  194. margin-left:340px;
  195. }
  196. /* lists */
  197. li {list-style-type:none;}
  198. .minor li::before {
  199. content:"»"; /* minor characters list bullet */
  200. padding-right:8px;
  201. }
  202. .date li {margin-left:5px;} /* update list indent */
  203. .date li::before {
  204. content:"↳"; /* update list bullet */
  205. padding-right:8px;
  206. }
  207. /* other wip */
  208. .other {margin:20px 0;}
  209. .other-odd, .other-even{
  210. height:100px; /* other wip cover height */
  211. margin:10px;
  212. position:relative;
  213. }
  214. .other-odd {float:left;}
  215. .other-even {float:right;}
  216. /* other wip alignment */
  217. .other:nth-of-type(odd) {text-align:left;}
  218. .other:nth-of-type(even) {text-align:right;}
  219. /* other wip line */
  220. hr {
  221. width:50%;
  222. margin:10px auto;
  223. border-top:none;
  224. border-left:none;
  225. border-right:none;
  226. border-bottom:1px solid #9c9c9c;
  227. text-align:center;
  228. }
  229.  
  230. /* c r e d i t */
  231. /* please don't remove */
  232. .credit {
  233. bottom:10px;
  234. right:10px;
  235. float:right;
  236. position:fixed;
  237. text-align:right;
  238. transition:.8s;
  239. }
  240. .credit a {font-size:7px; color:#000;}
  241. .credit a:hover {color:#888;}
  242.  
  243.  
  244. </style>
  245. </head>
  246.  
  247. <body>
  248.  
  249. <!-- l e f t s i d e b a r -->
  250. <div id="left">
  251. <img class="cover" src="/"> <!-- cover image -->
  252. <!-- progress bar. change the number 63 with any number you want-->
  253. <progress max="100" value="63"></progress>
  254. progress: 63%
  255. <!-- navigation -->
  256. <div class="nav">
  257. <a href="link url" title="home"><span class="lnr lnr-home"></span></a>
  258. <a href="link url" title="mssg"><span class="lnr lnr-bubble"></span></a>
  259. <a href="link url" title="wip tag"><span class="lnr lnr-tag"></span></a>
  260. <a href="link url" title="characters"><span class="lnr lnr-users"></span></a>
  261. <a href="link url" title="excerpt"><span class="lnr lnr-book"></span></a>
  262.  
  263. <!-- more icons at https://linearicons.com/free -->
  264. </div>
  265.  
  266. </div>
  267.  
  268. <!-- m a i n b a r -->
  269. <div id="center">
  270. <div class="title">title</div><!-- book title -->
  271. <div class="series">book x, series</div>
  272. <div class="authorname">by author name</div>
  273.  
  274. <!-- book description -->
  275. <p><b>bold</b> <i>italic</i> <strong>strong</strong> <a href="link" title="link title">link</a>
  276. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  277. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  278. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  279.  
  280.  
  281. <!-- characters -->
  282. <h1>characters</h1>
  283.  
  284. <!--------------------------------------------------------------------------
  285.  
  286. to add more characters copy:
  287.  
  288.  
  289. <div class="chars">
  290. <img class="chars-odd" src="/">
  291. <b>name</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
  292.  
  293. -- end here --
  294.  
  295. -------------------------------------------------------------------------->
  296.  
  297. <!--------------------------------------------------------------------------
  298.  
  299. the left-right alignment for the text are automatic. for the image:
  300. copy: <img class="chars-odd" src="imageurl"> for the left alignment.
  301. and <img class="chars-even" src="imageurl"> for the right alignment.
  302.  
  303. the class "chars-odd" are for the left alignment, and "chars-even" are for the right alignment.
  304.  
  305. --------------------------------------------------------------------------->
  306.  
  307. <!-- character one -->
  308. <div class="chars">
  309. <img class="chars-odd" src="imageurl">
  310. <b>name</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
  311. <!-- end character one -->
  312.  
  313. <!-- character four -->
  314. <div class="chars">
  315. <img class="chars-even" src="imageurl">
  316. <b>name</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
  317. <!-- character four -->
  318.  
  319. <!-- character three -->
  320. <div class="chars">
  321. <img class="chars-odd" src="imageurl">
  322. <b>name</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
  323. <!-- character three -->
  324.  
  325. <!-- character four -->
  326. <div class="chars">
  327. <img class="chars-even" src="imageurl">
  328. <b>name</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
  329. <!-- character four -->
  330.  
  331. <!-- world -->
  332. <h1>world</h1>
  333.  
  334. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  335. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  336.  
  337.  
  338. <!-- additional sections -->
  339. <h1>other stuff you want to put</h1>
  340.  
  341. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  342. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  343. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  344.  
  345.  
  346. <!--------------------------------------------------------------------------
  347.  
  348. you can add more sections after this. copy:
  349. <h1>Title</h1>
  350. <p>begin writing</p>
  351.  
  352. --------------------------------------------------------------------------->
  353.  
  354. </div>
  355.  
  356.  
  357. <!-- r i g h t s i d e b a r -->
  358. <div id="right">
  359.  
  360. <!-- information -->
  361. <h1>information</h1>
  362. <b>genre &rsaquo;</b> fantasy <br>
  363. <b>status &rsaquo;</b> on progress <br>
  364. <b>started &rsaquo;</b> may 2021 <br>
  365. <b>pov &rsaquo;</b> third person <br>
  366. <b>mood &rsaquo;</b> white, clean <br>
  367. <b>draft &rsaquo;</b> third
  368.  
  369. <!-- updates -->
  370. <h1>updates</h1>
  371. <div class="date">
  372. <b>2021</b>
  373. <li><strong>[00/00]</strong> event</li>
  374. <b>2022</b>
  375. <li><strong>[00/00]</strong> event</li>
  376. <li><strong>[00/00]</strong> event</li>
  377. <li><strong>[00/00]</strong> event</li>
  378. </div>
  379.  
  380. <!-- minor characters -->
  381. <h1>minor characters</h1>
  382. <div class="minor">
  383. <li><strong>name &rsaquo;</strong> relation</li>
  384. <li><strong>name &rsaquo;</strong> relation</li>
  385. <li><strong>name &rsaquo;</strong> relation</li>
  386. </div>
  387.  
  388. <!-- other wips -->
  389. <h1>other wips</h1>
  390.  
  391. <!--------------------------------------------------------------------------
  392.  
  393. just like in the characters section, the alignment for the texts are automatic. to change the image's alignment, change the img class to:
  394.  
  395. "other-odd" for left alignment
  396. "other-even" for right alignment
  397.  
  398. --------------------------------------------------------------------------->
  399.  
  400.  
  401. <!--------------------------------------------------------------------------
  402.  
  403. to add more copy:
  404.  
  405. <div class="other">
  406. <a href="link" title="title"><img class="other-odd" src="imageurl"></a>
  407. <p>description here</p>
  408. </div>
  409.  
  410. --------------------------------------------------------------------------->
  411.  
  412. <div class="other">
  413. <a href="link" title="title"><img class="other-odd" src="/"></a>
  414. <p><b>book title</b><br>
  415. book x, series<br>
  416. by author name</p>
  417. <p>description, please keep it short</p>
  418. </div>
  419. <hr>
  420. <div class="other">
  421. <a href="link" title="title"><img class="other-even" src="/"></a>
  422. <p><b>book title</b><br>
  423. book x, series<br>
  424. by author name</p>
  425. <p>description, please keep it short</p>
  426. </div>
  427.  
  428. <div class="other">
  429. <a href="link" title="title"><img class="other-odd" src="/"></a>
  430. <p><b>book title</b><br>
  431. book x, series<br>
  432. by author name</p>
  433. <p>description, please keep it short</p>
  434. </div>
  435. </div>
  436.  
  437.  
  438. </div>
  439.  
  440. <!-- c r e d i t -->
  441. <!-- please do not remove -->
  442. <div class="credit"><a href="https://themesbywyvern.tumblr.com">@wyvernlynch</a></div>
  443. </body>
  444. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!