|
| 1 | +@use "../helpers/_helpers" as *; |
| 2 | + |
1 | 3 | /*------------------------------------*\
|
2 | 4 | Speaking Engagements
|
3 | 5 | \*------------------------------------*/
|
4 | 6 |
|
5 | 7 | .publications {
|
6 | 8 |
|
7 | 9 | .subsection__header {
|
8 |
| - @include rem( margin-block-start, 40 ); |
| 10 | + @include rem( margin-block-start, 60 ); |
9 | 11 | }
|
10 | 12 |
|
11 |
| - // Flexbox! |
12 |
| - .listing--books { |
13 |
| - |
14 |
| - @include breakup-breakpoint('global') { |
15 |
| - |
16 |
| - // Flexbox! |
17 |
| - display: flex; |
18 |
| - flex-wrap: wrap; |
19 |
| - align-items: stretch; |
20 |
| - |
21 |
| - @include rem( margin, 20 auto 0 ); |
22 |
| - |
23 |
| - @supports (margin-block: 1em) { |
24 |
| - margin: unset; |
25 |
| - @include rem( margin-block, 20 0, false ); |
26 |
| - margin-inline: auto; |
27 |
| - } |
28 |
| - |
29 |
| - } |
30 |
| - |
31 |
| - @include breakup-breakpoint('full') { |
32 |
| - @include rem( margin, 20 -80 0 ); |
33 |
| - |
34 |
| - @supports (margin-block: 1em) { |
35 |
| - margin: unset; |
36 |
| - @include rem( margin-block, 20 0, false ); |
37 |
| - @include rem( margin-inline, -80, false ); |
38 |
| - } |
39 |
| - } |
40 |
| - |
41 |
| - } |
42 |
| - |
43 |
| - .book { |
44 |
| - |
45 |
| - @include breakup-breakpoint('small') { |
46 |
| - |
47 |
| - // 2 events per row, 20px gutter |
48 |
| - flex: 0 0 calc( 50% - 1.25rem / 2 ); |
49 |
| - margin-left: 1.25rem; |
50 |
| - |
51 |
| - @supports (margin-block: 1em) { |
52 |
| - margin-left: unset; |
53 |
| - margin-inline-start: 1.25rem; |
54 |
| - } |
55 |
| - |
56 |
| - /* Remove left margin for row starters */ |
57 |
| - &:nth-child(odd) { |
58 |
| - margin-left: 0; |
59 |
| - |
60 |
| - @supports (margin-block: 1em) { |
61 |
| - margin-left: unset; |
62 |
| - margin-inline-start: 0; |
63 |
| - } |
64 |
| - } |
65 |
| - |
66 |
| - // Reset margins on "future" events & remove the correct one |
67 |
| - &--future:nth-child(odd) { |
68 |
| - margin-left: 1.25rem; |
69 |
| - |
70 |
| - @supports (margin-block: 1em) { |
71 |
| - margin-left: unset; |
72 |
| - margin-inline-start: 1.25rem; |
73 |
| - } |
74 |
| - } |
75 |
| - &--future:nth-child(even) { |
76 |
| - margin-left: 0; |
77 |
| - |
78 |
| - @supports (margin-block: 1em) { |
79 |
| - margin-left: unset; |
80 |
| - margin-inline-start: 0; |
81 |
| - } |
82 |
| - } |
83 |
| - |
84 |
| - // first if more >= 1 |
85 |
| - &--future:nth-last-child(n+1):first-child { |
86 |
| - flex: 0 0 100%; |
87 |
| - margin-left: 0; |
88 |
| - |
89 |
| - @supports (margin-block: 1em) { |
90 |
| - margin-left: unset; |
91 |
| - margin-inline-start: 0; |
92 |
| - } |
93 |
| - |
94 |
| - .listing__item__title { |
95 |
| - @include rem( font-size, 36 ); |
96 |
| - } |
97 |
| - } |
98 |
| - |
99 |
| - } |
100 |
| - |
101 |
| - @include breakup-breakpoint('medium') { |
102 |
| - |
103 |
| - /* 1/3 width with a 20px gap (fudged) */ |
104 |
| - flex: 0 0 calc( 100% / 3 - 0.875rem ); |
105 |
| - |
106 |
| - // Reset margins |
107 |
| - &:nth-child(even), |
108 |
| - &:nth-child(odd) { |
109 |
| - margin-left: 1.25rem; |
110 |
| - |
111 |
| - @supports (margin-block: 1em) { |
112 |
| - margin-left: unset; |
113 |
| - margin-inline-start: 1.25rem; |
114 |
| - } |
115 |
| - } |
116 |
| - |
117 |
| - // Normal Grid margin removal |
118 |
| - &:nth-child(3n+1) { |
119 |
| - margin-left: 0; |
120 |
| - |
121 |
| - @supports (margin-block: 1em) { |
122 |
| - margin-left: unset; |
123 |
| - margin-inline-start: 0; |
124 |
| - } |
125 |
| - } |
126 |
| - |
127 |
| - &--future { |
128 |
| - |
129 |
| - // Only the lonely |
130 |
| - @include exactly(1) { |
131 |
| - flex: 0 0 100%; |
132 |
| - margin-left: 0; |
133 |
| - |
134 |
| - @supports (margin-block: 1em) { |
135 |
| - margin-left: unset; |
136 |
| - margin-inline-start: 0; |
137 |
| - } |
138 |
| - |
139 |
| - .listing__item__title { |
140 |
| - @include rem( font-size, 36 ); |
141 |
| - } |
142 |
| - } |
143 |
| - |
144 |
| - // Margin reset |
145 |
| - &:nth-child(3n+1) { |
146 |
| - margin-left: 1.25rem; |
147 |
| - |
148 |
| - @supports (margin-block: 1em) { |
149 |
| - margin-left: unset; |
150 |
| - margin-inline-start: 1.25rem; |
151 |
| - } |
152 |
| - } |
153 |
| - |
154 |
| - // Quantity + nth |
155 |
| - &:nth-last-child(n+2):first-child ~ .event--future:nth-child(3n) { |
156 |
| - margin-left: 0; |
157 |
| - |
158 |
| - @supports (margin-block: 1em) { |
159 |
| - margin-left: unset; |
160 |
| - margin-inline-start: 0; |
161 |
| - } |
162 |
| - } |
163 |
| - |
164 |
| - // first two if more >= 2 |
165 |
| - &:nth-last-child(n+2):first-child, |
166 |
| - &:nth-last-child(n+2):first-child + .event--future { |
167 |
| - flex: 0 0 calc( 50% - 1.25rem / 2 ); |
168 |
| - |
169 |
| - .listing__item__title { |
170 |
| - @include rem( font-size, 24 ); |
171 |
| - } |
172 |
| - } |
173 |
| - |
174 |
| - } |
175 |
| - |
176 |
| - } |
177 |
| - |
178 |
| - } |
179 |
| - |
180 | 13 | }
|
0 commit comments