silbrigthemes

Sonnenhut (Page 32)

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