'id' => 'sidebar-footer-copyright'
] + $config);
});
+
+/**
+ * Add Custom Styles to TinyMCE editor
+ */
+// https://codex.wordpress.org/TinyMCE_Custom_Styles
+// Callback function to insert 'styleselect' into the $buttons array
+add_filter( 'mce_buttons_2', function($buttons) {
+ array_unshift( $buttons, 'styleselect' );
+ return $buttons;
+});
+
+// Add format classes to style dropdown
+add_filter( 'tiny_mce_before_init', function($init_array) {
+
+ // Text size styles
+ $sizes = [
+ 'sm' => 'Small',
+ 'base' => 'Normal',
+ 'lg' => 'Large',
+ 'xl' => 'Extra Large',
+ '2xl' => 'XXL',
+ ];
+
+ $size_formats = [];
+
+ foreach ($sizes as $size => $size_label) {
+ $size_formats[] = [
+ 'title' => $size_label,
+ 'inline' => 'span',
+ 'selector' => 'h1, h2, h3, h4, h5, p, div',
+ 'classes' => 'text-'. $size,
+ 'wrapper' => false,
+ ];
+ }
+
+ // Add submenu for font sizes
+ $style_formats[] = [
+ 'title' => 'Font Size',
+ 'items' => $size_formats,
+ ];
+
+ // Font weights
+ $weights = [
+ 'normal',
+ 'medium',
+ 'semibold',
+ ];
+
+ $weight_formats = [];
+
+ foreach ($weights as $weight) {
+ $weight_formats[] = [
+ 'title' => ucfirst($weight),
+ 'inline' => 'span',
+ 'selector' => 'h1, h2, h3, h4, h5, p, div, li',
+ 'classes' => 'font-'. $weight,
+ 'wrapper' => false,
+ ];
+ }
+
+ // Add submenu for font weights
+ $style_formats[] = [
+ 'title' => 'Font Weight',
+ 'items' => $weight_formats,
+ ];
+
+ // Insert the array, JSON ENCODED, into 'style_formats'
+ $init_array['style_formats'] = json_encode( $style_formats );
+
+ return $init_array;
+});
--- /dev/null
+input, textarea
+ &::-webkit-input-placeholder /* Chrome/Opera/Safari */
+ @apply text-dark
+ &::-moz-placeholder /* Firefox 19+ */
+ @apply text-dark
+ &:-ms-input-placeholder /* IE 10+ */
+ @apply text-dark
+ &:-moz-placeholder /* Firefox 18- */
+ @apply text-dark
+
+input, textarea, select
+ @apply bg-white w-full px-6 py-2 rounded-md
+ border: none
+ outline: none
+
+input[type="text"], input[type="email"], input[type="number"], select
+ appearance: none
+
+input[type="submit"]
+ width: auto
+
+select
+ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%233b3b3b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") 98% center no-repeat
+ background-size: 0.8em auto
+
+textarea
+ min-height: 12rem
+ padding: 1em
+
+//================================
+
+.form-wrapper
+ > * + *
+ margin-top: 1.5rem
+
+.form-row
+ display: grid
+ constrain(grid-column-gap, 2vw)
+ // Automatic columns based on number of child elements
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
+ grid-row-gap: 1.5rem // When wrapping columns (to match vertical gap between other rows)