eventList.less 1.44 KB
Newer Older
1
#event-list {
2
  .event-list-item {
3
4
5
6
7
    border-bottom: 1px solid #000;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
8
    height: 15vmin;
9

10
11
    .grid-container {
      width: 100%;
Luzian Bieri's avatar
Luzian Bieri committed
12
      padding: 2vmin;
13
14
      display: grid;
      grid-gap: 0;
Luzian Bieri's avatar
Luzian Bieri committed
15
16
      grid-template-columns: 55% 45%;
      grid-template-rows: 50% 50%;
17

18
      .title {
Luzian Bieri's avatar
Luzian Bieri committed
19
        margin: 0 0 1.5vmin;
20
21
        display: flex;
        font-weight: 100;
Luzian Bieri's avatar
Luzian Bieri committed
22
        font-size: 150%;
23
24
25
26
        color: #004398;
        grid-column: 1 / span 2;
        grid-row: 1;
      }
Luzian Bieri's avatar
Luzian Bieri committed
27

28
      .price {
29
        margin: 0;
Luzian Bieri's avatar
Luzian Bieri committed
30
        font-size: 100%;
31
32
33
34
35
        font-weight: 100;
        color: rgb(107, 108, 119);
        grid-column: 1;
        grid-row: 2;
      }
Luzian Bieri's avatar
Luzian Bieri committed
36

37
      .date-container {
38
        margin: 0;
39
40
41
        grid-column: 2;
        grid-row: 2;
      }
Luzian Bieri's avatar
Luzian Bieri committed
42

43
44
      .weekday {
        margin: 0;
Luzian Bieri's avatar
Luzian Bieri committed
45
        font-size: 100%;
46
        font-weight: 100;
47
        grid-column: 1;
48
49
        color: rgb(107, 108, 119);
      }
50

51
52
      .date {
        margin: 0;
Luzian Bieri's avatar
Luzian Bieri committed
53
        font-size: 75%;
54
        font-weight: 100;
55
        grid-column: 2;
56
57
58
        color: rgb(107, 108, 119);
      }
    }
59

60
    img {
61
62
      width: 15vmin;
      height: 15vmin;
63
    }
64

65
    .img-container {
66
67
      width: 15vmin;
      height: 15vmin;
68
      position: relative;
69
      object-fit: cover;
70
71
    }
  }
72

73
74
75
  .registration {
    background-color: #fff;
  }
76

77
78
79
80
81
82
83
  .upcoming {
    background-color: #ddd;
  }

  .past {
    background-color: #bbb;
  }
84
}