From 55395b9363223bfe01ce79393fe0c0fd44921416 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 17 Jul 2019 16:36:31 +0200 Subject: [PATCH] wip #2743 @0.5 --- config/markdown.php | 2 + resources/styles/components/form.styl | 26 +++----- tailwind.config.js | 95 ++++++++++++++------------- 3 files changed, 58 insertions(+), 65 deletions(-) diff --git a/config/markdown.php b/config/markdown.php index 890d135..1dd97bb 100644 --- a/config/markdown.php +++ b/config/markdown.php @@ -44,6 +44,8 @@ return [ 'extensions' => [ Cubist\Backpack\app\Markdown\Heading\Extension::class, Cubist\Backpack\app\Markdown\Wrapper\Extension::class, + League\CommonMark\Ext\Autolink\AutolinkExtension::class, + Cubist\Backpack\app\Markdown\InternalLink\Extension::class ], /* diff --git a/resources/styles/components/form.styl b/resources/styles/components/form.styl index 8386dd1..306db95 100644 --- a/resources/styles/components/form.styl +++ b/resources/styles/components/form.styl @@ -1,13 +1,3 @@ -$h3 = 24px -$h2 = 36px -$barlow = 'Barlow', sans-serif -$muli = 'Muli', sans-serif -$dark = #6B7287 -$lightgrey = #F7F8FC -$darkblue = #152F4E -$lightblue = #0EAADA -$verylightgrey = #E7E9F3 - #contact-form .form @@ -16,7 +6,7 @@ $verylightgrey = #E7E9F3 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); .errormessage - color: #cc0000; + color theme('colors.red') font-weight: 300 position: absolute right: 0 @@ -25,20 +15,24 @@ $verylightgrey = #E7E9F3 input, textarea border-radius 3px - color: $dark + color: theme('colors.grey.dark') padding 12px 10px border 1px solid #fff display: block width: 100% + &:focus + border-color: theme('colors.grey.250') + &.error - border-color: #cc0000 + border-color: theme('colors.red') label - font-family: $barlow + font-family: theme('fontFamily.body') position: relative padding-top: 15px display: block + &:not(.half) grid-column 1 / -1 @@ -53,7 +47,3 @@ $verylightgrey = #E7E9F3 .btn-custom min-width 14rem padding 1.125rem 3.375rem - - - *:focus - outline-color $verylightgrey diff --git a/tailwind.config.js b/tailwind.config.js index 3265bdc..f6fcd7a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,50 +1,51 @@ module.exports = { - theme: { - screens: { - // We're using the desktop-first approach to media queries so everything is max-width based - // The most important breakpoint for PMI is when the columns stack. This is defined in setup.styl - // and for now it needs to be manually matched here. The idea is that we can set styles using - // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'. - // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller - // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2) - 'xl': {'max': '1450px'}, // => @media (max-width: 1450px) { ... } - 'lg': {'max': '1280px'}, // => @media (max-width: 1280px) { ... } - 'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... } - 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... } - 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... } + theme: { + screens: { + // We're using the desktop-first approach to media queries so everything is max-width based + // The most important breakpoint for PMI is when the columns stack. This is defined in setup.styl + // and for now it needs to be manually matched here. The idea is that we can set styles using + // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'. + // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller + // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2) + 'xl': {'max': '1450px'}, // => @media (max-width: 1450px) { ... } + 'lg': {'max': '1280px'}, // => @media (max-width: 1280px) { ... } + 'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... } + 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... } + 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... } + }, + extend: { + colors: { + 'inherit': 'inherit', + 'navy': '#152F4E', + 'navy-dark': '#0C213A', + 'blue': '#0EAADA', + 'red': '#F81E60', + 'grey': { + '100': '#F7F8FC', + '200': '#EEF1F8', + '250': '#E7E9F3', + '300': '#D1D4DF', + '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 + }, + maxWidth: { + 'text': '480px' // Or 30rem? + }, + padding: { + '100p': '100%', // Used for proportional padding to make a square + } + }, }, - extend: { - colors: { - 'inherit': 'inherit', - 'navy': '#152F4E', - 'navy-dark': '#0C213A', - 'blue': '#0EAADA', - 'red': '#F81E60', - 'grey': { - '100': '#F7F8FC', - '200': '#EEF1F8', - '300': '#D1D4DF', - '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 - }, - maxWidth: { - 'text': '480px' // Or 30rem? - }, - padding: { - '100p': '100%', // Used for proportional padding to make a square - } - }, - }, - variants: {}, - plugins: [], - corePlugins: { - container: false, - } + variants: {}, + plugins: [], + corePlugins: { + container: false, + } } -- 2.39.5