API tools faq
paste
Advertisement
atlasthemes

wip page 04

atlasthemes
Mar 8th, 2020
1,980
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.62 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3.  
  4.  
  5. wip page 04
  6. by @bebewrites
  7. pls do not remove credit
  8. thanks!<3
  9.  
  10.  
  11.  
  12. ------------------------------------------------------------------------->
  13.  
  14. <!DOCTYPE html>
  15. <head>
  16. <link rel="shortcut icon" href="{Favicon}">
  17.  
  18. <title>a work in progress</title><!-- title for browser tab -->
  19.  
  20.  
  21. <!-- icon font -->
  22.  
  23. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  24.  
  25. <!-- google fonts go here -->
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&display=swap" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet">
  30.  
  31. <!-- scripts -->
  32.  
  33. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  34. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  35.  
  36. <script>
  37. (function($){
  38. $(document).ready(function(){
  39. $("a[title]").style_my_tooltips({
  40. tip_follows_cursor:true,
  41. tip_delay_time:90,
  42. tip_fade_speed:300,
  43. attribute:"title"
  44. });
  45. });
  46. })(jQuery);
  47. </script>
  48.  
  49. <style type="text/css">
  50.  
  51. /* ---------------------- change colors & font here --------------------- */
  52.  
  53. :root {
  54. --link-color:#aaaaaa;
  55. --link-hover:#DFCEBC;
  56. --accent:#f3ece5; /* accent color */
  57. --bg-color:#fafafa; /* background color */
  58. --headings:#333333; /* section headings */
  59. --progress-bar:#DFCEBC; /* progress bar fill color */
  60. --detail-bg:#f6f6f6; /* stats and themes color */
  61. --shadow-color:#444444; /* wip title & nav shadow color */
  62.  
  63. --body-font:'Open Sans'; /* body font */
  64. --text-size:10px; /* body font size */
  65. --body-color:#666666; /* text color */
  66. --title-font:'Playfair Display'; /* title font */
  67. --title-size:13px; /* title font size */
  68. --title-color:#fff; /*title color */
  69.  
  70. --featured-image:url(https://images.unsplash.com/photo-1566251150352-a6d720d0ae51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60);
  71. }
  72.  
  73. /* ---------------------------------------------------------------------- */
  74.  
  75.  
  76. @-webkit-keyframes fadein {
  77. 0% {opacity: 0;}
  78. 100% { opacity: 1; }}
  79.  
  80. @-moz-keyframes fadein {
  81. 0% { opacity: 0; }
  82. 100% { opacity: 1; }}
  83.  
  84. @keyframes fadein {
  85. 0% { opacity: 0; }
  86. 100% { opacity: 1; }}
  87.  
  88.  
  89. body {
  90. font-family:var(--body-font);
  91. font-size:var(--text-size);
  92. text-align:justify;
  93. line-height:1.55em;
  94. letter-spacing:0px;
  95. color:var(--body-color);
  96. background-color:var(--bg-color);
  97. -moz-osx-font-smoothing:grayscale;
  98. -webkit-font-smoothing:antialiased;
  99. font-smoothing:antialiased;
  100. -webkit-animation: fadein 1.3s;
  101. -moz-animation:fadein 1.3s;
  102. animation:fadein 1.3s;
  103. }
  104.  
  105. #s-m-t-tooltip {
  106. max-width:300px;
  107. margin-top:-40px;
  108. margin-left:0px;
  109. font-size:10px;
  110. color:var(--headings);
  111. text-align:center;
  112. text-transform:lowercase;
  113. background-color:#fff;
  114. padding:2px 5px;
  115. border-radius:3px;
  116. z-index:999999;
  117. }
  118.  
  119. a {color:var(--link-color);text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  120.  
  121. a:hover {color:var(--link-hover);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  122.  
  123. i {color:var(--headings);}
  124.  
  125. shortborder2 {width:50px;height:1px;margin:10px auto 8px auto;background-color:#777;display:block;}
  126.  
  127. h1 {
  128. display:block;
  129. font-family:var(--title-font);
  130. font-size:var(--title-size);
  131. line-height:12px;
  132. color:var(--headings);
  133. font-weight:700;
  134. text-transform:lowercase;
  135. border-bottom:2px solid var(--accent);
  136. padding:0 0 5px 0;
  137. margin:0 0 10px 0;
  138. }
  139.  
  140. h1 span {float:right;font-size:10px;}
  141. h1 span i {color:#d4d4d4;}
  142.  
  143. #featuredimage {
  144. display:block;
  145. float:left;
  146. width:375px;
  147. height:500px;
  148. background-image:var(--featured-image);
  149. background-position:center;
  150. background-size:cover;
  151. }
  152.  
  153. #wiptitle {
  154. display: flex;
  155. align-items: center;
  156. justify-content: center;
  157. width:375px;
  158. height:500px;
  159. }
  160.  
  161. #titletext {
  162. font-family:var(--title-font);
  163. font-weight:900;
  164. color:var(--title-color);
  165. font-size:18px;
  166. text-shadow:2px 2px 2px var(--shadow-color);
  167. text-align:center;
  168. line-height:18px;
  169. }
  170.  
  171. #titletext span {
  172. font-family:var(--body-font);
  173. font-size:var(--text-size);
  174. letter-spacing:0.75px;
  175. text-transform:uppercase;
  176. }
  177.  
  178. .container {
  179. display:block;
  180. position:fixed;
  181. background-color:#fff;
  182. top:0px;
  183. bottom:0px;
  184. left:0px;
  185. right:0px;
  186. width:800px;
  187. height:500px;
  188. margin:auto;
  189. }
  190.  
  191. .content {
  192. display:block;
  193. float:right;
  194. width:405px;
  195. height:480px;
  196. padding:10px;
  197. vertical-align:top;
  198. overflow-x:hidden;
  199. overflow-y:scroll;
  200. }
  201.  
  202. .content::-webkit-scrollbar {width:1px;height:1px;}
  203. .content::-webkit-scrollbar {background-color:transparent;}
  204. .content::-webkit-scrollbar-track {border:0px solid #fff;background-color:#fff;}
  205. .content::-webkit-scrollbar-thumb {border:0px solid #fff;background-color:#d4d4d4;min-height:24px;min-width:24px;}
  206.  
  207. nav {
  208. display:grid;
  209. grid-template-columns:20% 20% 20% 20% 20%;
  210. text-align:center;
  211. padding-top:8px;
  212. text-shadow:1px 1px 2px var(--shadow-color);
  213. }
  214.  
  215. nav a {
  216. display:block;
  217. font-size:10px;
  218. color:#fff;
  219. }
  220.  
  221. nav i {color:#fff;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  222.  
  223. nav i:hover {color:var(--link-hover);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
  224.  
  225. section {
  226. display:block;
  227. background-color:#fff;
  228. padding:15px;
  229. margin-bottom:5px;
  230. height:auto;
  231. }
  232.  
  233. section:last-of-type {margin-bottom:0px;}
  234.  
  235. .stats {
  236. display:grid;
  237. grid-template-columns:49% 49%;
  238. grid-gap:5px;
  239. }
  240.  
  241. .stats span {
  242. display:block;
  243. background-color:var(--detail-bg);
  244. border-radius:3px;
  245. padding:3px 8px;
  246. }
  247.  
  248. .stats span b {display:inline-block;width:35%;font-weight:400;text-transform:lowercase;font-style:italic;color:var(--headings);}
  249.  
  250. #themes {text-align:left;}
  251. #themes span {padding:3px 6px;margin-right:5px;background-color:var(--detail-bg);font-style:italic;border-radius:3px;line-height:28px;}
  252.  
  253. #info {display:block;}
  254. #info span {display:block;margin-bottom:10px;}
  255. #info span:last-of-type {margin-bottom:0px;}
  256.  
  257. #info span b {
  258. text-transform:uppercase;
  259. line-height:inherit;
  260. font-weight:700;
  261. letter-spacing:0.25px;
  262. }
  263.  
  264. .links {
  265. display:grid;
  266. grid-template-columns:33.3% 33.3% 33.3%;
  267. }
  268.  
  269. .links a {
  270. display:block;
  271. margin-right:10px;
  272. color:var(--text);
  273. }
  274.  
  275. .links a:hover {color:var(--link-hover);}
  276.  
  277. #quote {font-style:italic;text-align:left;}
  278.  
  279. #characters span {display:block;margin-top:10px;text-align:left;}
  280.  
  281. #characters span:last-of-type {margin-bottom:0px;}
  282.  
  283. #characters span b {
  284. color:var(--headings);
  285. background-image:linear-gradient(0deg, var(--accent) 40%,transparent 40%);
  286. }
  287.  
  288. .meter {
  289. height: 6px; /* Can be anything */
  290. position: relative;
  291. background: #f6f6f6;
  292. -moz-border-radius: 25px;
  293. -webkit-border-radius: 25px;
  294. border-radius: 25px;
  295. padding:2px;
  296. margin-top:15px;
  297. }
  298.  
  299. .meter > span {
  300. display: block;
  301. height: 100%;
  302. border-top-right-radius: 8px;
  303. border-bottom-right-radius: 8px;
  304. border-top-left-radius: 20px;
  305. border-bottom-left-radius: 20px;
  306. background-color:var(--progress-bar);
  307. position: relative;
  308. overflow: hidden;
  309. }
  310.  
  311. .meter > span:after {
  312. content: "";
  313. position: absolute;
  314. top: 0; left: 0; bottom: 0; right: 0;
  315. background-image: linear-gradient(
  316. -45deg,
  317. rgba(255, 255, 255, .2) 25%,
  318. transparent 25%,
  319. transparent 50%,
  320. rgba(255, 255, 255, .2) 50%,
  321. rgba(255, 255, 255, .2) 75%,
  322. transparent 75%,
  323. transparent
  324. );
  325. z-index: 1;
  326. background-size: 50px 50px;
  327. animation: move 2s linear infinite;
  328. border-top-right-radius: 8px;
  329. border-bottom-right-radius: 8px;
  330. border-top-left-radius: 20px;
  331. border-bottom-left-radius: 20px;
  332. overflow: hidden;
  333. }
  334.  
  335. iframe.tmblr-iframe {display:none;}
  336.  
  337. </style>
  338. </head>
  339. <body>
  340.  
  341. <!------------------------------------------------------------------------->
  342. <!-- -->
  343. <!-- customization starts here -->
  344. <!-- -->
  345. <!------------------------------------------------------------------------->
  346.  
  347.  
  348.  
  349.  
  350. <div class="container">
  351.  
  352. <!--------------- featured image section --------------->
  353.  
  354. <div id="featuredimage">
  355.  
  356. <!-- navigation - update links and titles - more icons at
  357. https://fontawesome.com/icons?d=gallery&m=free -->
  358.  
  359. <nav>
  360. <a href="/" title="index">
  361. <i class="fas fa-home"></i></a>
  362. <a href="/ask" title="inbox">
  363. <i class="fas fa-envelope"></i></a>
  364. <a href="/" title="title">
  365. <i class="fas fa-bookmark"></i></a>
  366. <a href="http://www.tumblr.com" title="dash">
  367. <i class="fas fa-bars"></i></a>
  368.  
  369. <!-- pls don't remove! <3 -->
  370. <a href="http://www.bebewrites.tumblr.com" title="code">
  371. <i class="fas fa-code"></i></a>
  372. </nav>
  373.  
  374. <div id="wiptitle">
  375. <div id="titletext">
  376. <!-- title -->
  377. love & other acts of courage
  378. <br/>
  379.  
  380. <span>
  381. <!-- tagline - optional -->
  382. a novel
  383. </span>
  384. </div>
  385. </div>
  386. </div>
  387.  
  388.  
  389. <!--------------- content sections --------------->
  390.  
  391. <div class="content">
  392.  
  393.  
  394. <!-- stats -->
  395.  
  396. <section>
  397. <h1>stats <span><i class="fas fa-chart-bar"></i></span></h1>
  398.  
  399. <div class="stats">
  400. <span><b>status:</b> in progress</span>
  401. <span><b>genre:</b> ya fantasy</span>
  402. <span><b>started:</b> january 2020</span>
  403. <span><b>pov:</b> third/past</span>
  404. <span><b>draft:</b> first draft</span>
  405. <span><b>wordcount:</b> 40k words</span>
  406. </div>
  407.  
  408.  
  409. <!-- progress bar -->
  410.  
  411. <div class="meter">
  412. <!-- change percentage -->
  413. <span style="width: 60%"></span>
  414. </div>
  415.  
  416. </section>
  417.  
  418.  
  419. <!-- synopsis -->
  420.  
  421. <section>
  422. <h1>synopsis <span><i class="fas fa-edit"></i></span></h1>
  423.  
  424. lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem at nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. curabitur sodales ligula in libero. sed dignissim lacinia nunc. curabitur tortor. pellentesque nibh. aenean quam. in scelerisque sem at dolor. maecenas mattis. sed convallis tristique sem. proin ut ligula vel nunc egestas.
  425. </section>
  426.  
  427.  
  428. <!-- links -->
  429.  
  430. <section>
  431. <h1>links <span><i class="fas fa-link"></i></span></h1>
  432.  
  433. <div class="links">
  434. <a href="/">intro post</a>
  435. <a href="/">wip tag</a>
  436. <a href="/">character tag</a>
  437. <a href="/">playlist</a>
  438. <a href="/">pinterest</a>
  439. <a href="/">unsplash</a>
  440. </div>
  441. </section>
  442.  
  443.  
  444. <!-- themes -->
  445.  
  446. <section>
  447. <h1>themes <span><i class="fas fa-star"></i></span></h1>
  448.  
  449. <!-- use the <br/> tag add a line break if you need one, to keep the themes from breaking at the end of a line and going onto the next -->
  450.  
  451. <div id="themes">
  452. <span>they were roommates</span>
  453. <span>pining idiots</span>
  454. <span>lgbt+ cast</span>
  455. <span>internal conflict</span><br/>
  456. <span>soft fluff</span>
  457. <span>romance</span>
  458. <span>there was one bed</span>
  459. <span>all the tropes</span>
  460. </div>
  461. </section>
  462.  
  463.  
  464. <!-- characters -->
  465.  
  466. <section>
  467. <h1>characters <span><i class="fas fa-user-friends"></i></span></h1>
  468.  
  469. <div id="characters">
  470. <span><b>Character Name</b>: lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  471.  
  472. <span><b>Character Name</b>: lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  473.  
  474. <span><b>Character Name</b>: lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  475. </div>
  476. </section>
  477.  
  478.  
  479. <!-- additional info -->
  480.  
  481. <section>
  482. <h1>worldbuilding <span><i class="fas fa-globe-americas"></i></span></h1>
  483.  
  484. <div id="info">
  485. <span><b>Heading:</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  486.  
  487. <span><b>Heading:</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  488.  
  489. <span><b>Heading:</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam.</span>
  490.  
  491. </div>
  492. </section>
  493.  
  494. </div><!-- end content -->
  495.  
  496. </div><!-- end container -->
  497. </body>
  498. </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!