globalStyles js -> css
This commit is contained in:
Eric Jinks
parent
ce83fd78a5
commit
9987db1956
4 changed files with 256 additions and 98 deletions
|
|
@ -11,7 +11,6 @@ import NoMatch from './views/NoMatch'
|
|||
import Nav from './components/Nav'
|
||||
import GithubCorner from './components/GithubCorner'
|
||||
import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
|
||||
import globalStyles from './globalStyles'
|
||||
import data from './data.json'
|
||||
|
||||
class App extends Component {
|
||||
|
|
@ -19,10 +18,6 @@ class App extends Component {
|
|||
data
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
globalStyles()
|
||||
}
|
||||
|
||||
getDocument = (collection, name) =>
|
||||
this.state.data[collection] &&
|
||||
this.state.data[collection].filter(page => page.name === name)[0]
|
||||
|
|
|
|||
254
src/globalStyles.css
Normal file
254
src/globalStyles.css
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
:root {
|
||||
--primary: #ff3d3d;
|
||||
--secondary: #212121;
|
||||
--lightGrey: whitesmoke;
|
||||
--midGrey: #cacaca;
|
||||
--font-primary: 'Open Sans', sans-serif;
|
||||
--font-system: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
|
||||
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
min-height: 100%;
|
||||
background: var(--lightGrey);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-system);
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
background: white;
|
||||
color: var(--secondary);
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--lightGrey);
|
||||
line-height: 1.45;
|
||||
font-size: 85%;
|
||||
border-radius: 3px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 85%;
|
||||
padding: 0.15em 0;
|
||||
background: var(--lightGrey);
|
||||
border-radius: 3px;
|
||||
}
|
||||
code:before,
|
||||
code:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: '\00a0';
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
}
|
||||
pre code:before,
|
||||
pre code:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.light {
|
||||
background-color: var(--lightGrey);
|
||||
}
|
||||
.white {
|
||||
background-color: white;
|
||||
}
|
||||
.dark {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
.dark h1,
|
||||
.dark h2,
|
||||
.dark h3,
|
||||
.dark h4,
|
||||
.dark h5,
|
||||
.dark h6 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.taCenter {
|
||||
text-align: center;
|
||||
}
|
||||
.taLeft {
|
||||
text-align: left;
|
||||
}
|
||||
.taRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.Section {
|
||||
width: 100%;
|
||||
padding: 5rem 0;
|
||||
}
|
||||
.Section.thick {
|
||||
padding: 10rem 0;
|
||||
}
|
||||
.Section.thin {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
.Section.noPadding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Container {
|
||||
max-width: 1467px;
|
||||
width: 90vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.Container.skinny {
|
||||
max-width: 888px;
|
||||
}
|
||||
.Container.skinnier {
|
||||
max-width: 555px;
|
||||
}
|
||||
|
||||
/* Flex */
|
||||
|
||||
.Flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.Flex.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.Flex.justifyCenter {
|
||||
justify-content: center;
|
||||
}
|
||||
.Flex.justifyEnd {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.Flex.justifyBetween {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.Flex.justifyAround {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.Flex.alignStart {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.Flex.alignEnd {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.Flex.alignStretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.Flex.fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.Button {
|
||||
border-radius: none;
|
||||
display: inline-block;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid;
|
||||
border-radius: 0.1rem;
|
||||
border-color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
max-width: 35rem;
|
||||
}
|
||||
.Button:hover,
|
||||
.Button:focus {
|
||||
background: white;
|
||||
border-color: currentColor;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
.Button[disabled] {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
cursor: progress;
|
||||
}
|
||||
.Button.Button--tertiary {
|
||||
background: var(--tertiary);
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
.Button.Button--tertiary:hover,
|
||||
.Button.Button--tertiary:focus {
|
||||
background: transparent;
|
||||
border-color: currentColor;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
.Button.Button--inverted {
|
||||
background: white;
|
||||
border-color: white;
|
||||
color: var(--tertiary);
|
||||
}
|
||||
.Button.Button--inverted:hover,
|
||||
.Button.Button--inverted:focus {
|
||||
background: transparent;
|
||||
border-color: currentColor;
|
||||
color: white;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0)),
|
||||
linear-gradient(
|
||||
-32deg,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.05) 50%,
|
||||
rgba(255, 255, 255, 0) 50%,
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { injectGlobal } from 'styled-components'
|
||||
import { normalize } from 'polished'
|
||||
|
||||
export const font = {
|
||||
primary: `'Open Sans', sans-serif`,
|
||||
system: `-apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif`
|
||||
}
|
||||
|
||||
export const color = {
|
||||
primary: '#ff3d3d',
|
||||
secondary: '#212121',
|
||||
lightGrey: 'whitesmoke'
|
||||
}
|
||||
|
||||
export default () => injectGlobal`
|
||||
${normalize()}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
background: ${color.lightGrey};
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ${font.system};
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: white;
|
||||
color: ${color.secondary};
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .01em;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${color.primary};
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 ,h6{
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: ${color.lightGrey};
|
||||
line-height: 1.45;
|
||||
font-size: 85%;
|
||||
border-radius: 3px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 85%;
|
||||
padding: 0.15em 0;
|
||||
background: ${color.lightGrey};
|
||||
border-radius: 3px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
pre & {
|
||||
font-size: inherit;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -5,6 +5,8 @@ import App from './App'
|
|||
import registerServiceWorker from './registerServiceWorker'
|
||||
import './netlifyIdentity'
|
||||
import 'normalize.css'
|
||||
import './globalStyles.css'
|
||||
|
||||
const rootEl = document.getElementById('root')
|
||||
render(<App />, rootEl)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue