diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..222861c --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": false +} diff --git a/package.json b/package.json index 413390d..a62da95 100644 --- a/package.json +++ b/package.json @@ -1,47 +1,47 @@ { - "name": "Zaahir-dot-ca", - "description": "Personal website of Zaahir Moolla", - "license": "MIT", - "version": "0.0.1", - "scripts": { - "start-node": "node __sapper__/build", - "start": "sapper dev", - "dev": "sapper dev --port $PORT", - "build": "sapper export" - }, - "browserslist": [ - "last 3 version" - ], - "dependencies": { - "compression": "^1.7.1", - "polka": "^0.5.0", - "sirv": "^0.4.0" - }, - "devDependencies": { - "@babel/core": "^7.7.7", - "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.8.3", - "@babel/preset-env": "^7.8.3", - "@babel/runtime": "^7.8.3", - "@fullhuman/postcss-purgecss": "^1.2.0", - "autoprefixer": "^9.7.3", - "cssnano": "^4.1.10", - "hover.css": "^2.3.2", - "postcss": "^7.0.26", - "postcss-import": "^12.0.1", - "postcss-url": "^8.0.0", - "purgecss-from-svelte": "^2.0.2", - "rollup": "^1.29.0", - "rollup-plugin-babel": "^4.0.2", - "rollup-plugin-commonjs": "^10.0.0", - "rollup-plugin-node-resolve": "^5.2.0", - "rollup-plugin-postcss": "^2.0.3", - "rollup-plugin-replace": "^2.0.0", - "rollup-plugin-svelte": "^5.0.1", - "rollup-plugin-terser": "^5.2.0", - "sapper": "^0.27.0", - "svelte": "^3.17.1", - "svelte-preprocess": "^3.3.0", - "tailwindcss": "^1.1.4" - } + "name": "zaahir-dot-ca", + "description": "Personal website of Zaahir Moolla", + "license": "MIT", + "version": "1.0.0", + "scripts": { + "start-node": "node __sapper__/build", + "start": "sapper dev", + "dev": "sapper dev --port $PORT", + "build": "sapper export" + }, + "browserslist": [ + "last 3 version" + ], + "dependencies": { + "compression": "^1.7.1", + "polka": "^0.5.0", + "sirv": "^0.4.0" + }, + "devDependencies": { + "@babel/core": "^7.7.7", + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.8.3", + "@babel/preset-env": "^7.8.3", + "@babel/runtime": "^7.8.3", + "@fullhuman/postcss-purgecss": "^1.2.0", + "@tailwindcss/ui": "^0.1.3", + "autoprefixer": "^9.7.3", + "cssnano": "^4.1.10", + "hover.css": "^2.3.2", + "postcss": "^7.0.26", + "postcss-import": "^12.0.1", + "postcss-url": "^8.0.0", + "rollup": "^1.29.0", + "rollup-plugin-babel": "^4.0.2", + "rollup-plugin-commonjs": "^10.0.0", + "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-postcss": "^2.0.3", + "rollup-plugin-replace": "^2.0.0", + "rollup-plugin-svelte": "^5.0.1", + "rollup-plugin-terser": "^5.2.0", + "sapper": "^0.27.0", + "svelte": "^3.17.1", + "svelte-preprocess": "^3.3.0", + "tailwindcss": "^1.2.0" + } } diff --git a/rollup.config.js b/rollup.config.js index 04d20df..2fd540e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -8,148 +8,158 @@ import config from "sapper/config/rollup.js"; import pkg from "./package.json"; import getPreprocessor from "svelte-preprocess"; import postcss from "rollup-plugin-postcss"; -import PurgeSvelte from "purgecss-from-svelte"; import path from "path"; const mode = process.env.NODE_ENV; const dev = mode === "development"; const legacy = !!process.env.SAPPER_LEGACY_BUILD; const onwarn = (warning, onwarn) => - (warning.code === "CIRCULAR_DEPENDENCY" && - /[/\\]@sapper[/\\]/.test(warning.message)) || - onwarn(warning); -const dedupe = importee => - importee === "svelte" || importee.startsWith("svelte/"); + (warning.code === "CIRCULAR_DEPENDENCY" && + /[/\\]@sapper[/\\]/.test(warning.message)) || + onwarn(warning); +const dedupe = (importee) => + importee === "svelte" || importee.startsWith("svelte/"); const postcssPlugins = (purgecss = false) => { - return [ - require("postcss-import")(), - require("postcss-url")(), - require("postcss-nested"), - require("tailwindcss")("./tailwind.config.js"), - require("autoprefixer")(), - // Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools. - purgecss && - require("@fullhuman/postcss-purgecss")({ - content: ["./**/*.svelte", "./src/template.html"], - extractors: [ - { - extractor: PurgeSvelte, + return [ + require("postcss-import")(), + require("postcss-url")(), + require("postcss-nested"), + require("tailwindcss")("./tailwind.config.js"), + require("autoprefixer")(), + // Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools. + purgecss && + require("@fullhuman/postcss-purgecss")({ + content: ["./**/*.svelte", "./src/template.html"], + defaultExtractor: (content) => { + const regExp = new RegExp(/[\w-/.:]+(? 0.25%, not dead" - } - ] - ], - plugins: [ - "@babel/plugin-syntax-dynamic-import", - [ - "@babel/plugin-transform-runtime", - { - useESModules: true - } - ] - ] - }), + legacy && + babel({ + extensions: [".js", ".mjs", ".html", ".svelte"], + runtimeHelpers: true, + exclude: ["node_modules/@babel/**"], + presets: [ + [ + "@babel/preset-env", + { + targets: "> 0.25%, not dead", + }, + ], + ], + plugins: [ + "@babel/plugin-syntax-dynamic-import", + [ + "@babel/plugin-transform-runtime", + { + useESModules: true, + }, + ], + ], + }), - !dev && - terser({ - module: true - }) - ], - onwarn - }, + !dev && + terser({ + module: true, + }), + ], + onwarn, + }, - server: { - input: config.server.input(), - output: config.server.output(), - plugins: [ - replace({ - "process.browser": false, - "process.env.NODE_ENV": JSON.stringify(mode) - }), - svelte({ - generate: "ssr", - dev, - preprocess - }), - resolve({ - dedupe - }), - commonjs(), - postcss({ - plugins: postcssPlugins(!dev), - extract: path.resolve(__dirname, "./static/global.css") - }) - ], - external: Object.keys(pkg.dependencies).concat( - require("module").builtinModules || - Object.keys(process.binding("natives")) - ), - onwarn - } + server: { + input: config.server.input(), + output: config.server.output(), + plugins: [ + replace({ + "process.browser": false, + "process.env.NODE_ENV": JSON.stringify(mode), + }), + svelte({ + generate: "ssr", + dev, + preprocess, + }), + resolve({ + dedupe, + }), + commonjs(), + postcss({ + plugins: postcssPlugins(!dev), + extract: path.resolve(__dirname, "./static/global.css"), + }), + ], + external: Object.keys(pkg.dependencies).concat( + require("module").builtinModules || + Object.keys(process.binding("natives")) + ), + onwarn, + }, - // serviceworker: { - // input: config.serviceworker.input(), - // output: config.serviceworker.output(), - // plugins: [ - // resolve(), - // replace({ - // "process.browser": true, - // "process.env.NODE_ENV": JSON.stringify(mode) - // }), - // commonjs(), - // !dev && terser() - // ], - // onwarn - // } + serviceworker: { + input: config.serviceworker.input(), + output: config.serviceworker.output(), + plugins: [ + resolve(), + replace({ + "process.browser": true, + "process.env.NODE_ENV": JSON.stringify(mode), + }), + commonjs(), + !dev && terser(), + ], + onwarn, + }, }; diff --git a/src/base.css b/src/base.css index 67ed9d6..4442723 100644 --- a/src/base.css +++ b/src/base.css @@ -1,34 +1,33 @@ -/* FONTS */ -@import "../static/fonts/source-sans-pro/source-sans-pro.css"; -@import "../static/fonts/source-serif-pro/source-serif-pro.css"; - /* BASE STYLES */ html { - @apply antialiased text-center text-base text-gray-500; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + @apply antialiased text-center text-base text-gray-500; } /* For About, Contact */ section { - @apply px-4; + @apply px-4 py-12; - h1 { - @apply m-auto text-5xl text-gray-800 font-bold uppercase; - } + h1 { + @apply m-auto text-3xl text-gray-800 font-bold uppercase; - .spacer { - width: 100px; - height: 2px; - @apply block mx-auto bg-orange-500 my-6 border-none; + @screen md { + @apply text-5xl; } + } - p { - @apply text-gray-700; + .spacer { + width: 100px; + height: 2px; + @apply block mx-auto bg-orange-500 my-6 border-none; + } + + p { + @apply text-gray-700; - a { - @apply text-orange-500; - } + a { + @apply text-orange-500; } + } img { @apply inline-block; diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 9730794..7cafb1e 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -1,16 +1,27 @@ diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index c804ab1..0af4fbd 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -1,5 +1,28 @@ -