Description of productions

animaux-du-futur · May 23, 2015 · e266051 · e266051
1 parent a67f225
commit e266051
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 59 deletions.
diff --git a/_includes/production.html b/_includes/production.html
@@ -1,5 +1,9 @@
-<div class="production">
-  <div class="image-block" style="background-image: url('img/productions/{{ production.image }}');"></div>
+<div class="production {{ production.type }}">
+  <div class="image-block" style="background-image: url('img/productions/{{ production.image }}');">
+    <div class="description">
+      {{ production.content }}
+    </div>
+  </div>
   <div class="details">
     <h3>{{ production.name }}</h3>
     <div class="date">{{ production.date | date: "%d/%m/%Y" }}</div>

diff --git a/_productions/test-coming.md b/_productions/test-coming.md
@@ -4,3 +4,5 @@ image: test-coming.png
 date: 2015-06-01
 type: event
 ---
+
+Un événement super cool
diff --git a/_productions/test-oeuvre.md b/_productions/test-oeuvre.md
@@ -4,3 +4,5 @@ image: test-work.png
 date: 2015-01-10
 type: work
 ---
+
+Un projet ouf
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -96,34 +96,11 @@ a {
   }
 }
 
-.hovered-tuto {
-  background: $brand-color;
-
-  .tuto {
-    display: none;
-
-    a {
-      text-decoration: underline;
-      &:hover {
-        color: $brand-color;
-      }
-    }
-  }
+a {
+  text-decoration: underline;
 
   &:hover {
-    > .button:first-child {
-      background: $text-color;
-      color: $brand-color;
-    }
-
-    .tuto {
-      display: block;
-    }
+    background: $text-color;
+    color: $brand-color;
   }
 }
-
-.tuto {
-  padding: 2em;
-  background: $text-color;
-  color: $brand-color;
-}
diff --git a/_sass/_productions.scss b/_sass/_productions.scss
@@ -28,15 +28,33 @@
     justify-content: stretch;
 
     transition: box-shadow 1s;
-
     cursor: pointer;
-    &:hover, &:focus, &:active {
-      box-shadow: 0px 0px 0px 5px $grey-color-light;
-    }
 
     .image-block {
       background-size: cover;
       flex: 1;
+      display: flex;
+      justify-content: stretch;
+
+      .description {
+        flex: 1;
+        background-color: transparentize($brand-color, 0.5);
+        color: $text-color;
+        display: flex;
+        overflow-x: hidden;
+        overflow-y: auto;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        opacity: 0;
+        transition: opacity 0.5s;
+      }
+    }
+
+    &:hover {
+      .description {
+        opacity: 1;
+      }
     }
 
     .details {

diff --git a/productions.html b/productions.html
@@ -8,7 +8,7 @@
 
 <article class="coming">
   <h2>
-    À venir
+    Prochains événements
   </h2>
 
   <div class="production-list">
@@ -24,7 +24,7 @@ <h2>
 
 <article class="past">
   <h2>
-    Passés
+    Productions et évenements passés
   </h2>
 
   <div class="production-list">
@@ -44,28 +44,10 @@ <h3>{{ production.name }}</h3>
 </article>
 
 <article>
-  <div class="hovered-tuto">
-    <div class="button">
-      Ajouter une production
-    </div>
-
-    <div class="tuto">
-      <p>
-        Copier-coller le code ci-dessous et le compléter sur <a
-          href="https://github.com/animaux-du-futur/animaux-du-futur.github.io/new/master/_productions?filename=new-production.md"
-          target="_blank"
-        >cette page</a> :
-      </p>
-      <pre>
-        <code>
----
-name: À compléter
-image: fichier.png
-date: 2015-06-01
----
-        </code>
-      </pre>
-    </div>
-
-  </div>
+    <a
+      class="button"
+      href="https://github.com/animaux-du-futur/animaux-du-futur.github.io/wiki/Productions"
+    >
+      Gérer les productions
+    </a>
 </article>