Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--HYPERREAL (Theme #02) by @nonspace.
- Find more of my work at https://nonspace.tumblr.com
- Don't steal.
- Don't claim as your own.
- Don't use as base code.
- Editing for personal use is fine!
- Need help? Have a look at this themes FAQ:
- https://nonspace.tumblr.com/tagged/theme-help:+hyperreal
- Or my general FAQ: https://nonspace.tumblr.com/help/support
- If you find any bugs please report them to me.
- -->
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <link rel="icon" type="image/png" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <title>{Title}{block:SearchPage} :: ({lang:Search results for SearchQuery}){/block:SearchPage}{block:TagPage} :: #{Tag}{/block:TagPage}{block:PermalinkPage}{block:PostSummary} :: {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- {block:Hidden}
- <meta name="theme-color" content="">
- <meta name="image:Background" content="" />
- <meta name="image:Sidebar" content="" />
- <meta name="if:Post Shadow" content="0" />
- <meta name="if:Scroll Top" content="0" />
- <meta name="color:Text" content="#181818" />
- <meta name="color:Background" content="#f7f7f7" />
- <meta name="color:Accent" content="#a51e4b" />
- <meta name="color:Accent Two" content="#ce2558" />
- <meta name="color:Accent Text" content="#fff" />
- <meta name="color:Links" content="#8c8c8c" />
- <meta name="color:Link Hover" content="#444444" />
- <meta name="color:Blockquote" content="#eaeaea" />
- <meta name="color:Title Background" content="#181818" />
- <meta name="color:Title Color" content="#fff" />
- <meta name="color:Sidebar Background" content="#181818" />
- <meta name="color:Sidebar Text" content="#fff" />
- <meta name="color:Post Background" content="#fff" />
- <meta name="color:Reblog Header" content="#181818" />
- <meta name="color:Reblog Header Text" content="#fff" />
- <meta name="color:Post Info" content="#181818" />
- <meta name="color:Post Info Text" content="#fff" />
- <meta name="color:Footer Background" content="#181818" />
- <meta name="color:Footer Text" content="#fff" />
- <meta name="select:Post Width" title="700" content="700" />
- <meta name="select:Post Width" title="540" content="540" />
- <meta name="select:Post Width" title="500" content="500" />
- <meta name="select:Post Width" title="450" content="450" />
- <meta name="select:Post Width" title="400" content="400" />
- <meta name="select:Post Width" title="300" content="300" />
- <meta name="text:Font" content="Open Sans" />
- <meta name="text:Font Two" content="Roboto" />
- <meta name="text:Font Size" content="16"/>
- <meta name="text:Link One Title" content=""/>
- <meta name="text:Link One URL" content=""/>
- <meta name="text:Link Two Title" content=""/>
- <meta name="text:Link Two URL" content=""/>
- <meta name="text:Link Three Title" content=""/>
- <meta name="text:Link Three URL" content=""/>
- <meta name="text:Link Four Title" content=""/>
- <meta name="text:Link Four URL" content=""/>
- <meta name="text:Link Five Title" content=""/>
- <meta name="text:Link Five URL" content=""/>
- {/block:Hidden}
- <!--FONTS-->
- <link href="https://fonts.googleapis.com/css?family={text:font}|{text:font two}:300,300i,400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <!--FONT AWESOME-->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
- <!--jQUERY-->
- <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
- <script src="https://www.dl.dropboxusercontent.com/s/2ob91mnz4zil9lq/scrollTop.js"></script>
- <noscript>
- <style type="text/css">
- #copyright {display: block;}
- </style>
- </noscript>
- <style>
- /*GENERAL*/
- *{
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- body, html {
- font: {text:font size}px '{text:font}';
- background: {color:background};
- {block:IfBackgroundImage}
- background: url('{image:Background}');
- background-size: cover;
- background-repeat: no-repeat;
- {/block:IfBackgroundImage}
- position: relative;
- }
- ::selection {
- background: {color:accent};
- color: {color:accent text};
- }
- ::-moz-selection {
- background: {color:accent};
- color: {color:accent text};
- }
- b, strong {}
- a {
- text-decoration: none;
- color: {color:links};
- }
- a:hover {
- color: {color:link hover};
- }
- i {}
- strike {}
- pre {
- margin 20px 10px;
- background: {color:blockquote};
- padding: 10px 10px;
- font: {text:font size}px monospace;
- letter-spacing: 0px;
- text-align: left;
- width: 100%;
- line-height: 160%;
- overflow: wrap;
- white-space: pre-wrap; /* css-3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word;
- }
- code {
- font-family: monospace;
- }
- small, sub {
- font-size: calc({text:font size}px - 1px);
- }
- blockquote {
- border-left: 5px solid {color:blockquote};
- margin: 0 0 0 15px;
- padding: 0 20px 0 20px;
- }
- .npf_color_joey {
- color:#ff492f;
- }
- .npf_color_monica {
- color:#ff8a00;
- }
- .npf_color_chandler {
- color:#973ff4;
- }
- .npf_color_phoebe {
- color:#fcf01d;
- }
- .npf_color_rachel {
- color:#00b8ff;
- }
- .npf_color_ross {
- color:#00cf35;
- }
- .npf_color_niles {
- color:#ff62ce;
- }
- .npf_color_frasier {
- color:#001935;
- }
- .npf_color_mr_big {
- color:#000c1a;
- }
- .permalink blockquote {
- margin: 10px 0;
- }
- .caption ul {
- margin: 20px 0 20px 35px;
- text-align: justify;
- }
- .caption li {
- margin: 5px 0;
- }
- /*headlines*/
- h1, h2, h3, h4, h5 {
- font-family: {text:Font Two};
- }
- h1 {
- font-size: calc({text:font size}px + 10px);
- padding: 25px 40px;
- line-height: 100%;
- }
- h3 { /*quote*/
- font-size: calc({text:font size}px + 5px);
- }
- input#mobile_button {
- display: none;
- }
- #mobile_menu {
- display: none;
- }
- /*transitions*/
- a, body > iframe:first-child,
- #tumblr_controls,
- .custom_like_button {
- -ms-transition: 0.5s;
- -moz-transition: 0.5s;
- -webkit-transition: 0.5s;
- transition: 0.5s;
- }
- /*animations*/
- main {
- -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
- -moz-animation: fadein 2s; /* Firefox < 16 */
- -ms-animation: fadein 2s; /* Internet Explorer */
- -o-animation: fadein 2s; /* Opera < 12.1 */
- animation: fadein 2s;
- }
- aside{
- -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
- -moz-animation: fadein 1s; /* Firefox < 16 */
- -ms-animation: fadein 1s; /* Internet Explorer */
- -o-animation: fadein 1s; /* Opera < 12.1 */
- animation: fadein 1s;
- }
- @keyframes fadein {
- from { opacity: 0; }
- to { opacity: 1; }
- }
- /*LAYOUT*/
- #tumblr_controls {display: none; z-index: 9;}
- #wrapper {
- display: flex;
- flex-direction: row;
- width: 100%;
- height: auto;
- margin: 0 auto;
- }
- /*post container*/
- main {
- position: relative;
- height: auto;
- width: calc(100vw - 350px);
- margin-left: 350px;
- }
- /*sidebar*/
- aside {
- position: fixed;
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 350px;
- background: {color:sidebar background};
- }
- /*footer*/
- footer {
- height: 80px;
- width: calc(100% - 350px);
- margin-left: 350px;
- background: {color:footer background};
- color: {color:Sidebar Text};
- text-align: center;
- }
- #copyright {
- display: none;
- }
- /*SIDEBAR*/
- #page_title {
- display: flex;
- align-items: center;
- background: {color:Title Background};
- text-transform: uppercase;
- height: 80px;
- }
- #page_title h1 {
- color: {color:accent text};
- padding: 0 20px;
- }
- #page_title img {
- height: 80px;
- }
- #desc, nav {
- padding: 40px 25px;
- color: {color:Sidebar Text};
- }
- #desc span:empty {
- padding: 0;
- }
- #side_img {
- display: none;
- width: 100%;
- height: 250px;
- object-fit: cover;
- }
- {block:ifSidebarImage}
- #side_img {
- display: block;
- }
- {/block:ifSidebarImage}
- nav {
- padding: 0px 0px;
- background: rgba(127,127,127,0.03);
- flex: 1;
- overflow-y: auto;
- margin-bottom: 50px;
- }
- nav li {
- display: flex;
- align-items: center;
- flex-direction: row-reverse;
- }
- nav li i {
- width: 70px;
- height: 50px;
- background: linear-gradient(to right bottom, {color:accent} 0%, {color:accent two} 100%);;
- }
- nav li .fas, nav li .far, nav li .fa {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 20px;
- }
- nav ul {
- list-style-type: none;
- }
- nav::-webkit-scrollbar {
- width: 5px;
- height: 8px;
- background-color: {color:sidebar background};
- }
- nav::-webkit-scrollbar-thumb {
- background: rgba(127,127,127,0.5);
- }
- nav ul li {
- margin: 3px 0;
- }
- nav li:first-child {
- margin-top: 0;
- }
- nav li:last-child {
- margin: bottom: 0;
- }
- nav a {
- display: block;
- height: 50px;
- padding: 16px;
- width: 100%;
- background: rgba(127,127,127,0.05);
- color: {color:accent text};
- font-family: {text:font two};
- font-weight: bold;
- text-transform: uppercase;
- }
- nav a:hover {
- background: rgba(127,127,127,0.25);
- color: {color:sidebar text};
- }
- #search_bar {
- position: absolute;
- bottom: 0;
- width: 100%;
- display: flex;
- flex-direction: row-reverse;
- }
- #search_bar form {
- flex: 1;
- }
- #search_bar input, #search_bar select, #search_bar textarea{
- height: 50px;
- width: 100%;
- border: 0;
- padding: 20px;
- font-size: {text:font size}px;
- }
- #search_bar input:focus {
- border: 0;
- box-shadow: none;
- outline: 0;
- }
- #search_bar i {
- height: 50px;
- width: 50px;
- color: {color:sidebar text};
- background: rgba(127,127,127,0.05);
- font-size: 20px;
- padding: 15px;
- }
- /*POSTS*/
- .article_wrapper {
- padding: 80px 20px;
- }
- {block:PermalinkPage}
- .article_wrapper {
- padding-bottom: 0;
- }
- {/block:PermalinkPage}
- .article_wrapper:nth-of-type(2n) {
- background: rgba(127,127,127,.05);
- }
- article {
- max-width: {select:post width}px;
- }
- .post {
- display: flex;
- flex-direction: column;
- position: relative;
- height: auto;
- margin: auto;
- max-width: {select:post width};
- color: {color:text};
- }
- .post_header {
- display: flex;
- flex-direction: row;
- text-align: center;
- font-family: {text:font two};
- align-items: center;
- height: 50px;
- }
- .post_header > * {
- min-width: 50px;
- height: 100%;
- background: {color:post info};
- }
- .pinfo > img {
- width: 50px;
- }
- .post_body {
- max-width: {select:post width};
- }
- .cpt {
- max-width: {select:post width}px;
- }
- {block:IfPostShadow}
- .cpt {
- -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
- }
- {/block:IfPostShadow}
- .post_footer {
- display: flex;
- justify-content: space-between;
- margin: 10px 0 0 0;
- width: 100%;
- }
- .post_title {
- text-align: justify;
- }
- .post_title h1 {
- background: linear-gradient(to right, {color:accent} 0%, {color:accent two} 100%);
- line-height: 150%;
- color: {color:title color};
- }
- /*CAPTIONS & UNNEST*/
- .caption {
- background: {color:post background};
- padding: 40px;
- margin-top: 0px;
- line-height: 150%;
- text-align: justify;
- }
- .reblog_list {
- background: {color:post background};
- }
- .caption h2 {
- margin-bottom: 10px; width: 100%; text-align: left;
- }
- .caption p a,
- .caption ul a {
- padding: 0 0px;
- box-shadow: inset 0 -2px {color:accent};
- }
- .caption a:hover {
- box-shadow: inset 0 -50px {color:accent};
- color: {color:accent text};
- }
- .caption p {}
- .caption *, #desc p {
- margin: 15px 0;
- }
- .caption p:empty {
- margin: 0;
- }
- .caption p:only-child {
- margin: 0;
- }
- .caption :first-child {
- margin-top: 0;
- }
- .caption :last-child {
- margin-bottom: 0;
- }
- .caption > :only-child {
- margin: 0 auto;
- }
- .caption :first-child:not(:empty) {
- margin-top: 0;
- }
- .caption blockquote p {
- margin: 0 auto;
- }
- .caption img {
- max-width: 100%;
- }
- .caption hr {
- border-style: solid;
- color: {color:accent};
- }
- .reblog_parent {
- padding: 0px 0px 0px 0px;
- margin: 0px 0px;
- background: {color:post background};
- }
- .reblog_parent:first-child {
- margin-top: 0;
- }
- .reblog_parent:last-child {
- margin-bottom: 0;
- }
- .reblog_header,
- .asker,
- .answerer {
- display: flex;
- align-items: center;
- font-family: {text:Font Two};
- text-transform: uppercase;
- background: {color:Reblog Header};
- height: 50px;
- color: {color:reblog header text};
- }
- .reblog_header img,
- .reblog_header i,
- .asker img,
- .answerer img {
- height: 50px;
- margin-right: 10px;
- }
- /*deactivated user*/
- .reblog_header i {
- padding: 17px 0 17px 17px
- }
- .answerer {
- flex-direction: row-reverse;
- }
- .answerer img {
- margin: 0 0 0 10px;
- }
- .reblog_body {
- margin-top: 0px;
- }
- .reblog_header a,
- .asker,
- .answerer {
- text-decoration: none;
- color: {color:reblog header text};
- font-weight: bold;
- }
- .reblog .qh,
- .reblog .lh,
- .reblog .audio_post,
- .reblog .spotify_audio_player,
- .reblog .soundcloud_audio_player {
- margin-bottom: 20px;
- }
- .reblog.chat .reblog-list {
- display: none;
- }
- /*POST TYPES*/
- /*photo*/
- .post_photo img {
- max-width: 100%;
- line-height: 100%;
- }
- /*photoset*/
- iframe.photoset {
- max-width: {select:post width}px;
- }
- /*link*/
- .lh a {
- padding: 0 5px;
- color: {color:accent text};
- }
- .lh.caption {
- background: {color:accent};
- }
- /*chat*/
- .chat_lines {
- padding: 10px;
- }
- .chat_lines.odd {
- background: {color:accent};
- color: {color:accent text};
- }
- /*video*/
- .tumblr_video_container {
- position: relative;
- overflow: hidden;
- padding-top: 56.25%;
- width: 100%!important;
- height: 100%!important;
- }
- .tumblr_video_iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%!important;
- height: 100%!important;
- border: 0;
- }
- .tumblr_video_container {
- max-height: 540px!important;
- overflow: hidden;
- margin-bottom: 5px;
- }
- #youtube_iframe {
- width: 100%!important;
- }
- /*ask*/
- .asker a,
- .answerer a {
- padding: 5px;
- color: {color:accent text};
- }
- .question {
- margin-bottom: 15px;
- background: {color:post background};
- }
- .answerer .caption {
- border-top: 5px solid {color:accent};
- margin-top: 5px;
- }
- .answerer ~ .caption {
- margin-bottom: 25px;
- }
- .answerer {
- text-align: right;
- margin-bottom: 0px;
- }
- /*audio*/
- .spotify_audio_player,
- .soundcloud_audio_player {
- width: 100%; height: 80px;
- }
- .audio_post {
- background: {color:post background};
- width: 100%; display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- .audio_player {
- position: relative;
- }
- .audio_player img {
- width: 150px;
- }
- .play_button {
- position: absolute;
- height: 50px;
- width: 50px;
- top: 40px;
- left: 45px;
- border-radius: 50%;
- overflow: hidden;
- }
- .tumblr_audio_player {
- width: 150px;
- height: 150px;
- transform: scale(2.1);
- padding: 37px 33.5px;
- }
- .audio_info {
- padding: 0 40px;
- }
- .audio_info ul {
- flex-grow: 1;
- overflow-y: auto;
- }
- .audio_info ul span {
- background: {color:accent};
- color: {color:accent text};
- font-weight: normal;
- text-transform: capitalize;
- margin: 0px 20px 0 0;
- padding: 0 10px;
- }
- .audio_info ul li {
- display: flex;
- justify-content: space-between;
- align-items: center;
- text-align: right;
- padding: 5px 0;
- line-height: 200%;
- }
- .audio_info ul li:first-of-type {padding-top: 0;}
- .audio_info ul li:last-of-type {padding-bottom: 0;}
- .audio_info ul li:only-of-type {padding: 0;}
- /*POST INFO*/
- .post_info {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- }
- .post_header a,
- .post_header i,
- .post_footer a,
- .post_footer i,
- .custom_like_button {
- color: {color:post info text};
- }
- .post_header i,
- .pdate a,
- .pnotes a {
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: bold;
- }
- .post_header i {
- font-size: 25px;
- }
- .pinfo img {
- height: 50px;
- width: 50px;
- }
- .ptags {
- max-width: {select:post width}px;
- margin: 5px 0;
- line-height: 250%;
- word-wrap: keep-all;
- }
- .ptags a {
- font-size: calc({text:font size}px - 1px);
- font-family: {text:font two};
- margin: 0 10px 0 0;
- color: {color:accent text};
- padding: 10px 10px;
- background: linear-gradient(to right bottom, {color:accent} 0%, {color:accent two} 100%);
- font-weight: bold;
- }
- .pdate {
- padding: 0px;
- text-transform: uppercase;
- width: auto;
- }
- .pdate a {
- background: rgba(255,255,255,0.05);
- }
- .pnotes {
- text-align: right;
- }
- .pnotes a {
- background: rgba(255,255,255,0.1);
- }
- .pdate a,
- .pnotes a {
- padding: 0 10px; height: 100%;
- }
- .answer .rblg {
- display: none;
- }
- /*BUTTONS & CONTROLS*/
- .buttons {
- display: flex;
- justify-self:
- flex-end;
- margin-left: auto;
- }
- .buttons a,
- .buttons i,
- .custom_like_button {
- font-size: 25px;
- color: {color:text};
- }
- .custom_like_button {
- position: relative;
- margin-left: 10px;
- }
- .custom_like_button:hover {cursor: pointer;}
- .like_button {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9;
- opacity: 0.0001;
- }
- .like_button.liked + i {
- color: {color:accent};
- }
- /*PAGINATION*/
- #pagination {
- position: relative;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- #pagination a, #pagination b {
- color: {color:footer text};
- padding: 27px 10px;
- width: 80px;
- height: 100%;
- background: rgba(172,172,172,0.15);
- font-family: {text:font two};
- }
- #pagination a:nth-of-type(2n) {
- background: rgba(172,172,172,0.1);
- }
- #pagination b {
- color: {color:accent text};
- background: {color:accent};
- }
- #pagination b,
- #pagination a,
- #pagination i {
- font-size: 25px;
- }
- /*tags, search, etc headlines*/
- .tag_info {
- position: relative;
- max-width: {select:post width}px;
- margin: 80px auto;
- }
- .tag_info:after {
- position: absolute;
- content: "";
- width: 15%;
- height: 5px;
- background: {color:accent};
- background-image: -webkit-linear-gradient(left, transparent 0%, {color:accent} 50%, transparent 100%);
- background-image: -moz-linear-gradient(left, transparent 0%, {color:accent} 50%, transparent 100%);
- background-image: -o-linear-gradient(left, transparent 0%, {color:accent} 50%, transparent 100%);
- background-image: linear-gradient(to right, {color:accent} 80%, transparent 100%);
- }
- .tag_info h2 {
- text-align: left;
- }
- .no_post h2 {
- background: none;
- }
- /*PERMALINK*/
- .permalink {
- position: relative;
- max-width: {select:post width}px;
- margin: 25px auto 100px auto;
- padding: 0 20px;
- }
- .pl i,
- .pl a {
- margin: 0 5px 5px 0;
- }
- .plnotes {
- margin: 25px 0;
- max-width: {select:post width}px;
- }
- .plnotes ol {
- margin: 50px 0;
- padding: 0;
- list-style-type: none;
- }
- .plnotes ol li {
- margin: 5px 0;
- padding: 0;
- font-size: calc({text:font size}px - 1px);
- color: #999;
- }
- .plnotes ol li a {
- text-transform: uppercase;
- font-style: italic;
- font-weight: bold;
- margin: 0 5px;
- color: #999;
- }
- .plnotes ol li blockquote a {
- text-transform: none;
- font-weight: normal;
- }
- .plnotes img {
- display: none;
- vertical-align: middle;
- }
- .plnotes img,
- .plnotes a {
- margin: 0 5px 0 0;
- }
- .avatar_frame {
- display: none;
- }
- .more_notes_link_container {
- margin-top: 50px!important;
- }
- .more_notes_link_container a {
- font-style: normal!important;
- }
- .note.like::before,
- .note.reblog::before,
- .note.reply::before {
- font-family: 'Font Awesome 5 Free','Font Awesome 5 Brands';
- font-weight: 900;
- display: inline-block;
- }
- .note.reblog::before {
- content: "\f079";
- display: inline;
- width: 1.25em;
- }
- .note.like::before {
- content: "\f004";
- display: inline;
- width: 1.25em;
- }
- .note.reply::before {
- width: 1.25em;
- display: inline-block;
- text-align:center;
- content: "\f075";
- }
- #scrolltop {
- position: fixed;
- bottom: 45px;
- right: 30px;
- font-size: 25px;
- padding: 15px 20px;
- filter: opacity(0.3);
- cursor: pointer;
- display: none;
- z-index: 8;
- background: #1e1e1e;
- -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
- -moz-animation: fadein 1s; /* Firefox < 16 */
- -ms-animation: fadein 1s; /* Internet Explorer */
- -o-animation: fadein 1s; /* Opera < 12.1 */
- animation: fadein 1s;
- }
- #scrolltop i {
- color: #fff;
- }
- #scrolltop:hover {
- filter: opacity(1);
- }
- #scrolltop:focus {
- outline:0;
- }
- /*OTHER PAGES*/
- {block:AskPage}
- .caption {
- line-height: 100%;
- background: none;
- padding: 0;}
- {/block:AskPage}
- {block:SubmitPage}
- .caption {
- line-height: 100%;
- background: none;
- padding: 0;
- }
- {/block:SubmitPage}
- /*MEDIA QUERIES*/
- @media only screen and (max-width: 999px) {
- aside {
- position: fixed;
- flex-direction: row;
- height: 50px;
- width: 100%;
- z-index: 8;
- }
- nav,
- #desc,
- #search_bar,
- #side_img {
- display: none;
- }
- #page_title,
- #page_title img {
- height: 50px;
- }
- main,
- footer {
- margin: 0 auto;
- width: 100vw;
- }
- #scrolltop {
- display: none;
- }
- #mobile_menu, #mobile_button {
- display: block;
- }
- #mobile_menu {
- height: 0px;
- display: block;
- overflow: hidden;
- padding: 0 0 0;
- list-style-type: none;
- transition: height 0.5s ease-out;
- position: fixed;
- min-width: 100%;
- top: 73px;
- background: {color:background};
- z-index: 99;
- text-align: center;
- overflow-y: auto;
- }
- #mobile_menu li {
- padding: 10px 20px;
- }
- #mobile_menu li a {
- color: {color:text};
- font-size: calc({text:font size}px + 10px);
- text-transform: capitalize;
- }
- #tumblr_controls {
- display: block;
- position: fixed;
- top: 0px;
- right: 0;
- padding: 10px 20px;
- font-size: 22px;
- background: {color:accent};
- color: {color:accent text};
- visibility: visible;
- height: 50px;
- z-index: 9;
- }
- label#tumblr_controls:hover,
- input#mobile_button:checked ~ label {
- cursor: pointer;
- background:{color:border two};
- }
- input#mobile_button:checked ~ ul#mobile_menu {
- height: calc(100% - 73px);
- transition: height 0.5s ease-in;
- padding: 35px 0 0 0;
- }
- }
- {CustomCss}
- </style>
- </head>
- <body>
- {block:ifScrollTop}
- <div id="scrolltop" role="button" tabindex="0"><i class="fas fa-arrow-up"></i></div>
- {/block:ifScrollTop}
- <!--CONTROLS & MOBILE--------------------------------------------------->
- <!--MOBILE NAVIGATION-->
- <input id="mobile_button" type="checkbox" name="mobile_menu" />
- <label id="tumblr_controls" for="mobile_button"><i class="fas fa-bars"></i></label>
- <ul id="mobile_menu">
- <li><a href="/" title="Home">Home</a></li>
- {block:AskEnabled}
- <li><a href="/ask" title="{AskLabel}">{AskLabel}</a></li>
- {/block:AskEnabled}
- {block:SubmissionsEnabled}
- <li><a href="/submit" title="{SubmitLabel}">{SubmitLabel}
- </a>
- </li>
- {/block:SubmissionsEnabled}
- <!--custom links-->
- {block:HasPages}
- {block:Pages}
- <li><a href="{URL}">{Label}
- </a>
- </li>
- {/block:Pages}
- {/block:HasPages}
- {block:Iflinkoneurl}
- <li><a href="{text:link one url}">{text:link one title}
- </a>
- </li>
- {/block:Iflinkoneurl}
- {block:Iflinktwourl}
- <li><a href="{text:link two url}">{text:link two title}
- </a>
- </li>
- {/block:Iflinktwourl}
- {block:Iflinkthreeurl}
- <li><a href="{text:link three url}">{text:link three title}
- </a>
- </li>
- {/block:Iflinkthreeurl}
- {block:Iflinkfoururl}
- <li><a href="{text:link four url}">{text:link four title}
- </a>
- </li>
- {/block:Iflinkfoururl}
- {block:Iflinkfiveurl}
- <li><a href="{text:link five url}"> {text:link five title}
- </a>
- </li>
- {/block:Iflinkfiveurl}
- </ul>
- <!--CONTROLS END-------------------------------------------------------->
- <!--CONTAINER----------------------------------------------------------->
- <div id="wrapper">
- <aside>
- <!--PAGE TITLE & ICON-->
- <div id="page_title">
- <img src="{PortraitURL-128}">
- <a href="/">
- <h1>{Title}</h1>
- </a>
- </div>
- {block:ifSidebarImage}
- <img id="side_img" src="{image:sidebar}">
- {/block:ifSidebarImage}
- {block:ShowDescription}
- {block:Description}
- <div id="desc">
- {Description}
- </div>
- {/block:Description}
- {/block:ShowDescription}
- <nav>
- <ul>
- <li><i class="far fa-star"></i><a href="/" title="Home">Home</a></li>
- {block:AskEnabled}
- <li><i class="far fa-envelope"></i><a href="/ask" title="{AskLabel}">{AskLabel}</a></li>
- {/block:AskEnabled}
- {block:SubmissionsEnabled}
- <li><i class="fas fa-edit"></i><a href="/submit" title="{SubmitLabel}">{SubmitLabel}
- </a>
- </li>
- {/block:SubmissionsEnabled}
- <!--custom links-->
- {block:HasPages}
- {block:Pages}
- <li><i class="fas fa-link"></i><a href="{URL}">{Label}
- </a>
- </li>
- {/block:Pages}
- {/block:HasPages}
- {block:Iflinkoneurl}
- <li><i class="fas fa-link"></i><a href="{text:link one url}">{text:link one title}
- </a>
- </li>
- {/block:Iflinkoneurl}
- {block:Iflinktwourl}
- <li><i class="fas fa-link"></i><a href="{text:link two url}">{text:link two title}
- </a>
- </li>
- {/block:Iflinktwourl}
- {block:Iflinkthreeurl}
- <li><i class="fas fa-link"></i><a href="{text:link three url}">{text:link three title}
- </a>
- </li>
- {/block:Iflinkthreeurl}
- {block:Iflinkfoururl}
- <li><i class="fas fa-link"></i><a href="{text:link four url}">{text:link four title}
- </a>
- </li>
- {/block:Iflinkfoururl}
- {block:Iflinkfiveurl}
- <li><i class="fas fa-link"></i><a href="{text:link five url}"> {text:link five title}
- </a>
- </li>
- {/block:Iflinkfiveurl}
- <li><i class="far fa-folder-open"></i><a href="/archive" title="{lang:Archive}">{lang:Archive}</a></li>
- </ul>
- </nav>
- <div id="search_bar">
- <form action="/search" method="get">
- <input id="search_input" type="text" name="q"
- value="{SearchQuery}" placeholder="{lang:Search}...">
- </form>
- <i class="fas fa-search"></i>
- </div>
- </aside>
- <!--POST CONTAINER------------------------------------------------------>
- <main>
- <!--TAG & SEARCH RESULT INFO-->
- {block:TagPage}
- <div class="tag_info">
- <h1><span></span>
- Posts tagged "{Tag}"
- </h1>
- </div>
- {block:TagPage}
- {block:SearchPage}
- <div class="tag_info">
- <h1><span></span>
- {SearchResultCount} results for "{SearchQuery}"
- </h1>
- </div>
- {block:SearchPage}
- {block:NoPosts}
- <div class="tag_info no_post">
- <h1>No posts found.</h1>
- </div>
- {/block:NoPosts}
- <!--POSTS-->
- {block:Posts}
- <div class="article_wrapper">
- <article id="{PostID}" class="post {PostType} {TagsAsClasses}">
- {block:IndexPage}
- <div class="post_header">
- <!--<i class="fas fa-font"></i>
- <!--if reblog-->
- <!--{block:RebloggedFrom}
- <div class="via rblg pinfo">
- <a href="{ReblogRootURL}">
- <img src="{ReblogRootPortraitURL-128}">
- </a>
- </div>
- {/block:RebloggedFrom}-->
- {block:Date}
- <div class="pdate pinfo">
- <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
- </div>
- {/block:Date}
- <div class="pnotes pinfo">
- <a href="{Permalink}">{NoteCount}</a>
- </div>
- </div>
- <!--post_header-->
- {/block:IndexPage}
- <!--POST BODY-->
- <div class="post_body">
- <div class="cpt">
- {block:Title}
- <div class="post_title">
- <h1>{Title}</h1>
- </div>
- {/block:Title}
- <!--TEXT-->
- {block:Text}
- {block:NotReblog}
- <div class="caption">
- {Body}
- </div>
- {block:NotReblog}
- {/block:Text}
- <!--PHOTO-->
- {block:Photo}
- <div class="post_photo">
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
- </div>
- {/block:Photo}
- <!--PHOTOSET-->
- {block:Photoset}
- {Photoset-700}
- {/block:Photoset}
- <!--QUOTE-->
- {block:Quote}
- <div class="qh caption">
- <h3>{Quote}</h3>
- </div>
- {block:NotReblog}
- {block:Source}
- <div class="caption">
- <span class="qsrc">{Source}</span>
- </div>
- {/block:Source}
- {/block:NotReblog}
- {/block:Quote}
- <!--LINK-->
- {block:Link}
- <div class="lh caption">
- <h3><a title="{URL}" href="{URL}">
- <i class="fas fa-link"></i>
- {Name}</a>
- </h3>
- </div>
- <!--
- {block:Thumbnail}
- <img class="thumb" src="{Thumbnail-HighRes}"></img>
- {/block:Thumbnail}-->
- {block:NotReblog}
- {block:Description}
- <div class="caption">
- {Description}
- </div>
- {/block:Description}
- {/block:NotReblog}
- {/block:Link}
- <!--CHAT-->
- {block:Chat}
- <div class="post_title">
- {block:Title}
- <h1>{Title}</h1>
- {/block:Title}
- </div>
- <div class="caption">
- {block:Lines}
- <div class="chat_lines {Alt}">
- {block:Label}<b>{Label}</b>{/block:Label} {Line}
- </div>
- {/block:Lines}
- </div>
- {/block:Chat}
- <!--AUDIO-->
- {block:Audio}
- <div class="audio_post">
- {block:AudioPlayer}
- <div class="audio_player">
- {block:AlbumArt}
- <img src="{AlbumArtURL}">
- {/block:AlbumArt}
- <div class="play_button">{AudioPlayer}</div>
- </div>
- {/block:AudioPlayer}
- <div class="audio_info">
- <ul>
- <li><span>Name:</span>{block:TrackName}{TrackName}{/block:TrackName}</li>
- <li><span>Artist:</span>{block:Artist}{Artist}{/block:Artist}</li>
- <li><span>Plays:</span>{block:PlayCount}{FormattedPlayCount}{/block:PlayCount}</li>
- </ul>
- </div>
- </div>
- {/block:Audio}
- <!--VIDEO-->
- {block:Video}
- <div class="vid">{Video-700}</div>
- {/block:Video}
- <!--ASK-->
- {block:Answer}
- <div class="ask">
- <div class="asker">
- <img src="{AskerPortraitURL-64}">
- {lang:Asker asked 2}:
- </div>
- <div class="question caption">"{Question}"</div>
- </div>
- <!--ask-->
- {block:Answerer}
- <div class="answerer">
- <img src="{AnswererPortraitURL-64}">
- {Answerer}
- </div>
- <div class="caption">{Answer}</div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="caption">
- {Replies}
- </div>
- {/block:NotReblog}
- {/block:Answer}
- <!--CAPTION-->
- {block:NotReblog}
- {block:Caption}
- <div class="caption">
- {Caption}
- </div>
- {/block:Caption}
- {/block:NotReblog}
- <div class="reblog-list">
- {block:Reblogs}
- <div class="reblog_parent">
- <div class="reblog_header">
- {block:IsActive}
- <img src="{PortraitURL-64}">
- <a target="_blank" href="{Permalink}">{Username}</a>
- {/block:IsActive}
- {block:IsDeactivated}
- <i class="fas fa-user-times"></i>
- {Username}
- {block:IsDeactivated}
- </div>
- <div class="reblog_body caption">
- {Body}
- </div>
- </div>
- {/block:Reblogs}
- </div>
- </div>
- </div>
- <!--post_body-->
- {block:IndexPage}
- <div class="post_footer">
- <!--tags-->
- {block:HasTags}
- <div class="ptags pinfo">
- {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- <!--post buttons-->
- <div class="buttons pinfo">
- <a href="{ReblogURL}" title="Reblog this post"><i class="fas fa-retweet"></i></a>
- <div class="custom_like_button" title="Like this post">
- {LikeButton}
- <i class="fas fa-heart"></i>
- <span></span>
- </div>
- </div>
- <!--buttons-->
- </div>
- {/block:IndexPage}
- </article>
- <!--post-->
- </div>
- {block:PermalinkPage}
- <div class="permalink {TagsAsClasses}">
- <!--tags-->
- {block:HasTags}
- <div class="pl via ptags">
- <i class="fas fa-tags"></i>
- {block:Tags}<a href="{TagURL}">{text:tag}{Tag}</a>{/block:Tags}
- </div>
- {/block:HasTags}
- <!--date-->
- {block:Date}
- <div class="pl via">
- <i>posted</i> <a href="{Permalink}">{TimeAgo} on {DayofMonthWithSuffix} {Month} with {NoteCountWithLabel}</a>
- </div>
- {/block:Date}
- <!--source-->
- <!--if reblog-->
- {block:RebloggedFrom}
- <div class="pl via">
- <i>source:</i>
- <a href="{ReblogRootURL}">
- {ReblogRootName}
- </a>
- </div>
- {/block:RebloggedFrom}
- {block:NotReblog}
- {block:Source}
- <div class="pl via">
- <i>source</i>
- <a href="{Permalink}">
- {Name}
- </a>
- </div>
- {/block:Source}
- {/block:NotReblog}
- <!--post notes-->
- {block:PostNotes}
- <div class="plnotes">{PostNotes}</div>
- {/block:PostNotes}
- </div>
- <!--permalink-->
- {/block:PermalinkPage}
- <!--HIDE SOURCE & VIA-->
- {block:ContentSource}
- <!-- {SourceURL}
- {block:SourceLogo}
- <img src="{BlackLogoURL}" width="{LogoWidth}"
- height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}
- {/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
- {/block:Posts}
- </main>
- <!--POST CONTAINER END-------------------------------------------------->
- <!--COPYRIGHT----------------------------------------------------------->
- <div id="copyright" style="position: fixed; bottom: 0; right: 0; padding: 10px; background: #181818;"><a style="font-family: helvetica;
- font-weight: bold;
- letter-spacing: -1px; color: #fff;" href="https://nonspace.tumblr.com">nonspace.</a></div>
- <!--COPYRIGHT-- END----------------------------------------------------->
- </div>
- <!--container-->
- <!--FOOTER-------------------------------------------------------------->
- {block:Pagination}
- <footer>
- <div id="pagination">
- {block:PreviousPage}<a href="{PreviousPage}"><i class="far fa-arrow-alt-circle-left"></i></a>
- {/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}<b>{CurrentPage}</b>{/block:CurrentPage}
- {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}<a href="{NextPage}"><i class="far fa-arrow-alt-circle-right"></i></a>{/block:NextPage}
- </div>
- </footer>
- {/block:Pagination}
- <!--FOOTER END---------------------------------------------------------->
- <!--CONTAINER END------------------------------------------------------->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment