187 lines
5.9 KiB
CSS
187 lines
5.9 KiB
CSS
/*************************
|
|
* GRID SCHEDULE LAYOUT
|
|
*************************/
|
|
@media screen and (min-width:700px) {
|
|
.schedule {
|
|
display: grid;
|
|
column-gap: 0.5em;
|
|
row-gap:0.7em;
|
|
grid-template-rows:
|
|
[tracks] auto
|
|
/*[time-0800] 0.005fr
|
|
[time-0805] 0.005fr
|
|
[time-0810] 0.005fr
|
|
[time-0815] 0.005fr
|
|
[time-0820] 0.005fr
|
|
[time-0825] 0.005fr
|
|
[time-0830] 0.005fr
|
|
[time-0835] 0.005fr
|
|
[time-0840] 0.005fr
|
|
[time-0845] 0.005fr
|
|
[time-0850] 0.005fr
|
|
[time-0855] 0.005fr */
|
|
[time-0900] 0.005fr
|
|
[time-0905] 0.005fr
|
|
[time-0910] 0.005fr
|
|
[time-0915] 0.005fr
|
|
[time-0920] 0.005fr
|
|
[time-0925] 0.005fr
|
|
[time-0930] 0.005fr
|
|
[time-0935] 0.005fr
|
|
[time-0940] 0.005fr
|
|
[time-0945] 0.005fr
|
|
[time-0950] 0.005fr
|
|
[time-0955] 0.005fr
|
|
[time-1000] 0.005fr
|
|
[time-1005] 0.005fr
|
|
[time-1010] 0.005fr
|
|
[time-1015] 0.005fr
|
|
[time-1020] 0.005fr
|
|
[time-1025] 0.005fr
|
|
[time-1030] 0.005fr
|
|
[time-1035] 0.005fr
|
|
[time-1040] 0.005fr
|
|
[time-1045] 0.005fr
|
|
[time-1050] 0.005fr
|
|
[time-1055] 0.005fr
|
|
[time-1100] 0.005fr
|
|
[time-1105] 0.005fr
|
|
[time-1110] 0.005fr
|
|
[time-1115] 0.005fr
|
|
[time-1120] 0.005fr
|
|
[time-1125] 0.005fr
|
|
[time-1130] 0.005fr
|
|
[time-1135] 0.005fr
|
|
[time-1140] 0.005fr
|
|
[time-1145] 0.005fr
|
|
[time-1150] 0.005fr
|
|
[time-1155] 0.005fr
|
|
[time-1200] 0.005fr
|
|
[time-1205] 0.005fr
|
|
[time-1210] 0.005fr
|
|
[time-1215] 0.005fr
|
|
[time-1220] 0.005fr
|
|
[time-1225] 0.005fr
|
|
[time-1230] 0.005fr
|
|
[time-1235] 0.005fr
|
|
[time-1240] 0.005fr
|
|
[time-1245] 0.005fr
|
|
[time-1250] 0.005fr
|
|
[time-1255] 0.005fr
|
|
[time-1300] 0.005fr
|
|
[time-1305] 0.005fr
|
|
[time-1310] 0.005fr
|
|
[time-1315] 0.005fr
|
|
[time-1320] 0.005fr
|
|
[time-1325] 0.005fr
|
|
[time-1330] 0.005fr
|
|
[time-1335] 0.005fr
|
|
[time-1340] 0.005fr
|
|
[time-1345] 0.005fr
|
|
[time-1350] 0.005fr
|
|
[time-1355] 0.005fr
|
|
[time-1400] 0.005fr
|
|
[time-1405] 0.005fr
|
|
[time-1410] 0.005fr
|
|
[time-1415] 0.005fr
|
|
[time-1420] 0.005fr
|
|
[time-1425] 0.005fr
|
|
[time-1430] 0.005fr
|
|
[time-1435] 0.005fr
|
|
[time-1440] 0.005fr
|
|
[time-1445] 0.005fr
|
|
[time-1450] 0.005fr
|
|
[time-1455] 0.005fr
|
|
[time-1500] 0.005fr
|
|
[time-1505] 0.005fr
|
|
[time-1510] 0.005fr
|
|
[time-1515] 0.005fr
|
|
[time-1520] 0.005fr
|
|
[time-1525] 0.005fr
|
|
[time-1530] 0.005fr
|
|
[time-1535] 0.005fr
|
|
[time-1540] 0.005fr
|
|
[time-1545] 0.005fr
|
|
[time-1550] 0.005fr
|
|
[time-1555] 0.005fr
|
|
[time-1600] 0.005fr
|
|
[time-1605] 0.005fr
|
|
[time-1610] 0.005fr
|
|
[time-1615] 0.005fr
|
|
[time-1620] 0.005fr
|
|
[time-1625] 0.005fr
|
|
[time-1630] 0.005fr
|
|
[time-1635] 0.005fr
|
|
[time-1640] 0.005fr
|
|
[time-1645] 0.005fr
|
|
[time-1650] 0.005fr
|
|
[time-1655] 0.005fr
|
|
[time-1700] 0.005fr
|
|
[time-1705] 0.005fr
|
|
[time-1710] 0.005fr
|
|
[time-1715] 0.005fr
|
|
[time-1720] 0.005fr
|
|
[time-1725] 0.005fr
|
|
[time-1730] 0.005fr
|
|
[time-1735] 0.005fr
|
|
[time-1740] 0.005fr
|
|
[time-1745] 0.005fr
|
|
[time-1750] 0.005fr
|
|
[time-1755] 0.005fr;
|
|
/* Note 1:
|
|
Use 24hr time for gridline names for simplicity
|
|
|
|
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!
|
|
Try 0.5fr for more compact equal rows. I don't quite understand how that works :)
|
|
*/
|
|
|
|
grid-template-columns:
|
|
[times] 4em
|
|
[track-1-start] 1fr
|
|
[track-1-end track-2-start] 1fr
|
|
[track-2-end track-3-start] 1fr
|
|
[track-3-end track-4-start] 1fr
|
|
[track-4-end track-5-start] 1fr
|
|
[track-5-end track-6-start] 1fr
|
|
[track-6-end];
|
|
}
|
|
}
|
|
.time-slot { grid-column: times; }
|
|
.track-slot { display: none; }
|
|
/* hidden on small screens and browsers without grid support */
|
|
|
|
@supports(display:grid ) { @media screen and(min-width:700px) {
|
|
.track-slot { display: block; padding: 10px 5px 5px; position: sticky; top: 0; z-index: 1000; background-color: rgba(255,255,255,.9); } } }
|
|
/* Small-screen & fallback styles */
|
|
@supports(display:grid ) { @media screen and(min-width: 700px) { .session { margin: 0; } } }
|
|
|
|
/* VISUAL STYLES * Design-y stuff ot particularly important to the demo */
|
|
|
|
body { padding: 50px; /*max-width: 1100px;*/ margin: 0 auto; line-height: 1.5; }
|
|
.session { padding: .5em; border-radius: 2px; font-size: 14px; }
|
|
|
|
/* box-shadow: rgba(255,255,255,.6) 1px 1px 0, rgba(0,0,0,.3) 4px 4px 0; */
|
|
|
|
.session-title, .session-time, .session-track, .session-presenter { display: block; }
|
|
.session-title, .time-slot { margin: 0; font-size: 1em; }
|
|
.session-title a { color: #fff; text-decoration-style: dotted; &:hover { font-style: italic; }
|
|
&:focus { outline: 2px dotted rgba(255,255,255,.8); }
|
|
}
|
|
.track-slot, .time-slot { font-weight: bold; font-size:.75em; }
|
|
.track-123 { background-color: #ffa8ca; color: #000; }
|
|
.track-0 { background-color: #ffa8ca; color: #000; }
|
|
.track-1 { background-color: #f3ba59; color: #fff; }
|
|
.track-2 { background-color: #e96b8f; color: #fff; }
|
|
.track-3 { background-color: #ff9ffc; color: #fff; }
|
|
.track-4 { background-color: #b4d3c0; color: #fff; }
|
|
.track-5 { background-color: #dad9ff; color: #fff; }
|
|
.track-6 { background-color: #9ccae1; color: #fff; }
|
|
.track-all { display: flex; justify-content: center; align-items: center; background: #ccc; color: #000; box-shadow: none; }
|
|
.text { max-width: 750px; font-size: 18px; margin: 0 auto 50px; }
|
|
.session h3, .session { color: #272727; }
|
|
.meta { color: #555; font-style: italic; }
|
|
.meta a { color: #555; }
|
|
.chart_timebox { color:lightgrey; border:1px solid lightgrey; padding:5px; }
|
|
.chart_time { color:#5c5b5b; font-size: 80%; }
|
|
hr { margin: 40px 0; } |