Resolve "Improve week view for mobile devices (size s)"

Closes #186 (closed)

aleksis/apps/alsijil/static/css/alsijil/week_view.css

+@media screen and (max-width: 600px) {
+    #toggle-row button[type=submit] {
+        width: 100%;
+        margin-bottom: 1em;
+    }
+}
+
+.horizontal-scroll-container {
+    overflow-x: scroll;
+    display: flex;
+    column-gap: 1rem;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    scroll-snap-type: x proximity;
+}
+
+.horizontal-scroll-container.vertical {
+    flex-wrap: wrap;
+    overflow-x: inherit;
+}
+
+.horizontal-scroll-container.vertical .horizontal-scroll-card {
+    margin-inline: 0;
+}
+
+dl {
+    margin: 0;
+    padding: 0;
+}
+
+dt {
+    font-weight: bold;
+}
+
+dd {
+    margin: 0;
+    padding: unset;
+}
+
+.horizontal-scroll-card {
+    flex-basis: min(75vw, 400px);
+    flex-shrink: 0;
+    flex-grow: 1;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    scroll-snap-align: center;
+    transition: all .5s;
+}
+
+.horizontal-scroll-card:first-of-type {
+    margin-inline-start: .4rem;
+    -moz-margin-start: .4rem;
+    -webkit-margin-start: .4rem;
+}
+
+.horizontal-scroll-card:last-of-type {
+    margin-inline-end: .4rem;
+    -moz-margin-end: .4rem;
+    -webkit-margin-end: .4rem;
+}
+
+.horizontal-scroll-card .card-action {
+    margin-bottom: 5px;
+}
+
+.horizontal-scroll-card .card-content .card-title {
+    display: flex;
+    justify-content: space-between;
+}
+
+.horizontal-scroll-card .card-content .card-title .subject {
+    flex-grow: 5;
+}
+
+.horizontal-scroll-card .one-line {
+   display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: 1fr 1fr;
+}
+
+p.subtitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.btn-superflat ~ span {
+    line-height: 24px;
+}
+
+.btn-superflat, .btn-superflat:focus, .btn-superflat:active {
+    border: none;
+    line-height: 1;
+    height: 24px;
+    background: none;
+    font-weight: normal;
+}
+
+.btn-superflat i.material-icons {
+    vertical-align: middle;
+}
+
+.btn-superflat:hover {
+    cursor: pointer;
+}
+
+.unfold-trigger i.material-icons {
+    transition: transform .5s 0s ease-in-out;
+    transform: rotate(-90deg);
+}
+
+.unfold-trigger.vertical i.material-icons {
+    transform: rotate(-180deg);
+}