Fixing fonts
This commit is contained in:
parent
1af66477d3
commit
4953ae36ea
@ -71,6 +71,15 @@ module.exports = {
|
||||
loader: [
|
||||
'url-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'file-loader',
|
||||
include: [
|
||||
FRONTEND,
|
||||
UI
|
||||
]
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
@ -1,10 +1,27 @@
|
||||
const Styled = require('styled-components');
|
||||
const fncs = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
generateFonts
|
||||
} = fncs;
|
||||
|
||||
const {
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
// The name that will be used in the 'font-family' property
|
||||
const fontFamilies = [
|
||||
'LibreFranklin'
|
||||
];
|
||||
|
||||
// The name the font file without the extension
|
||||
const fontFilenames = [
|
||||
'librefranklin-webfont'
|
||||
];
|
||||
|
||||
module.exports = css`
|
||||
${generateFonts(fontFamilies, fontFilenames)}
|
||||
|
||||
html, body {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
|
@ -15,25 +15,11 @@ const {
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
generateFonts,
|
||||
remcalc
|
||||
} = fncs;
|
||||
|
||||
// The name that will be used in the 'font-family' property
|
||||
const fontFamilies = [
|
||||
'LibreFranklin'
|
||||
];
|
||||
|
||||
// The name the font file without the extension
|
||||
const fontFilenames = [
|
||||
'librefranklin-webfont'
|
||||
];
|
||||
|
||||
module.exports = styled.div`
|
||||
${generateFonts(fontFamilies, fontFilenames)};
|
||||
|
||||
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: ${colors.fonts.regular};
|
||||
|
@ -1,23 +1,34 @@
|
||||
const fns = require('../../shared/functions');
|
||||
const constants = require('../../shared/constants');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
module.exports = styled.li`
|
||||
display: inline-block;
|
||||
margin-right: ${remcalc(10)};
|
||||
margin-right: ${remcalc(64)};
|
||||
padding-top: ${remcalc(10)};
|
||||
padding-bottom: ${remcalc(10)};
|
||||
|
||||
& a.active {
|
||||
cursor: default;
|
||||
color: #373A3C;
|
||||
& a {
|
||||
color: ${colors.fonts.regular};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& a.active {
|
||||
cursor: default;
|
||||
color: ${colors.brandPrimaryLink};
|
||||
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
|
||||
padding-bottom: ${remcalc(6)};
|
||||
}
|
||||
`;
|
||||
|
38
ui/src/components/horizontal-list/story.js
Normal file
38
ui/src/components/horizontal-list/story.js
Normal file
@ -0,0 +1,38 @@
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base= require('../base');
|
||||
const Li = require('./li');
|
||||
const Ul = require('./ul');
|
||||
|
||||
storiesOf('Unordered List', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Ul>
|
||||
<Li>
|
||||
<a className="active" href="">
|
||||
<span>
|
||||
One
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
<Li>
|
||||
<a href="">
|
||||
<span>
|
||||
Two
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
<Li>
|
||||
<a href="">
|
||||
<span>
|
||||
Three
|
||||
</span>
|
||||
</a>
|
||||
</Li>
|
||||
</Ul>
|
||||
</Base>
|
||||
));
|
@ -81,7 +81,7 @@ const StyledSVGContainer = styled.svg`
|
||||
}
|
||||
|
||||
.health, .health_warn {
|
||||
font-family: "Libre Franklin";
|
||||
font-family: "LibreFranklin";
|
||||
font-size: ${remcalc(12)};
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
@ -94,7 +94,7 @@ const StyledSVGContainer = styled.svg`
|
||||
}
|
||||
|
||||
.stat {
|
||||
font-family: "Libre Franklin";
|
||||
font-family: "LibreFranklin";
|
||||
font-size: ${remcalc(12)};
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@ -103,7 +103,7 @@ const StyledSVGContainer = styled.svg`
|
||||
}
|
||||
|
||||
.node_statistics {
|
||||
font-family: "Libre Franklin";
|
||||
font-family: "LibreFranklin";
|
||||
font-size: ${remcalc(12)};
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@ -117,7 +117,7 @@ const StyledSVGContainer = styled.svg`
|
||||
}
|
||||
|
||||
.primary, .secondary {
|
||||
font-family: "Libre Franklin";
|
||||
font-family: "LibreFranklin";
|
||||
font-size: ${remcalc(12)};
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@ -126,7 +126,7 @@ const StyledSVGContainer = styled.svg`
|
||||
}
|
||||
|
||||
.info_text {
|
||||
font-family: "Libre Franklin";
|
||||
font-family: "LibreFranklin";
|
||||
font-size: ${remcalc(16)};
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
|
@ -11,7 +11,8 @@ const brandPrimary = {
|
||||
borderPrimaryDark: '#2531BC',
|
||||
borderPrimaryDarkest: '#062BA0',
|
||||
brandPrimaryColor: '#FFFFFF',
|
||||
brandPrimaryLink: '#364acd'
|
||||
brandPrimaryLink: '#364ACD',
|
||||
brandPrimaryLinkUnderline: '#3B47CC'
|
||||
};
|
||||
|
||||
const brandSecondary = {
|
||||
@ -22,7 +23,8 @@ const brandSecondary = {
|
||||
borderSecondaryDark: '#D8D8D8',
|
||||
borderSecondaryDarkest: '#D8D8D8',
|
||||
brandSecondaryColor: '#464646',
|
||||
brandSecondaryLink: '#ffffff'
|
||||
brandSecondaryLink: '#FFFFFF',
|
||||
brandSecondaryLinkUnderline: '#FFFFFF'
|
||||
};
|
||||
|
||||
const brandInactive = {
|
||||
|
@ -15,26 +15,31 @@ const rndId = (_code) => {
|
||||
};
|
||||
|
||||
const generateFonts = (fontFamilies, fontFilenames) => {
|
||||
const pathToFont = '../../shared/fonts/';
|
||||
const pathToFont = './fonts/';
|
||||
let fontCSS = '';
|
||||
|
||||
fontFamilies.forEach( (fontFamily, i) => {
|
||||
const eot = require(`${pathToFont + fontFilenames[i]}.eot`);
|
||||
const woff = require(`${pathToFont + fontFilenames[i]}.woff`);
|
||||
const woff2 = require(`${pathToFont + fontFilenames[i]}.woff2`);
|
||||
const ttf = require(`${pathToFont + fontFilenames[i]}.ttf`);
|
||||
const svg = require(`${pathToFont + fontFilenames[i]}.svg`);
|
||||
fontCSS += `
|
||||
@font-face {
|
||||
font-family: ${fontFamily};
|
||||
src: url(${pathToFont + fontFilenames[i]}.eot);
|
||||
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
|
||||
format('embedded-opentype');
|
||||
src: url(${pathToFont + fontFilenames[i]}.woff)
|
||||
format('woff');
|
||||
src: url(${pathToFont + fontFilenames[i]}.woff2)
|
||||
format('woff2');
|
||||
src: url(${pathToFont + fontFilenames[i]}.ttf)
|
||||
format('truetype');
|
||||
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
|
||||
format('svg');
|
||||
font-family: '${fontFamily}';
|
||||
src: url('${eot}'),
|
||||
url('${eot}?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('${woff}')
|
||||
format('woff'),
|
||||
url('${woff2}')
|
||||
format('woff2'),
|
||||
url('${ttf}')
|
||||
format('truetype'),
|
||||
url('${svg}#${fontFamily}')
|
||||
format('svg')
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
`;
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user