diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 0407ab5..7581bcf 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -5,6 +5,7 @@ $body-bg: #f8fafc; $font-family-sans-serif: 'Nunito', sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; +$enable-responsive-font-sizes: true; // Colors $blue: #3490dc; @@ -17,3 +18,7 @@ $yellow: #ffed4a; $green: #38c172; $teal: #4dc0b5; $cyan: #6cb2eb; + +$gray: #636b6f; +$lightGray: #d0d3d4; +$darkGray: #3c3c3c; diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 3193ffa..99edf8e 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -1,8 +1,83 @@ // Fonts -@import url('https://fonts.googleapis.com/css?family=Nunito'); +@import url("https://fonts.googleapis.com/css?family=Nunito"); // Variables -@import 'variables'; +@import "variables"; // Bootstrap -@import '~bootstrap/scss/bootstrap'; +@import "~bootstrap/scss/bootstrap"; + +html, +body { + background-color: #fff; + color: $gray; + font-family: $font-family-sans-serif; + font-weight: 200; + height: 100vh; + margin: 0; +} + +.full-height { + height: 100vh; +} + +.flex-center { + align-items: center; + display: flex; + justify-content: center; +} + +.position-ref { + position: relative; +} + +.top-right { + position: absolute; + right: 0px; + top: 0px; +} + +.links { + padding: 16px; + > a { + color: $gray; + padding: 0 25px; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.1rem; + text-decoration: none; + text-transform: uppercase; + } +} + +.choices { + > .choice { + @include border-radius(4px); + border: 1px solid $gray; + padding: 4px; + cursor: pointer; + &:hover { + background-color: $lightGray; + } + > .key > span { + display: block; + margin-right: -15px; + margin-left: -15px; + @include border-radius(4px); + border: 1px solid $gray; + background-color: $lightGray; + text-align: center; + } + &.selected { + border: 2px solid $darkGray; + background-color: $lightGray; + > .key > span { + background-color: $darkGray; + color: #fff; + } + } + > .title { + @include rfs(18); + } + } +} diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 05dfca9..30fa099 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -1,23 +1,61 @@ @extends('layouts.app') @section('content') -
-
-
-
-
Dashboard
- -
- @if (session('status')) - - @endif - - You are logged in! +@include('nav', ['class' => 'd-block d-sm-none text-right']) +
+ @include('nav', ['class' => 'd-none d-sm-block top-right']) +
+
+
+

+ What's your favorite programming language? +

+
+
+
+
+

+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. +

+
+
+
+
+
+
+
A
+
PHP
+
+
+
+
B
+
C#
+
+
+
+
C
+
Python
+
+
+
+
D
+
Javascript
+
+
+
+
+ Please select one +
+
+
+
+
+ +
+
@endsection diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 9224ba3..59f555c 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,80 +1,27 @@ - - - + + + - - + + - {{ config('app.name', 'Laravel') }} + {{ config('app.name', 'Laravel') }} - - + + - - - + + + - - - - -
- - -
+ + + + +
@yield('content') -
-
- +
+ diff --git a/resources/views/layouts/nav.blade.php b/resources/views/layouts/nav.blade.php new file mode 100644 index 0000000..7fa0127 --- /dev/null +++ b/resources/views/layouts/nav.blade.php @@ -0,0 +1,50 @@ + \ No newline at end of file diff --git a/resources/views/nav.blade.php b/resources/views/nav.blade.php new file mode 100644 index 0000000..cc04f01 --- /dev/null +++ b/resources/views/nav.blade.php @@ -0,0 +1,13 @@ +@if (Route::has('login')) +
+ @auth + Home + @else + Login + + @if (Route::has('register')) + Register + @endif + @endauth +
+@endif \ No newline at end of file