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
@font-face {
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-RegularCondensed.ttf");
font-weight: normal;
font-style: normal;
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-RegularCondensed.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-BoldItalicCondensed.ttf");
font-weight: bold;
font-style: italic;
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-BoldItalicCondensed.ttf");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-BoldCondensed.ttf");
font-weight: bold;
font-style: normal;
font-family: "Junicode-Condensed";
src: url("fonts/junicode/Junicode-BoldCondensed.ttf");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Caveat-Outline";
src: url("fonts/Caveat.woff");
font-weight: regular;
font-style: normal;
font-family: "Caveat-Outline";
src: url("fonts/Caveat.woff");
font-weight: regular;
font-style: normal;
}
@font-face {
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Reg.woff");
font-weight: regular;
font-style: normal;
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Reg.woff");
font-weight: regular;
font-style: normal;
}
@font-face {
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Bol.woff");
font-weight: Bold;
font-style: normal;
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Bol.woff");
font-weight: Bold;
font-style: normal;
}
@font-face {
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-BolIta.woff");
font-weight: Bold;
font-style: italic;
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-BolIta.woff");
font-weight: Bold;
font-style: italic;
}
@font-face {
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Ita.woff");
font-weight: regular;
font-style: italic;
font-family: "U001";
src: url("fonts/u001-font-univers/webfonts/U001-Ita.woff");
font-weight: regular;
font-style: italic;
}
/* width */
::-webkit-scrollbar {
width: 2px;
width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
background: #d6d6d6;;
background: #d6d6d6;
;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
background: #000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
color: rgb(0, 71, 171);
::-webkit-scrollbar-thumb:hover {
color: rgb(0, 71, 171);
}
/* ==========================================================================
......@@ -73,11 +84,7 @@
========================================================================== */
@custom-media --mobile only screen and (max-width: 767px);
@custom-media --mobile-landscape only screen and (max-width: 767px) and (orientation: landscape);
/* ==========================================================================
Variables
========================================================================== */
......@@ -99,42 +106,33 @@ body {
line-height: 1.2em;
height: 100%;
}
@media only screen and (max-width: 767px) {
body {
font-size: 1.1em;
}
}
p {
margin: 0;
}
p.event-date + p,
p.event-title + p,
p.event-date + p.event-date,
.event-infos,
p.event-title,
p.event-detail-title,
.event-detail-schedule .event-infos + p {
p.event-date+p, p.event-title+p, p.event-date+p.event-date, .event-infos, p.event-title, p.event-detail-title, .event-detail-schedule .event-infos+p {
margin-top: 0pt;
}
p.event-title + p.event-exerpt,
.event-detail-schedule .event-infos,
p + p{
p.event-title+p.event-exerpt, .event-detail-schedule .event-infos, p+p {
margin-top: 12pt;
}
strong {
/* font-family: "Junicode-Condensed"; */
font-weight: inherit;
font-style: italic;
/* text-transform: lowercase; */
}
/* .event-title strong {
font-size: 1.5em;
}
.partners strong {
font-size: 1.3em;
} */
a {
text-decoration: none;
color: inherit;
......@@ -154,31 +152,38 @@ a.artist {
/* font-weight: bold; */
vertical-align: middle;
}
a.artist span {
padding-bottom: 10px;
top: -13px;
bottom: 77px;
font-size: 4.8em;
}
div.button {
margin-top: 12px;
}
a:hover {
color: var(--orange-karel);
border-color: var(--orange-karel);
}
#detail-container a {
color: inherit;
border-color: inherit;
}
#detail-container a:hover {
color: var(--orange-karel);
border-color: var(--orange-karel);
}
.logo a {
border: 0px double black;
padding: 0px 0px;
}
sup {
line-height: 0pt;
}
......@@ -188,25 +193,19 @@ ul {
padding: 0;
list-style-type: none;
}
li::before {
content: "─ ";
}
nav {
top: 0px;
z-index: -100;
border-bottom: 2px solid;
z-index: 2000;
flex: 0 0 0;
z-index: 1;
flex: 0 0;
padding-bottom: 10px;
}
@media only screen and (max-width: 767px) {
nav {
position: fixed;
width: 95%;
background: white;
}
}
nav ul {
display: flex;
flex-direction: column;
......@@ -217,35 +216,34 @@ nav ul {
position: relative;
margin-top: 40px;
}
@media only screen and (max-width: 767px) {
nav ul {
margin-top: 15px;
}
}
nav ul li {
flex: 0 0 auto;
padding-right: 5px;
/* padding-top: 18px; */
display: inline-block;
}
nav ul li::before {
content: "";
}
nav li a {
text-decoration: none;
color: inherit;
border: 0px solid black;
font-size: 1em;
}
nav li a:hover {
color: var(--orange-karel);
border-color: var(--orange-karel);
}
img.logo {
width: 100%;
}
width: 100%;
}
p.logo {
width: 98px;
display: inline;
......@@ -256,11 +254,7 @@ p.logo {
margin-bottom: 10px;
float: left;
}
@media only screen and (max-width: 767px) {
p.logo {
width: 51px;;
}
}
#container {
margin: 0px 20px;
border-left: 2px solid;
......@@ -270,89 +264,54 @@ p.logo {
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 767px) {
#container {
margin: 0px 5px;
border: 0px solid;
display: block;
width: 97%;
}
}
main {
display: flex;
flex-direction: row;
flex: 1 0 0;
flex: 1 0;
overflow: hidden;
display: block;
display: flex;
}
@media only screen and (max-width: 767px) {
main {
flex-direction: column;
flex: 2 0 0;
border-left: 2px solid black;
border-right: 2px solid black;
}
}
.left {
display: flex;
flex-direction: column;
/* height: 100%; */
border-right: 2px solid;
flex: 1 0 0;
}
@media only screen and (max-width: 767px) {
.left {
z-index: 100;
/* width: 95%; */
border-right: 0px solid;
border-bottom: 2px solid black;
height: 55%;
/* position: fixed; */
background: white;
flex-direction: row;
}
flex: 1 0;
}
.right {
display: flex;
flex-direction: row;
flex: 2 0 0;
flex: 2 0;
}
@media only screen and (max-width: 767px) {
.right {
overflow: auto;
position: sticky;
top: 160px;
z-index: 0;
width: 100%;
}
}
.tags {
color:var(--bleu-bille);
color: var(--bleu-bille);
font-size: 0.7em;
}
.tags li, .documents li {
list-style-type: none;
display: inline-block;
padding: 0px 4px;
}
img.event-image {
border: 2px solid black;
width: 20%;
float: left;
margin-right: 0.5em;
margin-bottom: 0pt;
}
img.event-image {
border: 2px solid black;
max-width: 20%;
float: left;
margin-right: 0.5em;
margin-bottom: 0pt;
}
img.event-detail {
border : 2px solid black;
img.event-detail {
border: 2px solid black;
width: 100%;
margin: 0.3em 1em 0.3em 0;
}
}
#prolog, .about, .partners, .pad, .contact {
padding: 20px
}
......@@ -361,43 +320,33 @@ main {
background: white;
overflow-y: auto;
}
#prolog {
flex: 2 0 0;
color: #ff3f00;
/* background-color: var(--rose-pale); */
background-image: url(img/caveat-at-batard-festival-03.png);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
flex: 2 0;
color: #ff3f00;
/* background-color: var(--rose-pale); */
background-image: url(img/caveat-at-batard-festival-03.png);
background-repeat: no-repeat;
background-position: right;
background-size: cover;
}
@media only screen and (max-width: 767px) {
#prolog {
border-right: 2px solid black;
flex: 60px 0 0;
margin-top: 79px;
position: sticky;
}
}
.about {
border-top: 2px solid;
flex: 1 0 0;
flex: 1 0;
}
@media only screen and (max-width: 767px) {
.about {
margin-top: 77px;
font-size: 0.8em;
}
}
.intro {
font-family: "Junicode-Condensed";
font-size: 1.7em;
line-height: 1em;
font-size: 1.7em;
line-height: 1em;
}
.agenda {
overflow-y: auto;
flex: 1 0 0;
flex: 1 0;
}
/* .agenda .event.active::before {