diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..0d09810
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,117 @@
+:root {
+ --navbar-height: 96px;
+ --footer-height: 24px;
+
+ /* Unused - just for reference */
+ --teal: 162, 223, 203;
+ --black: 25, 23, 30;
+ --brown: 81, 73, 65;
+ --tan: 158, 144, 112;
+ --lightblue: 147, 225, 242;
+
+ --background-color: white;
+ --header-color: rgb(var(--lightblue));
+ --footer-color: rgba(var(--teal));
+}
+
+html, body {
+ height: 100vh;
+ width: 100vw;
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+html, body, p, h1, h2, h3, h4, h5, h6 {
+ padding: 0;
+ margin: 0;
+}
+
+body {
+ display: grid;
+ grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height);
+ background-color: var(--background-color);
+}
+
+header {
+ background-color: var(--header-color);
+}
+
+footer {
+ background-color: var(--footer-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.h-100 {
+ height: 100%;
+}
+
+nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.nav-logo > img {
+ width: 64px;
+ height: 64px;
+}
+
+.nav-logo > p {
+ color: red;
+}
+.nav-logo > p > span {
+ color: blue;
+}
+
+.nav-title {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+.nav-title > ul {
+ list-style: none;
+ margin: 0.5rem 0;
+ padding: 0;
+}
+.nav-title > ul > li {
+ display: inline;
+ float: left;
+}
+.nav-title > ul > li > a {
+ padding: 0 1rem;
+}
+
+/* -xs */
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+/* -sm */
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+/* -md */
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+/* -lg */
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+/* -xl */
+@media (min-width: 1400px) {
+ .container {
+ max-width: 1320px;
+ }
+}
\ No newline at end of file
diff --git a/public/img/logo.png b/public/img/logo.png
new file mode 100644
index 0000000..f1756fd
Binary files /dev/null and b/public/img/logo.png differ
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 5808b50..c898288 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -3,15 +3,49 @@
- Document
+
+
+
+
+
+
+ CyBySide - Cyper's Blog
- {{ title | default: "Bloggy" }}
+
- {{ content }}
+
+ {{ content }}
+
-
+
+
+
+