diff --git a/assets/font/IndieFlower-Regular.ttf b/assets/font/IndieFlower-Regular.ttf new file mode 100644 index 0000000..1070aac Binary files /dev/null and b/assets/font/IndieFlower-Regular.ttf differ diff --git a/assets/font/IndieFlower-Regular.woff b/assets/font/IndieFlower-Regular.woff new file mode 100644 index 0000000..e520518 Binary files /dev/null and b/assets/font/IndieFlower-Regular.woff differ diff --git a/assets/font/IndieFlower-Regular.woff2 b/assets/font/IndieFlower-Regular.woff2 new file mode 100644 index 0000000..d2aafe4 Binary files /dev/null and b/assets/font/IndieFlower-Regular.woff2 differ diff --git a/src/components/create-or-join/CreateOrJoin.jsx b/src/components/create-or-join/CreateOrJoin.jsx index 7a6facf..471f5d8 100644 --- a/src/components/create-or-join/CreateOrJoin.jsx +++ b/src/components/create-or-join/CreateOrJoin.jsx @@ -34,6 +34,7 @@ class CreateOrJoin extends React.Component { render() { return ( +
text
diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx index 6924343..9af29bb 100644 --- a/src/components/farm/Board.jsx +++ b/src/components/farm/Board.jsx @@ -889,6 +889,9 @@ class Misc extends React.Component {
  • Game source available under the GPLv3+ license.
    • +
  • + IndieFlower font available under the SIL OFLv1.1. Copyright Kimberly Geswein. +
  • Copyright Nick Roach with modifications by Thomas Hintz - License GPL
    • @@ -1964,7 +1967,7 @@ class StartGame extends React.Component {
  • Audit Threshold: ${formatMoney(auditThreshold)}
  • Max Debt: ${formatMoney(maxDebt)}
  • Loan Interest: {loanInterest * 100}%
    • -
  • Required Down Payment: ${formatMoney(downPayment)}
    • +
  • Required Down Payment: {downPayment * 100}%
  • Starting {itemCardShort}: {startingOtbs}
  • Starting Cash: ${formatMoney(startingCash)}
  • Starting Debt: ${formatMoney(startingDebt)}
    • diff --git a/src/style.scss b/src/style.scss index aea3f75..9fb73ae 100644 --- a/src/style.scss +++ b/src/style.scss @@ -16,6 +16,20 @@ // along with the Alpha Centauri Farming project. If not, see // . +@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'; // Global styles @@ -159,6 +173,8 @@ $tab-margin: 0.3rem; width: 100%; } .space { + font-family: 'IndieFlower-Regular'; + // font-family: 'LibreBaskerville-Regular'; flex-grow: 1; flex-basis: 0; padding: 3px; @@ -169,6 +185,7 @@ $tab-margin: 0.3rem; font-size: 4px; } @include breakpoint(large) { font-size: 14px; } + text-shadow: 0px 0px 2px black; } .space-description { @@ -454,21 +471,107 @@ $trade-margin: 3rem; .space-type-hay { 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 { 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 { 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 { 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 { 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 { 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 { text-align: center; font-style: italic; } @@ -953,3 +1056,8 @@ $intro-time: 6s; ul { margin-left: 0; list-style-type: none; } + +.font-preloader { + font-family: 'IndieFlower-Regular'; + width: 0; + height: 0; } diff --git a/webpack.common.js b/webpack.common.js index 9aace77..533cb20 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -93,12 +93,19 @@ module.exports = { // }, // }, { - test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif)$/, + test: /\.(svg|png|gif)$/, loader: 'file-loader', options: { 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, exclude: /(node_modules|bower_components)/,