Add some css and the Documentation Component

sandkasten/src/app/app-routing.module.ts

@@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { EditorComponent } from './editor/editor.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { OutputComponent } from './output/output.component';
+import {DocumentationComponent} from "./documentation/documentation.component";
 
-// Toutes les routes de l'application sont définies ici 
+// Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
   { path: 'editor', component: EditorComponent },
-  { path: 'output', component: OutputComponent }
+  { path: 'output', component: OutputComponent },
+  { path: 'documentation', component: DocumentationComponent}
 ];
 
 @NgModule({

sandkasten/src/app/app.component.css

@@ -4,4 +4,6 @@ body{
   justify-content: space-between;
   height: 100vh;
   margin: 0;
+
+  background-color: yellow;
 }

sandkasten/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { FooterComponent } from './footer/footer.component';
 import { EditorComponent } from './editor/editor.component';
 import { OutputComponent } from './output/output.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
+import { DocumentationComponent } from './documentation/documentation.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { LandingPageComponent } from './landing-page/landing-page.component';
     FooterComponent,
     EditorComponent,
     OutputComponent,
-    LandingPageComponent
+    LandingPageComponent,
+    DocumentationComponent
   ],
   imports: [
     BrowserModule,

sandkasten/src/app/documentation/documentation.component.css

@@ -0,0 +1,10 @@
+
+.love-hugo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  font-size: 3rem;
+  color: pink;
+  text-align: center;
+}

sandkasten/src/app/documentation/documentation.component.html

@@ -0,0 +1 @@
+<span class="love-hugo">Ceci est la page Documentation réclamé par Hugo le 21 Septembre 2023. Elle contient une documentation inconnue à ce jour. Cepandant, elle est très importante pour le bon fonctionnement du site et la compréhension de toutes les fonctionnalités ajoutées par l'équipe Sandkasten</span>

sandkasten/src/app/documentation/documentation.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentationComponent } from './documentation.component';
+
+describe('DocumentationComponent', () => {
+  let component: DocumentationComponent;
+  let fixture: ComponentFixture<DocumentationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DocumentationComponent]
+    });
+    fixture = TestBed.createComponent(DocumentationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sandkasten/src/app/documentation/documentation.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-documentation',
+  templateUrl: './documentation.component.html',
+  styleUrls: ['./documentation.component.css']
+})
+export class DocumentationComponent {
+
+}

sandkasten/src/app/header/header.component.css

@@ -34,6 +34,16 @@
   text-decoration: none;
 }
 
+.left_part .menu a:hover {
+  color: yellow;
+  text-decoration: underline;
+}
+
+.left_part .menu a.active {
+  color: yellow;
+  text-decoration: underline;
+}
+
 .sandkasten-logo {
   width: 4rem;
   height: auto;
@@ -46,13 +56,6 @@
   color: white;
 }
 
-.menu {
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  color: white;
-}
-
 .right_part {
   display: flex;
   flex-direction: row;
@@ -67,4 +70,18 @@
   aspect-ratio: 1;
 }
 
+@media (max-width: 1024px) {
+  .toolbar {
+    gap: 2rem;
+  }
+
+  .toolbar .left_part {
+    gap: 2rem;
+  }
+
+  .toolbar .left_part .logo_container .logo_title {
+    display: none;
+  }
+}
+
 

sandkasten/src/app/header/header.component.html

@@ -23,6 +23,12 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
       >Editeur</a>
+
+      <a
+        routerLink="documentation"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >Documentation</a>
     </nav>
   </div>
 

sandkasten/src/app/landing-page/landing-page.component.html

@@ -1,7 +1,9 @@
 <div class="landing-block">
+  <div class="hero-container">
+    <h2 class="hero-title">Bienvenue sur Sandkasten !</h2>
+    <span class="hero-text">Sandkasten est un site vous permettant de tester votre code.</span>
+  </div>
 
-  <a>Bienvenue sur Sandkasten !</a>
-  <a>Sandkasten est un site vous permettant de tester votre code.</a>
   <div class="landing-links">
     <button (click)="onContinue()">Try it now !</button>
   </div>