diff --git a/src/components/SceneryView/SceneryHeader.vue b/src/components/SceneryView/SceneryHeader.vue
index cc34997..916c825 100644
--- a/src/components/SceneryView/SceneryHeader.vue
+++ b/src/components/SceneryView/SceneryHeader.vue
@@ -37,10 +37,6 @@ export default defineComponent({
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
-.info-header {
- padding-top: 2em;
-}
-
.scenery-name {
font-weight: bold;
color: $accentCol;
@@ -48,7 +44,6 @@ export default defineComponent({
position: relative;
font-size: 3.5em;
- margin-top: 0.25em;
text-transform: uppercase;
@@ -63,11 +58,9 @@ export default defineComponent({
position: absolute;
top: 0;
-
}
.scenery-authors {
color: #999;
}
-
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 8e712ec..2d4bcc1 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -20,6 +20,12 @@
+
+
+
+
+
+
@@ -81,10 +87,22 @@ h3.section-header {
.info-lists {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
justify-content: space-around;
}
+.info-actions {
+ display: flex;
+ justify-content: center;
+
+ margin-top: 1em;
+
+ .btn {
+ margin: 0.5em;
+ box-shadow: 0 0 10px 4px #242424;
+ }
+}
+
.badge {
font-weight: 600;
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 03a6ab5..dd81bb8 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -30,7 +30,7 @@
-
+
-
+
+
+
-
+
+
-
+
+
+
-
-
+
+
+
@@ -121,8 +127,6 @@ $sceneryBgCol: #333;
.scenery {
&-view {
- min-height: 550px;
-
display: flex;
justify-content: center;
}
@@ -142,42 +146,52 @@ $sceneryBgCol: #333;
margin: 1em auto;
}
}
+}
- &-wrapper {
- position: relative;
+.scenery-wrapper {
+ display: grid;
+ grid-template-columns: 4fr 5fr;
+ gap: 0 1em;
- width: 100%;
- max-width: 1100px;
+ position: relative;
- @include midScreen {
- width: 100%;
- }
+ width: 100%;
+ max-width: 1500px;
- background: #292929;
- padding: 1em;
- margin: 1rem 0;
+ background: #292929;
+ padding: 1.5em;
+ margin: 1rem 0;
- border-radius: 1.5em;
+ border-radius: 1.5em;
- text-align: center;
- }
+ text-align: center;
+}
+
+.scenery-left {
+ height: 80vh;
+ max-height: 1000px;
+}
+
+.scenery-actions {
+ display: flex;
+ justify-content: space-between;
}
button.btn {
- position: absolute;
- padding: 0.25em;
-
- top: 0.5em;
img {
width: 2em;
}
}
-button.history-btn {
- right: 0.5em;
-}
+@include midScreen {
+ .scenery-wrapper {
+ grid-template-columns: 1fr;
+ gap: 0;
+ }
-button.back-btn {
- left: 0.5em;
+ .scenery-left {
+ height: auto;
+ margin-bottom: 2em;
+ }
}