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

Closes #186 (closed)

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

+.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-left: 0;
+}
+
+dl {
+    margin: 0;
+    padding: 0;
+}
+
+dt {
+    font-weight: bold;
+}
+
+dt:not(:last-of-type) {
+    border-bottom: solid #ddd 1px;
+    font-size: 14px;
+}
+
+dd {
+    margin: auto;
+    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-left: 1rem;
+}
+
+.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 {
+    /*  FIXME: merge styles into one line  */
+}
+
+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;
+    rotate: 270deg;
+    rotation: 270deg;
+}
+
+.unfold-trigger.vertical i.material-icons {
+    transform: rotate(-90deg);
+}