diff --git a/site/blog/index.html b/site/blog/index.html
index 83e6c0e7a9962e57ec42d5203942add305b5686e..329161d3a89c6c90744aa99e55972be2e05be664 100644
--- a/site/blog/index.html
+++ b/site/blog/index.html
@@ -8,7 +8,11 @@
</head>
<body>
-<nav>TODO</nav>
+<nav>
+ <a href="index.html">Home</a>
+ <a href="facts.html">Facts</a>
+ <a href="blog/index.html">Blog</a>
+</nav>
<header>
<h1>TODO</h1>
diff --git a/site/blog/post-3.html b/site/blog/post-3.html
index b8acfd8284e0c219f6fc68137528267666a8c666..e9fefef99131f2a4f24d78be09c50ae9a6bb5ab9 100644
--- a/site/blog/post-3.html
+++ b/site/blog/post-3.html
@@ -8,7 +8,11 @@
</head>
<body>
-<nav></nav>
+<nav>
+ <a href="index.html">Home</a>
+ <a href="facts.html">Facts</a>
+ <a href="blog/index.html">Blog</a>
+</nav>
<header>
<h1>Penguin Species</h1>
diff --git a/site/facts.html b/site/facts.html
index 42937c0ee2e56d3f6274141f7ebb955ff5983f0e..02d7da022cc61afd7f5de812dbf6f202660abf7c 100644
--- a/site/facts.html
+++ b/site/facts.html
@@ -7,8 +7,11 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
-
-<nav>TODO</nav>
+<nav>
+ <a href="index.html">Home</a>
+ <a href="facts.html">Facts</a>
+ <a href="blog/index.html">Blog</a>
+</nav>
<header>
<h1>TODO</h1>
diff --git a/site/index.html b/site/index.html
index 252109108e42056dcc9679fe3c30638c06ac37a5..8b4b968e904bc20d64dff2fb42767fffff5c447b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,18 +1,21 @@
<!DOCTYPE html>
<html>
-<nav>
- <a href="../../">CS375</a>
- <a href="../..//readings">Readings</a>
- <a href="../..//labs">Labs</a>
- <a href="../..//homeworks">Homeworks</a>
- <!-- <a href="../..//project">Project</a> -->
-</nav>
+
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>TODO</title>
+ <title>BLOG</title>
<link rel="stylesheet" href="style.css">
+ <style>
+
+ </style>
</head>
+<nav>
+ <a href="index.html">Home</a>
+ <a href="facts.html">Facts</a>
+ <a href="blog/index.html">Blog</a>
+ <!-- <a href="../..//project">Project</a> -->
+</nav>
<body>
diff --git a/site/style.css b/site/style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c9efc1d50360b6785a79afb16f21e2d1446c09fb 100644
--- a/site/style.css
+++ b/site/style.css
@@ -0,0 +1,106 @@
+nav {
+ display: flex;
+ justify-content: space-between;
+}
+
+body {
+ margin: 0 auto;
+ padding: 2rem;
+ line-height: 1.3em;
+ /*color: #282828;*/
+ font-size: 1.1em;
+ /* this seemed to fit most code blocks
+ and it's 2^9 + 2^8 + 2^6 which pleases me */
+ max-width: 832px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ /* this was needed to make the lines
+ not squish together when wrapping
+ why? beats me */
+ line-height: 1em;
+}
+
+/* slightly darker for code embedded in text */
+code {
+ background: #f0f0f0;
+}
+/* apply to code containing divs so if there's overflow
+it'll retain the correct background color when scrolling
+horizontally, because its container will also be colored */
+div.sourceCode {
+ background: #fbfbfb;
+}
+/* also apply to pre tags because if a fenced block doesn't
+have a language, it won't have a sourceCode class applied
+to its container */
+pre {
+ background: #fbfbfb;
+}
+/* clear darker styling because it's not embedded in text */
+pre code {
+ background: #fbfbfb;
+}
+
+table {
+ border-collapse: collapse;
+}
+td {
+ border: 1px solid black;
+}
+
+.nice-table th, .nice-table td {
+ padding: 5px;
+}
+
+img {
+ max-width: 100%;
+}
+
+video {
+ max-width: 100%;
+}
+
+blockquote {
+ border-left: 2px solid #AAA;
+ margin-left: 1.5rem;
+ padding-left: 1rem;
+ font-size: 1rem;
+ color: #666;
+}
+blockquote code {
+ font-size: 0.9rem;
+}
+
+.exercise-section {
+ margin-top: 5rem;
+ background-color: #e5e5ff;
+ padding: 1rem;
+}
+
+.exercise {
+ border-bottom: 1px solid #444;
+ margin-top: 3rem;
+ text-align: center;
+}
+
+figcaption {
+ font-size: 1rem;
+}
+
+.q {
+ background: lightgreen;
+ border: 1px solid black;
+ padding: 3px;
+}
+.q:before {
+ content: "Q"
+}
+
+/* reset all styles to demo HTML */
+.html-example {
+ border: 1px solid black;
+}
+.html-example > div {
+ all: initial;
+}