Re-do CSS.

I also add a few <section> tags, and added classes to a couple of <span>s.

I moved the dnd CSS to a separate file that is currently unused.  I assume
I'll add it back soon.

4 files changed, 215 insertions, 169 deletions

diff --git a/lib/page.rb b/lib/page.rb
index b349dc8..ebc123b 100644
--- a/lib/page.rb
+++ b/lib/page.rb
@@ -91,11 +91,11 @@ class Page
 	end
 	def index_link(cururl, depth)
 		# FIXME: This code is super gross.
-		ret = " * <span><a class=\"#{index_class}\" href=\"#{cururl.route_to(url)}\" title=\"Published on #{atom_published.strftime('%Y-%m-%d')}"
+		ret = " * <span class=link-main><a class=\"#{index_class}\" href=\"#{cururl.route_to(url)}\" title=\"Published on #{atom_published.strftime('%Y-%m-%d')}"
 		if atom_updated != atom_published
 			ret += " (updated on #{atom_updated.strftime('%Y-%m-%d')})"
 		end
-		ret += "\">#{atom_title}</a></span><span>"
+		ret += "\">#{atom_title}</a></span><span class=link-categories>"
 		atom_categories.each do |t|
 			ret += t.html
 		end
diff --git a/lib/page_index.rb b/lib/page_index.rb
index 43bf367..585fd57 100644
--- a/lib/page_index.rb
+++ b/lib/page_index.rb
@@ -57,7 +57,7 @@ class IndexPage < LocalPage
 	def index_link(cururl, depth)
 		ret = ''
 		unless depth <= 1
-			ret += "<h#{depth}>[#{atom_title}](#{cururl.route_to(url)})</h#{depth}>\n\n"
+			ret += "<section><h#{depth}>[#{atom_title}](#{cururl.route_to(url)})</h#{depth}>\n\n"
 		end
 		for page in index_pages.select{|page|not page.is_a?(IndexPage)}.sort_by{|page|page.atom_published}
 			ret += page.index_link(cururl, depth+1)
@@ -67,6 +67,9 @@ class IndexPage < LocalPage
 			ret += page.index_link(cururl, depth+1)
 		end
 		ret += "\n"
+		unless depth <= 1
+			ret += "</section>\n\n"
+		end
 		return ret.gsub(/\n\n+/, "\n\n")
 	end
 	def index_title
