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

Swap sass for plain CSS

Browse source
This commit is contained in:
Oliver Davies 2019-03-09 08:15:13 +00:00
parent 2c30a88d53
commit 5cf2312233
18 changed files with 111 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.editorconfig
View file

@ -12,10 +12,7 @@ trim_trailing_whitespace = true
indent_size = 4
indent_style = space
[*.sass]
indent_size = 2
[*.vue]
[*.{css,js,vue}]
indent_size = 2
# Markdown customizations

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

@ -0,0 +1,20 @@
@tailwind preflight;
a {
@apply text-blue no-underline;
&:hover {
@apply underline;
}
}
@tailwind components;
@import 'components/blockquote.css';
@import 'components/button.css';
@import 'components/markup.css';
@import 'components/note.css';
@import 'components/talks/video.css';
@import 'components/widget.css';
@tailwind utilities;

3
assets/sass/components/blockquote.sass → assets/css/components/blockquote.css
View file

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

11
assets/sass/components/button.sass → assets/css/components/button.css
View file

@ -1,10 +1,13 @@
.button
@apply bg-blue border-blue border inline-block text-white no-underline py-2 px-3 rounded text-sm
.button {
@apply bg-blue border-blue 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
}
}

35
assets/sass/components/markup.sass → assets/css/components/markup.css
View file

@ -1,12 +1,14 @@
.markup
@apply leading-normal
.markup {
@apply leading-normal;
h2,
h3
h3 {
@apply text-black mb-3
}
h2
h2 {
@apply mt-6 mb-2
}
p,
ul,
@ -14,25 +16,34 @@
table,
figure,
pre,
[v-pre]
&:not(:last-child)
[v-pre] {
&:not(:last-child) {
@apply mb-6
}
}
code
code {
@apply bg-grey-lighter font-mono text-sm
}
p,
li
code
li {
code {
@apply inline-block border border-grey-light 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-grey-darker text-center mb-0 mt-1
}
}

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

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

6
assets/sass/components/talk/video.sass → assets/css/components/talks/video.css
View file

@ -1,4 +1,6 @@
.talk-video
.talk-video {
iframe,
embed
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 block mb-6
}

25
assets/sass/app.sass
View file

@ -1,25 +0,0 @@
@import '~font-awesome/css/font-awesome'
@import '~highlightjs/styles/github-gist'
@tailwind preflight
a
@apply text-blue no-underline
&:hover
@apply underline
@tailwind components
@import 'components/blockquote'
@import 'components/button'
@import 'components/listing'
@import 'components/markup'
@import 'components/note'
@import 'components/post'
@import 'components/slides'
@import 'components/table'
@import 'components/talk/video'
@import 'components/widget'
@tailwind utilities

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

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

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

5
assets/sass/components/post.sass
View file

@ -1,5 +0,0 @@
.post
@apply -mb-6
> *
@apply mb-6

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

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

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

1
package.json
View file

@ -15,6 +15,7 @@
"laravel-mix": "^2.1.11",
"laravel-mix-purgecss": "^2.1.2",
"laravel-mix-tailwind": "^0.1.0",
"postcss-nested": "^4.1.2",
"tailwindcss": "^0.6",
"tailwindcss-skip-link": "^1.0.0",
"tailwindcss-visuallyhidden": "^1.0.1",

7
webpack.mix.js
View file

@ -1,16 +1,17 @@
let mix = require('laravel-mix');
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', [
require('postcss-nested'),
require('tailwindcss')('tailwind.config.js'),
])
.js([
'node_modules/jquery/src/jquery.js',
'assets/js/app.js',
], 'source/dist/js/all.js')
.copyDirectory('node_modules/font-awesome/fonts', 'source/dist/fonts')
.tailwind('tailwind.config.js')
.purgeCss({
globs: [
path.join(__dirname, 'assets/js/**/*.{js,vue}'),

19
yarn.lock
View file

@ -5250,6 +5250,14 @@ postcss-nested@^3.0.0:
postcss "^6.0.14"
postcss-selector-parser "^3.1.1"
postcss-nested@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.1.2.tgz#8e0570f736bfb4be5136e31901bf2380b819a561"
integrity sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==
dependencies:
postcss "^7.0.14"
postcss-selector-parser "^5.0.0"
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"
@ -5324,7 +5332,7 @@ postcss-selector-parser@^3.1.1:
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-selector-parser@^5.0.0-rc.3:
postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3:
version "5.0.0"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
@ -5394,6 +5402,15 @@ postcss@^7.0.0:
source-map "^0.6.1"
supports-color "^6.1.0"
postcss@^7.0.14:
version "7.0.14"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
dependencies:
chalk "^2.4.2"
source-map "^0.6.1"
supports-color "^6.1.0"
prepend-http@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"