@import (less) "~font-awesome/css/font-awesome.css";
@import (less) "~highlightjs/styles/github-gist.css";

@tailwind preflight;

p,
li,
td {
    a { @apply .text-blue; }
}

.button {
    @apply .bg-blue;
    @apply .inline-block;
    @apply .rounded;
    @apply .text-white;
    @apply .px-4;
    @apply .py-2;

    &:active,
    &:hover {
        @apply .bg-blue-dark;
    }
}

blockquote {
    @apply .border-l-4 .border-blue .pl-4;
}

img.with-border {
    @apply .border .border-solid .border-grey-light;
}

h1, h2, h3 { @apply .mb-2; }

.content {
    h2,
    h3 {
        @apply .mt-6;
    }
}

p,
ul,
ol,
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;
}

svg {
    fill: currentColor;
}

@import 'components/listing.less';
@import 'components/post.less';
@import 'components/post/about-author.less';
@import 'components/post/code.less';
@import 'components/table.less';
@import 'components/talk/slides.less';
@import 'components/talk/video.less';
@import 'components/widget.less';

@tailwind utilities;