WIP #2731 @9.5

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index ee8ca5bcd8f77d219f29529a9163587235c545d5..fefcb803beb6fe186c97caf8e5dac7d787a43aa3 100644 (file)
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Blade;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -23,6 +24,7 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        //
+        // Blade Component Aliases
+        Blade::component('components.button', 'button'); // @button / @endbutton
     }
 }

diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl
index 95d1dba0d8d7166d0cb72b84395eb7b823e3f1b2..9835876f8b2d76489dc2f8b61cebd78ec29c0bd4 100644 (file)
--- a/resources/styles/common/global.styl
+++ b/resources/styles/common/global.styl
@@ -10,6 +10,8 @@ p:not(:last-child)
   width: 100%
 
 // Overlapping content
+$overlap-amount = 10vw
+
 .overlap
   &-left
 
@@ -17,10 +19,10 @@ p:not(:last-child)
     //+above($breakpoint-columns)
 
     position: relative
-    constrain(left, -10vw)
+    constrain(left, - $overlap-amount)
+
+    width: calc(100% + $overlap-amount)
+    max-width: 672px
 
-    // Todo: decide if width should be increased by default or if this should be in an extra class? eg. .overlap-left-stretch?
-    //width: calc(100% + 10vw)
-    //
-    //+above($base-width)
-    //  width: s('calc(100% + %s)', $base-width * 0.1)
+    +above($base-width)
+      width: s('calc(100% + %s)', $base-width * 0.1)

diff --git a/resources/styles/common/headings.styl b/resources/styles/common/headings.styl
index 1dd524f1f1da75e5e81f7939155094b0e281a4bf..56570d800e75e4b0a9889b83032e7f97225a14f4 100644 (file)
--- a/resources/styles/common/headings.styl
+++ b/resources/styles/common/headings.styl
@@ -1,23 +1,36 @@
 // Headings
 h1, h2, h3, h4
   line-height: 1.2
+  margin-bottom: 1em
   @apply text-navy font-display font-semibold
 
-.h1
-  @apply text-6xl leading-tight relative
+.h1, .h2
+  @apply leading-tight relative
 
-  &:after
+  &:not(.simple):after
     content: ''
     display: block
+    background-color: theme('colors.blue')
+
+.h1
+  @apply text-6xl
+
+  &:after
     constrain(margin-top, 1vw)
     constrain(margin-bottom, 2.5vw)
     constrain(width, 10vw)
     height: 8px
-    background-color: theme('colors.blue')
 
   +below(1420px)
     @apply text-5xl
   +below(1000px)
     @apply text-4xl
 
+.h2
+  @apply text-4xl
 
+  &:after
+    constrain(margin-top, 1vw)
+    constrain(margin-bottom, 1vw)
+    constrain(width, 2.5vw)
+    height: 4px

diff --git a/resources/styles/common/links.styl b/resources/styles/common/links.styl
index e88224775d803f97c58cb7d62928408b32cdd28a..e1c54b751de5f9e449360145b58dd4b8df772ca9 100644 (file)
--- a/resources/styles/common/links.styl
+++ b/resources/styles/common/links.styl
@@ -27,3 +27,14 @@ a
       &:hover
         &:before
           transform: scaleX(1)
+
+
+      // Partial underline hover effect
+      &.partial-underline
+        overflow: hidden
+
+        &:before
+          constrain(width, 2.5vw)
+
+        &:hover > *
+          color: currentColor

diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl
index 40ec7efc765c47782c02ce1ce294b26de289c147..d7e96bbf751b93c2cb03ab65dd7393c73e836c6b 100644 (file)
--- a/resources/styles/common/setup.styl
+++ b/resources/styles/common/setup.styl
@@ -18,4 +18,4 @@ rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px
 
 // Lost Grid setup
 @lost gutter 5%
-//@lost flexbox no-flex // Use flexbox (set to no-flex to disable)
+@lost flexbox no-flex // Use flexbox (set to no-flex to disable)

