From 0d4fd40873ee64a55d01df5ff661d14f6c607267 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 9 Nov 2017 22:44:30 +0000 Subject: [PATCH] Switch to Tailwind --- assets/less/components/listing.less | 16 + assets/less/components/nav.less | 17 - assets/less/components/post.less | 93 ++- assets/less/components/talk.less | 29 +- assets/less/components/talks-table.less | 3 + assets/less/components/testimonial.less | 5 + assets/less/main.less | 83 +- assets/less/tailwind-config.js | 774 ++++++++++++++++++ package.json | 4 +- postcss.config.js | 6 + source/_includes/availability.html.twig | 4 +- .../_includes/availability/limited.html.twig | 2 +- source/_includes/availability/no.html.twig | 2 +- source/_includes/availability/yes.html.twig | 2 +- source/_includes/badges.html.twig | 27 +- source/_includes/meetups.html.twig | 14 +- source/_includes/nav.html.twig | 19 +- source/_includes/post/about-author.html.twig | 6 +- source/_includes/post/feedback.html.twig | 2 +- source/_includes/post/header.html.twig | 2 +- source/_includes/post/pager.html.twig | 10 +- source/_includes/post/twitter-link.html.twig | 4 +- source/_includes/posts/latest.html.twig | 2 +- source/_includes/talk/events.html.twig | 2 +- source/_includes/talk/slides.html.twig | 5 +- source/_includes/talks-table-row.html.twig | 29 +- source/_includes/talks-table.html.twig | 12 +- source/_layouts/default.html.twig | 54 +- source/_layouts/post.html.twig | 2 +- source/blog.html | 13 +- source/contact.html.twig | 33 +- source/experience.html.twig | 80 +- source/index.md | 2 +- source/testimonials.html.twig | 53 +- yarn.lock | 10 + 35 files changed, 1128 insertions(+), 293 deletions(-) create mode 100644 assets/less/components/listing.less delete mode 100644 assets/less/components/nav.less create mode 100644 assets/less/components/talks-table.less create mode 100644 assets/less/components/testimonial.less create mode 100644 assets/less/tailwind-config.js create mode 100644 postcss.config.js diff --git a/assets/less/components/listing.less b/assets/less/components/listing.less new file mode 100644 index 000000000..37ac7497a --- /dev/null +++ b/assets/less/components/listing.less @@ -0,0 +1,16 @@ +.listing { @apply .pl-0; } + +.listing-item { + @apply .overflow-hidden; + @apply .pb-8; + + &:not(:last-child) { + @apply .border-b; + @apply .border-grey-light; + @apply .mb-8; + } +} + +.listing-item p:last-of-type { + @apply .mb-0; +} diff --git a/assets/less/components/nav.less b/assets/less/components/nav.less deleted file mode 100644 index b5f3c7ccc..000000000 --- a/assets/less/components/nav.less +++ /dev/null @@ -1,17 +0,0 @@ -.nav-item { - .black-70; - .dib; - .f6; - .link; - .ml3; - .pv3; - - &:first-child { .ml0 } -} - -.nav-item--active { - .b--blue; - .bb; - .black; - .bw1; -} diff --git a/assets/less/components/post.less b/assets/less/components/post.less index c59f03eba..838a2f1da 100644 --- a/assets/less/components/post.less +++ b/assets/less/components/post.less @@ -1,68 +1,67 @@ -pre { - .db; - .overflow-auto; - word-break: normal; - word-wrap: no-wrap; -} +// pre { +// .db; +// .overflow-auto; +// word-break: normal; +// word-wrap: no-wrap; +// } -pre[class*="language-"] { .bn; .br0 } +// pre[class*="language-"] { .bn; .br0 } -pre code, -p code { - font-size: .8125rem; -} +// pre code, +// p code { +// font-size: .8125rem; +// } pre code, pre code.hljs, .hljs { - .db; - .pa3; - .bl; - .bw2; - .b--black-40; - .mv2; - background: #eee; + @apply .p-4; + @apply .text-sm; + @apply .border-l-4; + @apply .border-grey-dark; + @apply .block; + @apply .bg-grey-lighter; + @apply .overflow-x-scroll; } p, li { code { - background: #eee; + @apply .bg-grey-lighter; padding: 1px 3px; } } -pre code { - .pre; - word-break: normal; -} +// pre code { +// .pre; +// word-break: normal; +// } -pre code .number { - .h-auto; - .mr0; - .pa0; - background-color: inherit; - font-size: inherit; - min-width: auto; -} +// pre code .number { +// .h-auto; +// .mr0; +// .pa0; +// background-color: inherit; +// font-size: inherit; +// min-width: auto; +// } -code.hljs { - .pa0; - background-color: inherit; -} +// code.hljs { +// .pa0; +// background-color: inherit; +// } + +// code[data-gist-id] { +// .pa0; +// background: transparent; +// } -code[data-gist-id] { - .pa0; - background: transparent; -} .note { - .bg-light-blue; - .bl; - .b--blue; - .bw2; - .pa3; - - p:first-child { .mt0; } - p:last-child { .mb0; } + @apply .bg-blue-lighter; + @apply .p-4; + @apply .border-l-4; + @apply .border-blue; } + +.note p:last-child { @apply .mb-0; } diff --git a/assets/less/components/talk.less b/assets/less/components/talk.less index 091e346f6..54290f3ce 100644 --- a/assets/less/components/talk.less +++ b/assets/less/components/talk.less @@ -2,22 +2,21 @@ .video iframe, .video embed { - .absolute; - .h-100; - .left-0; - .top-0; - .w-100; + @apply .absolute; + @apply .pin-l; + @apply .pin-t; + @apply .w-full; } -.slides { - background-image: url('../images/loading.gif'); - min-height: 275px; +// .slides { +// background-image: url('../images/loading.gif'); +// min-height: 275px; - @media @breakpoint-medium { - min-height: 460px; - } +// @media @breakpoint-medium { +// min-height: 460px; +// } - @media @breakpoint-large { - min-height: 540px; - } -} +// @media @breakpoint-large { +// min-height: 540px; +// } +// } diff --git a/assets/less/components/talks-table.less b/assets/less/components/talks-table.less new file mode 100644 index 000000000..79aae2e83 --- /dev/null +++ b/assets/less/components/talks-table.less @@ -0,0 +1,3 @@ +.talks-table tr:nth-child(odd) { + @apply .bg-grey-lighter; +} diff --git a/assets/less/components/testimonial.less b/assets/less/components/testimonial.less new file mode 100644 index 000000000..e2913e53d --- /dev/null +++ b/assets/less/components/testimonial.less @@ -0,0 +1,5 @@ +.testimonial-image { + @apply .rounded-full .mb-3 .ml-3; + height: 65px; + width: 65px; +} diff --git a/assets/less/main.less b/assets/less/main.less index 0aaab2ff7..db32c7216 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -1,49 +1,66 @@ +@import (less) "~normalize.css/normalize.css"; +@import (less) "~suitcss-base/lib/base.css"; + @import (less) "~font-awesome/css/font-awesome.css"; @import (less) "~highlightjs/styles/github-gist.css"; @tailwind preflight; -@blue: #0678be; - p, li, td { - a { color: @blue } + a { @apply .text-blue; } } -// .button { -// .bg-blue; -// .bn; -// .br2; -// .dib; -// .dim; -// .link; -// .no-underline; -// .ph3; -// .pv2; -// .white-90; +.button { + @apply .bg-blue; + @apply .inline-block; + @apply .rounded; + @apply .text-white; + @apply .px-4; + @apply .py-2; -// &:hover { -// background: darken(@blue, 10%); -// cursor: pointer; -// } -// } + &:active, + &:hover { + @apply .bg-blue-dark; + } +} -// blockquote { -// .ma0; -// .pl3; -// .bl; -// .bw2; -// .b--blue; -// } +blockquote { + @apply .border-l-4 .border-blue .pl-4; +} -// img.with-border { -// .ba; -// .b--silver; -// } +img.with-border { + @apply .border .border-grey-light; +} -// @import "components/nav"; -// @import "components/post"; -// @import "components/talk"; +p, +ul, +table, +pre, +.note { + @apply .mb-4; +} + +a { + @apply .text-grey-darkest; + text-decoration: none; +} + +main a:not(.button) { + text-decoration: underline; +} + +.bullets, +main ul { + list-style: disc; + @apply .pl-4; +} + +@import "components/listing"; +@import "components/post"; +@import "components/talk"; +@import "components/talks-table"; +@import "components/testimonial"; @tailwind utilities; diff --git a/assets/less/tailwind-config.js b/assets/less/tailwind-config.js new file mode 100644 index 000000000..7a5707b00 --- /dev/null +++ b/assets/less/tailwind-config.js @@ -0,0 +1,774 @@ +/* + +Tailwind - The Utility-First CSS Framework + +A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), +David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). + +Welcome to the Tailwind config file. This is where you can customize +Tailwind specifically for your project. Don't be intimidated by the +length of this file. It's really just a big JavaScript object and +we've done our very best to explain each section. + +View the full documentation at https://tailwindcss.com. + + +|------------------------------------------------------------------------------- +| The default config +|------------------------------------------------------------------------------- +| +| This variable contains the default Tailwind config. You don't have +| to use it, but it can sometimes be helpful to have available. For +| example, you may choose to merge your custom configuration +| values with some of the Tailwind defaults. +| +*/ + +// var defaultConfig = require('tailwindcss').defaultConfig() + + +/* +|------------------------------------------------------------------------------- +| Colors https://tailwindcss.com/docs/colors +|------------------------------------------------------------------------------- +| +| Here you can specify the colors used in your project. To get you started, +| we've provided a generous palette of great looking colors that are perfect +| for prototyping, but don't hesitate to change them for your project. You +| own these colors, nothing will break if you change everything about them. +| +| We've used literal color names ("red", "blue", etc.) for the default +| palette, but if you'd rather use functional names like "primary" and +| "secondary", or even a numeric scale like "100" and "200", go for it. +| +*/ + +var colors = { + 'transparent': 'transparent', + + 'black': '#222b2f', + 'grey-darkest': '#364349', + 'grey-darker': '#596a73', + 'grey-dark': '#70818a', + 'grey': '#9babb4', + 'grey-light': '#dae4e9', + 'grey-lighter': '#f2f2f2', + 'grey-lightest': '#fafcfc', + 'white': '#ffffff', + + 'red-darkest': '#420806', + 'red-darker': '#6a1b19', + 'red-dark': '#cc1f1a', + 'red': '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#542605', + 'orange-darker': '#7f4012', + 'orange-dark': '#de751f', + 'orange': '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + 'yellow': '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#032d19', + 'green-darker': '#0b4228', + 'green-dark': '#1f9d55', + 'green': '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#174e4b', + 'teal-dark': '#38a89d', + 'teal': '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#05233b', + 'blue-darker': '#103d60', + 'blue-dark': '#2779bd', + 'blue': '#0678be', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + 'indigo': '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + 'purple-darkest': '#1f133f', + 'purple-darker': '#352465', + 'purple-dark': '#794acf', + 'purple': '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', + + 'pink-darkest': '#45051e', + 'pink-darker': '#72173a', + 'pink-dark': '#eb5286', + 'pink': '#f66d9b', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef', +} + +module.exports = { + + /* + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/colors + |----------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + + colors: colors, + + + /* + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive-design + |----------------------------------------------------------------------------- + | + | Screens in Tailwind are translated to CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. Feel free to have as few or as many screens as you + | want, naming them in whatever way you'd prefer for your project. + | + | Tailwind also allows for more complex screen definitions, which can be + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. + | + | Class name: .{screen}:{utility} + | + */ + + screens: { + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px', + }, + + + /* + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- + | + | Here is where you define your project's font stack, or font families. + | Keep in mind that Tailwind doesn't actually load any fonts for you. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + | Class name: .font-{name} + | + */ + + fonts: { + 'sans': [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif', + ], + 'serif': [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif', + ], + 'mono': [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace', + ] + }, + + + /* + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizing + |----------------------------------------------------------------------------- + | + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + | Class name: .text-{size} + | + */ + + textSizes: { + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.875rem', // 30px + '4xl': '2.25rem', // 36px + '5xl': '3rem', // 48px + }, + + + /* + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weight + |----------------------------------------------------------------------------- + | + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. + | + | Class name: .font-{weight} + | + */ + + fontWeights: { + 'hairline': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'black': 900, + }, + + + /* + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/line-height + |----------------------------------------------------------------------------- + | + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. + | + | Class name: .leading-{size} + | + */ + + leading: { + 'none': 1, + 'tight': 1.25, + 'normal': 1.5, + 'loose': 2, + }, + + + /* + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing + |----------------------------------------------------------------------------- + | + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. + | + | Class name: .tracking-{size} + | + */ + + tracking: { + 'tight': '-0.05em', + 'normal': '0', + 'wide': '0.05em', + }, + + + /* + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-color + |----------------------------------------------------------------------------- + | + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Class name: .text-{color} + | + */ + + textColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-color + |----------------------------------------------------------------------------- + | + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .bg-{color} + | + */ + + backgroundColors: colors, + + + /* + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-width + |----------------------------------------------------------------------------- + | + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border width. + | + | Class name: .border{-side?}{-width?} + | + */ + + borderWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + + + /* + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-color + |----------------------------------------------------------------------------- + | + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. + | + | Class name: .border-{color} + | + */ + + borderColors: Object.assign({ default: colors['grey-light'] }, colors), + + + /* + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- + | + | Here is where you define your border radius values. If a `default` radius + | is provided, it will be made available as the non-suffixed `.rounded` + | utility. + | + | Class name: .rounded{-radius?} + | + */ + + borderRadius: { + default: '.25rem', + 'sm': '.125rem', + 'lg': '.5rem', + 'full': '9999px', + 'none': '0', + }, + + + /* + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- + | + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. + | + | Class name: .w-{size} + | + */ + + width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + 'full': '100%', + 'screen': '100vw' + }, + + + /* + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- + | + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. + | + | Class name: .h-{size} + | + */ + + height: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .min-w-{size} + | + */ + + minWidth: { + '0': '0', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. + | + | Class name: .min-h-{size} + | + */ + + minHeight: { + '0': '0', + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. + | + | Class name: .max-w-{size} + | + */ + + maxWidth: { + 'xs': '20rem', + 'sm': '30rem', + 'md': '40rem', + 'lg': '50rem', + 'xl': '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + 'full': '100%', + }, + + + /* + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .max-h-{size} + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh', + }, + + + /* + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- + | + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .p{side?}-{size} + | + */ + + padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '16': '4rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- + | + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .m{side?}-{size} + | + */ + + margin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '16': '4rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Negative margin https://tailwindcss.com/docs/negative-margin + |----------------------------------------------------------------------------- + | + | Here is where you define your negative margin utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default we + | provide matching values to the padding scale since these utilities + | generally get used together. You can, of course, modify these + | values as needed. + | + | Class name: .-m{side?}-{size} + | + */ + + negativeMargin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '16': '4rem', + }, + + + /* + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- + | + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. + | + | If a `default` shadow is provided, it will be made available as the non- + | suffixed `.shadow` utility. + | + | Class name: .shadow-{size?} + | + */ + + shadows: { + default: '0 2px 4px 0 rgba(0,0,0,0.10)', + 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', + 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', + 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + 'none': 'none', + }, + + + /* + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- + | + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .z-{index} + | + */ + + zIndex: { + 'auto': 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + }, + + + /* + |----------------------------------------------------------------------------- + | Opacity https://tailwindcss.com/docs/opacity + |----------------------------------------------------------------------------- + | + | Here is where you define your opacity utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .opacity-{name} + | + */ + + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '100': '1', + }, + + + /* + |----------------------------------------------------------------------------- + | Packages + |----------------------------------------------------------------------------- + | + | Here is where you can define the configuration for any Tailwind packages + | you're using. These can be utility packs, component bundles, or even + | complete themes. You'll want to reference each package's + | documentation for a list of settings available for it. + | + */ + + packages: { + }, + +} diff --git a/package.json b/package.json index 32801074f..cdc6060c2 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dev": "npm run build && npm-run-all -p watch:css watch:js", "init": "mkdir -p $npm_package_config_outputCss $npm_package_config_outputFonts $npm_package_config_outputJs", "less": "lessc --npm-import='prefix=~' $npm_package_config_lessPath/main.less $npm_package_config_outputCss/site.css", - "postcss": "postcss -u autoprefixer tailwindcss -r $npm_package_config_outputCss/*.css", + "postcss": "postcss -c postcss.config.js -r $npm_package_config_outputCss/*.css", "prod": "npm run build", "watch": "npm-run-all -p watch:css watch:js", "watch:css": "onchange $npm_package_config_lessPath -v -- npm-run-all -p build:css", @@ -30,9 +30,11 @@ "less": "2.7.1", "less-plugin-clean-css": "^1.5.1", "less-plugin-npm-import": "^2.1.0", + "normalize.css": "^7.0.0", "npm-run-all": "^4.1.1", "onchange": "^3.2.1", "postcss-cli": "^4.1.1", + "suitcss-base": "^4.0.0", "tailwindcss": "^0.1.4" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..f70f08597 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('tailwindcss')('./assets/less/tailwind-config.js'), + require('autoprefixer'), + ] +} diff --git a/source/_includes/availability.html.twig b/source/_includes/availability.html.twig index 39370c2ae..776e41349 100644 --- a/source/_includes/availability.html.twig +++ b/source/_includes/availability.html.twig @@ -1,7 +1,7 @@ -
+

