main view: Add "Save" button

Create & style a save button to save your current note.

2 files changed, 34 insertions, 0 deletions

diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
index e952fb2..621df8d 100644
--- a/app/assets/stylesheets/layouts/_global.scss
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -19,6 +19,10 @@ body {
 }
 
 
+.position-relative {
+	position: relative;
+}
+
 .position-fixed {
 	position: fixed;
 }
@@ -39,6 +43,12 @@ body {
 	width: 100%;
 	height: 30px;
 	padding: 20px;
+
+	.right-button {
+		position: absolute;
+		right: 40px;
+		top: -33px;
+	}
 }
 
 
@@ -79,3 +89,23 @@ $sidebar-width: 250px;
 	font: 18px/1.7 Georgia, Times, serif;
 	outline: none;
 }
+
+
+.button {
+	padding: 12px 15px;
+	background-color: rgb(18, 113, 18);
+	color: #ddd;
+	text-decoration: none;
+	border-radius: 6px;
+}
+
+.button:hover {
+	background-color: #178E17;
+	color: #eee;
+}
+
+.button:active {
+	color: #ddd;
+	-webkit-box-shadow:inset 0 2px 4px 0 #0D4F0D;
+	box-shadow:inset 0 2px 4px 0 #0D4F0D;
+}
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index c3bbcd5..73ee2b6 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -1,5 +1,9 @@
 <div class="header position-fixed top-0">
 	<h1 class="font-size-28 font-weight-semibold">Notes</h1>
+	
+	<div class="position-relative">
+		<a href="#" class="button right-button">Save</a>
+	</div>
 </div>
 
 <div class="margin-top-70">