Commit c5156350 authored by gijs's avatar gijs

Responsive layout

parent ec327c4f
......@@ -307,6 +307,8 @@
</div>
<div id="detail-container">
<div class="chrome"><span class="close-button">x</span></div>
<div class="content"></div>
</div>
</aside>
</main>
......@@ -319,6 +321,11 @@
<script>
var entries = document.querySelectorAll('.event');
var eventCloseButton = document.querySelector('#detail-container .close-button');
eventCloseButton.addEventListener('click', function () {
document.body.className = '';
});
function activate (entry, entries) {
for (var e = 0; e < entries.length; e++) {
entries[e].classList.remove('active');
......@@ -326,7 +333,7 @@
entry.classList.add('active');
var clone = entry.cloneNode(true);
var container = document.querySelector('#detail-container');
var container = document.querySelector('#detail-container .content');
container.classList.add('active');
while (container.hasChildNodes()) {
......@@ -334,7 +341,7 @@
}
container.appendChild(clone);
var question = document.querySelectorAll('#prolog');
var question = document.getElementById('prolog');
question.classList.add('blink');
}
......@@ -343,6 +350,7 @@
for (var i=0; i < entries.length; i++) {
(function (entry, entries) {
entry.addEventListener('click', function () {
document.body.className = 'event-active-through-click';
activate(entry, entries);
});
})(entries[i], entries);
......
......@@ -58,19 +58,18 @@ nav ul {
} */
.left {
flex: 2 0 0;
flex: 2 0;
border-right: 0px;
}
.right {
flex-direction: column;
flex: 1 0 0;
flex-direction: column;
flex: 1 0;
border-right: 2px solid;
}
.about {
border-top: 2px solid;
flex: 1 0 0;
flex: 1 0;
}
.left .about {
font-family: junicode-condensed;
......@@ -83,17 +82,17 @@ nav ul {
}
.intro {
font-family: "Junicode-Condensed";
font-size: 1.7em;
line-height: 1em;
font-size: 1.7em;
line-height: 1em;
}
.prolog {
padding: 20px;
background-color: var(--rose-pale);
flex: 2 1 0;
flex: 2 1;
overflow-y: auto;
}
.about {
flex: 1 1 0;
flex: 1 1;
}
dt {
font-size: 0.8em;
......@@ -125,4 +124,28 @@ blockquote footer {
font-size: 0.25em;
line-height: initial;
color: black;
} */
}
@media only screen and (max-width: 767px) {
main {
flex-direction: column;
}
.about {
max-height: initial;
}
.right .about {
margin-top: 0;
}
.left .contact {
margin-top: 77px;
}
.prolog {
padding: 20px;
background-color: var(--rose-pale);
flex: 1 1;
overflow-y: initial;
}
}
\ No newline at end of file
.agenda {
overflow-y: auto;
flex: 0 0 0;
flex: 0 0;
}
#detail-container.programme {
......@@ -15,37 +15,29 @@
#detail-container {
display: block;
}
}
@media only screen and (max-width: 767px) {
.right {
display: block;
top: 78px;
}
margin-top: 77px;
}
@media only screen and (max-width: 767px) {
.left {
height: auto;
}
}
@media only screen and (max-width: 767px) {
.agenda {
display: none;
}
}
@media only screen and (max-width: 767px) {
#prolog {
display: none;
}
}
@media only screen and (max-width: 767px) {
.about {
display: none;
}
}
@media only screen and (max-width: 767px) {
blockquote {
margin-right: 0pt;
}
}
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment