@charset "utf-8"; /* CSS Document */ /************************* * LAYOUT *************************/ .schedule { line-height: 1.5; } /*.track-slot { display: none; }*/ .session { margin-bottom: 1em; } .label-online { display: none; } .label-inperson { display: none; } @supports( display:grid ) { @media screen and (min-width:400px) { .schedule { display: grid; /*height: 100vh;*/ } /* a background for the sticky tracks */ .schedule::after { display: block; content: ''; position: sticky; top: 0; grid-column: track-1 / -1; grid-row: tracks; z-index: 999; background-color: none; } .track-slot { display: block; padding: .5em 1em .5em .5em; position: sticky; top: 0; /* otherwise seeing a gap above in at least Firefox. */ z-index: 1000; } .session { margin: 0; } .track { margin: .65em; text-indent: -.65em; } .label-online { grid-column: 2 / 3; grid-row: tracks; padding:.5rem; color: black; } .label-inperson { grid-column: 3 / 4; grid-row: tracks; } } } .schedule-6 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-1300] auto [time-1315] auto [time-1330] auto [time-1345] auto [time-1400] auto [time-1415] auto [time-1430] auto [time-1445] auto [time-1500] auto [time-1515] auto [time-1530] auto [time-1545] auto [time-1600] auto [time-1615] auto [time-1630] auto; /* Note 1: In this format, gridlines will need to be "named" in 24hr time */ /* Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this! */ } .schedule-7 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-1300] auto [time-1315] auto [time-1330] auto [time-1345] auto [time-1400] auto [time-1415] auto [time-1430] auto [time-1445] auto [time-1500] auto [time-1515] auto [time-1530] auto [time-1545] auto /* Note 1: In this format, gridlines will need to be "named" in 24hr time */ /* Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this! */ } .schedule-9 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-0800] auto [time-0815] auto [time-0830] auto [time-0845] auto [time-0900] auto [time-0915] auto [time-0930] auto [time-0945] auto [time-1000] auto [time-1015] auto [time-1030] auto [time-1045] auto [time-1100] auto [time-1115] auto [time-1130] auto [time-1145] auto [time-1200] auto [time-1215] auto [time-1230] auto [time-1245] auto [time-1300] auto [time-1315] auto [time-1330] auto [time-1345] auto [time-1400] auto [time-1415] auto [time-1430] auto [time-1445] auto [time-1500] auto [time-1515] auto [time-1530] auto [time-1545] auto [time-1600] auto [time-1615] auto [time-1630] auto [time-1645] auto [time-1700] auto [time-1715] auto [time-1730] auto [time-1745] auto [time-1800] auto [time-1815] auto [time-1830] auto [time-1845] auto [time-1900] auto [time-1915] auto [time-1930] auto [time-1945] auto [time-2000] auto [time-2015] auto [time-2030] auto [time-2045] auto [time-2100] auto [time-2115] auto [time-2130] auto [time-2145] auto; } .schedule-10 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-0800] auto [time-0815] auto [time-0830] auto [time-0845] auto [time-0900] auto [time-0915] auto [time-0930] auto [time-0945] auto [time-1000] auto [time-1015] auto [time-1030] auto [time-1045] auto [time-1100] auto [time-1115] auto [time-1130] auto [time-1145] auto [time-1200] auto [time-1215] auto [time-1230] auto [time-1245] auto [time-1300] auto [time-1315] auto [time-1330] auto [time-1345] auto [time-1400] auto [time-1415] auto [time-1430] auto [time-1445] auto [time-1500] auto [time-1515] auto [time-1530] auto [time-1545] auto [time-1600] auto [time-1615] auto [time-1630] auto [time-1645] auto [time-1700] auto [time-1715] auto [time-1730] auto [time-1745] auto [time-1800] auto [time-1815] auto; } .schedule-11 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-0800] auto [time-0815] auto [time-0830] auto [time-0845] auto [time-0900] auto [time-0915] auto [time-0930] auto [time-0945] auto [time-1000] auto [time-1015] auto [time-1030] auto [time-1045] auto [time-1100] auto [time-1115] auto [time-1130] auto [time-1145] auto [time-1200] auto [time-1215] auto [time-1230] auto [time-1245] auto [time-1300] auto [time-1315] auto [time-1330] auto [time-1345] auto [time-1400] auto [time-1415] auto [time-1430] auto [time-1445] auto [time-1500] auto [time-1515] auto [time-1530] auto [time-1545] auto [time-1600] auto [time-1615] auto [time-1630] auto [time-1645] auto [time-1700] auto [time-1715] auto [time-1730] auto [time-1745] auto [time-1800] auto [time-1815] auto [time-1830] auto [time-1845] auto [time-1900] auto [time-1915] auto [time-1930] auto [time-1945] auto [time-2000] auto [time-2015] auto [time-2030] auto [time-2045] auto; } .schedule-12 { grid-gap: .5em; grid-template-rows: [tracks] auto [time-0800] auto [time-0815] auto [time-0830] auto [time-0845] auto [time-0900] auto [time-0915] auto [time-0930] auto [time-0945] auto [time-1000] auto [time-1015] auto [time-1030] auto [time-1045] auto [time-1100] auto [time-1115] auto [time-1130] auto [time-1145] auto [time-1200] auto [time-1215] auto [time-1230] auto [time-1245] auto [time-1300] auto [time-1315] auto [time-1330] auto; } .schedule-6, .schedule-7, .schedule-9, .schedule-10, .schedule-11, .schedule-12 { grid-template-columns: [times] 5em [track-1-start] 1fr [track-2-start] 1fr [track-2-end]; } /************************* * VISUAL STYLES *************************/ .session { padding: .75em; border-radius: 3px; font-size: 16px; } .title { margin: 0; font-size: 1.45rem; } .title a { color: white; } .time { margin: 0; } .time-slot { margin: 0; font-size: 1rem; } /*body {counter-reset: session-count;} .title::before { counter-increment: session-count; content: 'Session #' counter(session-count) ': '; }*/ .track-slot, .time-slot { font-weight: bold; } .time-slot { text-align: right; margin-right: 1ch; } span { display: block; } .keynote { background-color: #f0982e; color: #fff; } .ipinc { background-color: #666666; color: #fff; } .ipevent { background-color: #687f00; color: #fff; } .offsite { background-color: #544d69; color: #fff; } .vevent { background-color: #2751f2; color: #fff; } .vlight { background-color: #586dbf; color: #fff; } .track-many { display: flex; justify-content: center; align-items: center; background-color: #f0982e; color: #fff; } @media screen and (min-width: 480px) { .track { display: none; } .label-online { display: block; } .label-inperson { display: block; } }