mirror of
https://github.com/ConjureETS/Site.git
synced 2026-03-24 01:30:58 +00:00
Merge branch 'develop'
This commit is contained in:
Massimo Di Lullo
commit
2afc51e3ac
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.idea
|
||||||
|
node_modules
|
||||||
|
package-lock.json
|
||||||
|
.vscode
|
||||||
14
README.md
14
README.md
@ -1,2 +1,14 @@
|
|||||||
# Site
|
# Conjure Site
|
||||||
Site web officiel du club Conjure de l'ÉTS
|
Site web officiel du club Conjure de l'ÉTS
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
1) Clone projet de git
|
||||||
|
2) Faire `npm install` en ligne de commande
|
||||||
|
|
||||||
|
## Dépendances
|
||||||
|
- CSS Framework : [Bulma v.0.7.5](https://bulma.io/)
|
||||||
|
- Compilation par Gulp
|
||||||
|
|
||||||
|
## Compilation
|
||||||
|
Lorsque vous faites des changements dans le JavaScript ou le SASS, lancez la commande de commande `gulp watch`.
|
||||||
|
Celui-ci regardera les changements fait au fur et à mesure et compilera les fichiers pour vous.
|
||||||
41
gulpfile.js
Normal file
41
gulpfile.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
let gulp = require('gulp');
|
||||||
|
let uglifyes = require('uglify-es');
|
||||||
|
let composer = require('gulp-uglify/composer');
|
||||||
|
let uglify = composer(uglifyes, console);
|
||||||
|
let rename = require('gulp-rename');
|
||||||
|
let concat = require('gulp-concat');
|
||||||
|
let Fiber = require('fibers');
|
||||||
|
let cleanCSS = require('gulp-clean-css');
|
||||||
|
let sass = require('gulp-sass');
|
||||||
|
sass.compiler = require('sass');
|
||||||
|
|
||||||
|
const directories = {
|
||||||
|
source: './resources/',
|
||||||
|
destination: './public/'
|
||||||
|
};
|
||||||
|
|
||||||
|
gulp.task('sass', function () {
|
||||||
|
return gulp.src(directories.source + 'sass/**/*.scss')
|
||||||
|
.pipe(sass({fiber: Fiber}).on('error', sass.logError))
|
||||||
|
.pipe(concat('main.css'))
|
||||||
|
.pipe(cleanCSS())
|
||||||
|
.pipe(rename({ suffix: '.min' }))
|
||||||
|
.pipe(gulp.dest(directories.destination + 'css/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('js', function () {
|
||||||
|
gulp.src('node_modules/bulma-carousel/dist/js/bulma-carousel.min.js')
|
||||||
|
.pipe(gulp.dest(directories.destination + 'js/'));
|
||||||
|
return gulp.src(directories.source + 'js/**/*.js')
|
||||||
|
.pipe(concat('main.js'))
|
||||||
|
.pipe(uglify())
|
||||||
|
.pipe(rename({ suffix: '.min' }))
|
||||||
|
.pipe(gulp.dest(directories.destination + 'js/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('watch', function() {
|
||||||
|
gulp.watch([directories.source + 'sass/**/*.scss'], gulp.series('sass'));
|
||||||
|
gulp.watch([directories.source + 'js/**/*.js'], gulp.series('js'));
|
||||||
|
});
|
||||||
37
package.json
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"name": "Conjure-Site",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Site web officiel du club Conjure de l'ÉTS",
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"bulma-carousel": "^4.0.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"bulma": "^0.7.5",
|
||||||
|
"fibers": "^4.0.1",
|
||||||
|
"gulp": "^4.0.2",
|
||||||
|
"gulp-clean-css": "^4.2.0",
|
||||||
|
"gulp-concat": "^2.6.1",
|
||||||
|
"gulp-rename": "^1.4.0",
|
||||||
|
"gulp-sass": "^4.0.2",
|
||||||
|
"gulp-uglify": "^3.0.2",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
|
"sass": "^1.20.1",
|
||||||
|
"uglify-es": "^3.3.9"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"build": "webpack"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/ConjureETS/Site.git"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/ConjureETS/Site/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/ConjureETS/Site#readme"
|
||||||
|
}
|
||||||
1
public/css/main.min.css
vendored
Normal file
1
public/css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
public/img/MTLGJ-Logo.jpg
Normal file
BIN
public/img/MTLGJ-Logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
BIN
public/img/competitions/CreativeJam.png
Normal file
BIN
public/img/competitions/CreativeJam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
public/img/competitions/GameJamBattle.png
Normal file
BIN
public/img/competitions/GameJamBattle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/img/competitions/LudumDare.png
Normal file
BIN
public/img/competitions/LudumDare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
public/img/competitions/McGameJam.png
Normal file
BIN
public/img/competitions/McGameJam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
public/img/competitions/PixelChallenge.png
Normal file
BIN
public/img/competitions/PixelChallenge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
71
public/img/conjure-logo.svg
Normal file
71
public/img/conjure-logo.svg
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="1774px" height="551px" viewBox="0 0 1774 551" enable-background="new 0 0 1774 551" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_1_" width="1774" height="551"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_2_">
|
||||||
|
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||||
|
</clipPath>
|
||||||
|
<path clip-path="url(#SVGID_2_)" fill="#010202" d="M1585.256,388.363H150.068c-35.663,0-56.57-29.081-46.461-64.625l34.974-122.96
|
||||||
|
c10.11-35.544,47.561-64.625,83.224-64.625h1435.187c35.663,0,56.571,29.081,46.461,64.625l-34.974,122.96
|
||||||
|
C1658.369,359.282,1620.918,388.363,1585.256,388.363"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<polygon id="SVGID_3_" points="1571.811,223.458 1520.748,197.852 1531.483,253.957 1491.349,294.607 1548.027,301.735
|
||||||
|
1574.285,352.465 1598.579,300.766 1654.941,291.469 1613.278,252.388 1621.852,195.912 "/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_4_">
|
||||||
|
<use xlink:href="#SVGID_3_" overflow="visible"/>
|
||||||
|
</clipPath>
|
||||||
|
|
||||||
|
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="0" y1="550.9355" x2="1" y2="550.9355" gradientTransform="matrix(114.5988 -114.5988 -114.5988 -114.5988 64658.5625 63461.8125)">
|
||||||
|
<stop offset="0" style="stop-color:#255FAA"/>
|
||||||
|
<stop offset="1" style="stop-color:#2689CA"/>
|
||||||
|
</linearGradient>
|
||||||
|
<polygon clip-path="url(#SVGID_4_)" fill="url(#SVGID_5_)" points="1413.072,274.188 1573.145,114.116 1733.218,274.188
|
||||||
|
1573.145,434.261 "/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<defs>
|
||||||
|
<rect id="SVGID_6_" width="1774" height="551"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="SVGID_7_">
|
||||||
|
<use xlink:href="#SVGID_6_" overflow="visible"/>
|
||||||
|
</clipPath>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M290.238,345.565H173.631c-8.211,0-14.954-1.95-20.221-5.851
|
||||||
|
c-5.267-3.9-7.904-9.477-7.904-16.732c0-3.829,0.754-7.935,2.258-12.317l38.596-110.448c4.24-12.179,12.041-18.271,23.403-18.271
|
||||||
|
h138.368l-13.55,38.596h-96.898c-9.033,0-14.576,3.079-16.629,9.238c0.411-1.505-7.734,21.556-24.43,69.184
|
||||||
|
c-0.138,0.549-0.205,1.098-0.205,1.643c0,4.244,3.419,6.364,10.264,6.364h97.309L290.238,345.565z"/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M530.018,225.264l-37.158,105.11c-1.918,5.337-5.408,9.376-10.47,12.112
|
||||||
|
c-3.971,2.053-8.282,3.079-12.933,3.079H350.592c-16.423,0-24.635-7.048-24.635-21.146c0-6.294,1.575-13.616,4.722-21.966
|
||||||
|
l3.49-8.622l33.668-96.488c1.777-5.338,5.2-9.373,10.265-12.113c4.105-2.187,8.484-3.284,13.138-3.284h118.865
|
||||||
|
c16.286,0,24.43,7.051,24.43,21.145C534.535,208.978,533.027,216.369,530.018,225.264 M482.185,233.27
|
||||||
|
c0.545-1.366,0.821-2.736,0.821-4.106c0-5.748-2.464-8.622-7.39-8.622h-59.535c-7.939,0-13.344,4.106-16.219,12.317l-21.35,61.383
|
||||||
|
c-0.549,1.37-0.821,2.807-0.821,4.311c0,5.613,2.463,8.417,7.39,8.417h59.535c4.927,0,8.69-1.231,11.292-3.694
|
||||||
|
c1.642-1.643,3.214-4.446,4.721-8.417L482.185,233.27z"/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M725.251,225.264L682.55,345.565h-44.343l39.211-112.296
|
||||||
|
c0.411-1.366,0.616-2.736,0.616-4.106c0-5.748-2.396-8.622-7.185-8.622h-59.536c-8.077,0-13.481,4.106-16.218,12.318
|
||||||
|
l-39.211,112.706H511.13l57.277-163.619h136.931c16.285,0,24.43,7.051,24.43,21.145
|
||||||
|
C729.768,208.978,728.26,216.369,725.251,225.264"/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M918.842,181.947l-49.271,139.805c-5.613,15.878-17.793,23.813-36.542,23.813
|
||||||
|
H704.721l13.549-38.596h95.872c4.651,0,8.895-1.093,12.728-3.284c3.42-2.053,5.678-4.517,6.775-7.391l40.648-114.348H918.842z"/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M1112.43,181.947l-51.939,148.427c-1.779,5.338-5.203,9.376-10.264,12.111
|
||||||
|
c-4.105,2.054-8.488,3.08-13.139,3.08H918.223c-16.285,0-24.43-6.979-24.43-20.939c0-6.021,1.574-13.412,4.722-22.172l42.7-120.507
|
||||||
|
h44.139l-39.211,112.295c-0.41,1.369-0.615,2.807-0.615,4.311c0,5.614,2.393,8.417,7.186,8.417h59.533
|
||||||
|
c8.074,0,13.48-4.035,16.219-12.112l39.211-112.911H1112.43z"/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M1310.741,181.947l-13.755,38.595h-112.295c-4.654,0-8.796,1.062-12.42,3.182
|
||||||
|
c-3.628,2.124-5.922,4.619-6.878,7.494l-40.647,114.348h-44.754l49.27-139.805c5.61-15.875,17.861-23.814,36.748-23.814H1310.741z"
|
||||||
|
/>
|
||||||
|
<path clip-path="url(#SVGID_7_)" fill="#FFFFFF" d="M1493.656,223.127l-21.35,60.234h-129.336l-3.489,10.563
|
||||||
|
c-0.959,2.624-1.437,4.831-1.437,6.627c0,4.278,2.735,6.419,8.211,6.419h117.838l-13.549,38.595h-127.076
|
||||||
|
c-24.09,0-36.132-7.525-36.132-22.583c0-4.24,1.507-10.742,4.517-19.502l37.568-108.806c3.008-8.484,10.332-12.728,21.967-12.728
|
||||||
|
h120.507c17.245,0,25.866,7.105,25.866,21.309C1497.762,208.583,1496.393,215.208,1493.656,223.127 M1445.823,231.127
|
||||||
|
c0.272-0.815,0.411-1.697,0.411-2.646c0-5.293-3.355-7.939-10.06-7.939h-57.482c-4.927,0-8.417,0.339-10.47,1.016
|
||||||
|
c-2.875,1.088-4.793,3.125-5.748,6.108l-5.543,17.1h84.375L1445.823,231.127z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/img/gala.jpg
Normal file
BIN
public/img/gala.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 KiB |
BIN
public/img/icons/email.png
Normal file
BIN
public/img/icons/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/img/icons/facebook.png
Normal file
BIN
public/img/icons/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/img/icons/medal.png
Normal file
BIN
public/img/icons/medal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/icons/profile.png
Normal file
BIN
public/img/icons/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
BIN
public/img/icons/sponsor.png
Normal file
BIN
public/img/icons/sponsor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/img/learn.png
Normal file
BIN
public/img/learn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/img/medal.png
Normal file
BIN
public/img/medal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/img/mtlgj.jpg
Normal file
BIN
public/img/mtlgj.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
BIN
public/img/remote.png
Normal file
BIN
public/img/remote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/img/splashscreen.jpg
Normal file
BIN
public/img/splashscreen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
public/img/sponsors/AEETS-color.png
Normal file
BIN
public/img/sponsors/AEETS-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
public/img/sponsors/EA-black.png
Normal file
BIN
public/img/sponsors/EA-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
public/img/sponsors/ETS-color.png
Normal file
BIN
public/img/sponsors/ETS-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
public/img/sponsors/EidosMontreal-black.png
Normal file
BIN
public/img/sponsors/EidosMontreal-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/img/sponsors/LanETS-black.png
Normal file
BIN
public/img/sponsors/LanETS-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/img/sponsors/Ludia-color.png
Normal file
BIN
public/img/sponsors/Ludia-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/img/sponsors/SquareEnixMontreal-black.png
Normal file
BIN
public/img/sponsors/SquareEnixMontreal-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/img/sponsors/Ubisoft-black.png
Normal file
BIN
public/img/sponsors/Ubisoft-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/img/sponsors/bEhaviour-black.png
Normal file
BIN
public/img/sponsors/bEhaviour-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
1
public/js/bulma-carousel.min.js
vendored
Normal file
1
public/js/bulma-carousel.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/js/main.min.js
vendored
Normal file
1
public/js/main.min.js
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,n){return n=n||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(n)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),n=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7,i=setInterval(function(){n-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),n<=0&&clearInterval(i)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites .is-mtlgj-btn").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:1,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});
|
||||||
205
public/view/fr/index.html
Normal file
205
public/view/fr/index.html
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="site web du club conjure de l'école de technologie supérieure ÉTS à Montréal" />
|
||||||
|
<meta name="keywords" content="Conjure, Laboratoire de médias interactifs, Club Conjure, ÉTS, École de technologie supérieure, jeu vidéo, médias interactifs" />
|
||||||
|
<meta name="author" content="Club Conjure" />
|
||||||
|
|
||||||
|
<title>Club Conjure</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/main.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="logo-container">
|
||||||
|
<a href="#"><img src="../../img/conjure-logo.svg" alt="Conjure Logo"></a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="menu">
|
||||||
|
<input type="checkbox" class="menu-open" name="menu-open" id="menu-open" />
|
||||||
|
<label class="menu-open-button" for="menu-open">
|
||||||
|
<span class="hamburger"></span>
|
||||||
|
<span class="hamburger"></span>
|
||||||
|
<span class="hamburger"></span>
|
||||||
|
</label>
|
||||||
|
<a href="#apropos" class="menu-item has-tooltip-text">
|
||||||
|
<span>À propos</span>
|
||||||
|
<img src="../../img/icons/profile.png" alt="À Propos"/>
|
||||||
|
</a>
|
||||||
|
<a href="#activites" class="menu-item has-tooltip-text">
|
||||||
|
<span>Activitiés</span>
|
||||||
|
<img src="../../img/icons/medal.png" alt="Activitiés / Compétitions"/>
|
||||||
|
</a>
|
||||||
|
<a href="#partenaires" class="menu-item has-tooltip-text">
|
||||||
|
<span>Partenaires</span>
|
||||||
|
<img src="../../img/icons/sponsor.png" alt="Partenaires"/>
|
||||||
|
</a>
|
||||||
|
<!--<a href="../en" class="menu-item-always-open language-icon">
|
||||||
|
<span>EN</span>
|
||||||
|
</a>-->
|
||||||
|
<a href="https://www.facebook.com/ConjureETS/" class="menu-item-always-open">
|
||||||
|
<img src="../../img/icons/facebook.png" alt="Facebook"/>
|
||||||
|
</a>
|
||||||
|
<a href="mailto:conjure@ens.etsmtl.ca" class="menu-item-always-open">
|
||||||
|
<img src="../../img/icons/email.png" alt="Courriel"/>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="section full-height" id="splashscreen">
|
||||||
|
<div class="bg-img full-height full-width"></div>
|
||||||
|
<div class="splashscreen-text-container full-width">
|
||||||
|
<h1>Laboratoire de médias interactifs</h1>
|
||||||
|
<div class="border-seperator"></div>
|
||||||
|
<h2><span class="year-animated" data-endvalue="2009">0000</span> - <span class="year-animated" data-delay="750">0000</span></h2>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section" id="apropos">
|
||||||
|
<h2>Qui sommes-nous ?</h2>
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-three-quarters-desktop is-full-tablet">
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-one-third-tablet is-full-mobile">
|
||||||
|
<img class="is-quarter" src="../../img/learn.png" alt="Apprendre">
|
||||||
|
<h3>Apprendre</h3>
|
||||||
|
<p>En plus d'avoir des membres avec de l'expérience dans l'industrie, nous offrons à nos membres une multitude de formations sous différents langages et disciplines, dont une formation intégrale pour Unreal Engine et les conférences au MIGS.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-third-tablet is-full-mobile">
|
||||||
|
<img class="is-quarter" src="../../img/remote.png" alt="Équippement">
|
||||||
|
<h3>Équippement</h3>
|
||||||
|
<p>Le club offre aux membres tout l'équipement nécessaire pour produire vos jeux. Cela inclut une installation complète de réalité virtuelle.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-third-tablet is-full-mobile">
|
||||||
|
<img class="is-quarter" src="../../img/medal.png" alt="Compétitions">
|
||||||
|
<h3>Compétitions</h3>
|
||||||
|
<p>En tant que membres, vous serez accomodés pour les divers compétitions et événement que le club permet d'assister. Cela donne accès à diverses opportunités de réseautage.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-half-tablet is-hidden-mobile sub-section-contact">
|
||||||
|
<!-- Same info in footer -->
|
||||||
|
<h3>Contactez-nous</h3>
|
||||||
|
<iframe width="500" height="600"
|
||||||
|
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB5eDqmAayUwR9kVcpBmnMrc&key=AIzaSyDa73RDd5rn0c6jqn8nAXKh01L8NfrQGQM" allowfullscreen></iframe>
|
||||||
|
<address>
|
||||||
|
1219 William, Montreal<br/>
|
||||||
|
Local D-2020<br/>
|
||||||
|
<a href="mailto:conjure@ens.etsmtl.ca">conjure@ens.etsmtl.ca</a><br/>
|
||||||
|
<a href="tel:5143968800">(514) 396-8800 poste: #7713</a>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half-tablet is-full-mobile sub-section-members">
|
||||||
|
<h3>Membres</h3>
|
||||||
|
<p>Vous êtes étudiant ou étudiante à l'ÉTS et vous êtes intéressé au développement de médias interactifs / jeux vidéos ? Venez au local pour nous parler. On vous donnera un laboratoire de bienvenue qui vous donnera les outils nécessaires pour vous débrouiller dans le domaine. N'hésitez pas à nous poser des questions. Une fois le laboratoire remis, vous aurez une formation nécessaire fournie par l'école et vous serez membres à part entière. Vous aurez finalement accès à tous les avantages d'être dans notre club.</p>
|
||||||
|
<p>Les membres ont accès à des formations en ligne et d'autres fournies par nos commanditaires. De plus, ils ont accès à notre équipement pour faire leurs différents projets. Une fois par année, on organise un événement servant à mettre en valeur le travail fourni par les membres où on invite les recruteurs des compagnies en jeux vidéos pour qu'ils puissent vous connaitre ainsi que vous donner une chance de faire des contactes dans l'industrie et de trouver des stages plus facilement.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section" id="activites">
|
||||||
|
<div class="full-height full-width columns is-full sub-section">
|
||||||
|
<div class="bg-img gala-img full-height full-width"></div>
|
||||||
|
<div class="headline">
|
||||||
|
<h2>Gala Conjure</h2>
|
||||||
|
<p>Le gala est une activité annuelle permettant aux membres du club de présenter sur quoi ils ont travaillé durant l'année aux différentes compagnies du domaine. L'événement se présente sous forme de 5 à 8 dans les alentours du début du mois d'octobre. Tous les gens du domaine du jeu vidéo sont invités à venir voir les efforts mis par la relève.</p>
|
||||||
|
<a href="mailto:conjure@ens.etsmtl.ca"><button class="button is-gala-btn is-info is-outlined is-medium">En savoir plus, contactez-nous</button></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="full-height full-width is-full columns animation-inversed sub-section">
|
||||||
|
<div class="column full-height no-spacing">
|
||||||
|
<div class="bg-img mtlgj-img full-height full-width"></div>
|
||||||
|
<div class="headline is-headline-inversed">
|
||||||
|
<h2>Montréal Game Jam</h2>
|
||||||
|
<p>
|
||||||
|
Le Montréal Game Jam est le chapitre montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
|
||||||
|
</p>
|
||||||
|
<button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">En savoir plus</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content column is-one-quarter-fullhd is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
|
||||||
|
<img alt="Montreal Game Jam Logo" src="../../img/MTLGJ-Logo.jpg" />
|
||||||
|
<p>
|
||||||
|
L’organisation du Montreal Game Jam est constituée de l’union de multiples universités et professionnels de Montréal dont le mandat commun est de promouvoir l’industrie du jeu vidéo.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Nous rassemblons étudiants et professionnels pour stimuler la création et l’expérimentation de nouvelles idées et concepts. Nous voulons renforcer la collaboration avec la communauté du jeu et ainsi offrir la possibilité de créer de nouveaux liens à travers cet événement. C’est en supportant le développement de cette communauté que nous pourrons renforcer l’expertise générale. Considérant la forte présence médiatique, nos partenaires pourront ainsi démontrer leur intérêt à promouvoir la culture du jeu. C’est le temps de découvrir de nouveaux talents, de cultiver de nouvelles idées et de former de nouveaux liens.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Que les participants soient à l'université ou de l'industrie, l’événement offre la possibilité de briser cette barrière et ainsi collaborer. Nous voulons surtout que vous ayez du plaisir à accomplir ce défi et réaliser ce qui vous passionne!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Plus d'information sur le site du <a href="http://mtlgj.org/lang/fr/index.html">Montreal Game Jam</a>
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section" id="competitions">
|
||||||
|
<h2>Compétitions</h2>
|
||||||
|
<div class="border-seperator"></div>
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="slider column is-three-fifths-tablet is-four-fifths-mobile">
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="../../img/competitions/CreativeJam.png" alt="Logo Creative Jam">
|
||||||
|
</div>
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="../../img/competitions/LudumDare.png" alt="Logo Ludum Dare">
|
||||||
|
</div>
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="../../img/competitions/McGameJam.png" alt="Logo McGill Game Jam">
|
||||||
|
</div>
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="../../img/competitions/PixelChallenge.png" alt="Logo Pixel Challenge Québec">
|
||||||
|
</div>
|
||||||
|
<div class="slider-item">
|
||||||
|
<img src="../../img/competitions/GameJamBattle.png" alt="Logo Creative Jam">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section" id="partenaires">
|
||||||
|
<h2>Partenaires</h2>
|
||||||
|
<div class="border-seperator"></div>
|
||||||
|
<div class="columns is-full full-width sub-section is-centered">
|
||||||
|
<div class="imq-section column is-three-fifths-desktop is-8-tablet is-full-mobile">
|
||||||
|
<div class="grid columns is-multiline">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/ETS-color.png" alt="Logo École de technologie supérieure">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/AEETS-color.png" alt="Logo Association étudiante de l'ÉTS">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/LanETS-black.png" alt="Logo LanETS">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/bEhaviour-black.png" alt="Logo bEhaviour Interactive">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/EA-black.png" alt="Logo Electronic Arts">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/EidosMontreal-black.png" alt="Logo Eidos Montreal">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/Ludia-color.png" alt="Logo Ludia">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/SquareEnixMontreal-black.png" alt="Logo Square Enix Montreal">
|
||||||
|
<img class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile" src="../../img/sponsors/Ubisoft-black.png" alt="Logo Ubisoft">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="full-width">
|
||||||
|
<div class="is-hidden-tablet is-full-mobile sub-section-contact">
|
||||||
|
<!-- Same info higher-up -->
|
||||||
|
<h3>Contactez-nous</h3>
|
||||||
|
<div class="border-seperator"></div>
|
||||||
|
<iframe width="500" height="600"
|
||||||
|
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB5eDqmAayUwR9kVcpBmnMrc&key=AIzaSyDa73RDd5rn0c6jqn8nAXKh01L8NfrQGQM" allowfullscreen></iframe>
|
||||||
|
<address>
|
||||||
|
1219 William, Montreal<br/>
|
||||||
|
Local D-2020<br/>
|
||||||
|
<a href="mailto:conjure@ens.etsmtl.ca">conjure@ens.etsmtl.ca</a><br/>
|
||||||
|
<a href="tel:5143968800">(514) 396-8800 poste: #7713</a>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
<p>Copyright © Conjure</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../../js/bulma-carousel.min.js"></script>
|
||||||
|
<script type="application/javascript" src="../../js/main.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
56
resources/js/app.js
Normal file
56
resources/js/app.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
(function() {
|
||||||
|
addCopyrightCurrentDate();
|
||||||
|
|
||||||
|
document.querySelectorAll('section#activites .is-mtlgj-btn').forEach(function(item) {
|
||||||
|
item.addEventListener('click', showActivityContent);
|
||||||
|
})
|
||||||
|
|
||||||
|
document.querySelectorAll( '.year-animated' ).forEach(function(item) {
|
||||||
|
animateNumbers( item );
|
||||||
|
});
|
||||||
|
|
||||||
|
bulmaCarousel.attach('.slider', {
|
||||||
|
autoplay: true,
|
||||||
|
pagination: false,
|
||||||
|
loop: true,
|
||||||
|
slidesToShow: 2,
|
||||||
|
slidesToScroll: 1,
|
||||||
|
infinite: true,
|
||||||
|
icons: {
|
||||||
|
previous: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',
|
||||||
|
next: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
function addCopyrightCurrentDate() {
|
||||||
|
document.querySelector('footer').querySelector('p').innerHTML += ' ' + new Date().getFullYear();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showActivityContent(e) {
|
||||||
|
e.target.parentElement.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
|
||||||
|
e.target.parentElement.parentElement.parentElement.classList.toggle('slide');
|
||||||
|
}
|
||||||
|
|
||||||
|
function pad(n, width, z) {
|
||||||
|
z = z || '0';
|
||||||
|
n = n + '';
|
||||||
|
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
|
||||||
|
}
|
||||||
|
|
||||||
|
function animateNumbers(item) {
|
||||||
|
let intervalTime = 1;
|
||||||
|
let incrementation = 7;
|
||||||
|
setTimeout(function() {
|
||||||
|
let endValue = item.getAttribute('data-endvalue');
|
||||||
|
endValue = parseInt(endValue === null ? new Date().getFullYear() : endValue);
|
||||||
|
let duration = endValue * intervalTime / incrementation;
|
||||||
|
let animation = setInterval(function() {
|
||||||
|
duration -= intervalTime;
|
||||||
|
let val = parseInt(item.innerHTML);
|
||||||
|
item.innerHTML = pad( (val + incrementation > endValue ? val + (endValue - val) : val + incrementation), 4);
|
||||||
|
if(duration <= 0)
|
||||||
|
clearInterval(animation);
|
||||||
|
}, intervalTime);
|
||||||
|
}, item.getAttribute('data-delay') === null ? 250 : item.getAttribute('data-delay'));
|
||||||
|
}
|
||||||
345
resources/sass/_partials/_general.scss
Normal file
345
resources/sass/_partials/_general.scss
Normal file
@ -0,0 +1,345 @@
|
|||||||
|
$border-radius: 4px;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: Roboto, SansSerif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.logo-container {
|
||||||
|
position: fixed;
|
||||||
|
top: -15px;
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 135px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-height {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-img {
|
||||||
|
background-size: cover;
|
||||||
|
-webkit-filter: brightness(60%);
|
||||||
|
filter: brightness(60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
section, footer {
|
||||||
|
h2 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#splashscreen {
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
.bg-img {
|
||||||
|
background-image: url('../img/splashscreen.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splashscreen-text-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border-top: 5px solid white;
|
||||||
|
max-width: 900px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#apropos {
|
||||||
|
* {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column .columns {
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
img.is-quarter {
|
||||||
|
width: 25%;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-section-members {
|
||||||
|
p {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#activites {
|
||||||
|
height: 200vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.sub-section {
|
||||||
|
position: relative;
|
||||||
|
transition: transform 2s;
|
||||||
|
|
||||||
|
div.no-spacing {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide {
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
transform: translateX(25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
transform: translateX(-25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
div.content {
|
||||||
|
left: -25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
div.content {
|
||||||
|
right: -25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content {
|
||||||
|
position: relative;
|
||||||
|
padding: 25px;
|
||||||
|
text-align: justify;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
p, img {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 1em 0 2em 0;
|
||||||
|
position: relative;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.headline {
|
||||||
|
margin-top: 75px;
|
||||||
|
padding: 25px;
|
||||||
|
transition: display 0.25s;
|
||||||
|
position: absolute;
|
||||||
|
color: white;
|
||||||
|
max-width: 35%;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
&:not(.is-headline-inversed) {
|
||||||
|
left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-headline-inversed {
|
||||||
|
right: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.headline.toggle-visibility {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-img {
|
||||||
|
position: absolute;
|
||||||
|
transition: transform 2s;
|
||||||
|
|
||||||
|
&.gala-img {
|
||||||
|
background-image: url('../img/gala.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mtlgj-img {
|
||||||
|
background-image: url('../img/mtlgj.jpg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-mtlgj-btn {
|
||||||
|
border-color: #29a6d6;
|
||||||
|
color: #29a6d6;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #29a6d6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-gala-btn {
|
||||||
|
border-color: #29a6d6;
|
||||||
|
color: #29a6d6;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #29a6d6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#competitions, section#partenaires {
|
||||||
|
h2 {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
margin: 10px auto 50px auto;
|
||||||
|
border-top: 5px solid #848484;
|
||||||
|
max-width: 200px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#competitions {
|
||||||
|
.slider {
|
||||||
|
margin: 0;
|
||||||
|
.slider {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.slider-navigation-previous, .slider-navigation-next {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
opacity: 0.75;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-navigation-previous {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-navigation-next {
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
border-bottom-left-radius: $border-radius;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#partenaires {
|
||||||
|
.grid {
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-section-contact {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
margin: 10px auto 25px auto;
|
||||||
|
border-top: 2px solid #848484;
|
||||||
|
max-width: 200px;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
embed, iframe {
|
||||||
|
margin-top: 1rem;
|
||||||
|
height: 600px;
|
||||||
|
width: 500px;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-align: left !important;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
border-bottom-left-radius: $border-radius;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
max-width: 500px;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
.sub-section-contact {
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 15px 0;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
195
resources/sass/_partials/_media.scss
Normal file
195
resources/sass/_partials/_media.scss
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
@media only screen and (max-width: 1408px) {
|
||||||
|
section#activites {
|
||||||
|
div.headline {
|
||||||
|
max-width: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-section {
|
||||||
|
&.slide {
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
transform: translateX(40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
transform: translateX(-40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
div.content {
|
||||||
|
left: -40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
div.content {
|
||||||
|
right: -40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
header.logo-container {
|
||||||
|
img {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#splashscreen {
|
||||||
|
.splashscreen-text-container {
|
||||||
|
top: 40%;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
border-top-width: 4px;
|
||||||
|
max-width: 680px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#competitions, section#partenaires {
|
||||||
|
.border-seperator {
|
||||||
|
border-top-width: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#activites {
|
||||||
|
.sub-section {
|
||||||
|
&.slide {
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
div.content {
|
||||||
|
left: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
div.content {
|
||||||
|
right: -50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
header.logo-container {
|
||||||
|
img {
|
||||||
|
width: 50%;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#splashscreen {
|
||||||
|
.splashscreen-text-container {
|
||||||
|
top: 40%;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
border-top: 2px solid white;
|
||||||
|
max-width: 380px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#competitions, section#partenaires {
|
||||||
|
padding: 2rem 0.5rem;
|
||||||
|
|
||||||
|
.slider.column {
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-seperator {
|
||||||
|
border-top-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section#activites {
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.sub-section {
|
||||||
|
min-height: 100vh;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
div.headline {
|
||||||
|
max-width: 75% !important;
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.slide {
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.animation-inversed) {
|
||||||
|
div.content {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animation-inversed {
|
||||||
|
div.content {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.content {
|
||||||
|
height: auto;
|
||||||
|
width: 100vw;
|
||||||
|
padding-right: 2rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
195
resources/sass/_partials/_navigation.scss
Normal file
195
resources/sass/_partials/_navigation.scss
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
//vars
|
||||||
|
$fg: #115FA2;
|
||||||
|
$pi: 3.14;
|
||||||
|
|
||||||
|
//config
|
||||||
|
$menu-items: 3;
|
||||||
|
$menu-items-always-open: 3;
|
||||||
|
$open-distance: 105px;
|
||||||
|
$opening-angle: $pi*2;
|
||||||
|
$hamburger-spacing: 10px;
|
||||||
|
$default-opacity: 0.70;
|
||||||
|
$item-spacing: 64px;
|
||||||
|
|
||||||
|
%item {
|
||||||
|
background: $fg;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
margin-left: -16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52px;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
transition: transform ease-out 200ms;
|
||||||
|
opacity: $default-opacity;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%item-hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 5px;
|
||||||
|
width: 100px;
|
||||||
|
max-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
.menu-open {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item, .menu-item-always-open {
|
||||||
|
@extend %item;
|
||||||
|
opacity: 0;
|
||||||
|
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||||
|
|
||||||
|
@for $i from 1 through $menu-items {
|
||||||
|
&:nth-child(#{$i+2}) {
|
||||||
|
transition-duration: 180ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through $menu-items-always-open {
|
||||||
|
.menu-item-always-open:nth-of-type(#{$i+3}) {
|
||||||
|
opacity: $default-opacity;
|
||||||
|
top: 20px + $item-spacing*$i;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@extend %item-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
$width: 32px;
|
||||||
|
$height: 4px;
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
background: white;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -$width/2;
|
||||||
|
margin-top: -$height/2;
|
||||||
|
transition: transform 200ms;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
transform: translate3d(0, -$hamburger-spacing, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
transform: translate3d(0, $hamburger-spacing, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open:checked + .menu-open-button {
|
||||||
|
.hamburger {
|
||||||
|
&:first-of-type {
|
||||||
|
transform: translate3d(0, 0, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
transform: translate3d(0, 0, 0) scale(0.1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
transform: translate3d(0, 0, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open-button {
|
||||||
|
@extend %item;
|
||||||
|
z-index: 2;
|
||||||
|
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||||
|
transition-duration: 400ms;
|
||||||
|
transform: scale(1.05, 1.05) translate3d(0, 0, 0);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@extend %item-hover;
|
||||||
|
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open:checked + .menu-open-button {
|
||||||
|
transition-timing-function: linear;
|
||||||
|
transition-duration: 200ms;
|
||||||
|
transform: scale(0.9, 0.9) translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open:checked ~ .menu-item, .menu-open:checked ~ .menu-item-always-open {
|
||||||
|
opacity: $default-opacity;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@extend %item-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open:checked ~ .menu-item {
|
||||||
|
@for $i from 1 through $menu-items {
|
||||||
|
&:nth-child(#{$i+2}) {
|
||||||
|
transition-duration: 90ms+(100ms*$i);
|
||||||
|
transform: translate3d(0, $item-spacing*$i, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open:checked ~ .menu-item-always-open {
|
||||||
|
transition-duration: 90ms+(100ms);
|
||||||
|
transform: translate3d(0, $item-spacing*$menu-items, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-icon {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item.has-tooltip-text {
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
background: $fg;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
height: 52px;
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
padding: 0 30px 0 15px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 52px;
|
||||||
|
z-index:-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
18
resources/sass/app.scss
Normal file
18
resources/sass/app.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
@import "../../node_modules/bulma/sass/utilities/_all.sass";
|
||||||
|
@import "../../node_modules/bulma/sass/base/_all.sass";
|
||||||
|
@import "../../node_modules/bulma/sass/grid/columns.sass";
|
||||||
|
@import "../../node_modules/bulma/sass/layout/section.sass";
|
||||||
|
@import "../../node_modules/bulma/sass/elements/button.sass";
|
||||||
|
@import "../../node_modules/bulma-carousel/src/sass/index.sass";
|
||||||
|
|
||||||
|
// Disable the widescreen breakpoint
|
||||||
|
$widescreen-enabled: false;
|
||||||
|
|
||||||
|
// Disable the fullhd breakpoint
|
||||||
|
$fullhd-enabled: false;
|
||||||
|
|
||||||
|
@import "./_partials/general";
|
||||||
|
@import "./_partials/navigation";
|
||||||
|
@import "./_partials/media";
|
||||||
Loading…
x
Reference in New Issue
Block a user