Styling improvements.

master
Thomas Hintz 5 years ago
parent f43d9e5d19
commit a5c13d40eb

@ -34,6 +34,7 @@ class CreateOrJoin extends React.Component {
render() { render() {
return ( return (
<Fragment> <Fragment>
<div className="font-preloader">text</div>
<Button size='large' className='shadow' onClick={this.props.showNewGame}> <Button size='large' className='shadow' onClick={this.props.showNewGame}>
New Game New Game
</Button> </Button>

@ -889,6 +889,9 @@ class Misc extends React.Component {
<li> <li>
<a href='https://code.thintz.com/farm'>Game source</a> available under the <a href='https://www.gnu.org/licenses/gpl-3.0-standalone.html'>GPLv3</a>+ license. <a href='https://code.thintz.com/farm'>Game source</a> available under the <a href='https://www.gnu.org/licenses/gpl-3.0-standalone.html'>GPLv3</a>+ license.
</li> </li>
<li>
IndieFlower font available under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web&_sc=1">SIL OFLv1.1</a>. Copyright <a href="http://www.kimberlygeswein.com/">Kimberly Geswein</a>.
</li>
<li> <li>
<img src={TractorFullImg} /> <img src={TractorImg} /> Copyright Nick Roach with modifications by Thomas Hintz - License <a href='GPL http://www.gnu.org/copyleft/gpl.html'>GPL</a> <img src={TractorFullImg} /> <img src={TractorImg} /> Copyright Nick Roach with modifications by Thomas Hintz - License <a href='GPL http://www.gnu.org/copyleft/gpl.html'>GPL</a>
</li> </li>
@ -1964,7 +1967,7 @@ class StartGame extends React.Component {
<li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li> <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
<li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li> <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
<li><b>Loan Interest</b>: {loanInterest * 100}%</li> <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
<li><b>Required Down Payment</b>: ${formatMoney(downPayment)}</li> <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
<li><b>Starting {itemCardShort}</b>: {startingOtbs}</li> <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
<li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li> <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
<li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li> <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>

@ -16,6 +16,20 @@
// along with the Alpha Centauri Farming project. If not, see // along with the Alpha Centauri Farming project. If not, see
// <https://www.gnu.org/licenses/>. // <https://www.gnu.org/licenses/>.
@font-face {
font-family: 'IndieFlower-Regular';
src: url('../assets/font/IndieFlower-Regular.woff2') format('woff2'),
url('../assets/font/IndieFlower-Regular.woff') format('woff'),
url('../assets/font/IndieFlower-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'LibreBaskerville-Regular';
src: url('../assets/font/LibreBaskerville-Regular.woff2') format('woff2'),
url('../assets/font/LibreBaskerville-Regular.woff') format('woff'),
url('../assets/font/LibreBaskerville-Regular.ttf') format('truetype');
}
@import './foundation/foundation'; @import './foundation/foundation';
// Global styles // Global styles
@ -159,6 +173,8 @@ $tab-margin: 0.3rem;
width: 100%; } width: 100%; }
.space { .space {
font-family: 'IndieFlower-Regular';
// font-family: 'LibreBaskerville-Regular';
flex-grow: 1; flex-grow: 1;
flex-basis: 0; flex-basis: 0;
padding: 3px; padding: 3px;
@ -169,6 +185,7 @@ $tab-margin: 0.3rem;
font-size: 4px; } font-size: 4px; }
@include breakpoint(large) { @include breakpoint(large) {
font-size: 14px; } font-size: 14px; }
text-shadow: 0px 0px 2px black;
} }
.space-description { .space-description {
@ -454,21 +471,107 @@ $trade-margin: 3rem;
.space-type-hay { .space-type-hay {
background-color: hsla(120, 100%, 25%, 0.19); } background-color: hsla(120, 100%, 25%, 0.19); }
.space-type-hay::after {
background: url('../assets/img/hay.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
position: absolute;
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
background-size: auto 100%;
top: 0;
left: 0; }
.space-type-cherry { .space-type-cherry {
background-color: hsla(0, 100%, 40%, 0.28); } background-color: hsla(0, 100%, 40%, 0.28); }
.space-type-cherry::after {
background: url('../assets/img/fruit.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
position: absolute;
filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
background-size: auto 50%;
background-position: right;
top: 0;
left: 0; }
.space-type-apple { .space-type-apple {
background-color: hsla(0, 100%, 40%, 0.28); } background-color: hsla(0, 100%, 40%, 0.28); }
.space-type-apple::after {
background: url('../assets/img/fruit.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
position: absolute;
filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
background-size: auto 50%;
background-position: right;
top: 0;
left: 0; }
.space-type-wheat { .space-type-wheat {
background-color: hsla(50, 97%, 48%, 0.22); } background-color: hsla(50, 97%, 48%, 0.22); }
.space-type-wheat::after {
background: url('../assets/img/wheat.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
position: absolute;
filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
background-size: auto 110%;
background-position: right;
top: 0;
left: 0; }
.space-type-corn { .space-type-corn {
background-color: hsla(50, 97%, 48%, 0.22); } background-color: hsla(50, 97%, 48%, 0.22); }
.space-type-corn::after {
background: url('../assets/img/wheat.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
position: absolute;
filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
background-size: auto 110%;
background-position: right;
top: 0;
left: 0; }
.space-type-cows { .space-type-cows {
background-color: hsla(0, 25%, 43%, 0.49); } background-color: hsla(0, 25%, 43%, 0.49); }
.space-type-cows::after {
background: url('../assets/img/cow.svg') repeat;
content: '';
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
position: absolute;
filter: invert(43%) sepia(5%) saturate(4943%) hue-rotate(314deg) brightness(76%) contrast(75%);
background-size: auto 35%;
background-position: right;
top: 0;
left: 0; }
.space-type-buy {
background-color: hsla(240, 100%, 85%, 0.15); }
.space-title { .space-title {
text-align: center; text-align: center;
font-style: italic; } font-style: italic; }
@ -953,3 +1056,8 @@ $intro-time: 6s;
ul { ul {
margin-left: 0; margin-left: 0;
list-style-type: none; } list-style-type: none; }
.font-preloader {
font-family: 'IndieFlower-Regular';
width: 0;
height: 0; }

@ -93,12 +93,19 @@ module.exports = {
// }, // },
// }, // },
{ {
test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif)$/, test: /\.(svg|png|gif)$/,
loader: 'file-loader', loader: 'file-loader',
options: { options: {
name: './assets/img/[name].[contenthash].[ext]', name: './assets/img/[name].[contenthash].[ext]',
}, },
}, },
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
name: './assets/font/[name].[contenthash].[ext]',
},
},
{ {
test: /\.s[ac]ss$/i, test: /\.s[ac]ss$/i,
exclude: /(node_modules|bower_components)/, exclude: /(node_modules|bower_components)/,

Loading…
Cancel
Save