Change font and colors
MODIFY
public/style.css
public/style.css
}
body {
- font-family: BlinkMacSystemFont;
+ font-family: Muli;
+ background: #F1F5F8;
+}
+
+h1 {
+ margin-bottom: 24px;
}
a {
text-decoration: none;
}
+.box {
+ background: #FFF;
+ border-radius: 3px;
+}
+
+.box__section {
+ padding: 32px;
+}
+
label, input {
display: block;
}
label {
margin-bottom: 8px;
+ color: #989FA5;
}
input {
@@ -28,10 +43,15 @@ input[type=email], input[type=password] {
margin-bottom: 16px;
padding: 8px;
width: 100%;
- border: 1px solid #DDD;
+ border: 1px solid #E8ECEF;
border-radius: 3px;
}
+input[type=email]:focus, input[type=password]:focus {
+ outline: 0;
+ border-color: #2071F8;
+}
+
.navigation__wrapper, .body__wrapper {
margin: 0 auto;
width: 90%;
@@ -39,7 +59,7 @@ input[type=email], input[type=password] {
}
.navigation {
- background: #333;
+ background: #FFF;
}
.navigation__wrapper {
@@ -54,11 +74,11 @@ input[type=email], input[type=password] {
}
.navigation__wrapper ul li a {
- color: #DDD;
+ color: #989FA5;
}
.navigation__wrapper ul li a:hover {
- color: #FFF;
+ color: #2071F8;
}
.body__wrapper {

MODIFY
resources/views/dashboard.blade.php
resources/views/dashboard.blade.php
@extends('layout')
@section('body')
- Hello
+ <h1>Foo</h1>
+ <div class="box">
+ <div class="box__section">
+ <p>Bar</p>
+ </div>
+ </div>
@endsection

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
<html>
<head>
<title>Budget</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:300,300i" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>

MODIFY
resources/views/login.blade.php
resources/views/login.blade.php
@extends('layout')
@section('body')
+ <h1>Log in</h1>
+ <div class="box">
+ <div class="box__section">
<form method="POST">
{{ csrf_field() }}
<label>E-mail</label>
<input type="password" name="password" />
<input type="submit" value="Log in" />
</form>
+ </div>
+ </div>
@endsection

Change font and colors