Last active
September 8, 2022 16:25
-
-
Save tantek/ac27fb0f28c41c4fb2a7 to your computer and use it in GitHub Desktop.
Tantek's IndieWeb Tumblr Theme from tantek.tumblr.com with microformats2 h-entry
This file contains 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> | |
| <!-- DEFAULT COLORS --> | |
| <meta name="color:Background" content="#fff"/> | |
| <meta name="color:Title" content="#444"/> | |
| <meta name="color:Description" content="#777"/> | |
| <meta name="color:Post Title" content="#6498cc"/> | |
| <meta name="color:Text" content="#444"/> | |
| <meta name="color:Inline Link" content="#6498cc"/> | |
| <meta name="color:Quote" content="#888"/> | |
| <meta name="color:Quote Border" content="#6498cc"/> | |
| <meta name="color:Quote Source" content="#555"/> | |
| <meta name="color:Link Post" content="#c00"/> | |
| <meta name="color:Conversation Background 1" content="#f4f4f4"/> | |
| <meta name="color:Conversation Background 2" content="#e8e8e8"/> | |
| <meta name="color:Conversation Border" content="#bbb"/> | |
| <meta name="color:Conversation Text" content="#444"/> | |
| <meta name="color:Date" content="#ccc"/> | |
| <meta name="color:Date Block" content="#B8B4EE"/> | |
| <meta name="color:Date Block Text" content="#bbd5f1"/> | |
| <!-- END DEFAULT COLORS --> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title> | |
| <link rel="icon" href="{Favicon}"/> | |
| <link rel="author" href="http://yourwebsite.example.com/"> | |
| <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> | |
| <meta name="viewport" content="width=800"/> <!-- iPhone --> | |
| <style type="text/css"> | |
| body { | |
| margin: 0px; | |
| background-color: {color:Background}; | |
| font-family: 'Lucida Grande', Helvetica, sans-serif; | |
| } | |
| a { | |
| color: {color:Inline Link}; | |
| } | |
| h1 { | |
| width: 600px; | |
| padding: 0px 100px 20px 100px; | |
| margin: 50px auto 40px auto; | |
| border-bottom: solid 1px #ccc; | |
| text-align: center; | |
| font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif; | |
| letter-spacing: -2px; | |
| line-height: 50px; | |
| position: relative; | |
| } | |
| h1 a { | |
| color: {color:Title}; | |
| text-decoration: none; | |
| } | |
| h1 img { | |
| border-width: 0px; | |
| position: absolute; | |
| right: 0px; | |
| bottom: 10px; | |
| width: 43px; | |
| height: 23px; | |
| } | |
| div#content { | |
| width: 420px; | |
| margin: auto; | |
| position: relative; | |
| } | |
| div#content div#description { | |
| position: absolute; | |
| right: -170px; | |
| width: 160px; | |
| text-align: right; | |
| } | |
| div#description { | |
| font: normal 17px Helvetica,sans-serif; | |
| line-height: 20px; | |
| color: {color:Description}; | |
| } | |
| div#description a { | |
| color: {color:Description}; | |
| } | |
| div#searchresultcount { | |
| margin: 15px 0 30px; | |
| text-align: center; | |
| } | |
| div.post { | |
| position: relative; | |
| margin-bottom: 40px; | |
| padding-right: 20px; | |
| } | |
| div.post div.date { | |
| position: absolute; | |
| left: -260px; | |
| text-align: right; | |
| width: 230px; | |
| white-space: nowrap; | |
| font: normal 34px Helvetica, sans-serif; | |
| letter-spacing: -2px; | |
| color: {color:Date}; | |
| text-transform: uppercase; | |
| line-height: 35px; | |
| } | |
| div.post div.date div.date_brick { | |
| float: right; | |
| height: 30px; | |
| width: 45px; | |
| background-color: {color:Date Block}; | |
| color: {color:Date Block Text}; | |
| font: Bold 12px Verdana, Sans-Serif; | |
| text-align: center; | |
| line-height: 12px; | |
| margin-left: 10px; | |
| padding-top: 5px; | |
| letter-spacing: 0px; | |
| overflow: hidden; | |
| } | |
| div.post img.permalink { | |
| width: 14px; | |
| height: 13px; | |
| border-width: 0px; | |
| background-color: #000; | |
| display: none; | |
| position: absolute; | |
| right: 0px; | |
| top: 0px; | |
| z-index: 10; | |
| } | |
| div.post:hover img.permalink { | |
| display: inline; | |
| } | |
| div.post h2 { | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: {color:Post Title}; | |
| letter-spacing: -1px; | |
| margin: 0px 0px 5px 0px; | |
| } | |
| div.post h2 a { | |
| color: {color:Post Title}; | |
| text-decoration: none; | |
| } | |
| div.post div.caption { | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: {color:Text}; | |
| margin-top: 10px; | |
| padding: 0px 20px 0px 20px; | |
| } | |
| div.post div.caption a { | |
| color: {color:Text}; | |
| } | |
| /* Regular Post */ | |
| div.post div.regular { | |
| font-size: 12px; | |
| color: {color:Text}; | |
| line-height: 17px; | |
| } | |
| div.post div.regular blockquote { | |
| font-style: italic; | |
| border-left: solid 2px {color:Text}; | |
| padding-left: 10px; | |
| } | |
| /* Quote Post */ | |
| div.post div.quote div.quote_text { | |
| font-family: Helvetica, sans-serif; | |
| font-weight: bold; | |
| color: {color:Quote}; | |
| border-left: solid 5px {color:Quote Border}; | |
| padding-left: 10px; | |
| } | |
| div.post div.quote div.quote_text span.short { | |
| font-size: 36px; | |
| line-height: 40px; | |
| letter-spacing: -1px; | |
| } | |
| div.post div.quote div.quote_text span.medium { | |
| font-size: 25px; | |
| line-height: 27px; | |
| letter-spacing: -1px; | |
| } | |
| div.post div.quote div.quote_text span.long { | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| div.post div.quote div.quote_text a { | |
| color: {color:Quote}; | |
| } | |
| div.post div.quote div.source { | |
| font-size: 16px; | |
| font-weight: Bold; | |
| color: {color:Quote Source}; | |
| margin-top: 5px; | |
| } | |
| div.post div.quote div.source a { | |
| color: {color:Quote Source}; | |
| } | |
| /* Link Post */ | |
| div.post div.link a.link { | |
| font: Bold 20px Helvetica, sans-serif; | |
| letter-spacing: -1px; | |
| color: {color:Link Post}; | |
| } | |
| div.post div.link span.description { | |
| font-size: 13px; | |
| font-weight: normal; | |
| letter-spacing: -1px; | |
| color: {color:Text}; | |
| } | |
| /* Conversation Post */ | |
| div.post div.conversation ul { | |
| list-style-type: none; | |
| margin: 0px; | |
| padding: 0px 0px 0px 1px; | |
| border-left: solid 5px {color:Conversation Border}; | |
| } | |
| div.post div.conversation ul li { | |
| font-size: 12px; | |
| padding: 4px 10px 4px 8px; | |
| color: {color:Conversation Text}; | |
| margin-bottom: 1px; | |
| } | |
| div.post div.conversation ul li span.label { | |
| font-weight: bold; | |
| } | |
| div.post div.conversation ul li span.user_1 { | |
| color: #c00; | |
| } | |
| div.post div.conversation ul li span.user_2 { | |
| color: #00c; | |
| } | |
| div.post div.conversation ul li span.user_3 { | |
| color: #0a0; | |
| } | |
| div.post div.conversation ul li.odd { | |
| background-color: {color:Conversation Background 1}; | |
| } | |
| div.post div.conversation ul li.even { | |
| background-color: {color:Conversation Background 2}; | |
| } | |
| /* Video Post */ | |
| div.post div.video { | |
| width: 400px; | |
| margin: auto; | |
| } | |
| /* Footer */ | |
| div#footer { | |
| margin: 40px 0px 30px 0px; | |
| text-align: center; | |
| font-size: 15px; | |
| font-weight: bold; | |
| color: {color:Text}; | |
| } | |
| div#footer a { | |
| text-decoration: none; | |
| color: {color:Text}; | |
| } | |
| div#footer a:hover { | |
| text-decoration: underline; | |
| } | |
| div#footer div#credit { | |
| font: normal 13px Georgia, serif; | |
| font-size: 13px; | |
| margin-top: 15px; | |
| } | |
| .query { font-weight: bold; } | |
| /* Custom CSS */ | |
| {CustomCSS} | |
| </style> | |
| <style type="text/css"> | |
| span.dth { display:none } | |
| .published span.value { display:block } | |
| div.post div.date div.date_brick { height: 41px; width:66px; background:#ccc; color:#999} | |
| span.when { font-size:.8em } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| <a href="/">{Title}</a> | |
| </h1> | |
| <div id="content"> | |
| <div id="description"> | |
| <div> | |
| <div id="search"> | |
| <form action="/search" method="get"> | |
| <input type="text" name="q" value="{SearchQuery}"/> | |
| <input type="submit" value="Search"/> | |
| </form> | |
| </div> | |
| {Description} | |
| <p><a href="/archive">Archive</a></p> | |
| </div> | |
| </div> | |
| {block:SearchPage} | |
| <div id="searchresultcount"> | |
| <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p> | |
| </div> | |
| {/block:SearchPage} | |
| {block:Posts} | |
| <div class="post h-entry hentry"> | |
| {block:NewDayDate} | |
| <div class="date"> | |
| <div class="date_brick dt-published published"> | |
| <span class="value">{Year}<span class="dth">-</span><br/>{MonthNumberWithZero}-{DayOfMonthWithZero}</span> | |
| <span class="value when">{24HourWithZero}:{Minutes}:{Seconds}</span> | |
| </div> | |
| {ShortDayOfWeek} | |
| </div> | |
| {/block:NewDayDate} | |
| {block:SameDayDate} | |
| <div class="date"> | |
| <div class="date_brick dt-published published"> | |
| <span class="value">{Year}<span class="dth">-</span><br/>{MonthNumberWithZero}-{DayOfMonthWithZero}</span> | |
| <span class="value when">{24HourWithZero}:{Minutes}:{Seconds}</span> | |
| </div> | |
| </div> | |
| {/block:SameDayDate} | |
| <a rel="bookmark" class="u-url" href="{Permalink}"><img src="/themes/5/permalink.gif" | |
| class="permalink" alt="permalink"/></a> | |
| {block:Regular} | |
| <div class="regular"> | |
| {block:Title}<h2 class="p-name entry-title"><a href="{Permalink}">{Title}</a></h2>{/block:Title} | |
| <div class="e-content entry-content">{Body}</div> | |
| </div> | |
| {/block:Regular} | |
| {block:Photo} | |
| <div class="photo e-content entry-content"> | |
| {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div> | |
| {/block:Photo} | |
| {block:Quote} | |
| <div class="quote"> | |
| <div class="quote_text"><span class="{Length}">{Quote}</span></div> | |
| {block:Source} | |
| <div class="source">— {Source}</div> | |
| {/block:Source} | |
| </div> | |
| {/block:Quote} | |
| {block:Link} | |
| <div class="link"> | |
| <a href="{URL}" class="link" {Target}>{Name}</a> | |
| {block:Description} | |
| <span class="description">{Description}</span> | |
| {/block:Description} | |
| </div> | |
| {/block:Link} | |
| {block:Conversation} | |
| <div class="conversation"> | |
| {block:Title} | |
| <h2><a href="{Permalink}">{Title}</a></h2> | |
| {/block:Title} | |
| <ul> | |
| {block:Lines} | |
| <li class="{Alt}"> | |
| {block:Label} | |
| <span class="label user_{UserNumber}">{Label}</span> | |
| {/block:Label} | |
| {Line} | |
| </li> | |
| {/block:Lines} | |
| </ul> | |
| </div> | |
| {/block:Conversation} | |
| {block:Audio} | |
| <div class="audio"> | |
| {AudioPlayerBlack} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div> | |
| {/block:Audio} | |
| {block:Video} | |
| <div class="video"> | |
| {Video-400} | |
| {block:Caption} | |
| <div class="caption">{Caption}</div> | |
| {/block:Caption} | |
| </div> | |
| {/block:Video} | |
| </div> | |
| {/block:Posts} | |
| <div id="footer"> | |
| {block:PreviousPage} | |
| <a href="{PreviousPage}">« Previous</a> | |
| {/block:PreviousPage} | |
| {block:NextPage} | |
| <a href="{NextPage}">Next »</a> | |
| {/block:NextPage} | |
| <div id="credit"> | |
| Powered by <a href="http://www.tumblr.com/" | |
| target="_blank">Tumblr</a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment