API tools faq
paste
Advertisement
silbrigthemes

Minze (Page 23)

silbrigthemes
Nov 11th, 2019
852
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.88 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. MINZE
  7. Page #23 by silbrigthemes
  8.  
  9. Minze (ger.: mint) is a responsive masonry blogroll page.
  10.  
  11. ----------
  12.  
  13. Rules:
  14.  
  15. 1) Do not use as base code.
  16. 2) Do not customize beyond recognition.
  17. 3) Do not steal (parts of) the code.
  18. 4) Do not claim as your own.
  19. 5) Do not delete or alter the credit.
  20.  
  21. ----------
  22.  
  23. Useful comments to this code have been made.
  24.  
  25. If you need any help feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  26.  
  27. Have fun!
  28.  
  29. Love,
  30. Julia <3
  31.  
  32. ----------
  33.  
  34. Note:
  35.  
  36. This work is protected by a creative commons
  37. Attribution-NonCommercial-NoDerivatives 4.0 International
  38. (CC BY-NC-ND 4.0)
  39. license.
  40.  
  41. -->
  42.  
  43. <head>
  44.  
  45. <meta charset="utf-16">
  46. <title>{Title} | Blogroll</title>
  47. {block:Description}
  48. <meta name="description" content="{MetaDescription}" />
  49. {/block:Description}
  50. <link rel="shortcut icon" href="{Favicon}"/>
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  52. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  53.  
  54. <!-- Necessary for the theme to be responsive. -->
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56.  
  57. <!-- Necessary for the scripts to work. -->
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  59.  
  60. <!-- Changes the toolbar color on mobile. -->
  61. <meta name="theme-color" content="#bbeedd"/>
  62.  
  63. <!-- Icon font, by fontawesome. -->
  64. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  65.  
  66. <!-- Masonry Libraries -->
  67. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  68. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  69.  
  70. <!-- Tooltip Script -->
  71. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  72. <script>
  73. (function($){
  74. $(document).ready(function(){
  75. $("[title]").style_my_tooltips({
  76. tip_follows_cursor:true,
  77. tip_delay_time:200,
  78. tip_fade_speed:300
  79. }
  80. );
  81. });
  82. })(jQuery);
  83. </script>
  84.  
  85. <!-- Roboto Mono -->
  86. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  87. <!-- Open Sans -->
  88. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  89.  
  90. <style>
  91.  
  92. body{
  93. margin:0;
  94. top:0;
  95. left:0;
  96. background-color:#bed; /* background color */
  97. color:#222; /* text color */
  98. font-size:1em; /* font size */
  99. font-family:"Open Sans", Verdana; /* custom font */
  100. overflow-x:hidden;
  101. }
  102.  
  103. body.night{
  104. background-color:#078c5f; /* background color */
  105. color:white; /* text color */
  106. }
  107.  
  108. body.access{
  109. font-size:18px; /* font-size */
  110. }
  111.  
  112. html{
  113. visibility:hidden;
  114. scroll-behavior:smooth;
  115. }
  116.  
  117. /* Custom Scrollbar */
  118. ::-webkit-scrollbar{
  119. width:10px;
  120. }
  121.  
  122. ::-webkit-scrollbar-thumb{
  123. width:10px;
  124. border-radius:5px; /* round corners */
  125. background-color:white; /* background color */
  126. }
  127.  
  128. /* Custom Text Selection */
  129. ::selection{
  130. background-color:#bed; /* background color */
  131. }
  132.  
  133. body.night ::selection{
  134. background-color:#078c5f; /* background color */
  135. }
  136.  
  137. ::-moz-selection{
  138. background-color:#bed; /* background color */
  139. }
  140.  
  141. body.night ::-moz-selection{
  142. background-color:#078c5f; /* background color */
  143. }
  144.  
  145. ::-o-selection{
  146. background-color:#bed; /* background color */
  147. }
  148.  
  149. body.night ::-o-selection{
  150. background-color:#078c5f; /* background color */
  151. }
  152.  
  153. ::-webkit-selection{
  154. background-color:#bed; /* background color */
  155. }
  156.  
  157. body.night ::-webkit-selection{
  158. background-color:#078c5f; /* background color */
  159. }
  160.  
  161. /* Custom Tooltips */
  162. #s-m-t-tooltip{
  163. max-width:300px;
  164. margin:15px;
  165. padding:8px;
  166. background-color:#def4ed; /* background color */
  167. color:#222; /* text color */
  168. z-index:9999999999999;
  169. font-size:calc(1em - 4px);
  170. text-transform:uppercase; /* alt: capitalize, lowercase */
  171. font-weight:400;
  172. font-family:"Roboto Mono", Courier; /* custom font */
  173. }
  174.  
  175. body.night #s-m-t-tooltip{
  176. background-color:#046343; /* background color */
  177. color:white; /* text color */
  178. }
  179.  
  180. body.access #s-m-t-tooltip{
  181. font-family:"Open Sans", Verdana; /* custom font */
  182. text-transform:normal;
  183. }
  184.  
  185. /* HEADER */
  186. header{
  187. width:100vw;
  188. height:10vh;
  189. position:fixed;
  190. top:0;
  191. left:0;
  192. background-color:white; /* background color */
  193. z-index:50!important;
  194. display:flex;
  195. align-items:center;
  196. justify-content:space-between;
  197. }
  198.  
  199. body.night header{
  200. background-color:#222; /* background color */
  201. }
  202.  
  203. /* Header Icon */
  204. #h-icon img{
  205. width:48px;
  206. height:48px;
  207. border-radius:50%; /* round corners */
  208. border:4px solid #bed; /* height type color */
  209. margin-left:1em;
  210. }
  211.  
  212. body.night #h-icon img{
  213. border:4px solid #078c5f; /* height type color */
  214. }
  215.  
  216. /* Header Title */
  217. #h-title{
  218. font-size:2em;
  219. font-family:"Roboto Mono", Georgia; /* custom font */
  220. border-bottom:4px solid #bed; /* height type color */
  221. }
  222.  
  223. body.night #h-title{
  224. border-bottom:4px solid #078c5f; /* height type color */
  225. }
  226.  
  227. body.access #h-title{
  228. font-family:"Open Sans", Verdana; /* custom font */
  229. }
  230.  
  231. /* Header Link */
  232. #h-link{
  233. background-color:#bed; /* background color */
  234. color:#078c5f; /* text color */
  235. box-shadow:0 0 2px #3ac194; /* offset blur color */
  236. margin-right:1em;
  237. padding:4px 8px;
  238. border-radius:1em; /* round corners */
  239. }
  240.  
  241. body.night #h-link{
  242. color:white; /* text color */
  243. background-color:#078c5f; /* background color */
  244. }
  245.  
  246. #h-link:hover{
  247. transform:translate(4px);
  248. }
  249.  
  250. #h-link, #h-link:hover{
  251. transition:0.5s;
  252. -moz-transition:0.5s;
  253. -o-transition:0.5s;
  254. -webkit-transition:0.5s;
  255. }
  256.  
  257. a.h-link{
  258. text-decoration:none;
  259. }
  260.  
  261. /** MAIN LAYOUT **/
  262. /* Container */
  263. #container{
  264. width:calc(69vw + 6em + 3em);
  265. height:auto;
  266. margin-top:calc(10vh + 1em);
  267. margin-left:calc(15.5vw - 3em - 2.5em);
  268. }
  269.  
  270. /* Followed User */
  271. .fllw{
  272. float:left;
  273. width:23vw;
  274. padding:1em;
  275. background-color:white; /* background color */
  276. box-shadow:0 0 4px #3ac194; /* offset blur color */
  277. border-radius:8px; /* round corners */
  278. margin-left:1em;
  279. margin-bottom:1em;
  280. display:flex;
  281. align-items:center;
  282. justify-content:flex-start;
  283. flex-wrap:wrap;
  284. }
  285.  
  286. body.night .fllw{
  287. background-color:#222; /* background color */
  288. box-shadow:0 0 4px #046343; /* offset blur color */
  289. }
  290.  
  291. /* Followed User Blog Icon */
  292. .fllw-icon img{
  293. width:48px;
  294. height:48px;
  295. margin-right:8px;
  296. border-radius:50%; /* round corners */
  297. border:4px solid #bed; /* height type color */
  298. }
  299.  
  300. body.night .fllw-icon img{
  301. border:4px solid #078c5f; /* height type color */
  302. }
  303.  
  304. /* Followed User Info */
  305. .fllw-info{
  306. width:calc(23vw - 48px - 8px - 8px);
  307. }
  308.  
  309. /* Followed User Blog Title */
  310. .fllw-title{
  311. font-size:1.25em;
  312. margin-bottom:4px;
  313. word-break:break-word;
  314. }
  315.  
  316. /* Followed User Name */
  317. .fllw-name{
  318. font-family:"Roboto Mono", Courier; /* custom font */
  319. word-break:break-word;
  320. }
  321.  
  322. body.access .fllw-name{
  323. font-family:"Open Sans", Verdana; /* custom font */
  324. }
  325.  
  326. .fllw-name mark{
  327. background-color:#bed; /* background color */
  328. color:#222; /* text color */
  329. padding:4px 8px;
  330. border-radius:4px; /* round corners */
  331. line-height:2em;
  332. }
  333.  
  334. body.night .fllw-name mark{
  335. background-color:#078c5f; /* background color */
  336. color:white; /* text color */
  337. }
  338.  
  339. .fllw-name mark:hover{
  340. background-color:#9aedd1; /* background color */
  341. }
  342.  
  343. body.night .fllw-name mark:hover{
  344. background-color:#006342; /* background color */
  345. }
  346.  
  347. .fllw-name mark, .fllw-name mark:hover{
  348. transition:0.5s;
  349. -moz-transition:0.5s;
  350. -o-transition:0.5s;
  351. -webkit-transition:0.5s;
  352. }
  353.  
  354. /* Links */
  355. a{
  356. color:#222; /* text color */
  357. text-decoration:none;
  358. }
  359.  
  360. body.night a{
  361. color:white; /* text color */
  362. }
  363.  
  364. /* CUSTOM CONTROLS */
  365. /* Hides standard tumblr controls */
  366. body > iframe:first-child {
  367. display: none !important;
  368. }
  369.  
  370. /* Containers */
  371. #custom-controls{
  372. width:calc(38px * 2 + 0.5em);
  373. height:calc(40px * 2 + 0.5em);
  374. position:fixed;
  375. right:1em;
  376. top:calc(10vh + 1em);
  377. z-index:500!important;
  378. display:flex;
  379. align-items:space-between;
  380. justify-content:space-between;
  381. flex-wrap:wrap;
  382. }
  383.  
  384. /* Control Link */
  385. a.conlink{
  386. text-decoration:none;
  387. border-bottom:none;
  388. }
  389.  
  390. /* Control Element */
  391. .cont{
  392. width:36px;
  393. height:36px;
  394. border-radius:8px; /* round corners */
  395. background-color:#bed; /* background color */
  396. color:white; /* text color */
  397. border:2px solid white; /* height type color */
  398. text-shadow:0 0 2px #078c5f; /* offset blur color */
  399. box-shadow:0 0 2px #078c5f; /* offset blur color */
  400. cursor:pointer;
  401. display:flex;
  402. align-items:center;
  403. justify-content:center;
  404. }
  405.  
  406. body.night .cont{
  407. background-color:#078c5f; /* background color */
  408. color:#222; /* text color */
  409. border:2px solid #222; /* height type color */
  410. text-shadow:0 0 2px #078c5f; /* offset blur color */
  411. box-shadow:0 0 2px #078c5f; /* offset blur color */
  412. }
  413.  
  414. /* Control Element on Hover */
  415. .cont:hover{
  416. transform:scale(0.95);
  417. }
  418.  
  419. /* Transitions */
  420. .cont, .cont:hover{
  421. transition:0.5s;
  422. -moz-transition:0.5s;
  423. -o-transition:0.5s;
  424. -webkit-transition:0.5s;
  425. }
  426.  
  427. /* DayNight Toggle */
  428. .daynight{
  429. top:calc(10vh + 1em);
  430. }
  431.  
  432. /* Accessible Toggle */
  433. .accessible{
  434. top:calc(10vh + 1em + 36px + 8px);
  435. }
  436.  
  437. /* All Toggles */
  438. .accessible, .daynight, .credit{
  439. left:1em;
  440. position:fixed;
  441. }
  442.  
  443. /* Credit –– Don't touch! */
  444. .credit{
  445. bottom:1em;
  446. }
  447.  
  448. /* -- RESPONSIVE LAYOUT -- */
  449. /* DESKTOP */
  450. @media only screen and (min-width:800px){
  451. /* Mobile Footer */
  452. #mobile-footer{
  453. display:none;
  454. }
  455. }
  456.  
  457. /* TABLETS */
  458. @media only screen and (max-width: 800px){
  459. /* Container */
  460. #container{
  461. width:80vw;
  462. margin-left:10vw;
  463. }
  464.  
  465. /* Followed User */
  466. .fllw{
  467. width:calc(40vw - 5em);
  468. }
  469.  
  470. /* Followed User Info */
  471. .fllw-info{
  472. width:calc((40vw - 5em) - (48px + 8px + 8px));
  473. }
  474.  
  475. /* Mobile Footer */
  476. #mobile-footer{
  477. display:none;
  478. }
  479. }
  480.  
  481. @media only screen and (min-width:450px){
  482. /* Mobile Footer */
  483. #mobile-footer{
  484. display:none;
  485. }
  486. }
  487.  
  488. /* PHONES */
  489. @media only screen and (max-width: 450px){
  490. /* Header */
  491. header{
  492. display:none;
  493. }
  494.  
  495. /* Container */
  496. #container{
  497. width:100vw;
  498. margin-left:0;
  499. margin-top:1em;
  500. margin-bottom:calc(10vh + 1em);
  501. }
  502.  
  503. /* Followed User */
  504. .fllw{
  505. width:calc(100vw - 4em);
  506. }
  507.  
  508. /* Followed User Info */
  509. .fllw-info{
  510. width:calc((100vw - 4em) - (48px + 8px + 8px));
  511. }
  512.  
  513. /* Custom Controls */
  514. #custom-controls, .accessible, .daynight{
  515. display:none;
  516. }
  517.  
  518. /* Mobile Footer */
  519. #mobile-footer{
  520. display:flex;
  521. align-items:center;
  522. justify-content:space-evenly;
  523. background-color:white; /* background color */
  524. position:fixed;
  525. bottom:0;
  526. left:0;
  527. width:100vw;
  528. height:10vh;
  529. }
  530.  
  531. body.night #mobile-footer{
  532. background-color:#222; /* background color */
  533. }
  534.  
  535. /* Navigation Element */
  536. .mf-nav{
  537. width:36px;
  538. height:36px;
  539. font-size:1em;
  540. border-radius:8px; /* round corners */
  541. background-color:#bed; /* background color */
  542. color:white; /* text color */
  543. text-shadow:0 0 2px #078c5f; /* offset blur color */
  544. box-shadow:0 0 2px #078c5f; /* offset blur color */
  545. display:flex;
  546. align-items:center;
  547. justify-content:center;
  548. }
  549.  
  550. body.night .mf-nav{
  551. background-color:#222; /* background color */
  552. color:#087c5f; /* text color */
  553. }
  554.  
  555. /* Navigation Element on Hover */
  556. .mf-nav:hover{
  557. transform:scale(1.05); /* increase size */
  558. cursor:pointer;
  559. }
  560.  
  561. /* Navigation Element Transitions */
  562. .mf-nav, .mf-nav:hover{
  563. transition:0.5s;
  564. -moz-transition:0.5s;
  565. -o-transition:0.5s;
  566. -webkit-transition:0.5s;
  567. }
  568.  
  569. /* Navigation Element Links */
  570. .mf-link, body.night .mf-link{
  571. border-bottom:none;
  572. text-decoration:none;
  573. }
  574. }
  575.  
  576. </style>
  577. </head>
  578.  
  579. <body>
  580.  
  581. <!-- HEADER -->
  582. <header>
  583. <!-- Header Icon -->
  584. <div id="h-icon">
  585. <img src="{PortraitURL-128}" alt="{Name}'s icon"/>
  586. </div>
  587.  
  588. <!-- Header Title -->
  589. <!-- This is practically all you have to edit in the HTML. -->
  590. <div id="h-title">
  591. Minze
  592. </div>
  593.  
  594. <!-- Header Link -->
  595. <a href="/" class="h-link" title="return to blog">
  596. <div id="h-link">
  597. return to blog
  598. <span class="fas fa-chevron-right"></span>
  599. </div>
  600. </a>
  601. </header> <!-- // end header -->
  602.  
  603. <!-- CONTAINER -->
  604. <div id="container">
  605. {block:Following}
  606. {block:Followed}
  607. <a href="{FollowedURL}" class="fllw-link" title="go to {FollowedName}">
  608. <div class="fllw">
  609. <!-- Followed User Icon -->
  610. <div class="fllw-icon">
  611. <img src="{FollowedPortraitURL-128}" alt="{FollowedName}'s Blog Icon"/>
  612. </div>
  613. <!-- Followed User Info -->
  614. <div class="fllw-info">
  615. <!-- Folowed User Blog Title -->
  616. <div class="fllw-title">{FollowedTitle}</div>
  617. <!-- Followed User Name -->
  618. <div class="fllw-name">
  619. <mark>@{FollowedName}</mark>
  620. </div>
  621. </div>
  622. </div>
  623. </a>
  624. {/block:Followed}
  625. {/block:Following}
  626. </div> <!-- // end container -->
  627.  
  628. <!-- TOGGLES -->
  629. <!-- DayNight Toggle -->
  630. <div class="daynight cont" title="day/night mode">
  631. <span class="fas fa-moon"></span>
  632. </div>
  633.  
  634. <!-- Accessible Toggle -->
  635. <div class="accessible cont" title="accessible text">
  636. <span class="fas fa-font"></span>
  637. </div>
  638.  
  639. <!-- Credit – Do not touch! -->
  640. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  641. <div class="cont credit">
  642. <span class="fas fa-code" aria-hidden="true"></span>
  643. </div>
  644. </a>
  645.  
  646. <!-- CUSTOM CONTROLS -->
  647. <div id="custom-controls">
  648. <!-- Dashboard Link -->
  649. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  650. <div class="cont">
  651. <span class="fab fa-tumblr" aria-hidden="true"></span>
  652. </div>
  653. </a>
  654.  
  655. <!-- Message -->
  656. <!-- Takes people to dashboard to send you a message. -->
  657. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  658. <div class="cont">
  659. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  660. </div>
  661. </a>
  662.  
  663. <!-- Customize -->
  664. <!-- Takes you, the blog owner, to the customization. -->
  665. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize theme" class="conlink">
  666. <div class="cont">
  667. <span class="fas fa-palette" aria-hidden="true"></span>
  668. </div>
  669. </a>
  670.  
  671. <!-- Follow -->
  672. <!-- Takes people to a page so that they can follow you. -->
  673. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  674. <div class="cont">
  675. <span class="fas fa-plus" aria-hidden="true"></span>
  676. </div>
  677. </a>
  678. </div> <!-- // end custom controls -->
  679.  
  680. <!-- MOBILE FOOTER -->
  681. <div id="mobile-footer">
  682. <!-- Desktop Link -->
  683. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
  684. <div class="mf-nav">
  685. <span class="fab fa-tumblr" aria-hidden="true"></span>
  686. </div>
  687. </a>
  688.  
  689. <!-- Day/Night Toggle -->
  690. <div class="dn mf-nav" title="toggle day/night-mode">
  691. <span class="fas fa-moon"></span>
  692. </div>
  693.  
  694. <!-- Home Link -->
  695. <a href="/" title="return to blog" class="mf-link">
  696. <div class="mf-nav">
  697. <span class="fas fa-home" aria-hidden="true"></span>
  698. </div>
  699. </a>
  700.  
  701. <!-- Accessibility Toggle -->
  702. <div class="acs mf-nav" title="increase readability">
  703. <span class="fas fa-font"></span>
  704. </div>
  705.  
  706. <!-- Credit – Do not touch! -->
  707. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  708. <div class="mf-nav">
  709. <span class="fas fa-code" aria-hidden="true"></span>
  710. </div>
  711. </a>
  712. </div> <!-- // end mobile footer -->
  713.  
  714. <!-- SCRIPTS -->
  715. <script>
  716. $(document).ready(function() {
  717. // Mobile Accessible Toggle
  718. $('.acs').click(function() {
  719. $('body').toggleClass('access');
  720. $('.acs span').toggleClass('fa-italic');
  721. });
  722.  
  723. // Mobile DayNight Toggle
  724. $('.dn').click(function() {
  725. $('body').toggleClass('night');
  726. $('.dn span').toggleClass('fa-sun');
  727. });
  728.  
  729. // Masonry, by DeSandro
  730. var $grid = $("#container");
  731. $grid.masonry({
  732. itemSelector: ".fllw",
  733. initLayout: 1
  734. });
  735. $(window).load(function(){
  736. $grid.masonry();
  737. });
  738.  
  739. // Accessible Toggle
  740. $('.accessible').click(function() {
  741. $('body,#container,.fllw').toggleClass('access');
  742. $('.accessible span').toggleClass('fa-italic');
  743. setTimeout(function(){
  744. $grid.masonry('layout');
  745. },400);
  746. });
  747.  
  748. // DayNight Toggle
  749. $('.daynight').click(function() {
  750. $('body').toggleClass('night');
  751. $('.daynight span').toggleClass('fa-sun');
  752. });
  753.  
  754. // HTML Visibility
  755. document.getElementsByTagName("html")[0].style.visibility = "visible";
  756. });
  757. </script>
  758.  
  759. </body>
  760. </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!