Skip to content

Commit

Permalink
Convert guide to Bootstrap 3
Browse files Browse the repository at this point in the history 
- Remove most of the CSS and use Bootstrap's
- Add the bootstrap minimized CSS
- HTML 5 instead of XHTML
  • Loading branch information
@ehamberg
ehamberg committed Jun 3, 2014
1 parent 622a953 commit 57b8eac
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 191 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Expand Up @@ -9,4 +9,4 @@ all:
| sed ':a;N;$$!ba;s/\^\^\([^\^]*\)\^\^/<span class="action">\1<\/span>/g'\
| sed ':a;N;$$!ba;s/!!\([^!]*\)!!/<span class="context">\1<\/span>/g'\
| sed ':a;N;$$!ba;s/~~\([^~]*\)~~/<span class="calendar">\1<\/span>/g'\
| pandoc -S -s --toc --template=$(TEMPLATE) -c $(CSS) -o $(TARGET)
| pandoc -S -s --toc --template=$(TEMPLATE) -c src/bootstrap.min.css -c $(CSS) -o $(TARGET)
7 changes: 7 additions & 0 deletions src/bootstrap.min.css
View file

Large diffs are not rendered by default.

158 changes: 20 additions & 138 deletions src/lyagtd.css
View file
@@ -1,161 +1,43 @@
/* vim: set ts=4 sw=4 et tw=80 ai: */
html {
background-color: white;
color: #002b3d;
font-size: 0.90em;
line-height: 1.5em;
}

body {
margin: auto;
padding: 0;
width: 780px;
text-align: justify;
}

table {
width: 100%;
}

th {
padding-bottom: 0.5em;
}

td {
padding: 0 0.3em 0 1em;
}

a {
color: #002b3d;
text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
color: #002b3d;
line-height: 1.2em;
clear: both;
h1.mainTitle {
text-align: center;
margin-bottom: 1em;
}

h1 {
font-size: 1.8em;
border-bottom: 2px solid #002b3d;
margin-top: 1.5em;
letter-spacing: 0.025em;
text-transform: uppercase;
text-shadow: 2px 2px 2px #bbb;
}

h1 a {
text-decoration: none;
text-align: start;
}

img {
float: right;
margin-left: 1em;
}

div.figure {
text-align: center;
color: #444;
max-width: 100%;
height: auto;
float: right;
}

div.figure p {
margin-top: 0;
div.fullwidth img {
float: none;
}

div.figure img {
float: none;
padding: 5px;
margin: auto;
border: 1px solid black;
border-radius: 0.5em;
}

div.topheader {
text-align: center;
font-family: 'Droid Sans', arial, serif;
font-weight: bold;
font-size: 3.2em;
text-shadow: 4px 4px 4px #bbb;
line-height: 1.5em;
margin-bottom: 1em;
}

div.important {
padding: 0.5em;
background-color: #ffefef;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
border-radius: 0.5em;
}

div.remember {
padding-left: 1.0em;
padding-right: 1.0em;
margin-left: 1em;
background-color: #e0ffe0;
float: right;
width: 30%;
border: 1px solid black;
border-radius: 0.5em;
}

div.example {
margin-left: auto;
margin-right: auto;
padding: 0.5em;
background-color: #e0ffe0;
width: 80%;
border: 1px solid black;
border-radius: 0.5em;
p.caption {
font-style: italic;
text-align: center;
}

span.calendar {
background-color: #ffd0d0;
padding: 0 0.2em 0 0.2em;
background-color: #ffd0d0;
padding: 0 0.2em 0 0.2em;
}

span.listname {
background-color: #ffd0ff;
padding: 0 0.2em 0 0.2em;
background-color: #ffd0ff;
padding: 0 0.2em 0 0.2em;
}

span.context {
background-color: #d0ffd0;
padding: 0 0.2em 0 0.2em;
background-color: #d0ffd0;
padding: 0 0.2em 0 0.2em;
}

span.action {
padding: 0 0.2em 0 0.2em;
background-color: #d0d0ff;
}

div.toc {
float: left;
width: 300px;
padding: 0.5em 1em;
background-color: #e0e0ff;
border-radius: 0.5em;
}

div.toc h2 {
text-align: center;
}

div.headerimg {
float: right;
width: 440px;
}

div.headerimg img {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}

div.header {
overflow: auto;
padding: 0 0.2em 0 0.2em;
background-color: #d0d0ff;
}
7 changes: 4 additions & 3 deletions src/lyagtd.markdown
View file
Expand Up @@ -195,10 +195,10 @@ It is common to prefix contexts with an '@' which makes sense when the context
is a location, but should just be thought of as a notation in other cases.
Examples of contexts are !!@ home!!, !!@ computer!!, and !!@ office!!.

<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-12">
### Examples of actions and their contexts

<div class="example">
<table>
<table class="table table-bordered">
<tr>
<th>Action</th>
<th>Context</th>
Expand All @@ -217,6 +217,7 @@ Examples of contexts are !!@ home!!, !!@ computer!!, and !!@ office!!.
</tr>
</table>
</div>
</div>

How many contexts you need depend on how many next actions you will have and
how your work day looks like. The important thing is to be able to assess--at
Expand Down
103 changes: 54 additions & 49 deletions src/lyagtd.template
View file
@@ -1,29 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html lang="en">
<head>
<title>$if(title-prefix)$$title-prefix$ - $endif$$if(pagetitle)$$pagetitle$$endif$</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="pandoc">
$for(author)$
<meta name="author" content="$author$" />
<meta name="author" content="$author$">
$endfor$
$if(date)$
<meta name="date" content="$date$" />
$endif$
$if(highlighting-css)$
<style type="text/css">
$highlighting-css$
</style>
$endif$
$for(css)$
<link rel="stylesheet" href="$css$" type="text/css" />
<link rel="stylesheet" href="$css$" type="text/css">
$endfor$
$if(math)$
$math$
$endif$
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Droid Serif', serif;
Expand All @@ -43,43 +40,51 @@ $endif$
$for(include-before)$
$include-before$
$endfor$
$if(title)$
<div class="topheader">$title$</div>
$endif$
<div class="header">
<div class="headerimg">
<img src="images/slinky.png" alt="welcome!" />
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 text-center">
<h1 class="mainTitle">$title$</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 col-xs-12">
<h2>Table of contents</h2>
$toc$
</div>
<div class="col-md-4 hidden-xs">
<img src="images/slinky.svg" alt="welcome!">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 text-justify">
$body$
$for(include-after)$
$include-after$
$endfor$
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<a href="http://flattr.com/thing/123775/GTD-in-15-Minutes" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this"></a>
<g:plusone size="small" annotation="inline"></g:plusone>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'ehamberg';
var disqus_identifier = 'gtdguide';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</div>
<div class="toc">
<h2>Table of contents</h2>
$if(toc)$
$toc$
$endif$
</div>
</div>
$body$
$for(include-after)$
$include-after$
$endfor$

<hr style='border: 1px solid black;' />

<a href="http://flattr.com/thing/123775/GTD-in-15-Minutes" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a>

<g:plusone size="small" annotation="inline"></g:plusone>

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'ehamberg';
var disqus_identifier = 'gtdguide';

(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</body>
</html>

0 comments on commit 57b8eac

Please sign in to comment.