Skip to content

Commit

Permalink
Update to g3d styling
Browse files Browse the repository at this point in the history
  • Loading branch information
conordavidson committed Aug 16, 2024
1 parent d6e0ecb commit a267136
Show file tree
Hide file tree
Showing 16 changed files with 1,961 additions and 193 deletions.
2 changes: 1 addition & 1 deletion PROFIT_SHARE_CALCULATOR/app/components/metrics-drawer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['metrics-drawer', 'px3'],
classNames: ['metrics-drawer'],
classNameBindings: ['open'],
actions: {
setNumeric(label, value) {
Expand Down
79 changes: 54 additions & 25 deletions PROFIT_SHARE_CALCULATOR/app/styles/app.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
:root {
--light-gray: #F4F4F4;
--medium-gray: #C8C8C8;
--dark-gray: #3B3B3B;
--dark-navy: #173963;
--text-color: #eddb35;
--background-color: rgb(19, 20, 27);
--card-background: rgb(29, 25, 37);
--card-background-active: rgb(36, 31, 46);
--outline: #474034;
}

::selection {
background: var(--dark-navy); /* WebKit/Blink Browsers */
color: white;
.mt6 {
margin-top: 6rem;
}

.mt7 {
margin-top: 7rem;
}

.mt8 {
margin-top: 8rem;
}
::-moz-selection {
background: var(--dark-navy); /* Gecko Browsers */
color: white;

::selection {
background: #3b3544;
}

[data-ember-action] {
cursor: pointer;
}

.hover-glow {
transition: 120ms ease-in-out;
&:hover { opacity: 0.4; }
&:hover {
box-shadow: 0px 0 9px -1px #ada132f0;
}
}

.hover-fade {
transition: 120ms ease-in-out;
&:hover {
opacity: 0.6;
}
}

.brick {
Expand All @@ -35,9 +55,8 @@
}
&.active {
.inner {
background-color: var(--dark-navy);
border-color: var(--dark-navy);
h3, p { color: white; }
background-color: var(--card-background-active);
box-shadow: 0 0 4px #eddb3546;
}
}
}
Expand Down Expand Up @@ -69,8 +88,8 @@ input.inline {
display: block;
font-size: 1.17em;
font-weight: bold;
color: var(--dark-gray);
font-family: "Atlas Grotesk", sans-serif;
color: var(--text-color);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
outline: none;
background-color: transparent;
border-style: solid;
Expand All @@ -83,6 +102,17 @@ input.inline {
color: var(--dark-navy);
}

input {
background-color: transparent;
color: var(--text-color);
padding: 0.5rem 0;
font-weight: 300;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

label.metric-input {
text-align: right;
Expand Down Expand Up @@ -113,18 +143,17 @@ label.metric-input {

.metrics-bar-trigger {
cursor: pointer;
font-family: "Atlas Grotesk", sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.75rem;
font-size: 1rem;
position: fixed;
z-index: 3;
top: 110px;
left: 32px;
background-color: var(--dark-navy);
color: white;
padding: 10px;
top: 100px;
left: 1rem;
background-color: var(--card-background);
padding: 16px 22px;
border-radius: 999px;
box-shadow: 0 0 8px #eddb3570;
}

@import 'global/fonts';
Expand Down
18 changes: 13 additions & 5 deletions PROFIT_SHARE_CALCULATOR/app/styles/components/_metrics-drawer.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
.metrics-drawer {
z-index: 2;
position: fixed;
background-color: white;
box-shadow: 0 0 15px 1px #2f2f2f;
background-color: var(--background-color);
box-shadow: 0 0 4px #eddb3546;
left: 0;
width: 280px;
max-width: 90%;
width: 100vw;
max-width: 500px;
height: 100%;
padding-top: 150px;
padding-top: 170px;
transform: translateX(-100%);
transition: transform 180ms cubic-bezier(0.455, 0.030, 0.515, 0.955);

&.open {
transform: translateX(0%);
}
}

.metrics-drawer-inner {
padding: 0 1rem;

@media screen and (min-width: 48rem) {
padding: 0 2rem;
}
}
6 changes: 3 additions & 3 deletions PROFIT_SHARE_CALCULATOR/app/styles/components/_nav-bar.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.nav-bar {
position: fixed;
background-color: white;
color: #eddb35;
width: 100%;
height: 80px;
box-shadow: 0 0 15px 1px #2f2f2f;
height: 110px;
z-index: 3;
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, #1d1126 80%, #1d1126 100%);

.title {
margin-left: auto;
Expand Down
2 changes: 1 addition & 1 deletion PROFIT_SHARE_CALCULATOR/app/styles/global/_colors.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.border-medium-gray {
border: 1px solid var(--medium-gray);
border: 1px solid var(--outline);
}

.bg-dark-navy {
Expand Down
23 changes: 16 additions & 7 deletions PROFIT_SHARE_CALCULATOR/app/styles/global/_elements.scss
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
html {
color-scheme: dark !important;
-webkit-font-smoothing: antialiased;
background-color: var(--background-color);
color: var(--text-color);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, label, input {
color: var(--dark-gray);
font-family: "Atlas Grotesk", sans-serif;
&.lighter { font-weight: lighter; }
}
.lighter { font-weight: 400; }

h1 { font-size: 3em; }
a { color: var(--dark-navy); }
a { color: var(--text-color); }
p { &.line-height { line-height: 1.75em; } }

hr {
border-bottom: 0;
border-style: solid;
border-color: var(--medium-gray);
border-color: var(--outline);
box-shadow: 0 0 4px #eddb3546;
}

a {
transition: all 150ms ease-in-out;
}

a:hover {
text-shadow: 0 0 8px var(--text-color);
}
54 changes: 2 additions & 52 deletions PROFIT_SHARE_CALCULATOR/app/styles/global/_fonts.scss
Original file line number Diff line number Diff line change
@@ -1,58 +1,8 @@
.serif {
font-family: "Austin News Deck", serif;
&.lighter { font-weight: lighter; }
&.lighter { font-weight: 400; }
&.lightest { font-weight: 200; }
}

.caps {
letter-spacing: 0.1em !important;
}

@font-face {
font-family: 'Austin News Deck';
src: url('AustinNewsDeck-Light-Web.eot');
src: local('Austin News Deck'), local('Austin News Deck Light'),
url('/fonts/AustinNewsDeck-Light-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/AustinNewsDeck-Light-Web.woff2') format('woff2'),
url('/fonts/AustinNewsDeck-Light-Web.woff') format('woff'),
url('/fonts/AustinNewsDeck-Light-Web.ttf') format('truetype'),
url('/fonts/AustinNewsDeck-Light-Web.svg#Calibre-Black') format('svg');
font-weight: lighter;
font-style: normal;
}

@font-face {
font-family: 'Austin News Deck';
src: url('AustinNewsDeck-Roman-Web.eot');
src: local('Austin News Deck'), local('Austin News Deck Roman'),
url('/fonts/AustinNewsDeck-Roman-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/AustinNewsDeck-Roman-Web.woff2') format('woff2'),
url('/fonts/AustinNewsDeck-Roman-Web.woff') format('woff'),
url('/fonts/AustinNewsDeck-Roman-Web.ttf') format('truetype'),
url('/fonts/AustinNewsDeck-Roman-Web.svg#Calibre-Black') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Atlas Grotesk';
src: url('/fonts/AtlasGroteskRegular.eot');
src: url('/fonts/AtlasGroteskRegular.eot') format('embedded-opentype'),
url('/fonts/AtlasGroteskRegular.woff2') format('woff2'),
url('/fonts/AtlasGroteskRegular.woff') format('woff'),
url('/fonts/AtlasGroteskRegular.ttf') format('truetype'),
url('/fonts/AtlasGroteskRegular.svg#AtlasGroteskRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Atlas Grotesk';
src: url('/fonts/AtlasGroteskLight.eot');
src: url('/fonts/AtlasGroteskLight.eot') format('embedded-opentype'),
url('/fonts/AtlasGroteskLight.woff2') format('woff2'),
url('/fonts/AtlasGroteskLight.woff') format('woff'),
url('/fonts/AtlasGroteskLight.ttf') format('truetype'),
url('/fonts/AtlasGroteskLight.svg#AtlasGroteskLight') format('svg');
font-weight: lighter;
font-style: normal;
}
12 changes: 6 additions & 6 deletions PROFIT_SHARE_CALCULATOR/app/styles/overrides/_ember-notify.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.ember-notify-default .ember-notify {
font-family: "Atlas Grotesk", sans-serif;
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0;
font-size: 16px;
line-height: 20px;
padding: 18px;
box-shadow: 0 0 4px #eddb3546;

&.success { background-color: var(--dark-navy) }
&.info { background-color: var(--dark-navy) }
&.warning { background-color: var(--dark-navy) }
&.error { background-color: var(--dark-navy) }
&.success { background-color: var(--card-background) }
&.info { background-color: var(--card-background) }
&.warning { background-color: var(--card-background) }
&.error { background-color: var(--card-background) }
}

30 changes: 15 additions & 15 deletions PROFIT_SHARE_CALCULATOR/app/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{nav-bar}}

<div class='metrics-bar-trigger' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
<div class='metrics-bar-trigger hover-glow' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
{{#if metricsDrawerOpen}}
Close
{{else}}
Expand All @@ -26,14 +26,14 @@
</p>

<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.MOCK studio.mode) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
<h3 class='serif lighter'>Mock Mode</h3>
<p>Play with the calculator to understand how it works!</p>
</div>
</div>

<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.REAL studio.mode) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.REAL)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.REAL)}}>
<h3 class='serif lighter'>Real World Mode</h3>
<p>Actually calculate profit share at the end of the year</p>
</div>
Expand Down Expand Up @@ -67,7 +67,7 @@
</p>
{{#each studio.scenarios as |scenario|}}
<div class='brick col col-12 sm-col-6 py1 center {{if (eq scenario studio.selectedScenario) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'applyScenario' scenario)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'applyScenario' scenario)}}>
<h3 class='serif lighter'>{{scenario.title}}</h3>
<p>{{scenario.description}}</p>
</div>
Expand All @@ -90,14 +90,14 @@
{{#each studio.technologists as |technologist|}}
<div class='technologist col col-12'>
<div class='inner py1 clearfix flex'>
<div class='col col-2 flex items-center'>
<div class='col col-2 flex items-center pr1'>
{{#if (eq editing technologist)}}
{{input value=technologist.name class='inline py1'}}
{{else}}
<h3>{{technologist.name}}</h3>
{{/if}}
</div>
<div class='months col col-4 center flex items-center'>
<div class='months col col-4 center flex items-center pr1'>
{{#if (eq editing technologist)}}
<input
value={{technologist.monthsAtSanctu}}
Expand All @@ -109,7 +109,7 @@
<h3>{{technologist.monthsAtSanctu}} Months / PSU</h3>
{{/if}}
</div>
<div class='salary col col-3 sm-col-4 center flex items-center'>
<div class='salary col col-3 sm-col-4 center flex items-center pr1'>
{{#if (eq editing technologist)}}
<input
value={{technologist.salary}}
Expand All @@ -121,19 +121,19 @@
<h3>{{format-money technologist.salary}}</h3>
{{/if}}
</div>
<div class='profit col col-3 sm-col-4 flex items-center'>
<div class='profit col col-3 sm-col-4 flex items-center pr1'>
<h3 class='dark-navy'>{{format-money technologist.profitShare}}</h3>
</div>

<div class='col col-1 caps center xs-hide'>
<div class='col col-1 center xs-hide hover-fade'>
{{#if (eq editing technologist)}}
<h6 {{action (route-action 'stopEditingTeamMember')}}>OK</h6>
<h5 {{action (route-action 'stopEditingTeamMember')}}>OK</h5>
{{else}}
<h6 {{action (route-action 'editTeamMember' technologist)}}>Edit</h6>
<h5 {{action (route-action 'editTeamMember' technologist)}}>Edit</h5>
{{/if}}
</div>
<div class='col col-1 caps right-align xs-hide'>
<h6 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h6>
<div class='col col-1 right-align xs-hide hover-fade'>
<h5 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h5>
</div>
</div>
</div>
Expand All @@ -145,8 +145,8 @@
</div>
{{/each}}
<div class='col col-12 center py1 xs-hide' {{action (route-action 'addTeamMember')}}>
<div class='border-medium-gray inner py1 px3 clearfix center'>
<h3 class='white'>+ Add Team Member</h3>
<div class='border-medium-gray inner py1 px3 clearfix center hover-glow'>
<h3>+ Add Team Member</h3>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit a267136

Please sign in to comment.