<div class="site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <header class="masthead">
      <img src="https://2017.europe.wordcamp.org/files/2017/03/logo-wceu17-symbol.png">
        <p class="site-title">WordCamp Europe 2017</p>
      <p class="site-description">June 15-17, Paris, France | #WCEU</p>
    </header><!-- .masthead -->
  
  <h1 class="page-title">Saturday, June 17th</h1>

    <main id="content" class="main-content">
        <ul class="schedule-list">
          <li>
            <h2 class="talk-title">CSS Grid Changes Everything (About Web Layouts)</h2>
            <p class="talk-speaker">Morten Rand-Hendriksen</p>
            <p class="talk-time">9:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Using WordPress for Good</h2>
            <p class="talk-speaker">Sasha Endoh</p>
            <p class="talk-time">10:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Accessibility in the Age of the Headless CMS</h2>
            <p class="talk-speaker">Rian Rietveld</p>
            <p class="talk-time">11:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Selfish Accessibility</h2>
            <p class="talk-speaker">Adrian Roselli</p>
            <p class="talk-time">12:00 pm</p>
          </li>
          <li class="lunch">
            <h2 class="talk-title">Lunch</h2>
            <p class="talk-time">1:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Lightning Talks - Inspire</h2>
            <p class="talk-speaker">Thabo Tswana, Marco Calicchia, Alice Orru, Tom Greenwood</p>
            <p class="talk-time">2:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Interview and Q&amp;A with Matt Mullenweg</h2>
            <p class="talk-speaker">Matt Mullenweg and Om Malik</p>
            <p class="talk-time">3:00 pm</p>    <li>
            <h2 class="talk-title">Reacting Natively with WordPress</h2>
            <p class="talk-speaker">Pirate Dunbar</p>
            <p class="talk-time">4:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Data Visualization with the REST API</h2>
            <p class="talk-speaker">K. Adam White</p>
            <p class="talk-time">5:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Closing Remarks</h2>
            <p class="talk-speaker">Paolo Belcastro</p>
            <p class="talk-time">6:00 pm</p>
          </li>
      </ul>
    </main>

    <aside class="sidebar">
      <ul class="info">
        <li class="a11y">
          <h2 class="info-heading">Accessibility and Inclusivity</h2>
        </li>
        <li class="coc">
          <h2 class="info-heading">Code of Conduct</h2>
        </li>
        <li class="contact">
          <h2 class="info-heading">Contact</h2>
        </li>
        <li class="faq">
          <h2 class="info-heading">Frequently Asked Questions</h2>
        </li>
      </ul>
    </aside>

    
    <footer class="colophon">
      <h2>Location:</h2>
      <address>Les Docks de Paris <br />
        87 avenue des Magasins Généraux <br />
        93300 Aubervilliers <br />
        France
      </address>
    </footer>

</div>
/* NOTE:
 * Grid layout stuff starts at line 224. 
 * The stuff before is just boring old CSS to make content look not crappy.
 */

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/

.masthead {
  padding: 2em;
  background: #272427;
  text-align: center;
}

.masthead img {
  width: 180px;
  margin: 0 auto;
}

.site-title {
  margin: 1em 0 0;
  padding: 0;
  font-size: 1.5625em;
  font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #c96;
}

.site-description {  
  margin: 0 0 1em;
  padding: 0;
  font-size: 1em;
  font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: hsla(0,0%,100%,.6);
}

.page-title {
  text-align: center;
  background-image: url(https://2017.europe.wordcamp.org/files/2017/01/background-pattern-01.png);
  background-color: #f5ebe0
}

.main-content {
	background: white;
  padding: 2em;
}

.schedule-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.schedule-list li {
  margin: .5em 0;
  padding: 1em 0;
  border-bottom: 1px dotted black;
}

.schedule-list li:last-child {
  border-bottom: none;
}

.talk-title {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
}

.talk-speaker {
  margin: .5em 0;
  padding: 0;
}

.talk-time {
  margin: .5em 0;
  padding: 0;
  font-weight: bold;
}

.sidebar {
  background: #272427;
}

.info {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: white;
}

.info li {
  padding: 1em;
  text-align: center;
}

.a11y {
  color: #272427;
  background: #f1e4d5;
}

.coc {
  background: #e7ab46;
}

.contact {
  background: #68470d;
}

.faq {
  background: #cc9966;
}

.colophon {
	padding: 1em 2em;
  background: #272427;
	color: white;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.page-title,
  .main-content,
  .sidebar {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@supports (display: grid) {
  @media screen and (min-width: 800px) {
    
  	.site {
			display: grid;
			grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr 3fr;
      grid-template-areas:
        "content-head content-head"
        "main header"
        "main sidebar"
        "footer footer";
		}
    
    .masthead {
      grid-area: header;
    }
    
    .page-title {
      grid-area: content-head;
    }
    
    .main-content {
      grid-area: main;
    }
    
    .sidebar {
      grid-area: sidebar;
    }
		
    .colophon {
      grid-area: footer;
    }
    
	}
  
  @media screen and (min-width: 1200px) {
    .site {
			grid-template-columns: 2fr 1fr 1fr;
      grid-template-areas:
        "content-head content-head content-head"
        "main header header"
        "main sidebar footer";
		}
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.