API tools faq
paste
Advertisement
str-wrs

All: Momus

str-wrs
Jun 17th, 2016
3,957
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.49 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ALL-IN-ONE PAGE: MOMUS
  4. based on the dropbox website!
  5. by acuite
  6.  
  7. - pages included: about, ask, navigation, blogroll
  8. - don't steal this pls
  9. - enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
  10.  
  11. - @acuite for more themes
  12.  
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.  
  19. <title>Navigation - {Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}" />
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22. <script src="http://static.tumblr.com/dxh5xq2/v6Gn8ju1e/tabs.js"></script>
  23. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  24. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">
  25. <style type="text/css">
  26.  
  27. #tumblr_controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}
  28.  
  29. /* Scroll */
  30.  
  31. ::-webkit-scrollbar {height:7px;width:7px;background:#f8f8f8;}
  32. ::-webkit-scrollbar-thumb {background:#eee;}
  33. ::-webkit-scrollbar,::-webkit-scrollbar-thumb{border:solid #fff;border-width:5px 0 5px 5px;}
  34.  
  35. /* General */
  36.  
  37. body {
  38. margin:0px;
  39. color:#111;
  40. font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
  41. font-size:12px;
  42. background:#fff;
  43. font-smooth:always;
  44. -webkit-font-smoothing:antialiased;
  45. -moz-osx-font-smoothing: grayscale;
  46. }
  47.  
  48. a,ul#tabs li {color:#999;text-decoration:none;}
  49. a:hover {color:#0070E0;}
  50.  
  51. /* Credits */
  52.  
  53. .r {position:fixed;top:40px;left:18px;z-index:9999;height:40px;line-height:40px;color:#aaa;}
  54. .r i {font-size:13px;}
  55. .c {
  56. position:fixed;
  57. bottom:30px;
  58. right:30px;
  59. font-size:10px;
  60. letter-spacing:1px;
  61. text-transform:uppercase;
  62. }
  63.  
  64. /* Containers */
  65.  
  66. .hold {margin-top:40px;border-top:1px solid #eee;}
  67. .center {position:relative;width:calc(100% - 240px - 80px - 280px);left:240px;margin:40px;font-size:0;}
  68. ul#tab {list-style-type:none;margin:0;padding:0;}
  69. ul#tab li.active {display:block;}
  70. ul#tab li {display:none;}
  71.  
  72. /* Sidebar */
  73.  
  74. aside {position:fixed;width:160px;height:100%;padding:40px;background:#f7f7f7;top:0;left:0;}
  75. aside h2 {margin:40px 0;font-size:16px;line-height:100%;font-weight:400;}
  76.  
  77. .icon {border-radius:50%;width:40px;}
  78. ul#tabs {list-style-type:none;margin:0;padding:0;}
  79. ul#tabs li.active {color:#0070E0;font-weight:600;}
  80. ul#tabs li:hover {opacity:0.6;}
  81. ul#tabs li {margin:0 0 15px;cursor:pointer;font-size:14px;line-height:100%;}
  82.  
  83. /* Header */
  84.  
  85. header {font-size:0;}
  86. header h1 {width:calc(100% - 210px);margin:0;font-size:19px;line-height:100%;font-weight:700;}
  87. header h1,.srch,.icon {display:inline-block;vertical-align:bottom;}
  88. .srch {
  89. width:190px;
  90. border:1px solid #eee;
  91. border-radius:25px;
  92. padding:6px 9px;
  93. outline:none;
  94. }
  95.  
  96. .srch .fa {font-size:13px;color:#999;float:left;margin-right:7px;}
  97. .srch input {font-size:12px;font-family:inherit;background:inherit;border:none;outline:none;padding:0;}
  98. .srch input[type=text] {color:#999;}
  99. input::-webkit-input-placeholder {color:#999;}
  100. input::-moz-placeholder {color:#999;}
  101. input:-moz-placeholder {color:#999;}
  102. input:-ms-input-placeholder {color:#999;}
  103. input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
  104.  
  105. /* About */
  106.  
  107. .about {font-size:14px;line-height:165%;color:#999;}
  108. .about p {margin:0 0 15px;}
  109.  
  110. /* Navigate */
  111.  
  112. .nav h2, .nav a {display:block;border-bottom:1px solid #eee;padding:16px;}
  113. .nav a:hover,.blog:hover {background:#f7f7f7;}
  114. .nav h2 {font-weight:500;margin:0;font-size:14px;line-height:100%;}
  115. .nav a {font-size:13px;line-height:100%;width:calc(50% - 32px);display:inline-block;}
  116. .nav a:before {font-family:FontAwesome;content:"\f0c1";margin-right:10px;font-size:10px;}
  117. .nav h2:before {font-family:FontAwesome;content:"\f115";margin-right:10px;}
  118.  
  119. /* Blogroll */
  120.  
  121. .blog {
  122. padding:15px 0;
  123. width:118px;
  124. text-align:center;
  125. display:inline-block;vertical-align:middle;
  126. }
  127.  
  128. .blog img{display:block;width:58px;height:58px;margin:0 30px;border-radius:10%;}
  129. .name {display:block;margin-top:10px;font-size:13px;line-height:100%;}
  130.  
  131. /* Common */
  132.  
  133. .about,.nav,.blogroll {overflow-y:auto;height:calc(100vh - 165px);}
  134. .ask,.about,.blogroll {padding-top:15px;}
  135.  
  136. </style>
  137. </head>
  138. <body>
  139. <a href="/" class="r"><i class="fa fa-chevron-left"></i></a>
  140. <div class="center">
  141.  
  142. <header>
  143. <h1>{Name}</h1>
  144. <form action="/search" class="srch" method="get">
  145. <input type="text" name="q" placeholder="Search" value="{SearchQuery}"/>
  146. <i class="fa fa-search"></i>
  147. </form>
  148. </header>
  149.  
  150. <aside>
  151. <img class="icon" src="{PortraitURL-128}">
  152. <h2>Navigation</h2>
  153. <ul id="tabs">
  154. <li class="active">Links</li>
  155. <li>About</li>
  156. <li>Contact</li>
  157. <li>Following</li>
  158. </ul>
  159. </aside>
  160.  
  161. <!-- Do not edit --><ul id="tab"><!-- Do not edit -->
  162.  
  163.  
  164.  
  165.  
  166.  
  167.  
  168.  
  169.  
  170.  
  171.  
  172. <!-- Links Start -->
  173. <li class="active hold nav">
  174.  
  175. <h2>Category</h2>
  176. <a href="/url">link</a>
  177. <a href="/url">link</a>
  178. <a href="/url">link</a>
  179. <a href="/tagged/tag-link">tag</a>
  180. <a href="/tagged/tag-link">tag</a>
  181. <a href="/tagged/tag-link">tag</a>
  182. <h2>Category</h2>
  183. <a href="/url">link</a>
  184. <a href="/url">link</a>
  185. <a href="/url">link</a>
  186. <a href="/tagged/tag-link">tag</a>
  187. <a href="/tagged/tag-link">tag</a>
  188. <a href="/tagged/tag-link">tag</a>
  189.  
  190. </li>
  191. <!-- Links End -->
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202. <!-- About Start -->
  203. <li class="hold about">
  204.  
  205. <p>Your biography text goes here. Add < p > tags between paragraphs if you are planning on writing a lot!!</p>
  206.  
  207. </li>
  208. <!-- About End -->
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218.  
  219. <!-- Ask Start (No edit necessary - automatically generated) -->
  220. <li class="hold"><div class="ask"><iframe frameborder="0" width="100%" height="200" border="none" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com"></iframe></div></li>
  221. <!-- Ask End -->
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228.  
  229.  
  230.  
  231. <!-- Blogroll Start (No edit necessary - automatically generated) -->
  232. <li class="hold"><div class="blogroll">{block:Following}{block:Followed}<a href="{FollowedURL}"><div class="blog {FollowedName}"><img src="{FollowedPortraitURL-128}"><div class="name">{FollowedName}</div></div></a>{/block:Followed}{/block:Following}</div></li><!-- Blogroll End -->
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242.  
  243. <!-- Do not edit below this line --></ul>
  244. </div>
  245. <a class="c" href="http://acuite.tumblr.com">acuite</a>
  246. </body>
  247. </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!