├── .gitignore ├── .DS_Store ├── src ├── .DS_Store ├── assets │ ├── scripts │ │ └── script.js │ ├── .DS_Store │ ├── styles │ │ ├── modules │ │ │ ├── icons.styl │ │ │ ├── footer.styl │ │ │ ├── theme.styl │ │ │ ├── texts.styl │ │ │ ├── profile.styl │ │ │ ├── global.styl │ │ │ ├── container.styl │ │ │ ├── projects.styl │ │ │ └── header.styl │ │ └── style.styl │ └── img │ │ ├── .DS_Store │ │ ├── afonso-perfil-1x.jpg │ │ ├── afonso-perfil-2x.png │ │ └── afonso-perfil-mini.jpg ├── partials │ ├── footer.pug │ └── header.pug ├── icons │ ├── heart-icon.html │ └── star-icon.html ├── projects.pug ├── index.pug └── layouts │ └── default.pug ├── out ├── assets │ ├── scripts │ │ └── script.js │ ├── img │ │ ├── afonso-perfil-1x.jpg │ │ ├── afonso-perfil-2x.png │ │ └── afonso-perfil-mini.jpg │ └── styles │ │ └── style.css ├── index.html └── projects.html ├── .travis.yml ├── .editorconfig ├── CONTRIBUTING.md ├── .eslintrc.json ├── .github └── workflows │ └── deploy.yml ├── package.json ├── LICENSE.md ├── .stylintrc ├── projects.json ├── README.md └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | .publish/ 4 | .DS_Store -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /src/assets/scripts/script.js: -------------------------------------------------------------------------------- 1 | const foo = (x) => { 2 | return x; 3 | }; 4 | 5 | foo('demo'); -------------------------------------------------------------------------------- /src/partials/footer.pug: -------------------------------------------------------------------------------- 1 | footer.footer.container-centered 2 | include ../icons/heart-icon.html -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/assets/styles/modules/icons.styl: -------------------------------------------------------------------------------- 1 | .heart-icon, 2 | .star-icon { 3 | fill: highlight-color; 4 | } -------------------------------------------------------------------------------- /src/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/assets/img/.DS_Store -------------------------------------------------------------------------------- /out/assets/scripts/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var foo = function foo(x) { 4 | return x; 5 | }; 6 | foo('demo'); -------------------------------------------------------------------------------- /src/assets/styles/modules/footer.styl: -------------------------------------------------------------------------------- 1 | .footer { 2 | height: 40px; 3 | background-color: secondary-color; 4 | } -------------------------------------------------------------------------------- /src/assets/styles/modules/theme.styl: -------------------------------------------------------------------------------- 1 | /* Colors */ 2 | highlight-color = #ff0066 3 | secondary-color = #212121 4 | bg-color = #333 -------------------------------------------------------------------------------- /out/assets/img/afonso-perfil-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/out/assets/img/afonso-perfil-1x.jpg -------------------------------------------------------------------------------- /out/assets/img/afonso-perfil-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/out/assets/img/afonso-perfil-2x.png -------------------------------------------------------------------------------- /src/assets/img/afonso-perfil-1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/assets/img/afonso-perfil-1x.jpg -------------------------------------------------------------------------------- /src/assets/img/afonso-perfil-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/assets/img/afonso-perfil-2x.png -------------------------------------------------------------------------------- /out/assets/img/afonso-perfil-mini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/out/assets/img/afonso-perfil-mini.jpg -------------------------------------------------------------------------------- /src/assets/img/afonso-perfil-mini.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csshortcut/csshortcut-app/HEAD/src/assets/img/afonso-perfil-mini.jpg -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | sudo: required 4 | before_script: 5 | - npm install -g gulp-cli 6 | script: 7 | - gulp lint 8 | - gulp stylint -------------------------------------------------------------------------------- /src/icons/heart-icon.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/styles/modules/texts.styl: -------------------------------------------------------------------------------- 1 | .heading-lv1 { 2 | color: #fff; 3 | font-family: 'Lobster', cursive; 4 | font-size: 42px; 5 | margin: 5px; 6 | width: 100%; 7 | } 8 | 9 | .paragraph { 10 | color: #fff; 11 | } 12 | -------------------------------------------------------------------------------- /src/icons/star-icon.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/styles/modules/profile.styl: -------------------------------------------------------------------------------- 1 | // profile 2 | .profile { 3 | width: 100%; 4 | max-width: 500px; 5 | text-align: center; 6 | border() 7 | } 8 | 9 | .profile-img { 10 | border-radius: 50%; 11 | width: 100%; 12 | max-width: 200px; 13 | } -------------------------------------------------------------------------------- /src/assets/styles/style.styl: -------------------------------------------------------------------------------- 1 | @import 'modules/theme.styl' 2 | @import 'modules/global.styl' 3 | @import 'modules/icons.styl' 4 | @import 'modules/profile.styl' 5 | @import 'modules/projects.styl' 6 | @import 'modules/texts.styl' 7 | @import 'modules/container.styl' 8 | @import 'modules/header.styl' 9 | @import 'modules/footer.styl' -------------------------------------------------------------------------------- /src/assets/styles/modules/global.styl: -------------------------------------------------------------------------------- 1 | border() 2 | border: 0px dashed #000; 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | html, body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | display: flex; 14 | flex-direction: column; 15 | background-color: bg-color; 16 | font-weight: 300; 17 | } 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # http://editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | charset = utf-8 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork it! 4 | 2. Create your feature branch: `git checkout -b my-new-feature` 5 | 3. Commit your changes: `git commit -m 'Add some feature'` 6 | 4. Push to the branch: `git push origin my-new-feature` 7 | 5. Submit a pull request 8 | 9 | **After your pull request is merged** 10 | 11 | After your pull request is merged, you can safely delete your branch. -------------------------------------------------------------------------------- /src/assets/styles/modules/container.styl: -------------------------------------------------------------------------------- 1 | .main { 2 | flex: 1; 3 | } 4 | 5 | .container-centered { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100%; 10 | } 11 | 12 | .flipped { 13 | height: 100%; 14 | } 15 | 16 | .container { 17 | border() 18 | width: 100%; 19 | max-width: 800px; 20 | margin: 0 auto; 21 | display: flex; 22 | flex-wrap: wrap; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /src/partials/header.pug: -------------------------------------------------------------------------------- 1 | header.header 2 | div.container 3 | nav.menu 4 | ul.menu-itens 5 | li.menu-item 6 | a.menu-link(href="index.html") Perfil 7 | li.menu-item 8 | a.menu-link(href="projects.html") Projects 9 | div.profile-header 10 | img.profile-header-img(src="assets/img/afonso-perfil-mini.jpg" alt="Afonso Pacifer Perfil") 11 | span.profile-text Afonso Pacifer -------------------------------------------------------------------------------- /src/projects.pug: -------------------------------------------------------------------------------- 1 | extends ./layouts/default.pug 2 | 3 | block content 4 | div.container 5 | div.projects 6 | section.projects-list 7 | h1.heading-lv1 Projects 8 | 9 | for project in projects 10 | article.project 11 | h2.project-name=project.name 12 | div.project-star 13 | include icons/star-icon.html 14 | span.project-star-count=project.stargazers_count 15 | p.project-description=project.description -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "sourceType": "module" 9 | }, 10 | "rules": { 11 | "indent": [ 12 | "error", 13 | 2 14 | ], 15 | "linebreak-style": [ 16 | "error", 17 | "unix" 18 | ], 19 | "quotes": [ 20 | "error", 21 | "single" 22 | ], 23 | "semi": [ 24 | "error", 25 | "always" 26 | ] 27 | } 28 | } -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | extends ./layouts/default.pug 2 | 3 | block content 4 | div.container-centered 5 | div.profile 6 | img(srcset="assets/img/afonso-perfil-1x.jpg 1x, assets/img/afonso-perfil-2x.png 2x, " src="assets/img/afonso-perfil-1x.jpg" class="profile-img" alt="Afonso Perfil") 7 | h1.heading-lv1 Afonso 8 | p.paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur sem quis rutrum fermentum. Maecenas eget dignissim justo. Etiam suscipit, felis a faucibus condimentum, ante nunc efficitur odio, a lacinia eros metus nec leo. Duis tempus purus accumsan tincidunt porta. Nullam at ullamcorper dui -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 13 | uses: actions/checkout@v3 14 | 15 | - name: Setup node 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version: 20 19 | 20 | - name: Install 21 | run: npm install 22 | 23 | - name: Build 24 | run: npm run build 25 | 26 | - name: Deploy 27 | uses: JamesIves/github-pages-deploy-action@v4 28 | with: 29 | folder: out 30 | access-token: ${{ secrets.ACCESS_TOKEN }} -------------------------------------------------------------------------------- /src/assets/styles/modules/projects.styl: -------------------------------------------------------------------------------- 1 | // projects 2 | 3 | .projects { 4 | width: 100%; 5 | } 6 | 7 | .projects-list { 8 | border() 9 | display: flex; 10 | flex-wrap: wrap; 11 | width: 100%; 12 | } 13 | 14 | .projects-list .heading-lv1 { 15 | margin: 20px 0; 16 | } 17 | 18 | .project { 19 | border() 20 | width: calc(50% - 10px); 21 | background-color: #fff; 22 | display: flex; 23 | flex-wrap: wrap; 24 | padding: 10px; 25 | margin: 5px; 26 | } 27 | 28 | @media (max-width: 500px) { 29 | .project { 30 | width: calc(100% - 10px); 31 | } 32 | } 33 | 34 | .project-name { 35 | color: secondary-color; 36 | margin: 0; 37 | font-weight: 300; 38 | } 39 | 40 | .project-star { 41 | display: flex; 42 | align-items: center; 43 | margin-left: auto; 44 | } 45 | 46 | .project-star-count { 47 | color: secondary-color; 48 | margin-left: 5px; 49 | } 50 | 51 | .project-description { 52 | color: secondary-color; 53 | width: 100%; 54 | margin: 10px 0 0 0; 55 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "csshortcut-app", 3 | "version": "0.1.0", 4 | "description": "Projeto descolado", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node_modules/.bin/gulp build", 8 | "start": "node_modules/.bin/gulp server" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/csshortcut/csshortcut-app.git" 13 | }, 14 | "author": "afonsopacifer", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/csshortcut/csshortcut-app/issues" 18 | }, 19 | "homepage": "https://github.com/csshortcut/csshortcut-app#readme", 20 | "devDependencies": { 21 | "@babel/core": "^7.25.2", 22 | "@babel/preset-env": "^7.25.4", 23 | "gulp": "^5.0.0", 24 | "gulp-babel": "^8.0.0", 25 | "gulp-cli": "^3.0.0", 26 | "gulp-connect": "^5.7.0", 27 | "gulp-data": "^1.3.1", 28 | "gulp-eslint": "^6.0.0", 29 | "gulp-gh-pages": "^0.5.4", 30 | "gulp-imagemin": "^7.1.0", 31 | "gulp-pug": "^5.0.0", 32 | "gulp-stylint": "^4.0.2", 33 | "gulp-stylus": "^3.0.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 Afonso Pacifer 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": false, 3 | "brackets": "always", 4 | "colons": "always", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "customProperties": [], 10 | "depthLimit": false, 11 | "duplicates": true, 12 | "efficient": "always", 13 | "exclude": [], 14 | "extendPref": false, 15 | "globalDupe": false, 16 | "groupOutputByFile": true, 17 | "indentPref": false, 18 | "leadingZero": "never", 19 | "maxErrors": false, 20 | "maxWarnings": false, 21 | "mixed": false, 22 | "mixins": [], 23 | "namingConvention": false, 24 | "namingConventionStrict": false, 25 | "none": "never", 26 | "noImportant": true, 27 | "parenSpace": false, 28 | "placeholders": "always", 29 | "prefixVarsWithDollar": "always", 30 | "quotePref": false, 31 | "reporterOptions": { 32 | "columns": ["lineData", "severity", "description", "rule"], 33 | "columnSplitter": " ", 34 | "showHeaders": false, 35 | "truncate": true 36 | }, 37 | "semicolons": "never", 38 | "sortOrder": "alphabetical", 39 | "stackedProperties": "never", 40 | "trailingWhitespace": "never", 41 | "universal": false, 42 | "valid": true, 43 | "zeroUnits": "never", 44 | "zIndexNormalize": false 45 | } -------------------------------------------------------------------------------- /projects.json: -------------------------------------------------------------------------------- 1 | { 2 | "projects":[ 3 | { 4 | "name":"scrollindo.js", 5 | "description":"Simple abstraction for scroll interactions.", 6 | "stars":"999" 7 | }, 8 | { 9 | "name":"slush-banana", 10 | "description":"Generator for BananaCSS Projects.", 11 | "stars":"999" 12 | }, 13 | { 14 | "name":"slush-gulp-plugin", 15 | "description":"A slush generator for gulp plugins.", 16 | "stars":"999" 17 | }, 18 | { 19 | "name":"gulp-banana", 20 | "description":"Gulp plugin for compile Banana code to CSS.", 21 | "stars":"999" 22 | }, 23 | { 24 | "name":"css-ast-iterations", 25 | "description":"Provide a very simple API for complex iterations on the CSS abstract syntax tree (AST).", 26 | "stars":"999" 27 | }, 28 | { 29 | "name":"banana-style-guide", 30 | "description":"Banana NodeJS code style guide.", 31 | "stars":"999" 32 | }, 33 | { 34 | "name":"bananacss", 35 | "description":"The brazilian CSS superset writen in NodeJS.", 36 | "stars":"999" 37 | }, 38 | { 39 | "name":"vue-meditation", 40 | "description":"Timer for meditation built with Vue.JS", 41 | "stars":"999" 42 | } 43 | ] 44 | } -------------------------------------------------------------------------------- /src/assets/styles/modules/header.styl: -------------------------------------------------------------------------------- 1 | // Header container 2 | .header { 3 | width: 100%; 4 | background-color: highlight-color; 5 | } 6 | 7 | // Menu 8 | .menu { 9 | display: flex; 10 | align-items: center; 11 | border() 12 | } 13 | 14 | @media screen and (max-width: 400px) { 15 | .menu { 16 | width: 100%; 17 | justify-content: center; 18 | order: 2; 19 | margin: 10px 0; 20 | } 21 | } 22 | 23 | .menu-itens { 24 | margin-top: 0; 25 | margin-bottom: 0; 26 | padding-left: 0; 27 | display: inline-block; 28 | } 29 | 30 | .menu-item { 31 | list-style: none; 32 | display: inline-block; 33 | } 34 | 35 | .menu-link { 36 | color: #fff; 37 | text-decoration: none; 38 | display: inline-block; 39 | padding: 10px; 40 | } 41 | 42 | // profile 43 | .profile-header { 44 | border() 45 | margin-left: auto; 46 | } 47 | 48 | @media screen and (max-width: 400px) { 49 | .profile { 50 | width: 100%; 51 | text-align: center; 52 | order: 1; 53 | margin: 10px 0; 54 | } 55 | } 56 | 57 | .profile-header-img { 58 | vertical-align: middle; 59 | border-radius: 50%; 60 | margin: 5px; 61 | } 62 | 63 | .profile-text { 64 | margin: 5px; 65 | display: inline-block; 66 | color: #fff; 67 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSShortcurt APP 2 | 3 | > Projeto descolado <3 4 | 5 | ## Stack 6 | 7 | - Task Runner: [Gulp](http://gulpjs.com/) 8 | - HTML Template Engine: [Pug](https://pugjs.org/api/getting-started.html) 9 | - CSS Preprocessor: [Stylus](http://stylus-lang.com/) 10 | - JS Transpiler: [babel](https://babeljs.io/) 11 | 12 | ## Run the project locally 13 | 14 | **1 -** Clone the project and install the dependencies: 15 | 16 | ```sh 17 | $ git clone https://github.com/csshortcut/csshortcut-app.git 18 | $ cd csshortcut-app 19 | $ npm install 20 | ``` 21 | **2 -** Run static server and livereload: 22 | 23 | ```sh 24 | $ npm start 25 | ``` 26 | 27 | ## Folders Structure 28 | 29 | . 30 | ├── README.md 31 | ├── LICENSE.md 32 | ├── CONTRIBUTING.md 33 | ├── out/ 34 | ├── src/ 35 | | ├── icons/ 36 | | ├── assets/ 37 | | | ├── img/ 38 | | | ├── scripts/ 39 | | | | └── script.js 40 | | | └── styles/ 41 | | | ├── modules/ 42 | | | └── style.styl 43 | | ├── partials/ 44 | | | ├── footer.pug 45 | | | └── header.pug 46 | | ├── layouts/ 47 | | | └── default.pug 48 | | ├── projects.pug 49 | | └── index.pug 50 | ├── gulpfile.js 51 | ├── package.json 52 | ├── projects.json 53 | ├── .editorconfig 54 | └── .gitignore 55 | 56 | ## Automatic Tasks 57 | 58 | - `$ npm run build`: Compile, concat and minify all files. 59 | - `$ npm start`: Watch the files to build and start a static server. 60 | 61 | ## Versioning 62 | 63 | To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines. 64 | 65 | ## Contributing 66 | Find on our [roadmap](https://github.com/csshortcut/csshortcut-app/issues/1) the next steps of the project ;) 67 |
68 | Want to contribute? [Follow these recommendations](https://github.com/csshortcut/csshortcut-app/blob/master/CONTRIBUTING.md). 69 | 70 | ## License 71 | [MIT License](https://github.com/csshortcut/csshortcut-app/blob/master/LICENSE.md) © [Afonso Pacifer](http://afonsopacifer.com/) -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const { series, parallel, src, dest, watch } = require('gulp') 2 | const pugPlugin = require('gulp-pug') 3 | const stylusPlugin = require('gulp-stylus') 4 | const connect = require('gulp-connect') 5 | const imageminPlugin = require('gulp-imagemin') 6 | const data = require('gulp-data') 7 | const babelPlugin = require('gulp-babel') 8 | const eslint = require('gulp-eslint') 9 | const stylint = require('gulp-stylint') 10 | 11 | const pug = done => { 12 | 13 | fetch('https://api.github.com/users/afonsopacifer/repos') 14 | .then(res => res.json()) 15 | .then(repos => { 16 | 17 | src('./src/*.pug') 18 | .pipe(data(function() { return { projects: repos } })) 19 | .pipe(pugPlugin()) 20 | .pipe(dest('./out')) 21 | .pipe(connect.reload()) 22 | 23 | done(); 24 | 25 | }) 26 | } 27 | 28 | const stylus = () => src('./src/assets/styles/*.styl') 29 | .pipe(stylusPlugin()) 30 | .pipe(dest('./out/assets/styles/')) 31 | .pipe(connect.reload()) 32 | 33 | const stylusLint = () => src(['./src/assets/styles/*.styl', './src/assets/styles/modules/*.styl']) 34 | .pipe(stylint()) 35 | .pipe(stylint.reporter()) 36 | 37 | const babel = () => src('./src/assets/scripts/*.js') 38 | .pipe(eslint()) 39 | .pipe(eslint.format()) 40 | .pipe(babelPlugin({ 41 | presets: ['@babel/env'] 42 | })) 43 | .pipe(dest('./out/assets/scripts/')) 44 | .pipe(connect.reload()); 45 | 46 | const imagemin = () => src('./src/assets/img/*', {encoding: false}) 47 | .pipe(imageminPlugin()) 48 | .pipe(dest('./out/assets/img/')) 49 | 50 | const watchTask = () => { 51 | watch(['./src/*.pug','./src/partials/*.pug','./src/layouts/*.pug'], pug) 52 | watch(['./src/assets/styles/*.styl', './src/assets/styles/modules/*.styl'], stylus) 53 | } 54 | 55 | const serve = () => { 56 | connect.server({ 57 | root: 'out/', 58 | livereload: true 59 | }) 60 | } 61 | 62 | exports.server = parallel(watchTask, serve) 63 | exports.build = series(pug, stylus, imagemin, babel, stylusLint) -------------------------------------------------------------------------------- /src/layouts/default.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | //- Metas 5 | //- =========================================== 6 | meta(name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0") 7 | meta(charset="utf-8") 8 | 9 | - var title = "Projeto Front-End Title" 10 | - var description = "Projeto Front-End Description" 11 | 12 | //- SEO 13 | meta(name="description" content=description) 14 | meta(name="robots" content="index,follow") 15 | title=title 16 | 17 | //- Open Graph 18 | meta(property="og:type" content="website") 19 | meta(property="og:title" content=title) 20 | meta(property="og:description" content=description) 21 | meta(property="og:url" content="https://csshortcut.github.io/csshortcut-app") 22 | meta(property="og:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png") 23 | 24 | //- Twitter Cards 25 | meta(name="twitter:card" content="summary_large_image") 26 | meta(name="twitter:title" content=title) 27 | meta(name="twitter:description" content=description) 28 | meta(name="twitter:url" content="https://csshortcut.github.io/csshortcut-app") 29 | meta(name="twitter:image" content="https://csshortcut.github.io/csshortcut-app/assets/img/share.png") 30 | 31 | //- Styles 32 | //- =========================================== 33 | link(rel="stylesheet" href="assets/styles/style.css") 34 | link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css") 35 | 36 | //- Fonts 37 | //- =========================================== 38 | link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|RobotoRoboto:300,400") 39 | 40 | body(data-senna) 41 | include ./../partials/header.pug 42 | 43 | main(data-senna-surface)#content.main 44 | block content 45 | 46 | include ./../partials/footer.pug 47 | 48 | script(type="text/javascript" src="assets/scripts/script.js" async) 49 | script(type="text/javascript" src="https://cdn.jsdelivr.net/senna.js/2.1.5/senna-min.js") -------------------------------------------------------------------------------- /out/index.html: -------------------------------------------------------------------------------- 1 | Projeto Front-End Title
Afonso Pacifer PerfilAfonso Pacifer
Afonso Perfil

Afonso

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur sem quis rutrum fermentum. Maecenas eget dignissim justo. Etiam suscipit, felis a faucibus condimentum, ante nunc efficitur odio, a lacinia eros metus nec leo. Duis tempus purus accumsan tincidunt porta. Nullam at ullamcorper dui

-------------------------------------------------------------------------------- /out/assets/styles/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | html, 5 | body { 6 | height: 100%; 7 | } 8 | body { 9 | display: flex; 10 | flex-direction: column; 11 | background-color: #333; 12 | font-weight: 300; 13 | } 14 | .heart-icon, 15 | .star-icon { 16 | fill: #f06; 17 | } 18 | .profile { 19 | width: 100%; 20 | max-width: 500px; 21 | text-align: center; 22 | border: 0px dashed #000; 23 | } 24 | .profile-img { 25 | border-radius: 50%; 26 | width: 100%; 27 | max-width: 200px; 28 | } 29 | .projects { 30 | width: 100%; 31 | } 32 | .projects-list { 33 | border: 0px dashed #000; 34 | display: flex; 35 | flex-wrap: wrap; 36 | width: 100%; 37 | } 38 | .projects-list .heading-lv1 { 39 | margin: 20px 0; 40 | } 41 | .project { 42 | border: 0px dashed #000; 43 | width: calc(50% - 10px); 44 | background-color: #fff; 45 | display: flex; 46 | flex-wrap: wrap; 47 | padding: 10px; 48 | margin: 5px; 49 | } 50 | @media (max-width: 500px) { 51 | .project { 52 | width: calc(100% - 10px); 53 | } 54 | } 55 | .project-name { 56 | color: #212121; 57 | margin: 0; 58 | font-weight: 300; 59 | } 60 | .project-star { 61 | display: flex; 62 | align-items: center; 63 | margin-left: auto; 64 | } 65 | .project-star-count { 66 | color: #212121; 67 | margin-left: 5px; 68 | } 69 | .project-description { 70 | color: #212121; 71 | width: 100%; 72 | margin: 10px 0 0 0; 73 | } 74 | .heading-lv1 { 75 | color: #fff; 76 | font-family: 'Lobster', cursive; 77 | font-size: 42px; 78 | margin: 5px; 79 | width: 100%; 80 | } 81 | .paragraph { 82 | color: #fff; 83 | } 84 | .main { 85 | flex: 1; 86 | } 87 | .container-centered { 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | height: 100%; 92 | } 93 | .flipped { 94 | height: 100%; 95 | } 96 | .container { 97 | border: 0px dashed #000; 98 | width: 100%; 99 | max-width: 800px; 100 | margin: 0 auto; 101 | display: flex; 102 | flex-wrap: wrap; 103 | } 104 | .header { 105 | width: 100%; 106 | background-color: #f06; 107 | } 108 | .menu { 109 | display: flex; 110 | align-items: center; 111 | border: 0px dashed #000; 112 | } 113 | @media screen and (max-width: 400px) { 114 | .menu { 115 | width: 100%; 116 | justify-content: center; 117 | order: 2; 118 | margin: 10px 0; 119 | } 120 | } 121 | .menu-itens { 122 | margin-top: 0; 123 | margin-bottom: 0; 124 | padding-left: 0; 125 | display: inline-block; 126 | } 127 | .menu-item { 128 | list-style: none; 129 | display: inline-block; 130 | } 131 | .menu-link { 132 | color: #fff; 133 | text-decoration: none; 134 | display: inline-block; 135 | padding: 10px; 136 | } 137 | .profile-header { 138 | border: 0px dashed #000; 139 | margin-left: auto; 140 | } 141 | @media screen and (max-width: 400px) { 142 | .profile { 143 | width: 100%; 144 | text-align: center; 145 | order: 1; 146 | margin: 10px 0; 147 | } 148 | } 149 | .profile-header-img { 150 | vertical-align: middle; 151 | border-radius: 50%; 152 | margin: 5px; 153 | } 154 | .profile-text { 155 | margin: 5px; 156 | display: inline-block; 157 | color: #fff; 158 | } 159 | .footer { 160 | height: 40px; 161 | background-color: #212121; 162 | } 163 | -------------------------------------------------------------------------------- /out/projects.html: -------------------------------------------------------------------------------- 1 | Projeto Front-End Title
Afonso Pacifer PerfilAfonso Pacifer

Projects

100-coisas-dev

3

100 Coisas dev que você vai realizar em 2016

2017-goals

8

:seedling: My Goals for 2017 :)

2017-goals-1

0

36Five.github.io

0

Website

500-dias-de-open-source

0

Meu livro que retrata a experiencia de ter mergulhado de cabeça no mundo open source e escrever código útil diariamente por 500 dias seguidos.

afonsoconfigs

7

:rocket: My packages, configs, dotfiles, plugins, etc...

afonsopacifer

1

afonsopacifer.github.io

17

My personal Website.

alfred-workflows

0

:metal: A collection of Alfred 2 workflows that will rock your world

all-animation

2

All Animation.css é um conjunto de animações, divertidas para deixar seu projeto mais sexy. São animações cross-browser que darão mas ênfase a suas páginas como controles deslizantes, efeitos 3D’s..

all-animation-1

0

apod

0

A simple website to show Astronomy Picture of the Day using NASA API.

awesome

1

A curated list of awesome lists

awesome-a11y

3

List of awesome accessibility resources

awesome-firebase

439

:open_file_folder: A curated list of Firebase.

awesome-flexbox

1228

:eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.

awesome-github

0

An exquisite list of awesome :octocat: secrets.

awesome-grid-layout

1

👓 A curated list of CSS Grid Layout Module or only Css Grid.

awesome-postcss

0

A curated list of PostCSS

awesome-svg

2

A curated list of SVG.

awesome-webcomponents

1

A curated list of awesome Web Components tools, articles and resources.

awesome-wpo

0

:pencil: A curated list of Web Performance Optimization. Everyone can contribute here!

bemdocs

1

bernardocs.github.io

0

My personal web curriculum

Bookmarks

0

Guia de estudos e ferramentas sobre design, UX e Front-end

cdn

0

clipboard.js

1

:scissors: Modern copy to clipboard. No Flash. Just 2kb :clipboard:

code-style-guide

4

:nail_care: Rules for writing beautiful codes.

commit-wars

31

:octocat: Minhas aventuras pelo mundo Open Source na jornada "Write Code Every Day"

componentes-atomicos-como-fazer

3

Irei iniciar um data grid do 0 a partir da minha concepção atômica e modular

--------------------------------------------------------------------------------