Last active
December 16, 2015 00:19
-
-
Save hasenj/5347249 to your computer and use it in GitHub Desktop.
Clean Tumblr theme that only supports Text and Link posts, with LiveFyre for comments. Uses bootstrap and a few fonts from Google Web Fonts. Includes support for automagically fixing Arabic text to run from right-to-left.
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
| <html> | |
| <head> | |
| <title>{Title}</title> | |
| <link | |
| href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" | |
| rel="stylesheet"> | |
| <meta name="text:LiveFyreSiteID" content=""/> | |
| <link rel="shortcut icon" href="{Favicon}"> | |
| <link rel="alternate" type="application/rss+xml" href="{RSS}"> | |
| {block:Description} | |
| <meta name="description" content="{MetaDescription}"> | |
| {/block:Description} | |
| <link href='http://fonts.googleapis.com/css?family=Noto+Serif:400,700|Noto+Sans:400,700,400italic|Felipa' | |
| rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/earlyaccess/amiri.css' | |
| rel='stylesheet' type='text/css'> | |
| <style type="text/css"> | |
| h1, h2, h3, h4 { | |
| font-family: 'Noto Serif', 'Amiri', serif; | |
| font-weight: normal; | |
| } | |
| a { | |
| color: hsl(214, 50%, 50%); | |
| } | |
| /* blog name at the top */ | |
| h1.main { | |
| color: hsl(204, 10%, 90%); | |
| text-shadow: 0px 1px 1px hsl(0, 0%, 82%); | |
| text-align: center; | |
| font-family: Felipa, 'Noto Serif', 'Amiri', serif; | |
| font-size: 40pt; | |
| line-height: 50pt; | |
| margin-top: -5pt; | |
| } | |
| h1.main a { | |
| color: inherit; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| /* Links to static pages on top of index page */ | |
| div.pages { | |
| text-align: center; | |
| } | |
| div.pages div.sep { | |
| margin: auto 10px; | |
| } | |
| div.pages div.sep:last-child { | |
| display: none; | |
| } | |
| /* post title on index page */ | |
| h3.link, h3.post { | |
| padding: 5px 3px; | |
| margin: 0px; | |
| color: hsl(200, 10%, 10%); | |
| } | |
| h3.post { | |
| font-size: 18pt; | |
| } | |
| h3.post a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| h3.link { | |
| font-size: 12pt; | |
| font-weight: normal; | |
| } | |
| /* post content on permalink page */ | |
| div.content { | |
| font-family: 'Noto Sans', sans; | |
| } | |
| div.content p, div.content li { | |
| font-size: 11pt; | |
| line-height: 22pt; | |
| } | |
| div.content p { | |
| margin-top: 8pt; | |
| margin-bottom: 10pt; | |
| } | |
| div.content h1, div.content h2, div.content h3, div.content h4 { | |
| margin-top: 36pt; | |
| margin-bottom: 10pt; | |
| } | |
| span.date { /* on index page */ | |
| font-size: 10pt; | |
| color: hsl(24, 70%, 66%); | |
| display: inline-block; | |
| padding-top: 17px; | |
| } | |
| p.date { /* on post (permalink) page */ | |
| font-size: 11pt; | |
| color: hsl(24, 70%, 70%); | |
| } | |
| div.tags { /* tags on permalink page */ | |
| font-size: 10pt; | |
| } | |
| a.tag { | |
| color: hsl(204, 60%, 60%); | |
| font-size: 10pt; | |
| } | |
| .ib { | |
| display: inline-block; | |
| } | |
| /* pagination stuff */ | |
| div.pagination { | |
| text-align: center; /* center the pagination widgets */ | |
| } | |
| div.pagination a { | |
| color: hsl(220, 60%, 60%); | |
| } | |
| /* bootstrap's code style sucks for blogs; fix it */ | |
| pre, code, pre code { | |
| background-color: inherit; | |
| border: none; | |
| color: hsl(100, 10%, 38%); | |
| font-size: 10.6pt; | |
| line-height: 18pt; | |
| direction: ltr; | |
| text-align: left; | |
| } | |
| </style> | |
| <!-- auto handle bidi (fix direction/text-align for posts in Arabic) --> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/15952958/bidiweb.js"> </script> | |
| <script type="text/javascript"> | |
| jQuery(document).ready( function() { | |
| bidiweb.doit_css('.content > *, h2.title, .index_page h3'); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| .rtl { | |
| direction: rtl; | |
| text-align: right; | |
| } | |
| .index_page h3.rtl { | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| I'm dividing this theme into 2 parts (think of them as templates/partials/views): | |
| 1. The main page (IndexPage) | |
| Just lists entries along with date | |
| 2. Article page (PermalinkPage) | |
| Shows title, content, tags, comments/discussion | |
| I'm only doing text and link pages; at least for now. | |
| Too lazy to do pictures/video posts; I never even use them. | |
| There's also a header (blog title) that's always present on all pages. | |
| --> | |
| <div class="container" style="max-width: 720px"> | |
| <section name="header"> | |
| <h1 class="main"><a href="/">{Title}</a></h1> | |
| {block:Description} | |
| <p id="description">{Description}</p> | |
| {/block:Description} | |
| </section> | |
| <!-- the main page --> | |
| {block:IndexPage} | |
| <div class="index_page"> | |
| {block:HasPages} | |
| <div class="pages"> | |
| {block:Pages} | |
| <div class="page ib"> | |
| <a href="{URL}">{Label}</a> | |
| </div> | |
| <div class="sep ib"> | |
| • | |
| </div> | |
| {/block:Pages} | |
| </div> | |
| {/block:HasPages} | |
| <!-- tag search pages are also index pages, but we need to show a header on them | |
| that indicates we're searching for a tag --> | |
| {block:TagPage} | |
| <div class="row-fluid"> | |
| <div class="offset2 span4"> | |
| <p class="lead"> Posts tagged '{Tag}' <p> | |
| </div> | |
| </div> | |
| {/block:TagPage} | |
| <section name="post_listing"> | |
| {block:Posts} | |
| <div class="row-fluid"> | |
| <div class="span2"> | |
| {block:Date} | |
| <span class="date pull-right"> | |
| {DayOfMonthWithZero}.{MonthNumberWithZero}.{Year} | |
| </span> | |
| {/block:Date} | |
| </div> | |
| <div class="span9"> | |
| <!-- Here we display the title --> | |
| <!-- for text pages, it's {Title}, for link pages it's {Name} --> | |
| {block:Text} | |
| {block:Title} | |
| <h3 class="post"><a href="{Permalink}">{Title}</a></h3> | |
| {/block:Title} | |
| {/block:Text} | |
| {block:Link} | |
| <h3 class="post ib"> | |
| <a href="{Permalink}">{Name}</a> | |
| </h3> | |
| <h3 class="link ib"> | |
| [ <a class="ib" href="{URL}" target="_blank">link</a> ] | |
| </h3> | |
| {/block:Link} | |
| </div> | |
| </div> | |
| {/block:Posts} | |
| </section> | |
| <section name="pagination"> | |
| <div class="pagination"> | |
| <ul> | |
| {block:PreviousPage} | |
| <li><a href="{PreviousPage}">«</a></li> | |
| {/block:PreviousPage} | |
| {block:JumpPagination length="8"} | |
| {block:CurrentPage} | |
| <li class="active"><a href="{URL}">{PageNumber}</a></li> | |
| {/block:CurrentPage} | |
| {block:JumpPage} | |
| <li><a href="{URL}">{PageNumber}</a></li> | |
| {/block:JumpPage} | |
| {/block:JumpPagination} | |
| {block:NextPage} | |
| <li><a href="{NextPage}">»</a></li> | |
| {/block:NextPage} | |
| </ul> | |
| </div> | |
| </section> | |
| </div> | |
| {/block:IndexPage} | |
| {block:PermalinkPage} | |
| <div class="permalink_page"> | |
| {block:Posts} | |
| <!-- | |
| Display the following elements, stack vertically: | |
| - Title | |
| - Metadata: date, tags, source, etc. | |
| - Content | |
| - permalink link | |
| - Comments/Discussions | |
| --> | |
| <section name="title"> | |
| {block:Text} | |
| <h2 class="title post">{Title}</h2> | |
| {/block:Text} | |
| {block:Link} | |
| <h2 class="title link"> | |
| Link: <a href="{URL}">{Name}</a> | |
| </h2> | |
| {/block:Link} | |
| </section> | |
| <section name="metadata"> | |
| {block:Date} | |
| <p class="date ib"> | |
| {DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} | |
| {12HourWithZero}:{Minutes} {AmPm} | |
| ({TimeAgo}) | |
| </p> | |
| {/block:Date} | |
| {Block:HasTags} | |
| <div class="tags ib"> | |
| {block:Tags} | |
| <a class="tag ib" href="{TagURL}">{Tag}</a> | |
| {/block:Tags} | |
| </div> | |
| {/Block:HasTags} | |
| {block:ContentSource} | |
| <div class="tags"> | |
| <em>from: <a href="{SourceURL}" target="_blank">{SourceUrl}</a></em> | |
| </div> | |
| {/block:ContentSource} | |
| {block:RebloggedFrom} | |
| <div class="tags"> | |
| <em> | |
| via | |
| <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a> | |
| </em> | |
| </div> | |
| {/block:RebloggedFrom} | |
| </section> | |
| <section name="content"> | |
| <div class="content"> | |
| {block:Text} | |
| {Body} | |
| {/block:Text} | |
| {block:Link} | |
| {Description} | |
| {/block:Link} | |
| </div> | |
| </section> | |
| <section name="permalink"> | |
| <p> | |
| <a class="tag" href="{Permalink}">permalink</a> | |
| <br> | |
| <p> | |
| </section> | |
| <section name="comments"> | |
| {block:Date} <!-- ugly hack to hide comments from static pages --> | |
| <!-- Although we use an if statement below `if(articleId)` | |
| we still need this hack to hide the header "Discussion/Comments" | |
| from the page --> | |
| {block:IfLiveFyreSiteID} | |
| <hr> | |
| <h2>Discussion/Comments:</h2> | |
| <!-- START: Livefyre Embed --> | |
| <div id="livefyre-comments"></div> | |
| <script type="text/javascript" | |
| src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| (function () { | |
| var articleId = "{PostID}"; | |
| if(articleId) { // so it doesn't show up on static pages | |
| fyre.conv.load({}, [{ | |
| el: 'livefyre-comments', | |
| network: "livefyre.com", | |
| siteId: Number('{text:LiveFyreSiteID}'), | |
| articleId: articleId, | |
| signed: false, | |
| collectionMeta: { | |
| articleId: articleId, | |
| url: fyre.conv.load.makeCollectionUrl() | |
| }}], function() {}); | |
| } | |
| }()); | |
| </script> | |
| <!-- END: Livefyre Embed --> | |
| {/block:IfLiveFyreSiteID} | |
| {block:Date} | |
| </section> | |
| {/block:Posts} | |
| </div> | |
| {/block:PermalinkPage} | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment