Use Laravel Mix

This commit is contained in:
Oliver Davies 2019-11-12 09:45:06 +00:00
parent ee18292499
commit c418a1b8d6
21 changed files with 11079 additions and 7274 deletions

View file

@ -1,20 +1,27 @@
h1, h2, h3
h1, h2, h3 {
@apply font-bold
}
h1
h1 {
@apply text-3xl
}
h2
h2 {
@apply text-2xl
}
img
img {
@apply max-w-full h-auto
}
a
@apply text-blue-700 no-underline
a {
@apply text-blue-700 no-underline;
&:hover
&:hover {
@apply underline
}
}
blockquote
blockquote {
@apply border-l-4 border-blue-600 pl-4 px-6 py-2
}

View file

@ -1,10 +1,13 @@
.button
@apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm
.button {
@apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
&:focus
&:focus {
@apply py-2 px-3 m-0
}
&:active,
&:focus,
&:hover
&:hover {
@apply bg-white text-blue-600
}
}

View file

@ -1,2 +1,3 @@
.container
.container {
@apply w-full max-w-5xl px-4 mx-auto
}

View file

@ -1,3 +1,5 @@
p.lead
@screen md
p.lead {
@screen md {
@apply text-lg
}
}

View file

@ -1,16 +1,19 @@
.markup
@apply leading-normal
.markup {
@apply leading-normal;
h2,
h3,
h4
h4 {
@apply text-black font-bold mb-3
}
h2
h2 {
@apply mt-8 mb-3
}
h3
h3 {
@apply text-lg mt-8
}
p,
ul,
@ -19,28 +22,38 @@
table,
figure,
pre,
[v-pre]
&:not(:last-child)
[v-pre] {
&:not(:last-child) {
@apply mb-6
}
}
ul
ul {
@apply list-disc ml-5
}
code
code {
@apply bg-gray-200 font-mono text-sm
}
p,
li
code
li {
code {
@apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
}
}
pre code,
.hljs
.hljs {
@apply block leading-loose overflow-x-scroll p-6
}
figure,
img
img {
@apply block
}
figcaption
figcaption {
@apply italic text-sm text-gray-800 text-center mb-0 mt-1
}
}

View file

@ -1,11 +1,15 @@
.note
@apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded
.note {
@apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
> *:not(:first-child)
> *:not(:first-child) {
@apply mt-6
}
p a
@apply text-black underline
p a {
@apply text-black underline;
&:hover
&:hover {
@apply no-underline
}
}
}

View file

@ -1,13 +1,18 @@
.table
@apply w-full
.table {
@apply w-full;
th
th {
@apply bg-gray-200 text-left
}
th,
td
td {
@apply px-4 py-2 border border-solid border-gray-300
}
}
table.is-striped
tbody > tr:not(:nth-child(odd)) td
table.is-striped {
tbody > tr:not(:nth-child(odd)) td {
@apply bg-gray-100
}
}

View file

@ -1,7 +1,9 @@
.video-full
@apply w-full relative
padding-top: 56.25%
.video-full {
@apply w-full relative;
padding-top: 56.25%;
iframe,
embed
embed {
@apply absolute h-full left-0 top-0 w-full
}
}

View file

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

View file

@ -1,5 +1,7 @@
.wrap
@apply w-full max-w-3xl mx-auto
.wrap {
@apply w-full max-w-3xl mx-auto;
&.is-wide
&.is-wide {
@apply max-w-5xl
}
}

View file

@ -1,18 +1,18 @@
@import 'tailwindcss/base'
@import './base.css'
@import 'tailwindcss/base';
@import './base.css';
@import 'tailwindcss/components'
@import './components/button.css'
@import './components/container.css'
@import './components/lead.css'
@import './components/markup.css'
@import './components/note.css'
@import './components/table.css'
@import './components/video.css'
@import './components/widget.css'
@import './components/wrap.css'
@import 'tailwindcss/components';
@import './components/button.css';
@import './components/container.css';
@import './components/lead.css';
@import './components/markup.css';
@import './components/note.css';
@import './components/table.css';
@import './components/video.css';
@import './components/widget.css';
@import './components/wrap.css';
@import 'highlightjs/styles/github-gist'
@import 'highlightjs/styles/github-gist';
@import 'tailwindcss/utilities'
@import './utilities.css'
@import 'tailwindcss/utilities';
@import './utilities.css';

View file

@ -1,2 +1,3 @@
.no-js .js-hidden
.no-js .js-hidden {
display: none
}