events-helsinki-monorepo/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss at 7703d9cf42467c633a0d0d61b160192213bddc7f · City-of-Helsinki/events-helsinki-monorepo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@use '../../../styles/breakpoints' as breakpoints;

.venueContent {
  --description-font-size: var(--fontsize-body-l);
  background-color: var(--color-white);

  .contentWrapper {
    display: grid;
    grid-template-columns: unset;
    position: relative;

    .leftEmpty {
      padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px)
        var(--spacing-m) 0;
    }

    /*
    When using bigger than mobile sized screen, the content order would be:
    1. venue description
    2. share buttons,
    3. map,
    4. sidebar
    5. venue events, footer, etc...
    */
    @include breakpoints.respond-below(m) {
      .leftEmpty {
        position: absolute;
        padding: 0;
      }
      .sidebar {
        padding-top: var(--spacing-xl);
      }
    }
    /*
    When using mobile sized screen, switch the sidebar with
    secondary data (location / map, share buttons...) in main content,
    so in mobile the order would be:
    1. venue description
    2. sidebar
    3. share buttons,
    4. map,
    5. venue events, footer, etc...
    */
    @include breakpoints.respond-above(m) {
      grid-template-columns: auto 2fr 1fr;
      grid-template-rows: auto 1fr;

      .mainContent  {
        grid-column: 2;
      }

      .sidebar {
        grid-column: 3;
        grid-row: 1 / span 2;
      }

      .secondaryContent {
        grid-column: 2;
      }

      .leftEmpty {
        grid-column: 1;
        grid-row: 1 / span 2;
      }
    }
  }
}
.descriptionTitle {
  font-size: var(--fontsize-heading-m);
  font-weight: 500;
  margin: 2.25rem 0 1rem;
}

.description {
  line-height: 1.5;

  p {
    font-size: var(--description-font-size);
    margin: 1rem 0;
  }

  a {
    text-decoration: underline;
    font-size: var(--description-font-size);
  }
  a:hover {
    color: var(--color-coat-of-arms-dark);
  }
}