diff --git a/assets/_schedule.scss b/assets/_schedule.scss
index fee04d0..b2b573a 100644
--- a/assets/_schedule.scss
+++ b/assets/_schedule.scss
@@ -4,12 +4,12 @@ $timeslot-height: 0.65em;
.schedule {
display: flex;
- overflow-x: auto;
+ padding-right: 0.5em;
.schedule-date {
height: 0;
position: relative;
- top: calc(-3rem - 1px);
+ top: calc(-5rem - 1px);
visibility: hidden;
width: 0;
}
@@ -55,23 +55,34 @@ $timeslot-height: 0.65em;
.schedule-grid {
display: grid;
grid-auto-rows: $timeslot-height;
- grid-template-rows: 2em;
+ grid-template-rows: 2rem;
&.schedule-room {
- grid-template-columns: 400px;
+ grid-template-columns: 80vw;
+
+ @media screen and (min-width: 501px) {
+ grid-template-columns: 400px;
+ }
}
& > * {
grid-column: 1 / 2;
}
+
+ & > .schedule-title {
+ background: $color-background;
+ font-size: 1.17rem;
+ margin-bottom: 0;
+ padding-bottom: 0.5em;
+ position: sticky;
+ text-align: center;
+ top: 3rem;
+ z-index: 42;
+ }
}
.schedule-room {
margin: 0 0.5em;
-
- & > .schedule-title {
- text-align: center;
- }
}
.schedule-time {
@@ -81,19 +92,28 @@ $timeslot-height: 0.65em;
.schedule-timeline {
background: $color-background;
- padding-right: 0.5em;
+ padding: 0 0.5em 0 1em;
position: sticky;
left: 0;
}
}
+.schedule-container {
+ display: flex;
+ flex-direction: column;
+ margin-left: -1rem;
+ width: min-content;
+}
+
.schedule-days {
background: $color-background;
display: flex;
font-size: 1rem;
+ left: 0;
line-height: 1;
+ max-width: 100vw;
overflow-x: auto;
- padding: 1em 0;
+ padding: 1em;
position: sticky;
top: 0;
z-index: 42;
diff --git a/layouts/shortcodes/schedule.html b/layouts/shortcodes/schedule.html
index 0ed30ea..10a5788 100644
--- a/layouts/shortcodes/schedule.html
+++ b/layouts/shortcodes/schedule.html
@@ -4,44 +4,46 @@
Zeitangaben in {{ .timezone }}
{{ .speaker }}
-{{ .speaker }}
+