API tools faq
paste
Advertisement
silbrigthemes

Wolkenlos (Page #24)

silbrigthemes
Dec 1st, 2019
708
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. WOLKENLOS
  7. Page #24 by silbrigthemes
  8.  
  9. Wolkenlos is a responsive all in one page, with an aesthetic similar to that of Brutal (Theme 8).
  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. 6) Do not redistribute to other sites.
  21.  
  22. ----------
  23.  
  24. Useful comments to this code have been made.
  25.  
  26. If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
  27.  
  28. Have fun!
  29.  
  30. Love,
  31. Julia <3
  32.  
  33. ----------
  34.  
  35. Note:
  36.  
  37. This work is protected by a creative commons
  38. Attribution-NonCommercial-NoDerivatives 4.0 International
  39. (CC BY-NC-ND 4.0)
  40. license.
  41.  
  42. -->
  43.  
  44. <head>
  45.  
  46. <meta charset="utf-16">
  47. <title>{Title} | Wolkenlos</title> <!-- {Title} is your blog title. Change after the "|". -->
  48. <link rel="shortcut icon" href="{Favicon}"/>
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  50. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  51.  
  52. <!-- Changes the toolbar color on mobile. -->
  53. <meta name="theme-color" content="#007fff"/>
  54.  
  55. <!-- Necessary for the theme to be responsive. -->
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <!-- Icon font, by fontawesome -->
  59. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  60.  
  61. <!-- Necessary for the scripts to work. -->
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63.  
  64. <!-- Masonry Libraries -->
  65. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  66. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  67.  
  68. <!-- OTHER FONTS -->
  69. <!-- Cormorant Garamond -->
  70. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  71. <!-- Dancing Script -->
  72. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  73.  
  74. <!-- TITLE FONT | Raleway -->
  75. <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap&subset=latin-ext" rel="stylesheet">
  76. <!-- ACCENT FONT | Roboto Mono -->
  77. <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">
  78. <!-- BODY FONT | Open Sans -->
  79. <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">
  80.  
  81. <style>
  82.  
  83. body{
  84. margin:0;
  85. top:0;
  86. left:0;
  87. font-size:1em; /* font size */
  88. /* Changing the font-size here will affect all other
  89. font-sizes of this page! */
  90. overflow-x:hidden;
  91. background-color:#f9faff; /* background color */
  92. color:#343638; /* text color */
  93. font-family:"Open Sans", Verdana; /* font */
  94. }
  95.  
  96. /* Custom Scrollbar */
  97. ::-webkit-scrollbar{
  98. width:10px;
  99. }
  100.  
  101. ::-webkit-scrollbar-thumb{
  102. width:10px;
  103. background-color:#343638; /* background color */
  104. border-radius:5px; /* rounded corners */
  105. }
  106.  
  107. /* Custom Text Selection */
  108. ::selection{
  109. background-color:#f9faff; /* background color */
  110. color:#007fff; /* text color */
  111. }
  112.  
  113. ::-moz-selection{
  114. background-color:#f9faff; /* background color */
  115. color:#007fff; /* text color */
  116. }
  117.  
  118. ::-o-selection{
  119. background-color:#f9faff; /* background color */
  120. color:#007fff; /* text color */
  121. }
  122.  
  123. ::-webkit-selection{
  124. background-color:#f9faff; /* background color */
  125. color:#007fff; /* text color */
  126. }
  127.  
  128. /* Custom Tooltips */
  129. .tippy-tooltip.wolkenlos-theme {
  130. background-color:#343638; /* background color */
  131. color:#f9faff; /* text color */
  132. text-align:left; /* alt.: center, right, justify */
  133. }
  134.  
  135. .tippy-tooltip.wolkenlos-theme .tippy-svg-arrow {
  136. fill:#007fff; /* background color */
  137. }
  138.  
  139. /* ––– END GENERAL | START TEXT STYLES ––– */
  140.  
  141. /* Bold Text */
  142. b, strong{
  143. font-weight:bold;
  144. font-weight:700;
  145. color:#585a5c; /* text color */
  146. }
  147.  
  148. /* Italic Text */
  149. i, em{
  150. font-weight:300; /* alt.: 400 */
  151. font-style:italic; /* alt.: normal */
  152. color:#1d1e1f; /* text color */
  153. }
  154.  
  155. /* Marked Text */
  156. mark{
  157. background-color:#343638; /* background color */
  158. color:#f9faff; /* text color */
  159. padding:0 8px;
  160. border-radius:1em; /* round corners */
  161. }
  162.  
  163. /* Preformatted Text */
  164. pre{
  165. font-family:"Roboto Mono", Courier; /* font */
  166. font-size:calc(1em - 2px);
  167. word-wrap:break-all;
  168. white-space:pre-wrap;
  169. background-color:#343638; /* background color */
  170. color:#f9faff; /* text color */
  171. padding:16px;
  172. }
  173.  
  174. /* Small Text */
  175. small{
  176. font-size:calc(1em - 4px);
  177. }
  178.  
  179. /* Underlined Text */
  180. u{
  181. text-decoration:none;
  182. border-bottom:2px solid #343638; /* strength style color */
  183. }
  184.  
  185. /* Text Line */
  186. hr{
  187. width:80%;
  188. height:4px;
  189. border:none;
  190. border-radius:4px; /* round corners */
  191. background-color:#343638; /* background color */
  192. }
  193.  
  194. /* Empty Paragraphs */
  195. p:empty{
  196. display:none;
  197. }
  198.  
  199. /* Embedded Media */
  200. #about img, #about iframe{
  201. max-width:100%;
  202. }
  203.  
  204. /* Blockquote */
  205. blockquote{
  206. border-left:4px solid #007fff; /* strength style color */
  207. padding-left:16px;
  208. }
  209.  
  210. /* LINKS */
  211. /* Link */
  212. a{
  213. text-decoration:none;
  214. color:#007fff; /* text color */
  215. border-bottom:2px solid #007fff; /* strength style color */
  216. }
  217.  
  218. /* Link on Hover */
  219. a:hover{
  220. color:#343638; /* text color */
  221. }
  222.  
  223. /* Transitions */
  224. a, a:hover{
  225. transition:0.5s;
  226. -moz-transition:0.5s;
  227. -o-transition:0.5s;
  228. -webkit-transition:0.5s;
  229. }
  230.  
  231. /* COLORED TEXT */
  232. /* Red Text */
  233. .npf_color_joey {
  234. color:#ff1000; /* text color */
  235. }
  236.  
  237. /* Orange Text */
  238. .npf_color_monica {
  239. color:#ff6a00; /* text color */
  240. }
  241.  
  242. /* Yellow Text */
  243. .npf_color_phoebe {
  244. color:#ffbb00; /* text color */
  245. }
  246.  
  247. /* Green Text */
  248. .npf_color_ross {
  249. color:#22e200; /* text color */
  250. }
  251.  
  252. /* Blue Text */
  253. .npf_color_rachel {
  254. color:#007fff; /* text color */
  255. }
  256.  
  257. /* Purple Text */
  258. .npf_color_chandler {
  259. color:#9d00ff; /* text color */
  260. }
  261.  
  262. /* Pink Text */
  263. .npf_color_niles {
  264. color:#ff00d0; /* text color */
  265. }
  266.  
  267. /* SPECIAL FONTS */
  268. /* Quirky Font */
  269. .npf_quirky{
  270. font-family: "Dancing Script", cursive; /* font */
  271. font-size:1.5em;
  272. }
  273.  
  274. /* Chat Font */
  275. .npf_chat{
  276. font-family:"Roboto Mono", Courier; /* font */
  277. }
  278.  
  279. /* Quote Font */
  280. .npf_quote{
  281. font-family:"Cormorant Garamond", "Palatino"; /* font */
  282. font-size:1.25em;
  283. }
  284.  
  285. /* HEADINGS */
  286. /* First Heading */
  287. h1{
  288. font-size:1.75em;
  289. font-weight:400; /* alt.: 300, 700 */
  290. }
  291.  
  292. /* Second Heading */
  293. h2{
  294. font-size:1.5em;
  295. font-weight:300; /* alt.: 400, 700 */
  296. }
  297.  
  298. h1, h2{
  299. font-family:"Raleway", Georgia; /* font */
  300. }
  301.  
  302. /* Third Heading */
  303. h3{
  304. font-size:1.25em;
  305. }
  306.  
  307. /* Fourth Heading */
  308. h4{
  309. font-size:1em;
  310. }
  311.  
  312. /* Fifth Heading */
  313. h5{
  314. font-size:calc(1em - 2px);
  315. }
  316.  
  317. /* Sixth Heading */
  318. h6{
  319. font-size:calc(1em - 4px);
  320. }
  321.  
  322. h5, h6{
  323. text-transform:uppercase;
  324. /* alt.: capitalize, none, lowercase */
  325. }
  326.  
  327. body.access h5, body.access h6{
  328. text-transform:none;
  329. /* alt.: uppercase, capitalize, lowercase */
  330. }
  331.  
  332. h3, h4{
  333. font-family:"Open Sans", Verdana; /* font */
  334. }
  335.  
  336. h5, h6{
  337. font-family:"Roboto Mono", Courier; /* font */
  338. }
  339.  
  340. /* ––– END TEXT STYLES | START LAYOUT ––– */
  341.  
  342. /* HEADER */
  343. header{
  344. width:calc(100vw - 4em);
  345. height:calc(100vh - 4em);
  346. padding:2em;
  347. top:0;
  348. left:0;
  349. position:absolute;
  350. background-color:#f9faff; /* background color */
  351. z-index:99999!important;
  352. display:flex;
  353. align-items:center;
  354. justify-content:center;
  355. flex-direction:column;
  356. }
  357.  
  358. /* Header Title */
  359. #h-title{
  360. font-size:5em;
  361. margin-top:25vh;
  362. margin-bottom:8px;
  363. font-family:"Raleway", Georgia; /* font */
  364. border-bottom:4px solid #007fff; /* strength style color */
  365. }
  366.  
  367. /* Header Description */
  368. #h-desc{
  369. margin-bottom:25vh;
  370. font-size:1.25em;
  371. font-family:"Roboto Mono", Courier; /* font */
  372. text-align:center;
  373. }
  374.  
  375. /* Scroll Down */
  376. #h-down{
  377. width:48px;
  378. height:48px;
  379. border-radius:50%; /* round corners */
  380. color:#f9faff; /* text color */
  381. background-color:#343638; /* background color */
  382. display:flex;
  383. align-items:center;
  384. justify-content:center;
  385. }
  386.  
  387. /* Scroll Down on Hover */
  388. #h-down:hover{
  389. background-color:#007fff; /* background color */
  390. }
  391.  
  392. /* Transitions */
  393. #h-down, #h-down:hover{
  394. transition:0.5s;
  395. -moz-transition:0.5s;
  396. -o-transition:0.5s;
  397. -webkit-transition:0.5s;
  398. }
  399.  
  400. /* Links */
  401. a.hl, a.sl, a.flwl, a.nl{
  402. text-decoration:none;
  403. border-bottom:none;
  404. }
  405.  
  406. /* EVERYTHING ELSE */
  407. /* Everything below the header. */
  408. #else{
  409. width:100vw;
  410. height:100vh;
  411. z-index:-300!important;
  412. }
  413.  
  414. /* Section */
  415. .section{
  416. width:calc(90vw - 4em);
  417. padding:2em;
  418. }
  419.  
  420. /* Section Title */
  421. .sect-title{
  422. font-family:"Raleway", Georgia; /* font */
  423. font-size:2em;
  424. margin-bottom:16px;
  425. border-bottom:4px solid #007fff; /* strength style color */
  426. padding-bottom:8px;
  427. }
  428.  
  429. /* Section Subtitle */
  430. .sect-subtitle{
  431. font-size:1.25em;
  432. font-family:"Roboto Mono", Courier; /* font */
  433. border-bottom:4px solid #343638; /* strength style color */
  434. margin-bottom:8px;
  435. padding-bottom:4px;
  436. margin-top:8px;
  437. }
  438.  
  439. /* Sub-Section */
  440. .subsect{
  441. display:flex;
  442. flex-wrap:wrap;
  443. }
  444.  
  445. /* ABOUT SECTION */
  446. #about{
  447. margin-top:100vh;
  448. }
  449.  
  450. /* NAVIGATION SECTION */
  451. /* Tag Box */
  452. .box{
  453. padding:1em;
  454. width:calc(26vw - 2em);
  455. margin-right:1em;
  456. margin-bottom:1em;
  457. display:flex;
  458. flex-wrap:wrap;
  459. }
  460.  
  461. /* Tag Box Title */
  462. .boxtitle{
  463. font-size:calc(1em + 2px);
  464. border-bottom:4px solid #007fff; /* strength style color */
  465. margin-bottom:8px;
  466. font-weight:700; /* alt.: 300, 400 */
  467. width:100%;
  468. }
  469.  
  470. /* Navigation Link */
  471. a.nl{
  472. padding:4px 8px;
  473. border-radius:1em; /* round corners */
  474. background-color:#007fff; /* background color */
  475. color:#f9faff; /* text color */
  476. margin-right:4px;
  477. margin-bottom:4px;
  478. }
  479.  
  480. /* Navigation Link on Hover */
  481. a.nl:hover{
  482. color:#f9faff; /* text color */
  483. background-color:#343638; /* background color */
  484. }
  485.  
  486. /* Transitions */
  487. a.nl, a.nl:hover{
  488. transition:0.5s;
  489. -moz-transition:0.5s;
  490. -o-transition:0.5s;
  491. -webkit-transition:0.5s;
  492. }
  493.  
  494. /* SEARCHBAR */
  495. .sb-search .query {
  496. border:0;
  497. outline:0;
  498. padding:4px 8px;
  499. width:calc(90vw - 4em - 16px);
  500. font-family:"Open Sans", Verdana; /* font */
  501. font-size:1em;
  502. color:#f9faff; /* text color */
  503. background-color:#343638; /* background color */
  504. text-transform:capitalize;
  505. /* alt.: lowercase, none, uppercase */
  506. text-align:left; /* alt.: center, right, justify */
  507. margin-bottom:4px;
  508. border-radius:1em; /* round corners */
  509. }
  510.  
  511. /* Sidebar Searchbar on Hover */
  512. .sb-search .query:hover{
  513. background-color:#007fff; /* background color */
  514. color:#f9faff; /* text color */
  515. }
  516.  
  517. /* Sidebar Searchbar on Focus */
  518. .sb-search .query:focus{
  519. background-color:#f9faff; /* background color */
  520. color:#343638; /* text color */
  521. }
  522.  
  523. /* Transitions */
  524. .sb-search .query, .sb-search .query:hover, .sb-search .query:focus{
  525. transition:0.5s;
  526. -moz-transition:0.5s;
  527. -o-transition:0.5s;
  528. -webkit-transition:0.5s;
  529. }
  530.  
  531. /* Placeholder */
  532. ::-webkit-input-placeholder {
  533. color:inherit;
  534. }
  535.  
  536. ::-o-placeholder {
  537. color:inherit;
  538. opacity:1;
  539. }
  540.  
  541. ::-moz-placeholder {
  542. color:inherit;
  543. opacity:1;
  544. }
  545.  
  546. :-ms-input-placeholder {
  547. color:inherit;
  548. }
  549.  
  550. /* Placeholder on Focus */
  551. input:focus::-webkit-input-placeholder {
  552. color:transparent;
  553. }
  554.  
  555. input:focus::-o-placeholder {
  556. color:transparent;
  557. }
  558.  
  559. input:focus::-moz-placeholder {
  560. color:transparent;
  561. }
  562.  
  563. input:focus:-ms-input-placeholder {
  564. color:transparent;
  565. }
  566.  
  567. /* FAQ SECTION */
  568. /* Question */
  569. .question{
  570. width:60%;
  571. padding:0.5em 1em;
  572. border-radius:0 1em 1em 0; /* round corners */
  573. background-color:#343638; /* background color */
  574. color:#f9faff; /* text color */
  575. margin-bottom:8px;
  576. }
  577.  
  578. /* Answer */
  579. .answer{
  580. width:95%;
  581. margin-left:calc(5% - 16px);
  582. padding:0.5em 1em;
  583. border-radius:0 1em 1em 0; /* round corners */
  584. background-color:#007fff; /* background color */
  585. color:#f9faff; /* text color */
  586. margin-bottom:1em;
  587. }
  588.  
  589. /* Last Answer */
  590. .answer:last-child{
  591. margin-bottom:0;
  592. }
  593.  
  594. /* Question + Answer Paragraphs */
  595. .question p, .answer p{
  596. padding:0;
  597. margin:0;
  598. margin-bottom:4px;
  599. margin-top:4px;
  600. }
  601.  
  602. /* BLOGROLL */
  603. /* Followed User Container */
  604. .followed{
  605. width:calc(20vw - 2em);
  606. padding:1em;
  607. margin-right:1em;
  608. margin-bottom:1em;
  609. display:flex;
  610. }
  611.  
  612. /* Followed User Link */
  613. a.flwl{
  614. display:flex;
  615. }
  616.  
  617. /* Followed User Icon */
  618. .flw-icon img{
  619. width:56px;
  620. height:56px;
  621. border-radius:50%; /* round corners */
  622. margin-right:8px;
  623. /* Grayscale */
  624. filter:grayscale(100%);
  625. -moz-filter:grayscale(100%);
  626. -o-filter:grayscale(100%);
  627. -webkit-filter:grayscale(100%);
  628. }
  629.  
  630. /* Followed User Icon on Hover */
  631. .flw-icon img:hover{
  632. /* Grayscale */
  633. filter:grayscale(0%);
  634. -moz-filter:grayscale(0%);
  635. -o-filter:grayscale(0%);
  636. -webkit-filter:grayscale(0%);
  637. }
  638.  
  639. /* Followed User Icon | Transitions */
  640. .flw-icon img, .flw-icon img:hover{
  641. transition:0.5s;
  642. -moz-transition:0.5s;
  643. -o-transition:0.5s;
  644. -webkit-transition:0.5s;
  645. }
  646.  
  647. /* Followed User Blog Title */
  648. .flw-title{
  649. font-size:1.25em;
  650. color:#343638; /* text color */
  651. font-weight:700; /* alt.: 300, 400 */
  652. font-family:"Raleway", Georgia; /* font */
  653. word-break:break-word;
  654. }
  655.  
  656. /* Followed User Blog Title on Hover */
  657. .flw-title:hover{
  658. color:#007fff; /* text color */
  659. }
  660.  
  661. /* Followed User Blog Title | Transitions */
  662. .flw-title, .flw-title:hover{
  663. transition:0.5s;
  664. -moz-transition:0.5s;
  665. -o-transition:0.5s;
  666. -webkit-transition:0.5s;
  667. }
  668.  
  669. /* Followed User Name */
  670. .flw-name{
  671. color:#007fff; /* text color */
  672. font-family:"Roboto Mono", Courier; /* font */
  673. word-break:break-word;
  674. }
  675.  
  676. /* Followed User Name on Hover */
  677. .flw-name:hover{
  678. color:#343638; /* text color */
  679. }
  680.  
  681. /* Followed User Name | Transitions */
  682. .flw-name, .flw-name:hover{
  683. transition:0.5s;
  684. -moz-transition:0.5s;
  685. -o-transition:0.5s;
  686. -webkit-transition:0.5s;
  687. }
  688.  
  689. /* SIDEBAR */
  690. #sidebar{
  691. width:calc(10vw - 2em);
  692. height:calc(100vh - 2em);
  693. padding:1em;
  694. position:fixed;
  695. top:0;
  696. right:0;
  697. display:flex;
  698. flex-direction:column;
  699. justify-content:center;
  700. }
  701.  
  702. /* Sidebar Link */
  703. a.sl{
  704. background-color:#343638; /* background color */
  705. color:#f9faff; /* text color */
  706. margin-top:4px;
  707. margin-bottom:4px;
  708. padding:4px 8px;
  709. border-radius:1em; /* round corners */
  710. }
  711.  
  712. /* Sidebar Link on Hover */
  713. a.sl:hover{
  714. background-color:#007fff; /* background color */
  715. }
  716.  
  717. /* Transitions */
  718. a.sl, a.sl:hover{
  719. transition:0.5s;
  720. -moz-transition:0.5s;
  721. -o-transition:0.5s;
  722. -webkit-transition:0.5s;
  723. }
  724.  
  725. /* ––– END LAYOUT | START EXTRAS ––– */
  726.  
  727. /* Hides the tumblr app button, by @yeoli-thm */
  728. .tmblr-iframe--app-cta-button {
  729. display:none!important;
  730. }
  731.  
  732. /* CUSTOM CONTROLS */
  733. /* Container */
  734. #custom-controls{
  735. position:fixed;
  736. top:1em;
  737. right:calc(1em + 10px);
  738. width:calc(2 * 36px + 4px);
  739. height:calc(2 * 36px + 8px);
  740. display:flex;
  741. flex-wrap:wrap;
  742. justify-content:space-between;
  743. align-items:space-between;
  744. }
  745.  
  746. /* Control Link */
  747. a.conlink{
  748. border-bottom:none;
  749. box-shadow:none;
  750. text-decoration:none;
  751. }
  752.  
  753. /* Control Element */
  754. .cont{
  755. background-color:#343638; /* background color */
  756. color:#f9faff; /* text color */
  757. border-radius:50%; /* round corners */
  758. font-size:calc(1em - 2px);
  759. width:36px;
  760. height:36px;
  761. display:flex;
  762. align-items:center;
  763. justify-content:center;
  764. }
  765.  
  766. /* Control Element on Hover */
  767. .cont:hover{
  768. background-color:#007fff; /* background color */
  769. }
  770.  
  771. /* Transitions */
  772. .cont, .cont:hover{
  773. transition:0.5s;
  774. -moz-transition:0.5s;
  775. -o-transition:0.5s;
  776. -webkit-transition:0.5s;
  777. }
  778.  
  779. /* Hides standard tumblr controls */
  780. body > iframe:first-child {
  781. display: none !important;
  782. }
  783.  
  784. /* Credit – Don't touch! */
  785. #cd{
  786. position:fixed;
  787. bottom:1em;
  788. right:1em;
  789. }
  790.  
  791. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  792.  
  793. /* LARGE SCREENS | DESKTOP */
  794. @media only screen and (min-width:800px){
  795. /* Mobile Footer */
  796. #mobile-footer{
  797. display:none;
  798. }
  799. }
  800.  
  801. /* SMALL SCREENS | TABLETS */
  802. @media only screen and (max-width:800px){
  803. /* Sidebar */
  804. #sidebar{
  805. display:none;
  806. }
  807.  
  808. /* Section */
  809. .section{
  810. width:calc(100vw - 4em);
  811. }
  812.  
  813. /* Questions */
  814. .question{
  815. width:calc(100% - 10px - 1.5em);
  816. border-radius:1em 1em 0 0; /* round corners */
  817. }
  818.  
  819. /* Answers */
  820. .answer{
  821. width:calc(100% - 10px - 1.5em);
  822. margin-left:0;
  823. border-radius:0 0 1em 1em; /* round corners */
  824. }
  825.  
  826. /* FAQ */
  827. #faq{
  828. margin-bottom:calc(10vh + 2em);
  829. {block:Following}
  830. margin-bottom:0;
  831. {/block:Following}
  832. }
  833.  
  834. /* Blogroll */
  835. {block:Following}
  836. #blogroll{
  837. margin-bottom:calc(10vh + 2em);
  838. }
  839. {/block:Following}
  840.  
  841. /* Tag Boxes, Followed Users */
  842. .box, .followed{
  843. width:calc(40vw - 2em);
  844. }
  845.  
  846. /* Mobile Footer */
  847. #mobile-footer{
  848. display:flex;
  849. align-items:center;
  850. justify-content:space-evenly;
  851. background-color:#007fff; /* background color */
  852. position:fixed;
  853. bottom:0;
  854. left:0;
  855. width:100vw;
  856. height:10vh;
  857. }
  858.  
  859. /* Navigation Element */
  860. .mf-nav{
  861. width:36px;
  862. height:36px;
  863. font-size:calc(1em - 2px);
  864. border-radius:8px; /* rounded corners */
  865. background-color:#f9faff; /* background color */
  866. color:#007fff; /* text color */
  867. display:flex;
  868. align-items:center;
  869. justify-content:center;
  870. }
  871.  
  872. /* Navigation Element on Hover */
  873. .mf-nav:hover{
  874. color:#34363a; /* text color */
  875. cursor:pointer;
  876. }
  877.  
  878. /* Navigation Element Transitions */
  879. .mf-nav, .mf-nav:hover{
  880. transition:0.5s;
  881. -moz-transition:0.5s;
  882. -o-transition:0.5s;
  883. -webkit-transition:0.5s;
  884. }
  885.  
  886. /* Navigation Element Links */
  887. .mf-link, body.night .mf-link{
  888. border-bottom:none;
  889. }
  890.  
  891. /* Credit, Custom Controls */
  892. #cd, #custom-controls{
  893. display:none;
  894. }
  895. }
  896.  
  897. /* SMALL SCREENS | PHONES */
  898. @media only screen and (max-width:450px){
  899. /* Tag Boxes, Followed Users */
  900. .box, .followed{
  901. width:calc(90vw - 4em);
  902. padding:0;
  903. }
  904. }
  905.  
  906. </style>
  907. </head>
  908.  
  909. <!-- ... END CSS | START HTML ... -->
  910.  
  911. <body>
  912.  
  913. <!-- HEADER -->
  914. <header>
  915. <!-- Header Title -->
  916. <div id="h-title">[TITLE]</div>
  917. <!-- Header Description -->
  918. <div id="h-desc">
  919. [DESCRIPTION]
  920. </div>
  921.  
  922. <!-- Scroll Down -->
  923. <a href="#about" title="go down" class="hl">
  924. <div id="h-down">
  925. <span class="fas fa-chevron-down"></span>
  926. </div>
  927. </a>
  928.  
  929. </header> <!-- // end header -->
  930.  
  931. <!-- EVERYTHING ELSE -->
  932. <div id="else">
  933. <!-- SIDEBAR -->
  934. <div id="sidebar">
  935. <!-- Jump to ABOUT section. -->
  936. <a href="#about" title="go to about" class="sl">
  937. About
  938. </a>
  939. <!-- Jump to NAVIGATION section. -->
  940. <a href="#navigation" title="go to navigation" class="sl">
  941. Navigation
  942. </a>
  943. <!-- Jump to FAQ section. -->
  944. <a href="#faq" title="go to faq" class="sl">
  945. FAQ
  946. </a>
  947. <!-- Jump to BLOGROLL section. -->
  948. {block:Following}
  949. <a href="#blogroll" title="go to blogroll" class="sl">
  950. Blogroll
  951. </a>
  952. {/block:Following}
  953. <!-- Return to Blog. -->
  954. <a href="/" title="return to blog" class="sl">
  955. Home
  956. </a>
  957. </div> <!-- // end sidebar -->
  958.  
  959. <!-- ABOUT SECTION -->
  960. <div class="section" id="about">
  961. <!-- Section Title -->
  962. <div class="sect-title">About</div>
  963. <!-- Your text goes here! -->
  964. </div> <!-- // end about section -->
  965.  
  966. <!-- NAVIGATION SECTION -->
  967. <div class="section" id="navigation">
  968. <!-- Section Title -->
  969. <div class="sect-title">Navigation</div>
  970. <!-- Section Subtitle | Links -->
  971. <div class="sect-subtitle">Links</div>
  972. <!-- Subsection | Links -->
  973. <div class="subsect" id="links">
  974. <!-- Links go here. -->
  975. <a href="[URL]" title="[Link Title]" class="nl">[Link Title]</a>
  976. <a href="[URL]" title="[Link Title]" class="nl">[Link Title]</a>
  977. <a href="[URL]" title="[Link Title]" class="nl">[Link Title]</a>
  978. <!-- Copy and paste this if you need more! -->
  979. <!-- <a href="[URL]" title="[Link Title]" class="nl">[Link Title]</a> -->
  980. </div>
  981.  
  982. <!-- Section Subtitle | Tags -->
  983. <div class="sect-subtitle">Tags</div>
  984. <!-- Subsection | Tags -->
  985. <div class="subsect" id="tags">
  986. <!-- Category -->
  987. <div class="box">
  988. <!-- Category Title -->
  989. <div class="boxtitle"><!-- Category Title --></div>
  990. <!-- Tags go here. -->
  991. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  992. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  993. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  994. </div> <!-- // end category -->
  995.  
  996. <!-- Copy and paste this if you need more! -->
  997. <!--
  998. <div class="box">
  999. <div class="boxtitle">Category Title</div>
  1000. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  1001. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  1002. <a href="/tagged/[TAG]" title="tagged as: [TAG]" class="nl">[TAG]</a>
  1003. </div>
  1004. -->
  1005. </div>
  1006.  
  1007. <!-- Section Subtitle | Search -->
  1008. <div class="sect-subtitle">Search</div>
  1009. <!-- Searchbar -->
  1010. <div id="sb-searchbar">
  1011. <form action="/search" method="get" class="sb-search">
  1012. <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search Blog">
  1013. </form>
  1014. </div>
  1015. </div> <!-- // end navigation section -->
  1016.  
  1017. <!-- FAQ SECTION -->
  1018. <div class="section" id="faq">
  1019. <!-- Section Title -->
  1020. <div class="sect-title">FAQ</div>
  1021. <!-- 1st Question -->
  1022. <div class="question">
  1023. <p><!-- Question goes here! --></p>
  1024. </div>
  1025. <!-- 1st Answer -->
  1026. <div class="answer">
  1027. <p><!-- Answer goes here! --></p>
  1028. </div>
  1029.  
  1030. <!-- Copy and paste this if you need more! -->
  1031. <!--
  1032. <div class="question">
  1033. <p>…</p>
  1034. </div>
  1035. <div class="answer">
  1036. <p>…</p>
  1037. </div>
  1038. -->
  1039.  
  1040. <!-- Last Question -->
  1041. <div class="question">
  1042. <p>Has your question not been answered yet?</p>
  1043. </div>
  1044. <!-- Last Answer -->
  1045. <div class="answer">
  1046. <p>Shoot me a message and I'll get to it as soon as I can. Please be patient!</p>
  1047. <p>
  1048. <iframe frameborder="0" height="200" id="ask_form"
  1049. scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com"
  1050. width="100%"></iframe>
  1051. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').
  1052. allowTransparency=true;</script>
  1053. <![endif]-->
  1054. </p>
  1055. </div>
  1056. </div> <!-- // end faq section -->
  1057.  
  1058. <!-- BLOGROLL SECTION -->
  1059. <!-- Only active if you are following people! -->
  1060. <!-- You don't have to edit anything here! -->
  1061. {block:Following}
  1062. <div class="section" id="blogroll">
  1063. <!-- Section Title -->
  1064. <div class="sect-title">Blogroll</div>
  1065. <!-- Blogroll Masonry Container -->
  1066. <div id="broll">
  1067. {block:Followed}
  1068. <!-- Followed User Container -->
  1069. <div class="followed">
  1070. <!-- Followed User Link -->
  1071. <a href="{FollowedURL}" title="follow {FollowedName}" class="flwl">
  1072. <!-- Followed User Icon -->
  1073. <div class="flw-icon">
  1074. <img src="{FollowedPortraitURL-128}" alt="{FollowedName}'s icon"/>
  1075. </div>
  1076. <!-- Followed User Info -->
  1077. <div class="flw-info">
  1078. <!-- Followed User Blog Title -->
  1079. <div class="flw-title">{FollowedTitle}</div>
  1080. <!-- Followed User Name -->
  1081. <div class="flw-name">@{FollowedName}</div>
  1082. </div>
  1083. </a>
  1084. </div>
  1085. {/block:Followed}
  1086. </div> <!-- // end blogroll masonry container -->
  1087. </div> <!-- // end blogroll section -->
  1088. {/block:Following}
  1089. </div> <!-- // end everything else -->
  1090.  
  1091. <!-- MOBILE FOOTER -->
  1092. <div id="mobile-footer">
  1093. <!-- Desktop Link -->
  1094. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
  1095. <div class="mf-nav">
  1096. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1097. </div>
  1098. </a>
  1099.  
  1100. <!-- Message -->
  1101. <!-- Takes people to dashboard to send you a message. -->
  1102. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="mf-link">
  1103. <div class="mf-nav">
  1104. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1105. </div>
  1106. </a>
  1107.  
  1108. <!-- Home Link -->
  1109. <a href="/" title="return to blog" class="mf-link">
  1110. <div class="mf-nav">
  1111. <span class="fas fa-home" aria-hidden="true"></span>
  1112. </div>
  1113. </a>
  1114.  
  1115. <!-- Follow -->
  1116. <!-- Takes people to a page so that they can follow you. -->
  1117. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mf-link">
  1118. <div class="mf-nav">
  1119. <span class="fas fa-plus" aria-hidden="true"></span>
  1120. </div>
  1121. </a>
  1122.  
  1123. <!-- Credit – Do not touch! -->
  1124. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
  1125. <div class="mf-nav">
  1126. <span class="fas fa-code" aria-hidden="true"></span>
  1127. </div>
  1128. </a>
  1129. </div> <!-- // end mobile footer -->
  1130.  
  1131. <!-- CUSTOM CONTROLS -->
  1132. <div id="custom-controls">
  1133. <!-- Dashboard Link -->
  1134. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
  1135. <div class="cont">
  1136. <span class="fab fa-tumblr" aria-hidden="true"></span>
  1137. </div>
  1138. </a>
  1139.  
  1140. <!-- Message -->
  1141. <!-- Takes people to dashboard to send you a message. -->
  1142. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
  1143. <div class="cont">
  1144. <span class="fas fa-comment-dots" aria-hidden="true"></span>
  1145. </div>
  1146. </a>
  1147.  
  1148. <!-- Customize -->
  1149. <!-- Takes you, the blog owner, to the customization. -->
  1150. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
  1151. <div class="cont">
  1152. <span class="fas fa-palette" aria-hidden="true"></span>
  1153. </div>
  1154. </a>
  1155.  
  1156. <!-- Follow -->
  1157. <!-- Takes people to a page so that they can follow you. -->
  1158. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
  1159. <div class="cont">
  1160. <span class="fas fa-plus" aria-hidden="true"></span>
  1161. </div>
  1162. </a>
  1163. </div> <!-- // end custom controls -->
  1164.  
  1165. <!-- CREDIT -->
  1166. <!-- Do not touch! -->
  1167. <div id="cd">
  1168. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="conlink">
  1169. <div class="cont">
  1170. <span class="fas fa-code" aria-hidden="true"></span>
  1171. </div>
  1172. </a>
  1173. </div>
  1174.  
  1175. <!--Smooth Header Scrolling script. -->
  1176. <script type="text/javascript">
  1177. $(function() {
  1178. $('#h-down').click (function() {
  1179. $('html, body').animate({scrollTop: $('#about').offset().top }, 2500);
  1180. return false;
  1181. });
  1182. });
  1183. </script>
  1184.  
  1185. <!-- Masonry Script, by DeSandro -->
  1186. <!-- Masonry for Blogroll -->
  1187. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  1188. var $grid = $("#broll").masonry({
  1189. itemSelector: ".followed",
  1190. initLayout: 1
  1191. });
  1192. $grid.imagesLoaded().progress(function() {
  1193. $grid.masonry("layout")
  1194. });
  1195. });
  1196. </script>
  1197.  
  1198. <!-- Masonry for Tags -->
  1199. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  1200. var $grid = $("#tags").masonry({
  1201. itemSelector: ".box",
  1202. initLayout: 1
  1203. });
  1204. $grid.imagesLoaded().progress(function() {
  1205. $grid.masonry("layout")
  1206. });
  1207. });
  1208. </script>
  1209.  
  1210. <!-- Tooltips, TippyJs -->
  1211. <script src="https://unpkg.com/popper.js@1"></script>
  1212. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1213. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1214.  
  1215. <script>
  1216. tippy('a[title]', {
  1217. theme: 'wolkenlos',
  1218. arrow: tippy.roundArrow,
  1219. zIndex: 9999999999,
  1220. maxWidth: 300,
  1221.  
  1222. content(reference) {
  1223. const title = reference.getAttribute('title');
  1224. reference.removeAttribute('title');
  1225. return title;
  1226. },
  1227. });
  1228. </script>
  1229.  
  1230. </body>
  1231. </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!