├── w3c.json ├── report.md ├── minutes.md ├── papers.md ├── _config.yml ├── README.md ├── schedule.md ├── _includes ├── cfp_dates.html ├── header.html └── host_sponsors.html ├── assets ├── js │ └── script.js └── css │ └── style.css ├── _layouts ├── home.html └── cfp.html ├── sponsorship.md ├── index.md └── cfp.md /w3c.json: -------------------------------------------------------------------------------- 1 | { 2 | "contacts": [ 3 | "iherman" 4 | ], 5 | "repo-type": "workshop" 6 | } 7 | -------------------------------------------------------------------------------- /report.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | # Workshop report 6 | 7 | This is a placeholder for now. This page will contain the full report of the Workshop. 8 | -------------------------------------------------------------------------------- /minutes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | # Minutes of the Workshop discussions 6 | 7 | This is a placeholder for now. This page will minutes taken at the Workshop. 8 | -------------------------------------------------------------------------------- /papers.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | # Submitted position papers 6 | 7 | This is a placeholder for now. This page will contain the the position papers submitted to the workshop. 8 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | #theme: jekyll-theme-minimal 2 | markdown: kramdown 3 | kramdown: 4 | input: GFM 5 | hard_wrap: false 6 | highlighter: rouge 7 | exclude: 8 | - Gemfile 9 | - Gemfile.lock 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Website for a _Tentative_ W3C Workshop on Web Archival 2 | 3 | Web site of the _Tentative_ W3C Workshop on Web Archival. Currently _*planned*_ and neither final nor approved by W3C. 4 | 5 | This content of the repository can be read as a [proper Web site](https://w3c.github.io/archival-workshop/). 6 | -------------------------------------------------------------------------------- /schedule.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | # Workshop Schedule 6 | 7 | Just a skeleton for now… 8 | 9 | ## First Day 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 37 | 38 |
9:00 - 10:30 15 |

Session title

16 |
    17 |
  1. First talk
  2. 18 |
  3. Second talk
  4. 19 |
20 |
10:30 - 11:00 25 | Coffee break 26 |
11:00 - 12:30 31 |

Session title

32 |
    33 |
  1. First talk
  2. 34 |
  3. Second talk
  4. 35 |
36 |
39 | 40 | 41 | ## Second Day 42 | -------------------------------------------------------------------------------- /_includes/cfp_dates.html: -------------------------------------------------------------------------------- 1 | 30 | 34 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | W3C 4 |

5 |

W3C Workshop on Web Archival

6 |

7 | Month ??-??, 2019; City, Country 8 |

9 | 31 |
32 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var createEl = function (tagName, attrs) { 3 | var anchor = document.createElement(tagName); 4 | Object.keys(attrs).forEach(function (key) { 5 | anchor[key] = attrs[key]; 6 | }); 7 | return anchor; 8 | }; 9 | 10 | var createAnchorFromHeading = function (headingEl) { 11 | return createEl( 12 | "a", 13 | { 14 | className: "ref", 15 | href: "#" + headingEl.id, 16 | textContent: "#", 17 | title: headingEl.textContent 18 | } 19 | ); 20 | }; 21 | 22 | window.addEventListener("load", function () { 23 | Array.prototype.forEach.call(document.querySelectorAll("#main h1[id], #main h2[id], #main h3[id], #main h4[id], #main h5[id]"), function (el) { 24 | var a = createAnchorFromHeading(el); 25 | el.classList.add("has-ref"); 26 | el.addEventListener("click", function () { 27 | a.click(); 28 | }); 29 | el.insertBefore(a, el.firstChild); 30 | }); 31 | }); 32 | })(); 33 | -------------------------------------------------------------------------------- /_includes/host_sponsors.html: -------------------------------------------------------------------------------- 1 | 10 | 29 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | W3C Workshop on @@@@ 7 | 8 | 9 | 10 | 24 | 25 | 26 | 27 | {% include header.html %} 28 | {% include host_sponsors.html %} 29 |
30 |
31 | {{ content }} 32 |
33 |
34 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /_layouts/cfp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | W3C Workshop on @@@@ 7 | 8 | 9 | 10 | 24 | 25 | 26 | 27 | {% include header.html %} 28 | {% include cfp_dates.html %} 29 | {% include host_sponsors.html %} 30 |
31 |
32 | {{ content }} 33 |
34 |
35 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /sponsorship.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | # Sponsoring the W3C Workshop on Web Archival 6 | 7 | (Some general text on the Workshop T.B.D.) 8 | {: .todo} 9 | 10 | For more details on the workshop, see the [W3C Workshop on Web Archival](index.html). 11 | 12 | ## Why Sponsor This Workshop? 13 | 14 | The cost to hold a workshop includes costs for venue (including setup and custodial costs), AV requirements (optionally including recording), catering (lunch and breaks), materials, travel and staffing, and other considerations. 15 | 16 | Most of the planning, coordination, agenda building, and writing outcome reports are done for no cost by W3C staff or volunteers. But without sponsorships, W3C cannot hold workshops. 17 | 18 | If you see value in discussing further improvement on Web Archival in general, and believe it will help your business, sponsoring is the best way to ensure that this conversation happens, and that you are seen as a leader and a forward-looking enabler of the technical evolution of the Web. 19 | 20 | The more sponsorships we get, the better the amenities will be, including options like recording and transcription for spreading and preserving what was discussed, T-shirts for attendees, and better meals. 21 | 22 | ## Sponsorship Packages 23 | 24 | W3C has general guidelines for our [workshop sponsorship](https://www.w3.org/Consortium/sponsor/events#workshop). For this workshop, we have 3 levels of sponsorship: [Platinum](#platinum), [Gold](#gold), and [Silver](#silver). 25 | 26 | W3C Members get a 25% discount on all sponsorship packages; costs listed reflect the W3C Member discount. 27 | 28 | All sponsorships offer the following considerations: 29 | 30 | * Sponsor identity on Workshop communications including: 31 | * Call for Participation and Summary Report 32 | * On-site signage and printed materials 33 | * Any commemorative item produced (e.g., T-shirt) 34 | * One guest pass to observe Workshop 35 | * Sponsor mention in press releases or media advisories 36 | 37 | The deadline for becoming a sponsor are: 38 | 39 | * Sponsor identity on Workshop communications including: 40 | * Call for Participation and Summary Report 41 | * On-site signage and printed materials 42 | * Any commemorative item produced (e.g., T-shirt) 43 | * One guest pass to observe Workshop 44 | * Sponsor mention in press releases or media advisories 45 | 46 | The deadline for becoming a sponsor are: 47 | 48 | * Datum to be set to have the name/logo of the sponsor recognized on the signage at the workshop 49 | * Datum to be set to sponsor the workshop without name/logo on the signage, but with the other benefits included 50 | 51 | _The sponsorship values are in Yens, they should be in $ or €, depending on the location_ 52 | {: .todo} 53 | 54 | ### Platinum Sponsorship: €5,000 (€6,500 for non-Members) 55 | {: #platinum} 56 | 57 | * Platinum sponsors are listed prominently as major sponsors of the workshop. 58 | * The sponsor name and logo are featured on all on-site signage and printed materials. 59 | 60 | ### Gold Sponsorship: €3,000 (€4,000 for non-Members) 61 | {: #gold} 62 | 63 | * Gold sponsors are listed as sponsors of the workshop. 64 | * The sponsor name and logo are included on all on-site signage and printed materials. 65 | 66 | ### Silver Sponsorship: €1,000 (€1,500 for non-Members) 67 | {: #silver} 68 | 69 | * Silver sponsors are listed as additional sponsors of the workshop. 70 | * The sponsor name is listed on all on-site signage and printed materials. 71 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | * TOC 6 | {:toc} 7 | 8 | # Introduction 9 | 10 | This workshop brings together the people who work on archiving and preserving information from the Web or created with Web technologies. 11 | 12 | Traditional archives and libraries have been breaking ground and setting standards in this field, but they are far from the only stakeholders who capture, document, and preserve material from the web. Others, including community archivists, professional journalists, records managers, citizen journalists, self-archiving advocates, and fact checking organizations have also been stretching the bounds of what we can preserve, and how we can do so ethically, reliably, and scalably. 13 | 14 | In this field, we can overlook neither the professional organizations who have been responsible for developing invaluable technical standards, nor the community archivists and citizen journalists who have been harnessing the democratizing power of the web to document in support of self-determination and decentralized history. 15 | 16 | This workshop will involve position papers, panel discussions, breakout groups, and moderated group discussion. 17 | 18 | # Expected outcomes 19 | 20 | The primary outcome expected from the workshop is new channels of communication between these disparate groups, and a plan to move forward to continue future work. 21 | 22 | The workshop participants will initially define a scope for our work. Where do we draw the line in defining what a proper subject for “archiving” is? Do we include interactive and dynamic content, or content which varies depending on the technological context in which it’s viewed (e.g., search and recommendation engine results)? Datasets? Applications? 23 | 24 | Our workshop participants will assemble a gap analysis among current standards and conversations. Some possible gaps might include a range of technical or communication problems, which might include such wide ranging problems such as missing technical requirements in existing specifications; the archival community’s needs that need to be better represented among the developers of the technological standards; the existing technological capabilities which need to be better communicated to various archiving communities; an increased need for communication between formal and informal archival communities around best practice. 25 | 26 | The workshop participants will propose next steps for the group. Possible outcomes might include: 27 | 28 | * A new W3C community group to continue the conversation 29 | * Identifying a list of existing W3C Working Groups, Interest Groups, or Community Groups which would benefit from increased involvement from the archival community 30 | * Outreach to archivists, librarians, community archivists, journalists, citizen journalists, and others who are archiving on the web 31 | 32 | # Workshop topics 33 | {: #topics} 34 | 35 | The main topics of interest for this workshop include (but are not limited to) the following: 36 | 37 | * The scope of our work (from documents to Web Applications to datasets to interactive content, where do we draw the line?) 38 | * Preservation, discovery, and access 39 | * Retention, copyright, licensing, and cultural ownership 40 | * Metadata authorities and description 41 | * Records management 42 | * Self-archiving, community archiving, protecting cultural capital, and citizen journalism 43 | * Defining the limits of a document, publication, or crawl 44 | * Community archiving and self-determination 45 | * Fraud, trust, provenance, verifiability, and fact-checking 46 | * Self-archiving 47 | * Backups, replication, and copying 48 | * Embedded material, JavaScript, data sources, and other external dependencies 49 | * Versioning and change notification 50 | * File formats, format databases, and obsolete data 51 | 52 | # Who should attend 53 | 54 | * Digital archivists, librarians, and records managers who have been pushing the boundaries of web-based technologies 55 | * Community archivists and citizen journalists who have experience with the limits and potential of documenting and preserving on the web 56 | * Creators of archival standards, including such concepts as preservation, discovery, rights management, metadata, etc. 57 | * Creators of web specifications, especially those which might be used by document creators or by those preserving online content, including such things as HTML, metadata schemas, documenting rights management, understanding trusted authorities, etc. 58 | * Other organizations involved in informal and formal preservation of information on the web. 59 | -------------------------------------------------------------------------------- /cfp.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: cfp 3 | --- 4 | 5 | # Call For Participation 6 | {: .no_toc} 7 | 8 | * TOC 9 | {:toc} 10 | 11 | ## What is the purpose of this workshop? 12 | 13 | This workshop brings together the people who work on archiving and preserving information from the Web or created with Web technologies. See [the workshop home page](./index.html) for further details. 14 | 15 | ## How can I attend? 16 | 17 | Attendance is free for all invited participants and is open to the public, whether or not W3C members. 18 | 19 | If you wish to express interest in attending, please fill out the registration form (WBS to be done). We want to fill the room with people with practical experience of both Web archival technologies and problems. 20 | 21 | Because the venue can accommodate unfortunately only 100 attendees, you must receive an acceptance email in order to attend. Also, be sure to keep an eye on [these important dates](#dates). 22 | 23 | As an alternative to the registration form, you are encouraged to submit a presentation topic in the form of a [position statement](#position-statements). 24 | 25 | Our aim is to get a diversity of attendees from a variety of industries and communities, including: 26 | 27 | * Digital archivists, librarians, and records managers who have been pushing the boundaries of web-based technologies 28 | * Community archivists and citizen journalists who have experience with the limits and potential of documenting and preserving on the web 29 | * Creators of archival standards, including such concepts as preservation, discovery, rights management, metadata, etc. 30 | * Creators of web specifications, especially those which might be used by document creators or by those preserving online content, including such things as HTML, metadata schemas, documenting rights management, understanding trusted authorities, etc. 31 | * Other organizations involved in informal and formal preservation of information on the web. 32 | 33 | 34 | This workshop, as other W3C meetings, operates under its [Code of Ethics and Professional Conduct](https://www.w3.org/Consortium/cepc/). 35 | 36 | ## Which topics will be covered? 37 | {: #topics} 38 | 39 | See list of topics on the [home page of the Workshop](./index.html#topics). 40 | 41 | Suggestions for further workshop topics? Submit a [pull request on GitHub](https://github.com/w3c/archival-workshop) or email Ivan Herman . 42 | 43 | ## How can I suggest a presentation? 44 | {: #position-statements} 45 | 46 | This is a Workshop, not a conference, and any presentations will be short, with topics suggested by submissions and decided by the chairs and program committee. Our goal is to actively discuss topics, not to watch presentations. 47 | 48 | In order to best facilitate informed discussion, we encourage attendees to read the accepted topics prior to attending the workshop. 49 | 50 | If you wish to present on a topic, you should submit a position statement (WBS to be set up) by the deadline (see [important dates](#dates)). Our program committee will review the input provided, and select the most relevant topics and perspectives. 51 | 52 | A good position statement should be a few paragraphs long and should include: 53 | 54 | * Your background in the main [topic areas](#topics) of the workshop. 55 | * Which topic you would like to lead discussion on. 56 | * Links to related supporting resources. 57 | * Any other topics you think the workshop should cover in order to be effective. 58 | * A focus on technical issues, not process or platform preference. We plan to talk about the what, not the how. 59 | * Position statements must be in English, preferably in HTML or plain-text format. You may include multiple topics, but we ask that each person submit only a single coherent position statement. The input provided at registration time (e.g., bio, goals, interests) will be published and linked to from this workshop page. 60 | 61 | ## Location 62 | 63 | The W3C Workshop will located at T.B.D. 64 | 65 | ### Venue 66 | {: .no_toc} 67 | 68 | Venue details 69 | {: .todo} 70 | 71 | ## Program Committee 72 | 73 | ### Chairs 74 | {: .no_toc} 75 | 76 | * Tzviya Siegman (Wiley) 77 | * Deborah Kaplan (Suberic Networks) 78 | * Ivan Herman (W3C) 79 | 80 | ### Committee Members 81 | {: .no_toc} 82 | 83 | * T.B.D. 84 | {: .todo} 85 | 86 | ## What is W3C? 87 | 88 | W3C is a voluntary standards consortium that convenes companies and communities to help structure productive discussions around existing and emerging technologies, and offers a Royalty-Free patent framework for Web Recommendations. W3C develops work based on the priorities of our members and our community. 89 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | -moz-box-sizing: border-box; 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | html, 10 | body { 11 | background: #fff; 12 | } 13 | 14 | html { 15 | font-size: 14px; 16 | padding: 3em; 17 | } 18 | 19 | body { 20 | border-radius: .6em; 21 | color: #333; 22 | font: 1.1em/1.3 Helvetica, Arial, Verdana, sans-serif; 23 | hyphens: none; 24 | margin: 0 auto; 25 | max-width: 65em; 26 | padding: 3em; 27 | } 28 | 29 | .header :first-child { 30 | margin-top: 0; 31 | } 32 | 33 | .footer :last-child { 34 | margin-bottom: 0; 35 | } 36 | 37 | h1, h2, h3, h4, h5, p, dl, ul, ol { 38 | margin: 1.5rem 0; 39 | } 40 | 41 | a, h1, h2, .menu a.active-tab { 42 | color: #005a9c; 43 | } 44 | 45 | a:hover { 46 | color: #111; 47 | } 48 | 49 | a.ref, 50 | .has-ref { 51 | cursor: pointer; 52 | } 53 | 54 | a.ref { 55 | color: inherit; 56 | display: none; 57 | font-size: 1em; 58 | left: 0; 59 | opacity: .25; 60 | position: absolute; 61 | text-decoration: none; 62 | } 63 | 64 | .has-ref:hover > a.ref { 65 | display: block; 66 | } 67 | 68 | .has-ref:target > a.ref { 69 | display: block; 70 | opacity: .5; 71 | } 72 | 73 | .has-ref { 74 | margin-left: -1em; 75 | padding-left: 1em; 76 | position: relative; 77 | } 78 | 79 | .graphic { 80 | height: 13em; 81 | margin: 0 -1.5em; 82 | overflow: hidden; 83 | position: relative; 84 | } 85 | 86 | .graphic img { 87 | bottom: 0; 88 | height: 100%; 89 | left: 0; 90 | position: absolute; 91 | width: 100%; 92 | } 93 | 94 | .box, .type { 95 | box-shadow: .3em .3em 0 rgba(0,0,0,.1); 96 | border: 1px solid #ccc; 97 | } 98 | 99 | /* If you rather clip than squeeze the image, remove `height: 100%`. */ 100 | .box { 101 | clear: right; 102 | color: #666; 103 | float: right; 104 | font-size: 1rem; 105 | margin-left: 3rem; 106 | padding: 1em; 107 | width: 19em; 108 | } 109 | 110 | .box + .box { 111 | margin-top: 2rem; 112 | } 113 | 114 | .box h2 { 115 | font-size: 1.2rem; 116 | line-height: 1.4; 117 | margin: 0; 118 | } 119 | 120 | .box *:last-child { 121 | margin-bottom: 0; 122 | } 123 | 124 | .image-paragraph-host { 125 | margin-bottom: .75em; 126 | } 127 | 128 | .image-paragraph { 129 | margin: 0; 130 | } 131 | 132 | .image-link { 133 | display: block; 134 | } 135 | 136 | .image-link img { 137 | max-width: 225px; 138 | padding: 2.5vmin 0; 139 | width: 100%; 140 | } 141 | 142 | .footer { 143 | border-top: 1px solid #eee; 144 | clear: both; 145 | color: #777; 146 | /* font-size: 1rem; */ 147 | font-size: 80%; 148 | margin: 2rem 0; 149 | padding-top: .5rem; 150 | } 151 | 152 | .menu { 153 | background: #005a9c; 154 | font-size: 1rem; 155 | margin: 0 0 2em; 156 | } 157 | 158 | .menu, .menu ul, .menu li { 159 | width: 100%; 160 | } 161 | 162 | .menu ul { 163 | display: flex; 164 | list-style: none; 165 | margin: 0; 166 | padding: 0; 167 | } 168 | 169 | .menu li + li a { 170 | border-left: 2px solid #fff; 171 | } 172 | 173 | .menu a { 174 | color: #eee; 175 | display: block; 176 | font-size: .95rem; 177 | height: 100%; 178 | padding: .6rem; 179 | text-align: center; 180 | text-decoration: none; 181 | transition: .05s background ease-in-out, .05s color ease-in-out; 182 | -moz-user-select: none; 183 | -ms-user-select: none; 184 | -webkit-user-select: none; 185 | user-select: none; 186 | width: 100%; 187 | } 188 | 189 | .menu a:hover { 190 | background: #111; 191 | color: #fff; 192 | } 193 | 194 | .menu a:active { 195 | opacity: .75; 196 | } 197 | 198 | .menu a.active-tab { 199 | background: #fff; 200 | font-weight: bold; 201 | pointer-events: none; 202 | border-top: solid thin #005a9c; 203 | border-bottom: solid thin #005a9c; 204 | } 205 | 206 | ul { 207 | list-style: square; 208 | margin-left: 0; 209 | padding-left: 1em; 210 | } 211 | 212 | blockquote { 213 | margin-left: 1em; 214 | } 215 | 216 | .main { 217 | margin-top: 3rem; 218 | } 219 | 220 | dd { 221 | margin: 0 0 .6em; 222 | } 223 | 224 | dt { 225 | font-weight: 700; 226 | margin-top: 1rem; 227 | } 228 | 229 | .main dt { 230 | margin-top: 2rem; 231 | } 232 | 233 | img { 234 | display: block; 235 | max-width: 100%; 236 | } 237 | 238 | h1, h2, h3, h4 { 239 | break-after: avoid; 240 | } 241 | 242 | .main h2 { 243 | margin-top: 1.5em; 244 | } 245 | 246 | address { 247 | line-height: .25em; 248 | } 249 | 250 | @media all and (min-width: 699px) { 251 | html { 252 | background: #005a9c; 253 | } 254 | } 255 | 256 | @media all and (max-width: 860px) { 257 | html { 258 | padding: 0; 259 | } 260 | 261 | body { 262 | border-radius: 0; 263 | } 264 | 265 | .menu ul { 266 | display: block; 267 | } 268 | 269 | .menu li + li a { 270 | border-top: 2px solid #fff; 271 | border-left: 0; 272 | } 273 | 274 | .menu li + li a { 275 | margin-left: 0; 276 | } 277 | 278 | .graphic { 279 | height: 10em; 280 | margin: 0; 281 | } 282 | 283 | /* The right-floating boxes become normal blocks. */ 284 | .box { 285 | float: none; 286 | margin-left: 0; 287 | width: auto; 288 | } 289 | } 290 | 291 | @page { 292 | margin: 2cm; 293 | } 294 | 295 | @media print { 296 | html { 297 | background: none; 298 | padding: 0; 299 | } 300 | 301 | body { 302 | background: none; 303 | border-radius: 0; 304 | padding: 0; 305 | } 306 | } 307 | 308 | /* Initialize footnote counters. */ 309 | body { 310 | counter-reset: footnote_counter footnote-ref_counter; 311 | } 312 | 313 | h2.footnote { 314 | counter-increment: footnote_counter; 315 | } 316 | 317 | a.footnote-ref { 318 | counter-increment: footnote-ref_counter; 319 | text-decoration: none; 320 | } 321 | 322 | h2.footnote:before { 323 | content: counter(footnote_counter); 324 | display: block; 325 | float: left; 326 | font-size: .9em; 327 | margin-right: 1.25ch; 328 | padding: 2em 4em; 329 | vertical-align: top; 330 | } 331 | 332 | h2.footnote:after { 333 | clear: both; 334 | content: ""; 335 | display: block; 336 | } 337 | 338 | a.footnote-ref:after { 339 | content: counter(footnote-ref_counter); 340 | font-size: .6em; 341 | margin-left: .25em; 342 | vertical-align: super; 343 | } 344 | 345 | h2.footnote:before, a.footnote-ref:after { 346 | background-color: #005a9c; 347 | border-radius: 50%; 348 | color: #fff; 349 | font-weight: 700; 350 | padding: .1em .5em; 351 | } 352 | 353 | .schedule { 354 | list-style: none; 355 | } 356 | 357 | .schedule li, 358 | summary .desc { 359 | display: flex; 360 | } 361 | 362 | .schedule li + li { 363 | margin-top: .5rem; 364 | } 365 | 366 | summary .time { 367 | background-color: #005c9c; 368 | border-radius: 5px 0 0 5px; 369 | color: #fff; 370 | display: block; 371 | font-weight: bold; 372 | margin-bottom: 5px; 373 | min-width: 8em; 374 | vertical-align: top; 375 | white-space: nowrap; 376 | } 377 | 378 | summary .time, .title, .type { 379 | padding: 3px 6px; 380 | } 381 | 382 | .break summary .time { 383 | background-color: #666; 384 | color: #fff; 385 | } 386 | 387 | .break .title { 388 | color: gray; 389 | font-style: italic; 390 | } 391 | 392 | summary .time span { font-size: 67%; } 393 | 394 | .type { 395 | clear: right; 396 | display: inline-block; 397 | font-size: 67%; 398 | font-weight: normal; 399 | height: 100%; 400 | margin: 0 13px 0 0; 401 | order: -1; 402 | min-width: 6em; 403 | } 404 | 405 | .type:empty { 406 | border-color: transparent; 407 | box-shadow: none; 408 | } 409 | 410 | dt.type { 411 | font-size: 100%; 412 | margin: 0; 413 | } 414 | 415 | .type-lightning { 416 | background-color: #ffe7ba; 417 | } 418 | 419 | .type-plenary { 420 | background-color: #b9d3ee; 421 | } 422 | 423 | .type-breakout { 424 | background-color: #c0d9af; 425 | } 426 | 427 | .type-panel { 428 | background-color: #ffe4e1; 429 | } 430 | 431 | span.title { 432 | display: block; 433 | flex: 1; 434 | margin-left: 5px; 435 | order: 1; 436 | } 437 | 438 | summary::-webkit-details-marker { 439 | display: none; 440 | } 441 | 442 | summary::-moz-list-bullet { 443 | list-style-type: none; 444 | } 445 | 446 | li:not(.no-details) details summary .desc { 447 | cursor: pointer; 448 | } 449 | 450 | details summary .desc:before { 451 | color: #999; 452 | content: "▶"; 453 | display: inline-block; 454 | height: 18px; 455 | margin-right: 8px; 456 | order: -2; 457 | width: 18px; 458 | } 459 | 460 | details[open] summary .desc:before { 461 | color: #666; 462 | transform: rotate(90deg); 463 | position: relative; 464 | left: -2px; 465 | top: 2px; 466 | } 467 | 468 | .no-details details .desc:before { 469 | content: ""; 470 | } 471 | 472 | details, .no-details details:hover { 473 | opacity: .9; 474 | } 475 | 476 | details summary { 477 | outline: none; 478 | } 479 | 480 | details:hover, details[open] summary { 481 | opacity: 1; 482 | } 483 | 484 | .schedule details { 485 | width: 100%; 486 | } 487 | 488 | .schedule details dl { 489 | box-shadow: .3em .3em 0 rgba(0,0,0,.1); 490 | border: 1px solid #ccc; 491 | margin: 9px 0 5px 27px; 492 | padding: 1rem; 493 | position: relative; 494 | } 495 | 496 | /* from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ 497 | .schedule details dl::after { 498 | border-color: #005c9c transparent; 499 | border-style: solid; 500 | border-width: 15px 15px 0; 501 | content: ""; 502 | display: block; 503 | left: 8em; 504 | position: absolute; 505 | top: -16px; 506 | width: 0; 507 | } 508 | 509 | .schedule details dt { 510 | margin: 0; 511 | } 512 | 513 | .schedule details dd { 514 | margin: 0 0 0 1rem; 515 | } 516 | 517 | .schedule details dd span { 518 | font-size: 75%; 519 | color: #888; 520 | display: block; 521 | margin-bottom: .25em; 522 | } 523 | 524 | .schedule details dd + dt { 525 | margin-top: 1rem; 526 | } 527 | 528 | .format { 529 | margin-bottom: 2.25rem; 530 | } 531 | 532 | .format dt { 533 | font-size: 1.1rem; 534 | /*font-weight: 600;*/ 535 | margin: .5rem 0 1.25rem; 536 | padding: .5rem 1rem; 537 | } 538 | 539 | .format dd { 540 | margin: 0 1rem 1.5rem; 541 | } 542 | 543 | .sponsors-section { 544 | margin-top: 1rem; 545 | } 546 | 547 | .sponsors-section :first-child { 548 | margin-top: 0; 549 | } 550 | 551 | .sponsors-section :last-child { 552 | margin-bottom: 0; 553 | } 554 | 555 | #notification { 556 | background-color: #ff0; 557 | border: 1px solid #ccc; 558 | box-shadow: .2em .4em .5em #888; 559 | color: #666; 560 | font-size: 1rem; 561 | font-weight: 700; 562 | margin: 0 0 1em; 563 | padding: .3em; 564 | text-align: center; 565 | } 566 | 567 | .concluded { 568 | text-decoration: line-through; 569 | } 570 | 571 | @media print { 572 | h1 { 573 | background: none; 574 | color: #111; 575 | } 576 | 577 | nav, aside { 578 | display: none; 579 | } 580 | 581 | body, article { 582 | margin: 0; 583 | padding: 0; 584 | width: 100%; 585 | } 586 | 587 | @page { 588 | margin: 2cm; 589 | } 590 | 591 | h2, h3 { 592 | page-break-after: avoid; 593 | } 594 | 595 | article { 596 | page-break-before: always; 597 | } 598 | 599 | ul, img { 600 | page-break-inside: avoid; 601 | } 602 | 603 | #dates { 604 | display: none; 605 | } 606 | } 607 | 608 | cite { font-weight: bold;} 609 | 610 | ol ol { margin: 1.5rem;} 611 | 612 | // -------------- 613 | 614 | .warning { 615 | box-shadow: 10px 5px 3px 0px gray; 616 | border-top-width: thin; 617 | border-right-width: thin; 618 | border-bottom-width: thin; 619 | border-left-width: thin; 620 | border-top-style: solid; 621 | border-right-style: solid; 622 | border-bottom-style: solid; 623 | border-left-style: solid; 624 | border-radius: 3px; 625 | width: 80%; 626 | padding-top: 0.5em; 627 | padding-right: 0.5em; 628 | padding-bottom: 0.5em; 629 | padding-left: 0.5em; 630 | } 631 | 632 | .warning h1 { 633 | font-size: 120%; 634 | font-style: italic; 635 | font-weight: bold; 636 | text-align: center; 637 | 638 | } 639 | 640 | .warning p { 641 | font-size: 110%; 642 | } 643 | 644 | .todo { 645 | color: #900; 646 | background-color:#FFC !important; 647 | font-style: italic; 648 | } 649 | 650 | * Table zebra style... */ 651 | table.zebra { 652 | font-size:inherit; 653 | font:90%; 654 | margin:1em; 655 | } 656 | 657 | table.zebra td { 658 | padding-left: 0.3em; 659 | } 660 | 661 | table.zebra td ol, table.zebra td ul { 662 | padding-left: 1em; 663 | } 664 | 665 | table.zebra td p.session-title { 666 | font-weight: bold; 667 | text-align: center; 668 | } 669 | 670 | table.zebra th { 671 | font-weight: bold; 672 | text-align: center; 673 | font-size: 100%; 674 | background: hsl(180, 30%, 50%); 675 | color: #fff; 676 | } 677 | 678 | table.zebra th a:link { 679 | color: #fff; 680 | } 681 | 682 | table.zebra th a:visited { 683 | color: #aaa; 684 | } 685 | 686 | table.zebra tr:nth-child(even) { 687 | background-color: hsl(180, 30%, 93%) 688 | } 689 | 690 | table.zebra th{border-bottom:1px solid #bbb;padding:.2em 1em;} 691 | table.zebra td{border-bottom:1px solid #ddd;padding:.2em 1em;} 692 | --------------------------------------------------------------------------------