Revamped CSS, added per-page backgrounds, added image transfer

20 files changed, 235 insertions, 85 deletions

diff --git a/.gitignore b/.gitignore
index bfea4fe..1dee808 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 *~
 html
 html/
+notes.txt
diff --git a/makefile b/makefile
index 6d12cb6..3857b72 100644
--- a/makefile
+++ b/makefile
@@ -1,36 +1,53 @@
 MD = $(shell find md/ -type f -name '*.md')
-HTML= $(patsubst md/%.md, html/%.html, $(MD))
 CSS = $(shell find md/ -type f -name '*.css')
-CSS_HTML = $(patsubst md/%.css, html/%.css, $(CSS))
-53HORNET_HTML = $(patsubst md/53hor.net/%.md, html/53hor.net/%.html, $(MD))
-ATC_HTML = $(patsubst md/atc.53hor.net/%.md, html/atc.53hor.net/%.html, $(MD))
+JPG = $(shell find md/ -type f -name '*.jpg')
+PNG = $(shell find md/ -type f -name '*.png')
+
+CSS_OUT = $(patsubst md/%.css, html/%.css, $(CSS))
+JPG_OUT = $(patsubst md/%.jpg, html/%.jpg, $(JPG))
+PNG_OUT = $(patsubst md/%.png, html/%.png, $(PNG))
+53HORNET_OUT = $(patsubst md/53hor.net/%.md, html/53hor.net/%.html, $(MD))
+ATC_OUT = $(patsubst md/atc.53hor.net/%.md, html/atc.53hor.net/%.html, $(MD))
 
 .PHONY: all
-all: css 53hor.net atc.53hor.net
+all: css img 53hor.net atc.53hor.net
+
+.PHONY: css
+css: $(CSS_OUT)
+
+html/%.css: md/%.css
+	@echo "css: $< -> $@"
+	@mkdir -p "$(@D)"
+	@cp "$<" "$@"
+
+.PHONY: img
+img: $(JPG_OUT) $(PNG_OUT)
+
+html/%.jpg: md/%.jpg
+	@echo "img: $< -> $@"
+	@mkdir -p "$(@D)"
+	@cp "$<" "$@"
+
+html/%.png: md/%.png
+	@echo "img: $< -> $@"
+	@mkdir -p "$(@D)"
+	@cp "$<" "$@"
 
 .PHONY: 53hor.net
-53hor.net: $(53HORNET_HTML)
+53hor.net: $(53HORNET_OUT)
 
 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/nav.html -c /styles.css -o "$@"
+	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=2 -H md/53hor.net/background.html -B md/53hor.net/nav.html -c /styles.css -o "$@"
 
 .PHONY: atc.53hor.net
-atc.53hor.net: $(ATC_HTML)
+atc.53hor.net: $(ATC_OUT)
 
 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=3 -c /styles.css -o "$@"
-
-.PHONY: css
-css: $(CSS_HTML)
-
-html/%.css: md/%.css
-	@echo "css: $< -> $@"
-	@mkdir -p "$(@D)"
-	@cp "$<" "$@"
+	@pandoc "$<" -f markdown -t html5 -s --toc --toc-depth=2 -c /styles.css -o "$@"
 
 clean:
 	@rm -rf html/
