cacao-css 3.9.0 → 3.13.0

package/CHANGELOG.md

@@ -1,164 +1,179 @@
-# 3.9.0 (April 1, 2021)
+# Changelog
 
-* Removed the inline block fallback styles for the Grid component since Flexbox is widely supported in browsers now.
+## 3.11.0 (Sept 21, 2021)
 
-# 3.8.0 (April 1, 2021)
+- Updated .Button class to use `display: inline-flexbox` instead of `display: inline`
+- Updated .TextInput to use `small`, `medium` and `large` class sizes
+- Added responsive flexbox classes
+- Added `margin-right` utility classes
+- Added `margin-left` utility classes
+- Fixed `u-textBreak` so that it uses `overflow-wrap` instead of `word-wrap`
+
+## 3.10.0 (July 28, 2021)
+
+Updated ColumnList--noStyle to also remove the left padding on the list.
+
+## 3.9.0 (April 1, 2021)
+
+- Removed the inline block fallback styles for the Grid component since Flexbox is widely supported in browsers now.
+
+## 3.8.0 (April 1, 2021)
 
 Skipped because this tag already accidentally existed.
 
-# 3.7.0 (Aug 19, 2020)
+## 3.7.0 (Aug 19, 2020)
 
-* Updated the Gulp configuration to use modern techniques.
-* Added fallback styles for the select menu text when the select menu is focused.
+- Updated the Gulp configuration to use modern techniques.
+- Added fallback styles for the select menu text when the select menu is focused.
 
-# 3.6.1 (Nov 19, 2018)
+## 3.6.1 (Nov 19, 2018)
 
-* Fixed font issue for select menus
+- Fixed font issue for select menus
 
-# 3.6.0 (Jan 19, 2018)
+## 3.6.0 (Jan 19, 2018)
 
-* Added auto size utility
+- Added auto size utility
 
-# 3.5.0 (Jan 19, 2018)
+## 3.5.0 (Jan 19, 2018)
 
-* Set the button active/focus state.
-* Set the default state for the image wrapper to be inline-block so that the caption is under the image.
+- Set the button active/focus state.
+- Set the default state for the image wrapper to be inline-block so that the caption is under the image.
 
-# 3.4.0 (Nov 6, 2017)
+## 3.4.0 (Nov 6, 2017)
 
-* Set a specific color for select input border.
-* Added default table border collapse styles.
-* Added basic print styles.
+- Set a specific color for select input border.
+- Added default table border collapse styles.
+- Added basic print styles.
 
-# 3.3.0 (Oct 16, 2017)
+## 3.3.0 (Oct 16, 2017)
 
-* Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels. 
+- Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels.
 The goal is to improve accessibility and relative font sizing.
 
 ## 3.2.0 (Oct 13, 2017)
 
-* Added ImageWrapper and ImageCaption classes. 
+- Added ImageWrapper and ImageCaption classes.
 
 ## 3.1.0 (Oct 13, 2017)
 
-* Moved the text input and select menu styles to be under the "forms" component.
+- Moved the text input and select menu styles to be under the "forms" component.
 
 ## 3.0.0 (Oct 13, 2017)
 
-* Changed the focus of Cacao to be just on the CSS. A Yeoman generator called [cacao-branchcms](https://github.com/aptuitiv/generator-cacao-branchcms) has been setup to bootstrap a site with Cacao, theme files, images and Javascript.
+- Changed the focus of Cacao to be just on the CSS. A Yeoman generator called [cacao-branchcms](https://github.com/aptuitiv/generator-cacao-branchcms) has been setup to bootstrap a site with Cacao, theme files, images and Javascript.
 
 ## 2.8.0 (July 25, 2017)
 
-* Added notes about setting up a new site
-* Removed the 'default' value for the Javascript tag since it's default one already.
-* Updated packages and stylelint
+- Added notes about setting up a new site
+- Removed the 'default' value for the Javascript tag since it's default one already.
+- Updated packages and stylelint
 
 ## 2.7.0 (July 7, 2017)
 
-* Fixed the order of the javascript in the footer.
-* Added support for copying theme files as a gulp task.
-* Updated stylelint.
-* Form templates - moved the field description to be below the field and to be a smaller font size.
-* Changed the default Javascript placement to be in the footer.
-* Updated slick carousel to the latest version.
-* Added drift-zoom library for zooming images when hovering over them.
-* Added "xl" utility selector size.
-* Changed the gulp-changed-in-place plugin for gulp-newer. That plugin works better with gulp-remember to combine all source files even if one changed. gulp-changed-in-place would only process the one changed file.
+- Fixed the order of the javascript in the footer.
+- Added support for copying theme files as a gulp task.
+- Updated stylelint.
+- Form templates - moved the field description to be below the field and to be a smaller font size.
+- Changed the default Javascript placement to be in the footer.
+- Updated slick carousel to the latest version.
+- Added drift-zoom library for zooming images when hovering over them.
+- Added "xl" utility selector size.
+- Changed the gulp-changed-in-place plugin for gulp-newer. That plugin works better with gulp-remember to combine all source files even if one changed. gulp-changed-in-place would only process the one changed file.
 
 ## 2.6.0 (May 27, 2017)
 
-* Removed dist folder.
-* Updated packages to latest versions.
-* Included SVG files in the type of images to be processed.
-* Changed build path to 'build' instead of 'dist'.
-* Added theme files and moved all layout files to be built to build/theme/custom.
-* Added Header/Footer as default style components.
-* Updated navigation templates.
-* Added Breadcrumb default style.
-* Added list arrow styles.
-* Updated default button styles.
-* Added pagination styles.
-* Added default footer navigation.
-* Added default Content container styles.
-* Added default background utility style.
-* Added arrange component styles.
-* Added form templates.
-* Updated gulp watch task to use glob-watcher instead of gulp-batch as sometimes gulp-batch would stop recognizing changed files.
-* Added new 5/3 constrain size.
-* Added sidebar navigation.
-* Updated the BEM linter utilitySelector to include “xs-“ as a utility size.
-* Updated Constrain and FlexEmbed ratios to be consistent.
-* Updated form styles.
-* Added blog theme templates.
-* Added store theme templates.
-* Added ColumnList styles to convert an ul/ol list into columns.
-* Added jQuery form plugin as part of the core forms javascript.
-* Removed ap_drilldown_plugin.
+- Removed dist folder.
+- Updated packages to latest versions.
+- Included SVG files in the type of images to be processed.
+- Changed build path to 'build' instead of 'dist'.
+- Added theme files and moved all layout files to be built to build/theme/custom.
+- Added Header/Footer as default style components.
+- Updated navigation templates.
+- Added Breadcrumb default style.
+- Added list arrow styles.
+- Updated default button styles.
+- Added pagination styles.
+- Added default footer navigation.
+- Added default Content container styles.
+- Added default background utility style.
+- Added arrange component styles.
+- Added form templates.
+- Updated gulp watch task to use glob-watcher instead of gulp-batch as sometimes gulp-batch would stop recognizing changed files.
+- Added new 5/3 constrain size.
+- Added sidebar navigation.
+- Updated the BEM linter utilitySelector to include “xs-“ as a utility size.
+- Updated Constrain and FlexEmbed ratios to be consistent.
+- Updated form styles.
+- Added blog theme templates.
+- Added store theme templates.
+- Added ColumnList styles to convert an ul/ol list into columns.
+- Added jQuery form plugin as part of the core forms javascript.
+- Removed ap_drilldown_plugin.
 
 ## 2.5.0 (February 12, 2017)
 
-* Changed '0%' to 'auto' for the flex grow utility classes as '0%' was causing issues in some versions of Safari.
+- Changed '0%' to 'auto' for the flex grow utility classes as '0%' was causing issues in some versions of Safari.
 
 ## 2.4.0 (November 25, 2016)
 
-* Added right margin to radio buttons and checkboxes.
-* Added default styles for disabled inputs.
+- Added right margin to radio buttons and checkboxes.
+- Added default styles for disabled inputs.
 
 ## 2.3.0 (November 16, 2016)
 
-* Fixed nunjucks support.
-* Added sample pages to the 'dist' directory to show different responsive navigation options.
-* Added two built-in responsive navigation options in the src/styles/lib/components/navigation folder.
+- Fixed nunjucks support.
+- Added sample pages to the 'dist' directory to show different responsive navigation options.
+- Added two built-in responsive navigation options in the src/styles/lib/components/navigation folder.
 
 ## 2.2.0 (November 9, 2016)
 
-* Added responsive styles for the typography utility classes.
-* Consolidated the dropdown and mainnav navigation components into one "navigation" component. 
-* Added margin gutter utility classes.
-* Added responsive styles for all the padding utility classes.
-* Formatted code to have consistent line indents.
-* Added "u-block" responsive styles.
-* Added size12of12 as an alternate full width size class.
+- Added responsive styles for the typography utility classes.
+- Consolidated the dropdown and mainnav navigation components into one "navigation" component.
+- Added margin gutter utility classes.
+- Added responsive styles for all the padding utility classes.
+- Formatted code to have consistent line indents.
+- Added "u-block" responsive styles.
+- Added size12of12 as an alternate full width size class.
 
 ## 2.1.0 (October 10, 2016)
 
-* Added left/right padding utilities.
-* Change the u-linkClean class to keep the link "clean" on hover.
+- Added left/right padding utilities.
+- Change the u-linkClean class to keep the link "clean" on hover.
 
 ## 2.0.0 (September 26, 2016)
 
-* Combined Cacao and Cacao Cracker together to make it easier to get a project started
-* Added some additional documentation
+- Combined Cacao and Cacao Cracker together to make it easier to get a project started
+- Added some additional documentation
 
 ## 1.4.0 (September 18, 2016)
 
-* Added Form component for errors, labels and required elements
-* Added Message component for success and error messages
+- Added Form component for errors, labels and required elements
+- Added Message component for success and error messages
 
 ## 1.3.0 (September 9, 2016)
 
-* Added telephone link styles
-* Changed container width from 960px to 1200px
-* Added extra large gutter sizes
-* Added utility text size classes
-* Changed default table column and header styles to have padding and top vertical alignment
-* Added config file to hold common breakpoints 
-* Added responsive margin utility classes
-* Added arrow to the "Back" link for the mobile nav menu
-* Added extra small size utility classes
+- Added telephone link styles
+- Changed container width from 960px to 1200px
+- Added extra large gutter sizes
+- Added utility text size classes
+- Changed default table column and header styles to have padding and top vertical alignment
+- Added config file to hold common breakpoints
+- Added responsive margin utility classes
+- Added arrow to the "Back" link for the mobile nav menu
+- Added extra small size utility classes
 
 ## 1.2.1 (May 26, 2016)
 
-* Updated style lint to conform to version 4.5 where some rules were deprecated and renamed.
+- Updated style lint to conform to version 4.5 where some rules were deprecated and renamed.
 
 ## 1.2.0 (March 8, 2016)
 
-* Updated style lint max lines rule
+- Updated style lint max lines rule
 
 ## 1.1.0 (February 8, 2016)
 
-* Added: visual test styles and tests for components
+- Added: visual test styles and tests for components
 
 ## 1.0.0 (February 2, 2016)
 
-* Initial 1.0 release
+- Initial 1.0 release

package/README.md

@@ -1,17 +1,16 @@
 # Cacao
 
 A set of CSS modules that provide a solid foundation for starting a new project.
-Includes project scaffolding and build system for CSS using 
+Includes project scaffolding and build system for CSS using
 [Gulp](http://gulpjs.com/) and [PostCSS](https://github.com/postcss/postcss).
 
 [How to pronounce Cacao](https://www.youtube.com/watch?v=kVSIkXL_Nmo).
 
 Cacao stylesheets are based on the [SUIT CSS](https://suitcss.github.io) methodology
-including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md), 
+including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md),
 [style format](http://github.com/suitcss/suit/blob/master/doc/STYLE.md#css),
 and [architectural principles](http://github.com/suitcss/suit/blob/master/doc/design-principles.md).
 
-
 ## First time usage
 
 ### Install Gulp and NodeJS globally if you have not already
@@ -24,62 +23,63 @@ installed. First install the system-wide dependencies listed below:
 
 ## Getting started
 
-#### 1) Setup your project folder on your machine.
+### 1) Setup your project folder on your machine
+
+### 2) Download the Zip file for this repository and unzip into your project folder
 
-#### 2) Download the Zip file for this repository and unzip into your project folder. 
 `Make sure that you can view hidden files and that the .stylelintrc file is included.`
 
-Or, you can clone the repository and use that as your starting base for your website project. 
+Or, you can clone the repository and use that as your starting base for your website project.
 
-#### 3) Navigate to the project directory and install local project dependencies.
+### 3) Navigate to the project directory and install local project dependencies
 
-Use the command line on your computer to navigate to your projects directory and run the following: 
+Use the command line on your computer to navigate to your projects directory and run the following:
 
-```
+```terminal
 npm install
-``` 
+```
 
-Depending on how node was installed you may need to use: 
+Depending on how node was installed you may need to use:
 
-```
+```terminal
 sudo npm install
 ```
 
-This will install Gulp, download linked projects (like jQuery) and setup the necessary node components to process CSS, combine and uglify Javascript and minify images (amoung other things). 
+This will install Gulp, download linked projects (like jQuery) and setup the necessary node components to process CSS, combine and uglify Javascript and minify images (amoung other things).
 
-If you are using [WebStorm](https://www.jetbrains.com/webstorm/) then you can simply start a new project using your projects folder, open the Terminal tab in Webstorm and run the above command. 
+If you are using [WebStorm](https://www.jetbrains.com/webstorm/) then you can simply start a new project using your projects folder, open the Terminal tab in Webstorm and run the above command.
 
 Then run:
 
-````
+````terminal
 gulp
 ````
 
 That will build the CSS and start the watch task.
 
-The built resources are located in the new 'dist' folder. 
+The built resources are located in the new 'dist' folder.
 
-````
+````terminal
 gulp build
 ````
 
 That will build the CSS.
 Essentially everything the default task does except start the watch task.
 
-
 ## Working with CSS
 
 Gulp is used to process the CSS files and compile them together into one CSS file at `dist/css/main.css`.
 
 Cacao stylesheets are based on the [SUIT CSS](https://suitcss.github.io) methodology
-including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md), 
+including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md),
 [style format](http://github.com/suitcss/suit/blob/master/doc/STYLE.md#css),
 and [architectural principles](http://github.com/suitcss/suit/blob/master/doc/design-principles.md).
 
 The idea is that you have very focused stylesheets for individual components instead of having one large stylesheet.
 
 The following is the folder structure for stylesheets within the `src\css` folder:
- ````
+
+ ````text
  main.css
  config.css
    L base
@@ -91,21 +91,21 @@ The `main.css` file imports the `config.css` file as well as the `main.css` file
 
 ### config.css
 
-The `config.css` file is where global media query breakpoints and global configuration variables are located. 
+The `config.css` file is where global media query breakpoints and global configuration variables are located.
 
 By default just a few media query breakpoints are setup:
 
-````
+````css
 @custom-media --c-bp-xl (max-width: 1200px);
 @custom-media --c-bp-lg (max-width: 1050px);
 @custom-media --c-bp-md (max-width: 800px);
 @custom-media --c-bp-sm (max-width: 600px);
 @custom-media --c-bp-xs (max-width: 425px);
 ````
- 
+
 You would use those in your CSS like so:
 
-````
+````css
 @media (--c-bp-lg) {
     .Header {
         border: none;
@@ -116,7 +116,7 @@ You would use those in your CSS like so:
 An example usage of global variables would be to setup common colors used so that you don't have to type the same color over and over again. It also makes it convenient to have one place
 to change a color if necessary.
 
-````
+````css
 :root {
     --c-blue: #15bdde;
     --c-green: #64a70b;
@@ -127,7 +127,7 @@ to change a color if necessary.
 
 You could then use that variable in your CSS like so:
 
-````
+````css
 .Button {
     background-color: var(--c-blue);
 }
@@ -137,7 +137,7 @@ You could then use that variable in your CSS like so:
 
 The base directory contains the following stylesheets:
 
-````
+````css
 base.css
 code.css
 forms.css
@@ -148,11 +148,11 @@ typography.css
 
 `index.css` imports the other stylesheets within this folder as well as [Normalize.css](https://necolas.github.io/normalize.css/).
 
-The styles in the base folder are the general styles for elements. The direct element tag is used as the selector. 
+The styles in the base folder are the general styles for elements. The direct element tag is used as the selector.
 
 #### base.css
 
-base.css includes the basic styles for `<body>` as well as images, iframe and other elements. 
+base.css includes the basic styles for `<body>` as well as images, iframe and other elements.
 
 Other than changing the body background this file isn't changed much.
 
@@ -164,23 +164,23 @@ code.css includes basic styles for `<code>`, `<kdb>`, `<pre>` and `<samp>` tags.
 
 forms.css includes basic styles for `<fieldset>`, `<label>`, `<input>`, `<button>`, `<textarea>` and other form related tags.
 
-This file is not changed much. 
+This file is not changed much.
 
 #### tables.css
 
 tables.css includes basic styles for for tables, table columns and table headings.
- 
+
  This files is not changed much.
- 
+
 #### typography.css
 
-The typography.css file is the one file in the `base` directory that you would most likely change. 
+The typography.css file is the one file in the `base` directory that you would most likely change.
 
-It contains the typographical styles for most elements. 
+It contains the typographical styles for most elements.
 
 For the most part you can simply change the values for the variables at the top.
 
-````
+````css
 :root {
     --base-typography-color: #333;
     --base-typography-fontFamily: sans-serif;
@@ -221,15 +221,15 @@ For the most part you can simply change the values for the variables at the top.
 }
 ````
 
-Or, if necessary you could edit or add styles directly further down in the stylesheet. 
+Or, if necessary you could edit or add styles directly further down in the stylesheet.
 
 Keep in mind that this is supposed to be general styles for HTML elements. You would not use class selectors in any of the `base` stylesheets. That would take place either in the utility classes or within components.
 
 ### Components
 
-The `components` directory is where you will do most of your work with a site. 
+The `components` directory is where you will do most of your work with a site.
 
-This directory has a number of included components for things like buttons, dropdown and main navigation bars, text fields, images, and grid. 
+This directory has a number of included components for things like buttons, dropdown and main navigation bars, text fields, images, and grid.
 
 Many of the components have README files within their directory that explains what they are and how to use them.
 
@@ -239,7 +239,7 @@ Many of the components have README files within their directory that explains wh
 
 In this example we're going to add a "header" component to hold the styles for the header section of the site.
 
-##### 1) To add a new component first create a directory within the `components` directory that matches the name of the component. 
+##### 1) To add a new component first create a directory within the `components` directory that matches the name of the component
 
 Keep in mind that components follow the [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) of [SUIT CSS](https://suitcss.github.io).
 
@@ -247,31 +247,31 @@ The component folder should always be lowercase.
 
 In our example the folder would be `header`.
 
-##### 2) Add a stylesheet within your component folder that is the same name as your component.
+##### 2) Add a stylesheet within your component folder that is the same name as your component
 
-In our example the stylesheet would be called `header.css`. 
+In our example the stylesheet would be called `header.css`.
 
-##### 3) Add a stylesheet within your component folder called index.css and import the other stylesheet.
+##### 3) Add a stylesheet within your component folder called index.css and import the other stylesheet
 
 In our example the index.css file would include the following:
 
-````
+````css
 @import './header';
 ````
 
 You can include ".css" after "header" if you want but it's not necessary.
 
-##### 4) Add an import into `components\index.css` to import the new component.
+##### 4) Add an import into `components\index.css` to import the new component
 
 In our example you would add the following within `components\index.css`:
 
-````
+````css
 @import './header';
 ````
 
 Since the 'header' directory contains an `index.css` file then that import statement will import the `index.css` file. It's the same as writing
- 
-````
+
+````css
 @import './header/index.css';
 ````
 
@@ -281,30 +281,30 @@ It's always good to add a comment at the top of your component stylesheet to des
 
 The very first comment in the file should follow this structure:
 
-````
+````css
 /* =========================================================================== *\
     Description of component here
 \* =========================================================================== */
 ````
 
-##### 6) Add the `Define` statement to your component stylesheet 
+##### 6) Add the `Define` statement to your component stylesheet
 
 To enforce the SuitCSS [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) we add a special comment near the top of the file to set what the
 base class name should be within this file.
 
 In our `header` example we would have the following code.
 
-````
+````css
 /** @define Header */
 ````
 
 This will cause the CSS parser to show you a warning in the terminal when the CSS is processed if you are using an invalid selector.
 
-Cacao uses the [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) plugin to enforce naming rules. 
+Cacao uses the [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) plugin to enforce naming rules.
 
 The combination of steps 5 and 6 would result in the following code at the top of the header.css file:
 
-````
+````css
 /* =========================================================================== *\
     Page header styles. The section of the page above the main navigation.
 \* =========================================================================== */
@@ -320,13 +320,13 @@ You would then add your CSS below all that.
 
 If for some reason you need to use a selector in your stylesheet that would not be valid you can add the following comment on the line immediately before your selector:
 
-````
+````css
 /* postcss-bem-linter: ignore */
 ````
 
 That only applies to one selector so you would need to add that before each selector that is not valid.
 
-````
+````css
 /* postcss-bem-linter: ignore */
 .invalid-selector {
     color: red;
@@ -340,11 +340,11 @@ That only applies to one selector so you would need to add that before each sele
 
 ### Utils
 
-The `utils` directory includes all of the utility classes. 
+The `utils` directory includes all of the utility classes.
 
 You would use these to adjust font styles, set grid column sizes, adjust margins apply flex styles and change element layouts.
 
-These classes are useful because you can use a combination of them to set a HTML element's style instead of creating a bunch of small components. 
+These classes are useful because you can use a combination of them to set a HTML element's style instead of creating a bunch of small components.
 
 **If you find yourself adding a lot of utlity classes to an element (other than size classes on Grid columns) then you may want to create a new component instead.**
 
@@ -380,7 +380,7 @@ Adjust the top and/or bottom margins. Includes styles that can be used at differ
 
 #### padding
 
-Adjust the top and/or bottom padding. 
+Adjust the top and/or bottom padding.
 
 Adjust the horizontal padding with gutter utility classes.
 
@@ -412,13 +412,13 @@ This is commonly used with the Grid component, although, you can use it with any
 
 To set an element to be full width use:
 
-````
+````css
 .u-sizeFull
 ````
 
 or it's breakpoint versions:
 
-````
+````css
 .u-lg-sizeFull
 .u-md-sizeFull
 .u-sm-sizeFull
@@ -427,11 +427,11 @@ or it's breakpoint versions:
 
 #### typography
 
-* Set the `text-transform` style for elements
-* Set the `text-align` style for elements (includes styles that can be used at different breakpoints)
-* Set the `font-weight` style for elements
-* Set the font size and line height styles with different pre-defined utility classes
-* Other miscellaneous text styles like kerning, word wrapping and truncating
+- Set the `text-transform` style for elements
+- Set the `text-align` style for elements (includes styles that can be used at different breakpoints)
+- Set the `font-weight` style for elements
+- Set the font size and line height styles with different pre-defined utility classes
+- Other miscellaneous text styles like kerning, word wrapping and truncating
 
 ## Setting up a new website
 
@@ -458,7 +458,7 @@ Confirm that the remotes are set up correctly.
 
 That should show you something like this:
 
-```
+```css
 cacao   https://github.com/aptuitiv/cacao.git (fetch)
 cacao   https://github.com/aptuitiv/cacao.git (push)
 origin  https://YOUR-USERNAME@bitbucket.org/YOUR-ACCOUNT/YOUR-WEBSITE-REPOSITORY.git (fetch)
@@ -469,12 +469,13 @@ Push to the website repository if the repository is brand new. If the repository
 
 `git push -u origin master`
 
-
 ### Issues merging unrelated histories
+
 If having trying to merge cacao into an existing repository and GIT is saying that it won't merge unrelated histories then follow these steps.
-1) Check out cacao/master as cacao-master 
+
+1) Check out cacao/master as cacao-master
 2) Check out origin/master as master. At this point you should currently have origin/master checked out.
 3) On the command line run `git merge cacao-master --allow-unrelated-histories` You will be prompted to enter a commit message. Do so and then `Esc w q` to write and close the message.
 4) You can then push the merged changes to master.
 
-See https://stackoverflow.com/questions/38255655/trying-to-pull-files-from-my-github-repository-refusing-to-merge-unrelated-his for more info.
+See <https://stackoverflow.com/questions/38255655/trying-to-pull-files-from-my-github-repository-refusing-to-merge-unrelated-his> for more info.