<!DOCTYPE html>
<html>
<head>
<!--
By Josh Hughes (josh@josh-hughes.com). Feedback is welcome!
INSTALLATION:
Where you should place this file depends on your version of OmniFocus, and where you bought it:
- OmniFocus 3 (Direct): ~/Library/Containers/com.omnigroup.OmniFocus3/Data/Library/Application Support/OmniFocus
- OmniFocus 3 (Mac App Store): ~/Library/Containers/com.omnigroup.OmniFocus3.MacAppStore/Data/Library/Application Support/OmniFocus
- OmniFocus 2 (Direct): ~/Library/Containers/com.omnigroup.OmniFocus2/Data/Library/Application Support/OmniFocus
- OmniFocus 2 (Mac App Store): ~/Library/Containers/com.omnigroup.OmniFocus2.MacAppStore/Data/Library/Application Support/OmniFocus
-->
<meta charset="utf-8" />
<style type="text/css">
*,
*:after,
*:before {
box-sizing: border-box;
}
html {
font-size: 10px; /* Increasing/Decreasing this affects whole interface */
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.2;
padding: 2rem;
}
h1 { /* Page title */
font-size: 3rem;
font-weight: 800;
margin: 0 0 2rem 0;
}
h2 { /* Projects */
font-size: 1.6rem;
}
h2.folder { /* Folders */
border-bottom: 4px solid #f5f5f5;
font-size: 2rem;
font-weight: 700;
padding-bottom: 0.3rem;
}
h3 { /* Subheadings (like Forecast's Due/Deferred/Tagged) */
font-size: 1.4rem;
}
h4 { /* Action Titles */
font-size: 1.3rem;
font-weight: 400;
margin: 0 0 0.4rem 0;
}
h4.projecttitle {
font-weight: 600;
}
.actionlist {
list-style: none;
margin: 0;
padding: 0;
}
.action ~ .actionlist { /* Indicates a subtask */
padding-left: 4.2rem;
}
.action {
display: grid;
grid-gap: 1rem;
grid-template-columns: 3.2rem 1fr;
margin: 0 0 1rem 0;
position: relative;
}
.action:before {
border: 0.4rem solid #d9d9d9;
border-radius: 50%;
content: ' ';
display: inline-block;
height: 3.2rem;
width: 3.2rem;
}
.action.completed:before {
background: #d9d9d9;
}
.action.completed:after {
border-bottom: 0.6rem solid #565656;
border-left: 0.6rem solid #565656;
content: ' ';
height: 1.2rem;
left: 0.8rem;
position: absolute;
top: 0.7rem;
transform: rotate(-45deg);
width: 2.2rem;
}
.action.completed .dates {
display: none; /* Not the completion date, so not terribly relevant */
}
.context,
.count,
.printdate,
.projectcount {
color: #999;
font-size: 1.1rem;
font-weight: 600;
}
.context {
color: #808080;
display: inline-block;
font-size: 1.1rem;
font-weight: 600;
margin-right: 0.5rem;
}
.context .tag {
background: #e6e6e6;
border: 1px solid #e6e6e6;
border-radius: 0.7rem;
display: inline-block;
margin-right: 0.5rem;
margin-top: -1px;
padding: 0.1rem 0.7rem;
}
span.context {
display: none; /* dot separator */
}
.count,
.printdate {
display: block;
margin-top: 0.1rem;
}
.dates {
color: #999;
float: right;
font-size: 1.1rem;
padding-top: 0.2rem;
}
.project {
color: #666;
display: inline-block;
font-size: 1.1rem;
margin-right: 0.5rem;
padding-top: 0.2rem;
}
.notes {
clear: both;
color: #666;
font-size: 1.1rem;
padding-top: 0.4rem;
}
.notes p {
margin: 0 0 1rem 0;
}
@media print {
@page {
margin: 0;
padding: 0;
}
li {
page-break-inside: avoid;
}
h2.folder {
border-color: #ccc;
}
.count,
.printdate,
.context,
.context .tag,
.dates,
.project,
.notes {
color: #666;
}
.context .tag {
background: none;
border-color: #ccc;
}
}
</style>
<style type="text/css" media="print">
body {
padding: 0;
}
h2 {
page-break-inside: avoid;
page-break-after: avoid;
}
</style>
</head>
<body>
<!--$BODY-->
<script>
// Remove 'OmniFocus: ' from title (probably unnecessary for a print out)
var title = document.querySelector('#docheader h1');
title.innerHTML = title.innerHTML.replace('OmniFocus: ', '');
// Add class to folders
var headings = document.querySelectorAll('h2');
for (var i = 0; i < headings.length; i++) {
if (!headings[i].querySelector('.count')) {
headings[i].className = 'folder';
}
}
// Identify completed tasks
var checkmarks = document.querySelectorAll('.checkmark');
for (var i = 0; i < checkmarks.length; i++) {
var action = checkmarks[i].parentNode;
action.classList.add('completed');
action.removeChild(checkmarks[i]);
}
// Minor formatting for dates
var dates = document.querySelectorAll('.dates');
for (var i = 0; i < dates.length; i++) {
dates[i].textContent = dates[i].textContent.replace('→', ' → ');
}
// Add line breaks to notes
var notes = document.querySelectorAll('.notes p');
for (var i = 0; i < notes.length; i++) {
notes[i].innerHTML = notes[i].innerHTML.replace(/\n/g, '<br />');
}
// Split tags up by comma
var tags = document.querySelectorAll('.context');
for (var i = 0; i < tags.length; i++) {
tags[i].innerHTML = tags[i].innerHTML.replace(/([^,]+)[, ]*/g, '<span class="tag">$1</span>');
}
</script>
</body>
</html>