Reworking CSS; is a TOC really necessary?

10 files changed, 227 insertions, 94 deletions

diff --git a/makefile b/makefile
index fac7346..6d12cb6 100644
--- a/makefile
+++ b/makefile
@@ -11,10 +11,10 @@ all: css 53hor.net atc.53hor.net
 .PHONY: 53hor.net
 53hor.net: $(53HORNET_HTML)
 
-html/53hor.net/%.html: md/53hor.net/%.md md/53hor.net/include/nav.inc
+html/53hor.net/%.html: md/53hor.net/%.md md/53hor.net/nav.html
 	@echo   "53hor.net: $< -> $@"
 	@mkdir -p "$(@D)"
-	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=3 -B md/53hor.net/include/nav.inc -c /include/styles.css -o "$@"
+	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=3 -B md/53hor.net/nav.html -c /styles.css -o "$@"
 
 .PHONY: atc.53hor.net
 atc.53hor.net: $(ATC_HTML)
@@ -22,7 +22,7 @@ atc.53hor.net: $(ATC_HTML)
 html/atc.53hor.net/%.html: md/atc.53hor.net/%.md
 	@echo "atc.53hor.net: $< -> $@"
 	@mkdir -p "$(@D)"
-	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=2 -c /include/styles.css -o "$@"
+	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=3 -c /styles.css -o "$@"
 
 .PHONY: css
 css: $(CSS_HTML)
diff --git a/md/53hor.net/img/background.jpg b/md/53hor.net/img/background.jpg
new file mode 100755
index 0000000..f989a34
--- /dev/null
+++ b/md/53hor.net/img/background.jpg
diff --git a/md/53hor.net/img/logo.png b/md/53hor.net/img/logo.png
new file mode 100755
index 0000000..ff24dee
--- /dev/null
+++ b/md/53hor.net/img/logo.png
diff --git a/md/53hor.net/include/nav.inc b/md/53hor.net/include/nav.inc
deleted file mode 100644
index 1022fc5..0000000
--- a/md/53hor.net/include/nav.inc
+++ /dev/null
@@ -1,9 +0,0 @@
-<nav id="topnav">
-<ul>
-  <li><a href="/">Home</a></li>
-  <li><a href="/db">Database</a></li>
-  <li><a href="http://youtube.com/my53hornet">YouTube</a></li>
-  <li><a href="/journal">Journal</a></li>
-  <li><a href="/contact">Contact</a></li>
-</ul>
-</nav>
diff --git a/md/53hor.net/include/styles.css b/md/53hor.net/include/styles.css
deleted file mode 100644
index f7322a7..0000000
--- a/md/53hor.net/include/styles.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/* stylesheet for 53hor.net */
-
-:root {
-  /* custom colors */
-  --balboa:#1a5a72;
-}
-
-#TOC {
-  position: fixed;
-  width: 25%;
-  height: 100%;
-}
-
-#TOC ul {
-  list-style-type: disc;
-  color: var(--balboa);
-  overflow: hidden;
-  padding-left: 1em;
-}
-
-#TOC li a {
-  text-decoration: none;
-  display: block;
-  color: black;
-}
-
-#topnav {
-
-}
-
-#topnav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  background-color: var(--balboa);
-}
-
-#topnav li {
-  float: left;
-  padding: 0;
-}
-
-#topnav li a {
-  display: block;
-  text-align: center;
-  padding: 1em 1em;
-  text-decoration: none;
-  color: white;
-}
-
-#topnav li a:hover {
-  color: var(--balboa);
-  background-color: white;
-}
-
-article {
-  margin-left: 25%;
-  margin-top: 4em;
-}
-
-body {
-  padding: 0;
-  margin: 0;
-}
-
-p {
-  font-size: 0.8em;
-  font-weight 400;
-  text-align: justify;
-  text-indent: 1em;
-}
diff --git a/md/53hor.net/index.md b/md/53hor.net/index.md
index 15045e8..27f83c9 100644
--- a/md/53hor.net/index.md
+++ b/md/53hor.net/index.md
@@ -4,10 +4,12 @@ pagetitle: 53hornet - Home
 
 <article>
 
-# Welcome
-In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+# Welcome to 53hornet
+
+---
 
-Introduction
+#### A site for everything about my 1953 Hudson Hornet
+This site is dedicated to everything about my 1953 Hudson Hornet. It serves as a digital collection documenting all of our adventures on the road and it is the hub from which my YouTube channel and Twitter feed draw. Feel free to explore this site for fun stories, photos, and videos of our Hudson! Dad and I are members of the Hudson Essex Terraplane Club and are actively trying to make it easier to find knowledge and parts for Hudson restorations. Our primary goal is to create an aftermarket and reproduction parts database for Hudson automobiles. Check out Parts Database to learn more.
 
 ## Chapter 1
 
diff --git a/md/53hor.net/nav.html b/md/53hor.net/nav.html
new file mode 100644
index 0000000..53c8be6
--- /dev/null
+++ b/md/53hor.net/nav.html
@@ -0,0 +1,9 @@
+<nav id="topnav">
+  <img src="/include/logo.png" style="float:left" height=7% width=7%>
+  <a href="/contact">Contact</a>
+  <a href="/journal">Journal</a>
+  <a href-"/gallery">Gallery</a>
+  <a href="http://youtube.com/my53hornet">YouTube</a>
+  <a href="/db">Database</a>
+  <a href="/">Home</a>
+</nav>
diff --git a/md/53hor.net/styles.css b/md/53hor.net/styles.css
new file mode 100644
index 0000000..fdd0564
--- /dev/null
+++ b/md/53hor.net/styles.css
@@ -0,0 +1,125 @@
+/* stylesheet for 53hor.net */
+
+/* google fonts */
+@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i');
+
+:root {
+  /* custom colors */
+  --balboa:#1a5a72;
+}
+
+#TOC {
+  margin-top: 1em;
+  position: fixed;
+  width: 15%;
+  height: 100%;
+}
+
+#TOC ul {
+  list-style-type: none;
+  color: var(--balboa);
+  overflow: hidden;
+  padding-left: 1em;
+}
+
+#TOC li a {
+  text-decoration: none;
+  display: block;
+  color: gray;
+}
+
+#topnav {
+  margin: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: white;
+}
+
+#topnav img {
+  padding-left: 2.5em;
+  padding-top: 1em;
+  display: block;
+}
+
+#topnav a {
+  float: right;
+  display: block;
+  text-align: center;
+  padding: 1em 1em;
+  text-decoration: none;
+  color: var(--balboa);
+  transition: 0.5s;
+}
+
+#topnav a:hover {
+  background-color: var(--balboa);
+  color: white;
+}
+
+article {
+  margin-left: 15%;
+  margin-top: 3em;
+  background-image: url(background.jpg);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 1.2em;
+  font-family: "Merriweather", serif;
+}
+
+hr {
+  color: white;
+  margin-left: 4em;
+  margin-right: 4em;
+  border-bottom: none;
+}
+
+p {
+  text-align: justify;
+  text-indent: 2em;
+  font-weight: 400;
+  font-size: 0.9em;
+  background-color: white;
+  margin: 1em;
+  padding: 1em;
+}
+
+h1 {
+  font-style: italic;
+  font-weight: 500;
+  font-size: 2.5em;
+  text-align: center;
+  color: white;
+  text-shadow: 3px 3px 3px black;
+  padding-top: 1.5em;
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 1em;
+  color: white;
+  text-shadow: 3px 3px 3px black;
+  margin: 1em;
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 1em;
+  color: var(--balboa);
+}
+
+h4 {
+  font-weight: 700;
+  font-size: 1em;
+  text-align: center;
+  text-shadow: 3px 3px 3px black;
+  color: white;
+}
diff --git a/md/atc.53hor.net/index.md b/md/atc.53hor.net/index.md
deleted file mode 100644
index a6fd4df..0000000
--- a/md/atc.53hor.net/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-pagetitle: 53hornet - Database
----
-
diff --git a/sample.md b/sample.md
new file mode 100644
index 0000000..d834d25
--- /dev/null
+++ b/sample.md
@@ -0,0 +1,85 @@
+# An exhibit of Markdown
+
+This note demonstrates some of what [Markdown][1] is capable of doing.
+
+*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
+
+## Basic formatting
+
+Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
+
+Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
+
+## Lists
+
+### Ordered list
+
+1. Item 1
+2. A second item
+3. Number 3
+4. Ⅳ
+
+*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*
+
+### Unordered list
+
+* An item
+* Another item
+* Yet another item
+* And there's more...
+
+## Paragraph modifiers
+
+### Code block
+
+    Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.
+
+You can also make `inline code` to add code into other things.
+
+### Quote
+
+> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.
+
+## Headings
+
+There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.
+
+### Headings *can* also contain **formatting**
+
+### They can even contain `inline code`
+
+Of course, demonstrating what headings look like messes up the structure of the page.
+
+I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.
+
+## URLs
+
+URLs can be made in a handful of ways:
+
+* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.
+* Another named link to [MarkItDown](http://www.markitdown.net/)
+* Sometimes you just want a URL like <http://www.markitdown.net/>.
+
+## Horizontal rule
+
+A horizontal rule is a line that goes across the middle of the page.
+
+---
+
+It's sometimes handy for breaking things up.
+
+## Images
+
+Markdown can also contain images. I'll need to add something here sometime.
+
+## Finally
+
+There's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.
+
+
+  [1]: http://daringfireball.net/projects/markdown/
+  [2]: http://www.fileformat.info/info/unicode/char/2163/index.htm
+  [3]: http://www.markitdown.net/
+  [4]: http://daringfireball.net/projects/markdown/basics
+  [5]: http://daringfireball.net/projects/markdown/syntax
+