diff --git a/src/App.vue b/src/App.vue
index 6ba09c0..718c4bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -228,12 +228,8 @@ export default class App extends Vue {
font-size: 1rem;
- @include midScreen() {
- font-size: 0.95rem;
- }
-
@include smallScreen() {
- font-size: 0.7rem;
+ font-size: calc(0.35rem + 1vw);
}
}
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 20e704b..63f1c6a 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -99,9 +99,9 @@
-
+
{{ stationInfo.dispatcherName }}
+ {{ stationInfo.dispatcherName }}
.scenery-name {
- font-size: 3em;
font-weight: bold;
color: $accentCol;
+ font-size: 4em;
+
text-transform: uppercase;
}
& > .scenery-hash {
- font-size: 1em;
line-height: 0.8em;
color: #aaa;
+
+ font-size: 1.5em;
}
}
&-stats {
- font-size: 1.3em;
padding: 1rem 0;
display: flex;
justify-content: center;
+ font-size: 1.7em;
+
& > span {
display: flex;
align-items: center;
@@ -286,11 +289,11 @@ h3 {
}
&-brief {
- padding: 1rem 0;
+ padding: 1em 0;
img {
- width: 2.5em;
- margin: 0 0.5rem;
+ width: 3.5em;
+ margin: 0 0.5em;
border: 2px solid #4e4e4e;
border-radius: 0.5em;
@@ -302,28 +305,29 @@ h3 {
align-items: center;
justify-content: center;
- .level {
- display: inline-block;
- margin-right: 0.3em;
- background: firebrick;
-
- border-radius: 0.1em;
-
- width: 1.5em;
- height: 1.5em;
- line-height: 1.5em;
+ .dispatcher {
font-size: 2em;
- font-weight: bold;
+
+ &_level {
+ display: inline-block;
+ margin-right: 0.3em;
+ background: firebrick;
+
+ border-radius: 0.1em;
+
+ width: 1.5em;
+ height: 1.5em;
+ line-height: 1.5em;
+ font-weight: bold;
+ }
+
+ &_name {
+ margin-right: 1em;
+ }
}
- .name {
- font-size: 1.6em;
- margin-right: 1em;
- }
-
- .status {
- font-size: 1em;
- border-radius: 1em;
+ .status-badge {
+ font-size: 1.2em;
}
}
@@ -346,7 +350,6 @@ h3 {
.user,
.spawn {
font-weight: 600;
- font-size: 0.85em;
display: inline-block;
padding: 0;
@@ -359,10 +362,6 @@ h3 {
display: inline-block;
padding: 0.2em 0.4em;
}
-
- @include smallScreen() {
- font-size: 1em;
- }
}
.user {
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index a573791..db50f08 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -226,7 +226,7 @@ h3 {
justify-content: center;
align-items: center;
- font-size: 1.2em;
+ font-size: 1.5em;
img {
width: 1.1em;
@@ -254,6 +254,8 @@ h3 {
.select-box {
display: flex;
justify-content: center;
+
+ font-size: 1.2em;
}
.option {
@@ -341,10 +343,10 @@ h3 {
&-item {
margin: 1em auto;
- font-size: 0.8em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ gap: 0 0.5em;
padding: 0 0.35em;
@@ -393,7 +395,6 @@ h3 {
@include smallScreen() {
width: 100%;
margin: 0.7em 0;
- font-size: 1.8em;
}
}
}
diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue
index 0b61320..5f3d445 100644
--- a/src/components/StationsView/FilterCard.vue
+++ b/src/components/StationsView/FilterCard.vue
@@ -154,10 +154,6 @@ export default class FilterCard extends Vue {
.card {
font-size: 1.25em;
- @include smallScreen() {
- font-size: 1.35em;
- }
-
&-title {
font-size: 2em;
font-weight: 700;
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index e4b4415..6692ad4 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -166,13 +166,11 @@ export default class TrainOptions extends Vue {
background: #333;
border-radius: 0.5em 0.5em 0 0;
- margin-right: 0.5rem;
+ margin-right: 0.35em;
@include smallScreen() {
width: 100%;
- margin: 0.5rem 0;
-
- font-size: 0.85rem;
+ margin: 0.35em 0;
}
}
@@ -221,7 +219,7 @@ export default class TrainOptions extends Vue {
}
label {
- padding: 0.5rem 1rem;
+ padding: 0.5em 1em;
width: 100%;
cursor: pointer;
}
@@ -234,7 +232,7 @@ export default class TrainOptions extends Vue {
justify-content: space-between;
align-items: center;
- padding: 0.5rem 0.5rem;
+ padding: 0.25em 0.5em;
min-width: 200px;
cursor: pointer;
@@ -261,7 +259,8 @@ export default class TrainOptions extends Vue {
&-input {
border: none;
- padding: 0.5rem 1rem;
+ padding: 0.5em 0.5em;
+
margin: 0;
min-width: 85%;
diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue
index 1ade8b8..582232e 100644
--- a/src/components/TrainsView/TrainStats.vue
+++ b/src/components/TrainsView/TrainStats.vue
@@ -212,7 +212,6 @@ export default class TrainStats extends Vue {
}
.train-stats {
- font-size: 0.9rem;
z-index: 10;
margin-bottom: 0.5em;
@@ -224,7 +223,6 @@ export default class TrainStats extends Vue {
.stats {
&-btn {
- font-size: 1em;
padding: 0.5em;
}
@@ -245,7 +243,6 @@ export default class TrainStats extends Vue {
}
&-content {
- font-size: 1.1em;
color: #ddd;
}
}
@@ -255,7 +252,6 @@ export default class TrainStats extends Vue {
&-list {
display: flex;
flex-wrap: wrap;
- font-size: 0.95em;
}
margin-right: 0.4em;
@@ -313,7 +309,7 @@ export default class TrainStats extends Vue {
@include smallScreen {
.button {
- font-size: 0.85rem;
+ font-size: 1.2em;
}
.stats-body {
@@ -327,7 +323,7 @@ export default class TrainStats extends Vue {
.btn-wrapper {
display: flex;
justify-content: center;
- margin-top: 1rem;
+ margin-top: 1em;
}
}
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 1d53320..e65c27b 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -78,18 +78,19 @@
-
-
- {{ train.driverName }}
-
-
-
-
- {{ train.locoType }}
-
+
.wrapper {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- @include midScreen() {
- grid-template-columns: 1fr;
- grid-template-rows: repeat(3, minmax(100px, 1fr));
+ gap: 2em 0;
- gap: 0.4em 0;
- }
+ // @include midScreen() {
+ // grid-template-columns: 1fr;
+ // grid-template-rows: repeat(3, minmax(0, 1fr));
+ // }
}
}
}
@@ -304,7 +305,7 @@ export default class TrainTable extends Vue {
font-size: 0.7em;
@include smallScreen() {
- font-size: 0.85em;
+ font-size: 0.75em;
}
}
@@ -326,7 +327,13 @@ export default class TrainTable extends Vue {
display: flex;
align-items: center;
justify-content: center;
- flex-wrap: wrap;
+ flex-flow: column;
+
+ grid-row: span 2;
+
+ &-info {
+ margin-bottom: 1em;
+ }
&-name {
margin: 0 0.3em;
@@ -354,7 +361,10 @@ export default class TrainTable extends Vue {
flex-direction: column;
justify-content: space-around;
- font-size: 0.95em;
+ font-size: 0.85em;
+
+ // grid-column: 1 / 3;
+ // grid-column: span 2;
&-main {
display: flex;
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 8cd96a2..77f2100 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -15,8 +15,8 @@
box-shadow: 0 0 15px 5px #474747;
- width: 75%;
- max-width: 650px;
+ // width: 75%;
+ width: 650px;
max-height: 95%;
padding: 0.5em 1em;
@@ -26,9 +26,11 @@
width: 95%;
}
- @include bigScreen {
- font-size: 1.4rem;
- }
+ // @include midScreen {
+ // width: 85%;
+ // }
+
+
&-exit {
position: absolute;
diff --git a/src/styles/scenery_status.scss b/src/styles/scenery_status.scss
index ff9bbbc..e1f631f 100644
--- a/src/styles/scenery_status.scss
+++ b/src/styles/scenery_status.scss
@@ -10,8 +10,7 @@ $taken: #09a116;
border-radius: 1rem;
font-weight: 500;
- font-size: 0.9em;
- padding: 0.2em 0.6em;
+ padding: 0.2em .55em;
background-color: $taken;
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index b2ef340..8500607 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -72,44 +72,16 @@ export default class SceneryView extends Vue {
@import "../styles/responsive.scss";
@import "../styles/variables.scss";
-h3 {
- margin: 0.5em 0;
- padding: 0.3em;
-
- display: flex;
- justify-content: center;
- align-items: center;
-
- font-size: 1.2em;
-
- img {
- width: 1.1em;
- margin-left: 0.5em;
- }
-}
-
.scenery {
&-view {
min-height: 100%;
display: flex;
justify-content: center;
-
- font-size: 1.35em;
-
- @include bigScreen() {
- font-size: 1.25rem;
- align-items: flex-start;
- }
-
- @include smallScreen {
- font-size: calc(0.5rem + 1vw);
- }
}
&-offline {
align-self: center;
- font-size: 1.5em;
text-align: center;
padding: 2em 1em;
@@ -125,10 +97,10 @@ h3 {
&-wrapper {
// background: #555;
- max-width: 950px;
width: 75%;
+ max-width: 950px;
- @include smallScreen {
+ @include midScreen {
width: 95%;
}
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 4b76536..040a9ea 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -139,8 +139,8 @@ export default class TrainsView extends Vue {
}
@include smallScreen {
- .options-wrapper {
- justify-content: center;
+ .options-bar {
+ font-size: 1.15em;
}
}