diff --git a/css/style.css b/css/style.css index dae6490..dfd189e 100644 --- a/css/style.css +++ b/css/style.css @@ -42,6 +42,26 @@ url('../fonts/roboto-v18-latin-700.woff') format('woff'); } +/* oleo-script-regular - latin */ +@font-face { + font-family: 'Oleo Script'; + font-style: normal; + font-weight: 400; + src: local('Oleo Script'), local('OleoScript-Regular'), + url('../fonts/oleo-script-v7-latin-regular.woff2') format('woff2'), + url('../fonts/oleo-script-v7-latin-regular.woff') format('woff'); + } + + /* oleo-script-700 - latin */ + @font-face { + font-family: 'Oleo Script'; + font-style: normal; + font-weight: 700; + src: local('Oleo Script Bold'), local('OleoScript-Bold'), + url('../fonts/oleo-script-v7-latin-700.woff2') format('woff2'), + url('../fonts/oleo-script-v7-latin-700.woff') format('woff'); + } + @@ -61,19 +81,19 @@ html, body { font-family: "Roboto", serif; font-weight: 300; line-height: 180%; - color: #FFFBEA; + color: #000000; font-size: 18px; } body { - background-color: #132B46; + background-color: #FFFFFF; } a, a:hover, a:active, a:visited { - color: #FFFBEA; + color: #FFAAAA; text-decoration: none; } @@ -96,77 +116,42 @@ a:visited { /*--------------------------------------------------------*/ #main-header { - height: 720px; + height: 460px; position: relative; - background: #6d93bb; - background: linear-gradient(to bottom, #134189 0%, #6d93bb 99%, #132B46 100%); + background: #FFFFFF; } -#main-header-title { - height: 45%; - width: 45%; - - position: absolute; - top: 60px; - left: 5%; - - z-index: 1000; -} - -#main-header-moon { - height: 25%; - width: 25%; - - position: absolute; - top: 80px; - right: 0px; - - z-index: 100; -} - -#main-header-clouds { +#main-header-background { + height: 100%; width: 100%; - position: absolute; - bottom: 15%; - object-fit: cover; - - mix-blend-mode: lighten; - - z-index: 200; -} - -#main-header-background-city { - width: 100%; - - position: absolute; - bottom: 0; - object-fit: cover; + background-image: url("../img/header/background.jpg"); + background-size: cover; + background-repeat: no-repeat; z-index: 500; } +#main-header-title { + height: 80%; + width: 80%; + + position: absolute; + top: 30px; + left: 10%; + + z-index: 1000; +} /*--------------------------------------------------------*/ - +/* @media only screen and (max-width: 1200px) { #main-header { height: 650px; } - - #main-header-moon { - height: 20%; - width: 20%; - - right: 50px; - } - - #main-header-clouds { - bottom: 12%; - } } @media only screen and (max-width: 880px) { @@ -181,14 +166,6 @@ a:visited { left: 20%; top: 20px; } - - #main-header-moon { - display: none; - } - - #main-header-clouds { - bottom: 10%; - } } @@ -196,11 +173,11 @@ a:visited { #main-header { height: 350px; } -/* + #main-header-title { height: 75%; width: 75%; - }*/ + } } @media only screen and (max-width: 360px) { @@ -216,9 +193,7 @@ a:visited { top: 5%; } } - - - +*/ /*--------------------------------------------------------*/ @@ -236,24 +211,32 @@ section { section h2 { margin: 0 0 25px 0; - padding: 0 0 15px 0; + padding: 15px 0; - background: radial-gradient(ellipse at bottom, rgba(255, 223, 165, 0.1) 0%, transparent 70%); - - border: none; - border-bottom: 2px solid rgba(255, 223, 165, 0.5); - border-image-source: linear-gradient(to right, transparent 0%, rgba(255, 223, 165, 0.7) 50%, transparent 100%); - border-image-slice: 1; - - color: rgb(255, 223, 165); - font-size: 2.1rem; + color: #FFFFFF; + font-family: "Oleo script", "Roboto", sans-serif; + font-size: 4rem; font-weight: 300; - text-transform: uppercase; text-align: center; word-wrap: break-word; - hyphens: auto; + hyphens: none; } +/*section.red { color: #803339; }*/ +section.red h2 { color: #FF6673; } + +/* section.orange { color: #805333; } */ +section.orange h2 { color: #FFA666; } + +/* section.green { color: #5A8039; } */ +section.green h2 { color: #A2E667; } + +/* section.blue { color: #396680; } */ +section.blue h2 { color: #73CCFF; } + +/* section.purple { color: #80396E; } */ +section.purple h2 { color: #FF73DC; }, + section p { padding: 0 0 20px 0; font-size: 1rem; @@ -275,20 +258,23 @@ section p.stand-out { margin: 0 auto 100px auto; padding: 0 60px; } + + section h2 { + font-size: 3rem; + } } @media only screen and (max-width: 480px) { section { padding: 0 30px; } - - section h2 { - font-size: 1.8rem; - } } - - +@media only screen and (max-width: 360px) { + section h2 { + font-size: 2.2rem; + } +} /*--------------------------------------------------------*/ @@ -302,22 +288,21 @@ section p.stand-out { margin: 20px auto 0 auto; padding: 15px 20px; - background-color: rgba(255, 223, 165, 0.1); + background-color: rgba(255, 102, 115, 0.1); - border: 2px solid rgba(255, 223, 165, 0.7); + border: 2px solid #FF6673; - color: rgb(255, 223, 165); + color: #FF6673; font-size: 1.4rem; font-weight: 400; text-transform: uppercase; text-align: center; line-height: 32px; - vertical-align: middle; } .button:hover { - background-color: rgba(255, 223, 165, 0.2); + background-color: rgba(255, 102, 115, 0.2); } .button img { @@ -356,59 +341,6 @@ section p.stand-out { -/*--------------------------------------------------------*/ -/* PRICE TABLE -/*--------------------------------------------------------*/ - -table.prices { - max-width: 460px; - width: 100%; - - margin: 20px auto; - - border-collapse: collapse; -} - -table.prices th, -table.prices td { - padding: 8px 0; - - font-size: 1.3rem; - text-align: center; - vertical-align: middle; -} - -table.prices th { - color: rgb(255, 223, 165); -} - -table.prices td { - background-color: rgba(255, 223, 165, 0.05); - - border-top: 2px solid rgba(255, 223, 165, 0.5); - border-bottom: 2px solid rgba(255, 223, 165, 0.5); -} - -table.prices tr:nth-child(odd) td { - background-color: rgba(255, 223, 165, 0.08); -} - - -/*--------------------------------------------------------*/ - - -@media only screen and (max-width: 480px) { - table.prices th, - table.prices td { - padding: 5px 0; - - font-size: 1.1rem; - } -} - - - - /*--------------------------------------------------------*/ /* LOCATION /*--------------------------------------------------------*/ diff --git a/fonts/oleo-script-v7-latin-700.woff b/fonts/oleo-script-v7-latin-700.woff new file mode 100644 index 0000000..f70e4e4 Binary files /dev/null and b/fonts/oleo-script-v7-latin-700.woff differ diff --git a/fonts/oleo-script-v7-latin-700.woff2 b/fonts/oleo-script-v7-latin-700.woff2 new file mode 100644 index 0000000..8ab2748 Binary files /dev/null and b/fonts/oleo-script-v7-latin-700.woff2 differ diff --git a/fonts/oleo-script-v7-latin-regular.woff b/fonts/oleo-script-v7-latin-regular.woff new file mode 100644 index 0000000..a32dcd6 Binary files /dev/null and b/fonts/oleo-script-v7-latin-regular.woff differ diff --git a/fonts/oleo-script-v7-latin-regular.woff2 b/fonts/oleo-script-v7-latin-regular.woff2 new file mode 100644 index 0000000..e080df3 Binary files /dev/null and b/fonts/oleo-script-v7-latin-regular.woff2 differ diff --git a/img/header/background-city.svg b/img/header/background-city.svg deleted file mode 100644 index 590f4dc..0000000 --- a/img/header/background-city.svg +++ /dev/null @@ -1,392 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/header/background.jpg b/img/header/background.jpg new file mode 100644 index 0000000..c7a7845 Binary files /dev/null and b/img/header/background.jpg differ diff --git a/img/header/clouds.svg b/img/header/clouds.svg deleted file mode 100644 index 9388a93..0000000 --- a/img/header/clouds.svg +++ /dev/null @@ -1,498 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/header/clouds2.svg b/img/header/clouds2.svg deleted file mode 100644 index 1ed14ef..0000000 --- a/img/header/clouds2.svg +++ /dev/null @@ -1,706 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/header/moon.svg b/img/header/moon.svg deleted file mode 100644 index 517a6b4..0000000 --- a/img/header/moon.svg +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/header/moon2.svg b/img/header/moon2.svg deleted file mode 100644 index 3f37c74..0000000 --- a/img/header/moon2.svg +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/img/header/title.png b/img/header/title.png new file mode 100644 index 0000000..891346a Binary files /dev/null and b/img/header/title.png differ diff --git a/img/header/title.svg b/img/header/title.svg index 8c8845e..48e92b5 100644 --- a/img/header/title.svg +++ b/img/header/title.svg @@ -2,259 +2,124 @@ + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.93px" + height="566.93px" viewBox="0 0 566.93 566.93" xml:space="preserve"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/index.html b/index.html index a523941..2d9503a 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - - + + - La Nuit — Gala 2018 de l'ENS + Les 48h des Arts 2019 @@ -16,24 +16,18 @@
- Entre Chien et Loup — À l'Orée de la Nuit - Lune - Nuages rosés - Immeubles en arrière-plan + + Les 48h des Arts
-
+

Présentation

-

Le 1er décembre 2018, venez découvrir l'École Normale Supérieure sous un nouveau jour à l'occasion de son Gala traditionnel, la Nuit de la rue d'Ulm.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam elit in elit lobortis finibus. Mauris a sapien sagittis, ultricies eros ac, faucibus quam. Aliquam ac vulputate purus. Donec consequat sodales sem, eu elementum nunc tempus ut. Aliquam tortor neque, auctor sed consectetur quis, tincidunt ut ipsum. Etiam lobortis diam scelerisque, cursus libero eget, varius est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum auctor nec velit id blandit. Vestibulum tincidunt neque facilisis arcu porta pretium. Integer interdum nisi eu elementum pharetra. Praesent convallis pellentesque lorem ac porta. Etiam a orci feugiat, tempor tortor pellentesque, malesuada urna. Etiam vitae tincidunt elit. Integer sodales magna ligula, eget scelerisque dui aliquam nec.

-

Avec le thème « Entre Chien et Loup — À l’Orée de la Nuit », nous avons cette année choisi de vous faire découvrir une École aux multiples visages, entre ombre et lumière, pour une soirée exceptionnelle. La nuit tombée, l'École se pare de ses plus beaux atours et vous réserve bien des surprises. +

Vivamus convallis venenatis ipsum, vel euismod ante consequat ullamcorper. Sed erat lorem, pharetra at sem in, luctus suscipit arcu. Vivamus pharetra fermentum sem, a tempus mi placerat ac. Aenean quis quam ac mauris vehicula viverra id a ex. Fusce in diam commodo urna porttitor porta. Fusce sagittis ipsum at lectus suscipit viverra. Quisque fringilla, dolor sed porta semper, diam orci tincidunt ipsum, et elementum tortor augue non lacus. Duis vel facilisis elit, at eleifend quam. Vestibulum elementum luctus mi nec sodales. Proin dictum lectus sed ligula maximus ullamcorper. In bibendum commodo leo, vitae varius justo auctor in. Mauris in lectus ultricies, pretium tellus volutpat, accumsan quam. Curabitur suscipit augue sit amet ultricies vestibulum. Suspendisse ex ex, auctor ac turpis a, facilisis gravida sem.

-

Amateur·trice·s de musiques électroniques, de concerts, ou de danses, qu'il s'agisse de valse, de rock, de salsa ou de tango, vous trouverez votre bonheur entre sets de DJ et VJ, scènes présentant divers styles musicaux, et salles de danse libre et initiations.

- -

Du crépuscule à l'aube, du buffet aux dernières minutes de la soirée, la Nuit vous réservera bien des surprises, avec la performance d'un magicien, des expositions artistiques, et de nombreux spectacles : danses, comédie musicale, joutes oratoires, improvisation, fanfare, pompoms...

- - +
Facebook Page Facebook @@ -42,9 +36,9 @@
-
+

Programme

-

Le buffet commencera à 20h00 et la soirée à 21h00.

+

Les activités débutent le vendredi 3 mai à 20h00 et se terminent le dimanche 5 mai à 21h00.

1 @@ -391,51 +385,7 @@
-
-

Tarifs et billeterie

-
-

Les préventes physiques seront disponibles dès le lundi 12 novembre en Aqua le midi et au Burô du COF. - Une billetterie en ligne est aussi ouverte.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
COFExté·e
Soirée (prévente)18€21€
Soirée (sur place)25€25€
Soirée avec Buffet28€33€
- -

Attention : les places sont limitées pour le buffet. Réservez rapidement !

- - -
- Ticket - Billeterie en ligne (+1€) -
- -
-
- -
+

Comment venir ?

@@ -472,18 +422,18 @@

-
+

Nous contacter

Email - responuit[arobase]ens[point]fr + bda[arobase]ens[point]fr

-
+

Remerciements

@@ -512,6 +462,7 @@ + diff --git a/js/triangles-mask.js b/js/triangles-mask.js new file mode 100644 index 0000000..fbd6218 --- /dev/null +++ b/js/triangles-mask.js @@ -0,0 +1,203 @@ +(function () { + const canvas = document.getElementById("main-header-background"); + const context = canvas.getContext("2d"); + + // Get the node dimensions and enforce the canvas width and height + const WIDTH = canvas.clientWidth; + const HEIGHT = canvas.clientHeight; + + canvas.setAttribute("width", WIDTH); + canvas.setAttribute("height", HEIGHT); + + + // Define some useful constants + const DELAY_BETWEEN_CANVAS_UPDATES = 50; // ms + + const NB_POINTS_PER_ROW = 4 + Math.round(WIDTH / 250); + const NB_POINTS_PER_COL = 5; + + const INIT_ROW_SPACING = HEIGHT / (NB_POINTS_PER_COL - 1); + const INIT_COL_SPACING = WIDTH / (NB_POINTS_PER_ROW - 3); + + const X_ORIGIN = -INIT_COL_SPACING * 2; + const Y_ORIGIN = -150; + + // When creating points + const INIT_MAX_X_SHIFT_DISTANCE = INIT_ROW_SPACING / 3.5; + const INIT_MAX_Y_SHIFT_ISTANCE = INIT_COL_SPACING / 3.5; + + + // Set the drawing style + context.lineWidth = 4; + + + // Create a grid of points + const points = []; + + for (let row = 0; row < NB_POINTS_PER_COL; row++) { + for (let col = 0; col < NB_POINTS_PER_ROW; col++) { + points.push({ + x: X_ORIGIN + col * INIT_COL_SPACING + ((row % 2 === 1) ? INIT_COL_SPACING : 0), + y: Y_ORIGIN + row * INIT_ROW_SPACING + }); + } + } + + // Move each point a little bit + for (let point of points) { + point.x += (2 * Math.random() * INIT_MAX_X_SHIFT_DISTANCE) - INIT_MAX_X_SHIFT_DISTANCE; + point.y += (2 * Math.random() * INIT_MAX_Y_SHIFT_ISTANCE) - INIT_MAX_Y_SHIFT_ISTANCE; + } + + + // Draw lines between points to make triangles + function drawLineBetweenPoints (from, to) { + context.beginPath(); + context.moveTo(from.x, from.y); + context.lineTo(to.x, to.y); + context.stroke(); + } + + function drawLinesBetweenAllPoints () { + for (let row = 0; row < NB_POINTS_PER_COL; row++) { + for (let col = 0; col < NB_POINTS_PER_ROW; col++) { + // Nothing to do with the last point of each row + if (col == NB_POINTS_PER_ROW - 1) { + continue; + } + + //if (Math.abs(col - NB_POINTS_PER_ROW / 2) < (NB_POINTS_PER_ROW / 7)) { + // continue; + //} + + // Get the current index and point + const index = row * NB_POINTS_PER_ROW + col; + const point = points[index]; + + // When applicable, draw lines to + // - the next point on the same row + // - the aligned point on the previous row + // - the aligned point on the next row + if (! (row % 2 === 1 && col === NB_POINTS_PER_ROW - 2)) + drawLineBetweenPoints(point, points[index + 1]); + + if (row > 0) + drawLineBetweenPoints(point, points[index - NB_POINTS_PER_ROW]); + if (row < NB_POINTS_PER_COL - 1) + drawLineBetweenPoints(point, points[index + NB_POINTS_PER_ROW]); + + // If the row number is odd, when applicable, also draw lines to + // - the next point on the previous row + // - the next point on the next row + if (row % 2 === 1) { + if (row > 0) + drawLineBetweenPoints(point, points[index - NB_POINTS_PER_ROW + 1]); + if (row < NB_POINTS_PER_COL - 1) + drawLineBetweenPoints(point, points[index + NB_POINTS_PER_ROW + 1]); + } + + } + } + } + + + // Inverse image data alpha channel in order to + // make the lines transparent and the triangles visible + function invertAlphaChannel () { + const currentImageData = context.getImageData(0, 0, WIDTH, HEIGHT); + const currentData = currentImageData.data; + + const newImageData = context.createImageData(WIDTH, HEIGHT); + const newData = newImageData.data; + + const dataLength = currentData.length; + for (i = 0; i < dataLength; i += 4) { + newData[i + 0] = 255; + newData[i + 1] = 255; + newData[i + 2] = 255; + newData[i + 3] = 255 - currentData[i + 3]; + } + + context.putImageData(newImageData, 0, 0); + } + + + // Update the point positions + let positionUpdateIter = 0; + + const pointRotationDirections = []; + const pointRotationSpeeds = []; + const pointRotationRadius = []; + + for (let i = 0; i < points.length; i++) { + pointRotationDirections[i] = { + x: Math.random() > 0.5 ? 1 : - 1, + y: Math.random() > 0.5 ? 1 : - 1 + }; + + pointRotationSpeeds[i] = { + x: (Math.random() * 1) + 1, + y: (Math.random() * 1) + 1 + }; + + pointRotationRadius[i] = { + x: (Math.random() * 2) + 1, + y: (Math.random() * 2) + 1 + }; + } + + function updatePointPositions () { + + /* + for (let point of points) { + point.x += (2 * MAX_X_SHIFT_DISTANCE * Math.random()) - MAX_X_SHIFT_DISTANCE; + point.y += (2 * MAX_X_SHIFT_DISTANCE * Math.random()) - MAX_X_SHIFT_DISTANCE; + } + */ + + /* + for (let iter = 0; iter < NB_POINT_POSITIONS_TO_UPDATE; iter++) { + const index = Math.floor(points.length * Math.random()); + const point = points[index]; + + point.x += (2 * MAX_X_SHIFT_DISTANCE * Math.random()) - MAX_X_SHIFT_DISTANCE; + point.y += (2 * MAX_X_SHIFT_DISTANCE * Math.random()) - MAX_X_SHIFT_DISTANCE; + } + */ + + for (let i = 0; i < points.length; i++) { + let point = points[i]; + + let direction = pointRotationDirections[i]; + let speed = pointRotationSpeeds[i]; + let radius = pointRotationRadius[i]; + + //console.log(direction, speed, xRadius, yRadius) + + point.x += direction.x * Math.cos(positionUpdateIter * speed.x / 10) * radius.x + + (Math.random() * 4) - 2; + point.y += direction.y * Math.sin(positionUpdateIter * speed.y / 10) * radius.y + + (Math.random() * 4) - 2; + } + + positionUpdateIter++; + } + + setInterval(updatePointPositions, DELAY_BETWEEN_CANVAS_UPDATES); + + + // Update the drawing + + function updateCanvas () { + // Clear the canvas + context.clearRect(0, 0, WIDTH, HEIGHT); + + // Repeat the drawing process + drawLinesBetweenAllPoints(); + invertAlphaChannel(); + + window.requestAnimationFrame(updateCanvas); + } + + window.requestAnimationFrame(updateCanvas); +})(); \ No newline at end of file