opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'postcss-import'

Browse source
This commit is contained in:
Oliver Davies 2018-10-25 00:29:25 +01:00
parent 97feaed704 da1517ace2
commit 9ce47b5461
37 changed files with 273 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/css/app.css Normal file
View file

@ -0,0 +1,10 @@
@import 'font-awesome/css/font-awesome';
@import 'highlightjs/styles/github-gist';
@import 'tailwind-preflight';
@import 'custom-preflight';
@import 'tailwind-components';
@import 'custom-components';
@import 'tailwind-utilities';

36
assets/css/base/base.css Normal file
View file

@ -0,0 +1,36 @@
a {
color: inherit;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
main a {
text-decoration: underline;
&:focus,
&:hover {
text-decoration: none;
}
}
h1, h2, h3 {
@apply mb-2;
}
.content h2,
.content h3 {
@apply mt-6;
}
p,
ul,
ol,
blockquote,
table,
pre {
@apply mb-6;
}

17
assets/css/base/images.css Normal file
View file

@ -0,0 +1,17 @@
img {
&.with-border {
@apply border border-solid border-grey-light;
}
&.with-padding {
@apply p-1;
}
&.avatar {
@apply border p-1 rounded-full;
}
}
svg {
fill: currentColor;
}

27
assets/css/base/vue.css Normal file
View file

@ -0,0 +1,27 @@
[v-cloak] {
.v-cloak-block {
@apply block;
}
.v-cloak-inline {
@apply inline;
}
.v-cloak-inline-block {
@apply inline-block;
}
.v-cloak-hidden {
@apply hidden;
}
.v-cloak-invisible {
@apply invisible;
}
}
.v-cloak-block,
.v-cloak-inline,
.v-cloak-inline-b {
@apply hidden;
}

3
assets/css/components/blockquote.css Normal file
View file

@ -0,0 +1,3 @@
blockquote {
@apply border-l-4 border-blue pl-4 px-6 py-2;
}

8
assets/css/components/button.css Normal file
View file

@ -0,0 +1,8 @@
.button {
@apply bg-blue inline-block rounded text-white px-4 py-2;
&:active,
&:hover {
@apply bg-blue-dark;
}
}

3
assets/css/components/link.css Normal file
View file

@ -0,0 +1,3 @@
.link {
@apply text-blue;
}

11
assets/css/components/listing.css Normal file
View file

@ -0,0 +1,11 @@
.listing {
@apply pl-0;
}
.listing-item {
@apply overflow-hidden pb-8;
&:not(:last-child) {
@apply border-b border-grey-light mb-8;
}
}

28
assets/css/components/markdown.css Normal file
View file

@ -0,0 +1,28 @@
.markdown {
h2 {
@apply mt-8 mb-3 text-black;
}
h2, h3 {
@apply text-black;
}
p:last-child {
@apply mb-0;
}
p code,
li code {
@apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px;
}
pre code,
.hljs {
@apply bg-grey-lighter block border-grey-dark border-l-4 font-mono leading-loose overflow-x-scroll p-6 rounded text-sm;
}
}
.markdown p a,
.markdown li a {
@apply link;
}

11
assets/css/components/note.css Normal file
View file

@ -0,0 +1,11 @@
.note {
@apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded;
> *:last-child {
@apply mb-0;
}
p a {
@apply text-black;
}
}

22
assets/css/components/slides.css Normal file
View file

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

27
assets/css/components/table.css Normal file
View file

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

6
assets/css/components/talk/video.css Normal file
View file

@ -0,0 +1,6 @@
.talk-video {
iframe,
embed {
@apply absolute h-full pin-l pin-t w-full;
}
}

3
assets/css/components/widget.css Normal file
View file

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

10
assets/css/custom-components.css Normal file
View file

@ -0,0 +1,10 @@
@import 'components/blockquote';
@import 'components/button';
@import 'components/link';
@import 'components/listing';
@import 'components/markdown';
@import 'components/note';
@import 'components/slides';
@import 'components/table';
@import 'components/talk/video';
@import 'components/widget';

3
assets/css/custom-preflight.css Normal file
View file

@ -0,0 +1,3 @@
@import 'base/base';
@import 'base/images';
@import 'base/vue';

1
assets/css/tailwind-components.css Normal file
View file

@ -0,0 +1 @@
@tailwind components;

1
assets/css/tailwind-preflight.css Normal file
View file

@ -0,0 +1 @@
@tailwind preflight;

1
assets/css/tailwind-utilities.css Normal file
View file

@ -0,0 +1 @@
@tailwind utilities;

23
assets/sass/app.sass
View file

@ -1,23 +0,0 @@
@import '~font-awesome/css/font-awesome.css'
@import '~highlightjs/styles/github-gist.css'
@tailwind preflight
@import 'base/base'
@import 'base/images'
@import 'base/vue'
@tailwind components
@import 'components/blockquote'
@import 'components/button'
@import 'components/link'
@import 'components/listing'
@import 'components/markdown'
@import 'components/note'
@import 'components/slides'
@import 'components/table'
@import 'components/talk/video'
@import 'components/widget'
@tailwind utilities

36
assets/sass/base/base.sass
View file

@ -1,36 +0,0 @@
a
color: inherit
text-decoration: none
&:focus,
&:hover
text-decoration: underline
main a
text-decoration: underline
&:focus,
&:hover
text-decoration: none
h1, h2, h3
@apply mb-2
.content
h2,
h3
@apply mt-6
p,
ul,
ol,
blockquote,
table,
pre
@apply mb-6
.element-invisible
@apply absolute overflow-hidden break-normal
clip: rect(1px, 1px, 1px, 1px)
height: 1px
width: 1px

12
assets/sass/base/images.sass
View file

@ -1,12 +0,0 @@
img
&.with-border
@apply border border-solid border-grey-light
&.with-padding
@apply p-1
&.avatar
@apply border p-1 rounded-full
svg
fill: currentColor

20
assets/sass/base/vue.sass
View file

@ -1,20 +0,0 @@
[v-cloak]
.v-cloak-block
@apply block
.v-cloak-inline
@apply inline
.v-cloak-inline-block
@apply inline-block
.v-cloak-hidden
@apply hidden
.v-cloak-invisible
@apply invisible
.v-cloak-block,
.v-cloak-inline,
.v-cloak-inline-block
@apply hidden

2
assets/sass/components/blockquote.sass
View file

@ -1,2 +0,0 @@
blockquote
@apply border-l-4 border-blue pl-4 px-6 py-2

6
assets/sass/components/button.sass
View file

@ -1,6 +0,0 @@
.button
@apply bg-blue inline-block rounded text-white px-4 py-2
&:active,
&:hover
@apply bg-blue-dark

2
assets/sass/components/link.sass
View file

@ -1,2 +0,0 @@
.link
@apply text-blue

8
assets/sass/components/listing.sass
View file

@ -1,8 +0,0 @@
.listing
@apply pl-0
.listing-item
@apply overflow-hidden pb-8
&:not(:last-child)
@apply border-b border-grey-light mb-8

21
assets/sass/components/markdown.sass
View file

@ -1,21 +0,0 @@
.markdown
h2
@apply mt-8 mb-3 text-black
h2, h3
@apply text-black
p,
li
a
@apply link
code
@apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px
p:last-child
@apply mb-0
pre code,
.hljs
@apply bg-grey-lighter block border-grey-dark border-l-4 font-mono leading-loose overflow-x-scroll p-6 rounded text-sm

9
assets/sass/components/note.sass
View file

@ -1,9 +0,0 @@
.note
@apply bg-blue-lighter
@apply border-blue border-l-4 mb-4 p-4 rounded
& > *:last-child
@apply mb-0
p a
@apply text-black

15
assets/sass/components/slides.sass
View file

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

20
assets/sass/components/table.sass
View file

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

4
assets/sass/components/talk/video.sass
View file

@ -1,4 +0,0 @@
.talk-video
iframe,
embed
@apply absolute h-full pin-l pin-t w-full

2
assets/sass/components/widget.sass
View file

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

4
package.json
View file

@ -16,5 +16,9 @@
"tailwindcss": "^0.6",
"tailwindcss-visuallyhidden": "^1.0.1",
"vue": "^2.5.17"
},
"dependencies": {
"postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.0"
}
}

2
source/_partials/post/tags.html.twig
View file

@ -1,5 +1,5 @@
{% if page.tags %}
<h2 class="element-invisible">Tags</h2>
<h2 class="visuallyhidden">Tags</h2>
<ul class="list-reset flex flex-wrap">
{% for tag in page.tags|sort %}

9
webpack.mix.js
View file

@ -4,7 +4,7 @@ require('laravel-mix-purgecss');
require('laravel-mix-tailwind');
mix.disableNotifications()
.sass('assets/sass/app.sass', 'source/dist/css')
.postCss('assets/css/app.css', 'source/dist/css')
.js([
// 'node_modules/highlightjs/highlight.pack.js',
'node_modules/jquery/dist/jquery.js',
@ -19,4 +19,11 @@ mix.disableNotifications()
],
whitelistPatterns: [/language/, /hljs/],
whitelistPatternsChildren: [/^markdown$/]
})
.options({
postCss: [
require('postcss-import')(),
require('postcss-nesting')(),
],
processCssUrls: false,
});

35
yarn.lock
View file

@ -4337,7 +4337,7 @@ performance-now@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
pify@^2.0.0:
pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -4442,6 +4442,15 @@ postcss-functions@^3.0.0:
postcss "^6.0.9"
postcss-value-parser "^3.3.0"
postcss-import@^12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
dependencies:
postcss "^7.0.1"
postcss-value-parser "^3.2.3"
read-cache "^1.0.0"
resolve "^1.1.7"
postcss-js@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.1.tgz#ffaf29226e399ea74b5dce02cab1729d7addbc7b"
@ -4583,6 +4592,12 @@ postcss-nested@^3.0.0:
postcss "^6.0.14"
postcss-selector-parser "^3.1.1"
postcss-nesting@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
dependencies:
postcss "^7.0.2"
postcss-normalize-charset@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@ -4711,6 +4726,14 @@ postcss@^7.0.0:
source-map "^0.6.1"
supports-color "^5.4.0"
postcss@^7.0.1, postcss@^7.0.2:
version "7.0.5"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
dependencies:
chalk "^2.4.1"
source-map "^0.6.1"
supports-color "^5.5.0"
prepend-http@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@ -4886,6 +4909,12 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
read-cache@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
dependencies:
pify "^2.3.0"
read-file-stdin@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
@ -5152,7 +5181,7 @@ resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
resolve@^1.4.0:
resolve@^1.1.7, resolve@^1.4.0:
version "1.8.1"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
dependencies:
@ -5701,7 +5730,7 @@ supports-color@^4.2.1:
dependencies:
has-flag "^2.0.0"
supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
dependencies: