Add services and bio on the homepage

diff --git a/app/static/src/assets/img/services/applications.jpg b/app/static/src/assets/img/services/applications.jpg
new file mode 100644 (file)
index 0000000..5a14186
Binary files /dev/null and b/app/static/src/assets/img/services/applications.jpg differ

diff --git a/app/static/src/assets/img/services/forumnet.jpg b/app/static/src/assets/img/services/forumnet.jpg
new file mode 100644 (file)
index 0000000..c19514c
Binary files /dev/null and b/app/static/src/assets/img/services/forumnet.jpg differ

diff --git a/app/static/src/assets/img/services/resources.jpg b/app/static/src/assets/img/services/resources.jpg
new file mode 100644 (file)
index 0000000..2b75fa0
Binary files /dev/null and b/app/static/src/assets/img/services/resources.jpg differ

diff --git a/app/static/src/assets/img/services/tours.jpg b/app/static/src/assets/img/services/tours.jpg
new file mode 100644 (file)
index 0000000..821711d
Binary files /dev/null and b/app/static/src/assets/img/services/tours.jpg differ

diff --git a/app/static/src/assets/img/services/ulysses.jpg b/app/static/src/assets/img/services/ulysses.jpg
new file mode 100644 (file)
index 0000000..96830d4
Binary files /dev/null and b/app/static/src/assets/img/services/ulysses.jpg differ

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index d4b9e5f4fc94987b0efdf5b0b59279e311e0414a..5ef0e7abc0153129e8ff6f1e604fedc0520f1507 100755 (executable)
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -155,6 +155,21 @@
 .fsxs {
     @include font-size(xs);
 }
+.fwl {
+    font-weight: weight(light);
+}
+.lh1 {
+    @include line-height(1);
+}
+.lh2 {
+    @include line-height(2);
+}
+.fcl {
+    color: white;
+}
+.fcb {
+    color: $color-black;
+}
 .unstyled-list {
     list-style-type: none;
     margin: 0;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 4aa7e7ffd70cea0b882ee0bd9674ab6caf873d18..b3adb81fb1882e238ed569003665e2396c32fa8c 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -28,6 +28,7 @@
 @import 'pattern';
 @import 'tag';
 @import 'share-links';
+@import 'banner';
 
 // Typography modules
 @import 'dashed';

diff --git a/app/static/src/sass/modules/_banner.scss b/app/static/src/sass/modules/_banner.scss
new file mode 100644 (file)
index 0000000..3c4ea13
--- /dev/null
+++ b/app/static/src/sass/modules/_banner.scss
@@ -0,0 +1,112 @@
+$module: ".banner";
+
+#{$module} {
+
+    display: block;
+
+    background-size: cover;
+    background-position: center center;
+    width: 100%;
+    height: 350px;
+    position: relative;
+
+    @include margin-bottom(1);
+
+    @include mq($until: lg) {
+
+        height: 250px;
+
+    }
+
+    &--colored {
+
+        &:after {
+
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+
+        }
+
+    }
+
+    &--blue {
+
+        &:after {
+
+            background: #009DD2;
+            opacity: 0.7;
+            background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
+
+        }
+
+    }
+
+    &--green {
+
+        &:after {
+
+            background: #0D9570;
+            opacity: 0.69;
+            background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
+
+        }
+
+    }
+
+    &--orange {
+
+        &:after {
+
+            background: #FDA618;
+            opacity: 0.5;
+
+        }
+
+    }
+
+    &__content {
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+
+        @include padding(1);
+
+    }
+
+    &__title {
+
+        @include font-size(xxl);
+        @include line-height(1.2);
+        @include typeface(sans-serif);
+        font-weight: weight(bold);
+
+        @include margin(0 0 1 0);
+
+    }
+
+    &__desc {
+
+        @include font-size(s);
+        @include line-height(1);
+        @include typeface(serif);
+        font-weight: weight(bold);
+
+    }
+
+}

diff --git a/app/templates/home/inc/bio.html b/app/templates/home/inc/bio.html
new file mode 100644 (file)
index 0000000..8a9075e
--- /dev/null
+++ b/app/templates/home/inc/bio.html
@@ -0,0 +1,9 @@
+<div class="page__block page__block--yellow">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-md-12 col-lg-10 col-lg-push-1 ffss fsxl fwl lh2">
+                <strong>L'Ircam, Institut de Recherche et Coordination Acoustique/Musique</strong> est aujourd’hui l’un des plus grands centres de recherche publique au monde se consacrant à la création musicale et à la recherche scientifique. Lieu unique où convergent la prospective artistique et l’innovation scientifique et technologique, l’institut est dirigé par Frank Madlener, et réunit plus de cent soixante collaborateurs.
+            </div>
+        </div>
+    </div>
+</div>

diff --git a/app/templates/home/inc/services.html b/app/templates/home/inc/services.html
new file mode 100644 (file)
index 0000000..e095a4e
--- /dev/null
+++ b/app/templates/home/inc/services.html
@@ -0,0 +1,109 @@
+{% load staticfiles  %}
+
+<div class="container">
+
+    <div class="row">
+
+        <div class="col-sm-6">
+
+            <a class="banner fcl" href="#" style="background-image:url({% static 'img/services/tours.jpg' %});">
+
+                <div class="banner__content">
+
+                    <div class="banner__title">
+                        Tournées 16.17
+                    </div>
+                    <div class="banner__desc">
+                        Campo Santo, Songes et Métamorphoses, Providences, UM souverain moteur de toutes choses...
+                    </div>
+
+                </div>
+
+            </a>
+
+        </div>
+
+        <div class="col-sm-6">
+
+            <a class="banner fcl" href="http://ulysses-network.eu/web/home/" target="_blank" style="background-image:url({% static 'img/services/applications.jpg' %});">
+
+                <div class="banner__content">
+
+                    <div class="banner__title">
+                        Appel à candidatures 2017
+                    </div>
+                    <div class="banner__desc">
+                        Cursus de composition et d'informatique musicale, Résidence en recherche artistique, ManiFeste-2017 l'académie
+                    </div>
+
+                </div>
+
+            </a>
+
+        </div>
+
+    </div>
+
+    <div class="row">
+
+        <div class="col-sm-6">
+
+            <a class="banner banner--colored banner--orange fcb" href="http://medias.ircam.fr/" target="_blank" style="background-image:url({% static 'img/services/resources.jpg' %});">
+
+                <div class="banner__content">
+
+                    <div class="banner__title">
+                        Les ressources Ircam
+                    </div>
+                    <div class="banner__desc">
+                        Archives audiovisuelles et sonores, base de documentation sur la musique contemporaine (base BRAHMS), catalogue d'œuvres...
+                    </div>
+
+                </div>
+
+            </a>
+
+        </div>
+
+        <div class="col-sm-3">
+
+            <a class="banner banner--colored banner--blue fcl" href="http://forumnet.ircam.fr/fr/" target="_blank" style="background-image:url({% static 'img/services/forumnet.jpg' %});">
+
+                <div class="banner__content">
+
+                    <div class="banner__title">
+                        Forumnet
+                    </div>
+                    <div class="banner__desc">
+                        Communauté d'utilisateurs des logiciels Ircam
+                    </div>
+
+                </div>
+
+            </a>
+
+        </div>
+
+        <div class="col-sm-3">
+
+            <a class="banner banner--colored banner--green fcl" href="http://community.ulysses-network.eu/" target="_blank" style="background-image:url({% static 'img/services/ulysses.jpg' %});">
+
+                <div class="banner__content">
+
+                    <div class="banner__title">
+                        Ulysses Community
+                    </div>
+                    <div class="banner__desc">
+                        Réseau européen pour la promotion et le soutien de la jeune création musicale contemporaine
+                    </div>
+
+                </div>
+
+            </a>
+
+        </div>
+
+    </div>
+
+
+</div>

diff --git a/app/templates/index.html b/app/templates/index.html
index c3b14c5a5e1aa1917a1c55fae60788ee41b85c9a..f828116fd189f418fd4fa630c53225436223022c 100644 (file)
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -52,4 +52,8 @@
 
     {% include "home/inc/body.html" %}
 
+    {% include "home/inc/bio.html" %}
+
+    {% include "home/inc/services.html" %}
+
 {% endblock %}