Switch to Tailwind
This commit is contained in:
parent
3a8d5362f2
commit
0d4fd40873
16
assets/less/components/listing.less
Normal file
16
assets/less/components/listing.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.nav-item {
|
||||
.black-70;
|
||||
.dib;
|
||||
.f6;
|
||||
.link;
|
||||
.ml3;
|
||||
.pv3;
|
||||
|
||||
&:first-child { .ml0 }
|
||||
}
|
||||
|
||||
.nav-item--active {
|
||||
.b--blue;
|
||||
.bb;
|
||||
.black;
|
||||
.bw1;
|
||||
}
|
||||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
3
assets/less/components/talks-table.less
Normal file
3
assets/less/components/talks-table.less
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.talks-table tr:nth-child(odd) {
|
||||
@apply .bg-grey-lighter;
|
||||
}
|
||||
5
assets/less/components/testimonial.less
Normal file
5
assets/less/components/testimonial.less
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.testimonial-image {
|
||||
@apply .rounded-full .mb-3 .ml-3;
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
774
assets/less/tailwind-config.js
Normal file
774
assets/less/tailwind-config.js
Normal file
|
|
@ -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: {
|
||||
},
|
||||
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss')('./assets/less/tailwind-config.js'),
|
||||
require('autoprefixer'),
|
||||
]
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="lh-copy">
|
||||
<div class="block mb-4">
|
||||
<h2>Availability</h2>
|
||||
|
||||
<ul class="list pa0">
|
||||
<ul class="">
|
||||
{% for type, value in site.availability %}
|
||||
<li>
|
||||
{% include 'availability/' ~ value %}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<i class="mr1 fa fa-thumbs-o-up orange"></i>
|
||||
<i class="mr-1 fa fa-thumbs-o-up text-orange"></i>
|
||||
Currently have limited {{ type }}-time capacity.
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<i class="mr1 fa fa-thumbs-o-down dark-red"></i>
|
||||
<i class="mr-1 fa fa-thumbs-o-down text-red-dark"></i>
|
||||
Currently no spare {{ type }}-time capacity.
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<i class="mr1 fa fa-thumbs-o-up dark-green"></i>
|
||||
<i class="mr-1 fa fa-thumbs-o-up text-green-dark"></i>
|
||||
Currently have available {{ type }}-time capacity.
|
||||
|
|
|
|||
|
|
@ -1,27 +1,26 @@
|
|||
<div>
|
||||
<a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="db mb3 tc">
|
||||
<img
|
||||
src="{{ site.images_url }}/assets/images/badges/da-individual-member.png"
|
||||
<div class="text-center">
|
||||
<a href="https://assoc.drupal.org/membership"
|
||||
title="I’m a Drupal Association member."
|
||||
class="block mb-4">
|
||||
<img src="{{ site.images_url }}/assets/images/badges/da-individual-member.png"
|
||||
alt="Drupal Association Individual Member"
|
||||
width="200"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div class="db mb3 dt">
|
||||
<div class="mb-4 flex">
|
||||
{% 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' },
|
||||
] %}
|
||||
<div class="dtc">
|
||||
<img
|
||||
src="{{ site.images_url }}/assets/images/badges/{{ badge.image }}"
|
||||
alt="{{ badge.alt }}"
|
||||
/>
|
||||
<div>
|
||||
<img src="{{ site.images_url }}/assets/images/badges/{{ badge.image }}"
|
||||
alt="{{ badge.alt }}" />
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<a href="http://conference.phpnw.org.uk/phpnw17" class="db">
|
||||
<a href="http://conference.phpnw.org.uk/phpnw17" class="block mb-4">
|
||||
<img src="{{ site.images_url }}/assets/images/badges/phpnw17.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,13 @@
|
|||
<ul class="list flex pa0 mt0">
|
||||
{% for meetup in site.meetups %}
|
||||
<li>
|
||||
<a
|
||||
href="{{ meetup.url }}"
|
||||
<a href="{{ meetup.url }}"
|
||||
title="{{ meetup.name }}"
|
||||
class="dib {% if not loop.last %}mr2{% endif %}">
|
||||
class="dib mr-4">
|
||||
|
||||
<img
|
||||
src="{{ site.images_url }}/assets/images/meetups/{{ meetup.logo }}"
|
||||
<img src="{{ site.images_url }}/assets/images/meetups/{{ meetup.logo }}"
|
||||
alt="{{ meetup.name }} logo"
|
||||
class="h3">
|
||||
class="h-16">
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<header class="w-100 ph4-ns bg-white bb b--light-gray mb2">
|
||||
<div class="db dt-ns mw9 center w-100">
|
||||
<div class="db dtc-ns v-mid tl w-30">
|
||||
<a href="/" class="dib f5 mt0 link black-70" title="Home">
|
||||
<div class="border-bottom border-b border-grey-lighter mb-4">
|
||||
<header class="container mx-auto flex items-center">
|
||||
<div class="w-1/4">
|
||||
<a href="/" class="" title="Home">
|
||||
{{ site.title }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
|
||||
<nav class="w-3/4 text-right">
|
||||
{% for link in site.nav_links %}
|
||||
<a
|
||||
href="{{ link.href }}"
|
||||
class="nav-item {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active' }}">
|
||||
<a href="{{ link.href }}"
|
||||
class="inline-block py-4 ml-4 {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'border-b-2 border-blue' }}">
|
||||
{{- link.title -}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<div class="cf mt2">
|
||||
<div class="clearfix mt-4">
|
||||
<h2>About the Author</h2>
|
||||
|
||||
<img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="w3 mr3 br-100 fl">
|
||||
<img src="{{ site.images_url }}{{ site.avatar.url }}"
|
||||
alt="Picture of Oliver"
|
||||
class="w-1/6 mr-4 float-left rounded-full">
|
||||
|
||||
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a {{ site.work.role }} at <a href="{{ site.companies[site.work.company].url }}?utm_source={{ site.short_url }}&utm_medium=about-author">{{ site.companies[site.work.company].name }}</a> and also provides freelance consultancy services for Drupal, Symfony and Laravel applications and Linux servers.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<p class="post-feedback" style="font-style: italic">
|
||||
<p class="mb-4 italic text-grey-dark">
|
||||
<b>Have feedback on this post?</b> <a href="mailto:{{ site.email }}?subject=Feedback: {{ page.title }}">Email me</a> or <a href="https://twitter.com/intent/tweet?text=@{{ site.twitter.name }}&url={{ site.url }}{{ page.url|url_encode }}">send me a tweet</a>.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
{{ page.title }}
|
||||
</{{ title_tag }}>
|
||||
|
||||
<p class="mt0 black-50">
|
||||
<p class="text-grey-dark">
|
||||
{{ page.date|date('jS F Y') }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<div class="flex mt3">
|
||||
<div class="flex mt-8 -mx-4">
|
||||
{% if page.previous_post %}
|
||||
<div class="w-50-ns">
|
||||
<a href="{{ page.previous_post.url }}" class="blue hover-blue">
|
||||
<div class="w-1/2 px-4">
|
||||
<a href="{{ page.previous_post.url }}" class="text-blue @text-blue-dark">
|
||||
« {{ page.previous_post.title }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next_post %}
|
||||
<div class="w-50-ns tr">
|
||||
<a href="{{ page.next_post.url }}" class="blue hover-blue">
|
||||
<div class="w-1/2 px-4 text-right">
|
||||
<a href="{{ page.next_post.url }}" class="text-blue @text-blue-dark">
|
||||
{{ page.next_post.title }} »
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="i mb3 black-60">
|
||||
Questions? Comments? I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.
|
||||
<div class="mb-4 italic text-grey-dark">
|
||||
<p>Questions? Comments? I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="lh-copy">
|
||||
<h2>Latest blog posts</h2>
|
||||
|
||||
<ul class="list pa0">
|
||||
<ul class="bullets">
|
||||
{% for post in data.posts|slice(0, site.latest_posts) %}
|
||||
<li>
|
||||
<a href="{{ post.url }}">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="mt4">
|
||||
<div class="mt-8">
|
||||
<h2>Events</h2>
|
||||
|
||||
{% include "talks-table" with {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{% if page.slides.embed %}
|
||||
<div class="mt2">
|
||||
<div class="mt-8">
|
||||
<h2>Slides</h2>
|
||||
<div class="slides w-100 bg-center">
|
||||
|
||||
<div>
|
||||
{{ page.slides.embed|raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<tr class="striped--near-white">
|
||||
<td class="pa2">
|
||||
<tr>
|
||||
<td class="p-2">
|
||||
{{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }}
|
||||
|
||||
{% if row.event.time is defined %}
|
||||
<small class="db black-70">
|
||||
<div class="text-xs text-grey-dark">
|
||||
{{ row.event.time }}
|
||||
</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
{% if not talk_page %}
|
||||
<td class="pa2">
|
||||
<td class="p-2">
|
||||
{% if row.talk.url is not empty %}
|
||||
<a href="{{ row.talk.url }}">
|
||||
{{ row.talk.title }}
|
||||
|
|
@ -19,17 +19,17 @@
|
|||
{{ row.talk.title }}
|
||||
{% endif %}
|
||||
|
||||
<small class="db black-70">
|
||||
<div class="text-xs text-grey-dark">
|
||||
{% if row.talk.type %}
|
||||
{{ row.talk.type }}
|
||||
{% else %}
|
||||
{{ row.event.type|default('Talk') }}
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
|
||||
<td class="pa2">
|
||||
<td class="p-2">
|
||||
{% if row.event.website is not empty %}
|
||||
<a href="{{ row.event.website }}">
|
||||
{{ row.event.name }}
|
||||
|
|
@ -39,17 +39,16 @@
|
|||
{% endif %}
|
||||
|
||||
{% if row.event.location is defined %}
|
||||
<small class="db black-70">
|
||||
<div class="text-xs text-grey-dark">
|
||||
{{ row.event.location }}
|
||||
</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
{% if not upcoming %}
|
||||
<td class="ph2">
|
||||
<td class="p-2">
|
||||
{% if row.event.feedback and row.event.date <= today %}
|
||||
<a
|
||||
href="{{ row.event.feedback }}"
|
||||
<a href="{{ row.event.feedback }}"
|
||||
class="button"
|
||||
title="Read or leave feedback for this talk">
|
||||
<i class="fa fa-comment-o"></i> joind.in
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<div class="overflow-auto">
|
||||
<table class="w-100 ba b--black-20">
|
||||
<table class="talks-table w-full border border-grey-light">
|
||||
<thead>
|
||||
<tr class="striped--near-white">
|
||||
<th class="w-20-l pa2 tl bg-white">Date</th>
|
||||
<tr>
|
||||
<th class="w-1/4 p-2 text-left bg-white">Date</th>
|
||||
|
||||
{% if not talk_page %}
|
||||
<th class="w-40-l pa2 tl bg-white">Talk</th>
|
||||
<th class="w-1/3 p-2 text-left bg-white">Talk</th>
|
||||
{% endif %}
|
||||
|
||||
<th class="pa2 tl bg-white">Event</th>
|
||||
<th class="p-2 text-left bg-white">Event</th>
|
||||
|
||||
{% if not upcoming %}
|
||||
<th class="w4 pa2 tl bg-white">Feedback</th>
|
||||
<th class="p-2 text-left bg-white">Feedback</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -24,20 +24,21 @@
|
|||
<link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
|
||||
{% endfor %}
|
||||
</head>
|
||||
<body class="helvetica black-80 {{ page.blocks.body_classes }}">
|
||||
<body class="text-grey-darkest text-sm leading-normal">
|
||||
{% include 'nav' %}
|
||||
|
||||
<div class="w-100 pa3 ph4-ns">
|
||||
<div class="f6 mw9 center">
|
||||
<div class="flex-l">
|
||||
<main class="flex-auto pr4-l lh-copy">
|
||||
<div class="container mx-auto">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div class="md:flex -mx-4">
|
||||
<main class="md:w-3/4 px-4">
|
||||
{% block content_top %}{% endblock %}
|
||||
{% block content_wrapper %}{% block content %}{% endblock %}{% endblock %}
|
||||
{% block content_bottom %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block sidebar_wrapper %}
|
||||
<div class="flex-none w-25-m mw5-l ph3-m pt4 pt0-l">
|
||||
<div class="md:w-1/4 px-4">
|
||||
{% block sidebar %}
|
||||
{% include 'badges' %}
|
||||
{% include 'availability' %}
|
||||
|
|
@ -48,14 +49,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mw9 center mt4 bt b--black-20">
|
||||
<p class="f6">
|
||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||||
<footer class="border-t border-grey-lighter pt-4 mt-4">
|
||||
<p>
|
||||
© 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a> and <a href="https://tailwindcss.com">Tailwind CSS</a>.
|
||||
</p>
|
||||
|
||||
{% include 'meetups' %}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ site.url }}/assets/js/site.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,5 +13,5 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ use: [posts]
|
|||
{% block content %}
|
||||
<h1>Blog</h1>
|
||||
|
||||
<ul class="list pa0 ma0">
|
||||
<ul class="listing">
|
||||
{% for post in page.pagination.items %}
|
||||
<li class="cf mb2 pb4 bb b--light-silver">
|
||||
<li class="listing-item">
|
||||
{{ include('post/header', {
|
||||
page: post,
|
||||
title_tag: 'h2'
|
||||
|
|
@ -33,10 +33,15 @@ use: [posts]
|
|||
{% if page.pagination.previous_page or page.pagination.next_page %}
|
||||
<ul class="pager">
|
||||
{% if page.pagination.previous_page %}
|
||||
<li class="next"><a href="{{ site.url }}{{ page.pagination.previous_page.url }}">Newer →</a></li>
|
||||
<li class="next">
|
||||
<a href="{{ site.url }}{{ page.pagination.previous_page.url }}">Newer →</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if page.pagination.next_page %}
|
||||
<li class="previous"><a href="{{ site.url }}{{ page.pagination.next_page.url }}">← Older</a></li>
|
||||
<li class="previous">
|
||||
<a href="{{ site.url }}{{ page.pagination.next_page.url }}">← Older</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -7,23 +7,38 @@ use: [posts]
|
|||
<p>To send me an email, complete the form below.</p>
|
||||
|
||||
<form action="https://formspree.io/{{ site.email }}" method="POST">
|
||||
<label for="name" class="db mb1">Name</label>
|
||||
<input type="text" class="w-100 pa2 mb3 ba b--black-50" name="name" required>
|
||||
<label for="name" class="block mb-1">Name</label>
|
||||
<input type="text"
|
||||
class="w-full p-2 mb-4 border border--grey"
|
||||
name="name"
|
||||
required>
|
||||
|
||||
<label for="email" class="db mb1">Email</label>
|
||||
<input type="email" class="w-100 pa2 mb3 ba b--black-50" name="email" required>
|
||||
<label for="email" class="block mb-1">Email</label>
|
||||
<input type="email"
|
||||
class="w-full p-2 mb-4 border border--grey"
|
||||
name="email"
|
||||
required>
|
||||
|
||||
<label for="subject" class="db mb1">Subject</label>
|
||||
<input type="text" class="w-100 pa2 mb3 ba b--black-50" name="subject" required>
|
||||
<label for="subject" class="block mb-1">Subject</label>
|
||||
<input type="text"
|
||||
class="w-full p-2 mb-4 border border--grey"
|
||||
name="subject"
|
||||
required>
|
||||
|
||||
<label for="message" class="db mb1">Message</label>
|
||||
<textarea name="message" class="w-100 pa2 mb3 ba b--black-50" rows="5" required></textarea>
|
||||
<label for="message" class="block mb-1">Message</label>
|
||||
<textarea name="message"
|
||||
class="w-full p-2 mb-4 border border--grey"
|
||||
rows="5"
|
||||
required>
|
||||
</textarea>
|
||||
|
||||
<button class="button" type="submit">
|
||||
Send email
|
||||
</button>
|
||||
|
||||
<input type="hidden" name="_next" value="{{ site.url }}/contact/thanks" />
|
||||
<input type="hidden"
|
||||
name="_next"
|
||||
value="{{ site.url }}/contact/thanks" />
|
||||
|
||||
<input type="text" name="_gotcha" style="display: none" />
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -107,14 +107,14 @@ experiences:
|
|||
{% block content %}
|
||||
<h1>Experience</h1>
|
||||
|
||||
<div class="listing">
|
||||
{% for experience in page.experiences|reverse %}
|
||||
{% set company = site.companies[experience.company] %}
|
||||
|
||||
<div class="cf mb4">
|
||||
<div class="listing-item">
|
||||
{% if company.logo %}
|
||||
<div class="fr mb3 ml3 mt2 mw3 mw4-ns">
|
||||
<img
|
||||
src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}"
|
||||
<div class="float-right mb-4 ml-4 w-1/5">
|
||||
<img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}"
|
||||
alt="{{ company.name }} logo"
|
||||
class="img">
|
||||
</div>
|
||||
|
|
@ -123,16 +123,15 @@ experiences:
|
|||
<div>
|
||||
<h2 class="mv0">{{ company.name }}</h2>
|
||||
|
||||
<div class="mb3">
|
||||
<div class="mb-4">
|
||||
{% if company.url -%}
|
||||
<a
|
||||
class="dib mb1 blue dim"
|
||||
<a class="inline-block text-blue mb-1"
|
||||
href="{{ company.url }}?utm_source={{ site.short_url }}&utm_medium=experience">
|
||||
{{- company.url -}}
|
||||
</a>
|
||||
{%- endif %}
|
||||
|
||||
<div class="black-50">
|
||||
<div class="text-grey-dark">
|
||||
{{- experience.role }}
|
||||
from
|
||||
{{ experience.start }}
|
||||
|
|
@ -151,4 +150,5 @@ experiences:
|
|||
</div>{# /.inner #}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ use: [posts, testimonials]
|
|||
---
|
||||
# About Me
|
||||
|
||||
<img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="br-100 mw4">
|
||||
<img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="w-1/6 rounded-full">
|
||||
|
||||
My name is Oliver Davies (aka [opdavies][1]) - a full-stack Web Developer and System Administrator based in Wales, UK.
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ use: [posts]
|
|||
testimonials:
|
||||
- name: Ed Welsby
|
||||
image: ed-welsby.png
|
||||
role: Senior Developer at <a class="blue dim" href="http://www.proctors.co.uk">Proctor & Stevenson</a>
|
||||
role: Senior Developer at <a class="text-blue inline-block" href="http://www.proctors.co.uk">Proctor & Stevenson</a>
|
||||
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 <a class="blue dim" href="http://tincan.co.uk">Tincan</a>.
|
||||
role: Director of Business Development at <a class="text-blue inline-block" href="http://tincan.co.uk">Tincan</a>.
|
||||
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 <a class="blue dim" href="http://www.developmentdoneright.co.uk">Development Done Right</a>
|
||||
role: Director at <a class="text-blue inline-block" href="http://www.developmentdoneright.co.uk">Development Done Right</a>
|
||||
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 <a class="blue dim" href="http://www.nomensa.com">Nomensa</a>
|
||||
Director of Accessibility at <a class="text-blue inline-block" href="http://www.nomensa.com">Nomensa</a>
|
||||
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 <a class="blue dim" href="https://assoc.drupal.org">Drupal Association</a>
|
||||
Executive Director at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a>
|
||||
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 <a class="blue dim" href="https://assoc.drupal.org">Drupal Association</a>
|
||||
role: CTO at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a>
|
||||
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 <a class="blue dim" href="https://microserve.io">Microserve</a>
|
||||
role: Developer at <a class="text-blue inline-block" href="https://microserve.io">Microserve</a>
|
||||
text: |
|
||||
Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more.
|
||||
---
|
||||
{% block content %}
|
||||
<div class="listing">
|
||||
{% for testimonial in page.testimonials|reverse %}
|
||||
<article class="cf mb4">
|
||||
<h2 class="mv0">{{ testimonial.name }}</h2>
|
||||
|
||||
<article class="listing-item">
|
||||
{% if testimonial.image %}
|
||||
<img
|
||||
src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}"
|
||||
<div class="float-right mb-4 ml-4">
|
||||
<img src="{{ site.url }}/assets/images/testimonials/{{ testimonial.image }}"
|
||||
alt="{{ testimonial.name }}"
|
||||
class="fr mw3 br-100 ml4 mb4"
|
||||
height="65"
|
||||
width="65">
|
||||
class="testimonial-image">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-4">
|
||||
<h2>{{ testimonial.name }}</h2>
|
||||
|
||||
{% if testimonial.role %}
|
||||
<div class="black-50 mb3">
|
||||
<div>
|
||||
{{ testimonial.role|raw }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div>
|
||||
{{ testimonial.text|markdown }}
|
||||
</div>
|
||||
|
||||
{{ testimonial.text|markdown }}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
10
yarn.lock
10
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue