Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--
- =========DMMMM============DDDMMMMD=====M
- =====IMM====MMMN=========+MMMMMMMM=====M
- ===NM======MMMMM=======MMMMM==?MMMDD===M
- =+D~=======MM=NMM====MMMMM====MMM8==DD=M
- OD========MMN==MMM=MMMMM=====MMMM====NDM
- DD=======MMM===MMMMMMM======+MMM======DM
- D=======MMM=====MMMM========MMM=======DD
- D8=====MMM======MM==========MM========DM
- DD====MMM=======D===========MM=======DDM
- =$D==MMD====================M=======DD=M
- ===NMM======================M=====ND===M
- ===M=ODD=======================MDN=====M
- =========DDNN=============IDDD=========M
- ================7MDDDD8================M
- CODE BY CHELLE, FIND ME AT
- LOISLANE.TUMBLR.COM
- PLEASE LEAVE THE CREDIT
- DO NOT STEAL THE ENTIRE/BIG CHUNKS
- OF THE CODE AND DISTRIBUTE IT
- AS IF IT WERE YOUR OWN
- -->
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css"> {block:Description}
- <meta name="description" content="{MetaDescription}" /> {/block:Description}
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
- crossorigin="anonymous">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600" rel="stylesheet">
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css" />
- <meta name="color:background" content="#fbfbfb" />
- <meta name="color:text" content="#797979" />
- <meta name="color:accent1" content="#2374ff" />
- <meta name="color:accent2" content="#23c4ff" />
- <meta name="color:blockquote" content="#dadada" />
- <meta name="color:post background" content="#ffffff" />
- <meta name="color:border" content="#dfdfdf" />
- <meta name="color:link" content="#2374ff" />
- <meta name="color:titleLinkOnHover" content="#000000" />
- <meta name="color:titlebg" content="#ededed" />
- <meta name="color:titleborder" content="#dfdfdf" />
- <meta name="color:sidebarLink" content="#ffffff" />
- <meta name="image:sidebar" content="" />
- <meta name="image:sidebar avatar" content="">
- <meta name="text:go to the website below to search icons, use the icon titles to replace the ones for your links:" content="http://fontawesome.io/icons/"
- />
- <meta name="text:about link" content="/about" />
- <meta name="text:link 1 URL" content="/" />
- <meta name="text:link 1 icon" content="tag" />
- <meta name="text:link 1" content="link 1" />
- <meta name="text:link 2 URL" content="/" />
- <meta name="text:link 2 icon" content="cog" />
- <meta name="text:link 2" content="link 2" />
- <meta name="text:link 3 URL" content="/" />
- <meta name="text:link 3 icon" content="book" />
- <meta name="text:link 3" content="link 3" />
- <meta name="text:link 4 URL" content="/" />
- <meta name="text:link 4 icon" content="pencil" />
- <meta name="text:link 4" content="" />
- <meta name="text:link 5 URL" content="/" />
- <meta name="text:link 5 icon" content="twitter" />
- <meta name="text:link 5" content="" />
- <meta name="text:link 6 URL" content="/" />
- <meta name="text:link 6 icon" content="code" />
- <meta name="text:link 6" content="" />
- <meta name="text:max post width" content="540" />
- <meta name="if:show about" content="1" />
- <meta name="if:show sidebar" content="1" />
- <meta name="if:show additional links" content="1" />
- </head>
- <body>
- <style>
- /*-------------------------------------------------------------
- THE BASICS
- ---------------------------------------------------------------*/
- html, body {
- width:100vw;
- height:100vh;
- display:fixed;
- overflow:hidden;
- }
- body {
- font-family: 'Raleway', sans-serif;
- background: {color:background};
- color: {color:text};
- font-size:1rem;
- }
- p {
- font-family: 'Raleway', sans-serif;
- font-size:0.75rem;
- font-weight: 300;
- line-height: 12px;
- }
- a {
- color:{color:link};
- text-decoration: none;
- transition: all 0.3s;
- }
- a:hover {
- color:{color:accent2};
- text-decoration: none;
- }
- blockquote {
- border-left:0;
- padding:0;
- }
- ul:not(.navbar-nav) {
- list-style:none;
- text-align:left!important;
- padding-left:0;
- }
- ul:not(.navbar-nav) li {
- position:relative;
- padding-left:30px;
- line-height:13px;
- font-size:12px;
- color:{color:text};
- }
- ul:not(.navbar-nav) li:before {
- position:absolute;
- left:15px;
- vertical-align:baseline!important;
- font-family: "FontAwesome";
- content:'\f096';
- -moz-transition-duration:0.4s;
- -webkit-transition-duration:0.4s;
- -o-transition-duration:0.4s;
- }
- ul:not(.navbar-nav) li:hover:before {
- color:{color:accent1};
- position:absolute;
- vertical-align:baseline!important;
- font-family: "FontAwesome";
- content:'\f046';
- -moz-transition-duration:0.4s;
- -webkit-transition-duration:0.4s;
- -o-transition-duration:0.4s;
- }
- i, span {
- display: inline-block;
- }
- /* container for everything */
- .my-container {
- display: flex;
- height: 100%;
- width: 100vw;
- overflow: hidden;
- flex-direction: row;
- flex-wrap: nowrap;
- display:fixed;
- }
- /*-------------------------------------------------------------
- GRADIENT SIDEBAR
- ---------------------------------------------------------------*/
- .sidebar {
- width: 80px;
- height: 100vh;
- overflow:hidden;
- max-height:100vh;
- margin-right:20px;
- -webkit-box-shadow: 2px 6px 15px 1px rgba(0,0,0,0.20);
- -moz-box-shadow: 2px 6px 15px 1px rgba(0,0,0,0.20);
- box-shadow: 2px 6px 15px 1px rgba(0,0,0,0.20);
- min-width: 80px;
- transition: 0.3s all;
- opacity: 1;
- background: {color:accent1};
- background: -moz-linear-gradient(top, {color:accent1} 0%, {color:accent2} 100%);
- background: -webkit-linear-gradient(top, {color:accent1} 0%, {color:accent2} 100%);
- background: linear-gradient(to bottom, {color:accent1} 0%,{color:accent2} 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:accent1}', endColorstr='{color:accent2}',GradientType=0 );
- }
- .sidebar .sidebar-header strong {
- display: block;
- }
- .sidebar ul {
- position: relative;
- content: none;
- }
- .sidebar ul li a {
- text-align: left;
- padding: 20px 10px;
- text-align: center;
- font-size: 0.85em;
- text-decoration: none !important;
- color:{color:sidebarLink};
- }
- .sidebar ul li {
- padding: 0;
- font-size: 15px;
- }
- .sidebar ul li:before {
- display: none;
- }
- .sidebar ul li a i {
- margin-right: 0;
- display: block;
- font-size: 1.8em;
- margin-bottom: 5px;
- }
- .sidebar-header {
- width: 80px;
- height: 80px;
- overflow: hidden;
- box-shadow: rgba(0, 0, 0, .1) 1px 1px 20px;
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- background-image:url({image:sidebar avatar}),
- url({PortraitURL-128});
- }
- .sidebar .sidebar-header strong {
- display: none;
- font-size: 1.8em;
- }
- .sidebar ul.components {
- padding: 20px 0;
- }
- .sidebar ul li a {
- padding: 10px;
- display: block;
- }
- .sidebar ul li a:hover,
- a[aria-expanded="true"] {
- color: {color:accent1}!important;
- text-decoration:none !important;
- box-shadow: 8px 8px 10px rgba(68, 68, 68, 0.1);
- background: {color:sidebarLink}!important;
- -webkit-transition: all 0.25s;
- -moz-transition: all 0.25s;
- -o-transition: all 0.25s;
- transition: all 0.25s;
- }
- .sidebar ul li a i {
- margin-right: 10px;
- }
- .sidebar ul li>a,
- a[aria-expanded="true"] {
- color: {color:sidebarLink};
- }
- a[data-toggle="collapse"] {
- position: relative;
- }
- a[aria-expanded="false"]::before,
- a[aria-expanded="true"]::before {
- content: '\e259';
- display: block;
- position: absolute;
- right: 20px;
- font-family: 'Glyphicons Halflings';
- font-size: 0.6em;
- }
- a[aria-expanded="true"]::before {
- content: '\e260';
- }
- a[aria-expanded="false"]::before,
- a[aria-expanded="true"]::before {
- top: auto;
- bottom: 5px;
- right: 50%;
- -webkit-transform: translateX(50%);
- -ms-transform: translateX(50%);
- transform: translateX(50%);
- }
- .sidebar {
- margin-left: 0 !important;
- }
- .sidebar .sidebar-header strong {
- display: block;
- }
- .sidebar ul li a {
- padding: 20px 10px;
- }
- .sidebar ul li a i {
- margin-right: 0;
- display: block;
- font-size: 1.3em;
- }
- .sidebar ul ul a {
- padding: 10px !important;
- }
- /* sidebar with image */
- .img-sidebar {
- min-width: 350px;
- max-width:450px;
- width:100%;
- height: 100vh;
- overflow:hidden;
- max-height:100vh;
- background:{color:background};
- transition: 0.3s all;
- opacity: 1;
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .titleSidebar {
- text-align:left;
- padding:0px 0px 0px 0px;
- width:300px;
- background:{color:post background};
- box-shadow: 3px 3px 10px rgba(68, 68, 68, 0.1);
- border-radius:{text:border radius}px;
- visibility: visible!important;
- opacity: 1;
- transition: visibility 0s, opacity 0.5s linear;
- }
- .titleSidebar img {
- border-top-left-radius:{text:border radius}px;
- border-top-right-radius:{text:border radius}px;
- width:300px;
- }
- .blogtitle {
- height:auto;
- max-width:200px;
- width:auto;
- position:relative;
- left:50%;
- transform:translate(-50%, -50%);
- border-radius:20px;
- padding:8px 20px 8px 20px;
- letter-spacing:2px;
- line-height:12px;
- background:{color:post background};
- text-align:center;
- box-shadow: rgba(0,0,0,.08) 1px 1px 1px 1px;
- font-weight:lighter;
- font-size:12px;
- z-index:800;
- }
- .description {
- padding:10px 20px 10px 30px;
- font-family:'Raleway', Arial;
- text-align: center;
- font-size:12px;
- }
- .my-pagination {
- padding:10px 10px 10px 20px;
- text-align: center;
- font-size:12px;
- }
- .my-pagination a, .current_page {
- background:{color:accent1};
- color:{color:post background};
- border-radius:50%;
- display: inline-block;
- position:relative;
- width: 25px;
- margin-right:5px;
- height: 25px;
- line-height:25px;
- border-radius: 25px;
- font-size:11px;
- }
- .current_page, .my-pagination a:hover {
- color:{color:accent2};
- background:{color:post background};
- border: 1px solid {color:accent2};;
- }
- .mainlinks a {
- display:inline-block;
- font-size:15px;
- width:30px;
- height:30px;
- color:{color:text};
- margin-right:10px;
- line-height:30px;
- border-radius:5px;
- }
- .mainlinks a:hover {
- background:{color:accent1};
- color:{color:post background};
- box-shadow: 3px 3px 10px rgba(68, 68, 68, 0.2);
- }
- .mainlinks {
- border-top: 1px solid {color:border};
- text-align:center;
- padding:10px;
- padding-left:15px;
- margin-top:10px;
- }
- .topbar
- {
- height: 0px;
- overflow: hidden;
- width:0px;
- transition: 0.3s all;
- z-index:999999;
- background:transparent;
- }
- /*-----------------------------------------------------------
- POSTS
- -------------------------------------------------------------*/
- .posts-container {
- width: 100%;
- height: 100vh;
- max-height:100vh;
- overflow-y: auto;
- overflow-x:hidden;
- background: {color:background};
- text-align:center;
- padding-top:25px;
- padding-bottom:40px;
- }
- .posts {
- max-width:{text:max post width}px;
- padding-bottom:25px;
- padding-top:25px;
- width:100%;
- padding-right:15px;
- }
- .posts img {
- max-width:{text:max post width}px;
- }
- .photo-slideshow .row {
- display:block!important;
- }
- .fancybox-lock .fancybox-overlay {
- overflow: hidden;
- }
- .itemsbelow img {
- max-width:100%;
- height:auto;
- }
- .upperstuff {
- font-size:90%;
- letter-spacing:1px;
- text-align:left;
- background:none;
- display:inline-block!important;
- width:100%;
- margin:0 auto;
- padding-bottom:10px;
- }
- .usericon {
- display:inline-block!important;
- margin-top:12px;
- overflow:visible;
- box-shadow: 3px 3px 10px rgba(68, 68, 68, 0.1);
- width:auto;
- height:auto;
- border-radius:50%;
- }
- .usericon img {
- width:30px;
- vertical-align:bottom;
- border-radius:50%;
- top:10px;
- }
- .topurl {
- text-align:center;
- border:1px solid {color:border};
- border-radius:25px;
- padding-right:10px;
- padding-left:10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- box-shadow: 3px 3px 10px rgba(68, 68, 68, 0.1);
- max-width:30%;
- overflow: hidden;
- max-width:180px;
- line-height:30px;
- background:{color:post background};
- margin-top:14px;
- margin-left:5px;
- font-size:13px;
- display:inline-block!important;
- vertical-align:top;
- height:30px;
- }
- .itemsbelow {
- box-shadow: 3px 3px 10px rgba(68, 68, 68, 0.1);
- border:1px solid {color:border};
- max-width:100%;
- text-align:left;
- overflow:hidden;
- background:{color:post background};
- }
- /* ---------------------------------------------------
- TAGS
- ----------------------------------------------------- */
- .tags {
- width:100%;
- text-transform:none;
- margin-left:-14px;
- font-size:11px;;
- padding-left:25px;
- text-align:left;
- padding-bottom:12px;
- opacity:0.8;
- }
- .tags a {
- color:{color:text};
- margin-left:-3px;
- font-weight:400;
- padding-right:5px;
- }
- .tags a:hover {
- color:{color:accent1};
- }
- .postlink a {
- color:{color:link};
- }
- .postlink a:hover{
- color:{color:accent2};
- }
- /* ---------------------------------------------------
- POST TITLES AND ACCENT TITLES
- if you want a gradient title in one of your pages, place
- your desired title in between the following tags:
- <div class="title2">...</div>
- ----------------------------------------------------- */
- .title, .title2 {
- font-size:15px;
- font-weight:500;
- border:1px solid {color:titleborder}!important;
- font-size:90%;
- letter-spacing:1px;
- color:{color:text};
- background-color:{color:titlebg};
- line-height:19px;
- margin-bottom:10px;
- padding:10px 10px 10px 10px;
- text-align:left;
- transition: all 0.5s;
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 3px 10px 0 rgba(0, 0, 0, 0.12);
- }
- .title:hover, .title2:hover {
- color:{color:sidebarLink};
- }
- .title a, .title2 a {
- color:{color:accent1};
- }
- .title:hover .postlink a, .title2:hover .postlink a {
- color:{color:post background};
- }
- .posts:hover .title, .listset:hover .title2 {
- color:{color:post background};
- background-color: {color:accent1};
- transition: all 0.5s;
- }
- .listset:hover .title2 a {
- color:{color:post background};
- }
- .title:hover a, .title2:hover a {
- color:{color:post background};
- }
- .title:hover a:hover, .title2:hover a:hover {
- color:{color:link};
- }
- .title2 {
- width: 100%;
- font-size:13px;
- letter-spacing:1px;
- line-height: 15px;
- text-align:left;
- }
- .posts:hover .title a {
- color:{color:post background};
- text-decoration:underline;
- }
- /* ---------------------------------------------------
- POST CONTENT
- ----------------------------------------------------- */
- .caption {
- text-align:left;
- width:100%;
- padding-right:5px;
- padding-bottom:5px;
- padding-top:10px;
- overflow:hidden;
- word-wrap:;
- white-space:normal;
- }
- .tumblr_parent {
- padding-left:0px;
- margin-left:20px;
- font-size:90%;
- }
- .tumblr_parent a:hover {
- color:{color:accent2};
- }
- .tumblr_parent a {
- color:{color:link};
- }
- a.tumblr_blog {
- font-size:90%;
- letter-spacing:1px;
- text-decoration:underline;
- -moz-transition-duration:0.4s;
- -webkit-transition-duration:0.4s;
- -o-transition-duration:0.4s;
- border-left:none!important;
- font-weight:500;
- line-height:3;
- }
- /*permalink and notes*/
- .titlequote {
- padding:10px 20px 10px 20px;
- text-align:left;
- font-size:12px;
- margin-left:-7px;
- line-height:17px;
- font-weight:400;
- }
- .source {
- padding:0px 10px 10px 10px;
- margin-top:0px;
- text-align:left;
- margin-bottom:11px;
- font-size:90%;
- text-transform:uppercase;
- margin-left:0px;
- }
- /*-------------------------------------------------------------
- ASKS
- ---------------------------------------------------------------*/
- .q {
- padding:15px 30px 5px 30px;
- height:110%;
- font-size:12px;
- color:{color:text};
- border-left:1px solid {color:titleborder};
- border-right:1px solid {color:titleborder};
- margin-top:-10px;
- overflow:hidden;
- text-align:left;
- margin-left:-10px;
- }
- .asker {
- text-transform:lowercase;
- }
- .posts:hover #asker a {
- color:{color:titleLinkOnHover};
- }
- .posts:hover #asker a:hover {
- color:{color:post background};
- }
- /*chat*/
- .chat ol {
- padding:0;
- list-style:none;
- }
- .line {
- padding:0px 0;
- }
- .label {
- font-weight:400;
- }
- /*-------------------------------------------------------------
- AUDIO
- ---------------------------------------------------------------*/
- .audioplayer {
- width:25px;
- height:25px;
- margin-top:-35px;
- margin-left:12px;
- opacity:.7;
- overflow:hidden;
- vertical-align:top;
- z-index:800;
- }
- .albumart iframe{
- margin-left:-4px!important;
- margin-top:-3px!important;
- z-index:10;
- top:0;
- display:absolute;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
- .filler {
- height:49px;
- width:49px;
- background-size: 100%;
- background-image:url('https://static.tumblr.com/xpoxdgn/7SOpc7c24/music-2297759_960_720.png');
- }
- .albumart {
- display:inline-block;
- z-index:1;
- height:49px;
- width:49px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
- .postinfo {
- width:100%;
- margin-top:-2px;
- {block:Caption}
- margin-top:4px;
- {/block:Caption}
- margin-left:0px;
- border-top:1px solid {color:border};
- display:inline-block;
- padding-right:20px;
- vertical-align:text-top;
- {block:Answer}
- margin-top:-10px!important;
- {/block:Answer}
- text-align:left;
- }
- /*-------------------------------------------------------------
- TAGS
- ---------------------------------------------------------------*/
- .tags {
- width:100%;
- text-transform:none;
- margin-left:-14px;
- font-size:11px;;
- padding-left:25px;
- text-align:left;
- padding-bottom:12px;
- opacity:0.8;
- }
- .tags a {
- color:{color:text};
- margin-left:-3px;
- font-weight:400;
- padding-right:5px;
- }
- .tags a:hover {
- color:{color:accent1};
- }
- /*like, reblog, etc*/
- .options i {
- color:{color:accent2};
- -moz-transition-duration:0.4s;
- -webkit-transition-duration:0.4s;
- -o-transition-duration:0.4s;
- }
- .like:hover i {
- color:{color:accent1};
- }
- .options i:hover {
- color:{color:accent1};
- }
- .options .reblog {
- opacity:.93;
- }
- .like:hover {
- color:{color:accent1};
- }
- .like:hover a {
- color:{color:accent1};
- }
- .reblog:hover .fa-spin-hover {
- -webkit-animation: fa-spin 2s infinite linear;
- -moz-animation: fa-spin 2s infinite linear;
- -o-animation: fa-spin 2s infinite linear;
- animation: fa-spin 2s infinite linear;
- }
- .fa-spin-fix .fa-spin {
- -webkit-transform-origin: 50% calc(50% - .5px);
- transform-origin: 50% calc(50% - .5px);
- }
- .options a:hover, .options a:hover i {
- color:{color:accent1};
- }
- .options:hover {
- color:{color:accent1};
- }
- .options .like .liked + i {
- color:#ec5a5a;
- }
- .options .like .like_button {
- position:relative;
- }
- .options .like .like_button iframe {
- position:absolute;
- top:0;
- left:0;
- bottom:0;
- right:0;
- z-index:2;
- opacity:0;
- }
- /*notes!*/
- .pagenotes {
- {block:IndexPage}
- display: none!important;
- {/block:IndexPage}
- width:{text:max post width};
- text-align:left;
- }
- .notes {
- font-size:8px!important;
- }
- .pagenotes img {
- display:none!important;
- }
- .pagenotes li {
- list-style-type:none;
- padding:2px 0px;
- font-size:8px;
- text-align:left;
- margin:0 0 0 -40px;
- }
- /*required for post fadein*/
- .hideme {
- opacity:0;
- transition:0.3s all;
- }
- .topbar {
- height:0px;
- width:0px;
- overflow:hidden;
- }
- /* ---------------------------------------------------
- TOOLTIPS
- ----------------------------------------------------- */
- .tooltip{
- display: inline;
- position: relative;
- }
- #s-m-t-tooltip {
- max-width:300px;
- background-color:{color:accent1};
- font-size:90%;
- font-weight:500;
- border-radius:5px;
- letter-spacing:1px;
- font-family:'Raleway', Arial;
- padding:5px 5px 5px 5px;
- color: {color:post background};
- margin:20px 0px 0px 20px;
- z-index:9999999999999999999999;
- }
- /* ---------------------------------------------------
- TUMBLR CONTROLS
- ----------------------------------------------------- */
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:0!important;
- right:0!important;
- opacity:0.4;
- transform:scale(0.65);
- transform-origin:100% 0;
- -webkit-transform:scale(0.65);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.65);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.65);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.65);
- -ms-transform-origin:100% 0;}
- iframe.tmblr-iframe:hover {
- opacity:0.6!important;}
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- margin-top:-3px;
- }
- /* ---------------------------------------------------
- SCROLLBAR
- ----------------------------------------------------- */
- ::-webkit-scrollbar {
- width: 10px;
- background: {color:accent1};
- background:linear-gradient( to bottom, {color:accent1}, {color:accent2});
- background: -webkit-linear-gradient(bottom, {color:accent1}, {color:accent2});
- background: -o-linear-gradient(bottom, {color:accent1}, {color:accent2});
- background: -moz-linear-gradient(bottom, {color:accent1}, {color:accent2});
- }
- ::-webkit-scrollbar-thumb {
- background: {color:titlebg};
- border:1px solid {color:titleborder};
- width:10px;
- background-clip: content-box;
- }
- /* ---------------------------------------------------
- CREDIT - DO NOT REMOVE OR ALTER
- ----------------------------------------------------- */
- #credit, #credit a img {
- width:20px;
- position:fixed!important;
- bottom:15px;
- right:15px;
- float:right;
- z-index:999998;
- }
- /*-------------------------------------------------------------
- RESPONSIVENESS
- ---------------------------------------------------------------*/
- @media screen and (max-width: 900px) {
- html, body {
- width:100vw;
- height:100vh;
- display:relative;
- overflow:visible;
- }
- .my-container {
- display:block;
- height:auto;
- overflow-x:hidden;
- }
- .img-sidebar {
- width: 0px;
- height: 0px;
- opacity: 0;
- overflow: hidden;
- }
- .topbar {
- min-height: 80px;
- width: 100vw;
- position:fixed;
- height: auto;
- overflow: visible;
- z-index:99999999;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 6px 8px 0 rgba(0, 0, 0, 0.08);
- }
- .topbar .navbar {
- min-height:80px;
- top:0px;
- background: {color:accent1};
- background: -moz-linear-gradient(right, {color:accent1} 0%, {color:accent2} 100%);
- background: -webkit-linear-gradient(right, {color:accent1} 0%, {color:accent2} 100%);
- background: linear-gradient(to right, {color:accent1} 0%,{color:accent2} 100%);
- }
- .topbar .navbar .navbar-toggler {
- color:{color:sidebarLink};
- }
- .navbar-toggler {
- margin-right:15px;
- }
- .topbar .navbar .nav-item {
- color:{color:text};
- border-top:1px solid {color:border};
- background:{color:post background};
- }
- .topbar .navbar .nav-link {
- padding-left:10px;
- background:{color:post background};
- text-align:center;
- color:{color:text};
- transition:0.3s all;
- display:flex;
- align-items:center;
- margin-right:5px;
- justify-content:center;
- }
- .topbar .navbar .nav-link i {
- width:25px;
- height:25px;
- background:{color:accent1};
- color:{color:post background};
- border-radius:50%;
- line-height:25px;
- margin-right:10px;
- }
- .topbar .navbar .nav-link:hover {
- color:{color:accent1};
- transition:0.3s all;
- }
- .topbar .navbar .navbar-nav {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 6px 8px 0 rgba(0, 0, 0, 0.08);
- }
- .topbar .navbar .navbar-menu {
- width:calc(100% + 10px);
- display:flex;
- justify-content:center;
- align-items:center;
- height:50px;
- margin-left:-10px;
- background:{color:post background};
- }
- .topbar .navbar .navbar-menu a {
- height:30px;
- width:30px;
- margin-left:10px;
- margin-right:10px;
- font-size:1rem;
- line-height:30px;
- text-align:center;
- color:{color:text};
- transition:0.3s all;
- }
- .topbar .navbar .navbar-menu a:hover {
- color:{color:accent1};
- }
- .top-pagi {
- color:{color:sidebarLink};
- font-size:1rem;
- margin-left:-30px;
- height:30px;
- width:30px;
- line-height:30px;
- border:2px solid {color:sidebarLink};
- border-radius:50%;
- text-align:center;
- }
- .sidebar {
- width:0px;
- overflow:hidden;
- height:0px;
- }
- .posts {
- margin:0 auto;
- margin-bottom:0px;
- margin-top:0px;
- }
- .posts-container {
- margin-top:50px;
- width: 100%;
- height: auto;
- max-height:none;
- overflow:hidden;
- padding-left:15px;
- padding-right:15px;
- }
- .user {
- display:none!important;
- }
- }
- </style>
- <div class="my-container">
- {block:IfShowSidebar}
- <div class="sidebar">
- <a href="/">
- <div class="sidebar-header">
- </div>
- </a>
- {block:IfShowAdditionalLinks}
- <ul class="list-unstyled components">
- {block:IfLink1}
- <li>
- <a href="{text:link 1 URL}">
- <i class="fa fa-{text:link 1 icon}"></i> {text:link 1}</a>
- </li>
- {/block:IfLink1} {block:IfLink2}
- <li>
- <a href="{text:link 2 URL}">
- <i class="fa fa-{text:link 2 icon}"></i>{text:link 2}</a>
- </li>
- {/block:IfLink2} {block:IfLink3}
- <li>
- <a href="{text:link 3 URL}">
- <i class="fa fa-{text:link 3 icon}"></i>{text:link 3}</a>
- </li>
- {/block:IfLink3} {block:IfLink4}
- <li>
- <a href="{text:link 4 URL}">
- <i class="fa fa-{text:link 4 icon}"></i>{text:link 4}</a>
- </li>
- {/block:IfLink4} {block:IfLink5}
- <li>
- <a href="{text:link 5 URL}">
- <i class="fa fa-{text:link 5 icon}"></i>{text:link 5}</a>
- </li>
- {/block:IfLink5} {block:IfLink6}
- <li>
- <a href="{text:link 6 URL}">
- <i class="fa fa-{text:link 6 icon}"></i>{text:link 6}</a>
- </li>
- {/block:IfLink6}
- </ul>
- {/block:IfShowAdditionalLinks}
- </div>
- {/block:IfShowSidebar}
- <div class="topbar">
- <div class="p-0 navbar navbar-expand-lg navbar-inverse">
- <a href="/" class="navbar-brand p-0">
- <div class="sidebar-header">
- </div>
- </a>
- {block:Pagination} {block:PreviousPage}
- <a href="{PreviousPage}" class="jump_page top-pagi">
- <i class="fa fa-chevron-left"></i>
- </a>{/block:PreviousPage} {block:NextPage}
- <a href="{NextPage}" class="jump_page top-pagi">
- <i class="fa fa-chevron-right" aria-hidden="true" s></i>
- </a>{/block:NextPage} {/block:Pagination}
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
- aria-expanded="false" aria-label="Toggle navigation">
- <i class="fa fa-bars"></i>
- </button>
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a class="nav-link" href="/">{Title}</a>
- </li>
- <li class="nav-item">
- <div class="navbar-menu">
- <a title="home" class="home" style="font-size:17px;" href="/">
- <i class="fa fa-home"></i>
- </a>
- <a title="ask" href="/ask">
- <i class="fa fa-envelope"></i>
- </a> {block:ifShowAbout}
- <a title="about" href="{text:about link}">
- <i class="fa fa-user"></i>
- </a> {/block:ifShowAbout}
- <a title="archive" href="/archive">
- <i class="fa fa-archive"></i>
- </a>
- </div>
- </li>
- {block:IfLink1}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 1 URL}">
- <i class="fa fa-{text:link 1 icon}"></i> {text:link 1}</a>
- </li>
- {/block:IfLink1} {block:IfLink2}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 2 URL}">
- <i class="fa fa-{text:link 2 icon}"></i> {text:link 2}</a>
- </li>
- {/block:IfLink2} {block:IfLink3}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 3 URL}">
- <i class="fa fa-{text:link 3 icon}"></i> {text:link 3}</a>
- </li>
- {/block:IfLink3} {block:IfLink4}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 4 URL}">
- <i class="fa fa-{text:link 4 icon}"></i> {text:link 4}</a>
- </li>
- {/block:IfLink4} {block:IfLink5}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 5 URL}">
- <i class="fa fa-{text:link 5 icon}"></i> {text:link 5}</a>
- </li>
- {/block:IfLink5} {block:IfLink6}
- <li class="nav-item">
- <a class="nav-link" href="{text:link 6 URL}">
- <i class="fa fa-{text:link 6 icon}"></i> {text:link 6}</a>
- </li>
- {/block:IfLink6}
- </ul>
- </div>
- </div>
- </div>
- <div class="img-sidebar">
- <div class="titleSidebar">
- <div class="titleSidebar img">
- <img src="{image:sidebar}">
- </div>
- <div class="blogtitle">{Title}</div>
- <div class="description">{Description}</div>
- {block:Pagination}
- <div class="my-pagination">
- {block:PreviousPage}
- <a href="{PreviousPage}" class="jump_page">
- <i class="fa fa-chevron-left" style="font-size:10px;margin-left:1px" aria-hidden="true"></i>
- </a>{/block:PreviousPage} {block:JumpPagination length="3"} {block:CurrentPage}
- <span class="current_page">{PageNumber}</span>{/block:CurrentPage} {block:JumpPage}
- <a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination} {block:NextPage}
- <a href="{NextPage}" class="jump_page">
- <i class="fa fa-chevron-right" aria-hidden="true" style="font-size:10px;margin-left:1px"></i>
- </a>{/block:NextPage}
- </div>
- {/block:Pagination}
- <div class="mainlinks">
- <a title="home" class="home" style="font-size:17px;" href="/">
- <i class="fa fa-home"></i>
- </a>
- <a title="ask" href="/ask">
- <i class="fa fa-envelope"></i>
- </a> {block:ifShowAbout}
- <a title="about" href="{text:about link}">
- <i class="fa fa-user"></i>
- </a> {/block:ifShowAbout}
- <a title="archive" href="/archive">
- <i class="fa fa-archive"></i>
- </a>
- </div>
- </div>
- </div>
- <div class="posts-container">
- {block:Posts}
- <div class="posts hideme mr-auto" id="{PostID}">
- <div class="upperstuff">
- <div class="icons">
- {block:NotReblog}
- <div class="usericon">
- <img src="{PortraitURL-40}" />
- </div>
- <div class="topurl user" style="margin-left:0px">
- <a href="/">{Name}</a>
- </div>
- {/block:NotReblog} {block:RebloggedFrom}
- <div class="usericon">
- <a title="{ReblogParentTitle}" href="{ReblogParentURL}">
- <img src="{ReblogParentPortraitURL-40}" />
- </a>
- </div>
- <div class="topurl user" style="margin-left:-2px">
- <i class="fa fa-refresh" aria-hidden="true"></i>
- <a title="{ReblogParentTitle}" href="{ReblogParentURL}">{ReblogParentName}</a>
- </div>
- {/block:RebloggedFrom} {block:Date}
- <span style="float:right;font-size:10px">
- <div class="options">
- {block:NoteCount}
- <div class="topurl">
- <a href="{Permalink}" style="margin-left:0px;" title="{NoteCount} notes">
- <i class="fa fa-thumbs-up" aria-hidden="true"></i>
- {NoteCount}</a>
- </div>
- {/block:NoteCount}
- <div class="topurl">
- <a href="{Permalink}" title="Posted on {ShortMonth} {DayOfMonth}, {Year} at {12Hour}:{Minutes} {AmPm}">
- <i class="fa fa-clock-o" aria-hidden="true"></i>
- </a>
- </div>
- {block:ContentSource}
- <div class="topurl">
- <a title="source: {SourceTitle}" href="{SourceURL}">
- <i class="fa fa-pencil-square-o
- " aria-hidden="true" style="font-size:11px; line-height:32px"></i>
- </a>
- </div>
- {/block:ContentSource}
- <div class="topurl">
- <a href="{ReblogURL}" target="_blank" class="reblog" title="reblog this post">
- <i class="fa fa-refresh fa-spin-hover" aria-hidden="true"></i>
- </a>
- </div>
- <div class="topurl">
- <a href="#" class="like" title="like this post">{LikeButton}
- <i class="fa fa-heart" aria-hidden="true"></i>
- </a>
- </div>
- </div>
- </span>
- {/block:Date}
- </div>
- </div>
- <div class="itemsbelow">
- {block:Quote}
- <div class="titlequote">
- <i class="fa fa-quote-left"></i> {Quote}
- <i class="fa fa-quote-right"></i>
- </div>
- {block:Source}
- <div class="source">— {Source}</div>
- {/block:Source} {/block:Quote} {block:Text} {block:Title}
- <div class="toptitle">
- <div class="title">{Title}</div>
- </div>
- {/block:Title} {block:RebloggedFrom}
- <div class="caption">{Body}</div>
- {/block:RebloggedFrom} {block:NotReblog}
- <div style="text-align:left;padding:10px 20px 0px 20px;">{Body}</div>
- {/block:NotReblog} {/block:Text} {block:link}
- <div class="toptitle">
- <div class="title">
- <a href="{URL}">
- <div class="postlink">
- <i class="fa fa-link"></i> {Name}
- </a>
- </div>
- </div>
- </div>
- {block:Description}
- <div style="padding:0px 0px 0px 0px;padding-left:10px;padding-right:10px;">{Description}</div>
- {/block:Description} {/block:link} {block:Chat} {block:Title}
- <div class="title">{Title}</div>
- {/block:Title} {/block:Text}
- <div class="chat" style="padding:0px 10px 10px 10px;">{block:lines} {block:label}
- <br>
- <b>{label}</b>
- {/block:label} {line} {/block:lines}
- </div>
- {/block:Chat} {block:Photo} {LinkOpenTag}
- <a class="fancybox" rel="post-{PostID}" href="{PhotoURL-HighRes}">
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
- </a>{LinkCloseTag} {/block:Photo} {block:Photoset}
- <div class="set">
- <center>
- <div class="pxu">
- <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
- {block:Photos}
- <div class="photo-data">
- <a class="fancybox" rel="post-{PostID}" href="{PhotoURL-HighRes}">
- <div class="pxu-photo">
- <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}"
- data-height="{PhotoHeight-HighRes}">
- </div>
- </a>
- </div>
- {/block:Photos}
- </div>
- </div>
- </center>
- </div>
- {/block:Photoset} {block:Video}
- <div class="video"><div class="embed-responsive embed-responsive-16by9">{VideoEmbed-700}</div></div>
- {/block:Video} {block:Audio}
- <div class="title d-flex align-items-center" class="d-flex flex-row">
- <div class="albumart">
- <div class="filler" {block:AlbumArt} style="background-image:url({AlbumArtURL});" {/block:AlbumArt}></div>
- <div class="audioplayer">{AudioPlayerWhite}</div>
- </div>
- <div class="pl-2">
- {block:TrackName} {TrackName} {/block:TrackName} - {block:Artist} {Artist} {/block:Artist}
- </div>
- </div>
- {/block:Audio} {block:Answer}
- <div class="toptitle">
- <div class="title">
- <div class="asker">
- <i class="fa fa-question-circle" aria-hidden="true" style="font-size:15px"></i> {Asker} said: </div>
- </div>
- </div>
- <div class="q">
- <p>{Question}</p>
- </div>
- {block:NotReblog}
- <div class="title">
- <div class="asker">
- <i class="fa fa-info-circle" aria-hidden="true" style="font-size:15px"></i>
- <a href="/">{Name}</a> replied:</div>
- </div>
- <div class="q" style="padding-bottom:-10px;padding-left:30px;padding-right:30px;">{Replies}</div>
- {/block:NotReblog} {block:RebloggedFrom}
- <div class="title">
- <div class="asker">
- <i class="fa fa-info-circle" aria-hidden="true" style="font-size:15px"></i> {Answerer}</a> replied: </div>
- </div>
- <div class="q" style="padding-bottom:-10px">{Replies}</div>
- {/block:RebloggedFrom} {/block:Answer} {block:Caption}{block:RebloggedFrom}
- <div class="caption" style="margin-left:0px;">{Caption}</div>
- {/block:RebloggedFrom} {block:NotReblog}
- <div style="text-align:left;padding:10px 20px 10px 20px;">{Caption}</div>
- {/block:NotReblog}{/block:Caption} {block:Date} {block:HasTags}
- <div class="postinfo">
- <div class="tags" style="padding-top:12px;" }>
- <i class="fa fa-tags" aria-hidden="true" style="color:{color:accent1}"></i> {block:Tags}
- <a href="{TagUrl}">
- {Tag}. </a>{/block:Tags}
- </div>
- </div>
- {/block:HasTags} {/block:Date}
- </div>
- {block:PostNotes}
- <div style="padding:0px 10px 0px 10px;" class="pagenotes">
- {PostNotes}
- </div>
- {/block:PostNotes}
- </div>
- {/block:Posts}
- </div>
- </div>
- <!--DO NOT TOUCH ANYTHING BELOW THIS LINE -->
- <div id="credit"><a title="theme by #userchelle" href="https://loislane.tumblr.com"><img src="https://68.media.tumblr.com/62496251ce73eb90b955cdfa12c0ac83/tumblr_op9av3V2XR1tbtydxo2_r1_75sq.png"/></a></div>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
- crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
- crossorigin="anonymous"></script>
- <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
- <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
- <script type="text/javascript">
- /*
- unnest tumblr captions script
- by @magnusthemes & @neothm
- from: http://neothm.com/post/148902138319
- */
- $(document).ready(function () {
- $(function () {
- $('.posts').unnest({
- yourCaption: ".caption",
- wrapName: ".tumblr_parent",
- newCaptionUsername: false,
- originalPostCaptionUsername: false,
- tumblrAvatars: false,
- tumblrAvatarClass: ".tumblr_avatar",
- usernameColon: false
- });
- });
- });
- $(document).ready(function () {
- $('.posts-container').on('scroll', function () {
- $('.hideme').each(function (i) {
- var top_of_object = $(this).position().top;
- var bottom_of_window = $('.posts-container').scrollTop() + $('.posts-container').innerHeight();
- var top_of_object = $(this).position().top
- if (bottom_of_window > top_of_object + 300) {
- $(this).animate({ 'opacity': '1' }, 500);
- }
- });
- });
- $(".fancybox").fancybox(
- {
- margin: [70, 0, 0, 0],
- maxWidth: '90%',
- maxHeight: '90%',
- nextClick: true,
- loop: true,
- });
- $('.hideme').each(function (i) {
- var top_of_object = $(this).position().top;
- var bottom_of_window = $('.posts-container').scrollTop() + $('.posts-container').innerHeight();
- if (top_of_object <= bottom_of_window) {
- $(this).animate({ 'opacity': '1' }, 500);
- }
- });
- });
- (function ($) {
- $(document).ready(function () {
- $("a[title]").style_my_tooltips({
- tip_follows_cursor: true,
- tip_delay_time: 90,
- tip_fade_speed: 600,
- attribute: "title"
- });
- });
- })(jQuery);
- // PXU Photoset Script by Pixel Union
- $(document).ready(function () {
- $('.photo-slideshow').pxuPhotoset({
- lightbox: false,
- rounded: false,
- gutter: '2.5px',
- borderRadius: '0px',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment