diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0c17d4e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +root = true + +[*] +quote_type = single +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = tab +indent_size = 1 + +[*.yml] +indent_style = space +indent_size = 2 diff --git a/README.md b/README.md index e168a85..7b7f936 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # [![GoPablo](https://raw.githubusercontent.com/luangjokaj/gopablo/master/src/assets/img/logo.svg?sanitize=true)](https://www.gopablo.co/) -![Version](https://img.shields.io/github/package-json/v/luangjokaj/gopablo) [![Dependencies](https://david-dm.org/luangjokaj/gopablo/status.svg)](https://david-dm.org/luangjokaj/gopablo) +[![Version](https://img.shields.io/github/package-json/v/luangjokaj/gopablo)](https://www.gopablo.co/) [![Dependencies](https://img.shields.io/david/luangjokaj/gopablo)](https://www.gopablo.co/) [GoPablo](https://www.gopablo.co/) a static site generator. - [Introduction](#introduction) - [Features](#features) -- [1. Installing Node](#1-installing-node) +- [1. Installing Node.js](#1-installing-nodejs) - [2. Set Up Project](#2-set-up-project) - [Install GoPablo from NPM](#install-gopablo-from-npm) - [Install GoPablo from Repository](#install-gopablo-from-repository) @@ -54,7 +54,7 @@ Ready to deploy πŸš€ ## Introduction | Information | Discord | Donate | |:------------|:---------|:-------| -| [GoPablo](https://www.gopablo.co) is a static site generator with a modern development workflow, integrated web server, auto-reload, CSS preprocessors, and ES6 ready.| [![Discord server](https://svgshare.com/i/Lqc.svg)](https://discord.gg/qE7e93) | [![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/guidelines/logo-mark-1.svg)](https://www.buymeacoffee.com/luangjokaj) | +| [GoPablo](https://www.gopablo.co) is a static site generator with a modern development workflow, integrated web server, auto-reload, CSS preprocessors, and ES6 ready.| [![Discord server](https://svgshare.com/i/Lqc.svg)](https://discord.gg/uQFdMddMZw) | [![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/guidelines/logo-mark-1.svg)](https://www.buymeacoffee.com/luangjokaj) | ## Features |πŸ‘‡|Includes| @@ -67,11 +67,12 @@ Ready to deploy πŸš€ |🌈| Image Compression| |πŸ•Έ| Templating & Partial HTML Injection| |🎨| PostCSS & Next Generation CSS| +|πŸ’¨| Tailwind CSS| |βœ‚οΈ| Cache-Busting| |πŸ›Ž| Distribution Files| -# 1. Installing Node -GoPablo requires Node v7.5+. This is the only global dependency. You can download Node **[here](https://nodejs.org/)**. +# 1. Installing Node.js +GoPablo requires **Node.js v12+**. This is the only global dependency. You can download Node.js **[here](https://nodejs.org/)**. Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world. @@ -95,30 +96,26 @@ Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.j └── gulpfile.js # Gulp configuration └── LICENSE # License agreements └── package-lock.json # Packages lock file - └── package.json # Node packages + └── package.json # Node.js packages └── README.md # You are reading this └── server.js # Express server ``` ## Install GoPablo from NPM -To install GoPablo from NPM, run the command: -``` -sudo npm i gopablo -g +To install GoPablo create a directory for the new website and from there run the command to generate the file structure: ``` +npx gopablo -**START GOPABLO** - -- Create a directory for the new website and from there run GoPablo to generate the file structure: -``` -gopablo ``` +That's it 🍾 easy as that. Now start the development workflow: [Start Workflow](#start-workflow) ## Install GoPablo from Repository To install GoPablo you need to clone the repository from GitHub: ``` git clone https://github.com/luangjokaj/gopablo ``` -- This will clone the repository on your local machine. Navigate to the newly created folder. + +- This will clone the repository on your local machine. Navigate to the newly created directory. - Replace the file: `./package.json` with `./installer/package.json` and continue with the dependency installation. @@ -128,12 +125,20 @@ git clone https://github.com/luangjokaj/gopablo npm install ``` -**START WORKFLOW** +## Start Workflow -- We are ready to start our development server with the command: +- To start the development server run the command: ``` npm run dev ``` +- You are ready to go! Happy coding! πŸ€“ + +## Generate production files +To generate your distribution files run the command: +``` +npm run prod +``` +The files will be generated in the `dist/` directory. ## Templating and HTML Partials To avoid repetitive HTML code, GoPablo uses [gulp-file-include](https://github.com/haoxins/gulp-file-include). It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory: @@ -145,13 +150,6 @@ For more information check out their documentation and examples: https://github. ## New pages To create new pages, simply create new .html files in the `src/` directory. -## Generate production files -To generate your distribution files run the command: -``` -npm run prod -``` -The files will be generated in the `dist/` directory. - # 3. CSS, PostCSS and Sass ## PostCSS By default GoPablo supports [PostCSS](http://postcss.org/), a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. [postcss-preset-env](https://preset-env.cssdb.org//) is installed by default. Read more about PostCSS [here](https://ashleynolan.co.uk/blog/postcss-a-review). @@ -206,6 +204,10 @@ The starting point for CSS is the file: src/assets/css/styles.css ``` +**TAILWIND CSS** + +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup. Tailwind comes pre-installed with GoPablo. + ## Sass GoPablo is super flexible. You can install Sass and use it as the main CSS preprocessor: ``` @@ -222,7 +224,7 @@ Change the gulp tasks stylesDev to: function stylesDev() { return src('./src/assets/css/styles.scss') .pipe(sourcemaps.init()) - .pipe(sass({includePaths: 'node_modules'}).on("error", sass.logError)) + .pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError)) .pipe(sourcemaps.write('.')) .pipe(dest('./build/assets/css')) .pipe(browserSync.stream({ match: '**/*.css' })); @@ -238,7 +240,7 @@ Change the gulp tasks styleProd to: ```javascript function stylesProd() { return src('./src/assets/css/styles.scss') - .pipe(sass({includePaths: 'node_modules'}).on("error", sass.logError)) + .pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError)) .pipe(dest('./dist/assets/css')) } ``` @@ -350,6 +352,12 @@ We are live 🌍 |:-:|:---| # Changelog + +**v0.1.4** +- πŸ“¦ NEW: Add support for Tailwind CSS. +- πŸ“– DOC: Improve documentation. +- πŸ‘Œ IMPROVE: Code style and cleanup. + **v0.1.3** - πŸ› FIX: Do not rename html files `dontUpdateReference` while caching busting. - πŸ“– DOC: Improve documentation. diff --git a/gulpfile.js b/gulpfile.js index f0cf3c2..47ea401 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,6 +20,7 @@ const postcss = require('gulp-postcss'); const postcssImport = require('postcss-import'); const postCSSMixins = require('postcss-mixins'); const postcssPresetEnv = require('postcss-preset-env'); +const tailwindcss = require('tailwindcss'); const RevAll = require('gulp-rev-all'); const sourcemaps = require('gulp-sourcemaps'); const uglify = require('gulp-uglify'); @@ -40,6 +41,7 @@ const pluginsDev = [ 'custom-media': true, }, }), + tailwindcss, ]; const pluginsProd = [ postcssImport, @@ -52,6 +54,7 @@ const pluginsProd = [ 'custom-media': true, }, }), + tailwindcss, require('cssnano')({ preset: [ 'default', @@ -67,11 +70,7 @@ const pluginsProd = [ Header & Footer JavaScript Boundles -------------------------------------------------------------------------------------------------- */ const headerJS = ['./node_modules/aos/dist/aos.js']; -const footerJS = [ - './node_modules/webfontloader/webfontloader.js', - './node_modules/jquery/dist/jquery.js', - './src/assets/js/**', -]; +const footerJS = ['./node_modules/jquery/dist/jquery.js', './src/assets/js/**']; //-------------------------------------------------------------------------------------------------- /* ------------------------------------------------------------------------------------------------- @@ -132,7 +131,7 @@ function footerScriptsDev() { .pipe( babel({ presets: ['@babel/preset-env'], - }), + }) ) .pipe(concat('footer-bundle.js')) .pipe(sourcemaps.write('.')) @@ -148,7 +147,7 @@ function staticFilesDev() { prefix: '@@', basepath: '@file', }, - }), + }) ) .pipe(dest('./build')); } @@ -160,7 +159,7 @@ exports.dev = series( headerScriptsDev, footerScriptsDev, staticFilesDev, - devServer, + devServer ); /* ------------------------------------------------------------------------------------------------- @@ -188,7 +187,7 @@ function footerScriptsProd() { .pipe( babel({ presets: ['@babel/preset-env'], - }), + }) ) .pipe(concat('footer-bundle.js')) .pipe(uglify()) @@ -204,13 +203,13 @@ function staticFilesProd() { prefix: '@@', basepath: '@file', }, - }), + }) ) .pipe( htmlmin({ collapseWhitespace: true, ignoreCustomFragments: [/<%[\s\S]*?%>/, /<\?[=|php]?[\s\S]*?\?>/], - }), + }) ) .pipe(dest('./dist')); } @@ -225,7 +224,7 @@ function processImages() { .pipe( imagemin([imagemin.svgo({ plugins: [{ removeViewBox: true }] })], { verbose: true, - }), + }) ) .pipe(dest('./dist/assets/img')); } @@ -234,7 +233,20 @@ function stylesProd() { return src('./src/assets/css/styles.css') .pipe(plumber({ errorHandler: onError })) .pipe(postcss(pluginsProd)) - .pipe(purgecss({ content: ['./src/**/*.html'], whitelist: ['aos-animate'] })) + .pipe( + purgecss({ + content: ['./src/**/*.html'], + whitelist: ['aos-animate'], + extractors: [ + { + extractor: (content) => { + return content.match(/[A-z0-9-:\/]+/g) || []; + }, + extensions: ['css', 'html'], + }, + ], + }) + ) .pipe(dest('./dist/assets/css')); } @@ -248,7 +260,7 @@ function bustCaches() { RevAll.revision({ dontRenameFile: [/^\/favicon.ico$/g, '.html'], dontUpdateReference: [/^\/favicon.ico$/g, '.html'], - }), + }) ) .pipe(dest('./dist')) .on('end', () => { @@ -268,13 +280,13 @@ exports.prod = series( processImages, stylesProd, copyEtcProd, - bustCaches, + bustCaches ); /* ------------------------------------------------------------------------------------------------- Utility Tasks -------------------------------------------------------------------------------------------------- */ -const onError = err => { +const onError = (err) => { gutil.beep(); gutil.log(staticBuild + ' - ' + errorMsg + ' ' + err.toString()); this.emit('end'); @@ -284,7 +296,8 @@ const onError = err => { Messages -------------------------------------------------------------------------------------------------- */ const errorMsg = '\x1b[41mError\x1b[0m'; -const filesGenerated = 'Your production file are generated in: \x1b[1m' + __dirname + '/dist/ βœ…'; +const filesGenerated = + 'Your production file are generated in: \x1b[1m' + __dirname + '/dist/ βœ…'; const staticBuild = '\x1b[42m\x1b[1m🐺 GoPablo\x1b[0m'; const staticBuildUrl = '\x1b[2m - https://www.gopablo.co/\x1b[0m'; diff --git a/installer/modules/run.js b/installer/modules/run.js index 04161e1..861e759 100755 --- a/installer/modules/run.js +++ b/installer/modules/run.js @@ -13,52 +13,55 @@ const download = require('download'); const handleError = require('./handleError.js'); const clearConsole = require('./clearConsole.js'); const printNextSteps = require('./printNextSteps.js'); +const version = require('../package.json').version; module.exports = () => { // Init. clearConsole(); + let upstreamUrl = `https://raw.githubusercontent.com/luangjokaj/gopablo/v${version}`; + // Files. const filesToDownload = [ - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/.babelrc', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/.gitignore', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/.stylelintrc', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/LICENSE', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/README.md', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/gulpfile.js', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/installer/package.json', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/server.js', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/index.html', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/etc/manifest.json', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/includes/content.html', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/includes/footer.html', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/includes/header.html', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/includes/helmet.html', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/css/globals.css', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/css/gopablo.css', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/css/mixins.css', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/css/styles.css', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/css/variables.css', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/img/favicon.ico', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/img/icon-192.png', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/img/icon-512.png', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/img/logo.svg', - - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/js/main.js', - 'https://raw.githubusercontent.com/luangjokaj/gopablo/v0.1.3-17/src/assets/js/onclick.js', + `${upstreamUrl}/.babelrc`, + `${upstreamUrl}/.gitignore`, + `${upstreamUrl}/.stylelintrc`, + `${upstreamUrl}/.editorconfig`, + `${upstreamUrl}/LICENSE`, + `${upstreamUrl}/README.md`, + `${upstreamUrl}/gulpfile.js`, + `${upstreamUrl}/tailwind.config.js`, + `${upstreamUrl}/installer/package.json`, + `${upstreamUrl}/server.js`, + + `${upstreamUrl}/src/index.html`, + + `${upstreamUrl}/src/etc/manifest.json`, + + `${upstreamUrl}/src/includes/content.html`, + `${upstreamUrl}/src/includes/footer.html`, + `${upstreamUrl}/src/includes/header.html`, + `${upstreamUrl}/src/includes/helmet.html`, + + `${upstreamUrl}/src/assets/css/gopablo.css`, + `${upstreamUrl}/src/assets/css/styles.css`, + `${upstreamUrl}/src/assets/css/variables.css`, + + `${upstreamUrl}/src/assets/img/favicon.ico`, + `${upstreamUrl}/src/assets/img/icon-192.png`, + `${upstreamUrl}/src/assets/img/icon-512.png`, + `${upstreamUrl}/src/assets/img/logo.svg`, + + `${upstreamUrl}/src/assets/js/main.js`, + `${upstreamUrl}/src/assets/js/onclick.js`, ]; // Organise file structure - const dotFiles = ['.babelrc', '.gitignore', '.stylelintrc']; + const dotFiles = ['.babelrc', '.gitignore', '.stylelintrc', '.editorconfig',]; const srcFiles = ['index.html']; const etcFiles = ['manifest.json']; const includesFiles = ['content.html', 'footer.html', 'header.html', 'helmet.html']; - const cssFiles = ['globals.css', 'gopablo.css', 'mixins.css', 'styles.css', 'variables.css']; + const cssFiles = ['gopablo.css', 'styles.css', 'variables.css']; const imgFiles = ['favicon.ico', 'icon-192.png', 'icon-512.png', 'logo.svg']; const jsFiles = ['main.js', 'onclick.js']; diff --git a/installer/package.json b/installer/package.json index 21a3d8a..870adc0 100644 --- a/installer/package.json +++ b/installer/package.json @@ -1,6 +1,6 @@ { "name": "gopablo", - "version": "0.1.3-17", + "version": "0.1.3-18", "description": "Static site generator.", "keywords": [ "babel", @@ -36,15 +36,14 @@ "author": "Luan Gjokaj ", "license": "MIT", "dependencies": { - "@babel/core": "^7.12.3", - "@babel/preset-env": "^7.12.1", + "@babel/core": "^7.12.9", + "@babel/preset-env": "^7.12.7", "aos": "^2.3.4", "browser-sync": "^2.26.13", - "cherry-grid": "0.1.30", "connect-modrewrite": "^0.10.2", "cssnano": "^4.1.10", "del": "^6.0.0", - "eslint": "^7.13.0", + "eslint": "^7.15.0", "express": "^4.17.1", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", @@ -60,13 +59,12 @@ "gulp-uglify": "^3.0.2", "gulp-util": "^3.0.8", "jquery": "^3.5.1", - "normalize.css": "^8.0.1", - "postcss": "^8.1.7", - "postcss-flexbugs-fixes": "^5.0.1", + "postcss": "^8.2.0", + "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^13.0.0", "postcss-mixins": "^7.0.1", "postcss-preset-env": "^6.7.0", - "stylelint": "^13.7.2", - "webfontloader": "^1.6.28" + "stylelint": "^13.8.0", + "tailwindcss": "^2.0.1" } } diff --git a/package-lock.json b/package-lock.json index 62bef84..af8769c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "gopablo", - "version": "0.1.3-17", + "version": "0.1.3-18", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -125,11 +125,6 @@ "supports-color": "^7.1.0" } }, - "cherry-grid": { - "version": "0.1.30", - "resolved": "https://registry.npmjs.org/cherry-grid/-/cherry-grid-0.1.30.tgz", - "integrity": "sha512-7TNaIAi8IiXPQmpLhG7KPa7JJfinM+FnU8M8a/KvbFphpURkZcHVSjxxc/iccGoKhxgB0X9OFCofDm/XNZUkiQ==" - }, "cli-cursor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", @@ -377,28 +372,25 @@ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "execa": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz", - "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz", + "integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==", "requires": { - "cross-spawn": "^7.0.0", - "get-stream": "^5.0.0", - "human-signals": "^1.1.1", + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", - "npm-run-path": "^4.0.0", - "onetime": "^5.1.0", - "signal-exit": "^3.0.2", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" }, "dependencies": { "get-stream": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", - "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", - "requires": { - "pump": "^3.0.0" - } + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz", + "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==" }, "is-stream": { "version": "2.0.0", @@ -544,9 +536,9 @@ "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==" }, "human-signals": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", - "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", + "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, "ieee754": { "version": "1.1.13", diff --git a/package.json b/package.json index 5518f01..dcf025c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gopablo", - "version": "0.1.3-17", + "version": "0.1.3-18", "description": "Static site generator.", "keywords": [ "babel", @@ -37,10 +37,9 @@ "license": "MIT", "dependencies": { "chalk": "^4.1.0", - "cherry-grid": "^0.1.30", "commander": "^6.2.0", "download": "^8.0.0", - "execa": "^4.1.0", + "execa": "^5.0.0", "ora": "^5.1.0", "prompts": "^2.4.0" } diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css deleted file mode 100644 index a662e7e..0000000 --- a/src/assets/css/globals.css +++ /dev/null @@ -1,136 +0,0 @@ -@import './variables.css'; - -html, -body { - margin: 0; - padding: 0; - min-height: 100%; -} - -body { - font-size-adjust: none; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: none; - -webkit-font-smoothing: antialiased; - font-family: var(--font-text); - font-size: var(--size-text-mobile); - line-height: var(--lineheight-text-mobile); - padding-top: var(--padding-top-body-mobile); - color: var(--color-dark); - box-sizing: border-box; - - @media (--screen-lg) { - font-size: var(--size-text-desktop); - line-height: var(--lineheight-text-desktop); - padding-top: var(--padding-top-body-desktop); - } -} - -* { - box-sizing: border-box; - - &:before, - &:after { - box-sizing: border-box; - } - - &::selection { - background: var(--color-dark); - color: var(--color-light); - } -} - -a, -button { - cursor: pointer; - outline: none; - text-decoration: none; - transition: all 0.3s ease; -} - -a { - color: var(--color-primary); - - @media (hover: hover) { - &:hover { - color: var(--color-secondary); - } - } -} - -figure { - margin: 0; -} - -hr { - border: none; - border-bottom: solid 1px var(--color-gray-light); -} - -fieldset { - appearance: none; - border: none; -} - -img, -svg { - transition: all 0.3s ease; - - & * { - transition: all 0.3s ease; - } -} - -img { - display: inline-block; - max-width: 100%; - width: auto; - height: auto; -} - -strong, -b { - font-weight: 700; - color: var(--color-primary); -} - -small { - @mixin small; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - @mixin heading; -} - -h1 { - @mixin h1; -} - -h2 { - @mixin h2; -} - -h3 { - @mixin h3; -} - -h4 { - @mixin h4; -} - -h5 { - @mixin h5; -} - -h6 { - @mixin h6; -} - -p { - @mixin text; -} diff --git a/src/assets/css/gopablo.css b/src/assets/css/gopablo.css index e512da7..3dfa2cf 100644 --- a/src/assets/css/gopablo.css +++ b/src/assets/css/gopablo.css @@ -1,3 +1,5 @@ +@import './variables'; + body { text-align: center; } @@ -5,3 +7,12 @@ body { .header { padding-top: 20px; } + +.header, +.container { + @apply text-center m-auto; + + & img { + @apply inline-flex mb-5; + } +} diff --git a/src/assets/css/mixins.css b/src/assets/css/mixins.css deleted file mode 100644 index d0170f9..0000000 --- a/src/assets/css/mixins.css +++ /dev/null @@ -1,620 +0,0 @@ -@define-mixin resetButton { - appearance: none; - background: none; - border: none; - border-radius: 0; - cursor: pointer; -} - -@define-mixin noList { - list-style: none; - margin: 0; - padding: 0; - - & li { - padding: 0; - margin: 0; - } -} - -@define-mixin heading { - font-family: var(--font-head); - font-weight: 700; - margin: 0; - padding: 0; -} - -@define-mixin hero1 { - font-size: var(--size-hero1-mobile); - line-height: var(--lineheight-hero1-mobile); - - @media (--screen-lg) { - font-size: var(--size-hero1-desktop); - line-height: var(--lineheight-hero1-desktop); - } -} - -@define-mixin hero2 { - font-size: var(--size-hero2-mobile); - line-height: var(--lineheight-hero2-mobile); - - @media (--screen-lg) { - font-size: var(--size-hero2-desktop); - line-height: var(--lineheight-hero2-desktop); - } -} - -@define-mixin hero3 { - font-size: var(--size-hero3-mobile); - line-height: var(--lineheight-hero3-mobile); - - @media (--screen-lg) { - font-size: var(--size-hero3-desktop); - line-height: var(--lineheight-hero3-desktop); - } -} - -@define-mixin eyebrow { - position: relative; - font-size: var(--size-eyebrow-mobile); - line-height: var(--lineheight-eyebrow-mobile); - margin: 10px 0; - - &:before { - content: ''; - display: block; - width: 60px; - border-top: solid 2px var(--color-primary); - margin-bottom: 20px; - } - - @media (--screen-lg) { - font-size: var(--size-eyebrow-desktop); - line-height: var(--size-eyebrow-desktop); - } -} - -@define-mixin h1 { - font-size: var(--size-h1-mobile); - line-height: var(--lineheight-h1-mobile); - - @media (--screen-lg) { - font-size: var(--size-h1-desktop); - line-height: var(--lineheight-h1-desktop); - } -} - -@define-mixin h2 { - font-size: var(--size-h2-mobile); - line-height: var(--lineheight-h2-mobile); - - @media (--screen-lg) { - font-size: var(--size-h2-desktop); - line-height: var(--lineheight-h2-desktop); - } -} - -@define-mixin h3 { - font-size: var(--size-h3-mobile); - line-height: var(--lineheight-h3-mobile); - - @media (--screen-lg) { - font-size: var(--size-h3-desktop); - line-height: var(--lineheight-h3-desktop); - } -} - -@define-mixin h4 { - font-size: var(--size-h4-mobile); - line-height: var(--lineheight-h4-mobile); - - @media (--screen-lg) { - font-size: var(--size-h4-desktop); - line-height: var(--lineheight-h4-desktop); - } -} - -@define-mixin h5 { - font-size: var(--size-h5-mobile); - line-height: var(--lineheight-h5-mobile); - - @media (--screen-lg) { - font-size: var(--size-h5-desktop); - line-height: var(--lineheight-h5-desktop); - } -} - -@define-mixin h6 { - font-size: var(--size-h6-mobile); - line-height: var(--lineheight-h6-mobile); - - @media (--screen-lg) { - font-size: var(--size-h6-desktop); - line-height: var(--lineheight-h6-desktop); - } -} - -@define-mixin subtitle { - font-size: var(--size-subtitle-mobile); - line-height: var(--lineheight-subtitle-mobile); - - @media (--screen-lg) { - font-size: var(--size-subtitle-desktop); - line-height: var(--lineheight-subtitle-desktop); - } -} - -@define-mixin lead { - font-size: var(--size-lead-mobile); - line-height: var(--lineheight-lead-mobile); - - @media (--screen-lg) { - font-size: var(--size-lead-desktop); - line-height: var(--lineheight-lead-desktop); - } -} - -@define-mixin strong { - font-weight: 700; -} - -@define-mixin text { - color: var(--color-gray-medium); - font-size: var(--size-text-mobile); - line-height: var(--lineheight-text-mobile); - - @media (--screen-lg) { - font-size: var(--size-text-desktop); - line-height: var(--lineheight-text-desktop); - } -} - -@define-mixin small { - display: inline-block; - font-size: var(--size-small-mobile); - line-height: var(--lineheight-small-mobile); - - @media (--screen-lg) { - font-size: var(--size-small-desktop); - line-height: var(--lineheight-small-desktop); - } -} - -@define-mixin blockquote { - font-size: var(--size-text-mobile); - line-height: var(--lineheight-text-mobile); - position: relative; - display: block; - margin: 0; - padding: 0; - - @media (--screen-lg) { - font-size: var(--size-text-desktop); - line-height: var(--lineheight-text-desktop); - } -} - -@define-mixin unorderedList { - @mixin noList; - display: block; - - & li { - display: inline-block; - width: 100%; - position: relative; - padding: 0 0 0 15px; - color: var(--color-secondary); - - & p { - margin: 0; - padding: 0; - } - - &:before { - content: ''; - display: block; - position: absolute; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-primary); - top: 8px; - left: 0; - - @media (--screen-lg) { - top: 10px; - } - } - } -} - -@define-mixin orderedList { - @mixin noList; - display: block; - - & li { - display: inline-block; - width: 100%; - position: relative; - padding: 0 0 0 20px; - color: var(--color-secondary); - - & p { - margin: 0; - padding: 0; - } - - &:first-child { - counter-reset: section; - } - - &:before { - content: ''; - display: block; - position: absolute; - border-radius: 50%; - top: 0; - left: 0; - counter-increment: section; - content: counters(section, '.') '.'; - font-weight: bold; - color: var(--color-primary); - } - } -} - -@define-mixin specialList { - @mixin noList; - display: block; - - & li { - display: inline-block; - width: 100%; - position: relative; - padding: 0 0 0 25px; - color: var(--color-secondary); - - & p { - margin: 0; - padding: 0; - } - - &:before { - content: 'πŸ’'; - display: block; - position: absolute; - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--color-primary); - top: 3px; - left: 0; - } - } -} - -@define-mixin container { - max-width: var(--max-width); - margin: auto; - padding-right: var(--margin-container-mobile); - padding-left: var(--margin-container-mobile); - - @media (--screen-lg) { - padding-right: var(--margin-container-desktop); - padding-left: var(--margin-container-desktop); - } - - @media (--screen-xxxl) { - max-width: 1704px; - } -} - -@define-mixin containerFluid { - width: 100%; - max-width: 100%; - padding-right: var(--margin-container-mobile); - padding-left: var(--margin-container-mobile); - margin-right: auto; - margin-left: auto; - - @media (--screen-lg) { - padding-right: var(--margin-container-desktop); - padding-left: var(--margin-container-desktop); - } -} - -@define-mixin containerChild { - padding-right: 0; - padding-left: 0; - - @media (--screen-lg) { - padding-right: 0; - padding-left: 0; - } -} - -@define-mixin row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -@define-mixin col { - position: relative; - min-height: 1px; - box-sizing: border-box; -} - -:global { - & div[data-container] { - @mixin container; - } - - & div[data-fluid="true"] { - @mixin containerFluid; - } - - & div[data-child="true"] { - @mixin containerChild; - } - - & div[data-row] { - @mixin row; - } - - & div[xs-gaps="none"] { - @media (--screen-xs) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[xs-gaps="default"] { - @media (--screen-xs) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[xs-gaps="big"] { - @media (--screen-xs) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[sm-gaps="none"] { - @media (--screen-sm) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[sm-gaps="default"] { - @media (--screen-sm) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[sm-gaps="big"] { - @media (--screen-sm) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[md-gaps="none"] { - @media (--screen-md) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[md-gaps="default"] { - @media (--screen-md) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[md-gaps="big"] { - @media (--screen-md) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[lg-gaps="none"] { - @media (--screen-lg) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[lg-gaps="default"] { - @media (--screen-lg) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[lg-gaps="big"] { - @media (--screen-lg) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[xl-gaps="none"] { - @media (--screen-xl) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[xl-gaps="default"] { - @media (--screen-xl) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[xl-gaps="big"] { - @media (--screen-xl) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[xxl-gaps="none"] { - @media (--screen-xxl) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[xxl-gaps="default"] { - @media (--screen-xxl) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[xxl-gaps="big"] { - @media (--screen-xxl) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[xxxl-gaps="none"] { - @media (--screen-xxxl) { - margin-right: var(--margin-row-none); - margin-left: var(--margin-row-none); - - & [data-col] { - padding-right: var(--gutter-col-none); - padding-left: var(--gutter-col-none); - } - } - } - - & div[xxxl-gaps="default"] { - @media (--screen-xxxl) { - margin-right: var(--margin-row-default); - margin-left: var(--margin-row-default); - - & [data-col] { - padding-right: var(--gutter-col-default); - padding-left: var(--gutter-col-default); - } - } - } - - & div[xxxl-gaps="big"] { - @media (--screen-xxxl) { - margin-right: var(--margin-row-big); - margin-left: var(--margin-row-big); - - & [data-col] { - padding-right: var(--gutter-col-big); - padding-left: var(--gutter-col-big); - } - } - } - - & div[data-col] { - @mixin col; - } -} diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index 05ade7d..c451343 100644 --- a/src/assets/css/styles.css +++ b/src/assets/css/styles.css @@ -1,12 +1,13 @@ /********************************************************************* ********************************************************************** -Cherry - Design System Entry Points ********************************************************************** *********************************************************************/ -@import '../../../node_modules/normalize.css/normalize.css'; -@import '../../../node_modules/cherry-grid/dist/css/styles.css'; -@import './globals.css'; +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap'); + +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; @import './gopablo.css', diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css index 946992a..8c64ef5 100644 --- a/src/assets/css/variables.css +++ b/src/assets/css/variables.css @@ -1,5 +1,3 @@ -@import './mixins.css'; - @custom-media --screen-xs (min-width: 0); @custom-media --screen-sm (min-width: 576px); @custom-media --screen-md (min-width: 768px); @@ -7,150 +5,3 @@ @custom-media --screen-xl (min-width: 1200px); @custom-media --screen-xxl (min-width: 1440px); @custom-media --screen-xxxl (min-width: 1920px); - -:root { - - /* Spacing ----------------------------------------------- */ - --max-width: 1440px; - --padding-top-body-mobile: 70px; - --padding-top-body-desktop: 0; - - --margin-container-mobile: 20px; - --margin-container-desktop: 20px; - --margin-container-child-mobile: 10px; - --margin-container-child-desktop: 10px; - - --margin-row-none: 0; - --margin-row-default: -10px; - --margin-row-medium: -30px; - --margin-row-big: -50px; - --gutter-col-none: 0; - --gutter-col-default: 10px; - --gutter-col-medium: 30px; - --gutter-col-big: 50px; - - /* Colors ----------------------------------------------------- */ - --color-primary: #1F2D3D; - --color-secondary: #8492A6; - --color-tertiary: #F9FAFC; - - --color-dark: #000; - --color-light: #fff; - - --color-gray-light: #E5E5E5; - --color-gray-medium: #666666; - --color-gray-dark: #3c4858; - - --color-success: #28a745; - --color-error: #dc3545; - --color-warning: #ffc107; - --color-info: #17a2b8; - - /* Fonts ------------------------------------------------------ */ - --font-text: 'Roboto', sans-serif; - --font-head: var(--font-text); - --font-special: var(--font-text); - --font-mono: 'Roboto Mono', monospace; - - /* Font Sizes ------------------------------------------------- */ - /* --> Hero --------------------------------------------------- */ - --size-hero1-mobile: 52px; - --lineheight-hero1-mobile: 1.35; - --size-hero1-desktop: 62px; - --lineheight-hero1-desktop: 1.15; - - --size-hero2-mobile: 42px; - --lineheight-hero2-mobile: 1.35; - --size-hero2-desktop: 52px; - --lineheight-hero2-desktop: 1.15; - - --size-hero3-mobile: 32px; - --lineheight-hero3-mobile: 1.35; - --size-hero3-desktop: 42px; - --lineheight-hero3-desktop: 1.15; - - /* --> Eyebrow ------------------------------------------------ */ - --size-eyebrow-mobile: 16px; - --lineheight-eyebrow-mobile: 1.35; - --size-eyebrow-desktop: 18px; - --lineheight-eyebrow-desktop: 1.15; - - /* --> Heading ------------------------------------------------ */ - --size-h1-mobile: 38px; - --lineheight-h1-mobile: 1.35; - --size-h1-desktop: 40px; - --lineheight-h1-desktop: 1.15; - - --size-h2-mobile: 28px; - --lineheight-h2-mobile: 1.35; - --size-h2-desktop: 32px; - --lineheight-h2-desktop: 1.15; - - --size-h3-mobile: 24px; - --lineheight-h3-mobile: 1.35; - --size-h3-desktop: 28px; - --lineheight-h3-desktop: 1.15; - - --size-h4-mobile: 22px; - --lineheight-h4-mobile: 1.35; - --size-h4-desktop: 24px; - --lineheight-h4-desktop: 1.40; - - --size-h5-mobile: 18px; - --lineheight-h5-mobile: 1.35; - --size-h5-desktop: 20px; - --lineheight-h5-desktop: 1.15; - - --size-h6-mobile: 14px; - --lineheight-h6-mobile: 1.35; - --size-h6-desktop: 16px; - --lineheight-h6-desktop: 1.15; - - /* --> Subtitle ----------------------------------------------- */ - --size-subtitle-mobile: 18px; - --lineheight-subtitle-mobile: 1.35; - --size-subtitle-desktop: 20px; - --lineheight-subtitle-desktop: 1.15; - - - /* --> Lead --------------------------------------------------- */ - --size-lead-mobile: 16px; - --lineheight-lead-mobile: 1.5; - --size-lead-desktop: 18px; - --lineheight-lead-desktop: 1.75; - - /* --> Text --------------------------------------------------- */ - --size-text-mobile: 16px; - --lineheight-text-mobile: 1.5; - --size-text-desktop: 18px; - --lineheight-text-desktop: 1.7; - - /* --> Small -------------------------------------------------- */ - --size-small-mobile: 12px; - --lineheight-small-mobile: 1.7; - --size-small-desktop: 14px; - --lineheight-small-desktop: 1.7; - - /* --> Blockquote --------------------------------------------- */ - --size-blockquote-mobile: var(--size-h3-mobile); - --lineheight-blockquote-mobile: var(--lineheight-h3-mobile); - --size-blockquote-desktop: var(--size-h3-desktop); - --lineheight-blockquote-desktop: var(--lineheight-h3-desktop); - - /* --> List --------------------------------------------------- */ - --size-list-mobile: var(--size-text-mobile); - --lineheight-list-mobile: var(--lineheight-text-mobile); - --size-list-desktop: var(--size-text-desktop); - --lineheight-list-desktop: var(--lineheight-text-desktop); - - /* --> Buttons ------------------------------------------------ */ - --size-button-regular-mobile: var(--size-text-mobile); - --lineheight-button-regular-mobile: var(--lineheight-text-mobile); - --size-button-regular-desktop: var(--size-text-desktop); - --lineheight-button-regular-desktop: var(--lineheight-text-desktop); - - --size-button-big-mobile: var(--size-subtitle-mobile); - --lineheight-button-big-mobile: var(--lineheight-subtitle-mobile); - --size-button-big-desktop: var(--size-subtitle-desktop); - --lineheight-button-big-desktop: var(--lineheight-subtitle-desktop); -} diff --git a/src/assets/js/main.js b/src/assets/js/main.js index 7aaf256..59c5eab 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -1,11 +1,6 @@ const header = $('#header'); $(window).on('load', () => { - WebFont.load({ - google: { - families: ["Roboto:100,300,400,700"] - } - }); setTimeout(function () { $(window).scroll(function () { let scrolled = $(window).scrollTop(); diff --git a/src/assets/js/onclick.js b/src/assets/js/onclick.js index 1cc19d2..146bf63 100644 --- a/src/assets/js/onclick.js +++ b/src/assets/js/onclick.js @@ -2,9 +2,12 @@ $('a').click((event) => { let scrollOffset = 0; if ($(this).is('a[href^="#"]') && $(this).attr('href').length >= 2) { - $('html, body').animate({ - scrollTop: $($.attr(this, 'href')).offset().top + scrollOffset - }, 1500); + $('html, body').animate( + { + scrollTop: $($.attr(this, 'href')).offset().top + scrollOffset, + }, + 1500 + ); return false; } }); diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..43f4824 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,14 @@ +module.exports = { + purge: { + enabled: true, + content: ['./src/**/*.html'], + }, + darkMode: false, // or 'media' or 'class' + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +};