For this customization to work, need to add more partial scss files as above
$addColors: (
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
)
$colors: map-merge($colors, $addColors)
Otherwise it failed in my sass build
* Addition of Sass Color Map to Customize Page
Added verbiage to Customization page to demonstrate how to add new colors to the color map.
Using this methodology allows for the dev to use `<i class="fa fa-github has-text-github"></i>` or use `is-github` in a class for a background.
* Change map-merge of $color to only merge once, Sass Complience
- Changed map-merge of $color to import from another map rather than adding each line individually.
- Made it Sass Compliant
Updating based on #1394 comments from @jgthms
* Replace variables.json with colors.json and update related files accordingly
* Add variables data files
* Update variables include template and all related files to use new variables data
* Fix mobile breakpoint id typo in responsivness docs page
* Fix Liquid syntax error in made-with-bulma docs page
* Update bulma sass files count in modular docs page
* Use breakpoints data in responsiveness helpers docs page
* Use breakpoints and variables data in typography helpers docs page
* Add missing page titles in docs pages front matter
* Add breakpoints variables in responsivness docs page
* Update breakpoints list values by looping through page.breakpoints
* Add link to responsiveness variables repo file
* Add mixins variables in responsivness docs page
* Update mixins list values by looping through page.mixins
* Add link to responsiveness mixins repo file
* Update responsivness demo table header
* Add responsivness variables reference table
* Add variables to repo files urls (dry)
* Add breakpoints as jekyll data
* Use responsiveness breakpoints from jekyll data
* Replace breakpoints.yml with breakpoints.json and update relevant code accordingly
* Update URLs to source files in responsiveness docs page
The card needs more enhancements but I need more help to determine the perfect solution for it.
the issue we face is:
- the markup needs to change and when to change the markup the style needs to change to be suitable for it.
example:
`
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
`
should be:
`
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
<button class="card-footer-item">Save</button>
<button class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
`
when I do that the style change and when I use the `button` class name the style change also, so you need to try it and edit the style as you need to card show to people.
- I replaced the <small> with <time> but the time does not have the same `font-size` so you maybe need to set `font-size` to time
