Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-16">
- <title>{Title} | Sonnenhut</title> <!-- Page title. -->
- <link rel="shortcut icon" href="{Favicon}"/>
- <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
- <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
- <!-- Necessary for the theme to be responsive. -->
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Changes the toolbar color on mobile. -->
- <meta name="theme-color" content="#dab"/>
- <!-- Icon font, by suiomi. -->
- <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
- <!-- Necessary for the scripts to work. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
- <!-- BODY FONT -->
- <!-- Open Sans -->
- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
- <!-- TITLE FONT -->
- <!-- Playfair Display -->
- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
- <!-- OTHER FONTS -->
- <!-- Roboto Mono -->
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
- <!-- Cormorant Garamond -->
- <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">
- <!-- Dancing Script -->
- <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
- <style>
- body{
- margin:0;
- top:0;
- left:0;
- background-color:#dab; /* background color */
- color:#222; /* text color */
- font-family:"Open Sans", Verdana; /* font family */
- font-size:1em; /* font size, 1em = 16px */
- text-align:justify; /* alt.: left */
- overflow-x:hidden;
- }
- /* Custom Scrollbar */
- ::-webkit-scrollbar{
- width:10px;
- }
- ::-webkit-scrollbar-thumb{
- width:10px;
- border-radius:5px; /* rounded corners */
- background-color:#fff; /* background color */
- }
- /* Custom Text Selection */
- ::selection{
- background-color:#f3e2e8; /* background color */
- color:#222; /* text color */
- }
- ::-moz-selection{
- background-color:#f3e2e8; /* background color */
- color:#222; /* text color */
- }
- ::-o-selection{
- background-color:#f3e2e8; /* background color */
- color:#222; /* text color */
- }
- ::-webkit-selection{
- background-color:#f3e2e8; /* background color */
- color:#222; /* text color */
- }
- /* Custom Tooltips */
- .tippy-tooltip.sonnenhut-theme {
- background-color:#ad486d; /* background color */
- color:#fff; /* text color */
- text-align:left;
- text-transform:lowercase; /* alt.: normal, uppercase, … */
- }
- .tippy-tooltip.sonnenhut-theme .tippy-svg-arrow {
- fill:#ad486d; /* background color */
- }
- /* ––– END GENERAL | START TEXT STYLES ––– */
- /* TEXT STYLES */
- /* Bold */
- b, strong{
- font-weight:bold;
- color:#444; /* text color */
- }
- /* Italic */
- i, em{
- font-style:italic; /* alt.: normal */
- font-weight:300; /* alt.: 400 */
- color:#000; /* text color */
- }
- /* Marked Text */
- mark{
- color:#fff; /* text color */
- background-color:#ad486d; /* background color */
- padding:0 4px;
- border-radius:4px; /* rounded corners */
- }
- /* Preformatted Text */
- pre{
- font-family:"Roboto Mono", Courier; /* font family */
- font-size:calc(1em - 2px);
- word-wrap:break-all;
- white-space:pre-wrap;
- background-color:#813652; /* background color */
- color:#fff; /* text color */
- padding:1em;
- }
- /* Small */
- small{
- font-size:calc(1em - 4px);
- }
- /* Underlined */
- u{
- text-decoration:none;
- border-bottom:2px solid #222; /* width style color */
- }
- /* Blockquote */
- blockquote{
- border-left:2px solid #ad486d; /* with style color */
- padding-left:1em;
- }
- /* Embedded Media */
- img, iframe{
- max-width:100%;
- }
- /* Empty Paragraphs */
- p:empty{
- display:none;
- }
- /* Text Line */
- hr{
- width:90%;
- border:none;
- height:2px;
- border-radius:2px; /* rounded corners */
- background-color:#dab; /* background color */
- }
- /* LINKS */
- /* Link */
- a{
- text-decoration:none;
- color:#ad486d; /* text color */
- border-bottom:2px solid #ad486d; /* with style color */
- }
- /* Link | Hover */
- a:hover{
- color:#813652; /* text color */
- border-bottom:2px solid #813652; /* with style color */
- }
- /* Link | Transitions */
- a, a:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* LISTS */
- /* »» Custom Lists */
- /* Comment this in if you want standard lists. */
- ul, ol{
- list-style-type:none;
- }
- ul li:before, ol li:before{
- font-family:'honeybee';
- font-weight:400;
- font-size:calc(1em - 2px);
- position:relative;
- z-index:0!important;
- color:#ad486d; /* text color */
- margin-left:-1.5em;
- margin-right:0.5em;
- }
- ul li:before{
- content:"\ec5e";
- }
- ol li:before{
- content:"\ec5f";
- }
- /* »» Standard Lists */
- /* Uncomment the lines below if you want standard lists. */
- /*
- ol{
- list-style-type:decimal;
- }
- ul{
- list-style-type:circle;
- }
- */
- /* CUSTOM FONTS */
- /* Quirky Font */
- .npf_quirky{
- font-family:"Dancing Script", cursive;
- font-size:1.25em;
- }
- /* Chat Font */
- .npf_chat{
- font-family:"Roboto Mono", Courier;
- }
- /* Quote Font */
- .npf_quote{
- font-family:"Cormorant Garamond", "Palatino";
- font-size:1.25em;
- }
- /* COLORED TEXT */
- /* Pink Text */
- .npf_color_niles {
- color:#ff0d9e; /* text color */
- }
- /* Red Text */
- .npf_color_joey {
- color:#ff0d21; /* text color */
- }
- /* Orange Text */
- .npf_color_monica {
- color:#ff720d; /* text color */
- }
- /* Yellow Text */
- .npf_color_phoebe {
- color:#ffbe0d; /* text color */
- }
- /* Green Text */
- .npf_color_ross {
- color:#21d921; /* text color */
- }
- /* Blue Text */
- .npf_color_rachel {
- color:#0d6aff; /* text color */
- }
- /* Purple Text */
- .npf_color_chandler {
- color:#ae0dff; /* text color */
- }
- /* HEADINGS */
- /* Title */
- .title{
- font-family:"Playfair Display", Georgia; /* font family */
- font-size:3em;
- font-style:italic; /* alt.: normal */
- text-align:center; /* alt.: left, justify */
- color:#ad486d; /* text color */
- }
- /* First Heading */
- h1{
- font-size:1.75em;
- border-bottom:2px solid #813652; /* width style color */
- }
- /* Second Heading */
- h2{
- font-size:1.5em;
- border-bottom:2px solid #ad486d; /* width style color */
- }
- /* Third Heading */
- h3{
- font-size:1.25em;
- border-bottom:2px solid #c36f8e; /* width style color */
- }
- /* Fourth Heading */
- h4{
- font-size:1em;
- background-color:#813652; /* background color */
- }
- /* Fifth Heading */
- h5{
- font-size:calc(1em - 2px);
- background-color:#ad486d; /* background color */
- }
- /* Sixth Überschrift */
- h6{
- font-size:calc(1em - 4px);
- background-color:#c36f8e; /* background color */
- }
- h1, h2, h3, h4, h5, h6{
- font-weight:400;
- }
- h1, h2, h3{
- padding-bottom:4px;
- }
- h4, h5, h6{
- padding:4px 8px;
- text-transform:uppercase; /* alt.: lowercase, normal, … */
- color:#fff; /* text color */
- }
- /* ––– END TEXT STYLES | START LAYOUT ––– */
- /* CONTAINER */
- .container{
- width:40vw;
- margin-top:10vh;
- margin-bottom:10vh;
- margin-left:30vw;
- height:auto;
- border-radius:1em; /* rounded corners */
- box-shadow: 20px 20px 60px #bc919f,
- -20px -20px 60px #fec4d7;
- /* offset left, offset top, blur, color */
- }
- /* Container Image */
- .container img{
- max-width:100%;
- border-radius:1em 1em 0 0; /* rounded corners */
- }
- /* About Section */
- .about{
- background-color:#fff; /* background color */
- padding:1em;
- padding-bottom:1.5em;
- border-radius:1em; /* rounded corners */
- margin-top:-1.5em;
- position:relative;
- }
- /* Navigation */
- .navbar{
- background-color:#edd4dd; /* background color */
- padding:1em;
- border-radius:1em; /* rounded corners */
- margin-top:calc(-1.5em - 2px);
- position:relative;
- display:flex;
- align-items:center;
- justify-content:space-between;
- flex-wrap:wrap;
- }
- /* -- Navigation Element */
- .nav{
- margin:4px;
- color:#813652; /* text color */
- }
- /* -- Navigation Element | Hover */
- .nav:hover{
- transform:scale(1.1); /* increase size */
- color:#ad486d; /* text color */
- }
- /* -- Navigation Element | Transitions */
- .nav, .nav:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* -- Navigation Element | Link */
- a.navlink{
- border-bottom:none;
- }
- /* ––– END LAYOUT | START EXTRAS ––– */
- /* CUSTOM CONTROLS */
- /* Hide tumblr controls */
- body > iframe:first-child {
- display:none !important;
- }
- /* Hide tumblr app button, by @yeoli-thm */
- .tmblr-iframe--app-cta-button {
- display:none!important;
- }
- /* Control Container */
- #custom-controls{
- width:calc(2 * 36px + 4px);
- height:calc(2 * 36px + 8px);
- display:flex;
- justify-content:space-between;
- align-items:space-between;
- flex-wrap:wrap;
- position:fixed;
- right:8px;
- top:8px;
- }
- /* Control Element */
- .cont{
- width:36px;
- height:36px;
- display:flex;
- align-items:center;
- justify-content:center;
- background-color:#fff; /* background color */
- color:#ad486d; /* text color */
- font-size:calc(1em - 2px);
- border-radius:4px; /* rounded corners */
- box-shadow: 1px 1px 3px #bc919f,
- -1px -1px 3px #fec4d7;
- /* offset left, offset top, blur, color */
- }
- /* Control Element | Hover */
- .cont:hover{
- transform:scale(1.05); /* increase size */
- }
- /* Control Element | Transitions */
- .cont, .cont:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Control Element | Link */
- a.con-link{
- border-bottom:none;
- }
- /* Credit – Don't touch! */
- .credit{
- position:fixed;
- left:8px;
- bottom:8px;
- }
- /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
- /* LARGE SCREENS (DESKTOP, LAPTOP) */
- @media only screen and (min-width:800px){
- /* Mobile Footer */
- #mb-footer{
- display:none;
- }
- }
- /* SMALL SCREENS (TABLETS, PHONES) */
- @media only screen and (max-width:800px){
- /* Container */
- .container{
- width:90vw;
- margin-left:5vw;
- margin-top:5vh;
- margin-bottom:15vh;
- }
- /* Credit, Custom Controls */
- .credit, #custom-controls{
- display:none;
- }
- /* Mobile Footer */
- #mb-footer{
- width:100vw;
- height:10vh;
- background-color:#fff; /* background color */
- border-radius:1em 1em 0 0; /* rounded corners */
- position:fixed;
- bottom:0;
- left:0;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- }
- /* Mobile Footer Element */
- .mbf-nav{
- width:36px;
- height:36px;
- border-radius:4px; /* rounded corners */
- background-color:#ad486d; /* background color */
- color:#fff; /* text color */
- font-size:calc(1em - 2px);
- display:flex;
- align-items:center;
- justify-content:center;
- }
- /* Mobile Footer Element | Hover */
- .mbf-nav:hover{
- background-color:#813652; /* background color */
- color:#fff; /* text color */
- transform:scale(1.05); /* increase size */
- }
- /* Mobile Footer Element | Transitions */
- .mbf-nav, .mbf-nav:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Mobile Footer Element | Link */
- a.mbf-link{
- border-bottom:none;
- }
- }
- </style>
- </head>
- <body>
- <!-- CONTAINER -->
- <div class="container">
- <!-- IMAGE -->
- <img src="https://images.unsplash.com/photo-1508007226633-b7de6a10cb16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1188&q=80">
- <!-- // end image -->
- <!-- ABOUT SECTION -->
- <div class="about">
- <div class="title">Hello!</div>
- <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>
- <pre>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</pre>
- </div>
- <!-- // end about section -->
- <!-- NAVIGATION -->
- <div class="navbar">
- <!-- Home -->
- <a href="/" title="home" class="navlink">
- <div class="nav">
- <span class="th th-home-o"></span>
- </div>
- </a>
- <!-- Ask Box -->
- {block:AskEnabled}
- <a href="/ask" title="{AskLabel}" class="navlink">
- <div class="nav">
- <span class="th th-envelope-o"></span>
- </div>
- </a>
- {/block:AskEnabled}
- <!-- Submit -->
- {block:SubmissionsEnabled}
- <a href="/submit" title="{SubmitLabel}" class="navlink">
- <div class="nav">
- <span class="th th-paper-plane-o"></span>
- </div>
- </a>
- {/block:SubmissionsEnabled}
- <!-- Archive -->
- <a href="/archive" title="browse archive" class="navlink">
- <div class="nav">
- <span class="th th-box-2-o"></span>
- </div>
- </a>
- <!-- Custom Link 1 -->
- <a href="/" title="custom link 1" class="navlink">
- <div class="nav">
- <span class="th th-link"></span>
- </div>
- </a>
- <!-- Custom Link 2 -->
- <a href="/" title="custom link 2" class="navlink">
- <div class="nav">
- <span class="th th-link"></span>
- </div>
- </a>
- <!-- Custom Link 3 -->
- <a href="/" title="custom link 3" class="navlink">
- <div class="nav">
- <span class="th th-link"></span>
- </div>
- </a>
- <!-- Custom Link 4 -->
- <a href="/" title="custom link 4" class="navlink">
- <div class="nav">
- <span class="th th-link"></span>
- </div>
- </a>
- <!-- Custom Link 5 -->
- <a href="/" title="custom link 5" class="navlink">
- <div class="nav">
- <span class="th th-link"></span>
- </div>
- </a>
- <!-- Add more links after this line. -->
- </div>
- <!-- // end navigation -->
- </div>
- <!-- // end container -->
- <!-- Feel free to add more containers below this line. -->
- <!-- »»» EVERYTHING BELOW DOES NOT NEED TO BE EDITED! ««« -->
- <!-- CUSTOM CONTROLS -->
- <div id="custom-controls">
- <!-- Dashboard -->
- <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="con-link">
- <div class="cont">
- <span class="th th-tumblr-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Direct Messages -->
- <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="con-link">
- <div class="cont">
- <span class="th th-bubble-heart-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Customization -->
- <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="con-link">
- <div class="cont">
- <span class="th th-pencil-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Follow -->
- <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="con-link">
- <div class="cont">
- <span class="th th-plus-1-o" aria-hidden="true"></span>
- </div>
- </a>
- </div>
- <!-- // end custom controls -->
- <!-- CREDIT -->
- <!-- Don't touch! -->
- <a href="https://silbrigthemes.tumblr.com/" class="con-link">
- <div class="cont credit" title="page by silbrigthemes">
- <span class="th th-code"></span>
- </div>
- </a>
- <!-- // end credit -->
- <!-- MOBILE FOOTER -->
- <div id="mb-footer">
- <!-- Dashboard -->
- <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mbf-link">
- <div class="mbf-nav">
- <span class="th th-tumblr-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Direct Messages -->
- <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="mbf-link">
- <div class="mbf-nav">
- <span class="th th-bubble-heart-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Home | Index -->
- <a href="/" title="return to blog" class="mbf-link">
- <div class="mbf-nav">
- <span class="th th-home-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Follow -->
- <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="mbf-link">
- <div class="mbf-nav">
- <span class="th th-plus-1-o" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Credit - Don't touch! -->
- <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mbf-link">
- <div class="mbf-nav">
- <span class="th th-code" aria-hidden="true"></span>
- </div>
- </a>
- </div>
- <!-- // ende mobile footer -->
- <!-- TOOLTIPS, Tippy.js by atomiks -->
- <!-- Custom tooltips. -->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
- <script>
- tippy('a[title], .credit', {
- theme: 'sonnenhut',
- arrow: tippy.roundArrow,
- zIndex: 9999999999,
- maxWidth: 300,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment