From 51a4c5bfbacfd24b3a2cc17369c49f90634fc3ad Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Fri, 3 May 2019 23:28:50 -0400 Subject: [PATCH] cleanup --- src/components/App/index.css | 1 + src/components/App/index.js | 28 +++++++-------- src/components/Footer/index.css | 10 ++---- src/components/Skill/index.css | 28 +++++++++------ src/components/VaultHunter/index.css | 53 +++++++++++++++++++++------- src/components/VaultHunter/index.js | 26 +++++++------- src/index.css | 17 +++++++-- src/index.html | 3 +- src/index.js | 20 +++++------ 9 files changed, 113 insertions(+), 73 deletions(-) diff --git a/src/components/App/index.css b/src/components/App/index.css index e1118e6..790b6f2 100644 --- a/src/components/App/index.css +++ b/src/components/App/index.css @@ -1,3 +1,4 @@ main { padding: 1rem 1rem 3rem; + margin: auto; } diff --git a/src/components/App/index.js b/src/components/App/index.js index 55b17d2..93c1f9d 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -9,19 +9,17 @@ import Siren from '@pages/Siren'; // import style from './index.css'; -export default function App () { - return ( -
-
- ); -} +export default App; diff --git a/src/components/Footer/index.css b/src/components/Footer/index.css index 2a2d2db..ebf2382 100644 --- a/src/components/Footer/index.css +++ b/src/components/Footer/index.css @@ -1,8 +1,4 @@ .footer { - position: absolute; - bottom: 0; - right: 0; - width: 100%; font-family: var(--font-header); justify-content: center; align-items: center; @@ -20,11 +16,11 @@ } .heart { - width: 40px; - height: 40px; + width: 2em; + height: 2em; background: transparent url(@assets/twitter_heart.png) no-repeat; background-size: 2900%; - margin: 0 -8px; + margin: 0 -0.4em; } .heart:hover { diff --git a/src/components/Skill/index.css b/src/components/Skill/index.css index 6278703..a962ab0 100644 --- a/src/components/Skill/index.css +++ b/src/components/Skill/index.css @@ -11,27 +11,31 @@ text-align: center; justify-content: center; align-items: center; - color: white; - filter: brightness(50%); -} - -.skill.enabled { - filter: brightness(100%); } .skill:before { content: ''; - background-color: #333; + background-image: linear-gradient(to bottom, #333, #555); position: absolute; bottom: 0; right: 0; height: 100%; width: 100%; z-index: -1; + clip-path: polygon(0 15%, 15% 0, 100% 0, 100% 85%, 85% 100%, 0% 100%); + filter: brightness(50%); } -.skill.usable:before { - background-color: #A70; +.skill.enabled:before { + filter: brightness(100%); +} + +.usable:before { + background-image: linear-gradient(to bottom, hsl(var(--themeHue),91%,50%), hsl(var(--themeHue),91%,30%)); +} +.skill:hover:before { + background-image: linear-gradient(to bottom, hsl(30,100%,30%), hsl(30,100%,60%)); + filter: brightness(100%); } .actionSkill:before { @@ -60,17 +64,19 @@ .augment:first-child { position: absolute; - left: 0; + right: 100%; } .augment:last-child { position: absolute; - right: 0; + left: 100%; } .augment:only-child { position: relative; background-color: transparent; outline: none; + left: initial; + right: initial; } .ranks { diff --git a/src/components/VaultHunter/index.css b/src/components/VaultHunter/index.css index 864d43b..9d45e4b 100644 --- a/src/components/VaultHunter/index.css +++ b/src/components/VaultHunter/index.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; align-items: center; + cursor: default; } .trees, .tier { @@ -10,35 +11,61 @@ .treeName { text-align: center; - color: white; order: 1; font-size: 1em; - line-height: 1rem; + line-height: 1.5rem; } .tree { + --themeColor: hsl(var(--themeHue),91%,22%); display: flex; flex-direction: column; margin: 1rem; - background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), - linear-gradient(0deg, var(--themeColor), var(--themeColor)); - background-size: calc(3.5rem * 3) calc((25 - var(--invested)) / 5 * 3.5rem + 1rem), calc(3.5rem * 3) calc(100% - 1.5rem); - background-repeat: no-repeat, no-repeat; - background-position: center bottom, center bottom; + padding: 0 3.5rem; + background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor)); + background-size: 100% calc(100% - 1.5rem); + background-repeat: no-repeat; + background-position: center bottom; + background-clip: content-box; + color: rgba(255,255,255,0.8); +} + +.skills { + position: relative; + user-select: none; +} + +.skills:before { + --gradientStop: calc((var(--invested) + 5) * 3.5rem / 5 + 1.65rem); + content: ''; + position: absolute; + top: 1.85rem; + bottom: 0; + left: 0.375rem; + right: 0.375rem; + background-image: linear-gradient( + to bottom, + hsla(0,0%,60%,1) calc(var(--gradientStop) - 1rem), + hsla(0,0%,90%,1) var(--gradientStop), + hsla(0,0%,25%,1) calc(var(--gradientStop) + 0.1px), + hsla(0,0%,40%,1) 120% + ); + mix-blend-mode: overlay; + border: 0.15rem solid hsla(0,0%,0%,0.8); } .tier { - width: calc(3.5rem * 5); + width: calc(3.5rem * 3 + 0.5em); justify-content: center; position: relative; } +.green { + --themeHue: 106; +} .blue { - --themeColor: #007; + --themeHue: 207; } .red { - --themeColor: #700; -} -.green { - --themeColor: #070; + --themeHue: 18; } diff --git a/src/components/VaultHunter/index.js b/src/components/VaultHunter/index.js index f3aad1c..357f32c 100644 --- a/src/components/VaultHunter/index.js +++ b/src/components/VaultHunter/index.js @@ -3,7 +3,7 @@ import Skill from '@components/Skill'; import style from './index.css'; const initialState = { - invested: [12, 0, 20], + invested: [4, 5, 6], }; export default function VaultHunter ({ @@ -19,17 +19,19 @@ export default function VaultHunter ({ style={{ '--invested': build.invested[treeindex] }} >

{ treename }

- { Object.keys(skills[treename]).map((tier, tierindex) => -
- { Object.keys(skills[treename][tier]).map( - skillname => = 5 * tierindex - 5} - /> - ) } -
- ) } +
+ { Object.keys(skills[treename]).map((tier, tierindex) => +
+ { Object.keys(skills[treename][tier]).map( + skillname => = 5 * tierindex - 5} + /> + ) } +
+ ) } +
); diff --git a/src/index.css b/src/index.css index 882b2fe..19dd72b 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,14 @@ --offwhite: #F8F8FA; --transition-duration: 300ms; --font-header: sans-serif; - --font-list: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --font-list: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.5vw; +} + +@media screen and (min-width: 189vh) { + :root { + font-size: 2.835vh; + } } * { @@ -20,11 +27,15 @@ } body { - color: #333; position: relative; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + color: #333; font-family: var(--font-list); -webkit-font-smoothing: antialiased; - min-height: 100vh; } a { diff --git a/src/index.html b/src/index.html index 39470ad..cf2f7b1 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,6 @@ - -
+ diff --git a/src/index.js b/src/index.js index b89ce55..826f3e3 100644 --- a/src/index.js +++ b/src/index.js @@ -3,17 +3,17 @@ import App from '@components/App'; import './index.css'; let elem = document.querySelector('#app'); -let root = render(, elem, elem.firstElementChild); +let root = render(, elem, elem.firstElementChild); if (process.env.NODE_ENV === 'development' && module.hot) { - // enable preact devtools - require('preact/debug'); - // respond to HMR updates - module.hot.accept('@components/App', New => { - New = require('@components/App').default; - root = render(, elem, root); - }); + // enable preact devtools + require('preact/debug'); + // respond to HMR updates + module.hot.accept('@components/App', New => { + New = require('@components/App').default; + root = render(, elem, root); + }); } else if (process.env.NODE_ENV === 'production') { - // Service Worker registration - require('offline-plugin/runtime').install(); + // Service Worker registration + require('offline-plugin/runtime').install(); }