diff --git a/md/53hor.net/background.html b/md/53hor.net/background.html
new file mode 100644
index 0000000..9d8a7bb
--- /dev/null
+++ b/md/53hor.net/background.html
@@ -0,0 +1,3 @@
+<style type="text/css">
+  body{background-image: url(background.jpg)}
+</style>
diff --git a/md/53hor.net/background.jpg b/md/53hor.net/background.jpg
new file mode 100644
index 0000000..f215134
--- /dev/null
+++ b/md/53hor.net/background.jpg
diff --git a/md/53hor.net/contact/background.jpg b/md/53hor.net/contact/background.jpg
new file mode 100644
index 0000000..edd501b
--- /dev/null
+++ b/md/53hor.net/contact/background.jpg
diff --git a/md/53hor.net/contact/index.md b/md/53hor.net/contact/index.md
new file mode 100644
index 0000000..fc72213
--- /dev/null
+++ b/md/53hor.net/contact/index.md
@@ -0,0 +1,24 @@
+---
+pagetitle: 53hornet - Home
+---
+<article>
+
+### Welcome to 53hornet
+
+#### A site for everything about my 1953 Hudson Hornet
+
+# Intro
+
+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.
+
+# Say Hi to 'Ole Blue'
+
+This is Ole Blue. She's a 1953 Hudson Hornet four-door sedan. She has a 308ci flathead straight-six engine and a four-speed 'Dual-Range' Hydramatic transmission made by General Motors. Blue is the reason for this site, as are all of the experiences we had finding parts for her, fixing her up, and taking her on adventures big and small.
+
+!["Ole Blue - Buttercups"](home-1.jpg)
+
+# Using This Site
+
+On top of this page is the navigation bar, which will take you to every page of this site including our parts database, our collection of photos and images, and a page where you can contact us if you have any questions. On the left is a per-page table of contents. Every page you're on will have one of these to make navigation within a page quicker. 
+
+</article>
diff --git a/md/53hor.net/db/background.jpg b/md/53hor.net/db/background.jpg
new file mode 100644
index 0000000..8f7e989
--- /dev/null
+++ b/md/53hor.net/db/background.jpg
diff --git a/md/53hor.net/db/index.md b/md/53hor.net/db/index.md
index a6fd4df..93133c5 100644
--- a/md/53hor.net/db/index.md
+++ b/md/53hor.net/db/index.md
@@ -1,4 +1,21 @@
 ---
-pagetitle: 53hornet - Database
+pagetitle: 53hornet - Parts Database
 ---
+<article>
 
+### Parts Database
+
+#### What you really came here for
+
+# Intro
+
+Disclaimer: please remember that this database is continually a work in progress and is not guaranteed in any way. If you want to suggest a part that isn't in our list, check out part suggestions.
+
+This is the master parts list that we have amassed over time. These are new parts that you can buy easily online from Hudson Essex Terraplane club members, in online auto stores, or at local auto shops. We are open to feedback and would love to be able to list parts for more Hudsons. Please tell us if these parts work for your Hudsons and suggest new parts down below. Remember, we only check whether others' parts exist, not whether they're compatible. We are not responsible for any parts in this list that cause any sort of problems with your Hudson. If you see something wrong in the list or have a problem with one of the parts listed, please let us know on the Contact Us page and we'll try to correct it as soon as possible.
+
+# Database
+<iframe style="height: 1000px" src="https://view-awesome-table.com/-KfY-V35Im-9lfLidhZi/view"></iframe>
+
+# Part Suggestions
+
+</article>
diff --git a/md/53hor.net/gallery/background.jpg b/md/53hor.net/gallery/background.jpg
new file mode 100644
index 0000000..4cd1505
--- /dev/null
+++ b/md/53hor.net/gallery/background.jpg
diff --git a/md/53hor.net/gallery/index.md b/md/53hor.net/gallery/index.md
index a6fd4df..68bfc62 100644
--- a/md/53hor.net/gallery/index.md
+++ b/md/53hor.net/gallery/index.md
@@ -1,4 +1,30 @@
 ---
-pagetitle: 53hornet - Database
+pagetitle: 53hornet - Gallery
 ---
+<article>
 
+### Gallery
+
+#### Fabulous eye candy
+
+# Intro
+
+This is the gallery.
+
+# 2017
+
+## Dad's Retirement
+
+## Easter
+
+## Independence Day
+
+## 'Wheezy'
+
+## Put-in-Bay
+
+## Pontiac, Michigan
+
+# 2018
+
+</article>
diff --git a/md/53hor.net/home-1.jpg b/md/53hor.net/home-1.jpg
new file mode 100755
index 0000000..8d487c7
--- /dev/null
+++ b/md/53hor.net/home-1.jpg
diff --git a/md/53hor.net/img/background.jpg b/md/53hor.net/img/background.jpg
deleted file mode 100755
index f989a34..0000000
--- a/md/53hor.net/img/background.jpg
+++ /dev/null
diff --git a/md/53hor.net/index.md b/md/53hor.net/index.md
index 27f83c9..fc72213 100644
--- a/md/53hor.net/index.md
+++ b/md/53hor.net/index.md
@@ -1,45 +1,24 @@
 ---
 pagetitle: 53hornet - Home
 ---
-
 <article>
 
-# Welcome to 53hornet
-
----
+### Welcome to 53hornet
 
 #### 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
-
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
-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.
 
-## Chapter 2
+# Intro
 
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
-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.
-
-## Chapter 3
-
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
-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.
-
-### Reference
-
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
-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.
+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 4
+# Say Hi to 'Ole Blue'
 
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
-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.
+This is Ole Blue. She's a 1953 Hudson Hornet four-door sedan. She has a 308ci flathead straight-six engine and a four-speed 'Dual-Range' Hydramatic transmission made by General Motors. Blue is the reason for this site, as are all of the experiences we had finding parts for her, fixing her up, and taking her on adventures big and small.
 
-## Closing Remarks
+!["Ole Blue - Buttercups"](home-1.jpg)
 
-dflajdfhjhdflaksdhflkjahsdflkjahsdflkjahdf
+# Using This Site
 
-### Contact
+On top of this page is the navigation bar, which will take you to every page of this site including our parts database, our collection of photos and images, and a page where you can contact us if you have any questions. On the left is a per-page table of contents. Every page you're on will have one of these to make navigation within a page quicker. 
 
 </article>
diff --git a/md/53hor.net/journal/background.jpg b/md/53hor.net/journal/background.jpg
new file mode 100644
index 0000000..44e5828
--- /dev/null
+++ b/md/53hor.net/journal/background.jpg
diff --git a/md/53hor.net/journal/index.md b/md/53hor.net/journal/index.md
new file mode 100644
index 0000000..b024c12
--- /dev/null
+++ b/md/53hor.net/journal/index.md
@@ -0,0 +1,22 @@
+---
+pagetitle: 53hornet - Home
+---
+<article>
+
+### Journal
+
+#### Thoughts from behind the wheel
+
+# Intro
+
+What is a journal? 
+
+# 2018
+
+# 2017
+
+## March 13 - My First Car
+
+## April 28th - Why Are Sedans So Cool to Me?
+
+</article>
diff --git a/md/53hor.net/img/logo.png b/md/53hor.net/logo.png
index ff24dee..ff24dee 100755
--- a/md/53hor.net/img/logo.png
+++ b/md/53hor.net/logo.png
diff --git a/md/53hor.net/nav.html b/md/53hor.net/nav.html
index 53c8be6..cf6dbb6 100644
--- a/md/53hor.net/nav.html
+++ b/md/53hor.net/nav.html
@@ -1,9 +1,9 @@
 <nav id="topnav">
-  <img src="/include/logo.png" style="float:left" height=7% width=7%>
-  <a href="/contact">Contact</a>
+  <img src="/logo.png" style="float:left" height=7% width=7%>
+  <a href="/contact">Contact Us</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="/gallery">Image Gallery</a>
+  <a href="http://youtube.com/my53hornet">YouTube Channel</a>
+  <a href="/db">Parts Database</a>
   <a href="/">Home</a>
 </nav>
diff --git a/md/53hor.net/styles.css b/md/53hor.net/styles.css
index fdd0564..1ce2894 100644
--- a/md/53hor.net/styles.css
+++ b/md/53hor.net/styles.css
@@ -1,7 +1,8 @@
 /* stylesheet for 53hor.net */
 
 /* google fonts */
-@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i');
+@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i,900,900i');
+@import url('https://fonts.googleapis.com/css?family=Satisfy');
 
 :root {
   /* custom colors */
@@ -9,16 +10,21 @@
 }
 
 #TOC {
