Getting icon loading in the root styles working
This commit is contained in:
parent
2377cb2497
commit
74d622c7a4
@ -34,6 +34,7 @@
|
||||
"style-loader": "^0.20.1",
|
||||
"svg-react-loader": "^0.4.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.8",
|
||||
"url-loader": "^0.6.2",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-server": "^2.11.1",
|
||||
"webpack-merge": "^4.1.1",
|
||||
|
@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
|
||||
import '../style.css';
|
||||
|
||||
import Message from '../components/Message';
|
||||
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
import ErrorIcon from '!svg-react-loader!feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
ReactDOM.render(
|
||||
<Message icon={ ErrorIcon } heading="404 Page Not Found">
|
||||
|
@ -25,7 +25,7 @@ body {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
:global(#main) {
|
||||
#main {
|
||||
background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
|
||||
box-shadow: 0 0 1rem var(--color-black);
|
||||
padding: 0 var(--content-margin);
|
||||
@ -33,7 +33,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:global(#main) h1 {
|
||||
#main h1 {
|
||||
font-family: 'Bangers', 'cursive';
|
||||
font-size: 4rem;
|
||||
font-weight: normal;
|
||||
@ -42,20 +42,20 @@ body {
|
||||
line-height: var(--header-height);
|
||||
}
|
||||
|
||||
:global(#main) a {
|
||||
#main a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:global(#main) ul {
|
||||
#main ul {
|
||||
line-height: var(--header-height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--content-margin);
|
||||
}
|
||||
|
||||
:global(#main) li a:hover,
|
||||
:global(#main) li a:active {
|
||||
#main li a:hover,
|
||||
#main li a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -84,15 +84,28 @@ li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:global(.inline-list) li {
|
||||
.inline-list li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:global(.inline-list) li:after {
|
||||
.inline-list li:after {
|
||||
content: '//';
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
:global(.inline-list) li:last-child:after {
|
||||
.inline-list li:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
[icon] {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: 1em 1em;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
[icon="github"] {
|
||||
background-image: url('~feather-icons/dist/icons/github.svg');
|
||||
}
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/javallone/regexper-static">
|
||||
Source on GitHub
|
||||
<i icon="github"></i>Source on GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
@ -79,31 +79,58 @@ module.exports = {
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: true,
|
||||
modules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
oneOf: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /components/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
minimize: true,
|
||||
sourceMap: true,
|
||||
modules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-react-loader'
|
||||
loader: 'url-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -6547,6 +6547,14 @@ url-join@^2.0.2:
|
||||
version "2.0.5"
|
||||
resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
|
||||
|
||||
url-loader@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
|
||||
dependencies:
|
||||
loader-utils "^1.0.2"
|
||||
mime "^1.4.1"
|
||||
schema-utils "^0.3.0"
|
||||
|
||||
url-parse@1.0.x:
|
||||
version "1.0.5"
|
||||
resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
|
||||
|
Loading…
Reference in New Issue
Block a user