From: Stephen Cameron Date: Wed, 22 May 2019 17:18:43 +0000 (+0200) Subject: WIP #2731 @7.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=55ae945bf207dd84a06782ffb19a3c8148eed750;p=pmi.git WIP #2731 @7.5 --- diff --git a/resources/styles/app.styl b/resources/styles/app.styl index 8fa74eb..4a843cc 100644 --- a/resources/styles/app.styl +++ b/resources/styles/app.styl @@ -7,7 +7,12 @@ @tailwind components // Extracted components or custom styles that can't be done with utilities +@import 'common/spacing' @import 'common/global' +@import 'common/headings' +@import 'common/links' + +@import 'components/*' // Utilities go last in source order so they can // override other classes with the same specificity diff --git a/resources/styles/common/debug.styl b/resources/styles/common/debug.styl index a43e06d..e6b1dba 100644 --- a/resources/styles/common/debug.styl +++ b/resources/styles/common/debug.styl @@ -1,6 +1,6 @@ // Debugging styles -if ($debug) +if ($debug.overlays) //:root // --debug-container-overlay: theme('colors.blue.500') @@ -9,12 +9,13 @@ if ($debug) html, body &:before z-index: 20 !important // Put overlays above header + opacity: 0.2 !important html - lost-utility: overlay ($content-max-width) 1 10px theme('colors.green.300'); + lost-utility: overlay ($content-max-width) 1 10px theme('colors.green.700'); body - lost-utility: overlay ($base-width * 0.8) 1 2px theme('colors.blue.600'); + lost-utility: overlay ($base-width * 0.8) 1 2px theme('colors.blue.300'); // Centre line &:after @@ -28,7 +29,7 @@ if ($debug) z-index: 100 -if ($debug > 1) +if ($debug.outlines) *:not(path):not(g):not(rect) // Outline all elements without affecting position or size outline: 1px dotted red !important diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl index a13c051..95d1dba 100644 --- a/resources/styles/common/global.styl +++ b/resources/styles/common/global.styl @@ -1,14 +1,26 @@ // PMI Global Styles -a - @apply text-blue - - &:hover - @apply underline - +p:not(:last-child) + margin-bottom: 1.5em // Layout containers .container center($content-max-width) horizontal-spacing($horizontal-gutter) width: 100% + +// Overlapping content +.overlap + &-left + + // Todo: only apply this above the columns breakpoint + //+above($breakpoint-columns) + + position: relative + constrain(left, -10vw) + + // 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) diff --git a/resources/styles/common/headings.styl b/resources/styles/common/headings.styl new file mode 100644 index 0000000..1dd524f --- /dev/null +++ b/resources/styles/common/headings.styl @@ -0,0 +1,23 @@ +// Headings +h1, h2, h3, h4 + line-height: 1.2 + @apply text-navy font-display font-semibold + +.h1 + @apply text-6xl leading-tight relative + + &:after + content: '' + display: block + 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 + + diff --git a/resources/styles/common/links.styl b/resources/styles/common/links.styl new file mode 100644 index 0000000..e882247 --- /dev/null +++ b/resources/styles/common/links.styl @@ -0,0 +1,29 @@ +// Link styles + +a + @apply text-blue + + // Don't apply if 'no-animation' class is set + &:not(.btn):not(.no-animation) + position: relative + padding-bottom: 2px + + // Only apply to
content + main & + + &:before + content: '' + display: block + position: absolute + bottom: 0 + left: 0 + width: 100% + height: 2px + background-color: currentColor + transform: scaleX(0) + transform-origin: left + transition: transform 0.2s ease-out + + &:hover + &:before + transform: scaleX(1) diff --git a/resources/styles/common/mixins.styl b/resources/styles/common/mixins.styl index 55cd5f9..7f59d6b 100644 --- a/resources/styles/common/mixins.styl +++ b/resources/styles/common/mixins.styl @@ -9,7 +9,7 @@ constrain(property, value = $horizontal-gutter, max-width = $base-width) { // Only do this if we are dealing with a percentage or vw unit if (unit(value) is '%' || unit(value) is 'vw') { $max = max-width * unit(value / 100, '') // Convert percentage to a decimal - {property}: $max + {property}: round($max) } } @@ -18,7 +18,7 @@ constrain(property, value = $horizontal-gutter, max-width = $base-width) { // Only do this if we are dealing with a percentage or vw unit if (unit(value) is '%' || unit(value) is 'vw') { $min = 700px * unit(value / 100, '') // Convert percentage to a decimal - {property}: $min + {property}: round($min) } } } @@ -26,18 +26,18 @@ constrain(property, value = $horizontal-gutter, max-width = $base-width) { // Apply percentage based vertical padding - defaults to global gutter value if nothing passed // Note: fractional vertical padding is based on width -vertical-spacing(amount = $vertical-gutter) - constrain(padding-top, amount) - constrain(padding-bottom, amount) -//padding-top: amount -//padding-bottom: amount +// Passing 'margin' as second parameter does margins instead +vertical-spacing(amount = $vertical-gutter, property = 'padding') + constrain(s('%s-top', unquote(property)), amount) + constrain(s('%s-bottom', unquote(property)), amount) //---------------------------------------// // Apply percentage based vertical padding - defaults to global gutter value if nothing passed -horizontal-spacing(amount = $horizontal-gutter) - constrain(padding-left, amount) - constrain(padding-right, amount) +// Passing 'margin' as second parameter does margins instead +horizontal-spacing(amount = $horizontal-gutter, property = 'padding') + constrain(s('%s-left', unquote(property)), amount) + constrain(s('%s-right', unquote(property)), amount) //---------------------------------------// diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl index 0a3260d..40ec7ef 100644 --- a/resources/styles/common/setup.styl +++ b/resources/styles/common/setup.styl @@ -1,5 +1,9 @@ // General Setup -$debug = 0 +$debug = { + overlays: false, + outlines: false, +} + $base-width = 1920px // Basis for vw unit calculations on large screens $content-max-width = $base-width * 0.9 // Allows 5% either side diff --git a/resources/styles/common/spacing.styl b/resources/styles/common/spacing.styl new file mode 100644 index 0000000..ccec2fa --- /dev/null +++ b/resources/styles/common/spacing.styl @@ -0,0 +1,55 @@ +// Build utility classes for padding/margin based on vw units +// This will generate classes like pt-1v, pt-2v, pr-1v etc. + +$vw-spacing = { + '1': 2.5vw, + '2': 5vw, + '3': 7.5vw, + '4': 10vw, + '5': 12.5vw, +} + +$sides = { + t: top, + r: right, + b: bottom, + l: left, + x: horizontal, // special case for both left & right padding + y: vertical, // special case for both top & bottom padding +} + +for sideAbbreviation, side in $sides + for counter, vwAmount in $vw-spacing + + // Padding utilities (pt, pr, pb, pl, px, py) + .p{sideAbbreviation}-{counter}v + $property = s('padding-%s', side) + + if (side is 'horizontal') + horizontal-spacing(vwAmount) + else if (side is 'vertical') + vertical-spacing(vwAmount) + else + constrain($property, vwAmount) + + // Margin utilities (mt, mr, mb, ml, mx, my) + .m{sideAbbreviation}-{counter}v + $property = s('margin-%s', side) + + if (side is 'horizontal') + horizontal-spacing(vwAmount, 'margin') + else if (side is 'vertical') + vertical-spacing(vwAmount, 'margin') + else + constrain($property, vwAmount) + + // Negative margin utilities (-mt, -mr, -mb, -ml, -mx, -my) + .-m{sideAbbreviation}-{counter}v + $property = s('margin-%s', side) + + if (side is 'horizontal') + horizontal-spacing( - vwAmount, 'margin') + else if (side is 'vertical') + vertical-spacing( - vwAmount, 'margin') + else + constrain($property, - vwAmount) diff --git a/resources/styles/components/buttons.styl b/resources/styles/components/buttons.styl new file mode 100644 index 0000000..61586dc --- /dev/null +++ b/resources/styles/components/buttons.styl @@ -0,0 +1,4 @@ +// Buttons + +.btn + @apply bg-blue text-white px-10 py-4 relative diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 425984e..b50a4ed 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,15 +1,16 @@ @include('cubist::head.htmldeclaration') {{--@include('cubist::head.head')--}} - + + - + @include('cubist::body.begin')
@include('partials.header') -
+
@yield('content')
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index 1d78e6b..3f71555 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -2,7 +2,41 @@ @section('content') -

Home

- This is a link. + {{-- Slider --}} +
+
+
+

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

+ +
+ +
+
+
+
+ +
+
+ +
+
+

+ Expert de la mesure + depuis plus de 30 ans +

+ +

PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité. Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de capteurs et systèmes d’excellente qualité provenant principalement des Etats-Unis.

+ +

Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.

+ +

En savoir plus

+ +
+
@endsection diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 52559e3..2c3f9f9 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -1,4 +1,4 @@ -