From 69d6a373fa713aedc952968c4bf7e058db2236c9 Mon Sep 17 00:00:00 2001 From: Audrey Lievremont Date: Wed, 9 Nov 2016 22:53:33 +0100 Subject: [PATCH] Utilisation de sass + gulp --- .travis.yml | 5 +- gulpfile.js | 10 +- package.json | 5 +- public/css/app.css | 32 ---- public/css/ej.css | 147 ------------------ public/css/hj.css | 114 -------------- resources/assets/sass/_app.scss | 32 ++++ resources/assets/sass/_variables.scss | 36 ----- resources/assets/sass/app.scss | 9 -- resources/assets/sass/ej.scss | 175 ++++++++++++++++++++++ resources/assets/sass/hj.scss | 123 +++++++++++++++ resources/views/ej/chapitre.blade.php | 2 +- resources/views/ej/home.blade.php | 5 +- resources/views/ej/posts/create.blade.php | 3 +- resources/views/home.blade.php | 4 +- resources/views/includes/head.blade.php | 13 +- resources/views/layouts/ej.blade.php | 1 - resources/views/layouts/hj.blade.php | 1 - 18 files changed, 351 insertions(+), 366 deletions(-) delete mode 100644 public/css/app.css delete mode 100644 public/css/ej.css delete mode 100644 public/css/hj.css create mode 100644 resources/assets/sass/_app.scss delete mode 100644 resources/assets/sass/app.scss create mode 100644 resources/assets/sass/ej.scss create mode 100644 resources/assets/sass/hj.scss diff --git a/.travis.yml b/.travis.yml index b4fd72d..7d6bfee 100644 --- a/.travis.yml +++ b/.travis.yml @@ -22,4 +22,7 @@ deploy: app: gentle-dusk-79476 on: master run: - - php artisan migrate \ No newline at end of file + - php artisan migrate + - npm install --global gulp-cli + - npm install + - gulp --production \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 04d503d..17439c2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -14,6 +14,10 @@ require('laravel-elixir-vue'); */ elixir(mix => { - mix.sass('app.scss') - .webpack('app.js'); -}); + mix.sass('ej.scss', 'public/css/ej.css'); + mix.sass('hj.scss', 'public/css/hj.css'); + mix.browserSync({ + proxy: 'utopya.dev' + }); +}) +; diff --git a/package.json b/package.json index d490671..1f3aa8d 100644 --- a/package.json +++ b/package.json @@ -5,14 +5,13 @@ "dev": "gulp watch" }, "devDependencies": { - "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-9", + "laravel-elixir-browsersync-official": "^1.0.0", "laravel-elixir-vue": "^0.1.4", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.14.0", - "vue": "^1.0.26", - "vue-resource": "^0.9.3" + "purecss": "^0.6.0" } } diff --git a/public/css/app.css b/public/css/app.css deleted file mode 100644 index 4845b37..0000000 --- a/public/css/app.css +++ /dev/null @@ -1,32 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.pure-g [class*="pure-u"] { - font-family: 'Open Sans', sans-serif; -} - -.pure-form select { - height: inherit; -} - -form.pure-form-stacked button { - margin-top: 1rem; -} - -.error-field { - visibility: hidden; - font-size: 0.8em; - color: rgb(223, 117, 20); - margin-top: 0; - margin-bottom: 0; - line-height: 0.8em; -} - -.error-field.error { - visibility: visible; -} \ No newline at end of file diff --git a/public/css/ej.css b/public/css/ej.css deleted file mode 100644 index f8a7280..0000000 --- a/public/css/ej.css +++ /dev/null @@ -1,147 +0,0 @@ -body { - font-family: 'Open Sans', sans-serif; - background-color: #fffde7; -} - -.pure-g [class*="pure-u"]{ - font-family: 'Open Sans', sans-serif; -} - -h2 { - font-family: 'Satisfy', cursive; -} -.pure-g.ej-template { - display: flex; -} - -header { - background: url('../images/dark_wood.png'); - padding: 1rem; - box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); - line-height: 2.5rem; -} - -header a { - color: white; - font-family: 'Satisfy', cursive; - font-size: 3.5em; -} - -.right-pane { - background: url('../images/dark_wood.png'); - padding: 1rem; - padding-bottom: 2rem; - text-align: center; - border-radius: 0 0 0 15px; - box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); - position: relative; - min-height: 500px; -} -.right-pane .perso .name{ - font-family: 'Satisfy', cursive; - color: white; - font-size: 3em; - line-height: 2.5rem; -} -.right-pane .perso i { - font-size: 18em; - color: white; -} -.right-pane .bottom { - position: absolute; - bottom: 1rem; - right: 1rem; - left: 1rem; - text-align: right; -} -.right-pane .bottom a { - width: 100%; -} -a { - text-decoration: none; - color: #ffecb3; -} -.left-pane div.content { - padding: 1rem 0.5rem 0.5rem 0.5rem; - color: black; -} - -.center-content { - margin-left: auto; - margin-right: auto; - max-width: 768px; -} - -.collection { - margin: 0.5rem 0 1rem 0; - border: 1px solid #e0e0e0; - overflow: hidden; - position: relative; - background: url('../images/lightpaperfibers.png'); -} - -.collection .collection-item { - line-height: 1.5rem; - padding: 0.7rem 1rem; - border-bottom: 1px solid #e0e0e0; -} - -.collection .collection-item:last-child { - border-bottom: none; -} - -.collection .collection-item a { - color: black; -} -.collection .collection-item .titre { - display: block; - width: 100%; - font-size: 1.5em; -} -.collection .collection-item .description { - font-style: italic; -} - -.chapitre { - overflow: hidden; - position: relative; -} - -.chapitre .post { - line-height: 1.5rem; - padding: 0.5rem 1rem; - border: 1px solid #e0e0e0; - background: url('../images/lightpaperfibers.png'); - margin-bottom: 1.5rem; -} - -.chapitre .post .entete { - font-family: 'Satisfy', cursive; - font-size: 1.8em; - margin-bottom: 1rem; - margin-top: 0.5rem; -} - -.chapitre .post .contenu { - font-size: 1.2em; - line-height: 1.8rem; -} - -ul { - padding: 0; - list-style-type: none; -} - -.pure-button-primary, a.pure-button-primary { - background-color: #00695c; - color: white; -} - -input, textarea { - width: 100%; -} - -textarea#texte { - height: 500px; - margin-bottom: 1rem; -} \ No newline at end of file diff --git a/public/css/hj.css b/public/css/hj.css deleted file mode 100644 index ba6cab3..0000000 --- a/public/css/hj.css +++ /dev/null @@ -1,114 +0,0 @@ -body { - line-height: 1.7em; - color: #7f8c8d; - font-size: 14px; - -} - -.pure-menu.pure-menu-fixed { - /* Fixed menus normally have a border at the bottom. */ - border-bottom: none; - /* I need a higher z-index here because of the scroll-over effect. */ - z-index: 4; -} - -.hj-menu { - background: #2d3e50; - padding: 0.5em; - box-shadow: 0 1px 1px rgba(0,0,0, 0.10); -} - -.hj-menu .pure-menu-heading { - color: white; - font-weight: 400; - font-size: 200%; - float: left; -} - -.hj-menu a { - color: white; -} - -.hj-menu ul { - float: right -} - -/* - * -- CONTENT STYLES -- - * This represents the content area (everything below the blue section) - */ - -.content-wrapper { - padding-top: 90px; - width: 100%; - min-height: 12%; - z-index: 2; - background: white; -} - -.content { - padding: 1em; -} - -.content-head { - font-weight: 400; - text-transform: uppercase; - letter-spacing: 0.1em; - margin: 2em 0 1em; -} - -.is-center { - text-align: center; -} - -form { - margin-left: auto; - margin-right: auto; - max-width: 768px; -} - -.message { - background-color: #fff176; - border: 1px solid #e0e0e0; - padding: 0.2rem 0.5rem; - margin: 0.2rem; - border-radius: 5px; -} -.center-content { - margin-left: auto; - margin-right: auto; - max-width: 768px; -} - -.collection { - margin: 0.5rem 0 1rem 0; - border: 1px solid #e0e0e0; - overflow: hidden; - position: relative; -} - -.collection .collection-item { - line-height: 1.5rem; - padding: 10px 20px; - border-bottom: 1px solid #e0e0e0; -} - -.collection-item div:first-child { - padding-top: 5px; -} - -.collection-item .play { - float: right; -} - -.collection .collection-item:last-child { - border-bottom: none; -} -ul { - padding: 0; - list-style-type: none; -} - -legend { - font-size: 1.5em; -} \ No newline at end of file diff --git a/resources/assets/sass/_app.scss b/resources/assets/sass/_app.scss new file mode 100644 index 0000000..bc983bb --- /dev/null +++ b/resources/assets/sass/_app.scss @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.pure-g [class*="pure-u"] { + font-family: 'Open Sans', sans-serif; +} + +.pure-form select { + height: inherit; +} + +form.pure-form-stacked button { + margin-top: 1rem; +} + +.error-field { + visibility: hidden; + font-size: 0.8em; + color: rgb(223, 117, 20); + margin-top: 0; + margin-bottom: 0; + line-height: 0.8em; +} + +.error-field.error { + visibility: visible; +} \ No newline at end of file diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index cce4558..8b13789 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -1,37 +1 @@ -// Body -$body-bg: #f5f8fa; - -// Borders -$laravel-border-color: darken($body-bg, 10%); -$list-group-border: $laravel-border-color; -$navbar-default-border: $laravel-border-color; -$panel-default-border: $laravel-border-color; -$panel-inner-border: $laravel-border-color; - -// Brands -$brand-primary: #3097D1; -$brand-info: #8eb4cb; -$brand-success: #2ab27b; -$brand-warning: #cbb956; -$brand-danger: #bf5329; - -// Typography -$font-family-sans-serif: "Raleway", sans-serif; -$font-size-base: 14px; -$line-height-base: 1.6; -$text-color: #636b6f; - -// Navbar -$navbar-default-bg: #fff; - -// Buttons -$btn-default-color: $text-color; - -// Inputs -$input-border: lighten($text-color, 40%); -$input-border-focus: lighten($brand-primary, 25%); -$input-color-placeholder: lighten($text-color, 30%); - -// Panels -$panel-default-heading-bg: #fff; diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss deleted file mode 100644 index 35ce2dc..0000000 --- a/resources/assets/sass/app.scss +++ /dev/null @@ -1,9 +0,0 @@ - -// Fonts -@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600); - -// Variables -@import "variables"; - -// Bootstrap -@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; diff --git a/resources/assets/sass/ej.scss b/resources/assets/sass/ej.scss new file mode 100644 index 0000000..b55af43 --- /dev/null +++ b/resources/assets/sass/ej.scss @@ -0,0 +1,175 @@ + +// Fonts +@import url(https://fonts.googleapis.com/css?family=Satisfy|Open+Sans); + +// Variables +@import "variables"; + +// Purecss +@import "node_modules/purecss/build/pure"; +@import "node_modules/purecss/build/grids-responsive"; + +@import "app"; + +html { + font-size: 15px; + font-family: 'Open Sans', sans-serif; + background-color: #fffde7; +} +@media screen and (max-width: 568px){ + html { + font-size: 13px; + } +} + +.pure-g [class*="pure-u"]{ + font-family: 'Open Sans', sans-serif; +} +h1 { + font-size: 2rem; +} +h2 { + font-family: 'Satisfy', cursive; + font-size: 1.8rem; +} +a { + text-decoration: none; +} +.pure-g.ej-template { + display: flex; +} + +header { + background: url('../images/dark_wood.png'); + padding: 1rem; + box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); + line-height: 2.5rem; + + a { + color: white; + font-family: 'Satisfy', cursive; + font-size: 2.5rem; + } +} + +.right-pane { + background: url('../images/dark_wood.png'); + padding: 1rem; + padding-bottom: 2rem; + text-align: center; + border-radius: 0 0 0 15px; + box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); + position: relative; + min-height: 500px; + + .perso .name{ + font-family: 'Satisfy', cursive; + color: white; + font-size: 2rem; + line-height: 2.5rem; + } + .perso i { + font-size: 18em; + color: white; + } + .bottom { + position: absolute; + bottom: 1rem; + right: 1rem; + left: 1rem; + text-align: right; + } + .bottom a { + width: 100%; + } +} + +.left-pane div.content { + padding: 1.5rem 0.5rem 0.5rem 0.5rem; + color: black; + + .center-content { + margin-left: auto; + margin-right: auto; + max-width: 768px; + } + + .collection { + margin: 0.5rem 0 1rem 0; + border: 1px solid #e0e0e0; + overflow: hidden; + position: relative; + background: url('../images/lightpaperfibers.png'); + } + + .collection .collection-item { + line-height: 1.5rem; + padding: 0.7rem 1rem; + border-bottom: 1px solid #e0e0e0; + } + + .collection .collection-item:last-child { + border-bottom: none; + } + + .collection .collection-item a { + color: black; + } + .collection .collection-item .titre { + display: block; + width: 100%; + font-size: 1.5em; + } + .collection .collection-item .description { + font-style: italic; + } + + .chapitre { + overflow: hidden; + position: relative; + } + + .chapitre .post { + line-height: 1.5rem; + padding: 0.5rem 1rem; + border: 1px solid #e0e0e0; + background: url('../images/lightpaperfibers.png'); + margin-bottom: 1.5rem; + } + + .chapitre .post .entete { + font-family: 'Satisfy', cursive; + font-size: 1.8em; + margin-bottom: 1rem; + margin-top: 0.5rem; + } + + .chapitre .post .contenu { + font-size: 1.2em; + line-height: 1.8rem; + } + + ul { + padding: 0; + list-style-type: none; + } + + .pure-button-primary, a.pure-button-primary { + background-color: #00695c; + color: white; + } + + input, textarea { + width: 100%; + } + + textarea#texte { + height: 500px; + margin-bottom: 1rem; + } + + h2 a { + color: black; + text-decoration: underline; + } +} diff --git a/resources/assets/sass/hj.scss b/resources/assets/sass/hj.scss new file mode 100644 index 0000000..b0ebc89 --- /dev/null +++ b/resources/assets/sass/hj.scss @@ -0,0 +1,123 @@ +// Fonts +@import url(https://fonts.googleapis.com/css?family=Open+Sans); + +// Variables +@import "variables"; + +// Purecss +@import "node_modules/purecss/build/pure"; +@import "node_modules/purecss/build/grids-responsive"; + +@import "app"; + + +body { + line-height: 1.7em; + color: #7f8c8d; + font-size: 14px; + +} + +.pure-menu.pure-menu-fixed { + /* Fixed menus normally have a border at the bottom. */ + border-bottom: none; + /* I need a higher z-index here because of the scroll-over effect. */ + z-index: 4; +} + +.hj-menu { + background: #2d3e50; + padding: 0.5em; + box-shadow: 0 1px 1px rgba(0,0,0, 0.10); +} + +.hj-menu .pure-menu-heading { + color: white; + font-weight: 400; + font-size: 200%; + float: left; +} + +.hj-menu a { + color: white; +} + +.hj-menu ul { + float: right +} + +/* + * -- CONTENT STYLES -- + * This represents the content area (everything below the blue section) + */ + +.content-wrapper { + padding-top: 90px; + width: 100%; + min-height: 12%; + z-index: 2; + background: white; +} + +.content { + padding: 1em; +} + +.content-head { + font-weight: 400; + text-transform: uppercase; + letter-spacing: 0.1em; + margin: 2em 0 1em; +} + +.is-center { + text-align: center; +} + +form { + margin-left: auto; + margin-right: auto; + max-width: 768px; +} + +.message { + background-color: #fff176; + border: 1px solid #e0e0e0; + padding: 0.2rem 0.5rem; + margin: 0.2rem; + border-radius: 5px; +} +.center-content { + margin-left: auto; + margin-right: auto; + max-width: 768px; +} + +.collection { + margin: 0.5rem 0 1rem 0; + border: 1px solid #e0e0e0; + overflow: hidden; + position: relative; +} + +.collection .collection-item { + line-height: 1.5rem; + padding: 10px 20px; + border-bottom: 1px solid #e0e0e0; +} + +.collection-item div:first-child { + padding-top: 5px; +} + +.collection-item .play { + float: right; +} + +.collection .collection-item:last-child { + border-bottom: none; +} +ul { + padding: 0; + list-style-type: none; +} \ No newline at end of file diff --git a/resources/views/ej/chapitre.blade.php b/resources/views/ej/chapitre.blade.php index d63b686..b1fd39c 100644 --- a/resources/views/ej/chapitre.blade.php +++ b/resources/views/ej/chapitre.blade.php @@ -3,7 +3,7 @@ @section('content')

Chapitre: « {{ $chapitre->titre }} »

-

{{ $lieu->nom }}

+

id)}}">{{ $lieu->nom }}

