wip #2743 @0.5

diff --git a/config/markdown.php b/config/markdown.php
index 890d135566c93691010a22f190a7746e97cad4d1..1dd97bbcb961205409b7ed9f322533077bf48415 100644 (file)
--- 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 8386dd1bd3a8e9d66731cb2ad08451cbe2a3c1dd..306db95c5dcbe3bd2a59742e9d12cb428c31d4ac 100644 (file)
--- 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 3265bdc30b1fbb86ec977b1bd196be3f138056b5..f6fcd7a8e37f205a9ddc8d07712ec9e08cf9d736 100644 (file)
--- 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,
+    }
 }