From d4c2ecc4183d71bb89955e4685fbbe12b87fc030 Mon Sep 17 00:00:00 2001 From: Jeffrey Way Date: Tue, 25 Nov 2014 15:09:51 -0500 Subject: [PATCH] Work on welcome page --- public/css/app.css | 48 ++++++++++++++ resources/assets/sass/app.scss | 8 ++- resources/assets/sass/pages/_welcome.scss | 43 +++++++++++++ resources/assets/sass/partials/_banner.scss | 18 ++++++ .../assets/sass/partials/_variables.scss | 3 + resources/views/layouts/app.blade.php | 11 ++-- resources/views/welcome.blade.php | 62 ++++++++++++++++++- 7 files changed, 182 insertions(+), 11 deletions(-) create mode 100644 resources/assets/sass/pages/_welcome.scss create mode 100644 resources/assets/sass/partials/_banner.scss create mode 100644 resources/assets/sass/partials/_variables.scss diff --git a/public/css/app.css b/public/css/app.css index 314f08f20d9..eaf8c2cde8f 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -4614,5 +4614,53 @@ button.close { margin: -11px 10px -10px 0; padding: 0; } +.jumbotron { + background: #F55430; + color: #fde0da; + margin-top: -20px; } + +.jumbotron__header, .jumbotron h1 { + font-weight: bold; + color: white; + margin-top: 0; } + +.jumbotron__body { + max-width: 80%; + margin-bottom: 0; + line-height: 1.6em; } + +.steps { + max-width: 80%; + padding-left: 0; + list-style: none; + counter-reset: welcome-steps; } + +.steps > .steps__item { + margin-bottom: 2.5em; + padding: 19px; + border: 1px solid #eeeeee; + border-radius: 4px; + overflow: hidden; } + .steps > .steps__item:before { + content: counter(welcome-steps); + counter-increment: welcome-steps; + width: 50px; + height: 50px; + float: left; + margin-right: 1em; + background: #eeeeee; + border: 1px solid #d5d5d5; + border-radius: 50%; + font: bold 2em monospace; + text-align: center; + line-height: 49px; } + .steps > .steps__item .body { + float: left; } + .steps > .steps__item h2 { + font-weight: bold; + margin-top: 0; } + .steps > .steps__item p:last-child { + margin-bottom: 0; } + .fa-btn { margin-right: 10px; } diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 0ceaa06f484..74f23c3936f 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -1,9 +1,11 @@ -$font-family-sans-serif: "Lato", Helvetica, Arial, sans-serif; - +@import "partials/variables"; @import "bootstrap"; @import "partials/auth"; @import "partials/navigation"; +@import "partials/banner"; + +@import "pages/welcome"; .fa-btn { - margin-right: 10px; + margin-right: 10px; } diff --git a/resources/assets/sass/pages/_welcome.scss b/resources/assets/sass/pages/_welcome.scss new file mode 100644 index 00000000000..6c771be1920 --- /dev/null +++ b/resources/assets/sass/pages/_welcome.scss @@ -0,0 +1,43 @@ +.steps { + max-width: 80%; + padding-left: 0; + list-style: none; + counter-reset: welcome-steps; +} + +.steps > .steps__item { + margin-bottom: 2.5em; + padding: 19px; + border: 1px solid $gray-lighter; + border-radius: 4px; + overflow: hidden; + + // The step number. + &:before { + content: counter(welcome-steps); + counter-increment: welcome-steps; + width: 50px; + height: 50px; + float: left; + margin-right: 1em; + background: $gray-lighter; + border: 1px solid darken($gray-lighter, 10%); + border-radius: 50%; + font: bold 2em monospace; + text-align: center; + line-height: 49px; + } + + .body { + float: left; + } + + h2 { + font-weight: bold; + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } +} diff --git a/resources/assets/sass/partials/_banner.scss b/resources/assets/sass/partials/_banner.scss new file mode 100644 index 00000000000..c4eb48ae222 --- /dev/null +++ b/resources/assets/sass/partials/_banner.scss @@ -0,0 +1,18 @@ +.jumbotron { + background: $primary; + color: lighten($primary, 35%); + margin-top: -20px; +} + +.jumbotron__header, +.jumbotron h1 { + font-weight: bold; + color: white; + margin-top: 0; +} + +.jumbotron__body { + max-width: 80%; + margin-bottom: 0; + line-height: 1.6em; +} diff --git a/resources/assets/sass/partials/_variables.scss b/resources/assets/sass/partials/_variables.scss new file mode 100644 index 00000000000..d20bba3415e --- /dev/null +++ b/resources/assets/sass/partials/_variables.scss @@ -0,0 +1,3 @@ +$font-family-sans-serif: "Lato", Helvetica, Arial, sans-serif; + +$primary: #F55430; diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index e631e3f3c22..35ad11bd043 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -7,9 +7,6 @@ - - - Laravel Application @@ -29,7 +26,7 @@ + @yield('banner') -
+
@yield('content')
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 302e6df5e37..d5214f24bbd 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -1,5 +1,65 @@ @extends('layouts.app') +@section('banner') +
+
+

Welcome to Laravel 5!

+ +

+ Laravel is a web application framework with expressive, elegant syntax. We believe development + must be an enjoyable, creative experience to be truly fulfilling. +

+
+
+@stop + @section('content') -Test +
    +
  1. +
    +

    Have a Look Around

    + +

    + Review app/Http/Controllers/WelcomeController.php to learn + how this page was constructed. +

    +
    +
    2. + +
  2. +
    +

    Harness Your Skills

    + +

    + Once you've toyed around for a bit, you'll surely want to dig in and + learn more. Try: +

    + + +
    +
    3. + +
  3. +
    +

    Forge Ahead

    + +

    + Finished building your app? It's time to deploy! Laravel still has your back. Use Laravel Forge. +

    +
    +
    4. + +
  4. +
    +

    Profit

    + +

    + ...and go be with your family. +

    +
    +
    5. +
@stop