-  margin-top: 1em;
+  box-shadow: 3px 7px 5px black;
   position: fixed;
   width: 15%;
   height: 100%;
+  margin: 0;
+  background-color: white;
+  box-shadow: 0 2px 5px black inset;
+  overflow: auto;
 }
 
 #TOC ul {
-  list-style-type: none;
+  overflow: none;
+  height: 100%;
+  list-style-type: disc;
   color: var(--balboa);
-  overflow: hidden;
   padding-left: 1em;
 }
 
@@ -26,15 +32,25 @@
   text-decoration: none;
   display: block;
   color: gray;
+  font-weight: 400;
+  font-size: 0.7em;
+  font-style: italic;
+  transition: 0.25s;
+}
+
+#TOC li a:hover {
+  color: black;
 }
 
 #topnav {
+  box-shadow: 0 2px 5px black;
   margin: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: white;
+  background-color: var(--balboa);
+  z-index: 1;
 }
 
 #topnav img {
@@ -49,30 +65,64 @@
   text-align: center;
   padding: 1em 1em;
   text-decoration: none;
-  color: var(--balboa);
+  color: white;
   transition: 0.5s;
 }
 
 #topnav a:hover {
-  background-color: var(--balboa);
-  color: white;
+  color: var(--balboa);
+  background-color: white;
+  box-shadow: 0 0 5px black;
 }
 
-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;
+html {
+  height: 100%;
+  margin: 0;
 }
 
 body {
+  height: 100%;
   padding: 0;
   margin: 0;
   font-size: 1.2em;
   font-family: "Merriweather", serif;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+article {
+  height: 100%;
+  margin-left: 15%;
+  margin-top: 3em;
+}
+
+iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+}
+
+figure {
+  margin: none;
+  padding: 1em;
+  margin-left: 25%;
+  width: 50%;
+  background-color: white;
+  box-shadow: 0 5px 5px black;
+}
+
+figure img {
+  width: 100%;
+}
+
+figure figcaption {
+  color: black;
+  text-align: right;
+  font-weight: 400;
+  font-size: 0.8em;
+  font-family: "Satisfy", sans-serif;
 }
 
 hr {
@@ -90,36 +140,40 @@ p {
   background-color: white;
   margin: 1em;
   padding: 1em;
+  box-shadow: 0 5px 5px black;
 }
 
-h1 {
+h3 { /* decorative page title */
   font-style: italic;
-  font-weight: 500;
+  font-weight: 900;
   font-size: 2.5em;
   text-align: center;
   color: white;
-  text-shadow: 3px 3px 3px black;
+  text-shadow: 2px 2px 5px black;
   padding-top: 1.5em;
 }
 
-h2 {
-  font-weight: 700;
+h4 { /* decorative page subtitle */
+  font-weight: 900;
   font-size: 1em;
-  color: white;
+  text-align: center;
   text-shadow: 3px 3px 3px black;
-  margin: 1em;
+  color: white;
 }
 
-h3 {
+h1 { /* section title */
   font-weight: 700;
   font-size: 1em;
-  color: var(--balboa);
+  color: white;
+  text-shadow: 3px 3px 3px black;
+  margin: 1em;
 }
 
-h4 {
+h2 { /* subsection title */
   font-weight: 700;
   font-size: 1em;
-  text-align: center;
-  text-shadow: 3px 3px 3px black;
   color: white;
+  text-shadow: 3px 3px 3px black;
+  margin: 1em;
 }
+
diff --git a/md/53hor.net/tidbits/index.md b/md/53hor.net/tidbits/index.md
deleted file mode 100644
index a6fd4df..0000000
--- a/md/53hor.net/tidbits/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-pagetitle: 53hornet - Database
----
-
diff --git a/template.md b/template.md
new file mode 100644
index 0000000..416c625
--- /dev/null
+++ b/template.md
@@ -0,0 +1,11 @@
+---
+pagetitle: 53hornet - Home
+---
+
+<article style="background-image: url(background.jpg)">
+
+# Title
+
+---
+
+</article>