Commit 6db96a14 authored by sarah's avatar sarah

layouting

parent d9505398
......@@ -7,18 +7,32 @@
<script src="less.min.js" type="text/javascript"></script>
</head>
<body>
<div id="logo">
<!--div id="logo">
<h1>Incertains Genres</h1><br/>
<h2>Réseau ((E)) ((C)) ((A)) ((R)) ((T))</h2>
</div>
</div-->
<div class="intro">
<h1>Incertains Genres</h1><br/>
<p>Exposition consacrée aux travaux des ateliers de céramique des écoles supérieures participant au réseau Écart: La Cambre (Bruxelles), Pavillon Bosio (Monaco), Villa Arson (Nice), Esba (Le Mans) et Ensa (Limoges). </p>
<p>
Le réseau Écart, mis sur pied en 2009, offre un lieu d’échange aux écoles supérieures d’enseignement de la céramique artistique. Il mise sur la la pédagogie collaborative et l’ouverture. Depuis sa création le réseau met en valeur les compétences des différentes écoles et favorise la mise en commun des idées, recherches et pratiques de chacune. La synergie entre les établissement se manifeste dans des rencontres, des publications, des échanges entre professeurs et la réalisation de projets évolutifs et transversaux. Ce projet qui se déroule depuis 2013 a pour thématique «&#x202F;le Genre&#x202F;». Par la céramique, les ateliers ont questionné ses multiples définitions dans nos sociétés. Le fruit de ces deux années de travail sera exposé au Centre Keramis du 10 octobre 2015 au 10 janvier 2016.
</p>
</div>
<div class="pratique">
<h2>Réseau</h2>
<h3>(E) (C) (A) (R) (T)</h3>
<p class="date">
(1) {0} octobre 2015<br/>
&thinsp;{1} (0) janvier 2016<br/>
mer–dim 10h–18h<br/>
mar sur rendez-vous
mar sur rendez-vous<br/>
pour groupes scolaires.
</p>
......@@ -31,14 +45,6 @@ Belgique
</address>
</div>
<div class="intro">
<p>Exposition consacrée aux travaux des ateliers de céramique des écoles supérieures participant au réseau Écart: La Cambre (Bruxelles), Pavillon Bosio (Monaco), Villa Arson (Nice), Esba (Le Mans) et Ensa (Limoges). </p>
<p>
Le réseau Écart, mis sur pied en 2009, offre un lieu d’échange aux écoles supérieures d’enseignement de la céramique artistique. Il mise sur la la pédagogie collaborative et l’ouverture. Depuis sa création le réseau met en valeur les compétences des différentes écoles et favorise la mise en commun des idées, recherches et pratiques de chacune. La synergie entre les établissement se manifeste dans des rencontres, des publications, des échanges entre professeurs et la réalisation de projets évolutifs et transversaux. Ce projet qui se déroule depuis 2013 a pour thématique «&#x202F;le Genre&#x202F;». Par la céramique, les ateliers ont questionné ses multiples définitions dans nos sociétés. Le fruit de ces deux années de travail sera exposé au Centre Keramis du 10 octobre 2015 au 10 janvier 2016.
</p>
</div>
<ul id="ecoles">
<li>La Cambre
<ul class="participants">
......
......@@ -25,7 +25,7 @@
}
@keyframes example {
0% {background-color: white;}
50% {background-color: whitesmoke;}
50% {background-color: #ffca87; opacity: 0.4;}
100% {background-color: white;}
}
......@@ -37,9 +37,9 @@
/* ---------- MIXINS ----------- */
/* Mixin to generate random number;
int should be 0 or 1, 1 being to make it an integer
int should be 0 or 1, 1 being to make it an integer
*/
.makeRandom(@min: 0, @max: @min+1, @int: 0) {
.makeRandom(@min: 0, @max: @min+1, @int: 0) {
.checkInt() {
@getNum: `Math.random() * (@{max} - @{min} + @{int})`;
@base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
......@@ -55,21 +55,44 @@
line-height: 28px;
-webkit-font-feature-settings: "ss02", "kern", "clig", "dlig", "ligs";
-moz-font-feature-settings: "ss02", "kern", "clig", "dlig", "ligs";
margin: 1.5em;
animation-name: example;
margin: 1.5em 5em;
//animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
background-color: #ffca87;
}
h1 {
text-transform: uppercase;
text-transform: uppercase;
background: url(mock-up/mockup-motif1.svg);
font-family: @font-fat;
font-size: 77px;
text-align: right;
line-height: 61px;
}
h2, h3 {
h2{
font-size: 52px;
line-height: 40px;
text-align: left;
padding-left: 27px;
padding-top: 75px;
text-transform: uppercase;
font-family: @font-narrow;
}
h3 {
font-family: @font-narrow;
text-transform: uppercase;
font-size: 30px;
text-align: left;
padding-left: 27px;
}
p {
text-align: left;
}
padding: 0.5em 1em;
}
a {
text-transform: lowercase;
color: inherit;
......@@ -89,12 +112,18 @@
text-transform: uppercase;
font-size: 18px;
line-height: 22px;
background-color: white;
//background-color: white;
background: url(mock-up/mockup-motif1.svg);
border-radius: 1.5em;
padding: 0 1.5em;
padding: 0 1em;
display: inline-block;
margin: auto;
text-align: left;
top: -42px;
position: relative;
left: 37px;
background-position: -19px -2px;
background-size: 359%;
}
ul {
......@@ -106,43 +135,57 @@
#logo {
margin: auto;
text-align: center;
// background: url(mock-up/mockup-motif1.svg);
h1,
h1,
h2 {
background-color: white;
//background-color: white;
border-radius: 1em;
display: inline-block;
padding: 1em;
}
}
.pratique {
float: left;
width: 30%;
text-align: center;
position: relative;
}
.date {
background-color: white;
//background-color: white;
background: url(mock-up/mockup-motif1.svg);
border-radius: 1.5em;
padding: 1.5em;
padding: 1em;
display: inline-block;
margin-bottom: 0;
background-size: 705%;
background-position: -33px -26px;
left: -40px;
}
.intro {
font-family: @font-narrow;
font-size: 18px;
line-height: 22px;
width: 70%;
float: left;
width: 55%;
float: left;
position: relative;
}
.intro p + p {
font-family: @font-fat;
font-size: 27px;
line-height: 28px;
line-height: 27px;
}
.intro p:first-of-type{
margin-top: 22px;
}
.intro p {
background-color: white;
//background-color: white;
background: url(mock-up/mockup-motif1.svg);
border-radius: 1.5em;
padding: 1.5em;
}
ul#ecoles {
clear: both;
......@@ -150,21 +193,25 @@
margin-top: 2em
}
ul#ecoles > li {
background-color: white;
//background-color: white;
background: url(mock-up/mockup-motif1.svg);
font-family: @font-narrow;
display: inline-table;
border-radius: 3em;
text-transform: uppercase;
font-size: 18px;
padding: 1.5em;
padding: 1em;
}
ul.participants{
width: 160px;
}
.participants li {
font-family: @font-fat;
font-size: 27px;
padding: 0;
}
.participants li:nth-child(2n) {
color: #666;
}
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