pmi

From: Stephen Cameron Date: Thu, 30 May 2019 19:29:41 +0000 (+0200) Subject: WIP #2738 @11 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=96074bfff11b49806dd2ea58adca18102b92a9a7;p=pmi.git WIP #2738 @11 --- diff --git a/config/blade-svg.php b/config/blade-svg.php index cc374d3..4d4a955 100644 --- a/config/blade-svg.php +++ b/config/blade-svg.php @@ -68,5 +68,5 @@ return [ | */ - 'class' => 'svg', + 'class' => 'svg fill-current', ]; diff --git a/public/_modules/footer/index.html b/public/_modules/footer/index.html deleted file mode 100644 index 1a5c457..0000000 --- a/public/_modules/footer/index.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - - - - - pmi - - - - - - \ No newline at end of file diff --git a/public/_modules/footer/style.styl b/public/_modules/footer/style.styl deleted file mode 100644 index 967de6f..0000000 --- a/public/_modules/footer/style.styl +++ /dev/null @@ -1,137 +0,0 @@ -$h3 = 24px -$barlow = 'Barlow', sans-serif -$muli = 'Muli', sans-serif -$dark = #6B7287 -* - padding: 0 - box-sizing: border-box - margin: 0 - font-family: $muli -#footer - @media (max-width 960px) - font-size: 12px - p:not(:last-child) { - margin-bottom: 0; - } - h1,h2,h3,h4 - color: white - margin-bottom: 0 - select::-ms-expand - display: none - .footer-list-top - display: none - width: 100% - @media (max-width : 1280px) - display: flex - @media (max-width : 767px) - padding-bottom: 3vw!important - flex-direction : column - align-items flex-start - .footer-bottom - @media (max-width : 767px) - flex-direction: column - align-items flex-start - .footer-bottom-item - width: 37.5vw - @media (min-width : 1880px) - width: 36.5vw - .footer-links - @media (max-width : 767px) - margin-bottom: 1.7vw !important - &:last-child - margin-bottom: 0 !important - .footer-links a - text-decoration : none - color: white - .footer-bar - position: relative - content: '' - width: 1px - height: 12px - background: white - @media (max-width : 767px) - display : none - .footer-list - @media (max-width : 1280px) - display: none - .container - max-width: 1728px; - margin: 0 auto; - padding-left: 10vw; - padding-right: 10vw; - width: 100%; - @media (max-width : 960px) - padding-left: 7.5vw; - padding-right: 7.5vw; - padding-bottom: 7.5vw; - flex-wrap : wrap - .language - color: $dark - padding-left: 2.6rem - padding-right: 5.3rem - -webkit-appearance: none - border-radius: 3px - background: white - @media (max-width : 767px) - width: 100% - .content-link - @media (max-width : 767px) - flex-direction column - .mr-footer-middle - margin-right: 2.5rem - @media (max-width : 960px) - margin-right: 2.5rem - @media (max-width : 767px) - margin-right: 0 - .max-w-footer-item - width: 25vw - p - width: 17vw - @media (max-width : 1100px) - width: inherit - @media (max-width : 960px) - margin-right: 4.5rem - width: 38.8vw - p - width: inherit - @media (max-width : 767px) - margin-right: 0 - width: 100% - .copyright - @media (max-width : 767px) - margin-top: 3vw - .max-w-footer-info - width: 25vw - @media (max-width : 960px) - width: 38.8vw - @media (max-width : 767px) - flex-direction: column - width: 100% - .h3-mt - @media (max-width : 960px) - margin-top: 7.5vw - .content - .img-localization - width: 32px - height: 35px - .mt-txt - margin-top: 2.96rem - @media (max-width : 960px) - margin-top: 5vw - .mb-txt - margin-bottom: 2.3rem - .circle - width: 47.5px - height: 47.5px - color: white - .bold - font-family: $barlow - .h3 - font-size: $h3 - font-family: $barlow - @media (max-width 960px) - font-size: 15px - .no-style-link - color: white - &:hover - text-decoration: none \ No newline at end of file diff --git a/public/images/arrow-down.svg b/public/images/arrow-down.svg new file mode 100644 index 0000000..0466488 --- /dev/null +++ b/public/images/arrow-down.svg @@ -0,0 +1 @@ + diff --git a/public/images/burger-menu.svg b/public/images/burger-menu.svg deleted file mode 100644 index 3f73828..0000000 --- a/public/images/burger-menu.svg +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/public/images/cart.svg b/public/images/cart.svg deleted file mode 100644 index ae494fe..0000000 --- a/public/images/cart.svg +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/public/images/icon-address.svg b/public/images/icon-address.svg new file mode 100644 index 0000000..eaa9f92 --- /dev/null +++ b/public/images/icon-address.svg @@ -0,0 +1 @@ + diff --git a/public/images/icon-burger-menu.svg b/public/images/icon-burger-menu.svg new file mode 100644 index 0000000..3f73828 --- /dev/null +++ b/public/images/icon-burger-menu.svg @@ -0,0 +1,7 @@ + diff --git a/public/images/icon-cart.svg b/public/images/icon-cart.svg new file mode 100644 index 0000000..ae494fe --- /dev/null +++ b/public/images/icon-cart.svg @@ -0,0 +1,11 @@ + diff --git a/public/images/icon-email.svg b/public/images/icon-email.svg new file mode 100644 index 0000000..a8b359e --- /dev/null +++ b/public/images/icon-email.svg @@ -0,0 +1 @@ + diff --git a/public/images/icon-linkedin.svg b/public/images/icon-linkedin.svg new file mode 100644 index 0000000..efdc109 --- /dev/null +++ b/public/images/icon-linkedin.svg @@ -0,0 +1,10 @@ + diff --git a/public/images/icon-phone.svg b/public/images/icon-phone.svg new file mode 100644 index 0000000..a1f4e53 --- /dev/null +++ b/public/images/icon-phone.svg @@ -0,0 +1 @@ + diff --git a/public/images/icon-twitter.svg b/public/images/icon-twitter.svg new file mode 100644 index 0000000..4009123 --- /dev/null +++ b/public/images/icon-twitter.svg @@ -0,0 +1,10 @@ + diff --git a/public/images/locale-de.svg b/public/images/locale-de.svg new file mode 100644 index 0000000..4c1f7e8 --- /dev/null +++ b/public/images/locale-de.svg @@ -0,0 +1,8 @@ + + + diff --git a/public/images/locale-en.svg b/public/images/locale-en.svg new file mode 100644 index 0000000..ccf2dd3 --- /dev/null +++ b/public/images/locale-en.svg @@ -0,0 +1,13 @@ + + diff --git a/public/images/locale-fr.svg b/public/images/locale-fr.svg new file mode 100644 index 0000000..fbb7cf5 --- /dev/null +++ b/public/images/locale-fr.svg @@ -0,0 +1,5 @@ + diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl index 5032a1f..50cd81e 100644 --- a/resources/styles/components/cart.styl +++ b/resources/styles/components/cart.styl @@ -3,14 +3,14 @@ &-title @apply mr-4 - +below(1150px) + +below(1200px) display: none &-icon display: inline-block width: 34px height: 36px - background: url(/images/cart.svg) no-repeat center + background: url(/images/icon-cart.svg) no-repeat center background-size: contain text-align: center line-height: 40px diff --git a/resources/styles/components/footer.styl b/resources/styles/components/footer.styl new file mode 100644 index 0000000..e50103b --- /dev/null +++ b/resources/styles/components/footer.styl @@ -0,0 +1,163 @@ +$breakpoint-footer = 1024px +$footer-logo-height = 70px // Used so we can align headings in other columns with the bottom of the header + +.footer + +below(1150px) + @apply text-sm + + // Container for main footer columns + &-wrapper + @apply flex + vertical-spacing(4.5vw) + + +below($breakpoint-footer) + @apply flex-wrap + + .footer-col + padding-right: 0 + + &:nth-child(1) + flex-basis: 100% + &:nth-child(2), &:nth-child(3) + flex-basis: 50% + min-width: 300px // Min width so e-mail address fits. Columns will wrap when there's not enough room + + // Need to reset the min-width before the screen gets too small, otherwise there will be an overflow + +below(500px) + .footer-col + min-width: 100% !important + + &-col + constrain(padding-right, 2.5vw) + flex: 1 1 33.333% + + // Column headings + &-heading + @apply text-inherit text-2xl font-display mb-10 + height: $footer-logo-height + display: flex + align-items: flex-end + + // Text under the logo + &-company-info + max-width: 22em + + +below(1350px) + // A bit of extra buffer so this text doesn't get too close to the next column + padding-right: 2.5vw + + +below($breakpoint-footer) + @apply text-base + padding-right: 0 + max-width: 42em + + + // Contact details + &-contact + // The link + &-block + @apply flex text-white mb-6 + + &:hover + @apply text-blue + + .footer-contact-icon + transform: scale(1.1) + + &-icon + @apply mr-4 + transform: scale(1) + transition: transform 0.1s ease-out + + &-title + @apply font-display + + + + // Sub-footer + &-end + @apply py-6 flex items-center + + +below($breakpoint-footer) + @apply flex-wrap + + > * + margin: 0 auto + + &:not(:first-child) + flex-basis: 100% + margin-top: 1.5em + text-align: center + + +below(640px) + > * + margin: 0 + text-align: left !important + + + // Language switcher + &-locales + @apply relative + + &:hover + .footer-locales-list + opacity: 1 + transform: translateY(0) + .footer-locales-current + @apply text-navy + + &-current + @apply relative rounded text-grey-dark px-3 py-1 z-10 flex items-center cursor-pointer + background: #fff url(/images/arrow-down.svg) 92% 50% no-repeat + + &-flag + @apply inline-block mr-2 + + &-list + @apply absolute w-full -mb-1 + left: 0 + bottom: 100% + opacity: 0 + transform: translateY(1.5em) + transition: all 0.1s ease-out + + + li:first-child a + @apply rounded-t + li:last-child a + @apply border-b-4 border-white // To cover rounded top of language selector + + a + @apply block bg-white text-grey-dark px-3 py-1 + transition: none + + &:hover + @apply bg-grey-200 text-navy + + + // Bottom horizontal nav + &-nav + @apply flex justify-center flex-grow flex-wrap + + +below(640px) + @apply block + li + @apply py-1 text-left + + &:not(:last-child) + margin-right: 0 + &:after + display: none + + li:not(:last-child) + @apply mr-4 + + // Dividers between links + &:after + @apply pl-4 + content: '|' + a + @apply text-white + + &:hover + @apply text-blue diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 2c3f9f9..4ceb0aa 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -1,11 +1,102 @@ -