@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
// Debugging styles
-if ($debug)
+if ($debug.overlays)
//:root
// --debug-container-overlay: theme('colors.blue.500')
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
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
// 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)
--- /dev/null
+// 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
+
+
--- /dev/null
+// 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 <main> 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)
// 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)
}
}
// 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)
}
}
}
// 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)
//---------------------------------------//
// 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
--- /dev/null
+// 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)
--- /dev/null
+// Buttons
+
+.btn
+ @apply bg-blue text-white px-10 py-4 relative
@include('cubist::head.htmldeclaration')
<head>
{{--@include('cubist::head.head')--}}
- <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+ <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
</head>
-<body>
+<body class="font-body text-grey-dark">
@include('cubist::body.begin')
<div class="flex flex-col min-h-screen">
@include('partials.header')
- <main class="container flex-grow">
+ <main class="flex-grow">
@yield('content')
</main>
@section('content')
- <h1>Home</h1>
- This is a <a href="#">link</a>.
+ {{-- Slider --}}
+ <div class="bg-navy pt-1v text-white antialiased">
+ <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>
+ 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>
+
+ <div class="pb-2v"></div>
+
+ </div>
+ <div class="w-1/2 -mb-2v z-10 bg-cover" style="background-image:url({{ asset('images/home-car.jpg') }})"></div>
+ </div>
+ </div>
+
+ <div class="container flex pt-5v pb-4v">
+ <div class="w-1/2">
+ <img src="{{ asset('images/home-wing.jpg') }}" alt="">
+ </div>
+ <div class="w-1/2 pl-2v">
+ <h2 class="h1 overlap-left pt-2v">
+ Expert de la mesure
+ depuis plus de 30 ans
+ </h2>
+
+ <p>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.</p>
+
+ <p>Principalement dédiés aux mesures physiques, nous saurons vous conseiller dans le choix de produits adaptés à votre environnement.</p>
+
+ <p><a href="#">En savoir plus</a></p>
+
+ </div>
+ </div>
@endsection
-<footer class="bg-navy text-white">
+<footer class="bg-navy text-white font-display font-medium antialiased">
<div class="container py-20 flex justify-between">
@include('partials.logo')
<span>This is the footer</span>
-<header class="bg-navy text-white">
+<header class="bg-navy text-white font-display font-medium antialiased">
<div class="container flex items-center py-8">
@include('partials.logo')
@include('partials.nav')
-<img src="{{ asset('images/pmi-logo.svg') }}">
+<a href="/">
+ <img src="{{ asset('images/pmi-logo.svg') }}" alt="PM Instrumentation logo">
+</a>
'100': '#F7F8FC',
'200': '#EEF1F8',
'dark': '#6B7287',
- },
- }
- }
+ }
+ },
+ fontSize: {
+ '6xl': '3.75rem' // Only override this value
+ },
+ fontFamily: {
+ 'display': ['Barlow', 'sans-serif'], // Headings, labels, menus etc
+ 'body': ['Muli', 'sans-serif'], // Main blocks of text
+ },
+ },
},
variants: {},
plugins: [],
|
*/
+mix.browserSync({
+ proxy: process.env.APP_URL,
+ open: false // Don't automatically open a new tab when the watcher starts
+});
+
mix.js('resources/js/app.js', 'public/js')
.stylus('resources/styles/app.styl', 'public/css', {
use: [
})
.purgeCss();
-mix.browserSync({
- proxy: process.env.APP_URL,
- open: false // Don't automatically open a new tab when the watcher starts
-});
+// Enable unique hashed filenames when in production
+if (mix.inProduction()) {
+ mix.version();
+}
projects / pmi.git / commitdiff