lbreitkopf commited on
Commit
792fc9a
·
1 Parent(s): df31915

style change

Browse files
Files changed (1) hide show
  1. index.html +23 -16
index.html CHANGED
@@ -112,6 +112,11 @@
112
  .figure-card figcaption{
113
  font-size:.9rem; color:var(--muted); margin-top:.35rem;
114
  }
 
 
 
 
 
115
  </style>
116
  </head>
117
  <body>
@@ -211,7 +216,7 @@
211
  </section>
212
 
213
  <section id="media" class="section" aria-labelledby="ex-title">
214
- <h2 id="ex-title">Example clip</h2>
215
  <div class="media-grid">
216
  <figure class="media-card">
217
  <video id="sampleVideo" controls preload="metadata" playsinline poster="assets/sample_poster.jpg">
@@ -252,21 +257,23 @@
252
  </div>
253
 
254
  <!-- Group 2: Top-1 accuracy per task -->
255
- <div class="results-group">
256
- <h3>Top-1 accuracy by task</h3>
257
- <div class="grid-3">
258
- <figure class="figure-card">
259
- <img src="Accuracy_plot_material.png" alt="Top-1 accuracy for object recognition" loading="lazy">
260
- <figcaption>Object.</figcaption>
261
- </figure>
262
- <figure class="figure-card">
263
- <img src="Accuracy_plot_object.png" alt="Top-1 accuracy for material recognition" loading="lazy">
264
- <figcaption>Material.</figcaption>
265
- </figure>
266
- <figure class="figure-card">
267
- <img src="Accuracy_plot_outcome.png" alt="Top-1 accuracy for outcome prediction" loading="lazy">
268
- <figcaption>Outcome.</figcaption>
269
- </figure>
 
 
270
  </div>
271
  </div>
272
 
 
112
  .figure-card figcaption{
113
  font-size:.9rem; color:var(--muted); margin-top:.35rem;
114
  }
115
+
116
+ /* make a card span both columns of .media-grid */
117
+ .full-span { grid-column: 1 / -1; }
118
+ @media (max-width: 920px){ .full-span { grid-column: auto; } }
119
+
120
  </style>
121
  </head>
122
  <body>
 
216
  </section>
217
 
218
  <section id="media" class="section" aria-labelledby="ex-title">
219
+ <h2 id="ex-title">Example clips and Plots</h2>
220
  <div class="media-grid">
221
  <figure class="media-card">
222
  <video id="sampleVideo" controls preload="metadata" playsinline poster="assets/sample_poster.jpg">
 
257
  </div>
258
 
259
  <!-- Group 2: Top-1 accuracy per task -->
260
+ <div class="media-card full-span">
261
+ <div class="results-group">
262
+ <h3>Top-1 accuracy by task</h3>
263
+ <div class="grid-3">
264
+ <figure class="figure-card">
265
+ <img src="Accuracy_plot_material.png" alt="Top-1 accuracy for object" loading="lazy">
266
+ <figcaption>Object.</figcaption>
267
+ </figure>
268
+ <figure class="figure-card">
269
+ <img src="Accuracy_plot_object.png" alt="Top-1 accuracy for material" loading="lazy">
270
+ <figcaption>Material.</figcaption>
271
+ </figure>
272
+ <figure class="figure-card">
273
+ <img src="Accuracy_plot_outcome.png" alt="Top-1 accuracy for outcome" loading="lazy">
274
+ <figcaption>Outcome.</figcaption>
275
+ </figure>
276
+ </div>
277
  </div>
278
  </div>
279