Talk for https://dl.acm.org/doi/10.1145/3744169.3744180
anil.recoil.org
1/* Minimal Cambridge University theme additions */
2
3:root {
4 /* Cambridge University brand colors */
5 --cambridge-blue: #003c71;
6 --cambridge-light-blue: #4a90c2;
7 --cambridge-green: #7ab800;
8 --cambridge-orange: #ee7203;
9 --cambridge-pink: #d50270;
10 --cambridge-yellow: #f4c430;
11}
12
13/* Apply Cambridge colors to headers and center them */
14h1, h2 {
15 color: var(--cambridge-blue);
16 text-align: center;
17}
18
19h3 {
20 color: var(--cambridge-light-blue);
21 text-align: center;
22}
23
24/* Center all images */
25img {
26 display: block;
27 margin-left: auto;
28 margin-right: auto;
29}
30
31/* Cambridge colors for semantic blocks */
32.definition {
33 border-left-color: var(--cambridge-green);
34 background-color: rgba(122, 184, 0, 0.1);
35}
36
37.definition h2, .definition h3 {
38 color: var(--cambridge-green);
39}
40
41.theorem {
42 border-left-color: var(--cambridge-orange);
43 background-color: rgba(238, 114, 3, 0.1);
44}
45
46.theorem h2, .theorem h3 {
47 color: var(--cambridge-orange);
48}
49
50.example {
51 border-left-color: var(--cambridge-green);
52 background-color: rgba(122, 184, 0, 0.08);
53}
54
55.example h2, .example h3 {
56 color: var(--cambridge-green);
57}
58
59/* CUSTOM: Override the default "Example" text with just the title */
60.example:before {
61 content: none !important;
62}
63
64.example[title]:before {
65 content: attr(title) !important;
66 background-color: darkgreen;
67 color: white;
68 font-weight: 600;
69}
70
71/* CUSTOM: Override the default "Remark" text with just the title */
72.remark:before {
73 content: none !important;
74}
75
76.remark[title]:before {
77 content: attr(title) !important;
78 font-weight: 600;
79}
80
81/* CUSTOM: Override the default "Theorem" text with just the title */
82.theorem:before {
83 content: none !important;
84}
85
86.theorem[title]:before {
87 content: attr(title) !important;
88 font-weight: 600;
89}
90
91.proof {
92 border-left-color: var(--cambridge-yellow);
93 background-color: rgba(244, 196, 48, 0.1);
94}
95
96.proof h2, .proof h3 {
97 color: #b8860b; /* Darker yellow for readability */
98}
99
100/* Links with subtle dotted underline */
101a {
102 color: inherit;
103 text-decoration: none;
104 border-bottom: 1px dotted #999999;
105}
106
107a:hover {
108 border-bottom-color: #666666;
109}
110
111strong {
112 color: var(--cambridge-blue);
113}
114
115/* Table styling */
116table {
117 width: 75%;
118 table-layout: fixed;
119 margin: 0 auto;
120}
121
122/* Table headers with light grey background */
123th {
124 background-color: #f0f0f0 !important;
125 color: var(--cambridge-dark-grey) !important;
126 font-weight: 600;
127 text-align: center;
128}
129
130th:first-child {
131 width: 33.33%;
132}
133
134th:last-child {
135 width: 66.67%;
136}
137
138/* Table cells */
139td {
140 text-align: center;
141}
142
143td:first-child {
144 width: 33.33%;
145}
146
147td:last-child {
148 width: 66.67%;
149}
150
151/* Add more spacing between list items */
152li {
153 margin-bottom: 0.3em;
154}
155
156/* Slipshow credit styling */
157.credit-line {
158 text-align: right;
159 margin-top: 1em;
160}
161
162.slipshow-credit {
163 font-size: 0.7em;
164}
165
166/* Center and overlap fungi image */
167.fungi-overlap {
168 display: block;
169 margin: 0 auto -50px auto;
170 position: relative;
171 z-index: -1;
172 max-width: 60%;
173 height: auto;
174}
175
176/* Evolution image overlap with definition */
177.evolution-overlap {
178 display: block;
179 margin: 0 auto -40px auto;
180 position: relative;
181 z-index: -1;
182 max-width: 40%;
183 height: auto;
184}
185
186/* Stack image overlap with theorem below */
187.stack-overlap {
188 display: block;
189 margin: 0 auto -20px auto;
190 position: relative;
191 z-index: -1;
192 max-width: 50%;
193 height: auto;
194}
195
196/* FAANG image overlap with example below */
197.faang-overlap {
198 display: block;
199 margin: 0 auto -100px auto;
200 position: relative;
201 z-index: -1;
202 max-width: 45%;
203 height: auto;
204}
205
206/* Arch image - smaller size */
207.arch-small {
208 display: block;
209 margin: 0 auto;
210 max-width: 60%;
211 height: auto;
212}
213
214/* University logos styling */
215.university-logos {
216 display: flex;
217 justify-content: center;
218 align-items: center;
219 gap: 2em;
220 margin: 1.5em 0;
221 flex-wrap: wrap;
222}
223
224.uni-logo {
225 height: 120px;
226 width: auto;
227 flex: 1;
228 max-width: 250px;
229 object-fit: contain;
230 filter: drop-shadow(0 2px 4px rgba(0, 60, 113, 0.1));
231 transition: transform 0.2s ease;
232}
233
234.uni-logo:hover {
235 transform: scale(1.05);
236}
237
238/* QR code styling */
239.qr-code {
240 height: 120px;
241 width: 120px;
242 object-fit: contain;
243 float: right;
244 margin: 0.5em 0 0.5em 1em;
245}
246
247/* Responsive logos for smaller screens */
248@media (max-width: 768px) {
249 .university-logos {
250 gap: 1em;
251 }
252
253 .uni-logo {
254 height: 90px;
255 max-width: 180px;
256 }
257
258 .inline-logo {
259 height: 1em;
260 margin-left: 0.2em;
261 }
262}