API tools faq
paste
Advertisement
ciralism

Compass Rose

ciralism
May 6th, 2015
18,284
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Ddiv/xhtml1-transitional.ddiv">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>About The Blogger</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---------
  9. COMPASS ROSE
  10. A Navigation/Tags Page by CIRALISM
  11.  
  12. //standard theme rules apply
  13. //don't be a dick turd
  14. //use respectfully or not at all
  15. //enjoy!
  16.  
  17. PERSONALIZATION
  18. -comments are in the HTML section (body) to help you customize
  19. -for changing colors, scan through the CSS (style) and look for "your color" in a comment or anywhere where grey instructions are given.
  20.  
  21. ----------->
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  24.  
  25.  
  26.  
  27. <style type="text/css">
  28.  
  29. #credit {
  30. position:fixed;
  31. width:80px;
  32. text-align:right;
  33. right:5px;
  34. bottom:5px;
  35. padding:5px;
  36. font-family:Lato, Sans-Serif;
  37. font-weight:bold;
  38. font-size:7px;
  39. text-transform:uppercase;
  40. letter-spacing:1px
  41. }
  42.  
  43. #credit a {color:black;font-weight:bold;}
  44.  
  45.  
  46. body {
  47. background-color:#f3f3f3;
  48. color:#000;
  49. font:normal normal 10px 'Lato';
  50. letter-spacing:1px;
  51. }
  52.  
  53. h1 {
  54. text-transform:uppercase;
  55. font-family:Lato;
  56. font-size:11px;
  57. font-weight:600;
  58. letter-spacing:3px;
  59. text-align:center;
  60. padding:17px 0px;
  61. margin-top:10px;
  62. background-color:rgba(0,0,0,.85); /* uncomment for black header */
  63. /*background-color:#aed5fc; your color*/
  64. color:#fff;
  65. border-bottom:1px solid #e1e1e1;
  66. }
  67.  
  68. h2 {
  69. text-transform:uppercase;
  70. font-size:9px;
  71. font-weight:900;
  72. letter-spacing:2px;
  73. text-align:center;
  74. }
  75.  
  76.  
  77. a, a:visited {
  78. color:#000;
  79. border-bottom:1px solid #dd96a1;/*ACCENT*/
  80. text-decoration:none;
  81. }
  82.  
  83. .containe {
  84. background-color:transparent;
  85. padding:20px;
  86. padding-bottom:100px;
  87. position:absolute;
  88. left:50%;
  89. margin-left:-270px;
  90. width:500px;
  91. top:50%;
  92. margin-top:-260px;
  93. -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  94. -moz-animation: fadein 2s; /* Firefox < 16 */
  95. -ms-animation: fadein 2s; /* Internet Explorer */
  96. -o-animation: fadein 2s; /* Opera < 12.1 */
  97. animation: fadein 2s;
  98. }
  99.  
  100. @keyframes fadein {
  101. from { opacity: 0; }
  102. to { opacity: 1; }
  103. }
  104.  
  105. /* Firefox < 16 */
  106. @-moz-keyframes fadein {
  107. from { opacity: 0; }
  108. to { opacity: 1; }
  109. }
  110.  
  111. /* Safari, Chrome and Opera > 12.1 */
  112. @-webkit-keyframes fadein {
  113. from { opacity: 0; }
  114. to { opacity: 1; }
  115. }
  116.  
  117. /* Internet Explorer */
  118. @-ms-keyframes fadein {
  119. from { opacity: 0; }
  120. to { opacity: 1; }
  121. }
  122.  
  123. /* Opera < 12.1 */
  124. @-o-keyframes fadein {
  125. from { opacity: 0; }
  126. to { opacity: 1; }
  127. }
  128.  
  129. .top {
  130. width:400px;
  131. display:inline-block;
  132. }
  133.  
  134. .desc {
  135. width:190px;
  136. height:40px;
  137. display:inline-block;
  138. padding:10px;
  139. background-color:#fff;
  140. border-bottom:1px solid #ddd;
  141. text-transform:uppercase;
  142. font-size:8px;
  143. letter-spacing:1px;
  144. font-weight:300;
  145. line-height:180%;
  146. margin-top:0px;
  147. position:absolute;
  148. }
  149.  
  150. .icon {
  151. background-color:white;
  152. width:40px;
  153. height:40px;
  154. padding:10px;
  155. border-bottom:1px solid #ddd;
  156. display:inline-block;
  157. margin-left:220px;
  158. margin-top:0px;
  159. }
  160.  
  161. .clink {
  162. margin-left:10px;
  163. display:inline-block;
  164. margin-top:-05px;
  165. height:40px;
  166. text-align:center;
  167. text-transform:uppercase;
  168. font-weight:300;
  169. font-size:7px;
  170. position:absolute;
  171. margin-left:-8px;
  172. width:240px;
  173. }
  174.  
  175. .clink a {
  176. display:inline-block;
  177. width:85px;
  178. margin-left:5px;
  179. margin-top:5px;
  180. background-color:white;
  181. padding:9px 8px 10px 8px;
  182. border-bottom:1px solid #ddd;
  183. -webkit-transition-duration:500ms;-o-transition-duration:500ms;-moz-transition-duration:500ms;-ms-transition-duration:500ms;
  184. }
  185.  
  186. .clink a:hover {
  187. color:#ddd;
  188. }
  189.  
  190. .main {
  191. margin-top:-4px;
  192. margin-left:-15px;
  193. width:550px;
  194. }
  195.  
  196. .abox {
  197. width:221px;
  198. padding:10px 11px;
  199. margin-left:14px;
  200. margin-top:14px;
  201. float:left;
  202. background-color:white;
  203. border-bottom:1px solid #ddd;
  204. }
  205.  
  206. .poo {
  207. display:block;
  208. height:40px;
  209. }
  210.  
  211.  
  212. .abox h2 {
  213. font-size:7px;
  214. text-align:center;
  215. padding:10px 12px 12px 12px;
  216. color:#000;/*your color*/
  217. /*background:rgba(0,0,0,.85);*/ /*uncomment for black*/
  218. border:1px solid #eee;/*your color*/
  219. }
  220.  
  221. .tags {
  222. display:block;
  223. text-transform:uppercase;
  224. font-weight:300;
  225. font-size:8px;
  226. }
  227.  
  228. .tags a {
  229. display:block;
  230. border-bottom:none;
  231. padding:8px;
  232. background-color:white;
  233. -webkit-transition-duration:600ms;-o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;
  234. }
  235.  
  236.  
  237. .tags a:hover {
  238. font-weight:400;
  239. color:#fff;
  240. background-color:rgba(0,0,0,.85);/*BLACK or add your color*/
  241. padding-left:35px;
  242. }
  243.  
  244. </style>
  245. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  246.  
  247. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  248.  
  249. <script>
  250. $(function(){
  251. var $container = $('.main');
  252. $container.imagesLoaded(function(){
  253. $container.masonry({
  254. itemSelector: '.abox',
  255. });
  256. });
  257. $container.infinitescroll({
  258. itemSelector : ".abox",
  259. navSelector : "div.pagination",
  260. nextSelector : ".pagination a#next",
  261. loadingImg : "",
  262. loadingText : "<em></em>",
  263. bufferPx : 10000,
  264. extraScrollPx: 12000,
  265. },
  266. // trigger Masonry as a callback
  267. function( newElements ) {
  268. var $newElems = $( newElements ).css({ opacity: 0 });
  269. // ensure that images load before adding to masonry layout
  270. $newElems.imagesLoaded(function(){
  271. $newElems.animate({ opacity: 1 });
  272. $container.masonry( 'appended', $newElems, true );
  273. });
  274. }
  275. );
  276. });
  277. </script>
  278. </head>
  279. <body>
  280. <div class="containe">
  281. <h1>Compass Rose</h1><!---TITLE OF NAVIGATION PAGE HERE--->
  282. <div class="top">
  283.  
  284. <div class="desc">Here, you will find all of the things I regularly tag, listed by category.</div><!---PUT A SHORT DESCRIPTION HERE-->
  285.  
  286. <img class="icon" src="http://40.media.tumblr.com/2b3712a62a88ac47caddbfb7e9d8ae32/tumblr_nkief07sjw1rpjqjso1_250.png"><!---REPLACE WITH URL OF YOUR ICON--->
  287.  
  288. <div class="clink">
  289. <a href="/">index</a><!---FEEL FREE TO CHANGE ALL LINKS EXCEPT CREDIT-->
  290. <a href="/ask">mail</a>
  291. <a href="archive">archive</a>
  292. <a href="http://ciralism.tumblr.com">© THEME</a><!--DON'T TOUCH-->
  293. </div>
  294. </div>
  295.  
  296. <div class="main">
  297.  
  298. <!---EXAMPLE OF A SECTION
  299. PUT IN AS MANY AS YOU LIKE --->
  300. <div class="abox">
  301. <h2>Tag Group Title</h2>
  302. <div class="tags">
  303. <a href="/tagged/">Tag Name</a>
  304. <a href="/tagged/">Tag Name</a>
  305. <a href="/tagged/">Tag Name</a>
  306. <a href="/tagged/">Tag Name</a>
  307. <a href="/tagged/">Tag Name</a>
  308. </div>
  309. </div>
  310. <!---COPY AND PASTE BETWEEN GREY COMMENTS--->
  311. <div class="abox">
  312. <h2>Tag Group Title</h2>
  313. <div class="tags">
  314. <a href="/tagged/">Tag Name</a>
  315. <a href="/tagged/">Tag Name</a>
  316. <a href="/tagged/">Tag Name</a>
  317. <a href="/tagged/">Tag Name</a>
  318. <a href="/tagged/">Tag Name</a>
  319. </div>
  320. </div>
  321.  
  322.  
  323.  
  324.  
  325. </div>
  326. <div id="credit"><a href="http://ciralism.tumblr.com">Ciralism</a></div>
  327.  
  328. </div></div></div>
  329.  
  330. </div>
  331. </body></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!