Availability

-
    +
      {% for type, value in site.availability %}
    • {% include 'availability/' ~ value %} diff --git a/source/_includes/availability/limited.html.twig b/source/_includes/availability/limited.html.twig index eca6174e1..710e2ecbd 100644 --- a/source/_includes/availability/limited.html.twig +++ b/source/_includes/availability/limited.html.twig @@ -1,2 +1,2 @@ - + Currently have limited {{ type }}-time capacity. diff --git a/source/_includes/availability/no.html.twig b/source/_includes/availability/no.html.twig index 256df14ab..c3ff739bb 100644 --- a/source/_includes/availability/no.html.twig +++ b/source/_includes/availability/no.html.twig @@ -1,2 +1,2 @@ - + Currently no spare {{ type }}-time capacity. diff --git a/source/_includes/availability/yes.html.twig b/source/_includes/availability/yes.html.twig index 350e7b0f3..cebdd72c1 100644 --- a/source/_includes/availability/yes.html.twig +++ b/source/_includes/availability/yes.html.twig @@ -1,2 +1,2 @@ - + Currently have available {{ type }}-time capacity. diff --git a/source/_includes/badges.html.twig b/source/_includes/badges.html.twig index a5b842754..e949522d8 100644 --- a/source/_includes/badges.html.twig +++ b/source/_includes/badges.html.twig @@ -1,27 +1,26 @@ -
      - - Drupal Association Individual Member + + Drupal Association Individual Member -
      +
      {% for badge in [ { image: 'acquia-d8-developer.png', alt: 'Acquia Certified Developer - Drupal 8 Exam Badge' }, - { image: 'acquia-d8-back-end.png', alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge' } + { image: 'acquia-d8-back-end.png', alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge' }, ] %} -
      - {{ badge.alt }} +
      + {{ badge.alt }}
      {% endfor %}
      - +
      diff --git a/source/_includes/meetups.html.twig b/source/_includes/meetups.html.twig index 847cb2a55..190f99f34 100644 --- a/source/_includes/meetups.html.twig +++ b/source/_includes/meetups.html.twig @@ -4,15 +4,13 @@
        {% for meetup in site.meetups %}
      • - + - {{ meetup.name }} logo + {{ meetup.name }} logo
        • {% endfor %} diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig index 53923472a..489d203d0 100644 --- a/source/_includes/nav.html.twig +++ b/source/_includes/nav.html.twig @@ -1,19 +1,18 @@ -
        -
        -
        - +
        +
        +
        + {{ site.title }}
        -
        -
        + +
      diff --git a/source/_includes/post/about-author.html.twig b/source/_includes/post/about-author.html.twig index d06dab008..c11980123 100644 --- a/source/_includes/post/about-author.html.twig +++ b/source/_includes/post/about-author.html.twig @@ -1,7 +1,9 @@ -
      +

      About the Author

      - Picture of Oliver + Picture of Oliver

      Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a {{ site.work.role }} at {{ site.companies[site.work.company].name }} and also provides freelance consultancy services for Drupal, Symfony and Laravel applications and Linux servers.

      diff --git a/source/_includes/post/feedback.html.twig b/source/_includes/post/feedback.html.twig index 20867a878..64ef2e2cc 100644 --- a/source/_includes/post/feedback.html.twig +++ b/source/_includes/post/feedback.html.twig @@ -1,3 +1,3 @@ -

      +

      Have feedback on this post? Email me or send me a tweet.

      diff --git a/source/_includes/post/header.html.twig b/source/_includes/post/header.html.twig index 619b8628c..7447c12e2 100644 --- a/source/_includes/post/header.html.twig +++ b/source/_includes/post/header.html.twig @@ -3,6 +3,6 @@ {{ page.title }} -

      +

      {{ page.date|date('jS F Y') }}

      diff --git a/source/_includes/post/pager.html.twig b/source/_includes/post/pager.html.twig index 4c119ff78..60909c069 100644 --- a/source/_includes/post/pager.html.twig +++ b/source/_includes/post/pager.html.twig @@ -1,15 +1,15 @@ -
      +
      {% if page.previous_post %} -
      - +
      + « {{ page.previous_post.title }}
      {% endif %} {% if page.next_post %} -
      - +
      + {{ page.next_post.title }} »
      diff --git a/source/_includes/post/twitter-link.html.twig b/source/_includes/post/twitter-link.html.twig index e90997cca..2c93e30db 100644 --- a/source/_includes/post/twitter-link.html.twig +++ b/source/_includes/post/twitter-link.html.twig @@ -1,3 +1,3 @@ -
      - Questions? Comments? I’m @{{ site.twitter.name }} on Twitter. +
      +

      Questions? Comments? I’m @{{ site.twitter.name }} on Twitter.

      diff --git a/source/_includes/posts/latest.html.twig b/source/_includes/posts/latest.html.twig index 59854c75b..3446b16cc 100644 --- a/source/_includes/posts/latest.html.twig +++ b/source/_includes/posts/latest.html.twig @@ -2,7 +2,7 @@

      Latest blog posts

      -
        +
          {% for post in data.posts|slice(0, site.latest_posts) %}
        • diff --git a/source/_includes/talk/events.html.twig b/source/_includes/talk/events.html.twig index a13b6fce2..ffd2e5b28 100644 --- a/source/_includes/talk/events.html.twig +++ b/source/_includes/talk/events.html.twig @@ -1,4 +1,4 @@ -
          +

          Events

          {% include "talks-table" with { diff --git a/source/_includes/talk/slides.html.twig b/source/_includes/talk/slides.html.twig index 0821e562f..c0cecaa07 100644 --- a/source/_includes/talk/slides.html.twig +++ b/source/_includes/talk/slides.html.twig @@ -1,7 +1,8 @@ {% if page.slides.embed %} -
          +

          Slides

          -
          + +
          {{ page.slides.embed|raw }}
          diff --git a/source/_includes/talks-table-row.html.twig b/source/_includes/talks-table-row.html.twig index f0cfed625..ea5add5c2 100644 --- a/source/_includes/talks-table-row.html.twig +++ b/source/_includes/talks-table-row.html.twig @@ -1,16 +1,16 @@ - - + + {{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }} {% if row.event.time is defined %} - +
          {{ row.event.time }} - +
          {% endif %} {% if not talk_page %} - + {% if row.talk.url is not empty %}           {{ row.talk.title }} @@ -19,17 +19,17 @@ {{ row.talk.title }} {% endif %} - +
          {% if row.talk.type %} {{ row.talk.type }} {% else %} {{ row.event.type|default('Talk') }} {% endif %} - +
          {% endif %} - + {% if row.event.website is not empty %}           {{ row.event.name }} @@ -39,19 +39,18 @@ {% endif %} {% if row.event.location is defined %} - +
          {{ row.event.location }} - +
          {% endif %} {% if not upcoming %} - + {% if row.event.feedback and row.event.date <= today %} -           + joind.in {% endif %} diff --git a/source/_includes/talks-table.html.twig b/source/_includes/talks-table.html.twig index 0a571d114..e06498247 100644 --- a/source/_includes/talks-table.html.twig +++ b/source/_includes/talks-table.html.twig @@ -1,17 +1,17 @@
          - +
          - - + + {% if not talk_page %} - + {% endif %} - + {% if not upcoming %} - + {% endif %} diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index d746b2a40..51a9ed002 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -24,37 +24,39 @@ {% endfor %} - + {% include 'nav' %} -
          -
          -
          -
          - {% block content_top %}{% endblock %} - {% block content_wrapper %}{% block content %}{% endblock %}{% endblock %} - {% block content_bottom %}{% endblock %} -
          +
          +
          +
          +
          +
          + {% block content_top %}{% endblock %} + {% block content_wrapper %}{% block content %}{% endblock %}{% endblock %} + {% block content_bottom %}{% endblock %} +
          - {% block sidebar_wrapper %} -
          - {% block sidebar %} - {% include 'badges' %} - {% include 'availability' %} - {% include 'posts/latest' %} - {% endblock %} -
          - {% endblock %} + {% block sidebar_wrapper %} +
          + {% block sidebar %} + {% include 'badges' %} + {% include 'availability' %} + {% include 'posts/latest' %} + {% endblock %} +
          + {% endblock %} +
          + +
          +

          + © 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with Sculpin and Tailwind CSS. +

          + + {% include 'meetups' %} +
          - -
          -

          - © 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with Sculpin. -

          - - {% include 'meetups' %} -
          diff --git a/source/_layouts/post.html.twig b/source/_layouts/post.html.twig index ae48ee88d..732b471f8 100644 --- a/source/_layouts/post.html.twig +++ b/source/_layouts/post.html.twig @@ -13,5 +13,5 @@ {% endblock %} {% block scripts %} - + {% endblock %} diff --git a/source/blog.html b/source/blog.html index 85d91723e..cf2ebbbd0 100644 --- a/source/blog.html +++ b/source/blog.html @@ -9,9 +9,9 @@ use: [posts] {% block content %}

          Blog

          -
            +
              {% for post in page.pagination.items %} -
            • +
            • {{ include('post/header', { page: post, title_tag: 'h2' @@ -33,10 +33,15 @@ use: [posts] {% if page.pagination.previous_page or page.pagination.next_page %} {% endif %} diff --git a/source/contact.html.twig b/source/contact.html.twig index ca5de5743..cbccca618 100644 --- a/source/contact.html.twig +++ b/source/contact.html.twig @@ -7,23 +7,38 @@ use: [posts]

              To send me an email, complete the form below.

              - - + + - - + + - - + + - - + + - + diff --git a/source/experience.html.twig b/source/experience.html.twig index 92592d2eb..4b61247e0 100644 --- a/source/experience.html.twig +++ b/source/experience.html.twig @@ -107,48 +107,48 @@ experiences: {% block content %}

              Experience

              - {% for experience in page.experiences|reverse %} - {% set company = site.companies[experience.company] %} +
              + {% for experience in page.experiences|reverse %} + {% set company = site.companies[experience.company] %} -
              - {% if company.logo %} -
              - {{ company.name }} logo -
              - {% endif %} - -
              -

              {{ company.name }}

              - -
              - {% if company.url -%} - - {{- company.url -}} - - {%- endif %} - -
              - {{- experience.role }} - from - {{ experience.start }} - to - {{ experience.end|default('Present') -}} - {%- if experience.location %} ({{ experience.location }}){% endif %}. -
              -
              - - {% if experience.description %} -
              - {{ experience.description|markdown }} +
              + {% if company.logo %} +
              + {{ company.name }} logo
              {% endif %} -
              {# /.inner #} -
              - {% endfor %} +
              +

              {{ company.name }}

              + +
              + {% if company.url -%} + + {{- company.url -}} + + {%- endif %} + +
              + {{- experience.role }} + from + {{ experience.start }} + to + {{ experience.end|default('Present') -}} + {%- if experience.location %} ({{ experience.location }}){% endif %}. +
              +
              + + {% if experience.description %} +
              + {{ experience.description|markdown }} +
              + {% endif %} + +
              {# /.inner #} +
              + {% endfor %} +
              {% endblock %} diff --git a/source/index.md b/source/index.md index 3c1d239cb..7d4e1b5fe 100644 --- a/source/index.md +++ b/source/index.md @@ -11,7 +11,7 @@ use: [posts, testimonials] --- # About Me -Picture of Oliver +Picture of Oliver My name is Oliver Davies (aka [opdavies][1]) - a full-stack Web Developer and System Administrator based in Wales, UK. diff --git a/source/testimonials.html.twig b/source/testimonials.html.twig index 60b5ed288..36942ce85 100644 --- a/source/testimonials.html.twig +++ b/source/testimonials.html.twig @@ -5,13 +5,13 @@ use: [posts] testimonials: - name: Ed Welsby image: ed-welsby.png - role: Senior Developer at Proctor & Stevenson + role: Senior Developer at Proctor & Stevenson text: | Oliver was great to work with, he has a solid knowledge of the various aspects of web development and never minded helping me out with Linux commands! - name: Brian Healy image: brian-healy.png - role: Director of Business Development at Tincan. + role: Director of Business Development at Tincan. text: | Oliver was fantastic to work with - pro-active and highly responsive, he worked well remotely and as part of a project team. His understanding of the project requirement(s) and ability to translate it into working code was essential and he delivered. @@ -31,21 +31,21 @@ testimonials: Oliver is seasoned Drupal and all round highly skilled and experienced web developer. I have worked with Oliver on an important project where he was reliable, prompt and ensured strict client deadline delivery and confidentiality at all times. - name: James Chapman - role: Director at Development Done Right + role: Director at Development Done Right image: james-chapman.png text: | We used Oliver on a number of occasions throughout 2012 and I have to say we've been delighted with his work. His skills working with Drupal are excellent particularly with custom module development and we wouldn’t hesitate to recommend him others. - name: Léonie Watson role: > - Director of Accessibility at Nomensa + Director of Accessibility at Nomensa image: leonie-watson.jpg text: | Oliver is a flexible and hardworking developer, with a terrific knowledge of Drupal. He promotes accessibility best practice within the Drupal community, and is always happy to share his knowledge with other people. - name: Holly Ross role: > - Executive Director at the Drupal Association + Executive Director at the Drupal Association image: holly-ross.png text: | Oliver has been an outstanding contributor to the Drupal Association team. He is a talented developer who writes great code and applies his curiosity and love of learning to every project. He is also a fantastic team member, who gives to the team as much as he gets. @@ -53,7 +53,7 @@ testimonials: Oliver is the embodiment of everything good about the Drupal community. - name: Josh Mitchell - role: CTO at the Drupal Association + role: CTO at the Drupal Association image: josh-mitchell.png text: | Oliver is a skilled Drupal developer with a passion for the Drupal community. As his direct supervisor, I was able to watch Oliver grow with the Drupal Association and contribute an amazing amount of effort and integrity to all of his work. @@ -62,33 +62,34 @@ testimonials: - name: Chris Jarvis image: chris-jarvis.jpg - role: Developer at Microserve + role: Developer at Microserve text: | Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more. --- {% block content %} - {% for testimonial in page.testimonials|reverse %} -
              -

              {{ testimonial.name }}

              +
              + {% for testimonial in page.testimonials|reverse %} +
              + {% if testimonial.image %} +
              + {{ testimonial.name }} +
              + {% endif %} - {% if testimonial.image %} - {{ testimonial.name }} - {% endif %} +
              +

              {{ testimonial.name }}

              - {% if testimonial.role %} -
              - {{ testimonial.role|raw }} + {% if testimonial.role %} +
              + {{ testimonial.role|raw }} +
              + {% endif %}
              - {% endif %} -
              {{ testimonial.text|markdown }} -
              -
              - {% endfor %} +
              + {% endfor %} +
              {% endblock %} diff --git a/yarn.lock b/yarn.lock index 030aab61e..0c8923f19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1833,6 +1833,10 @@ normalize-selector@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03" +normalize.css, normalize.css@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf" + npm-run-all: version "4.1.1" resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.1.tgz#3095cf3f3cacf57fcb662b210ab10c609af6ddbb" @@ -2799,6 +2803,12 @@ sugarss@^0.2.0: dependencies: postcss "^5.2.4" +suitcss-base: + version "4.0.0" + resolved "https://registry.yarnpkg.com/suitcss-base/-/suitcss-base-4.0.0.tgz#f3374526410c90e28a3fd8435947f1caa6146eb6" + dependencies: + normalize.css "^7.0.0" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
          Date
          DateTalkTalkEventEventFeedbackFeedback