tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling improvements.

Browse Source
This commit is contained in:
Thomas Hintz
2020-04-23 19:52:12 -07:00
parent f43d9e5d19
commit a5c13d40eb
7 changed files with 121 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/style.scss
View File

@@ -16,6 +16,20 @@
// along with the Alpha Centauri Farming project. If not, see
// <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';
// 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; }