API tools faq
paste
Advertisement
solarre

apothecary

solarre
Mar 1st, 2016
8,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. apothecary by solarre
  6.  
  7. -keep credit intact
  8. -don't steal any code
  9. -don't use as a basecode/claim as your own
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
  14.  
  15. <title>apothecary</title> <!--- pick a title --->
  16.  
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:1,
  28. tip_fade_speed:100,
  29. attribute:"title"
  30. });
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  36. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  37. <script type="text/javascript" src="//static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  38.  
  39. <script type="text/javascript">
  40. $(window).load(function(){
  41. var $wall = $('#nav');
  42. $wall.imagesLoaded(function(){
  43. $wall.masonry({
  44. itemSelector: '.column',
  45. isAnimated : true
  46. });
  47. });
  48. });
  49. </script>
  50.  
  51. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  52. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  53.  
  54. </head>
  55. <style type="text/css">
  56. ::-webkit-scrollbar {width:4px; height:auto; background:#fff;}
  57. ::-webkit-scrollbar-corner {background:transparent;}
  58. ::-webkit-scrollbar-thumb:vertical {background:#eee; width:1px; border:1px solid #fff;}
  59. ::-webkit-scrollbar-thumb:horizontal {background:#eee;height:3px !important;}
  60. ::-webkit-scrollbar-increment {width:3px; height:3px; background-color:#fff;}
  61.  
  62. iframe#tumblr_controls, iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop, .tmblr-iframe {
  63. position:fixed;
  64. white-space:nowrap;
  65. -webkit-filter: invert(100%);
  66. -moz-filter: invert(100%);
  67. -o-filter: invert(100%);
  68. -ms-filter: invert(100%);
  69. filter: invert(100%);
  70. opacity:.5;
  71. }
  72.  
  73. #s-m-t-tooltip {
  74. max-width:300px;
  75. padding: 5px 8px;
  76. margin:10px;
  77. background-color:#fff;
  78. font-size:8px;
  79. letter-spacing:1px;
  80. text-transform:uppercase;
  81. color:#777;
  82. border-radius:2px;
  83. border:1px solid #f8f8f8;
  84. z-index:100000000000000000000000000000000000000000;
  85. transition:0.5s ease-in-out;
  86. -webkit-transition:0.5s ease-in-out;
  87. -moz-transition:0.5s ease-in-out;
  88. -ms-transition:0.5s ease-in-out;
  89. -o-transition:0.5s ease-in-out;
  90. }
  91.  
  92. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  93. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  94. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  95.  
  96. .fade-in {
  97. opacity:0;
  98. -webkit-animation:fadeIn ease-in 1;
  99. -moz-animation:fadeIn ease-in 1;
  100. animation:fadeIn ease-in 1;
  101. -webkit-animation-fill-mode:forwards;
  102. -moz-animation-fill-mode:forwards;
  103. animation-fill-mode:forwards;
  104. -webkit-animation-duration:1s;
  105. -moz-animation-duration:1s; animation-duration:1s; }
  106.  
  107. .fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }
  108.  
  109. /* color of text selection */
  110. ::selection {background-color:#d3e7ff;color:#fff;text-shadow:none;}
  111. ::-o-selection {background-color:#d3e7ff;color:#fff;text-shadow:none;}
  112. ::-moz-selection {background-color:#d3e7ff;color:#fff;text-shadow:none;}
  113.  
  114. *, body, img { cursor:url(http://static.tumblr.com/vmteopo/Eggo12azo/small_white_cursor.png), auto;}
  115.  
  116. a, a:hover, a:active, a i, span.in {cursor:url(http://static.tumblr.com/vmteopo/kOPo12azz/small_white_cursor_help.png), crosshair; }
  117.  
  118. body {
  119. background:#f7f7f7;
  120. font:11px calibri;
  121. line-height:15px;
  122. -moz-font-smoothing:subpixel-antialiased;
  123. -webkit-font-smoothing:subpixel-antialiased;
  124. font-smoothing:subpixel-antialiased;
  125. }
  126.  
  127. a, #nav .column, #sf, #credit {
  128. transition:0.5s ease-in-out;
  129. -webkit-transition:0.5s ease-in-out;
  130. -moz-transition:0.5s ease-in-out;
  131. -ms-transition:0.5s ease-in-out;
  132. -o-transition:0.5s ease-in-out;
  133. }
  134.  
  135. /* link + link hover colors */
  136. a {text-decoration:none;color:#aaa;-moz-outline-style:none;}
  137. a:hover {color:#555;}
  138.  
  139. #contain {
  140. width:700px;
  141. height:auto;
  142. margin:70px auto 0;
  143. padding:10px;
  144. }
  145.  
  146. #words {
  147. width:660px;
  148. padding:30px;
  149. height:auto;
  150. background:#fff;
  151. position:absolute;
  152. margin:60px 0 100px -10px;
  153. z-index:-1;
  154. opacity:1;
  155. }
  156.  
  157. #md {
  158. width:0px;
  159. text-align:center;
  160. margin:10px auto;
  161. }
  162.  
  163. a.links, a.search {
  164. display:inline-block;
  165. position:absolute;
  166. border:1px solid transparent;
  167. padding:5px;
  168. color:#fff;
  169. background:#C9F2EA; /* color of index + searchbar */
  170. overflow:hidden;
  171. }
  172.  
  173. a.links {width:8.5px; overflow:hidden;font-size:8.5px;margin:0px 0px 0 -24px;border-radius:100% 0 100% 100%;}
  174. a.links:hover {width:52px;border-radius:2px 0 2px 2px;margin:0 0 0 -68px;}
  175. span.in {width:0;height:0;overflow:hidden;letter-spacing:1px;font-size:0;line-height:0;opacity:0;transition:0.4s ease-in-out;-webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s;}
  176. a.links:hover span.in {width:auto;height:auto;font-size:8.5px;opacity:1;-webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s;}
  177. a.search:hover {width:140px;border-radius:2px 2px 2px 0;}
  178. a.search {margin:-32px 0px 0 -3.5px;border-radius:100% 100% 100% 0%;height:20px;width:20px;}
  179.  
  180. #title {
  181. color:#777;
  182. width:auto;
  183. text-align:center;
  184. font-size:15px;
  185. margin:60px 0 -25px;
  186. text-transform:uppercase;
  187. letter-spacing:1em;
  188. opacity:1;
  189. padding-left:0.5em;
  190. }
  191.  
  192. #nav .column {
  193. display:block;
  194. float:left;
  195. width:calc((100% - 152px)/4);
  196. /* for 3 columns, change to width:calc((100% - 114px)/3); */
  197. padding:10px;
  198. margin:8px;
  199. border:1px solid #f2f2f2;
  200. }
  201.  
  202. #nav .column:hover {border-color:#C9F2EA;} /* border of sectons on hover */
  203.  
  204. h2 {font:oblique 13px calibri;text-transform:uppercase;color:#888;padding-left:5px;}
  205.  
  206. #nav a {
  207. margin-top:10px;
  208. font-size:10px;
  209. text-transform:uppercase;
  210. height:auto;
  211. width:calc(100% - 10px);
  212. padding:5px;
  213. text-align:left;
  214. display: block;
  215. border-bottom:none;
  216. vertical-align: middle;
  217. -webkit-transform: translateZ(0);
  218. transform: translateZ(0);
  219. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  220. -webkit-backface-visibility: hidden;
  221. backface-visibility: hidden;
  222. -moz-osx-font-smoothing: grayscale;
  223. position: relative;
  224. overflow: hidden;
  225. }
  226.  
  227. #nav a:before {
  228. content: "";
  229. position: absolute;
  230. z-index: -1;
  231. left: 0;
  232. right: 100%;
  233. bottom: 0px;
  234. background:#C9F2EA; /* color of bottom border of links on hover */
  235. height: 1px;
  236. -webkit-transition-property: left, right;
  237. transition-property: left, right;
  238. -webkit-transition-duration: 0.65s;
  239. transition-duration: 0.65s;
  240. -webkit-transition-timing-function: ease-out;
  241. transition-timing-function: ease-out;
  242. }
  243. #nav a:hover:before, #nav a:hover:before, #nav a:active:before {right:0;}
  244.  
  245. #nav .column a:last-child {border:none;}
  246.  
  247. .sfm input {
  248. font-size: 10px;
  249. border: 0px;
  250. text-transform: uppercase;
  251. margin-top: 0px;
  252. color: #fff;
  253. letter-spacing: 1px;
  254. padding: 4px 17px;
  255. font-family: calibri;
  256. outline:none;
  257. text-align:left;
  258. }
  259.  
  260. #sf {
  261. background: url('http://static.tumblr.com/vmteopo/DZvo3eahr/searchw.png') transparent left center no-repeat;
  262. -webkit-filter:brightness(200%);
  263. filter:brightness(200%);
  264. /* for black search icon
  265. background:url('http://static.tumblr.com/vmteopo/R2Do3eapl/searchb.png') transparent left center no-repeat;
  266. delete brightness filters
  267. */
  268. background-size: 15px 10px;
  269. padding-left:25px;
  270. margin-left:2px;
  271. margin-top:-1px;
  272. width:140px;
  273. height:15px;
  274. outline:none;
  275. float:left;
  276. }
  277.  
  278. ::-webkit-input-placeholder {color: inherit;}
  279. :-moz-placeholder {color: inherit; opacity:1;}
  280. ::-moz-placeholder {color: inherit; opacity:1;}
  281. :-ms-input-placeholder {color: inherit;}
  282. input:focus::-webkit-input-placeholder {color: transparent;}
  283. input:focus:-moz-placeholder {color: transparent;}
  284. input:focus::-moz-placeholder {color: transparent;}
  285. input:focus:-ms-input-placeholder { color: transparent;}
  286.  
  287. #return a:hover {border:3px solid transparent;background:#000;color:#fff;}
  288.  
  289. #credit, #credit a {
  290. position:fixed;
  291. bottom:20px;
  292. right:20px;
  293. color:{color:text};
  294. font:normal normal 12px calibri;
  295. text-decoration:none;
  296. }
  297.  
  298. </style></head><body>
  299.  
  300.  
  301. <div id="contain" class="box fade-in one">
  302. <div id="md">
  303. <a href="/" class="links"><i class="fa fa-home"></i><span class="in">&emsp;INDEX</span></a>
  304. <a class="search">
  305. <script language="javascript">
  306. function send()
  307. {document.theform.submit()}
  308. </script>
  309. <form action="/search" method="get" class="sfm" name="theform">
  310. <input type="text" name="q" placeholder="search" value="" id="sf" />
  311. </form>
  312. </a>
  313. </div>
  314. <div id="title">apothecary</div>
  315.  
  316. <div id="words">
  317.  
  318. <div id="nav">
  319.  
  320. <!---
  321. link section template:
  322.  
  323. <div class="column">
  324. <h2> title </h2>
  325. <a href="link url">link</a>
  326. <a href="link url">link</a>
  327. <a href="link url">link</a>
  328.  
  329. --->
  330.  
  331. <div class="column">
  332. <h2>bangtan</h2>
  333. <a href="/">run</a>
  334. <a href="/">butterfly</a>
  335. <a href="/">dead leaves</a>
  336. <a href="/">house of cards</a>
  337. <a href="/">wake up</a>
  338. <a href="/">tomorrow</a>
  339. </div>
  340.  
  341. <div class="column">
  342. <h2>baek yerin</h2>
  343. <a href="/">blue</a>
  344. <a href="/">across the universe</a>
  345. <a href="/">as i am</a>
  346. <a href="/">잠들고 싶어(zZ)</a>
  347. <a href="/">don't leave me alone</a>
  348. <a href="/">that's why</a>
  349. </div>
  350.  
  351. <div class="column">
  352. <h2>f(x)</h2>
  353. <a href="/">4 walls</a>
  354. <a href="/">red light</a>
  355. <a href="/">deja vu</a>
  356. <a href="/">diamond</a>
  357. <a href="/">goodbye summer</a>
  358. <a href="/">paper heart</a>
  359. </div>
  360.  
  361. <div class="column">
  362. <h2>exo</h2>
  363. <a href="/">sing for you</a>
  364. <a href="/">love me right</a>
  365. <a href="/">lady luck</a>
  366. <a href="/">heart attack</a>
  367. <a href="/">machine</a>
  368. <a href="/">love love love</a>
  369. </div>
  370.  
  371. </div>
  372. </div>
  373.  
  374. </div>
  375.  
  376. <div id="credit"><a href="http://solarre.tumblr.com" title="solarre">☼</a></div>
  377.  
  378. </body>
  379. </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!