@if (count($posts) > 0)
@foreach ($posts as $post) diff --git a/resources/views/ej/home.blade.php b/resources/views/ej/home.blade.php index cbb7c84..3845805 100644 --- a/resources/views/ej/home.blade.php +++ b/resources/views/ej/home.blade.php @@ -2,16 +2,15 @@ @section('content')
-

Les lieux

@if (count($lieux) > 0) -
+
+ @endif
@endsection diff --git a/resources/views/ej/posts/create.blade.php b/resources/views/ej/posts/create.blade.php index 465d907..fb554fd 100644 --- a/resources/views/ej/posts/create.blade.php +++ b/resources/views/ej/posts/create.blade.php @@ -9,7 +9,8 @@ chapitre @endif -

{{$lieu->nom}}@if($chapitre), chapitre « {{$chapitre->titre}} »@endif

+

id)}}">{{$lieu->nom}} + @if($chapitre), chapitre « {{$chapitre->titre}} »@endif

{{ csrf_field() }} @if($chapitre) diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index cd183c0..b9d55b6 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -9,7 +9,7 @@
@endif @if (count($persos) > 0) -
+
    @foreach ($persos as $perso)
  • {{ $perso->nom }}, {{ $perso->race }}
    @@ -17,7 +17,7 @@
@endforeach -
+ @endif Nouveau personnage diff --git a/resources/views/includes/head.blade.php b/resources/views/includes/head.blade.php index ae43a6c..79e7f5c 100644 --- a/resources/views/includes/head.blade.php +++ b/resources/views/includes/head.blade.php @@ -10,19 +10,8 @@ Utopya - - - - - - - - - - +