diff --git a/resources/styles/common/spacing.styl b/resources/styles/common/spacing.styl
index ccec2fa7d28b17f2d10c15268e7690d1a0280a10..c0f8bc568bd96eac7515e143354e68454cd68bfc 100644 (file)
--- a/resources/styles/common/spacing.styl
+++ b/resources/styles/common/spacing.styl
@@ -18,8 +18,26 @@ $sides = {
   y: vertical, // special case for both top & bottom padding
 }
 
-for sideAbbreviation, side in $sides
-  for counter, vwAmount in $vw-spacing
+// Generate classes
+for counter, vwAmount in $vw-spacing
+
+  // First, generate classes for all sides...
+
+  // Padding (p-1v, p-2v etc)
+  .p-{counter}v
+    constrain(padding, vwAmount)
+
+  // Margins (m-1v, m-2v etc)
+  .m-{counter}v
+    constrain(margin, vwAmount)
+
+  // Negative margins (-m-1v, -m-2v etc)
+  .-m{counter}v
+    constrain(margin, - vwAmount)
+
+
+  // Next, generate classes for individual sides
+  for sideAbbreviation, side in $sides
 
     // Padding utilities (pt, pr, pb, pl, px, py)
     .p{sideAbbreviation}-{counter}v

diff --git a/resources/styles/components/buttons.styl b/resources/styles/components/buttons.styl
index 61586dcac3db469477b3b5b819758cc0f00d5946..fb3c365af1cd46f3e1fff3c313b8cc71eb3edfcd 100644 (file)
--- a/resources/styles/components/buttons.styl
+++ b/resources/styles/components/buttons.styl
@@ -1,4 +1,27 @@
 // Buttons
 
 .btn
-  @apply bg-blue text-white px-10 py-4 relative
+  @apply bg-blue text-white px-10 py-4 relative inline-block overflow-hidden
+
+  &-text
+    @apply z-10 relative
+
+  &:hover:before
+    transform: scale(1.1) translateY(-50%)
+    opacity: 1
+
+  &:before
+    content: ''
+    position: absolute
+    top: 50%
+    left: 0
+    z-index: 1
+    background-color: rgba(#fff, 0.2)
+    width: 100%
+    padding-bottom: 100%
+    border-radius: 50%
+    transform: scale(0) translateY(-50%)
+    transform-origin: top center
+    transition: all 0.2s ease-out
+    opacity: 0
+

diff --git a/resources/styles/components/grids.styl b/resources/styles/components/grids.styl
new file mode 100644 (file)
index 0000000..12aa72b
--- /dev/null
+++ b/resources/styles/components/grids.styl
@@ -0,0 +1,26 @@
+.grid
+  @supports (display: grid) // Modern browsers get the native grid
+    display: grid
+
+  &-cols-2
+
+    // For IE11 and older browsers, use lost grid...
+    > *
+      lost-column: 1/2 2 1.25vw
+      margin-bottom: 1.25vw
+
+    @supports (display: grid)
+      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr))
+      constrain(grid-gap, 1.25vw)
+
+      //Reset the lost-grid so it doesn't interfere
+      > *
+        lost-column: none
+        margin: 0 !important
+        flex-basis: auto
+        max-width: none
+
+        //// Internal block alignment - make sure text label sits at bottom
+        //display: flex
+        //flex-direction: column
+        //justify-content: space-between

diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644 (file)
index 0000000..45cbe77
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,3 @@
+<a href="{{ $url ?? '#' }}" class="btn {{ $class ?? '' }}">
+    <span class="btn-text">{{ $slot }}</span>
+</a>

diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 3f7155514c2cc78b7e435848571cf141274d32f7..826bc50b11215889788cb368e3753fea371d9083 100644 (file)
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -7,11 +7,15 @@
         <div class="container flex -mb32">
             <div class="w-1/2 pt-2v pr-1v pb-2v pl-2v">
                 <h1 class="h1 text-inherit">Wheel Force Transducer</h1>
-                <p>
+                <p class="max-w-text">
                     Wheel Force Transducers (WFT) are used for measuring all wheel forces and moments. Field and laboratory test of passenger cars, light duty trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty construction and farm equipment.
                 </p>
 
-                <p><a href="#" class="btn">Découvrir</a></p>
+                <p>
+                    @button(['url' => '#'])
+                        Découvrir
+                    @endbutton
+                </p>
 
                 <div class="pb-2v"></div>
 
