diff --git a/css/button.pcss b/css/button.pcss new file mode 100644 index 0000000..d422fa6 --- /dev/null +++ b/css/button.pcss @@ -0,0 +1,43 @@ +.btn { + @apply font-semibold py-2 px-4 rounded; + + &:focus { + @apply outline-none shadow-outline; + } +} + +.btn-teal { + @apply bg-teal-500 text-white; + + &:focus { + @apply bg-teal-600; + } + + &:hover { + @apply bg-teal-600; + } +} + +.btn-green { + @apply bg-green-500 text-white; + + &:focus { + @apply bg-green-600; + } + + &:hover { + @apply bg-green-600; + } +} + +.btn-red { + @apply bg-red-500 text-white; + + &:focus { + @apply bg-red-600; + } + + &:hover { + @apply bg-red-600; + } +} diff --git a/css/note.pcss b/css/note.pcss new file mode 100644 index 0000000..9fae498 --- /dev/null +++ b/css/note.pcss @@ -0,0 +1,92 @@ +#note { + a { + @apply text-blue-700 underline; + } + + p { + @apply my-4; + } + + blockquote, figure { + @apply my-4 mx-10; + } + + hr { + @apply border; + } + + h1 { + @apply text-4xl font-bold my-2; + } + + h2 { + @apply text-2xl font-bold my-3; + } + + h3 { + @apply text-lg font-bold my-4; + } + + h4 { + @apply text-base font-bold my-5; + } + + h5 { + @apply text-sm font-bold my-6; + } + + h6 { + @apply text-xs font-bold my-10; + } + + ul, + menu { + @apply list-disc my-1 pl-10; + } + + ol { + @apply list-decimal my-4 pl-10; + } + + ul, + ol { + ul { + list-style-type: circle; + } + + ul, + ol { + ul { + list-style-type: square; + } + } + } + + dd { + @apply pl-10; + } + + dl { + @apply my-4; + } + + ul, + ol, + dl { + ul, + ol, + dl { + margin: 0; + } + } + + b, + strong { + font-weight: bold; + } + + pre { + @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-700; + } + +} diff --git a/css/other.pcss b/css/other.pcss new file mode 100644 index 0000000..e60fbbb --- /dev/null +++ b/css/other.pcss @@ -0,0 +1,11 @@ +.nav { + height: 64px; +} + +.centered { + min-height: calc(100vh - 64px); +} + +.tag { + @apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle; +} diff --git a/css/package.json b/css/package.json index b19ac64..374f28f 100644 --- a/css/package.json +++ b/css/package.json @@ -2,14 +2,15 @@ "name": "css", "version": "1.0.0", "scripts": { - "css": "NODE_ENV=dev MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.css --output ../app/src/main/resources/static/styles.css", - "css-purge": "NODE_ENV=production MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.css --output ../app/src/main/resources/static/styles.css" + "css": "NODE_ENV=dev MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.pcss --output ../app/src/main/resources/static/styles.css", + "css-purge": "NODE_ENV=production MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.pcss --output ../app/src/main/resources/static/styles.css" }, "dependencies": { "autoprefixer": "^9.8.6", "cssnano": "^4.1.10", "postcss-cli": "^7.1.1", "postcss-hash": "^2.0.0", + "postcss-import": "^12.0.1", "postcss-nested": "^4.2.3", "tailwindcss": "^1.5.1" } diff --git a/css/pagination.pcss b/css/pagination.pcss new file mode 100644 index 0000000..d17cdcf --- /dev/null +++ b/css/pagination.pcss @@ -0,0 +1,31 @@ +nav.pages { + @apply flex pl-0 list-none rounded my-2 flex justify-center; + + :first-child { + @apply rounded-l; + } + + :last-child { + @apply rounded-r; + } + + :not(:last-child) { + @apply border-r-0; + } + + a { + @apply relative block py-2 px-3 leading-tight border bg-gray-800 border-gray-700 text-teal-300; + + &:hover { + @apply bg-gray-700; + } + + &:active { + @apply bg-teal-800 border-gray-700 text-white; + + &:hover { + @apply bg-gray-700; + } + } + } +} diff --git a/css/postcss.config.js b/css/postcss.config.js index af0c3a1..3ec10e3 100644 --- a/css/postcss.config.js +++ b/css/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: [ + require('postcss-import'), require('postcss-nested'), require('tailwindcss'), require('autoprefixer'), diff --git a/css/styles.css b/css/styles.css deleted file mode 100644 index 8b85c09..0000000 --- a/css/styles.css +++ /dev/null @@ -1,181 +0,0 @@ -@tailwind base; - -@tailwind components; - -.btn { - @apply font-semibold py-2 px-4 rounded; - - &:focus { - @apply outline-none shadow-outline; - } -} - -.btn-teal { - @apply bg-teal-500 text-white; - - &:focus { - @apply bg-teal-600; - } - - &:hover { - @apply bg-teal-600; - } -} - -.btn-green { - @apply bg-green-500 text-white; - - &:focus { - @apply bg-green-600; - } - - &:hover { - @apply bg-green-600; - } -} - -.btn-red { - @apply bg-red-500 text-white; - - &:focus { - @apply bg-red-600; - } - - &:hover { - @apply bg-red-600; - } -} - -.nav { - height: 64px; -} - -.centered { - min-height: calc(100vh - 64px); -} - -.tag { - @apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle; -} - -nav.pages { - @apply flex pl-0 list-none rounded my-2 flex justify-center; -} - -nav.pages :first-child { - @apply rounded-l; -} - -nav.pages :last-child { - @apply rounded-r; -} - -nav.pages :not(:last-child) { - @apply border-r-0; -} - -nav.pages a { - @apply relative block py-2 px-3 leading-tight border bg-gray-800 border-gray-700 text-teal-300; -} - -nav.pages a:hover { - @apply bg-gray-700; -} - -nav.pages a.active { - @apply bg-teal-800 border-gray-700 text-white; -} - -nav.pages a.active:hover { - @apply bg-gray-700; -} - -#note a { - @apply text-blue-700 underline; -} - -#note p { - @apply my-4; -} - -#note blockquote, -#note figure { - @apply my-4 mx-10; -} - -#note hr { - @apply border; } - -#note h1 { - @apply text-4xl font-bold my-2; } - -#note h2 { - @apply text-2xl font-bold my-3; } - -#note h3 { - @apply text-lg font-bold my-4; } - -#note h4 { - @apply text-base font-bold my-5; } - -#note h5 { - @apply text-sm font-bold my-6; } - -#note h6 { - @apply text-xs font-bold my-10; } - -#note ul, -#note menu { - @apply list-disc my-1 pl-10; } - -#note ol { - @apply list-decimal my-4 pl-10; } - -#note ul ul, -#note ol ul { - list-style-type: circle; } - -#note ul ul ul, -#note ul ol ul, -#note ol ul ul, -#note ol ol ul { - list-style-type: square; } - -#note dd { - @apply pl-10; } - -#note dl { - @apply my-4; } - -#note ul ul, -#note ul ol, -#note ul menu, -#note ul dl, -#note ol ul, -#note ol ol, -#note ol menu, -#note ol dl, -#note menu ul, -#note menu ol, -#note menu menu, -#note menu dl, -#note dl ul, -#note dl ol, -#note dl menu, -#note dl dl { - margin: 0; } - -#note legend { - @apply py-0 px-1; } - -#note fieldset { - @apply my-0 mx-1 pt-0 px-1 pb-2; } - -#note b, -#note strong { - font-weight: bold; } - -#note pre { - @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-700; } - -@tailwind utilities; diff --git a/css/styles.pcss b/css/styles.pcss new file mode 100644 index 0000000..35ccd7a --- /dev/null +++ b/css/styles.pcss @@ -0,0 +1,13 @@ +/*noinspection CssUnknownTarget*/ +@import "tailwindcss/base"; + +/*noinspection CssUnknownTarget*/ +@import "tailwindcss/components"; + +@import "./button.pcss"; +@import "./note.pcss"; +@import "./pagination.pcss"; +@import "./other.pcss"; + +/*noinspection CssUnknownTarget*/ +@import "tailwindcss/utilities"; diff --git a/css/yarn.lock b/css/yarn.lock index 9b1d807..1d062b2 100644 --- a/css/yarn.lock +++ b/css/yarn.lock @@ -1246,6 +1246,16 @@ postcss-hash@^2.0.0: mkdirp "^0.5.1" postcss "^7.0.2" +postcss-import@^12.0.1: + version "12.0.1" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153" + integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw== + dependencies: + postcss "^7.0.1" + postcss-value-parser "^3.2.3" + read-cache "^1.0.0" + resolve "^1.1.7" + postcss-js@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9" @@ -1489,7 +1499,7 @@ postcss-unique-selectors@^4.0.1: postcss "^7.0.0" uniqs "^2.0.0" -postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0: +postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0: version "3.3.1" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== @@ -1574,7 +1584,7 @@ resolve-from@^3.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" integrity sha1-six699nWiBvItuZTM17rywoYh0g= -resolve@^1.14.2: +resolve@^1.1.7, resolve@^1.14.2: version "1.17.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==