First page

package-lock.json

@@ -7,6 +7,12 @@
 		"": {
 			"name": "website",
 			"version": "0.0.1",
+			"dependencies": {
+				"@fortawesome/free-brands-svg-icons": "^6.3.0",
+				"@fortawesome/free-solid-svg-icons": "^6.3.0",
+				"@picocss/pico": "^1.5.7",
+				"svelte-fa": "^3.0.3"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/adapter-static": "^2.0.1",
@@ -18,8 +24,10 @@
 				"eslint-plugin-svelte3": "^4.0.0",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
+				"sass": "^1.58.2",
 				"svelte": "^3.54.0",
 				"svelte-check": "^3.0.1",
+				"svelte-preprocess": "^5.0.1",
 				"tslib": "^2.4.1",
 				"typescript": "^4.9.3",
 				"vite": "^4.0.0"
@@ -400,6 +408,39 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-common-types": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+			"integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
+			"hasInstallScript": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-brands-svg-icons": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.3.0.tgz",
+			"integrity": "sha512-xI0c+a8xnKItAXCN8rZgCNCJQiVAd2Y7p9e2ND6zN3J3ekneu96qrePieJ7yA7073C1JxxoM3vH1RU7rYsaj8w==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-solid-svg-icons": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
+			"integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.8",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -493,6 +534,11 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/@picocss/pico": {
+			"version": "1.5.7",
+			"resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.7.tgz",
+			"integrity": "sha512-RygdXNlSXieAs9jMw/AeqA1ki1kldgEYbRn8BnYZIPfRTM5NWZ4uVzMK6uMPhYlRjoT5wD/OplZvIefnCqyDCQ=="
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.21",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -1689,6 +1735,12 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+			"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2408,6 +2460,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.58.2",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.2.tgz",
+			"integrity": "sha512-2mbyOWOv/lhEXD6nVrQZQ4KT2DlwcODbTskM42EyqBAFUWOhiiYtAXZqjZz1ygzapYf+N+2GwfIH9M5FM4GUMg==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.3.8",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -2597,6 +2666,11 @@
 				"svelte": "^3.55.0"
 			}
 		},
+		"node_modules/svelte-fa": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-3.0.3.tgz",
+			"integrity": "sha512-GIikJjcVCD+5Y/x9hZc2R4gvuA0gVftacuWu1a+zVQWSFjFYZ+hhU825x+QNs2slsppfrgmFiUyU9Sz9gj4Rdw=="
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",

package.json

@@ -22,11 +22,19 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
+		"sass": "^1.58.2",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
+		"svelte-preprocess": "^5.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/free-brands-svg-icons": "^6.3.0",
+		"@fortawesome/free-solid-svg-icons": "^6.3.0",
+		"@picocss/pico": "^1.5.7",
+		"svelte-fa": "^3.0.3"
+	}
 }

src/app.html

@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div style="display: contents" class="container">%sveltekit.body%</div>
 	</body>
 </html>

src/app.scss

@@ -0,0 +1,17 @@
+/* Light scheme (Default) */
+/* Can be forced with data-theme="light" */
+
+:root {
+	--primary: #189ad6;
+	--primary-hover: #0288d1;
+	--primary-focus: rgba(3, 155, 229, 0.125);
+	--primary-inverse: #fff;
+}
+
+/* Pink (Common styles) */
+:root {
+	--form-element-active-border-color: var(--primary);
+	--form-element-focus-color: var(--primary-focus);
+	--switch-color: var(--primary-inverse);
+	--switch-checked-background-color: var(--primary);
+}

src/routes/+layout.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import '@picocss/pico/';
+	import Fa from 'svelte-fa';
+	import { faBars } from '@fortawesome/free-solid-svg-icons';
+	import { faFacebook, faTwitter, faInstagram, faGitlab } from '@fortawesome/free-brands-svg-icons';
+</script>
+
+<nav>
+	<ul>
+		<li><img id="logo" src="/favicon.png" alt="PLS Logo" /></li>
+		<li><strong>PLS5618</strong></li>
+	</ul>
+	<ul>
+		<li>
+			<details role="list" dir="rtl">
+				<summary aria-haspopup="listbox" role="link">
+					<Fa icon={faBars} />
+				</summary>
+				<ul role="listbox">
+					<li><a href="/">L'équipe</a></li>
+					<li><a href="/resultats">Résultats</a></li>
+					<li><a href="/partenaires">Partenaires</a></li>
+					<li>
+						<div id="socials">
+							<a href="https://www.facebook.com/PLS5618" target="_blank" rel="noreferrer">
+								<Fa icon={faFacebook} />
+							</a>
+							<a href="https://twitter.com/pls5618" target="_blank" rel="noreferrer">
+								<Fa icon={faTwitter} />
+							</a>
+							<a href="https://www.instagram.com/team5618" target="_blank" rel="noreferrer">
+								<Fa icon={faInstagram} />
+							</a>
+						</div>
+					</li>
+				</ul>
+			</details>
+		</li>
+	</ul>
+</nav>
+
+<slot />
+
+<style lang="scss">
+	#logo {
+		height: 64px;
+		object-fit: contain;
+	}
+	#socials {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-between;
+		a:hover {
+			background-color: transparent;
+			color: var(--primary);
+		}
+		a:active,
+		a:focus,
+		a::selection {
+			background-color: transparent;
+		}
+	}
+
+	* summary::after {
+		display: none;
+	}
+	nav {
+		padding-inline: 20px;
+	}
+</style>

src/routes/+layout.ts

@@ -1 +1,7 @@
+import type { LayoutLoad } from './$types';
+
+export const load = (async () => {
+    return {};
+}) satisfies LayoutLoad;
+
 export const prerender = true;

src/routes/+page.svelte

@@ -1,2 +1,45 @@
-<h1>Welcome to SvelteKit</h1>
+<div>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	<article>
+		<header>Nous sommes</header>
+		Une équipe de jeunes de 12 à 18 ans, encadrés par des mentors, participant à la compétition internationale
+		de robotique FIRST, chapeautée par la NASA. Notre défi consiste à concevoir et construite un robot
+		en seulement 6 semaines.
+	</article>
+
+	<article>
+		<header>Notre mission</header>
+		L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle en connaissances
+		technologiques et personnelles dans un climat favorisant la confiance et l'autonomie Le projet stimule
+		l'intérêt envers les sciences et technologies tout en développant un sentiment d'appartenance envers
+		l'équipe, l'école et la communauté.
+	</article>
+
+	<article>
+		<header>Nos valeurs</header>
+		<ul>
+			<li>Esprit d'équipe</li>
+			<li>Organisation</li>
+			<li>Connaissances</li>
+			<li>Confiance en soi et envers les autres</li>
+			<li>Plaisir</li>
+			<li>Amitié</li>
+		</ul>
+	</article>
+
+	<article id="links">
+		<a href="/resultats" role="button">Voir nos résultats</a>
+		<a href="/partenaires" role="button">Voir nos partenaires</a>
+	</article>
+</div>
+
+<style lang="scss">
+	article {
+		margin-inline: 50px;
+	}
+
+	#links {
+		display: flex;
+		flex-flow: row;
+		justify-content: space-evenly;
+	}
+</style>

src/routes/partenaires/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+Partenaires

src/routes/resultats/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+resultats

svelte.config.js

@@ -1,11 +1,15 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: preprocess({
+		scss: {
+			prependData: `@import './src/app.scss';`
+		}
+	}),
 
 	kit: {
 		adapter: adapter({