From ba1bff0f4ff0e8f2fead8c4e9fd347b83021a2b0 Mon Sep 17 00:00:00 2001 From: Jeffrey Way Date: Tue, 25 Nov 2014 15:13:55 -0500 Subject: [PATCH 1/2] Work on welcome page --- public/css/app.css | 48 ++++++++++++++ resources/assets/sass/app.scss | 6 +- 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 | 64 ++++++++++++++++++- 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 314f08f2..eaf8c2cd 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -4614,5 +4614,53 @@ .navbar-avatar { 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 0ceaa06f..ed549cb3 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -1,8 +1,10 @@ -$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; diff --git a/resources/assets/sass/pages/_welcome.scss b/resources/assets/sass/pages/_welcome.scss new file mode 100644 index 00000000..45fd6093 --- /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 00000000..36a32e1a --- /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 00000000..d20bba34 --- /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 e631e3f3..35ad11bd 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 302e6df5..d5214f24 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -1,5 +1,65 @@ @extends('layouts.app') -@section('content') -Test +@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') +
    +
  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 From 799e630965770fe09ba476ef619f07e833893908 Mon Sep 17 00:00:00 2001 From: Jeffrey Way Date: Tue, 25 Nov 2014 15:24:49 -0500 Subject: [PATCH 2/2] Add a couple quick mobile tweaks --- public/css/app.css | 6 ++++++ resources/assets/sass/pages/_welcome.scss | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/public/css/app.css b/public/css/app.css index eaf8c2cd..85579527 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -4634,6 +4634,9 @@ .steps { padding-left: 0; list-style: none; counter-reset: welcome-steps; } + @media (max-width: 991px) { + .steps { + max-width: 100%; } } .steps > .steps__item { margin-bottom: 2.5em; @@ -4654,6 +4657,9 @@ .steps > .steps__item { font: bold 2em monospace; text-align: center; line-height: 49px; } + @media (max-width: 991px) { + .steps > .steps__item:before { + display: none; } } .steps > .steps__item .body { float: left; } .steps > .steps__item h2 { diff --git a/resources/assets/sass/pages/_welcome.scss b/resources/assets/sass/pages/_welcome.scss index 45fd6093..f73c98be 100644 --- a/resources/assets/sass/pages/_welcome.scss +++ b/resources/assets/sass/pages/_welcome.scss @@ -3,6 +3,10 @@ padding-left: 0; list-style: none; counter-reset: welcome-steps; + + @media (max-width: 991px) { + max-width: 100%; + } } .steps > .steps__item { @@ -26,6 +30,10 @@ font: bold 2em monospace; text-align: center; line-height: 49px; + + @media (max-width: 991px) { + display: none; + } } .body {