API tools faq
paste
Advertisement
cvndythemes

MINERVA: PAGE

cvndythemes
Mar 31st, 2019
619
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Page Title</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // MINERVA - TAGS PAGE
  9.  
  10. Designed by etherealthemes
  11. etherealthemes.tumblr.com
  12. ⓒ 2016 - 2019
  13.  
  14. >> TERMS OF USE
  15.  
  16. Do NOT remove the credit
  17. Do NOT claim as your own
  18.  
  19. *You can move the credit, but leave it visible
  20. *Edit as much as you'd like
  21. *Feel free to ask about basic customization
  22. *Page suggestions always welcomed
  23.  
  24. >> THEME HELP
  25.  
  26. Everything is named as what it is, ie to change the sidebarcolors
  27. search "Sidebar".
  28. Search color codes to change:
  29. background: #ffffff, Text: ##000000, Accent: #e8e8e8
  30.  
  31. TO ADD SECTIONS:
  32. To add sections to the sidebar, search:
  33. START SIDEBAR
  34. and copy from START SIDE CONTENT to END SIDE CONTENT
  35. and paste to add a section
  36.  
  37. To add tags sections search
  38. START TAG
  39. and copy from START TAG BLOCK to END TAG BLOCK
  40. and paste to add a section
  41.  
  42. MISC:
  43. All tag links in scroll box to keep page tidy.
  44. Page auto-centers (sidebar + tags)
  45. Auto-fills all page sizes ; drag your window size to preview
  46.  
  47. -->
  48.  
  49.  
  50.  
  51.  
  52. <!-- SCRIPTS-->
  53. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  54.  
  55.  
  56.  
  57.  
  58. <!-- STYLESHEET-->
  59.  
  60. <style type="text/css">
  61.  
  62. /* --- SCROLLBAR --- */
  63.  
  64. ::-webkit-scrollbar-thumb {background:#e8e8e8;border-right:2px solid #ffffff;}
  65.  
  66. ::-webkit-scrollbar {width:6px;background:#ffffff;}
  67.  
  68. /* --- SELECTION ---*/
  69.  
  70. ::-moz-selection {color:#ffffff;background:#000000;opacity:1;}
  71.  
  72. ::selection {color:#ffffff;background:#000000;opacity:1;}
  73.  
  74. /* --- TUMBLR TOOLS --- */
  75.  
  76. iframe.tmblr-iframe {
  77. position:fixed;
  78. z-index:10!important;
  79. top:2px!important;
  80. right:0px!important;
  81. opacity:0;
  82. padding-right:60px;
  83. transform:scale(0.5);
  84. transform-origin:100% 0;
  85. -webkit-transform:scale(0.5);
  86. -webkit-transform-origin:100% 0;
  87. -o-transform:scale(0.5);
  88. -o-transform-origin:100% 0;
  89. -moz-transform:scale(0.5);
  90. -moz-transform-origin:100% 0;
  91. -ms-transform:scale(0.5);
  92. -ms-transform-origin:100% 0;
  93. transition:.2s ease-in-out;
  94. -webkit-transition:.2s ease-in-out;
  95. -moz-transition:.2s ease-in-out;
  96.  
  97. /* ---------- CHANGE TO 0 FOR WHITE TOOLS -- */
  98. filter:invert(1);
  99. -webkit-filter:invert(1);
  100. -o-filter:invert(1);
  101. -moz-filter:invert(1);
  102. -ms-filter:invert(1);
  103. }
  104.  
  105. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  106.  
  107. .tcontrols {
  108. position:fixed;
  109. top:9px;
  110. right:15px;
  111. z-index:9;
  112. transition:.2s ease-in-out;
  113. -webkit-transition:.2s ease-in-out;
  114. -moz-transition:.2s ease-in-out;
  115. }
  116.  
  117. .tcontrols {color:#000000;font-size:14px;}
  118.  
  119. /* --- BODY --- */
  120.  
  121. body {
  122. margin: 0px;
  123. padding: 0px;
  124. font-family:'Open Sans', sans-serif;
  125. color:#000000;
  126. font-size:10px;
  127. line-height:calc(10px + 2px);
  128. font-weight:normal;
  129. word-wrap:normal;
  130. text-align:left;
  131. background:#ffffff;
  132. }
  133.  
  134. a {
  135. color:#000000;
  136. text-decoration:none;
  137. border:0;
  138. opacity:0.6;
  139. transition:0.2s ease-in-out;
  140. -webkit-transition:0.2s ease-in-out;
  141. -moz-transition:0.2s ease-in-out;
  142. }
  143.  
  144. a:hover {opacity:1.0;}
  145.  
  146. b,strong {font-weight:600;}
  147.  
  148. .et {position:fixed;color:#000000;right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc(10px - 0.5px);z-index:3;}
  149.  
  150. .block {
  151. position:fixed;
  152. top:0px;
  153. left:0px;
  154. background:#ffffff;
  155. height:33px;
  156. width:100%;
  157. z-index:1;
  158. }
  159.  
  160. /* --- SIDEBAR --- */
  161.  
  162. .sidebar {
  163. position:fixed;
  164. top:0px;
  165. left:0px;
  166. padding:40px 20px 20px 20px;
  167. height:100%;
  168. width:160px;
  169. background:#ffffff;
  170. text-align:center;
  171. text-transform:uppercase;
  172. }
  173.  
  174. .sidebar a {
  175. display:block;
  176. padding:0px;
  177. text-transform:uppercase;
  178. padding:5px 0px 0px 0px;
  179. text-transform:uppercase;
  180. line-height:16px;
  181. font-weight:normal;
  182. color:#000000;
  183. text-decoration:none;
  184. transition:0.2s ease-in-out;
  185. -webkit-transition:0.2s ease-in-out;
  186. -moz-transition:0.2s ease-in-out;
  187. }
  188.  
  189. .sidebar h1 {
  190. display:block;
  191. text-transform:uppercase;
  192. padding:20px 0px 0px 0px;
  193. font-size:calc(10px + 1px);
  194. line-height:calc(10px + 5px);
  195. font-weight:600;
  196. color:#000000;
  197. text-decoration:none;
  198. font-weight:normal!important;
  199. }
  200.  
  201. .sidebar b:first-of-type {padding-top:10px;}
  202.  
  203. .side {
  204. width:160px;
  205. height:145px;
  206. overflow:scroll;
  207. background:#ffffff;
  208. }
  209.  
  210. /* --- CONTAINER --- */
  211.  
  212. .container {
  213. position:absolute;
  214. top:0px;
  215. left:0px;
  216. margin-left:200px;
  217. background:#ffffff;
  218. width:calc(100% - 230px - 60px);
  219. padding:40px 30px 20px 30px;
  220. text-align:center;
  221. }
  222.  
  223. /* --- TAGS --- */
  224.  
  225. .section {
  226. width:150px;
  227. margin:20px 30px;
  228. background:#ffffff;
  229. display:inline-block;
  230. }
  231.  
  232. .section h1 {
  233. display:block;
  234. text-transform:uppercase;
  235. font-size:calc(10px + 1px);
  236. line-height:calc(10px + 5px);
  237. font-weight:600;
  238. color:#000000;
  239. text-decoration:none;
  240. font-weight:normal!important;
  241. }
  242.  
  243. .tags {
  244. width:152px;
  245. height:176px!important;
  246. overflow:scroll!important;
  247. margin-top:10px;
  248. }
  249.  
  250. .tags a {
  251. display:block;
  252. text-transform:uppercase;
  253. padding:4px 0px;
  254. color:#000000;
  255. text-decoration:none;
  256. transition:0.2s ease-in-out;
  257. -webkit-transition:0.2s ease-in-out;
  258. -moz-transition:0.2s ease-in-out;
  259. }
  260.  
  261. .tags a:hover {opacity:1.0;}
  262.  
  263. </style>
  264. <body>
  265.  
  266.  
  267.  
  268.  
  269. <!-- DO NOT EDIT -->
  270. <div class="tcontrols">+</div><div class="block"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
  271.  
  272.  
  273.  
  274.  
  275. <!-- START SIDEBAR -->
  276. <div class="sidebar">
  277.  
  278.  
  279. <!-- Start Side Content -->
  280. <h1>navigation</h1>
  281. <a href="/">Index</a>
  282. <a href="/ask">Message</a>
  283. <a href="/">Link</a>
  284. <a href="/">Link</a>
  285. <!-- End Side Content -->
  286.  
  287.  
  288.  
  289. <!-- Start Side Content -->
  290. <h1>Title</h1>
  291. <a href="/">Link</a>
  292. <a href="/">Link</a>
  293. <a href="/">Link</a>
  294. <a href="/">Link</a>
  295. <a href="/">Link</a>
  296. <a href="/">Link</a>
  297. <!-- End Side Content -->
  298.  
  299.  
  300.  
  301. <!-- Start Side Content -->
  302. <h1>Title</h1>
  303. <a href="/">Link</a>
  304. <a href="/">Link</a>
  305. <a href="/">Link</a>
  306. <a href="/">Link</a>
  307. <!-- End Side Content -->
  308.  
  309.  
  310. </div>
  311. <!-- END SIDEBAR -->
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323. <!-- START CONTAINER -->
  324. <div class="container">
  325.  
  326.  
  327.  
  328.  
  329.  
  330. <!-- START TAG BLOCK -->
  331. <div class="section">
  332. <h1>Tag Title</h1>
  333. <img src="https://placehold.it/150X150"/>
  334.  
  335. <div class="tags">
  336. <a href="/">Link</a>
  337. <a href="/">Link</a>
  338. <a href="/">Link</a>
  339. <a href="/">Link</a>
  340. <a href="/">Link</a>
  341. <a href="/">Link</a>
  342. </div>
  343. </div>
  344. <!-- END TAG BLOCK -->
  345.  
  346.  
  347.  
  348.  
  349. <!-- START TAG BLOCK -->
  350. <div class="section">
  351. <h1>Tag Title</h1>
  352. <img src="https://placehold.it/150X150"/>
  353.  
  354. <div class="tags">
  355. <a href="/">Link</a>
  356. <a href="/">Link</a>
  357. <a href="/">Link</a>
  358. <a href="/">Link</a>
  359. <a href="/">Link</a>
  360. <a href="/">Link</a>
  361. <a href="/">Link</a>
  362. <a href="/">Link</a>
  363. <a href="/">Link</a>
  364. </div>
  365. </div>
  366. <!-- END TAG BLOCK -->
  367.  
  368.  
  369.  
  370.  
  371. <!-- START TAG BLOCK -->
  372. <div class="section">
  373. <h1>Tag Title</h1>
  374. <img src="https://placehold.it/150X150"/>
  375.  
  376. <div class="tags">
  377. <a href="/">Link</a>
  378. <a href="/">Link</a>
  379. <a href="/">Link</a>
  380. <a href="/">Link</a>
  381. <a href="/">Link</a>
  382. <a href="/">Link</a>
  383. <a href="/">Link</a>
  384. <a href="/">Link</a>
  385. <a href="/">Link</a>
  386. </div>
  387. </div>
  388. <!-- END TAG BLOCK -->
  389.  
  390.  
  391.  
  392.  
  393. <!-- START TAG BLOCK -->
  394. <div class="section">
  395. <h1>Tag Title</h1>
  396. <img src="https://placehold.it/150X150"/>
  397.  
  398. <div class="tags">
  399. <a href="/">Link</a>
  400. <a href="/">Link</a>
  401. <a href="/">Link</a>
  402. <a href="/">Link</a>
  403. <a href="/">Link</a>
  404. <a href="/">Link</a>
  405. <a href="/">Link</a>
  406. </div>
  407. </div>
  408. <!-- END TAG BLOCK -->
  409.  
  410.  
  411.  
  412.  
  413. <!-- START TAG BLOCK -->
  414. <div class="section">
  415. <h1>Tag Title</h1>
  416. <img src="https://placehold.it/150X150"/>
  417.  
  418. <div class="tags">
  419. <a href="/">Link</a>
  420. <a href="/">Link</a>
  421. <a href="/">Link</a>
  422. <a href="/">Link</a>
  423. <a href="/">Link</a>
  424. </div>
  425. </div>
  426. <!-- END TAG BLOCK -->
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433. </div>
  434. <!-- END CONTAINER -->
  435.  
  436.  
  437.  
  438.  
  439.  
  440. </body>
  441. </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!