API tools faq
paste
med-x

pohoro myriad revamped

med-x
Sep 25th, 2018
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. ==============================================
  8.  
  9.  
  10. 「 CODES BY POHRORO 」
  11. @ pohroro.com
  12. Page ▸ Myriad (Revamped)
  13. v1.0.0 | Updated: 22/07/18
  14.  
  15. +
  16.  
  17. Icons:
  18. ohsojin.livejournal.com
  19.  
  20.  
  21. ==============================================
  22.  
  23. -->
  24.  
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. <meta name="viewport" content="width=device-width, initial-scale=1">
  29. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  30.  
  31. <link href="https://static.tumblr.com/yzs4yqx/3O6p0jbhf/base.css" rel="stylesheet">
  32. <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i|Libre+Baskerville:400,400i" rel="stylesheet">
  33.  
  34. <style>
  35.  
  36. :root {
  37.  
  38. /*=== change style options here: ===*/
  39.  
  40. /* global */
  41. --body-font-color: #777;
  42. --body-font-size: 12px;
  43. --body-link-font-color: #000;
  44. --body-link-font-hover-color: #aaa;
  45. --body-background-color: #fff;
  46. --page-border-color: #f9f9f9;
  47.  
  48. /* header */
  49. --title-font-color: #777;
  50. --title-font-size: 20px;
  51. --subtitle-font-size: 12px;
  52. --subtitle-font-color: #999;
  53. --navigation-font-color: #999;
  54. --navigation-font-hover-color: #000;
  55. --navigation-font-size: 6.5px;
  56.  
  57. /* member */
  58. --member-background-color: #fff;
  59. --member-border-color: #f1f1f1;
  60. --member-header-height: 80px;
  61. --member-avatar-border-radius: 50px; /* '0' to make it square */
  62. --member-name-font-color: #555;
  63. --member-name-font-hover-color: #000;
  64. --member-name-font-size: 12px;
  65. --member-url-font-color: #aaa;
  66. --member-url-font-size: 10px;
  67. --member-description-font-color: #888;
  68. --member-description-font-size: 11px;
  69.  
  70. /* miscellaneous */
  71. --scrollbar-color: #777;
  72. --selection-color: #aaa;
  73.  
  74. }
  75.  
  76. .tmblr-iframe {
  77. white-space: nowrap;
  78. -webkit-filter: invert(100%);
  79. filter: invert(100%);
  80. opacity: 0.2;
  81. -webkit-transform: scale(0.6, 0.6);
  82. transform: scale(0.6, 0.6);
  83. -webkit-transform-origin: right top;
  84. transform-origin: right top;
  85. }
  86.  
  87. body {
  88. font: var(--body-font-size) Muli;
  89. color: var(--body-font-color);
  90. background: var(--body-background-color);
  91. }
  92.  
  93. a {
  94. color: var(--body-link-font-color);
  95. }
  96.  
  97. a:hover {
  98. color: var(--body-link-font-hover-color);
  99. }
  100.  
  101. .border {
  102. background-color: var(--page-border-color);
  103. position: fixed;
  104. z-index: 9;
  105. }
  106.  
  107. .top, .bottom {
  108. height: 30px;
  109. width: 100%;
  110. }
  111.  
  112. .top {
  113. border-bottom: 1px solid var(--member-border-color);
  114. top: 0;
  115. left: 0;
  116. }
  117.  
  118. .bottom {
  119. bottom: 0;
  120. border-top: 1px solid var(--member-border-color);
  121. z-index: 999;
  122. width: calc(100% - 60px);
  123. left: 30px;
  124. }
  125.  
  126. .left, .right {
  127. width: 30px;
  128. height: 100%;
  129. top: 30px;
  130. }
  131.  
  132. .left {
  133. left: 0;
  134. border-right: 1px solid var(--member-border-color);
  135. }
  136.  
  137. .right {
  138. right: 0;
  139. border-left: 1px solid var(--member-border-color);
  140. }
  141.  
  142. header {
  143. margin: 50px 23px 0;
  144. padding: 32px 0 20px;
  145. }
  146.  
  147. h1 {
  148. text-transform: capitalize;
  149. font: 400 italic var(--title-font-size) Libre Baskerville;
  150. color: var(--title-font-color);
  151. display: inline-block;
  152. margin-right: 39px;
  153. margin-bottom: 20px;
  154. }
  155.  
  156. h2 {
  157. font-weight: 400;
  158. font-size: var(--subtitle-font-size);
  159. color: var(--subtitle-font-color);
  160. margin-top: 4px;
  161. position: absolute;
  162. display: inline-block;
  163. }
  164.  
  165. nav a {
  166. display: inline-block;
  167. padding-right: 20px;
  168. color: var(--navigation-font-color);
  169. font: var(--navigation-font-size) Libre Baskerville;
  170. text-transform: uppercase;
  171. letter-spacing: 1.5px;
  172. }
  173.  
  174. nav a:hover {
  175. color: var(--navigation-font-hover-color);
  176. }
  177.  
  178. #container {
  179. max-width: 1155px;
  180. margin: 60px auto 40px;
  181. padding: 0 30px;
  182. }
  183.  
  184. figure {
  185. width: 230px;
  186. height: auto;
  187. padding: 4px;
  188. margin: 23px 23px;
  189. display: inline-block;
  190. vertical-align: top;
  191. background: var(--member-background-color);
  192. border: 1px solid var(--member-border-color);
  193. }
  194.  
  195. .header {
  196. width: 100%;
  197. height: var(--member-header-height);
  198. background-size: 230px;
  199. image-rendering: -moz-crisp-edges;
  200. image-rendering: -moz-crisp-edges;
  201. image-rendering: -o-crisp-edges;
  202. image-rendering: -webkit-optimize-contrast;
  203. -ms-interpolation-mode: nearest-neighbor;
  204. }
  205.  
  206. .avatar {
  207. width: 60px;
  208. height: 60px;
  209. margin: -22px 0 0 8px;
  210. float: left;
  211. margin-right: 7px;
  212. image-rendering: -moz-crisp-edges;
  213. image-rendering: -moz-crisp-edges;
  214. image-rendering: -o-crisp-edges;
  215. image-rendering: -webkit-optimize-contrast;
  216. -ms-interpolation-mode: nearest-neighbor;
  217. border: 4px solid var(--member-background-color);
  218. border-radius: var(--member-avatar-border-radius);
  219. }
  220.  
  221. figcaption {
  222. padding: 11px 13px 11px 14px;
  223. line-height: 20px;
  224. }
  225.  
  226. figcaption a .name {
  227. color: var(--member-name-font-color);
  228. font: italic var(--member-name-font-size)/20px Libre Baskerville;
  229. margin-bottom: -5px;
  230. letter-spacing: 0.5;
  231. -webkit-transition: all 0.4s ease;
  232. transition: all 0.4s ease;
  233. }
  234.  
  235. figcaption a:hover .name {
  236. color: var(--member-name-font-hover-color);
  237. }
  238.  
  239. figcaption a .url {
  240. color: var(--member-url-font-color);
  241. font-size: var(--member-url-font-size);
  242. letter-spacing: 0.5px;
  243. }
  244.  
  245. .desc {
  246. line-height: 17px;
  247. margin-top: 10px;
  248. text-align: justify;
  249. color: var(--member-description-font-color);
  250. font-size: var(--member-description-font-size);
  251. }
  252.  
  253. ::-webkit-scrollbar {
  254. width: 7px;
  255. background: var(--page-border-color);
  256. }
  257.  
  258. ::-webkit-scrollbar-thumb:vertical {
  259. background: var(--scrollbar-color);
  260. border: 3px solid var(--page-border-color);
  261. }
  262.  
  263. ::selection {
  264. background: var(--selection-color);
  265. color: #fff;
  266. }
  267.  
  268. ::-moz-selection {
  269. background: var(--selection-color);
  270. color: #fff;
  271. }
  272.  
  273. p::selection {
  274. background: var(--selection-color);
  275. color: #fff;
  276. }
  277.  
  278. p::-moz-selection {
  279. background: var(--selection-color);
  280. color: #fff;
  281. }
  282.  
  283. </style>
  284. </head>
  285. <body>
  286.  
  287. <!-- start of page border; remove if unwanted -->
  288.  
  289. <div class="border top"></div>
  290. <div class="border left"></div>
  291. <div class="border right"></div>
  292. <div class="border bottom"></div>
  293.  
  294. <!-- end of page border -->
  295.  
  296. <div id="container">
  297.  
  298. <header>
  299. <h1>
  300. Myriad <!-- title -->
  301. </h1>
  302. <h2>
  303. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <!-- subtitle -->
  304. </h2>
  305. <nav>
  306.  
  307. <!-- navigation links -->
  308.  
  309. <a href="http://tumblr.com">Link One</a>
  310. <a href="http://tumblr.com">Link Two</a>
  311. <a href="http://tumblr.com">Link Three</a>
  312. <a href="http://pohroro.com">Theme</a>
  313.  
  314. </nav>
  315. </header>
  316.  
  317. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  318.  
  319. <figure>
  320. <div class="header" style=
  321. "background-image: url(); background-color: #d9e8eb;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  322. </div>
  323. <img class="avatar"
  324. src="https://i.imgur.com/tJeqvTr.jpg"> <!-- member avatar -->
  325. <figcaption>
  326. <a href="http://tumblr.com"> <!-- member url link -->
  327. <div class="name">
  328. Name One <!-- member name -->
  329. </div>
  330. <div class="url">
  331. @username <!-- member username -->
  332. </div></a>
  333. <div class="desc">
  334.  
  335. <!-- member description -->
  336. Lorem ipsum dolor sit amet consectetur.
  337.  
  338. </div>
  339. </figcaption>
  340. </figure>
  341.  
  342. <!-- end of one member -->
  343.  
  344.  
  345. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  346.  
  347. <figure>
  348. <div class="header" style=
  349. "background-image: url(); background-color: #edc5c3;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  350. </div>
  351. <img class="avatar"
  352. src="https://i.imgur.com/IbLy9g4.jpg"> <!-- member avatar -->
  353. <figcaption>
  354. <a href="http://tumblr.com"> <!-- member url link -->
  355. <div class="name">
  356. Name Two <!-- member name -->
  357. </div>
  358. <div class="url">
  359. @username <!-- member username -->
  360. </div></a>
  361. <div class="desc">
  362.  
  363. <!-- member description -->
  364. Lorem ipsum dolor sit amet consectetur.
  365.  
  366. </div>
  367. </figcaption>
  368. </figure>
  369.  
  370. <!-- end of one member -->
  371.  
  372.  
  373. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  374.  
  375. <figure>
  376. <div class="header" style=
  377. "background-image: url(); background-color: #e3dff3;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  378. </div>
  379. <img class="avatar"
  380. src="https://i.imgur.com/7mqldej.jpg"> <!-- member avatar -->
  381. <figcaption>
  382. <a href="http://tumblr.com"> <!-- member url link -->
  383. <div class="name">
  384. Name Three <!-- member name -->
  385. </div>
  386. <div class="url">
  387. @username <!-- member username -->
  388. </div></a>
  389. <div class="desc">
  390.  
  391. <!-- member description -->
  392. Lorem ipsum dolor sit amet consectetur.
  393.  
  394. </div>
  395. </figcaption>
  396. </figure>
  397.  
  398. <!-- end of one member -->
  399.  
  400.  
  401. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  402.  
  403. <figure>
  404. <div class="header" style=
  405. "background-image: url(); background-color: #b8e3c7;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  406. </div>
  407. <img class="avatar"
  408. src="https://i.imgur.com/Src8ybt.jpg"> <!-- member avatar -->
  409. <figcaption>
  410. <a href="http://tumblr.com"> <!-- member url link -->
  411. <div class="name">
  412. Name Four <!-- member name -->
  413. </div>
  414. <div class="url">
  415. @username <!-- member username -->
  416. </div></a>
  417. <div class="desc">
  418.  
  419. <!-- member description -->
  420. Lorem ipsum dolor sit amet consectetur.
  421.  
  422. </div>
  423. </figcaption>
  424. </figure>
  425.  
  426. <!-- end of one member -->
  427.  
  428.  
  429. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  430.  
  431. <figure>
  432. <div class="header" style=
  433. "background-image: url(); background-color: #f8e2b3;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  434. </div>
  435. <img class="avatar"
  436. src="https://i.imgur.com/KAjGIV5.jpg"> <!-- member avatar -->
  437. <figcaption>
  438. <a href="http://tumblr.com"> <!-- member url link -->
  439. <div class="name">
  440. Name Five <!-- member name -->
  441. </div>
  442. <div class="url">
  443. @username <!-- member username -->
  444. </div></a>
  445. <div class="desc">
  446.  
  447. <!-- member description -->
  448. Lorem ipsum dolor sit amet consectetur.
  449.  
  450. </div>
  451. </figcaption>
  452. </figure>
  453.  
  454. <!-- end of one member -->
  455.  
  456.  
  457. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  458.  
  459. <figure>
  460. <div class="header" style=
  461. "background-image: url(); background-color: #f5dce0;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  462. </div>
  463. <img class="avatar"
  464. src="https://i.imgur.com/qJ4xlJ7.jpg"> <!-- member avatar -->
  465. <figcaption>
  466. <a href="http://tumblr.com"> <!-- member url link -->
  467. <div class="name">
  468. Name Six <!-- member name -->
  469. </div>
  470. <div class="url">
  471. @username <!-- member username -->
  472. </div></a>
  473. <div class="desc">
  474.  
  475. <!-- member description -->
  476. Lorem ipsum dolor sit amet consectetur.
  477.  
  478. </div>
  479. </figcaption>
  480. </figure>
  481.  
  482. <!-- end of one member -->
  483.  
  484.  
  485. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  486.  
  487. <figure>
  488. <div class="header" style=
  489. "background-image: url(); background-color: #fbceb0;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  490. </div>
  491. <img class="avatar"
  492. src="https://i.imgur.com/GkpEvrH.jpg"> <!-- member avatar -->
  493. <figcaption>
  494. <a href="http://tumblr.com"> <!-- member url link -->
  495. <div class="name">
  496. Name Seven <!-- member name -->
  497. </div>
  498. <div class="url">
  499. @username <!-- member username -->
  500. </div></a>
  501. <div class="desc">
  502.  
  503. <!-- member description -->
  504. Lorem ipsum dolor sit amet consectetur.
  505.  
  506. </div>
  507. </figcaption>
  508. </figure>
  509.  
  510. <!-- end of one member -->
  511.  
  512.  
  513. <!-- start of one member; copy until 'end of one member' and paste for more, remove if unwanted -->
  514.  
  515. <figure>
  516. <div class="header" style=
  517. "background-image: url(); background-color: #e0e0e0;"> <!-- member header here; either insert an image url between the brackets or just input the background color -->
  518. </div>
  519. <img class="avatar"
  520. src="https://i.imgur.com/fTfuviN.jpg"> <!-- member avatar -->
  521. <figcaption>
  522. <a href="http://tumblr.com"> <!-- member url link -->
  523. <div class="name">
  524. Name Eight <!-- member name -->
  525. </div>
  526. <div class="url">
  527. @username <!-- member username -->
  528. </div></a>
  529. <div class="desc">
  530.  
  531. <!-- member description -->
  532. Lorem ipsum dolor sit amet consectetur.
  533.  
  534. </div>
  535. </figcaption>
  536. </figure>
  537.  
  538. <!-- end of one member -->
  539.  
  540. </div>
  541.  
  542. <script src="https://static.tumblr.com/yzs4yqx/lOsokx99u/smoothscroll.min.js"></script>
  543.  
  544. </body>
  545. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!