diff --git a/src/main-dnd.scss b/src/main-dnd.scss
new file mode 100644
index 0000000..712ae04
--- /dev/null
+++ b/src/main-dnd.scss
@@ -0,0 +1,68 @@
+body.dnd {
+	background: url(dnd/background.png) repeat-y;
+	background-size: 100%;
+
+	/* This bit mostly taken from the defaults of org-mode export */
+	article {
+		font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
+		font-size: 12pt;
+
+		table {
+			border-spacing: 0;
+			&, tr:last-child td, tr:last-child th {
+				border-bottom: solid 1px black;
+			}
+			&, tr:first-child td, tr:first-child th {
+				border-top: solid 1px black;
+			}
+			td, th {
+				padding: 6px;
+			}
+		}
+
+		p {	text-align: justify; }
+		.title  { text-align: center; }
+		.todo   { color: red; }
+		.done   { color: green; }
+		.target { }
+		.timestamp { color: #bebebe; }
+		.timestamp-kwd { color: #5f9ea0; }
+		.right  {margin-left:auto; margin-right:0px;  text-align:right;}
+		.left   {margin-left:0px;  margin-right:auto; text-align:left;}
+		.center {margin-left:auto; margin-right:auto; text-align:center;}
+		p.verse { margin-left: 3% }
+		pre {
+			border: 1pt solid #AEBDCC;
+			background-color: #F3F5F7;
+			padding: 5pt;
+			//font-family: courier, monospace;
+			font-size: 90%;
+			overflow:auto;
+		}
+		table { border-collapse: collapse; }
+		td, th { vertical-align: top;  }
+		th.right  { text-align:center;  }
+		th.left   { text-align:center;   }
+		th.center { text-align:center; }
+		td.right  { text-align:right;  }
+		td.left   { text-align:left;   }
+		td.center { text-align:center; }
+		dt { font-weight: bold; }
+		div.figure { padding: 0.5em; }
+		div.figure p { text-align: center; }
+		div.inlinetask {
+			padding:10px;
+			border:2px solid gray;
+			margin:10px;
+			background: #ffffcc;
+		}
+		textarea { overflow-x: auto; }
+		.linenr { font-size:smaller }
+		.code-highlighted {background-color:#ffff00;}
+		.org-info-js_info-navigation { border-style:none; }
+		#org-info-js_console-label { font-size:10px; font-weight:bold;
+									 white-space:nowrap; }
+		.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
+									   font-weight:bold; }
+	}
+}
diff --git a/src/main.scss b/src/main.scss
index d32d6ee..740f854 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -1,127 +1,118 @@
+@import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC);
+
 body {
 	margin: 0;
 	padding: 0;
-	font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
+	background: rgb(255,255,240);
+
+	font-family: 'Patrick Hand SC', sans-serif;
+	a {
+		text-decoration: none;
+		color: #1963b6;
+		&:hover, &:focus {
+			text-decoration: underline;
+		}
+		&:visited {
+			color: #460fb3;
+		}
+
+		&.external {
+			background-position: center right;
+			background-repeat: no-repeat;
+			background-image: url(external.svg);
+			background-size: 12px 12px;
+			padding-right: 13px;
+		}
+	}
 }
 
 header {
-	width: 100%;
+	width: 20%;
+	margin: 0 -50% 0 0;
+	float: left;
+
+	display: flex;
+	flex-direction: column;
+
+	text-align: center;
+
+	background-color: rgb(200,200,160);
 
 	h1 {
+		background-color: #ce795e;
+		padding: 0.5em 0;
 		margin: 0;
-		background-color: rgba(0, 0, 0, 0.6);
-		padding: 4px;
-		padding-bottom: 0;
-
-		text-align: middle;
-		a:first-child {
-			font-size: 50px;
-			color: white;
-		}
-		&, a:not(:first-child) {
-			color: white;
-			font-size: 15px;
-			color: white;
-		}
 		a {
-			text-decoration: none;
-		}
-		a:hover, a:focus {
-			text-decoration: underline;
+			color: black !important;
 		}
 	}
 
 	nav {
-		/* layout */
-		line-height: 1;
-		width: 100%;
 		ul {
-			padding: 0;
+			display: flex;
+			flex-direction: column;
 			margin: 0;
-			list-style: none;
-		}
-		li {
-			display: inline-block;
-		}
-		a {
-			display: block;
-		}
-
-		/* pretty */
-		background-color: Maroon;
-		a {
-			padding: 0.2em 1em;
-			font-size: 40px;
-			color: GoldenRod;
-			text-decoration: none;
-
-			&:hover, &:focus {
-				background-color: white;
-			}
-			&:hover, &:visited {
-				color: GoldenRod;
-			}
-			&:active {
-				color: Black;
-			}
-		}
-
-		form {
-			padding: 0.2em 0;
-			font-size: 40px;
-			display: block;
+			padding: 0;
+			li {
+				display: block;
+				font-size: 2em;
+				margin: 0.25em 0.5em;
+
+				border: 2px solid #41403e;
+				border-top-left-radius: 255px 15px;
+				border-top-right-radius: 15px 225px;
+				border-bottom-right-radius: 225px 15px;
+				border-bottom-left-radius: 15px 255px;
+
+				background-color: rgb(240,240,240);
+				transition: background-color 0.5s ease;
+				&:hover {
+					background-color: rgb(200,200,200);
+				}
 
-			input {
-				font-size: 25px;
-				border: solid 1px #333333;
-				vertical-align: middle;
-			}
-			input[type="search"] {
-				max-width: 10em;
-			}
-			input:first-child {
-				border-top-left-radius: 4px;
-				border-bottom-left-radius: 4px;
-			}
-			input:not(:last-child) {
-				border-right: 0;
-			}
-			input:last-child {
-				border-top-right-radius: 4px;
-				border-bottom-right-radius: 4px;
+				form {
+					display: inline-block;
+					width: calc(100% - 0.5em);
+					line-height: 0;
+					margin: 0.25em 0;
+					input {
+						width: 100%;
+					}
+				}
 			}
 		}
 	}
 }
 
-article {
-	max-width: 6.5in;
+article, footer {
+	width: 60%;
 	margin: 0 auto;
+}
 
+article {
 	.tag {
 	        font-size: 60%;
-	    // this should work!
-		font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
-		color: white;
-		text-decoration: none;
+		color: white !important;
 		text-align: center;
 
+		margin-left: 2px;
 		padding: 4px 7px 5px 7px;
-		border-radius: 2px;
+		border-top-left-radius: 255px 15px;
+		border-top-right-radius: 15px 225px;
+		border-bottom-right-radius: 225px 15px;
+		border-bottom-left-radius: 15px 255px;
 	}
 	.tag.ff { background: FireBrick; }
 	.tag.ss { background: SeaGreen; }
 	.tag.es { background: DarkViolet; }
 	.tag.hb { background: DimGray; }
 	.tag.dm { background: DarkSlateGray; }
-	.tag.wp { background: GhostWhite; color: black; }
+	.tag.wp { background: GhostWhite; color: black !important; border-color: Gray; border: solid 1.2px LightGray; }
 
-	border-bottom: solid 1px #333333;
+	border-bottom: solid 1px #c9cacc;
 }
 
 footer {
-	max-width: 6.5in;
-	margin: 0 auto;
 	padding: 1em 0;
 	font-size: 60%;
 	p {
@@ -129,96 +120,80 @@ footer {
 	}
 }
 
+
+/* Index pages ****************************************************************/
+
 body.index {
-	article {
-		ul {
-			list-style: none;
-			display: table;
-			padding: 0;
-			li {
-				display: table-row;
-				line-height: 1.3em;
-				& > * {
-					display: table-cell;
-					padding-right: 0.1em;
-				}
-			}
-		}
-		a.external {
-			background-position: center right;
-			background-repeat: no-repeat;
-			background-image: url(external.svg);
-			background-size: 12px 12px;
-			padding-right: 13px;
-		}
+	@mixin card-container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
 	}
-}
 
-body.dnd {
-	background: url(dnd/background.png) repeat-y;
-	background-size: 100%;
+	@mixin card {
+		display: block;
+		background-color: white;
+		border: 2px solid #e6e7e9;
+		padding: 1em;
+		margin: 1em;
+
+		box-shadow: 15px 28px 25px -18px rgba(0,0,0,.2);
+		transition: box-shadow .5s ease;
+		&:hover {
+			box-shadow:2px 8px 4px -6px rgba(0,0,0,.3)
+		}
+	}
 
-	/* This bit mostly taken from the defaults of org-mode export */
 	article {
-		font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
-		font-size: 12pt;
+		@include card-container;
 
-		table {
-			border-spacing: 0;
-			&, tr:last-child td, tr:last-child th {
-				border-bottom: solid 1px black;
+		& > h1 {
+			display: block;
+			width: 100%;
+			text-align: center;
+			margin: 0;
+		}
+		& > ul {
+			@include card-container;
+			width: 100%;
+			padding: 0;
+			margin: 0;
+			li {
+				@include card;
 			}
-			&, tr:first-child td, tr:first-child th {
-				border-top: solid 1px black;
+		}
+		& > section {
+			@include card;
+			h2 {
+				margin-top: 0;
 			}
-			td, th {
-				padding: 6px;
+			ul {
+				display: flex;
+				flex-direction: column;
+
+				padding: 0;
+				margin: 0;
+				li {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					padding: 0.5em 0;
+					border-top: 1px dashed #d9d9d8;
+					.link-main {
+						display: inline-block;
+						max-width: 12em;
+						line-height: 1.5em;
+					}
+					.link-categories {
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						justify-content: flex-end;
+						align-items: flex-start;
+					}
+				}
 			}
 		}
-
-		p {	text-align: justify; }
-		.title  { text-align: center; }
-		.todo   { color: red; }
-		.done   { color: green; }
-		.target { }
-		.timestamp { color: #bebebe; }
-		.timestamp-kwd { color: #5f9ea0; }
-		.right  {margin-left:auto; margin-right:0px;  text-align:right;}
-		.left   {margin-left:0px;  margin-right:auto; text-align:left;}
-		.center {margin-left:auto; margin-right:auto; text-align:center;}
-		p.verse { margin-left: 3% }
-		pre {
-			border: 1pt solid #AEBDCC;
-			background-color: #F3F5F7;
-			padding: 5pt;
-			//font-family: courier, monospace;
-			font-size: 90%;
-			overflow:auto;
-		}
-		table { border-collapse: collapse; }
-		td, th { vertical-align: top;  }
-		th.right  { text-align:center;  }
-		th.left   { text-align:center;   }
-		th.center { text-align:center; }
-		td.right  { text-align:right;  }
-		td.left   { text-align:left;   }
-		td.center { text-align:center; }
-		dt { font-weight: bold; }
-		div.figure { padding: 0.5em; }
-		div.figure p { text-align: center; }
-		div.inlinetask {
-			padding:10px;
-			border:2px solid gray;
-			margin:10px;
-			background: #ffffcc;
-		}
-		textarea { overflow-x: auto; }
-		.linenr { font-size:smaller }
-		.code-highlighted {background-color:#ffff00;}
-		.org-info-js_info-navigation { border-style:none; }
-		#org-info-js_console-label { font-size:10px; font-weight:bold;
-									 white-space:nowrap; }
-		.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
-									   font-weight:bold; }
 	}
 }