_pinned-content.scss 1.82 KB
Newer Older
Benthe Kuijpers's avatar
Benthe Kuijpers committed
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
.pinned-content {
	padding: 0;

	@media only screen and (min-width: $mediumlarge) {
		padding: 50px 0;
	}
}

.flex-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -30px;

	.flex-grid {
		flex: 0 0 100%;
		display: block;
		margin: 30px 0;

		@media only screen and (min-width: $smallmedium) {
			display: flex;
			flex-wrap: wrap;
		}

		@media only screen and (min-width: $large) {
			flex: 0 0 calc(45% - 40px);
			display: block;
			margin-left: 40px;
		}
	}
}

h3 {
	font-size: 32px;
	line-height: 32px;
	font-weight: 500;
	margin: 20px 0;
}

.news-wrapper {
	flex: 0 0 calc(100% - 60px);
	margin: 30px;

	@media only screen and (min-width: $large) {
		flex: 0 0 calc(55% - 60px);
45
46
47
48
49
50
51
52
53
		display: flex;
		flex-direction: column;

		.grid {
			flex: 1;
		}
		.btn {
			align-self: flex-end;
		}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
54
55
56
57
58
59
60
	}

	.grid {
		margin: 0 -20px;
	}

	.news-teaser {
alain's avatar
alain committed
61
		margin: 20px 20px 40px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
		flex: 0 0 calc(100% - 40px);
		
		@media only screen and (min-width: $smallmedium) {
			flex: 0 0 calc(50% - 40px);

			&:nth-child(n+3) {
				display: none;
			}
		}

		@media only screen and (min-width: $medium) {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;

			.img-wrapper {
				flex: 0 0 50%;
				margin: 0 20px 20px 0;
			}

			.text-wrapper {
				flex: 1;
			}

			.label {
				margin: 0 0 5px;
			}

			.excerpt {
				margin: 10px 0 0;
				display: block;
			}

			.text-link {
				display: inline;
				margin: 0 0 0 10px;
			}
		}

		@media only screen and (min-width: $large) {
			flex: 0 0 calc(100% - 40px);

			&:nth-child(n+3) {
				display: flex;
			}
		}
	}

	.text-link {
		margin: 0 20px;
	}
}

.events-wrapper {
alain's avatar
alain committed
116
	margin: 0 30px 60px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
117
	flex: 0 0 calc(50% - 60px);
118
119
120
121

	@media only screen and (min-width: $large) {
		margin: 0 30px 120px;
	}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
122
123
124
}

.resources-wrapper {
alain's avatar
alain committed
125
	margin: 0 30px 30px;
Benthe Kuijpers's avatar
Benthe Kuijpers committed
126
	flex: 0 0 calc(50% - 60px);
127
128
129
130

	.btn {
		float: right;
	}
Benthe Kuijpers's avatar
Benthe Kuijpers committed
131
}