@@ -20,6 +24,7 @@
         </div>
     </div>
 
+    {{-- Intro text --}}
     <div class="container flex pt-5v pb-4v">
         <div class="w-1/2">
             <img src="{{ asset('images/home-wing.jpg') }}" alt="">
@@ -39,4 +44,74 @@
         </div>
     </div>
 
+    {{-- Our products --}}
+    <div class="bg-grey-100">
+        <div class="container pt-3v pb-4v">
+            <h2 class="h1 pl-2v">Nos produits</h2>
+
+            <div class="flex">
+                <div class="w-1/2">
+                    <h3 class="h2 simple pl-1v">Capteurs</h3>
+
+                    <div class="grid grid-cols-2 pr-1v border-r border-grey-300">
+                        @for ($i = 1; $i <= 6; $i++)
+                            <div class="bg-white px-1v py-6 flex">
+                                <a class="partial-underline flex flex-col justify-between" href="#">
+                                    <div class="flex items-center justify-center flex-grow">
+                                        <img class="mb-4" src="{{ asset("images/products/$i.png") }}">
+                                    </div>
+                                    <p class="text-lg text-navy font-display font-medium">Product title {{ $i }}</p>
+                                </a>
+                            </div>
+                        @endfor
+                    </div>
+
+                </div>
+                <div class="w-1/2 pl-1v">
+                    <h3 class="h2 simple pl-1v">Systèmes de mesure</h3>
+
+                    <div class="grid grid-cols-2">
+                        @for ($i = 1; $i <= 6; $i++)
+                            <div class="bg-white px-1v py-6 flex flex-col justify-between">
+                                <div class="flex items-center justify-center flex-grow">
+                                    <img class="mb-4" src="{{ asset("images/products/$i.png") }}">
+                                </div>
+                                <p class="text-lg text-navy font-display font-medium">Product title {{ $i }}</p>
+                            </div>
+                        @endfor
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+
+    {{-- Solutions / Applications --}}
+    <div class="bg-navy text-white antialiased">
+        <div class="container pt-3v pb-4v">
+            <h2 class="h1 text-inherit">Solutions / Applications</h2>
+        </div>
+    </div>
+
+    {{-- Services & Support --}}
+    <div class="bg-grey-100">
+        <div class="container pt-3v pb-4v">
+            <h2 class="h1">Services & Support</h2>
+        </div>
+    </div>
+
+    {{-- News --}}
+    <div class="container pt-3v pb-4v">
+        <h2 class="h1">Actualités</h2>
+    </div>
+
+    {{-- Our Clients --}}
+    <div class="bg-grey-100">
+        <div class="container pt-3v pb-4v">
+            <h2 class="h1">Nos clients</h2>
+        </div>
+    </div>
+
 @endsection

diff --git a/tailwind.config.js b/tailwind.config.js
index 16506e8eab61f21ea2d398c4539cb518905a38de..914d34e0d5796d8d3cb63e0c305a8b35d617aa7e 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
         'grey': {
           '100': '#F7F8FC',
           '200': '#EEF1F8',
+          '300': '#D1D4DF',
           'dark': '#6B7287',
         }
       },
@@ -19,6 +20,9 @@ module.exports = {
         'display': ['Barlow', 'sans-serif'], // Headings, labels, menus etc
         'body': ['Muli', 'sans-serif'], // Main blocks of text
       },
+      maxWidth: {
+        'text': '480px' // Or 30rem?
+      }
     },
   },
   variants: {},

diff --git a/webpack.mix.js b/webpack.mix.js
index 04c0105b62415d90211c4fc26175e0e54f5f74fe..9bb4975c41b2f5e254b9fec56a9f2b9c0a52f1bd 100644 (file)
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -27,7 +27,12 @@ mix.js('resources/js/app.js', 'public/js')
         postCss: [
             tailwindcss('tailwind.config.js'),
             require('lost'),
-        ]
+        ],
+        // autoprefixer: {
+        //   options: {
+        //     grid: true, // Enable CSS grid prefixes for IE
+        //   }
+        // }
     })
     .purgeCss();