Tweak auth

spatie · Apr 18, 2019 · 23ddf2c · 23ddf2c
1 parent 1d6bdc0
commit 23ddf2c
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -25,5 +25,8 @@
     "resolve-url-loader": "2.3.1",
     "tailwindcss": "^0.7.4",
     "vue-template-compiler": "^2.6.6"
+  },
+  "dependencies": {
+    "postcss-color-mod-function": "^3.0.3"
   }
 }
diff --git a/resources/css/components/layout.css b/resources/css/components/layout.css
@@ -40,5 +40,6 @@
 
     @screen md {
         grid-template-rows: 1fr;
+        z-index: 2;
     }
 }
diff --git a/resources/css/components/link.css b/resources/css/components/link.css
@@ -4,7 +4,7 @@
     transition: color 0.1s ease, text-decoration-color 0.1s ease;
     text-decoration: underline;
     text-decoration-skip-ink: auto;
-    text-decoration-color: config('colors.blue-lightest');
+    text-decoration-color: color-mod(config('colors.blue') a(0.5));
 
     &:focus {
         outline: 0;
@@ -21,9 +21,18 @@
 
 .link.text-grey {
     @apply text-grey;
-    text-decoration-color: config('colors.grey-lighter');
+    text-decoration-color: color-mod(config('colors.grey') a(0.5));
 
     &:hover {
         text-decoration-color: config('colors.grey');
     }
 }
+
+.link.text-grey-lightest {
+    @apply text-grey-lightest;
+    text-decoration-color: color-mod(config('colors.grey-lightest') a(0.5));
+
+    &:hover {
+        text-decoration-color: config('colors.grey-lightest');
+    }
+}
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -1,4 +1,4 @@
-@extends('front.layouts.main')
+@extends('front.layouts.auth')
 
 @section('content')
 
@@ -49,7 +49,7 @@
     </div>
 
     @if (Route::has('password.request'))
-        <div class="mt-16 text-center markup">
+        <div class="mt-8 text-center markup">
             <a class="link text-grey" href="{{ route('password.request') }}">
                 {{ __('Forgot your password?') }}
             </a>

diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
@@ -1,4 +1,4 @@
-@extends('front.layouts.main')
+@extends('front.layouts.auth')
 
 @section('content')
 

diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
@@ -1,4 +1,4 @@
-@extends('front.layouts.main')
+@extends('front.layouts.auth')
 
 @section('content')
 

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -1,4 +1,4 @@
-@extends('front.layouts.main')
+@extends('front.layouts.auth')
 
 @section('content')
 
@@ -57,7 +57,7 @@
         </form>
     </div>
 
-    <div class="mt-16 text-center markup">
+    <div class="mt-8 text-center markup">
         <a class="link text-grey" href="{{ route('login') }}">
             {{ __('Already have an account? Log in') }}
         </a>

diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
@@ -1,4 +1,4 @@
-@extends('front.layouts.main')
+@extends('front.layouts.auth')
 
 @section('content')  
 

diff --git a/resources/views/front/about.blade.php b/resources/views/front/about.blade.php
@@ -1,7 +1,9 @@
 @extends('front.layouts.main')
 
 @section('content')
-<h1>About</h1>
+<article class="max-w-lg">
+    <h1>{{ __('About') }}</h1>
 
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus ad aliquam amet architecto deserunt doloremque dolores ducimus eius impedit laudantium obcaecati optio perferendis quibusdam reiciendis, sed sit veniam, voluptatibus.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus ad aliquam amet architecto deserunt doloremque dolores ducimus eius impedit laudantium obcaecati optio perferendis quibusdam reiciendis, sed sit veniam, voluptatibus.
+</article>
 @endsection
diff --git a/resources/views/front/layouts/app.blade.php b/resources/views/front/layouts/app.blade.php
@@ -38,7 +38,16 @@
         <div id="app" class="layout">
             @include('front/layouts/partials/nav')
 
-            @yield('main')
+            <main class="layout-content">
+                <div class="flex justify-end z-10 p-8 | md:hidden">
+                    <div class="text-grey-darker" style="width: 12rem">
+                        @include('front/layouts/partials/logo')
+                    </div> 
+                </div>
+                <div> 
+                    @yield('main')
+                </div>
+            </main>
         </div>
     </body>
 </html>
diff --git a/resources/views/front/layouts/auth.blade.php b/resources/views/front/layouts/auth.blade.php
@@ -0,0 +1,13 @@
+@extends('front.layouts.app')
+
+@section('main')
+
+    <div class="sticky grid pin-t px-8 py-16 | md:p-16 md:min-h-screen md:justify-start md:content-center">
+        @include('front.layouts.partials.unverified-email-warning')
+        @include('front.layouts.partials.flashMessage')
+        <div class="md:-ml-24">    
+            @yield('content')
+        </div>
+    </div>
+
+@endsection
diff --git a/resources/views/front/layouts/main.blade.php b/resources/views/front/layouts/main.blade.php
@@ -1,19 +1,12 @@
 @extends('front.layouts.app')
 
 @section('main')
-<main class="layout-content">
-    <div class="flex justify-end p-8 | md:hidden">
-        <div class="text-grey-darker" style="width: 12rem">
-            @include('front/layouts/partials/logo')
-        </div> 
-    </div>
-    <div> 
-        <div class="sticky grid pin-t p-8 | md:p-16 md:min-h-screen md:place-content-center">
-            @include('front.layouts.partials.unverified-email-warning')
-            @include('front.layouts.partials.flashMessage')
-
-            @yield('content')
-        </div>
+
+    <div class="p-8 | md:p-16">
+        @include('front.layouts.partials.unverified-email-warning')
+        @include('front.layouts.partials.flashMessage')
+
+        @yield('content')
     </div>
-</main>
+
 @endsection
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -15,6 +15,7 @@ mix.options({
         require('postcss-easy-import')(),
         require('tailwindcss')('./tailwind.js'),
         require('postcss-nested'),
+        require('postcss-color-mod-function'),
     ],
 
     // Since we don't do any image preprocessing and write url's that are

diff --git a/yarn.lock b/yarn.lock
@@ -700,6 +700,11 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2740,6 +2745,11 @@ findup-sync@^2.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+  integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -4807,6 +4817,15 @@ postcss-calc@^7.0.1:
     postcss-selector-parser "^5.0.0-rc.4"
     postcss-value-parser "^3.3.1"
 
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
 postcss-colormin@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
@@ -5175,6 +5194,15 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-values-parser@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss@^5.0.8, postcss@^5.2.4:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
@@ -5194,7 +5222,7 @@ postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.23, postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.5:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5:
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
   integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==