<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&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";
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.