Conjure/Site-Web
6
0
Fork 0
mirror of https://github.com/ConjureETS/Site.git synced 2026-03-24 01:30:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

migration to astro

Browse Source
This commit is contained in:
Trit0 2026-02-06 20:57:29 -05:00 committed by Tristan
parent b333fd34b1
commit d580ae5546
25 changed files with 732 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -2,3 +2,7 @@
node_modules
package-lock.json
.vscode
.DS_Store
.astro
dist/
.cache/

173
README.md
View File

@ -1,20 +1,163 @@
# Conjure Site
Site web officiel du club Conjure de l'ÉTS
# Club Conjure - Site Web Officiel
## Installation Production
1) Clone projet de git
2) Changer les settings de nginx ou apache (on a choisi nginx en 2019)
Site web officiel du club Conjure de l'École de Technologie Supérieure (ÉTS).
## Installation Local
1) Clone projet de git
2) Faire `npm install` en ligne de commande
## À propos
## Dépendances
- CSS Framework : [Bulma v.0.7.5](https://bulma.io/)
- Compilation par Gulp
Laboratoire de médias interactifs - depuis 2009. Le Club Conjure offre formation, équipement et des opportunités de compétition aux développeurs de jeux vidéo et médias interactifs.
## Compilation (Local)
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.
## Technologies
J'ai dû utiliser Node 14 pour que ça fonctionne en 2025 --t
- **Framework**: [Astro](https://astro.build) - Framework web statique ultra-rapide
- **Styling**: [SCSS](https://sass-lang.com) + [Bulma](https://bulma.io) - CSS framework moderne
- **Carousel**: [Bulma Carousel](https://github.com/creativebulma/bulma-carousel) - Carousel responsive
- **JavaScript**: Vanilla JS pour les interactions
## Installation & Setup
### Prérequis
- Node.js 16.12+ et npm
### Installation
```bash
npm install
```
### Développement
Démarrer le serveur de développement :
```bash
npm run dev
```
Le site sera disponible à `http://localhost:3000`
### Build
Créer une version optimisée pour la production :
```bash
npm run build
```
Les fichiers générés seront dans le répertoire `dist/`
### Aperçu du Build
Prévisualiser le build localement :
```bash
npm run preview
```
## Structure du Projet
```
src/
├── pages/ # Routes statiques
│ ├── index.astro # Page d'accueil (principal)
│ ├── 404.astro # Page d'erreur 404
│ ├── 500.astro # Page d'erreur 500
│ └── fr/ # Routes françaises
│ ├── index.astro
│ └── 404.astro
├── layouts/ # Layouts réutilisables
│ └── MainLayout.astro
├── components/ # Composants réutilisables
│ ├── Navigation.astro
│ └── Footer.astro
├── styles/ # Feuilles de style SCSS
│ ├── main.scss
│ └── _partials/
│ ├── _general.scss
│ ├── _navigation.scss
│ └── _media.scss
├── scripts/ # Scripts JavaScript/TypeScript
│ └── app.ts # Logique d'application principale
└── env.d.ts # Déclarations TypeScript Astro
public/ # Fichiers statiques
├── img/ # Images
│ ├── icons/
│ ├── competitions/
│ └── sponsors/
├── js/ # Scripts JS compilés
└── css/ # CSS minifiés
```
## Pages
- **`/`** - Page d'accueil principale (français)
- **`/fr/`** - Page d'accueil francaise (alias)
- **`/404`** - Page d'erreur 404
- **`/fr/404`** - Page d'erreur 404 (français)
- **`/500`** - Page d'erreur 500
## Fonctionnalités
- ✨ Navigation responsive avec menu hamburger
- 📱 Design mobile-first avec Bulma
- 🎠 Carousel de compétitions
- ✏️ Animation de chiffres (année)
- 🎬 Sections d'activités interactives
- 🗺️ Carte intégrée Google Maps
- 📱 Routes bilingues (Français disponible)
## Scripts
| Commande | Description |
|----------|-------------|
| `npm run dev` | Démarre le serveur de développement |
| `npm run build` | Crée une version optimisée pour la production |
| `npm run preview` | Prévisualise le build en local |
## Déploiement
Le site Astro génère des fichiers HTML/CSS/JS statiques optimisés. Ces fichiers peuvent être déployés sur n'importe quel serveur web statique :
- Netlify
- Vercel
- GitHub Pages
- AWS S3
- Hébergement traditionnel
Déployez simplement le contenu du répertoire `dist/`
## Scripts Personnalisés
### Carousel (`src/scripts/app.ts`)
Initialise Bulma Carousel pour le slider de compétitions.
### Animation de Chiffres
Anime les années dans la section splash screen (2009 - année courante).
### Activités Interactives
Gère les clics sur les boutons d'activités pour afficher/masquer le contenu détaillé.
## Ressources
- [Documentation Astro](https://docs.astro.build)
- [Documentation Bulma](https://bulma.io/documentation/)
- [Bulma Carousel](https://creativebulma.net/docs/bulma-carousel/)
## Auteurs
Club Conjure - ÉTS
## Licence
ISC
## Contactez-nous
- 📧 Email: conjure@ens.etsmtl.ca
- 📍 Adresse: 1219 William, Montréal, Local D-2020
- 📞 Téléphone: (514) 396-8800 poste #7713
- 📱 Instagram: [@conjure_ets](https://instagram.com/conjure_ets)
- 💼 LinkedIn: [Conjure-ets](https://linkedin.com/company/conjure-ets)
- 🎮 Itch.io: [conjure.itch.io](https://conjure.itch.io)

15
astro.config.mjs Normal file
View File

@ -0,0 +1,15 @@
import { defineConfig } from 'astro/config';
import sass from 'sass';
export default defineConfig({
integrations: [],
vite: {
css: {
preprocessorOptions: {
scss: {
implementation: sass,
},
},
},
},
});

41
gulpfile.js
View File

@ -1,41 +0,0 @@
'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'));
});

24
package.json
View File

@ -2,26 +2,20 @@
"name": "Conjure-Site",
"version": "1.0.0",
"description": "Site web officiel du club Conjure de l'ÉTS",
"main": "index.js",
"type": "module",
"dependencies": {
"bulma-carousel": "^4.0.4"
"bulma-carousel": "^4.0.4",
"bulma": "^0.7.5",
"sass": "^1.58.0"
},
"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"
"astro": "^4.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",

1
public/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

218
public/index.html
View File

@ -1,218 +0,0 @@
<!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">
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
</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://instagram.com/conjure_ets/" target="_blank" rel="noopener noreferrer" class="menu-item">
<div class="icon-centerer">
<img src="img/icons/instagram.svg" alt="Instagram" class="icon-32"/>
</div>
</a>
<a href="https://linkedin.com/company/conjure-ets" target="_blank" rel="noopener noreferrer" class="menu-item">
<img src="img/icons/linkedin.svg" alt="LinkedIn"/>
</a>
<!-- <a href="https://www.facebook.com/ConjureETS/" target="_blank" rel="noopener noreferrer" class="menu-item">-->
<!-- <img src="./img/icons/facebook.png" alt="Facebook"/>-->
<!-- </a>-->
<a href="https://conjure.itch.io" target="_blank" rel="noopener noreferrer" class="menu-item">
<img src="img/icons/itch-io.svg" alt="Itch.io" />
</a>
<a href="https://linktr.ee/conjureetsmtl" target="_blank" rel="noopener noreferrer" class="menu-item-always-open">
<div class="icon-centerer">
<img src="img/icons/linktree.svg" alt="Linktree" class="icon-32"/>
</div>
</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="Équipement">
<h3>Équipement</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 accommodé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/>
</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/GamelabUbisoft.png" alt="Logo Concours Universitaire Ubisoft">
</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-two-fifths is-8-tablet is-full-mobile">
<div class="grid columns is-multiline">
<a class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile" target="_blank" href="https://www.etsmtl.ca"><img class="" src="./img/sponsors/ETS-color.png" alt="Logo École de technologie supérieure"></a>
<a class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile" target="_blank" href="https://lanets.ca"><img class="" src="./img/sponsors/LanETS-black.png" alt="Logo LanETS"></a>
<a class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile" target="_blank" href="https://www.aeets.com/"><img class="" src="./img/sponsors/AEETS-color.png" alt="Logo AEETS-color"></a>
</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 &copy; Conjure</p>
</footer>
<script src="./js/bulma-carousel.min.js"></script>
<script type="application/javascript" src="./js/main.min.js"></script>
</body>
</html>

1
public/js/bulma-carousel.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
public/js/main.min.js vendored
View File

@ -1 +0,0 @@
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>'}});

31
public/view/fr/404.html
View File

@ -1,31 +0,0 @@
<!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>
<main>
<section class="section full-height" id="splashscreen">
<div class="bg-img full-height full-width"></div>
<div class="splashscreen-text-container full-width error">
<h1>404 Page non trouvé!</h1>
<div class="border-seperator"></div>
<p>Nos jeux ont pris le contrôle de cette zone. </br> S'il vous plaît, téléportez-vous à la <a href="https://conjure.etsmtl.ca">zone sécuritaire</a> la plus proche.</p>
</div>
</section>
</main>
</body>
</html>

31
public/view/fr/500.html
View File

@ -1,31 +0,0 @@
<!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>
<main>
<section class="section full-height" id="splashscreen">
<div class="bg-img full-height full-width"></div>
<div class="splashscreen-text-container full-width error">
<h1>500 Une erreur est survenue!</h1>
<div class="border-seperator"></div>
<p>Un glitch s'est glissé dans nos jeux. </br> S'il vous plaît, redémarrer votre recherche à la <a href="https://conjure.etsmtl.ca">dernière sauvegarde</a>.</p>
</div>
</section>
</main>
</body>
</html>

56
resources/js/app.js
View File

@ -1,56 +0,0 @@
(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'));
}

18
resources/sass/app.scss
View File

@ -1,18 +0,0 @@
@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";

26
src/components/Footer.astro Normal file
View File

@ -0,0 +1,26 @@
---
// Footer component
---
<footer class="full-width">
<div class="is-hidden-tablet is-full-mobile sub-section-contact">
<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 &copy; Conjure <span id="current-year"></span></p>
</footer>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

47
src/components/Navigation.astro Normal file
View File

@ -0,0 +1,47 @@
---
// Navigation component
---
<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="https://instagram.com/conjure_ets/" target="_blank" rel="noopener noreferrer" class="menu-item">
<div class="icon-centerer">
<img src="/img/icons/instagram.svg" alt="Instagram" class="icon-32" />
</div>
</a>
<a href="https://linkedin.com/company/conjure-ets" target="_blank" rel="noopener noreferrer" class="menu-item">
<img src="/img/icons/linkedin.svg" alt="LinkedIn" />
</a>
<a href="https://conjure.itch.io" target="_blank" rel="noopener noreferrer" class="menu-item">
<img src="/img/icons/itch-io.svg" alt="Itch.io" />
</a>
<a href="https://linktr.ee/conjureetsmtl" target="_blank" rel="noopener noreferrer" class="menu-item-always-open">
<div class="icon-centerer">
<img src="/img/icons/linktree.svg" alt="Linktree" class="icon-32" />
</div>
</a>
<a href="mailto:conjure@ens.etsmtl.ca" class="menu-item-always-open">
<img src="/img/icons/email.png" alt="Courriel" />
</a>
</nav>

1
src/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference path="../.astro/types.d.ts" />

33
src/layouts/MainLayout.astro Normal file
View File

@ -0,0 +1,33 @@
---
import '../styles/main.scss';
interface Props {
title?: string;
}
const { title } = Astro.props;
---
<!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>{title || 'Club Conjure'}</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
</head>
<body>
<slot />
<script>
import { initApp } from '../scripts/app';
initApp();
</script>
</body>
</html>
<style is:global>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
</style>

25
src/pages/404.astro Normal file
View File

@ -0,0 +1,25 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
---
<MainLayout title="404 - Page non trouvée">
<Navigation />
<main>
<section class="section full-height" id="error-404">
<div class="bg-img full-height full-width"></div>
<div class="splashscreen-text-container full-width error">
<h1>404</h1>
<div class="border-seperator"></div>
<h2>Page non trouvée</h2>
<p style="font-size: 1.5rem; margin-top: 2rem;">
<a href="/" style="color: white; text-decoration: underline;">Retourner à l'accueil</a>
</p>
</div>
</section>
</main>
<Footer />
</MainLayout>

25
src/pages/500.astro Normal file
View File

@ -0,0 +1,25 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
---
<MainLayout title="500 - Erreur serveur">
<Navigation />
<main>
<section class="section full-height" id="error-500">
<div class="bg-img full-height full-width"></div>
<div class="splashscreen-text-container full-width error">
<h1>500</h1>
<div class="border-seperator"></div>
<h2>Erreur serveur</h2>
<p style="font-size: 1.5rem; margin-top: 2rem;">
<a href="/" style="color: white; text-decoration: underline;">Retourner à l'accueil</a>
</p>
</div>
</section>
</main>
<Footer />
</MainLayout>

236
src/pages/index.astro Normal file
View File

@ -0,0 +1,236 @@
---
import MainLayout from '../layouts/MainLayout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
---
<MainLayout title="Club Conjure - Laboratoire de médias interactifs">
<Navigation />
<main>
<!-- Splash Screen Section -->
<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>
<!-- About 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="Équipement" />
<h3>Équipement</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 accommodé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">
<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 />
</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>
<!-- Activities 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>
<!-- Competitions 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/GamelabUbisoft.png" alt="Logo Concours Universitaire Ubisoft" />
</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>
<!-- Partners 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-two-fifths is-8-tablet is-full-mobile">
<div class="grid columns is-multiline">
<a
class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
target="_blank"
href="https://www.etsmtl.ca"
><img class="" src="/img/sponsors/ETS-color.png" alt="Logo École de technologie supérieure"
/></a
>
<a
class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
target="_blank"
href="https://lanets.ca"
><img class="" src="/img/sponsors/LanETS-black.png" alt="Logo LanETS"
/></a
>
<a
class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
target="_blank"
href="https://www.aeets.com/"
><img class="" src="/img/sponsors/AEETS-color.png" alt="Logo AEETS-color"
/></a
>
</div>
</div>
</div>
</section>
</main>
<Footer />
</MainLayout>
<script>
import { initCarousel, animateNumbers, setupActivityButtons } from '../scripts/app';
// Initialize carousel
initCarousel();
// Animate year numbers
document.querySelectorAll('.year-animated').forEach((item) => {
animateNumbers(item);
});
// Setup activity buttons
setupActivityButtons();
</script>

90
src/scripts/app.ts Normal file
View File

@ -0,0 +1,90 @@
import BulmaCarousel from 'bulma-carousel';
export function initApp() {
addCopyrightCurrentDate();
}
export function initCarousel() {
// Initialize all carousels with the given selector
const carousels = 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>',
},
});
return carousels;
}
function addCopyrightCurrentDate() {
const footer = document.querySelector('footer');
if (footer) {
const p = footer.querySelector('p');
if (p) {
const yearSpan = p.querySelector('#current-year');
if (yearSpan) {
yearSpan.textContent = new Date().getFullYear().toString();
}
}
}
}
export function animateNumbers(item: HTMLElement) {
const intervalTime = 1;
const incrementation = 7;
setTimeout(() => {
let endValue = item.getAttribute('data-endvalue');
endValue = String(
endValue === null ? new Date().getFullYear() : parseInt(endValue || '2024')
);
const duration = parseInt(endValue) * intervalTime / incrementation;
let currentDuration = duration;
const animation = setInterval(() => {
currentDuration -= intervalTime;
const val = parseInt(item.innerHTML || '0');
const newValue = val + incrementation > parseInt(endValue) ? parseInt(endValue) : val + incrementation;
item.innerHTML = pad(newValue, 4);
if (currentDuration <= 0) {
clearInterval(animation);
}
}, intervalTime);
}, parseInt(item.getAttribute('data-delay') || '250'));
}
function pad(n: number, width: number, z: string = '0'): string {
const nStr = n + '';
return nStr.length >= width ? nStr : new Array(width - nStr.length + 1).join(z) + nStr;
}
export function setupActivityButtons() {
const buttons = document.querySelectorAll('section#activites .is-mtlgj-btn');
buttons.forEach((btn) => {
btn.addEventListener('click', showActivityContent);
});
}
function showActivityContent(e: Event) {
const target = e.target as HTMLElement;
if (target && target.parentElement) {
const parent = target.parentElement.parentElement?.parentElement;
if (parent) {
const headline = parent.querySelector('.headline');
const subsection = parent;
if (headline) {
headline.classList.toggle('toggle-visibility');
}
if (subsection) {
subsection.classList.toggle('slide');
}
}
}
}

45
resources/sass/_partials/_general.scss → src/styles/_partials/_general.scss
View File

@ -56,7 +56,7 @@ section#splashscreen {
padding: 0 !important;
.bg-img {
background-image: url('../img/splashscreen.jpg');
background-image: url('/img/splashscreen.jpg');
background-size: cover;
}
@ -213,11 +213,11 @@ section#activites {
transition: transform 2s;
&.gala-img {
background-image: url('../img/gala.jpg');
background-image: url('/img/gala.jpg');
}
&.mtlgj-img {
background-image: url('../img/mtlgj.jpg');
background-image: url('/img/mtlgj.jpg');
}
}
@ -355,3 +355,42 @@ footer {
text-align: center;
}
}
// Error pages styling (404, 500)
section#error-404,
section#error-500 {
padding: 0 !important;
.bg-img {
background-image: url('/img/splashscreen.jpg');
background-size: cover;
}
.splashscreen-text-container {
position: absolute;
top: 40%;
text-align: center;
color: white;
font-size: 4.5rem;
padding: 1rem 2rem 2rem 1rem;
background-color: rgba(0, 0, 0, 0.6);
h1 {
font-weight: bold;
}
p {
font-size: 1.5rem;
padding: 1rem;
}
.border-seperator {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-top: 5px solid white;
max-width: 900px;
border-radius: $border-radius;
}
}
}

0
resources/sass/_partials/_media.scss → src/styles/_partials/_media.scss
View File

1
resources/sass/_partials/_navigation.scss → src/styles/_partials/_navigation.scss
View File

@ -204,4 +204,3 @@ $item-spacing: 64px;
align-items: center;
height: 100%;
}

18
src/styles/main.scss Normal file
View File

@ -0,0 +1,18 @@
@charset "utf-8";
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/grid/columns.sass";
@import "bulma/sass/layout/section.sass";
@import "bulma/sass/elements/button.sass";
@import "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";