Website styles, replace postcss-svg with postcss-inline-svg to fix disappearing svgs

This commit is contained in:
Artur Paikin 2016-05-19 01:12:10 -04:00
parent 03c9fd36b3
commit 4ed2f2ab6c
6 changed files with 14 additions and 21 deletions

View file

@ -121,14 +121,12 @@ node_sass:
postcss:
plugins:
postcss-svg:
debug: false
paths:
- 'src/images'
defaults: "[fill]: #000000"
postcss-inline-svg:
path: 'src/images'
autoprefixer:
browsers:
- 'last 2 versions'
cssnano:
browsersync:
files: 'public/examples/**/*.js'

View file

@ -7,6 +7,7 @@
},
"dependencies": {
"autoprefixer": "6.3.6",
"cssnano": "3.6.2",
"hexo": "3.2.0",
"hexo-browsersync": "0.2.0",
"hexo-deployer-git": "0.1.0",
@ -23,7 +24,7 @@
"hexo-util": "0.5.3",
"js-yaml": "3.5.5",
"mkdirp": "0.5.1",
"postcss-svg": "https://github.com/kvz/postcss-svg#9239b6dd4ab0dc3ef37f41c9cbc0e23d25549c7b",
"postcss-inline-svg": "1.4.0",
"uuid": "2.0.1"
},
"devDependencies": {
@ -40,4 +41,4 @@
"remark": "4.2.0",
"watchify": "3.7.0"
}
}
}

View file

@ -1,10 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="noun_93131_cc" sketch:type="MSLayerGroup" fill="#000000">
<g id="Group" transform="translate(7.451000, 5.800000) scale(-1, -1) translate(-7.451000, -5.800000) translate(0.451000, 0.300000)" sketch:type="MSShapeGroup">
<path d="M8.362,0.8 L13.3117,5.7499 L11.8976,7.164 L8.362,3.6285 L2.0172,10.0116 L0.5839,8.5783 L8.362,0.8 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group" transform="translate(7.451000, 5.800000) scale(-1, -1) translate(-7.451000, -5.800000) translate(0.451000, 0.300000)">
<path d="M8.362,0.8 L13.3117,5.7499 L11.8976,7.164 L8.362,3.6285 L2.0172,10.0116 L0.5839,8.5783 L8.362,0.8 Z" id="Shape"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 794 B

After

Width:  |  Height:  |  Size: 482 B

Before After
Before After

View file

@ -68,7 +68,5 @@
</a>!
</div>
<%- partial('partials/social') %>
</div>
</div>

View file

@ -258,7 +258,7 @@ a.button {
height: 24px;
top: 8px;
left: 12px;
background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
background: svg-load('burger.svg', fill=#{$color-gray}) center center no-repeat;
background-size: 22px;
}
@ -288,7 +288,7 @@ a.button {
border-radius: 15px;
margin-right: 10px;
transition: border-color .2s ease;
background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
background: svg-load('search.svg', fill=#{$color-gray}) 8px 5px no-repeat;
background-size: 18px;
margin-bottom: 10px;

View file

@ -261,7 +261,7 @@
}
li {
background: svg('check.svg', '[fill]: #{$color-white}') left 5px no-repeat;
background: svg-load('check.svg', fill=#{$color-white}) left 5px no-repeat;
background-size: 24px 24px;
padding-left: 40px;
margin-bottom: 0.5em;