_events-teaser.scss 834 Bytes
Newer Older
1
.events-teaser {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
2
	margin: 0 0 30px;
3
4
5
6

	a {
		display: flex;
		flex-wrap: wrap;
alain's avatar
alain committed
7
		align-items: flex-start;
8
9
10
		text-decoration: none;
	}

Benthe Kuijpers's avatar
Benthe Kuijpers committed
11
12
13
14
15
	.category {
		font-style: italic;
		font-weight: 300;
	}

16
17
18
19
20
21
22
23
	&__date {
		background: $blue;
		flex: 0 0 60px;
		margin: 0 20px 0 0;
		font-family: $font-header;
		color: white;
		font-weight: bold;
		text-align: center;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
24
25
26
27
28
29
30
		font-size: 24px;
		line-height: 24px;
		padding: 8px;
		mix-blend-mode: multiply;
		@include colourBg($bg-yellow, 0deg);

		span {
alain's avatar
alain committed
31
			padding: 13px 5px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
32
33
34
35
36
37
			background: rgba(black,0.2);
			display: block;
			margin: 10px -8px -8px;
			font-size: 19px;
			line-height: 19px;
		}
38
39
40
41
42
43
	}

	&__text {
		flex: 1;

		h4 {
Benthe Kuijpers's avatar
Benthe Kuijpers committed
44
45
			font-size: 22px;
			line-height: 22px;
46
			margin: 0;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
47
48
49
50
51

			@media only screen and (min-width: $smallmedium) {
				font-size: 28px;
				line-height: 30px;
			}
52
53
54
		}
	}
}