--- a/integration/css/theend.css Mon Jan 21 21:05:32 2013 +0100
+++ b/integration/css/theend.css Tue Jan 22 11:15:14 2013 +0100
@@ -551,37 +551,37 @@
}
.lightBox {
- position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+ position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%; color: #FFFFFF;
}
.lightBoxScroll {
- position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+ position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: auto;
}
.lightBox h3 {
- color: #FFFFFF; font-family: "arial_black", sans-serif;
- font-size: 18px; text-align: center; margin: 3px 0;
+ font-family: "arial_black", sans-serif;
+ font-size: 24px; text-align: center; margin: 3px 0;
}
a.lightBoxClose {
- float: right; font-size: 24px; color: #ACACAC;
- font-family: "arial_black", sans-serif;
+ float: right; font-size: 30px; color: #ACACAC;
+ font-weight: bold;
}
a.lightBoxClose:hover {
color: #FFFFFF;
}
-.lightBoxScroll {
- color: #ACACAC;
-}
-
.lightBoxScroll p {
- font-size: 14px; margin: 0 0 1.5em; line-height: 16px;
+ font-size: 14px; margin: 14px 20px 14px 0; line-height: 21px;
}
.lightBoxScroll h4 {
- font-size: 14px; font-weight: bold; margin: 0 0 0.5em;
+ font-size: 18px; font-family: "arial_black", sans-serif; margin: 18px 0;
+}
+
+.grey {
+ color: #9B9A9A;
}
/* METANAV COMPENSATION */
--- a/integration/home.html Mon Jan 21 21:05:32 2013 +0100
+++ b/integration/home.html Tue Jan 22 11:15:14 2013 +0100
@@ -49,10 +49,14 @@
<div class="lightBoxBg"></div>
<div class="lightBox">
<a href="#" class="lightBoxClose">×</a>
- <h3>THE END, ETC. de Laetitia Masson.</h3>
+ <h3>
+ THE END, ETC.
+ <br />
+ de Laetitia Masson.
+ </h3>
<div class="lightBoxScroll">
<p>
- À l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
+ À l’aube d’une nouvelle ère numérique, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
<br />
Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.
</p>
@@ -73,7 +77,7 @@
<p>
Une expérience de cinéma qui débute par trois clics.
<br />
- Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes.
+ Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes.
<br />
Vous pouvez recommencer à l’infini.
<br />
@@ -90,8 +94,8 @@
<p>
Un espace transitoire vous permet de naviguer entre ces différents niveaux et de partager votre film sur les réseaux sociaux.
</p>
- <p>
- Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale.
+ <p class="grey">
+ Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale.
<br />
Préférez les navigateurs Safari ou Chrome.
</p>
--- a/src/theend/static/theend/css/theend.css Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/static/theend/css/theend.css Tue Jan 22 11:15:14 2013 +0100
@@ -551,37 +551,37 @@
}
.lightBox {
- position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+ position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%; color: #FFFFFF;
}
.lightBoxScroll {
- position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+ position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: auto;
}
.lightBox h3 {
- color: #FFFFFF; font-family: "arial_black", sans-serif;
- font-size: 18px; text-align: center; margin: 3px 0;
+ font-family: "arial_black", sans-serif;
+ font-size: 24px; text-align: center; margin: 3px 0;
}
a.lightBoxClose {
- float: right; font-size: 24px; color: #ACACAC;
- font-family: "arial_black", sans-serif;
+ float: right; font-size: 30px; color: #ACACAC;
+ font-weight: bold;
}
a.lightBoxClose:hover {
color: #FFFFFF;
}
-.lightBoxScroll {
- color: #ACACAC;
-}
-
.lightBoxScroll p {
- font-size: 14px; margin: 0 0 1.5em; line-height: 16px;
+ font-size: 14px; margin: 14px 20px 14px 0; line-height: 21px;
}
.lightBoxScroll h4 {
- font-size: 14px; font-weight: bold; margin: 0 0 0.5em;
+ font-size: 18px; font-family: "arial_black", sans-serif; margin: 18px 0;
+}
+
+.grey {
+ color: #9B9A9A;
}
/* METANAV COMPENSATION */
--- a/src/theend/templates/theend/home.html Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/templates/theend/home.html Tue Jan 22 11:15:14 2013 +0100
@@ -44,7 +44,7 @@
{% block main_content %}
<header class="home_header">
<a id="btnInfo" class="btn" href="#" title="Mode d’emploi"></a>
- <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
+ <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition-the-end-etc.html" title="Retour au menu principal"></a>
<form id="form_tag">
<input type="search" name="tag" placeholder="Rechercher" />
</form>
@@ -63,10 +63,14 @@
<div class="lightBoxBg"></div>
<div class="lightBox">
<a href="#" class="lightBoxClose">×</a>
- <h3>THE END, ETC. de Laetitia Masson.</h3>
+ <h3>
+ THE END, ETC.
+ <br />
+ de Laetitia Masson.
+ </h3>
<div class="lightBoxScroll">
<p>
- À l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
+ À l’aube d’une nouvelle ère numérique, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
<br />
Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.
</p>
@@ -87,7 +91,7 @@
<p>
Une expérience de cinéma qui débute par trois clics.
<br />
- Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes.
+ Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes.
<br />
Vous pouvez recommencer à l’infini.
<br />
@@ -104,8 +108,8 @@
<p>
Un espace transitoire vous permet de naviguer entre ces différents niveaux et de partager votre film sur les réseaux sociaux.
</p>
- <p>
- Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale.
+ <p class="grey">
+ Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale.
<br />
Préférez les navigateurs Safari ou Chrome.
</p>
--- a/src/theend/templates/theend/tag.html Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/templates/theend/tag.html Tue Jan 22 11:15:14 2013 +0100
@@ -101,7 +101,7 @@
<a id="btnFwd" class="btn txt_hidden" href="#" title="Segment suivant"></a>
{% endblock %}
- <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
+ <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition-the-end-etc.html" title="Retour au menu principal"></a>
</section>
<!-- /Controlbar container -->
</footer>
--- a/web/transition-the-end-etc.html Mon Jan 21 21:05:32 2013 +0100
+++ b/web/transition-the-end-etc.html Tue Jan 22 11:15:14 2013 +0100
@@ -54,7 +54,7 @@
<p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
<p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
<p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
- <p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
+ <p class="margin_exeptionBottom"><a href="theend/prolonger">Prolongez l'expérience</a></p>
<p><a href="credits-the-end-etc.html">Crédits</a></p>
</div>
</div>