Last active
August 29, 2015 14:01
-
-
Save ShadowKyogre/513c00cb3f87839dee10 to your computer and use it in GitHub Desktop.
Experimental mobile theme. Also includes some carousel code that can be easily accessed with a thumb.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Colors */ | |
.captions { | |
background:grey; | |
} | |
.carousel .controls, .carousel .panels { | |
background:pink; | |
border-color:black; | |
} | |
.carousel input[type="range"] { | |
background:blue; | |
color:yellow; | |
} | |
.carousel input[type="range"]::-moz-range-thumb { | |
background:yellow; | |
} | |
.carousel input[type="range"]::-webkit-slider-thumb | |
{ | |
background:yellow; | |
} | |
.carousel input[type="range"]::-moz-range-track { | |
background:blue; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Default stuff */ | |
.carousel { | |
/*width: 18.5em;*/ /* <- ADJUSTABLE! */ | |
margin:auto; | |
} | |
.panels-wrapper { | |
width:100%; | |
padding-bottom:100%; | |
position:relative; | |
} | |
.panels-wrapper > .panels { | |
top: 0; bottom: 0; left: 0; right: 0; | |
position:absolute; | |
} | |
.controls-wrapper { | |
width:100%; | |
/*padding-bottom:50%;*/ | |
padding-bottom: 13em; | |
position:relative; | |
} | |
.controls-wrapper > .controls { | |
top: 0; bottom: 0; left: 0; right: 0; | |
position:absolute; | |
} | |
.carousel .panels span { | |
position: absolute; | |
display:table-row; | |
height: 100%; | |
width: 100%; | |
left: 0; | |
} | |
.carousel .panels img { | |
opacity:0; | |
max-height: 100%; | |
max-width: 100%; | |
vertical-align: middle; | |
display: table-cell; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
margin: auto; | |
transition: opacity 0.2s linear; | |
} | |
.carousel .panels { | |
border:1px solid; | |
text-align:center; | |
margin-left:auto; | |
margin-right:auto; | |
} | |
.carousel .controls { | |
margin-left:auto; | |
margin-right:auto; | |
padding: .375em; | |
text-align:center; | |
border:1px solid; | |
} | |
.captions { | |
height: 9em; | |
top:2em; | |
position:relative; | |
width:100%; | |
overflow:auto; | |
word-wrap: break-word; | |
font-size:0.80em; | |
} | |
.captions span { | |
opacity:0; | |
display:none; | |
width:100%; | |
position:absolute; | |
top:0; | |
left:0; | |
right:0; | |
bottom:0; | |
transition: opacity 0.2s linear; | |
} | |
.carousel .panels span:before { | |
content: ''; | |
display: table; | |
height: 100%; | |
vertical-align: middle; | |
} | |
/* active panel */ | |
.panels .current { | |
z-index:999; | |
} | |
.panels .current img { | |
opacity:1; | |
} | |
.captions .current { | |
opacity:1; | |
z-index:999; | |
display:block; | |
} | |
.carousel input[type="range"] { | |
width:95%; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top:2em; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
} | |
.carousel input[type="range"]::-moz-range-thumb | |
{ | |
height:4em; | |
/* width:calc(95% / attr(max)); /* <- wish browser had support for this */ */ | |
width: 9.5%; | |
} | |
.carousel input[type="range"]::-webkit-slider-thumb | |
{ | |
height:4em; | |
/*width:calc(95% / attr(max));*/ | |
width: 9.5%; | |
} | |
.carousel input[type="range"]::-moz-range-track { | |
height:100%; | |
} | |
/* Screen adjustments */ | |
/* Portrait */ | |
@media screen and (orientation:portrait) { | |
/* Nothing for now */ | |
} | |
/* Landscape */ | |
@media screen and (orientation:landscape) { | |
.panels-wrapper { | |
padding-bottom:32%; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function updateSlide(el) { | |
el.setAttribute('value', el.value); | |
panels=el.parentNode.parentNode.parentNode.children[0].children[0]; | |
captions=el.nextElementSibling; | |
for (var i=0;i<el.max;i++) { | |
if(i==el.value-1) { | |
captions.children[i].classList.add('current'); | |
panels.children[i].classList.add('current'); | |
} | |
else { | |
captions.children[i].classList.remove('current'); | |
panels.children[i].classList.remove('current'); | |
} | |
} | |
} | |
function considerLastSlides() { | |
gal_inputs=document.querySelectorAll(".carousel input[type='range']"); | |
for (var i = 0; i < gal_inputs.length; i++) { | |
updateSlide(gal_inputs[i]); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", target-densitydpi=device-dpi /> | |
<!-- TUMBLR VARIABLES --> | |
<meta name="text:GWFTitle" content="Metamorphous" /> | |
<meta name="text:GWFBody" content="Crimson Text" /> | |
<!-- aesthetic features --> | |
<!-- aesthetic features > basics --> | |
<meta name="image:background" content="" /> | |
<meta name="color:text" content="#fff" /> | |
<meta name="color:title" content="#0f0" /> | |
<meta name="color:description" content="#87ceeb" /> | |
<!-- /aesthetic features > basics --> | |
<!-- aesthetic features > links --> | |
<meta name="color:link" content="#ffa500" /> | |
<meta name="color:pagination link" content="#f0f" /> | |
<meta name="color:custom link" content="#0ff" /> | |
<!-- /aesthetic features > links --> | |
<!-- aesthetic features > post metadata --> | |
<meta name="color:metadata" content="#fff" /> | |
<meta name="color:metadata bg" content="#000" /> | |
<meta name="color:metadata separator" content="#fff" /> | |
<meta name="text:metadata bg opacity" content="0.6" /> | |
<meta name="color:post type" content="#ee82ee" /> | |
<!-- /aesthetic features > post metadata --> | |
<!-- aesthetic features > chat, ask --> | |
<meta name="color:chat line sep" content="#808080" /> | |
<meta name="color:chat bg even" content="#8b0000" /> | |
<meta name="color:chat bg odd" content="#00008b" /> | |
<meta name="color:chat bubble" content="#7f7f7f" /> | |
<meta name="color:ask bubble" content="#7f7f7f" /> | |
<!-- /aesthetic features > chat, ask --> | |
<!-- aesthetic features > quote --> | |
<meta name="color:quote border" content="#ffff00" /> | |
<meta name="color:quote post border" content="#ffff00" /> | |
<meta name="color:quote post bg" content="#000" /> | |
<meta name="color:quote post bg opacity" content="0.6" /> | |
<meta name="color:post border" content="#008000" /> | |
<meta name="color:post bg" content="#000" /> | |
<meta name="text:post bg opacity" content="0.0" /> | |
<!-- /aesthetic features > quote --> | |
<!-- aesthetic features > tabs --> | |
<meta name="color:tab icon" content="#0bf" /> | |
<meta name="color:tab link borders" content="#ffc0cb" /> | |
<meta name="color:tab link hover" content="#7d0000" /> | |
<meta name="color:bg" content="#000" /> | |
<meta name="text:bg opacity" content="0.6" /> | |
<meta name="color:active tab glow" content="#00459f" /> | |
<meta name="color:desc tab glow" content="#ff0800" /> | |
<meta name="color:links tab glow" content="#006d04" /> | |
<meta name="color:nav tab glow" content="#5d017e" /> | |
<meta name="color:desc tab bg" content="#2b1000" /> | |
<meta name="text:desc tab bg opacity" content="0.6" /> | |
<meta name="color:nav tab bg" content="#280036" /> | |
<meta name="text:nav tab bg opacity" content="0.6" /> | |
<meta name="color:links tab bg" content="#001d06" /> | |
<meta name="text:links tab bg opacity" content="0.6" /> | |
<meta name="color:desc tab icon" content="#f2992e" /> | |
<meta name="color:links tab icon" content="#00ff1a" /> | |
<meta name="color:nav tab icon" content="#ea00ff" /> | |
<meta name="color:search bar bg" content="#ff0" /> | |
<meta name="color:search bar" content="#000" /> | |
<!-- /aesthetic features > tabs --> | |
<!-- non-aesthetic features --> | |
<meta name="if:infinite scroll" content="1" /> | |
<meta name="if:show search" content="1" /> | |
<meta name="if:show jump first last" content="1" /> | |
<meta name="if:photoset carousel" content="1" /> <!-- going to implement, BUT, need to clean up with HTML5 stuff --> | |
<meta name="if:enable tab colors" content="0" /> | |
<!-- reffed this: http://jsfiddle.net/9Ue9j/3/ --> | |
<!-- http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ --> | |
<!-- http://www.ilikepixels.co.uk/drop/bubbler/ --> | |
<!-- fonts --> | |
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family={text:GWFTitle}" /> | |
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family={text:GWFBody}" /> | |
<link rel="stylesheet" type="text/css" href="http://weloveiconfonts.com/api/?family=entypo" /> | |
{block:ifinfinitescroll} | |
<!-- INFINITE SCROLL SCRIPT --> | |
<script src="http://codysherman.com/tools/infinite-scrolling/code"></script> | |
{/block:ifinfinitescroll} | |
<title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title> | |
<link rel="shortcut icon" href="{Favicon}" /> | |
<style type="text/css"> | |
/* entypo */ | |
[class*="entypo-"]:before { | |
font-family: 'entypo', sans-serif; | |
} | |
/* posts */ | |
.post | |
{ | |
padding:0.2083em; | |
border: 0.04167em solid {color:post border}; | |
background: rgba({RGBcolor:post bg},{text:post bg opacity}); | |
margin-bottom:0.41667em; | |
border-radius:0.41667em; | |
} | |
#main:last-child { | |
margin-bottom:0px; | |
} | |
/* media */ | |
.video, .photo, .photoset, .audio { | |
text-align:center; | |
} | |
.photoset .photo + .desc | |
{ | |
border-bottom:1px solid; | |
margin-bottom:1em; | |
} | |
.video iframe, .photo img { | |
max-width:100%; | |
} | |
.albumart, .audio-info { | |
vertical-align:middle; | |
} | |
/* quote */ | |
.post blockquote | |
{ | |
border-left:0.04167em solid {color:quote border}; | |
padding: 0.2083em; | |
} | |
.data blockquote | |
{ | |
border-left:0.04167em solid {color:quote border}; | |
background:rgba({RGBcolor:quote post bg}, {RGBcolor:quote post bg opacity}); | |
} | |
.post blockquote cite | |
{ | |
display:block; | |
} | |
.post blockquote cite:before | |
{ | |
content: "\2014 \2009"; | |
} | |
/* font icons */ | |
.tab label span[class*="entypo-"] | |
{ | |
color: {color:tab icon}; | |
} | |
.posts-type | |
{ | |
color: {color: post type}; | |
display: table-cell; | |
font-size: 1.6667em; | |
text-align: center; | |
border-right: 0.04167em solid; | |
padding-right: .25em; | |
} | |
/* chat */ | |
.chat-bubble .line | |
{ | |
border-bottom:0.04167em solid {color:chat line sep}; | |
} | |
.line:nth-child(even) { | |
background: {color:chat bg even}; | |
} | |
.line:nth-child(odd) { | |
background: {color:chat bg odd}; | |
} | |
.line:first-child { | |
border-top-left-radius: .125em; | |
border-top-right-radius: .125em; | |
} | |
.line:last-child | |
{ | |
border-bottom:none; | |
border-bottom-left-radius: .125em; | |
border-bottom-right-radius: .125em; | |
} | |
.chat-bubble | |
{ | |
position: relative; | |
padding: 0.2083em; | |
background: {color:chat bubble}; | |
-webkit-border-radius: 0.41667em; | |
-moz-border-radius: 0.41667em; | |
border-radius: 0.41667em; | |
border: {color:chat bubble} solid 0.0833em; | |
margin-bottom:1.2em; | |
} | |
.chat-bubble:before | |
{ | |
content: ''; | |
position: absolute; | |
border-style: solid; | |
border-width: 1.25em 1.25em 0; | |
border-color: {color:chat bubble} transparent; | |
display: block; | |
width: 0; | |
z-index: 0; | |
margin-left: -1.25em; | |
bottom: -1.05em; | |
left: 9%; | |
} | |
/* ask */ | |
.question img | |
{ | |
display:inline-block; | |
} | |
.bubble | |
{ | |
position: relative; | |
margin-top:-1.75em; | |
padding: 0px; | |
background: {color:ask bubble}; | |
padding:0.2083em; | |
width: calc(100% - 50px - 0.75em); | |
margin-left:50px; | |
-webkit-border-radius: 0.41667em; | |
-moz-border-radius: 0.41667em; | |
border-radius: 0.41667em; | |
border: {color:ask bubble} solid 0.083333333em; | |
} | |
.bubble:before | |
{ | |
content: ''; | |
position: absolute; | |
border-style: solid; | |
border-width: .25em 1.25em .25em 0; | |
border-color: transparent {color:ask bubble}; | |
display: block; | |
width: 0; | |
z-index: 0; | |
left: -1.25em; | |
top: 0.2083em; | |
} | |
/* audio */ | |
.audio img | |
{ | |
display:inline-block; | |
width:8.3333333em; | |
} | |
.audio-info | |
{ | |
display:inline-block; | |
} | |
.posts-type + .other | |
{ | |
display: table-cell; | |
text-align: right; | |
width:100%; | |
opacity: 0; | |
transition: opacity 0.2s linear 0s; | |
font-size: 0.83333333em; | |
} | |
.posts-type:hover + .other | |
{ | |
opacity:1; | |
transition: opacity 0.2s linear; | |
} | |
.posts-type + .other:hover | |
{ | |
opacity:1; | |
transition: opacity 0.2s linear; | |
} | |
/* metadata */ | |
.metadata { | |
border-top:0.04167em solid {color:metadata separator}; | |
color: {color:metadata}; | |
background: rgba({RGBcolor:metadata bg},{text:metadata bg opacity}); | |
position:relative; | |
padding: 0.2083em; | |
border-bottom-left-radius: 0.41667em; | |
border-bottom-right-radius: 0.41667em; | |
display:table; | |
} | |
.metadata .other a:last-child:after { | |
content:none; | |
} | |
.metadata .other a:after { | |
content:"\00a0"; | |
text-decoration: none; | |
} | |
/* notes */ | |
div.notes { | |
border-top:0.04167em solid {color:metadata separator}; | |
} | |
ol.notes { | |
overflow:auto; | |
list-style:none; | |
height:8.3333333em; | |
} | |
/* /posts */ | |
/* Title, avatar, desc */ | |
#title, .data .title | |
{ | |
text-align:center; | |
font-family: "{text:GWFTitle}"; | |
/*font-size: 2em; | |
position: relative;*/ | |
} | |
#title a | |
{ | |
text-decoration:none; | |
} | |
#title { | |
height:7.5em; | |
width:100%; | |
} | |
#title-text | |
{ | |
display: inline-block; | |
/*top: calc(50% - 0.5em);*/ | |
color: {color:title}; | |
} | |
#title img | |
{ | |
display: inline-block; | |
vertical-align: middle; | |
} | |
#desc | |
{ | |
width:100%; | |
height:calc(100% - 8.4875em); | |
overflow:auto; | |
border-top:0.04167em solid; | |
color: {color:description}; | |
} | |
/* Pagination */ | |
#pagination, #links { | |
display:table; | |
width:100%; | |
height:calc(100% - 0.83333333em ); | |
} | |
#pagination span, #links span { | |
display: block; | |
text-align:center; | |
padding:0.2083em; | |
display:table-row; | |
} | |
#pagination a, #links a, #pagination form { | |
display:table-cell; | |
vertical-align:middle; | |
border: 0.04167em solid {color:tab link borders}; | |
border-bottom: none; | |
} | |
#pagination a, | |
#links a, | |
#pagination input | |
{ | |
font-size:1.5em; | |
} | |
#pagination input | |
{ | |
width: calc(100% - 0.83333333em); | |
background: {color:search bar bg}; | |
color: {color:search bar}; | |
border-radius:0.2083em; | |
} | |
/* LINKAGE */ | |
#pagination a:hover,#pagination form:hover | |
{ | |
background:rgba({RGBcolor:tab link hover},0.5); | |
} | |
#links a:hover | |
{ | |
background:rgba({RGBcolor:tab link hover},0.5); | |
} | |
#pagination span:first-child a, #links span:first-child a, #pagination span:first-child form { | |
border-top-left-radius: 0.41667em; | |
border-top-right-radius: 0.41667em; | |
} | |
#pagination span:last-child a, #links span:last-child a, #pagination span:last-child form { | |
border-bottom-left-radius: 0.41667em; | |
border-bottom-right-radius: 0.41667em; | |
border-bottom: 0.04167em solid {color:tab link borders}; | |
} | |
#pagination a { | |
color: {color:pagination link}; | |
} | |
#links a { | |
color: {color:custom link}; | |
} | |
a { | |
color: {color:link}; | |
} | |
/* Vertical tabs stuff */ | |
#menu [type=radio] { | |
display: none; | |
} | |
.tab input[type="radio"]:checked + label span[class*="entypo-"] | |
{ | |
text-shadow: 0 0 0.2083em {color:active tab glow}; | |
} | |
#menu label { | |
vertical-align:text-top; | |
position:relative; | |
display:block; | |
left:0px; | |
width:1.68em; | |
font-size:1.6667em; | |
text-align: center; | |
} | |
#main { | |
padding:0.2083em; | |
height:calc(100% - 0.83333333em); | |
width:100%; | |
overflow:auto; | |
} | |
#menu { | |
top:0px; | |
position:fixed; | |
left:0px; | |
height:100%; | |
width:100%; | |
} | |
.tab-wrapper { | |
display:inline-block; | |
} | |
.tab { | |
background:rgba({RGBcolor:bg},{text:bg opacity}); | |
} | |
.tab .content { | |
display:none; | |
word-wrap:break-word; | |
top:0px; | |
left:2.8em; | |
height:100%; | |
position:absolute; | |
background:rgba({RGBcolor:bg},{text:bg opacity}); | |
width:calc(100% - 3.6em); | |
} | |
.tab-wrapper .content:empty { | |
width:0%; | |
padding:0px; | |
} | |
.tab [type=radio]:checked + label + .content:not(:empty){ | |
display:inline-block; | |
z-index:2; | |
padding: 0.41667em; | |
} | |
/*body,*/ html { | |
height:100%; | |
background:url('{image:background}'); | |
background-position: center center; | |
background-size: cover; | |
font-family: "{text:GWFBody}"; | |
/*font-size:24px;*/ | |
color: {color:text}; | |
} | |
#tw-desc img { | |
width: 1em; | |
border-radius: 0.208333em; | |
height: 1em; | |
margin-top: .25em; | |
} | |
#tw-desc input[type="radio"]:checked + label img { | |
box-shadow: 0px 0px 0.208333em {color:active tab glow}; | |
} | |
/* tab colors */ | |
{block:ifenabletabcolors} | |
#tw-desc, | |
#tw-desc .content | |
{ | |
background:rgba({RGBcolor:desc tab bg},{text:desc tab bg opacity}); | |
} | |
#tw-nav, | |
#tw-nav .content | |
{ | |
background:rgba({RGBcolor:nav tab bg},{text:nav tab bg opacity}); | |
} | |
#tw-links, | |
#tw-links .content | |
{ | |
background:rgba({RGBcolor:links tab bg},{text:links tab bg opacity}); | |
} | |
#tw-links input[type="radio"]:checked + label span[class*="entypo-"] | |
{ | |
text-shadow: 0 0 0.2083em {color:links tab glow}; | |
} | |
#tw-nav input[type="radio"]:checked + label span[class*="entypo-"] | |
{ | |
text-shadow: 0 0 0.2083em {color:nav tab glow}; | |
} | |
/* | |
#tw-desc input[type="radio"]:checked + label span[class*="entypo-"] | |
{ | |
text-shadow: 0 0 0.2083em {color:desc tab glow}; | |
} | |
*/ | |
#tw-desc label span[class*="entypo-"] | |
{ | |
color: {color:desc tab icon}; | |
} | |
#tw-nav label span[class*="entypo-"] | |
{ | |
color: {color:nav tab icon}; | |
} | |
#tw-links label span[class*="entypo-"] | |
{ | |
color: {color:links tab icon}; | |
} | |
#tw-desc input[type="radio"]:checked + label img { | |
box-shadow: 0px 0px 0.208333em {color:desc tab glow}; | |
} | |
{/block:ifenabletabcolors} | |
{CustomCSS} | |
</style> | |
<!-- full source code can be tracked here: https://gist.github.com/ShadowKyogre/513c00cb3f87839dee10 --> | |
<!-- Other scripts are hosted on Google Drive to prevent having to update the URL for these constantly --> | |
{block:ifphotosetcarousel} | |
<!-- carousel.js --> | |
<script src="https://googledrive.com/host/0B1wfV4TAvjbidHV3czh1RUV0SVk" type="text/javascript"></script> | |
<!-- carousel.css --> | |
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B1wfV4TAvjbic3Y4YU9RdWphWDQ" /> | |
{/block:ifphotosetcarousel} | |
<script type="text/javascript"> | |
function fixTagLinks() { | |
{block:PreviousPage} | |
document.getElementById('uselessID1').href = window.location.pathname.replace(/\/page\/[0-9]+/gi,'') + '/page/1'; | |
{/block:PreviousPage} | |
{block:NextPage} | |
document.getElementById('uselessID2').href = window.location.pathname.replace(/\/page\/[0-9]+/gi,'') + '/page/' + '{TotalPages}'; | |
{/block:NextPage} | |
} | |
function runBodyHooks() { | |
{block:ifshowjumpfirstlast} | |
// I AM A COMMENT | |
{block:TagPage} | |
fixTagLinks(); | |
{/block:TagPage} | |
{/block:ifshowjumpfirstlast} | |
{block:ifphotosetcarousel} | |
considerLastSlides(); | |
{/block:ifphotosetcarousel} | |
} | |
window.onload=runBodyHooks; | |
</script> | |
</head> | |
<body> | |
<!-- content --> | |
<div id="menu"> | |
<div class="tab-wrapper"> | |
<div class="tab" id="tw-desc"> | |
<!-- tab 1 --> | |
<input type="radio" accesskey="d" id="tab-1" name="tab-group-1"> | |
<label for="tab-1"> | |
<!-- description panel --> | |
<img src="{PortraitURL-128}" width="128"></img> | |
</label> | |
<div class="content"> | |
<div id="title"> | |
<a href="/"><h1 id="title-text">{Title}</h1></a> | |
</div> | |
<div id="desc"> | |
{Description} | |
</div> | |
</div> | |
</div> | |
<div class="tab" id="tw-nav"> | |
<!-- tab 2 --> | |
<input type="radio" id="tab-2" accesskey="p" name="tab-group-1"> | |
<label for="tab-2"> | |
<span class="entypo-direction"></span> | |
</label> | |
<div class="content"> | |
<div id="pagination"> | |
{block:ifshowsearch} | |
<span> | |
<form action='/search' id='nav-search' method='get'> | |
<input name='q' type='text' value='Search...' value='{SearchQuery}'/> | |
</form> | |
</span> | |
{/block:ifshowsearch} | |
{block:ifnotinfinitescroll} | |
{block:PreviousPage} | |
{block:ifshowjumpfirstlast} | |
{block:IndexPage} | |
{block:SearchPage}<!--{/block:SearchPage} | |
{block:TagPage}<!--{/block:TagPage} | |
<span><a href="/page/1"><<</a></span> | |
{block:TagPage}-->{/block:TagPage} | |
{block:SearchPage}-->{/block:SearchPage} | |
{/block:IndexPage} | |
{block:TagPage} | |
<span><a id="uselessID1" href="/tagged/{URLSafeTag}/page/1">>></a></span> | |
{/block:TagPage} | |
{block:SearchPage} | |
<span><a href="/search/{URLSafeSearchQuery}/page/1"><<</a></span> | |
{/block:SearchPage} | |
{/block:ifshowjumpfirstlast} | |
<span><a href="{PreviousPage}"><</a></span> | |
{/block:PreviousPage} | |
{block:JumpPagination length="5"} | |
{block:JumpPage} | |
<span><a href="{URL}">{PageNumber}</a></span> | |
{/block:JumpPage} | |
{block:CurrentPage} | |
<span><a href="{URL}"><b>{PageNumber}</b></a></span> | |
{/block:CurrentPage} | |
{/block:JumpPagination} | |
{block:NextPage} | |
<span><a href="{NextPage}">></a></span> | |
{block:ifshowjumpfirstlast} | |
{block:IndexPage} | |
{block:SearchPage}<!--{/block:SearchPage} | |
{block:TagPage}<!--{/block:TagPage} | |
<span><a href="/page/{TotalPages}">>></a></span> | |
{block:TagPage}-->{/block:TagPage} | |
{block:SearchPage}-->{/block:SearchPage} | |
{/block:IndexPage} | |
{block:TagPage} | |
<span><a id="uselessID2" href="/tagged/{URLSafeTag}/page/{TotalPages}">>></a></span> | |
{/block:TagPage} | |
{block:SearchPage} | |
<span><a href="/search/{URLSafeSearchQuery}/page/{TotalPages}">>></a></span> | |
{/block:SearchPage} | |
{/block:ifshowjumpfirstlast} | |
{/block:NextPage} | |
{/block:ifnotinfinitescroll} | |
{block:PermalinkPagination} | |
{block:PreviousPost} | |
<span><a href="{PreviousPost}">{lang:Prev post}</a></span> | |
{/block:PreviousPost} | |
{block:NextPost} | |
<span><a href="{NextPost}">{lang:Next post}</a></span> | |
{/block:NextPost} | |
{/block:PermalinkPagination} | |
</div> | |
</div> | |
</div> | |
<div class="tab" id="tw-links"> | |
<!-- tab 3 --> | |
<input type="radio" id="tab-3" accesskey="l" name="tab-group-1"> | |
<label for="tab-3"> | |
<span class="entypo-network"></span> | |
</label> | |
<div class="content"> | |
<div id="links"> | |
{block:AskEnabled} | |
<span> | |
<a href="/ask">{AskLabel}</a> | |
</span> | |
{block:AskEnabled} | |
{block:SubmissionsEnabled} | |
<span> | |
<a href="/submit">{SubmitLabel}</a> | |
</span> | |
{/block:SubmissionsEnabled} | |
<span><a href="/archive">{lang:Archive}</a></span> | |
{block:HasPages} | |
{block:Pages} | |
<span><a href="{URL}">{Label}</a></span> | |
{/block:Pages} | |
{/block:HasPages} | |
</div> | |
</div> | |
</div> | |
<div class="tab" id="tw-blog"> | |
<!-- tab 4 --> | |
<input type="radio" id="tab-4" accesskey="b" name="tab-group-1" checked> | |
<label for="tab-4"> | |
<span class="entypo-newspaper"></span> | |
</label> | |
<div class="content"> | |
<div id="main"> | |
{block:SearchPage} | |
<h1 id="search-results"> | |
{SearchQuery} - {lang:SearchResultCount results} | |
{block:NoSearchResults} | |
{lang:Sorry no search results found}. | |
{/block:NoSearchResults} | |
</h1> | |
{block:SearchPage} | |
{block:TagPage} | |
<h1 id="tag-results"> | |
<a href="/tagged/{URLSafeTag}/chrono" class="entypo-clock"></a> | |
<a href="/tagged/{URLSafeTag}">{Tag}</a> | |
</h1> | |
{/block:TagPage} | |
{block:NoSearchResults}<!--{/block:NoSearchResults} | |
<h1 id="n-pages"> | |
{block:SearchPage}({/block:SearchPage} | |
{block:TagPage}({/block:TagPage} | |
{lang:Page CurrentPage of TotalPages} | |
{block:TagPage}){/block:TagPage} | |
{block:SearchPage}){/block:SearchPage} | |
</h1> | |
{block:NoSearchResults}-->{/block:NoSearchResults} | |
<div class="autopagerize_page_element"> | |
{block:Posts} | |
<div class="post"> | |
<div class="data"> | |
{block:Text} | |
{block:Title} | |
<h2 class="title"> | |
{Title} | |
</h2> | |
{/block:Title} | |
<div class="desc">{Body}</div> | |
{/block:Text} | |
{block:Quote} | |
<blockquote> | |
{Quote} | |
<cite>{Source}</cite> | |
</blockquote> | |
{/block:Quote} | |
{block:Link} | |
<h2 class="title"> | |
<a href="{URL}" {Target}>{Name}</a> | |
</h2> | |
<div class="desc"> | |
{block:Description} | |
{Description} | |
{/block:Description} | |
</div> | |
{/block:Link} | |
{block:Chat} | |
{block:Title} | |
<h2 class="title"> | |
{Title} | |
</h2> | |
{/block:Title} | |
<div class="chat-bubble"> | |
{block:Lines} | |
<div class="line"> | |
{block:Label} | |
<strong>{Label}</strong> | |
{/block:Label} | |
{Line}<br/> | |
</div> | |
{/block:Lines} | |
</div> | |
{/block:Chat} | |
{block:Answer} | |
<div class="question"> | |
<img src="{AskerPortraitURL-30}" width="30"></img> | |
<div class="bubble"> | |
<strong>{Asker} {lang:Asker asked}:</strong>{Question} | |
</div> | |
</div> | |
<div class="desc"> | |
{Answer} | |
</div> | |
{/block:Answer} | |
{block:Video} | |
<div class="video"> | |
{Video-700} | |
</div> | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Video} | |
{block:Photo} | |
<div class="photo"> | |
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}"></img>{LinkCloseTag} | |
</div> | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Photo} | |
{block:Panorama} | |
<div class="photo"> | |
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" width="{PhotoWidth-Panorama}"></img>{LinkCloseTag} | |
</div> | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Panorama} | |
{block:Photoset} | |
{block:ifnotphotosetcarousel} | |
<div class="photoset"> | |
<!-- idea for photoset: http://codepen.io/anon/pen/mzgtD , http://codepen.io/anon/pen/ydIzE --> | |
{block:Photos} | |
<div class="photo"> | |
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}"></img>{LinkCloseTag} | |
</div> | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Photos} | |
</div> | |
{/block:ifnotphotosetcarousel} | |
{block:ifphotosetcarousel} | |
<div class="carousel"> | |
<div class="panels-wrapper"> | |
<div class="panels"> | |
{block:Photos} | |
<span> | |
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></img>{LinkCloseTag} | |
</span> | |
{/block:Photos} | |
</div> | |
</div> | |
<div class="controls-wrapper"> | |
<div class="controls"> | |
<input type="range" min="1" max="{PhotoCount}" value="1" onchange="updateSlide(this)" oninput="updateSlide(this)" id="slide-{PostID}"></input> | |
<div class="captions"> | |
<!-- should ideally hold 200 charas visible --> | |
{block:Photos} | |
<span>{block:Caption}{Caption}{block:Caption}</span> | |
{block:Photos} | |
</div> | |
</div> | |
</div> | |
</div> | |
{/block:ifphotosetcarousel} | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Photoset} | |
{block:Audio} | |
<div class="audio"> | |
{block:AlbumArt} | |
<img src="{AlbumArtURL}" class="albumart"></img> | |
{/block:AlbumArt} | |
<div class="audio-info"> | |
{block:AudioPlayer} | |
<div class="audioplayer"> | |
{AudioPlayerBlack} | |
</div> | |
{/block:AudioPlayer} | |
{block:Artist} | |
<div class="artist"> | |
Artist: {Artist} | |
</div> | |
{/block:Artist} | |
{block:Album} | |
<div class="album"> | |
Album: {album} | |
</div> | |
{/block:Album} | |
{block:TrackName} | |
<div class="track-name"> | |
Song: {TrackName} | |
</div> | |
{/block:TrackName} | |
</div> | |
</div> | |
{block:Caption} | |
<div class="desc"> | |
{Caption} | |
</div> | |
{/block:Caption} | |
{/block:Audio} | |
</div> | |
{block:Date} | |
{block:More} | |
<a href="{Permalink}">{lang:Read more}</a> | |
{/block:More} | |
<div class="metadata"> | |
{block:Text} | |
<span class="posts-type entypo-feather"></span> | |
{/block:Text} | |
{block:Quote} | |
<span class="posts-type entypo-quote"></span> | |
{/block:Quote} | |
{block:Photo} | |
<span class="posts-type entypo-picture"></span> | |
{/block:Photo} | |
{block:Panorama} | |
<span class="posts-type entypo-picture"></span> | |
{/block:Panorama} | |
{block:Photoset} | |
<span class="posts-type entypo-picture"></span> | |
{/block:Photoset} | |
{block:Link} | |
<span class="posts-type entypo-link"></span> | |
{/block:Link} | |
{block:Chat} | |
<span class="posts-type entypo-chat"></span> | |
{/block:Chat} | |
{block:Audio} | |
<span class="posts-type entypo-note-beamed"></span> | |
{/block:Audio} | |
{block:Video} | |
<span class="posts-type entypo-video"></span> | |
{/block:Video} | |
{block:Answer} | |
<span class="posts-type entypo-help"></span> | |
{/block:Answer} | |
<div class="other"> | |
<a href="{ReblogURL}"><span class="entypo-retweet"></span></a> | |
<a href="{Permalink}"> | |
<span class="entypo-calendar"> | |
{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes} | |
</span> | |
</a> | |
{block:RebloggedFrom} | |
<a href="{ReblogParentURL}"> | |
<span class="entypo-flow-cascade"> | |
{ReblogParentTitle} | |
</span> | |
</a> | |
{block:RebloggedFrom} | |
{block:NoteCount} | |
<a href="{Permalink}#notes"> | |
<span>{NoteCount} {lang:Notes}</span> | |
</a> | |
{block:NoteCount} | |
{block:HasTags} | |
<div class="tags"> | |
<span class="entypo-tag"></span> | |
{block:Tags} | |
<a href="{TagURL}">{Tag}</a> | |
{/block:Tags} | |
</div> | |
{/block:HasTags} | |
</div> | |
</div> | |
{/block:Date} | |
{block:PostNotes} | |
<div class="notes"> | |
<a name="notes">{PostNotes}</a> | |
</div> | |
{/block:PostNotes} | |
</div> | |
{/block:Posts} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment