Position hero and navbar

.gitignore

@@ -4,6 +4,8 @@
 /public/storage
 /storage/*.key
 /vendor
+*.css
+*.css.map
 .env
 .env.backup
 .phpunit.result.cache
@@ -12,3 +14,4 @@ Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+package-lock.json

package.json

@@ -14,5 +14,8 @@
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.19",
         "postcss": "^8.1.14"
+    },
+    "dependencies": {
+        "browsersync": "0.0.1-security"
     }
 }

public/main.js

@@ -1,19 +1,11 @@
 const Counter = {
-	  data() {
-		  return {
-				        counter: 0
-				      }
-		    }
+	  data() { return { counter: 0 } }
 }
 
 Vue.createApp(Counter).mount('#counter')
 
 const AttributeBindingApp = {
-	  data() {
-		      return {
-				        message: 'You loaded this page on ' + new Date().toLocaleString()
-				      }
-		    }
-}
+	data() { return {
+		message: 'You loaded this page on ' + new Date().toLocaleString()}}}
 
 Vue.createApp(AttributeBindingApp).mount('#bind-attribute')

resources/build.sh

@@ -1,16 +1,18 @@
 #!/bin/sh
 
+project=$HOME/projects/trendplays
+
 watch() {
-	npx browser-sync start --proxy 'localhost:8000' -w --files assets views sass &
+	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss &
 	pid=$!
-	sass --load-path=sass --watch --error-css scss/main.scss ../public/main.css &
+	sass --load-path=sass --watch --error-css $project/resources/scss/main.scss $project/public/main.css &
 	pid="$pid $!"
 	trap "kill -TERM $pid" 0 1 2 15
 	wait
 }
 
 once() {
-	sass --load-path=sass scss/main.scss ../public/main.css
+	sass --load-path=sass $project/resources/scss/main.scss $project/public/main.css
 }
 
 deploy() {

resources/scss/main.scss

@@ -15,5 +15,92 @@ h1 {
 	color: black;
 }
 a {
-	// text-decoration: none;
+	text-decoration: none;
+}
+
+nav {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+	justify-content: space-between;
+	// background-color: transparent;
+}
+
+nav h1 {
+	margin: 4px 10px 0;
+}
+
+nav #logo {
+	margin-right: 50px;
+}
+
+nav form {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+nav form div {
+	// width: 10em;
+	margin: 0 10px;
+}
+
+nav form button {
+	min-width: 5em;
+}
+
+nav .register-button {
+	// width: 5em;
+	display: block;
+	margin: 0 20px;
+}
+
+@media (max-width: 720px) {
+	nav { display: block; }
+
+	nav form {
+		display: block;
+		width: 190px;
+		margin-left: auto;
+		margin-right: auto;
+		align-items: center;
+	}
+	nav form div {
+		margin: 10px auto;
+	}
+	nav div label,input {
+		display: block;
+	}
+	nav .register-button {
+		margin: 8px 0;
+	}
+}
+
+div.landing-hero {
+	top: 0;
+	height: 60vh;
+	background-color: orange;
+}
+
+div.hero-filter {
+	width: 100%;
+	height: 100%;
+}
+
+div.hero-filter h2 {
+	width: 10em;
+	font-size: 2.4em;
+	position: absolute;
+	top: 15%;
+	margin-left: 3%;
+}
+
+div.errors {
+	background-color: red;
+	height: 50px;
+	position: absolute;
+	width: 100%;
+	top: 50px;
 }

resources/views/home.blade.php

@@ -11,12 +11,10 @@
 	@parent
 	<div class='landing-hero'>
 		<div class='hero-filter'>
-			<h2>The Web's #1 Content Promoter.</h2>
+			<h2>The web's #1 content promoter</h2>
 		</div>
 	</div>
 	<section class="about-us">
-		<h2>Elit</h2>
-		<p>Dolor molestiae quos architecto nesciunt enim! Sit corrupti voluptas
 		aliquam aperiam maiores iure aliquam aut Voluptatem quas deserunt iure non sunt
 		Esse laborum corporis explicabo eos numquam. Fugit ad ex?
 		</p>

resources/views/master.blade.php

@@ -18,14 +18,19 @@
 		@guest
 		<form class= 'login' method='POST'>
 			@csrf
+			<div>
 			<label for='sender_email'>Email</label>
 			<input required type='email' name='sender_email' placeholder=''
 spellcheck='false'>
+			</div>
+			<div>
 			<label for='sender_password'>Password</label>
 			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
+			</div>
 			<button class='login-button'type="login">Log in</button>
-		</form>
 			<a href='/register' class='register-button' type="login">Register</a>
+		</form>
+			
 		@endguest
 			<span class="icon-bar"></span>
 			<!-- probably not needed -->

resources/views/panel.blade.php

@@ -15,6 +15,7 @@
 	<nav class="sidebar">
 	<a href="/panel">Summary<div><img src="" alt=""></div></a>
 	<a href="/panel/orders">Orders<div><img src="" alt=""></div></a>
+	<a href="/panel/billing">Billing<div><img src="" alt=""></div></a>
 	<a href="/panel/help">Help<div><img src="" alt=""></div></a>
 	<a href="/panel/admin">Administrator<div><img src="" alt=""></div></a>
 	</nav>