From: Stephen Cameron Date: Thu, 23 May 2019 17:06:49 +0000 (+0200) Subject: WIP #2731 @9.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8be3cec674fff6198776a7215e67a7fd41325e4f;p=pmi.git WIP #2731 @9.5 --- diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index ee8ca5b..fefcb80 100644 --- 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 95d1dba..9835876 100644 --- 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 1dd524f..56570d8 100644 --- 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 e882247..e1c54b7 100644 --- 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 40ec7ef..d7e96bb 100644 --- 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 ccec2fa..c0f8bc5 100644 --- 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 61586dc..fb3c365 100644 --- 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 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 index 0000000..45cbe77 --- /dev/null +++ b/resources/views/components/button.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index 3f71555..826bc50 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -7,11 +7,15 @@

Wheel Force Transducer

-

+

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.

-

Découvrir

+

+ @button(['url' => '#']) + Découvrir + @endbutton +

@@ -20,6 +24,7 @@
+ {{-- Intro text --}}
@@ -39,4 +44,74 @@
+ {{-- Our products --}} +
+
+

Nos produits

+ +
+
+

Capteurs

+ +
+ @for ($i = 1; $i <= 6; $i++) +
+ +
+ +
+

Product title {{ $i }}

+ +
+ @endfor +
+ +
+
+

Systèmes de mesure

+ +
+ @for ($i = 1; $i <= 6; $i++) +
+
+ +
+

Product title {{ $i }}

+
+ @endfor +
+ +
+
+ +
+
+ + + {{-- Solutions / Applications --}} +
+
+

Solutions / Applications

+
+
+ + {{-- Services & Support --}} +
+
+

Services & Support

+
+
+ + {{-- News --}} +
+

Actualités

+
+ + {{-- Our Clients --}} +
+
+

Nos clients

+
+
+ @endsection diff --git a/tailwind.config.js b/tailwind.config.js index 16506e8..914d34e 100644 --- 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 04c0105..9bb4975 100644 --- 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();