This commit is contained in:
Oliver Davies 2018-05-28 22:55:23 +02:00
parent fa9652df3e
commit 9212cdb015
21 changed files with 301 additions and 188 deletions

View file

@ -0,0 +1,14 @@
.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;
}
}

View file

@ -0,0 +1,31 @@
pre code,
pre code.hljs,
.hljs {
@apply .p-4;
@apply .text-sm;
@apply .border-l-4;
@apply .border-grey-dark;
@apply .block;
@apply .bg-grey-lighter;
@apply .overflow-x-scroll;
@apply .font-mono;
}
p,
li {
code {
@apply .bg-grey-lighter .inline-block .font-mono;
padding: 1px 3px;
}
}
.note {
@apply .bg-blue-lighter;
@apply .p-4;
@apply .border-l-4;
@apply .border-blue;
}
.note > *:last-child {
@apply .mb-0;
}

View file

@ -0,0 +1,4 @@
.about-author {
@apply .mr-4 .float-left .rounded-full;
width: 75px;
}

View file

@ -0,0 +1,22 @@
p,
li {
code {
@apply .bg-grey-lighter .inline-block .font-mono .text-xs;
padding: 1px 3px;
}
}
pre code,
pre code.hljs,
.hljs {
@apply .bg-grey-lighter;
@apply .block;
@apply .border-grey-dark;
@apply .border-l-4;
@apply .font-mono;
@apply .leading-loose;
@apply .overflow-x-scroll;
@apply .p-4;
@apply .rounded;
@apply .text-xs;
}

View file

@ -0,0 +1,30 @@
.table-collapse {
border-collapse: collapse;
}
.table-responsive {
@apply .mb-4 .border .w-full;
overflow-x: auto;
overflow-y: hidden;
}
.table-responsive table {
@apply .mb-0 .border-0 .whitespace-no-wrap;
}
.table {
@apply .w-full;
@apply .table-collapse;
}
.table tr:nth-child(odd) {
@apply .bg-grey-lighter;
}
.table tr th {
@apply .text-left .px-3 .py-2 .bg-white;
}
.table td {
@apply .px-3 .py-2 .border-t;
}

View file

@ -0,0 +1,22 @@
.talk-slides {
background: url('../../../images/loading.gif') center no-repeat;
min-height: 275px;
@screen md {
& {
min-height: 375px;
}
}
@screen lg {
& {
min-height: 450px;
}
}
@screen xl {
& {
min-height: 560px;
}
}
}

View file

@ -0,0 +1,13 @@
.talk-video {
@apply .relative .w-full;
padding-top: 56.25%
}
.talk-video iframe,
.talk-video embed {
@apply .absolute;
@apply .pin-l;
@apply .pin-t;
@apply .h-full;
@apply .w-full;
}

View file

@ -0,0 +1,5 @@
.testimonial-image {
@apply .rounded-full .mb-3 .ml-3;
height: 65px;
width: 65px;
}

View file

@ -0,0 +1,3 @@
.widget {
@apply .mb-6 .block;
}

84
assets/less/site.less Normal file
View file

@ -0,0 +1,84 @@
@import (css) "~font-awesome/css/font-awesome.css";
@import (css) "~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';
@import 'components/post';
@import 'components/post/about-author';
@import 'components/post/code';
@import 'components/table';
@import 'components/talk/slides';
@import 'components/talk/video';
@import 'components/widget';
@tailwind utilities;

View file

@ -1,11 +0,0 @@
.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

View file

@ -1,26 +0,0 @@
pre code,
pre code.hljs,
.hljs
@apply .p-4
@apply .text-sm
@apply .border-l-4
@apply .border-grey-dark
@apply .block
@apply .bg-grey-lighter
@apply .overflow-x-scroll
@apply .font-mono
p,
li
code
@apply .bg-grey-lighter .inline-block .font-mono
padding: 1px 3px
.note
@apply .bg-blue-lighter
@apply .p-4
@apply .border-l-4
@apply .border-blue
.note > *:last-child
@apply .mb-0

View file

@ -1,19 +0,0 @@
p,
li
code
@apply .bg-grey-lighter .inline-block .font-mono .text-xs
padding: 1px 3px
pre code,
pre code.hljs,
.hljs
@apply .bg-grey-lighter
@apply .block
@apply .border-grey-dark
@apply .border-l-4
@apply .font-mono
@apply .leading-loose
@apply .overflow-x-scroll
@apply .p-4
@apply .rounded
@apply .text-xs

View file

@ -1,23 +0,0 @@
.table-collapse
border-collapse: collapse
.table-responsive
@apply .mb-4 .border .w-full
overflow-x: auto
overflow-y: hidden
.table-responsive table
@apply .mb-0 .border-0 .whitespace-no-wrap
.table
@apply .w-full
@apply .table-collapse
.table tr:nth-child(odd)
@apply .bg-grey-lighter
.table tr th
@apply .text-left .px-3 .py-2 .bg-white
.table td
@apply .px-3 .py-2 .border-t

View file

@ -1,15 +0,0 @@
.talk-slides
background: url('../images/loading.gif') center no-repeat
min-height: 275px
@screen md
&
min-height: 375px
@screen lg
&
min-height: 450px
@screen xl
&
min-height: 560px

View file

@ -1,11 +0,0 @@
.talk-video
@apply .relative .w-full
padding-top: 56.25%
.talk-video iframe,
.talk-video embed
@apply .absolute
@apply .pin-l
@apply .pin-t
@apply .h-full
@apply .w-full

View file

@ -1,2 +0,0 @@
.widget
@apply .mb-6 .block

View file

@ -1,77 +0,0 @@
@import '~font-awesome/css/font-awesome.css'
@import '~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
.element-invisible
position: absolute !important
clip: rect(1px, 1px, 1px, 1px)
overflow: hidden
height: 1px
width: 1px
word-wrap: normal
@import 'components/listing'
@import 'components/table'
@import 'components/talk/slides'
@import 'components/talk/video'
@import 'components/post'
@import 'components/post/code'
@import 'components/widget'
@tailwind utilities