295 lines
11 KiB
PHP
295 lines
11 KiB
PHP
<style>
|
|
/*************************
|
|
* GRID SCHEDULE LAYOUT
|
|
*************************/
|
|
@media screen and (min-width:700px) {
|
|
.schedule {
|
|
display: grid;
|
|
grid-gap: 1em;
|
|
grid-template-rows:
|
|
[tracks] auto
|
|
[time-0800] 0.025fr
|
|
[time-0805] 0.025fr
|
|
[time-0810] 0.025fr
|
|
[time-0815] 0.025fr
|
|
[time-0820] 0.025fr
|
|
[time-0825] 0.025fr
|
|
[time-0830] 0.025fr
|
|
[time-0835] 0.025fr
|
|
[time-0840] 0.025fr
|
|
[time-0845] 0.025fr
|
|
[time-0850] 0.025fr
|
|
[time-0855] 0.025fr
|
|
[time-0900] 0.025fr
|
|
[time-0905] 0.025fr
|
|
[time-0910] 0.025fr
|
|
[time-0915] 0.025fr
|
|
[time-0920] 0.025fr
|
|
[time-0925] 0.025fr
|
|
[time-0930] 0.025fr
|
|
[time-0935] 0.025fr
|
|
[time-0940] 0.025fr
|
|
[time-0945] 0.025fr
|
|
[time-0950] 0.025fr
|
|
[time-0955] 0.025fr
|
|
[time-1000] 0.025fr
|
|
[time-1005] 0.025fr
|
|
[time-1010] 0.025fr
|
|
[time-1015] 0.025fr
|
|
[time-1020] 0.025fr
|
|
[time-1025] 0.025fr
|
|
[time-1030] 0.025fr
|
|
[time-1035] 0.025fr
|
|
[time-1040] 0.025fr
|
|
[time-1045] 0.025fr
|
|
[time-1050] 0.025fr
|
|
[time-1055] 0.025fr
|
|
[time-1100] 0.025fr
|
|
[time-1105] 0.025fr
|
|
[time-1110] 0.025fr
|
|
[time-1115] 0.025fr
|
|
[time-1120] 0.025fr
|
|
[time-1125] 0.025fr
|
|
[time-1130] 0.025fr
|
|
[time-1135] 0.025fr
|
|
[time-1140] 0.025fr
|
|
[time-1145] 0.025fr
|
|
[time-1150] 0.025fr
|
|
[time-1155] 0.025fr
|
|
[time-1200] 0.025fr
|
|
[time-1205] 0.025fr
|
|
[time-1210] 0.025fr
|
|
[time-1215] 0.025fr
|
|
[time-1220] 0.025fr
|
|
[time-1225] 0.025fr
|
|
[time-1230] 0.025fr
|
|
[time-1235] 0.025fr
|
|
[time-1240] 0.025fr
|
|
[time-1245] 0.025fr
|
|
[time-1250] 0.025fr
|
|
[time-1255] 0.025fr
|
|
[time-1300] 0.025fr
|
|
[time-1305] 0.025fr
|
|
[time-1310] 0.025fr
|
|
[time-1315] 0.025fr
|
|
[time-1320] 0.025fr
|
|
[time-1325] 0.025fr
|
|
[time-1330] 0.025fr
|
|
[time-1335] 0.025fr
|
|
[time-1340] 0.025fr
|
|
[time-1345] 0.025fr
|
|
[time-1350] 0.025fr
|
|
[time-1355] 0.025fr
|
|
[time-1400] 0.025fr
|
|
[time-1405] 0.025fr
|
|
[time-1410] 0.025fr
|
|
[time-1415] 0.025fr
|
|
[time-1420] 0.025fr
|
|
[time-1425] 0.025fr
|
|
[time-1430] 0.025fr
|
|
[time-1435] 0.025fr
|
|
[time-1440] 0.025fr
|
|
[time-1445] 0.025fr
|
|
[time-1450] 0.025fr
|
|
[time-1455] 0.025fr
|
|
[time-1500] 0.025fr
|
|
[time-1505] 0.025fr
|
|
[time-1510] 0.025fr
|
|
[time-1515] 0.025fr
|
|
[time-1520] 0.025fr
|
|
[time-1525] 0.025fr
|
|
[time-1530] 0.025fr
|
|
[time-1535] 0.025fr
|
|
[time-1540] 0.025fr
|
|
[time-1545] 0.025fr
|
|
[time-1550] 0.025fr
|
|
[time-1555] 0.025fr
|
|
[time-1600] 0.025fr
|
|
[time-1605] 0.025fr
|
|
[time-1610] 0.025fr
|
|
[time-1615] 0.025fr
|
|
[time-1620] 0.025fr
|
|
[time-1625] 0.025fr
|
|
[time-1630] 0.025fr
|
|
[time-1635] 0.025fr
|
|
[time-1640] 0.025fr
|
|
[time-1645] 0.025fr
|
|
[time-1650] 0.025fr
|
|
[time-1655] 0.025fr
|
|
[time-1700] 0.025fr
|
|
[time-1705] 0.025fr
|
|
[time-1710] 0.025fr
|
|
[time-1715] 0.025fr
|
|
[time-1720] 0.025fr
|
|
[time-1725] 0.025fr
|
|
[time-1730] 0.025fr
|
|
[time-1735] 0.025fr
|
|
[time-1740] 0.025fr
|
|
[time-1745] 0.025fr
|
|
[time-1750] 0.025fr
|
|
[time-1755] 0.025fr;
|
|
/* 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];
|
|
}
|
|
}
|
|
.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 */
|
|
.session { margin-bottom: 1em; }
|
|
@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-1 { background-color: #1259B2; color: #fff; }
|
|
.track-2 { background-color: #687f00; color: #fff; }
|
|
.track-3 { background-color: #544D69; color: #fff; }
|
|
.track-4 { background-color: #c35500; 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; }
|
|
.meta { color: #555; font-style: italic; }
|
|
.meta a { color: #555; }
|
|
hr { margin: 40px 0; }
|
|
|
|
</style>
|
|
<div class="text">
|
|
|
|
<h1>Conference Schedule with CSS Grid</h1>
|
|
|
|
<p>Demo for article <a href="https://css-tricks.com/building-a-conference-schedule-with-css-grid/">"Building a Conference Schedule with CSS Grid"</a> on CSS Tricks.<p>
|
|
|
|
<p><i><small>By <a href="https://MRWweb.com">Mark Root-Wiley</a>.</small></i></p>
|
|
|
|
<hr>
|
|
|
|
</div>
|
|
|
|
<h2 id="schedule-heading">Conference Schedule</h2>
|
|
<div class="schedule" aria-labelledby="schedule-heading">
|
|
|
|
<span class="track-slot" aria-hidden="true" style="grid-column: track-1; grid-row: tracks;">Track 1</span>
|
|
<span class="track-slot" aria-hidden="true" style="grid-column: track-2; grid-row: tracks;">Track 2</span>
|
|
<span class="track-slot" aria-hidden="true" style="grid-column: track-3; grid-row: tracks;">Track 3</span>
|
|
<span class="track-slot" aria-hidden="true" style="grid-column: track-4; grid-row: tracks;">Track 4</span>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-0800;">8:00am</h2>
|
|
|
|
<div class="session session-1 track-1" style="grid-column: track-1; grid-row: time-0800 / time-0900;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">8:00 - 9:00</span>
|
|
<span class="session-track">Track: 1</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-2 track-2" style="grid-column: track-2; grid-row: time-0800 / time-0830;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">8:00 - 8:30</span>
|
|
<span class="session-track">Track: 2</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-3 track-3" style="grid-column: track-3; grid-row: time-0800 / time-0830;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">8:00 - 8:30</span>
|
|
<span class="session-track">Track: 3</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-4 track-4" style="grid-column: track-4; grid-row: time-0800 / time-1000;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">8:00 - 10:00</span>
|
|
<span class="session-track">Track: 2</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-0830;">8:30am</h2>
|
|
|
|
<div class="session session-5 track-3" style="grid-column: track-3; grid-row: time-0830 / time-1000;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">8:30 - 10:00</span>
|
|
<span class="session-track">Track: 1</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-0900;">9:00am</h2>
|
|
|
|
<div class="session session-6 track-1" style="grid-column: track-1-start / track-2-end; grid-row: time-0900 / time-1000;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">9:00 - 10:00</span>
|
|
<span class="session-track">Track: 1 & 2</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-1000;">10:00am</h2>
|
|
|
|
<div class="session session-7 track-all" style="grid-column: track-1-start / track-4-end; grid-row: time-1000 / time-1030;">
|
|
<h3 class="session-title">Take a break!</h3>
|
|
</div>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-1030;">10:30am</h2>
|
|
|
|
<div class="session session-8 track-1" style="grid-column: track-1; grid-row: time-1030 / time-1130;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">10:30 - 11:30</span>
|
|
<span class="session-track">Track: 1</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-9 track-2" style="grid-column: track-2-start / track-3-end; grid-row: time-1030 / time-1100;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">10:30 - 11:00</span>
|
|
<span class="session-track">Track: 2 & 3</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-10 track-4" style="grid-column: track-4; grid-row: time-1030 / time-1100;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">10:30 - 11:00</span>
|
|
<span class="session-track">Track: 4</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<h2 class="time-slot" style="grid-row: time-1100;">11:00am</h2>
|
|
|
|
<div class="session session-11 track-2" style="grid-column: track-2; grid-row: time-1100 / time-1200;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">11:00 - 12:00</span>
|
|
<span class="session-track">Track: 2</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
<div class="session session-11 track-3" style="grid-column: track-3; grid-row: time-1100 / time-1200;">
|
|
<h3 class="session-title"><a href="#">Talk Title</a></h3>
|
|
<span class="session-time">11:00 - 12:00</span>
|
|
<span class="session-track">Track: 3</span>
|
|
<span class="session-presenter">Presenter</span>
|
|
</div>
|
|
|
|
</div> |