Merge branch 'master' into kevin-prototype

website/styles/chat.css

@@ -0,0 +1,53 @@
+.chat {
+    text-align: center;
+}
+
+.chat-history {
+    /*border: solid #845663;*/
+    width: 80%;
+    height: 500px;
+    margin: 20px auto;
+    background-color: white;
+    vertical-align: bottom;
+}
+
+.chat-field input {
+    border-radius: 8px;
+}
+
+.chat-field input[type="text"] {
+    width: calc(75% - 60px);
+
+}
+
+.chat-field input[type="submit"] {
+    width: 60px;
+
+}
+.chat-message {
+    width: 100%;
+    height: 40px;
+    padding-top: 10px;
+}
+
+.chat-message-self, .chat-message-other {
+    border-radius: 20px;
+    padding: 10px 12px;
+    min-width: 10%;
+    max-width: 45%;
+}
+
+.chat-message-self {
+    text-align: right;
+    float: right;
+    margin-right: 10px;
+    background-color: darkgreen;
+    color: white;
+}
+
+.chat-message-other {
+    text-align: left;
+    float: left;
+    margin-left: 10px;
+    background-color: aquamarine;
+}

website/styles/header.css

@@ -0,0 +1,54 @@
+header {
+    position: fixed;
+    z-index: 99;
+
+    top: 0;
+    left: 0;
+    height: 80px;
+    width: 100%;
+
+    color: white;
+    background-color: #845663;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+
+#header-logo img {
+    height: 80px;
+
+    vertical-align: middle;
+}
+
+#header-search {
+    padding-left: 48px;
+}
+
+#header-search input[type="text"] {
+    padding: 5px 10px;
+    height: 19px;
+
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+#header-search input[type="submit"] {
+    margin: 0 0 0 -4px;
+    padding: 5px;
+
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+
+header div {
+    display: inline-block;
+}
+
+.profile-menu {
+    font-size: 21px;
+}
+
+.profile-menu img {
+    padding: 8px;
+    height: 64px;
+    width: 64px;
+}

website/styles/main.css

@@ -7,6 +7,10 @@ Website:        myhyvesbookplus.tk
 
 .profile-picture {
     border-radius: 50%;
+    height: 42px;
+    width: 42px;
+    object-fit: cover;
+    vertical-align: middle;
 }
 
 body {
@@ -15,6 +19,11 @@ body {
     font-family: Arial, sans-serif;
 }
 
+.content {
+    margin-top: 80px;
+    margin-left: 256px;
+}
+
 ::selection {
     background: #845663;
     color: white;
@@ -32,6 +41,16 @@ body {
     border: 0;
 }
 
+input[type="submit"], button {
+    background-color: #845663;
+    color: white;
+    padding: 5px;
+}
+
+input[type="text"] {
+    padding: 5px;
+}
+
 /* Move element down (clear), below floating elements */
 .clear {
     clear: both;
@@ -109,4 +128,4 @@ a[data-title]:hover:after {
     -webkit-box-shadow: 0px 0px 4px #222;
     box-shadow: 0px 0px 4px #222;
     background-color: #333;
-}
+}

website/styles/menu.css

@@ -0,0 +1,19 @@
+.menu {
+    position: fixed;
+
+    left: 0;
+    top: 80px;
+    height: calc(100% - 80px);
+    width: 256px;
+
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.menu h4 {
+    padding: 10px;
+}
+
+.friend-item {
+    padding: 5px 20px;
+}