diff --git a/package.json b/package.json
index 00b5aa7..08a0012 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"dependencies": {
"express": "^4.16.2",
"mysql-promise": "^4.1.0",
+ "normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
diff --git a/public/App.jsx b/public/App.jsx
index d96d440..1127107 100644
--- a/public/App.jsx
+++ b/public/App.jsx
@@ -1,5 +1,18 @@
+/*
+ * App
+ * Overall App wrapper, contains a lot of the logic and handling of how the
+ * site will function and display.
+ *
+ * Dependencies:
+ * styles/components/_app.scss
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
import React from 'react';
+import Header from './components/Header';
+
class App extends React.Component {
constructor(props) {
super(props);
@@ -8,6 +21,7 @@ class App extends React.Component {
render() {
return (
+
App
)
diff --git a/public/components/Header.jsx b/public/components/Header.jsx
new file mode 100644
index 0000000..9bf394c
--- /dev/null
+++ b/public/components/Header.jsx
@@ -0,0 +1,29 @@
+/*
+ * Header
+ * Header for page, contains navbar as well as other consistant top of page
+ * elements.
+ *
+ * Dependencies:
+ * styles/components/_header.scss
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+
+import React from 'react';
+
+class Header extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+export default Header;
diff --git a/public/components/navigation/Navbar.jsx b/public/components/navigation/Navbar.jsx
new file mode 100644
index 0000000..e638e35
--- /dev/null
+++ b/public/components/navigation/Navbar.jsx
@@ -0,0 +1,29 @@
+/*
+ * Header
+ * Header for page, contains navbar as well as other consistant top of page
+ * elements.
+ *
+ * Dependencies:
+ * styles/components/_navbar.scss
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+
+import React from 'react';
+
+class Navbar extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+export default Navbar;
diff --git a/public/styles/components/_app.scss b/public/styles/components/_app.scss
new file mode 100644
index 0000000..29966c7
--- /dev/null
+++ b/public/styles/components/_app.scss
@@ -0,0 +1,15 @@
+/*
+ * App
+ * Styles for the App itself
+ *
+ * Dependencies:
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+.c-app {
+ width: 100%;
+ min-height: 100%;
+ overflow-x: hidden;
+ position: relative;
+}
diff --git a/public/styles/components/_header.scss b/public/styles/components/_header.scss
new file mode 100644
index 0000000..56c29b4
--- /dev/null
+++ b/public/styles/components/_header.scss
@@ -0,0 +1,12 @@
+/*
+ * Header
+ * Styles for header element
+ *
+ * Dependencies:
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+.c-header {
+ border: 1px solid red;
+}
diff --git a/public/styles/components/_navbar.scss b/public/styles/components/_navbar.scss
new file mode 100644
index 0000000..694581a
--- /dev/null
+++ b/public/styles/components/_navbar.scss
@@ -0,0 +1,14 @@
+/*
+ * Navbar
+ * Styles for Navbar
+ *
+ * Dependencies:
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+.c-navbar {
+ width: 100%;
+ position: fixed;
+
+}
diff --git a/public/styles/elements/_body.scss b/public/styles/elements/_body.scss
new file mode 100644
index 0000000..c9b18e8
--- /dev/null
+++ b/public/styles/elements/_body.scss
@@ -0,0 +1,15 @@
+/*
+ * Body
+ * Base Body Seettings
+ *
+ * Dependencies:
+ * styles/settings/colors.scss - Used for colors
+ * styles/tools/_gradients.scss - Used for background gradients.
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+body {
+ @include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
+ min-height: 100%;
+}
diff --git a/public/styles/elements/_html.scss b/public/styles/elements/_html.scss
new file mode 100644
index 0000000..0e9c827
--- /dev/null
+++ b/public/styles/elements/_html.scss
@@ -0,0 +1,13 @@
+/*
+ * HTML
+ * Base HTML Settings
+ *
+ * Dependencies:
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+html {
+ width: 100%;
+ min-height: 100%;
+}
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 9f44090..6610e68 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -1 +1,33 @@
@charset "UTF-8";
+/*
+ * domsPlace Styles
+ * Copyright 2018 Dominic "YouWish" Masters
+ *
+ * Version:
+ * 0.0.1 - 2018/02/23
+ */
+
+//Settings
+@import './settings/colors.scss';
+
+//Tools
+@import './tools/_gradients.scss';
+
+//Resets
+@import './../../node_modules/normalize.css/normalize.css';
+
+//Elements
+@import './elements/_body.scss';
+@import './elements/_html.scss';
+
+//Objects
+
+//Components
+@import './components/_app.scss';
+@import './components/_header.scss';
+
+//Utilities
+
+//Vendor
+
+//Trumps
diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss
new file mode 100644
index 0000000..056021a
--- /dev/null
+++ b/public/styles/settings/colors.scss
@@ -0,0 +1,3 @@
+
+$s-color--background-top: #2BF;
+$s-color--background-bottom: #FCF;
diff --git a/public/styles/tools/_gradients.scss b/public/styles/tools/_gradients.scss
new file mode 100644
index 0000000..6f5e45d
--- /dev/null
+++ b/public/styles/tools/_gradients.scss
@@ -0,0 +1,13 @@
+/*
+ * Gradients
+ * Various cross browser gradients
+ *
+ * Version:
+ * 1.0.0 - 2018/02/23
+ */
+ @mixin t-gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+ background-repeat: repeat-x;
+ background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
+ background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}