Advertisement
silbrigthemes

Meeresrauschen (Page 31)

Jun 18th, 2020 (edited)
175
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.95 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. MEERESRAUSCHEN
  7. Page 31 by silbrigthemes
  8.  
  9. Meeresrauschen is a responsive about page with a color palette inspired by the ocean.
  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} | Aprilscherz</title> <!-- Page title. -->
  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. <!-- Mobile Toolbar -->
  53. <meta name="theme-color" content="#007ea7"/>
  54.  
  55. <!-- Necessary for responsive layout. -->
  56. <meta name="viewport" content="width=device-width, initial-scale=1">
  57.  
  58. <!-- Icon font, by suiomi. -->
  59. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  60.  
  61. <!-- Necessary for scripts to work. -->
  62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63.  
  64. <!-- FONTS -->
  65. <!-- Merriweather -->
  66. <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  67. <!-- Merriweather Sans -->
  68. <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700&display=swap&subset=latin-ext" rel="stylesheet">
  69. <!-- Open Sans -->
  70. <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">
  71.  
  72. <!-- OTHER FONTS -->
  73. <!-- Roboto Mono -->
  74. <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">
  75. <!-- Cormorant Garamond -->
  76. <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
  77. <!-- Dancing Script -->
  78. <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=latin-ext,vietnamese" rel="stylesheet">
  79.  
  80. <style>
  81.  
  82. body{
  83. margin:0;
  84. top:0;
  85. left:0;
  86. background-color:#007ea7; /* background color */
  87. font-size:1em; /* font size */
  88. color:#222; /* text color */
  89. font-family:"Open Sans", Verdana; /* font */
  90. overflow-x:hidden;
  91. text-align:justify; /* alt.: left */
  92. }
  93.  
  94. /* Custom Scrollbar */
  95. ::-webkit-scrollbar{
  96. width:10px;
  97. background-color:#fff; /* background color */
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb{
  101. width:10px;
  102. background-color:#007ea7; /* background color */
  103. }
  104.  
  105. /* Custom Text Selection */
  106. ::selection{
  107. background-color:#64b8c1; /* background color */
  108. color:#fff; /* text color */
  109. }
  110.  
  111. ::-moz-selection{
  112. background-color:#64b8c1; /* background color */
  113. color:#fff; /* text color */
  114. }
  115.  
  116. ::-o-selection{
  117. background-color:#64b8c1; /* background color */
  118. color:#fff; /* text color */
  119. }
  120.  
  121. ::-webkit-selection{
  122. background-color:#64b8c1; /* background color */
  123. color:#fff; /* text color */
  124. }
  125.  
  126. /* Custom Tooltips */
  127. .tippy-tooltip.aprilscherz-theme {
  128. background-color:#003249; /* background color */
  129. color:#fff; /* text color */
  130. text-align:left;
  131. }
  132.  
  133. .tippy-tooltip.aprilscherz-theme .tippy-svg-arrow {
  134. fill:#003249; /* background color */
  135. }
  136.  
  137. /* ––– END GENERAL | START TEXT STYLES ––– */
  138.  
  139. /* TEXT STYLES */
  140. /* Bold */
  141. b, strong{
  142. font-weight:bold;
  143. color:#444; /* text color */
  144. }
  145.  
  146. /* Italic */
  147. i, em{
  148. font-style:italic;
  149. font-weight:300; /* alt.: 400 */
  150. color:#000; /* text color */
  151. }
  152.  
  153. /* Marked */
  154. mark{
  155. background-color:#007ea7; /* background color */
  156. padding:0 4px;
  157. color:#fff; /* text color */
  158. }
  159.  
  160. /* Preformatted */
  161. pre{
  162. font-family:"Roboto Mono", Courier;
  163. font-size:calc(1em - 2px);
  164. word-wrap:break-all;
  165. white-space:pre-wrap;
  166. background-color:#003249; /* background color */
  167. color:#fff; /* text color */
  168. padding:1em;
  169. }
  170.  
  171. /* Small */
  172. small{
  173. font-size:calc(1em - 4px);
  174. }
  175.  
  176. /* Underlined */
  177. u{
  178. text-decoration:none;
  179. border-bottom:2px solid #222; /* width style color */
  180. }
  181.  
  182. /* Blockquote */
  183. blockquote{
  184. border-left:2px solid #007ea7; /* width style color */
  185. padding-left:1em;
  186. }
  187.  
  188. /* Embedded Media */
  189. img, iframe{
  190. max-width:100%;
  191. }
  192.  
  193. /* Empty Paragraphs */
  194. p:empty{
  195. display:none;
  196. }
  197.  
  198. /* Text Line */
  199. hr{
  200. width:90%;
  201. height:2px;
  202. border:none;
  203. background-color:#007ea7; /* background color */
  204. box-shadow:0 4px #003249, 0 -4px #64b8c1;
  205. /* offset right | offset top | color */
  206. }
  207.  
  208. /* LISTS */
  209. /* Ordered Lists */
  210. ol{
  211. list-style-type:decimal-leading-zero;
  212. }
  213.  
  214. /* Unordered Lists */
  215. ul{
  216. list-style-type:square;
  217. }
  218.  
  219. /* LINKS */
  220. /* Link */
  221. a{
  222. text-decoration:none;
  223. border-bottom:2px solid #007ea7; /* width style color */
  224. color:#007ea7; /* text color */
  225. }
  226.  
  227. /* Link | Hover */
  228. a:hover{
  229. border-bottom:2px solid #003249; /* width style color */
  230. color:#003249; /* text color */
  231. }
  232.  
  233. /* Link | Transition */
  234. a, a:hover{
  235. transition:0.5s;
  236. -moz-transition:0.5s;
  237. -o-transition:0.5s;
  238. -webkit-transition:0.5s;
  239. }
  240.  
  241. /* COLORED TEXT */
  242. /* Red Text */
  243. .npf_color_joey {
  244. color:#ff3b21; /* text color */
  245. }
  246.  
  247. /* Orange Text */
  248. .npf_color_monica {
  249. color:#ff8821; /* text color */
  250. }
  251.  
  252. /* Yellow Text */
  253. .npf_color_phoebe {
  254. color:#ffcb21; /* text color */
  255. }
  256.  
  257. /* Green Text */
  258. .npf_color_ross {
  259. color:#50c950; /* text color */
  260. }
  261.  
  262. /* Blue Text */
  263. .npf_color_rachel {
  264. color:#212fff; /* text color */
  265. }
  266.  
  267. /* Purple Text */
  268. .npf_color_chandler {
  269. color:#9721ff; /* text color */
  270. }
  271.  
  272. /* Pink Text */
  273. .npf_color_niles {
  274. color:#ff21b5; /* text color */
  275. }
  276.  
  277. /* CUSTOM FONTS */
  278. /* Quirky Font */
  279. .npf_quirky{
  280. font-family:"Dancing Script", cursive;
  281. font-size:1.25em;
  282. }
  283.  
  284. /* Chat Font */
  285. .npf_chat{
  286. font-family:"Roboto Mono", Courier;
  287. }
  288.  
  289. /* Quote Font */
  290. .npf_quote{
  291. font-family:"Cormorant Garamond", "Palatino";
  292. font-size:1.25em;
  293. }
  294.  
  295. /* HEADINGS */
  296. /* First Heading */
  297. h1{
  298. font-size:1.75em;
  299. border-bottom:2px solid #64b8c1; /* width style color */
  300. }
  301.  
  302. /* Second Heading */
  303. h2{
  304. font-size:1.5em;
  305. border-bottom:2px solid #007ea7; /* width style color */
  306. }
  307.  
  308. /* Third Heading */
  309. h3{
  310. font-size:1.25em;
  311. border-bottom:2px solid #003249; /* width style color */
  312. }
  313.  
  314. /* Fourth Heading */
  315. h4{
  316. font-size:1em;
  317. background-color:#64b8c1; /* background color */
  318. }
  319.  
  320. /* Fifth Heading */
  321. h5{
  322. font-size:calc(1em - 2px);
  323. background-color:#007ea7; /* background color */
  324. }
  325.  
  326. /* Sixth Überschrift */
  327. h6{
  328. font-size:calc(1em - 4px);
  329. background-color:#003249; /* background color */
  330. }
  331.  
  332. h1, h2, h3, h4, h5, h6{
  333. font-weight:400;
  334. }
  335.  
  336. h1, h2, h3{
  337. padding-bottom:4px;
  338. }
  339.  
  340. h4, h5, h6{
  341. padding:4px 8px;
  342. text-transform:uppercase;
  343. color:#fff; /* text color */
  344. }
  345.  
  346. /* ––– END TEXT STYLES | START Layout ––– */
  347.  
  348. /* SIDEBAR */
  349. #sidebar{
  350. width:calc(30vw - 2em);
  351. height:calc(100vh - 2em);
  352. padding:1em;
  353. position:fixed;
  354. top:0;
  355. right:0;
  356. background-color:#fff; /* background color */
  357. box-shadow:0 -4px 8px #003249;
  358. /* offset right | offset top | blur | color */
  359. display:flex;
  360. align-items:center;
  361. justify-content:center;
  362. flex-direction:column;
  363. }
  364.  
  365. /* Sidebar | Icon */
  366. #s-icon img{
  367. width:96px;
  368. height:96px;
  369. margin-bottom:8px;
  370. }
  371.  
  372. /* Sidebar | Title */
  373. #s-title{
  374. color:#007ea7; /* text color */
  375. font-size:2.5em;
  376. font-family:"Merriweather", Georgia; /* font */
  377. }
  378.  
  379. /* Sidebar | Description */
  380. #s-desc{
  381. text-align:center;
  382. max-height:40vh;
  383. overflow-y:scroll;
  384. }
  385.  
  386. /* Sidebar | Navigation */
  387. #s-nav{
  388. margin-top:8px;
  389. display:flex;
  390. align-items:center;
  391. justify-content:center;
  392. flex-wrap:wrap;
  393. }
  394.  
  395. /* Navigation Link */
  396. a.nav-link{
  397. background-color:#007ea7; /* background color */
  398. color:#fff; /* text color */
  399. padding:4px 8px;
  400. border-bottom:none;
  401. font-size:calc(1em - 2px);
  402. margin-right:2px;
  403. margin-left:2px;
  404. margin-bottom:4px;
  405. }
  406.  
  407. /* Navigation Link | Hover */
  408. a.nav-link:hover{
  409. background-color:#003249; /* background color */
  410. color:#fff; /* text color */
  411. }
  412.  
  413. /* Navigation Link | Transitions */
  414. a.nav-link, a.nav-link:hover{
  415. transition:0.5s;
  416. -moz-transition:0.5s;
  417. -o-transition:0.5s;
  418. -webkit-transition:0.5s;
  419. }
  420.  
  421. /* ABOUT */
  422. /* Container */
  423. #container{
  424. width:50vw;
  425. padding:1em;
  426. margin-top:10vh;
  427. margin-bottom:10vh;
  428. margin-left:calc(10vw - 1em);
  429. background-color:#fff; /* background color */
  430. box-shadow:0 0 8px #003249;
  431. /* offset right | offset top | blur | color */
  432. }
  433.  
  434. /* Container Title */
  435. #c-title{
  436. font-size:3em;
  437. text-align:center; /* alt.: left */
  438. color:#007ea7; /* text color */
  439. font-family:"Merriweather", Georgia; /* font */
  440. }
  441.  
  442. /* ––– END LAYOUT | START EXTRAS ––– */
  443.  
  444. /* CUSTOM CONTROLS */
  445. /* Hide tumblr controls */
  446. body > iframe:first-child {
  447. display:none !important;
  448. }
  449.  
  450. /* Hide tumblr app button, by @yeoli-thm */
  451. .tmblr-iframe--app-cta-button {
  452. display:none!important;
  453. }
  454.  
  455. /* Control Container */
  456. #custom-controls{
  457. width:calc(5 * 36px + 4 * 8px);
  458. height:36px;
  459. display:flex;
  460. justify-content:space-between;
  461. position:fixed;
  462. right:calc(15vw - (2.5 * 36px + 2 * 4px));
  463. top:8px;
  464. }
  465.  
  466. /* Control Element */
  467. .cont{
  468. width:36px;
  469. height:36px;
  470. display:flex;
  471. align-items:center;
  472. justify-content:center;
  473. background-color:#007ea7; /* background color */
  474. color:#fff; /* text color */
  475. }
  476.  
  477. /* Control Element | Hover */
  478. .cont:hover{
  479. background-color:#003249; /* background color */
  480. color:#fff; /* text color */
  481. }
  482.  
  483. /* Control Element | Transitions */
  484. .cont, .cont:hover{
  485. transition:0.5s;
  486. -moz-transition:0.5s;
  487. -o-transition:0.5s;
  488. -webkit-transition:0.5s;
  489. }
  490.  
  491. /* Control Element | Link */
  492. a.con-link{
  493. border-bottom:none;
  494. }
  495.  
  496. /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
  497.  
  498. /* LARGE SCREENS | PC, LAPTOP */
  499. @media only screen and (min-width:800px){
  500. /* Mobile Footer */
  501. #mb-footer{
  502. display:none;
  503. }
  504. }
  505.  
  506. /* SMALL SCREENS | TABLETS, PHONES */
  507. @media only screen and (max-width:800px){
  508. /* Custom Scrollbar */
  509. ::-webkit-scrollbar{
  510. width:10px;
  511. background-color:#007ea7; /* background color */
  512. }
  513.  
  514. ::-webkit-scrollbar-thumb{
  515. width:10px;
  516. background-color:#fff; /* background color */
  517. }
  518.  
  519. #sidebar, #custom-controls, #credit{
  520. display:none;
  521. }
  522.  
  523. /* Container */
  524. #container{
  525. width:80vw;
  526. margin-bottom:calc(10vh + 2em);
  527. }
  528.  
  529. /* MOBILE FOOTER */
  530. #mb-footer{
  531. width:100vw;
  532. height:10vh;
  533. background-color:#fff; /* background color */
  534. box-shadow:0 -2px 8px #003249;
  535. /* offset right | offset top | blur | color */
  536. position:fixed;
  537. left:0;
  538. bottom:0;
  539. display:flex;
  540. justify-content:space-evenly;
  541. align-items:center;
  542. }
  543.  
  544. /* Mobile Footer Element */
  545. .mbf-nav{
  546. width:36px;
  547. height:36px;
  548. display:flex;
  549. align-items:center;
  550. justify-content:center;
  551. background-color:#007ea7; /* background color */
  552. color:#fff; /* text color */
  553. }
  554.  
  555. /* Mobile Footer Element | Hover */
  556. .mbf-nav:hover{
  557. background-color:#003249; /* background color */
  558. color:#fff; /* text color */
  559. }
  560.  
  561. /* Mobile Footer Element | Transitions */
  562. .mbf-nav, .mbf-nav:hover{
  563. transition:0.5s;
  564. -moz-transition:0.5s;
  565. -o-transition:0.5s;
  566. -webkit-transition:0.5s;
  567. }
  568.  
  569. /* Mobile Footer Element | Link */
  570. a.mbf-link{
  571. border-bottom:none;
  572. }
  573. }
  574.  
  575. </style>
  576. </head>
  577.  
  578. <body>
  579.  
  580. <!-- SIDEBAR -->
  581. <div id="sidebar">
  582. <!-- Icon -->
  583. <div id="s-icon">
  584. <img src="https://images.unsplash.com/photo-1441829266145-6d4bfbd38eb4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1102&q=80" alt="sidebar icon"/>
  585. </div>
  586. <!-- Title -->
  587. <div id="s-title">Meeresrauschen</div>
  588. <!-- Description -->
  589. <div id="s-desc">
  590. Blaue Wogen rauschen sanft; am Horizont küssen sie die Wolken.
  591. </div>
  592. <!-- Navigation -->
  593. <div id="s-nav">
  594. <!-- Home -->
  595. <a href="/" class="nav-link" title="return to blog">
  596. <span class="th th-home-o"></span> Index
  597. </a>
  598.  
  599. <!-- Ask Box -->
  600. {block:AskEnabled}
  601. <a href="/ask" class="nav-link" title="{AskLabel}">
  602. <span class="th th-envelope-o"></span> {AskLabel}
  603. </a>
  604. {/block:AskEnabled}
  605.  
  606. <!-- Submissions -->
  607. {block:SubmissionsEnabled}
  608. <a href="/submit" class="nav-link" title="{SubmitLabel}">
  609. <span class="th th-paper-plane-o"></span> {SubmitLabel}
  610. </a>
  611. {/block:SubmissionsEnabled}
  612.  
  613. <!-- Archive -->
  614. <a href="/archive" class="nav-link" title="archive">
  615. <span class="th th-box-2-o"></span> Archive
  616. </a>
  617.  
  618. <!-- Custom Link 1 -->
  619. <a href="/" class="nav-link" title="custom 1">
  620. <span class="th th-link"></span> Custom 1
  621. </a>
  622.  
  623. <!-- Custom Link 2 -->
  624. <a href="/" class="nav-link" title="custom 2">
  625. <span class="th th-link"></span> Custom 2
  626. </a>
  627.  
  628. <!-- Custom Link 3 -->
  629. <a href="/" class="nav-link" title="custom 3">
  630. <span class="th th-link"></span> Custom 3
  631. </a>
  632. <!-- ADD MORE LINKS HERE -->
  633. </div>
  634. <!-- // end navigation -->
  635. </div>
  636. <!-- // end sidebar -->
  637.  
  638. <!-- CONTAINER -->
  639. <div id="container">
  640. <div id="c-title">[PAGE TITLE]</div>
  641. [YOUR TEXT GOES HERE]
  642. </div>
  643. <!-- // ende container -->
  644.  
  645. <!-- MOBILE FOOTER -->
  646. <div id="mb-footer">
  647. <!-- Dashboard -->
  648. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mbf-link">
  649. <div class="mbf-nav">
  650. <span class="th th-tumblr-o" aria-hidden="true"></span>
  651. </div>
  652. </a>
  653.  
  654. <!-- Direct Messages -->
  655. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="mbf-link">
  656. <div class="mbf-nav">
  657. <span class="th th-bubble-heart-o" aria-hidden="true"></span>
  658. </div>
  659. </a>
  660.  
  661. <!-- Home | Index -->
  662. <a href="/" title="return to blog" class="mbf-link">
  663. <div class="mbf-nav">
  664. <span class="th th-home-o" aria-hidden="true"></span>
  665. </div>
  666. </a>
  667.  
  668. <!-- Follow -->
  669. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mbf-link">
  670. <div class="mbf-nav">
  671. <span class="th th-plus-1-o" aria-hidden="true"></span>
  672. </div>
  673. </a>
  674.  
  675. <!-- Credit - Don't touch! -->
  676. <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mbf-link">
  677. <div class="mbf-nav">
  678. <span class="th th-code" aria-hidden="true"></span>
  679. </div>
  680. </a>
  681. </div>
  682. <!-- // ende mobile footer -->
  683.  
  684. <!-- CUSTOM CONTROLS -->
  685. <div id="custom-controls">
  686. <!-- Dashboard -->
  687. <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="con-link">
  688. <div class="cont">
  689. <span class="th th-tumblr-o" aria-hidden="true"></span>
  690. </div>
  691. </a>
  692.  
  693. <!-- Direct Messages -->
  694. <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="con-link">
  695. <div class="cont">
  696. <span class="th th-bubble-heart-o" aria-hidden="true"></span>
  697. </div>
  698. </a>
  699.  
  700. <!-- Customization -->
  701. <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="con-link">
  702. <div class="cont">
  703. <span class="th th-pencil-o" aria-hidden="true"></span>
  704. </div>
  705. </a>
  706.  
  707. <!-- Follow -->
  708. <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="con-link">
  709. <div class="cont">
  710. <span class="th th-plus-1-o" aria-hidden="true"></span>
  711. </div>
  712. </a>
  713.  
  714. <!-- CREDIT -->
  715. <!-- Don't touch! -->
  716. <a href="https://silbrigthemes.tumblr.com/" class="con-link" title="page by silbrigthemes">
  717. <div class="cont">
  718. <span class="th th-code"></span>
  719. </div>
  720. </a>
  721. <!-- // end credit -->
  722. </div>
  723. <!-- // end custom controls -->
  724.  
  725. <!-- TOOLTIPS, Tippy.js by atomiks -->
  726. <!-- Custom tooltips. -->
  727. <script src="https://unpkg.com/popper.js@1"></script>
  728. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  729. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  730.  
  731. <script>
  732. tippy('a[title], #credit', {
  733. theme: 'aprilscherz',
  734. arrow: tippy.roundArrow,
  735. zIndex: 9999999999,
  736. maxWidth: 300,
  737.  
  738. content(reference) {
  739. const title = reference.getAttribute('title');
  740. reference.removeAttribute('title');
  741. return title;
  742. },
  743. });
  744. </script>
  745.  
  746. </body>
  747. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement