From 2c5348457e385e6db62e56d63d458e64f4853cb7 Mon Sep 17 00:00:00 2001 From: bezierer Date: Sat, 7 Oct 2017 18:05:46 -0400 Subject: [PATCH 1/5] Install grunt and sass/watch tasks as dev dependencies --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2318706..a135aeb 100644 --- a/package.json +++ b/package.json @@ -20,5 +20,10 @@ "bugs": { "url": "https://github.com/sorocabacss/wiredanchor/issues" }, - "homepage": "https://github.com/sorocabacss/wiredanchor#readme" + "homepage": "https://github.com/sorocabacss/wiredanchor#readme", + "devDependencies": { + "grunt": "^1.0.1", + "grunt-contrib-sass": "^1.0.0", + "grunt-contrib-watch": "^1.0.0" + } } From 3e5a67faa0ee7a98bceef644f7fae2ca60194a7a Mon Sep 17 00:00:00 2001 From: bezierer Date: Sat, 7 Oct 2017 18:07:13 -0400 Subject: [PATCH 2/5] Add an `scss` directory and `scss` file. Scss file copies main CSS file and makes use of color variables and selector nesting. --- scss/wiredanchor.scss | 47 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 scss/wiredanchor.scss diff --git a/scss/wiredanchor.scss b/scss/wiredanchor.scss new file mode 100644 index 0000000..f1cded4 --- /dev/null +++ b/scss/wiredanchor.scss @@ -0,0 +1,47 @@ +// SCSS for the main CSS file “wiredanchor.css + +// Vars. +$color-primary: #ff6f6f; +$color-charcoal: #333; + +// Main Styles. +.wiredanchor { + text-decoration: none; + color: $color-charcoal; + position: relative; + + &:hover, + &:focus, + &:visited, + &:active { + text-decoration: none; + color: $color-primary; + } + + &:hover::before { + opacity: 0.3; + } + + &:before { + content:''; + opacity: 0; + transition: opacity 0.1s linear; + background-color: $color-primary; + width: 100%; + height: 82%; + position: absolute; + left: 0; + top: 0; + } + + &:after { + content:''; + background-color: $color-primary; + opacity: 0.3; + width: 100%; + height: 30%; + position: absolute; + left: 0; + bottom: -10%; + } +} // .wiredanchor From 3e7559f0fcd52cf2c8c1f0ef79a09f28aeda1277 Mon Sep 17 00:00:00 2001 From: bezierer Date: Sat, 7 Oct 2017 18:07:29 -0400 Subject: [PATCH 3/5] Add a grunt file and grunt tasks to compile scss to css. --- gruntfile.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 gruntfile.js diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..e6b047f --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,21 @@ +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + sass: { + dist: { + files: { + 'wiredanchor.css' : 'scss/wiredanchor.scss' + } + } + }, + watch: { + css: { + files: '**/*.scss', + tasks: ['sass'] + } + } + }); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.registerTask('default',['watch']); +} \ No newline at end of file From 15b3efb00340b04d4207f8d842bc0082f127a88b Mon Sep 17 00:00:00 2001 From: bezierer Date: Sat, 7 Oct 2017 18:08:50 -0400 Subject: [PATCH 4/5] Compile scss file into css. --- wiredanchor.css | 62 +++++++++++++++++++++---------------------------- 1 file changed, 26 insertions(+), 36 deletions(-) diff --git a/wiredanchor.css b/wiredanchor.css index 8f4def9..04f2de8 100644 --- a/wiredanchor.css +++ b/wiredanchor.css @@ -1,40 +1,30 @@ .wiredanchor { text-decoration: none; color: #333; - position: relative; -} + position: relative; } + .wiredanchor:hover, .wiredanchor:focus, .wiredanchor:visited, .wiredanchor:active { + text-decoration: none; + color: #ff6f6f; } + .wiredanchor:hover::before { + opacity: 0.3; } + .wiredanchor:before { + content: ''; + opacity: 0; + transition: opacity 0.1s linear; + background-color: #ff6f6f; + width: 100%; + height: 82%; + position: absolute; + left: 0; + top: 0; } + .wiredanchor:after { + content: ''; + background-color: #ff6f6f; + opacity: 0.3; + width: 100%; + height: 30%; + position: absolute; + left: 0; + bottom: -10%; } -.wiredanchor:hover, -.wiredanchor:focus, -.wiredanchor:visited, -.wiredanchor:active { - text-decoration: none; - color: #ff6f6f; -} - -.wiredanchor:hover::before { - opacity: 0.3; -} - -.wiredanchor:before { - content:''; - opacity: 0; - transition: opacity 0.1s linear; - background-color: #ff6f6f; - width: 100%; - height: 82%; - position: absolute; - left: 0; - top: 0; -} - -.wiredanchor:after { - content:''; - background-color: #ff6f6f; - opacity: 0.3; - width: 100%; - height: 30%; - position: absolute; - left: 0; - bottom: -10%; -} +/*# sourceMappingURL=wiredanchor.css.map */ From fb1088216b21f511eae2818d683b3abf0c52f8c7 Mon Sep 17 00:00:00 2001 From: bezierer Date: Sat, 7 Oct 2017 18:14:44 -0400 Subject: [PATCH 5/5] Update README to include Grunt/SCSS instructions. --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8a40573..2c47ba0 100644 --- a/README.md +++ b/README.md @@ -3,4 +3,17 @@ WiredAnchor is a web project. It creates a stylesheet for links in texts so that they are more conspicuous and better perceived by users. As a result of this, links can be better marked and the user does not have to search for them in a time-consuming way. -If you If you want to participate in this project, create a fork first. After pushing the changes to your local repository, you can then create a pull request. \ No newline at end of file +If you If you want to participate in this project, create a fork first. After pushing the changes to your local repository, you can then create a pull request. + +## Using Grunt and SCSS +`cd` into your project directory and run `npm install` to install Grunt and other dependencies. + +Now run `grunt watch` to have Grunt watch your SCSS file for changes to compile into the CSS file. + +Never edit the CSS file directly; always work from the SCSS file as any changes made in the SCSS file will override changes in the CSS file once Grunt is run. + +## Dependencies + +Ensure that your system has Ruby installed, as well as NodeJS. + +To install Grunt on your system, open up your command line and run `npm install -g grunt-cli` to install Grunt globally on your machine. \ No newline at end of file