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

Replace Sass with PostCSS, include imports and nesting

Browse source
This commit is contained in:
Oliver Davies 2018-10-25 00:24:22 +01:00
parent 347bbe20ba
commit 9633b980d5
36 changed files with 279 additions and 184 deletions
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';

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

@ -0,0 +1,43 @@
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;
}
.element-invisible {
@apply absolute overflow-hidden break-normal;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
}

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