Skip to content

Commit

Permalink
Tailwind setup changed
Browse files Browse the repository at this point in the history
  • Loading branch information
yekta committed Sep 5, 2020
1 parent 05a863d commit bfe7754
Show file tree
Hide file tree
Showing 8 changed files with 1,122 additions and 263 deletions.
1,141 changes: 995 additions & 146 deletions package-lock.json

Large diffs are not rendered by default.

23 changes: 11 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@
"description": "Banano address visualisation",
"version": "0.0.1",
"scripts": {
"dev": "NODE_ENV=development sapper dev",
"build": "NODE_ENV=production sapper build --legacy",
"export": "NODE_ENV=production sapper export --legacy",
"start": "NODE_ENV=production node __sapper__/build",
"dev": "run-p sapper:dev watch:tailwind",
"build": "npm run build:tailwind && sapper build --legacy",
"export": "npm run build:tailwind && sapper export --legacy",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
"test": "run-p --race dev cy:run",
"watch:tailwind": "postcss src/css/tailwind.css -o static/global.css -w",
"build:tailwind": "NODE_ENV=production postcss src/css/tailwind.css -o static/global.css",
"sapper:dev": "sapper dev"
},
"dependencies": {
"axios": "^0.19.2",
Expand All @@ -24,24 +27,20 @@
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@fullhuman/postcss-purgecss": "^2.3.0",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^12.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-replace": "^2.2.0",
"add": "^2.0.6",
"cross-env": "^7.0.2",
"cssnano": "^4.1.10",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"postcss-cli": "^7.1.2",
"postcss-load-config": "^2.1.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-terser": "^7.0.0",
"sapper": "^0.27.0",
"svelte": "^3.0.0",
"svelte-preprocess": "^4.2.0",
"tailwindcss": "^1.7.6",
"yarn": "^1.22.4"
"tailwindcss": "^1.7.6"
}
}
16 changes: 8 additions & 8 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
const purgecss = require("@fullhuman/postcss-purgecss")({
content: ["./src/**/*.html", "./src/**/*.svelte"],

whitelistPatterns: [/svelte-/],

defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});
const tailwindcss = require("tailwindcss");

const production = process.env.NODE_ENV === "production";

module.exports = {
plugins: [require("tailwindcss"), ...(production ? [purgecss] : [])],
plugins: [
tailwindcss("./tailwind.config.js"),
production &&
require("cssnano")({
preset: "default",
}),
],
};
5 changes: 0 additions & 5 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import svelte from "rollup-plugin-svelte";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import config from "sapper/config/rollup.js";
import sveltePreprocess from "svelte-preprocess";

import pkg from "./package.json";

Expand All @@ -17,8 +16,6 @@ const onwarn = (warning, onwarn) =>
(warning.code === "CIRCULAR_DEPENDENCY" && /[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning);

const preprocess = sveltePreprocess({ postcss: true });

export default {
client: {
input: config.client.input(),
Expand All @@ -29,7 +26,6 @@ export default {
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
preprocess,
dev,
hydratable: true,
emitCss: true,
Expand Down Expand Up @@ -83,7 +79,6 @@ export default {
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
preprocess,
generate: "ssr",
dev,
}),
Expand Down
6 changes: 5 additions & 1 deletion src/components/Footer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,11 @@
<p>made by</p>
<a class="logo-button p-1 ml-1" rel="noopener" target="_blank" href="https://appditto.com">
<div class="w-28 h-auto">
<img class="w-full h-auto" src="images/logos/logo-appditto-horizontal.svg" alt="Appditto" />
<img
class="w-full h-auto"
src="images/logos/logo-appditto-horizontal.svg"
alt="Appditto"
/>
</div>
</a>
</div>
Expand Down
97 changes: 97 additions & 0 deletions src/css/tailwind.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
@tailwind base;
@tailwind components;

@font-face {
font-family: "Now Alt";
src: url("fonts/now-alt-bold.woff2") format("woff2"),
url("fonts/now-alt-bold.woff") format("woff"), url("fonts/now-alt-bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: fallback;
}

@font-face {
font-family: "Now Alt";
src: url("fonts/now-alt-medium.woff2") format("woff2"),
url("fonts/now-alt-medium.woff") format("woff"),
url("fonts/now-alt-medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: fallback;
}

@font-face {
font-family: "Now Alt";
src: url("fonts/now-alt-regular.woff2") format("woff2"),
url("fonts/now-alt-regular.woff") format("woff"),
url("fonts/now-alt-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: fallback;
}

body {
font-family: "Now Alt", sans-serif;
}

.y-container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}

.btn-primary {
transition: all 0.2s ease-out;
box-shadow: 0rem 0.3rem 0rem 0rem black;
transform: translateY(0rem);
outline: none !important;
}

.btn-primary:hover {
box-shadow: 0rem 0.5rem 0rem 0rem black;
transform: translateY(-0.2rem);
}

.btn-primary:focus {
filter: brightness(1.6);
}

.btn-danger {
transition: all 0.2s ease-out;
box-shadow: 0rem 0.3rem 0rem 0rem #97000e;
transform: translateY(0rem);
outline: none !important;
}

.btn-danger:focus {
filter: brightness(1.3);
}

.btn-danger:hover {
box-shadow: 0rem 0.5rem 0rem 0rem #97000e;
transform: translateY(-0.2rem);
}

.logo-button {
transform: scale(1);
transition: all 0.2s ease-out;
border-radius: 0.2rem;
}

.logo-button:hover {
transform: scale(1.08);
transition: all 0.2s ease-out;
}

.logo-button:focus {
background-color: rgba(0, 0, 0, 0.15);
}

input:focus,
a:focus,
button:focus {
outline: none !important;
}

@tailwind utilities;
92 changes: 1 addition & 91 deletions static/global.css

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
enabled: process.env.NODE_ENV === "production",
content: ["./src/**/*.html", "./src/**/*.svelte"],
},
theme: {
extend: {
Expand Down

0 comments on commit bfe7754

Please sign in to comment.