hamburger menu in vpkely.css

lerina · May 4, 2024 · 5e8ff3e · 5e8ff3e
1 parent d47a133
commit 5e8ff3e
Show file tree

Hide file tree

Showing 2 changed files with 203 additions and 16 deletions.
diff --git a/css/vpkely.css b/css/vpkely.css
@@ -737,3 +737,170 @@ dl:hover dd:last-of-type {
 	display: block;
 }
 
+/* --------- Hamburger Menu -----*/
+/*
+<div class="menu-wrap">
+    <input type="checkbox" class="toggler" />
+    <div class="hamburger">
+        <div></div>
+    </div>
+    <div class="menu">
+        <div>
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">My Work</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+*/
+
+.menu-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.menu-wrap .toggler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  height: 50px;
+  width: 50px;
+  cursor: pointer;
+  z-index: 2;
+}
+.menu-wrap .hamburger {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 60px;
+  width: 60px;
+  background: transparent;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+/* Hamburger line */
+.menu-wrap .hamburger > div {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #fafafa;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.4s;
+}
+
+/* Hamburger top & bottom line */
+.menu-wrap .hamburger > div:before,
+.menu-wrap .hamburger > div:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: inherit;
+  height: 2px;
+  width: 100%;
+  z-index: 1;
+}
+.menu-wrap .hamburger > div:after {
+  top: -10px;
+}
+
+/* Toggler Animation */
+.menu-wrap .toggler:checked + .hamburger > div {
+  transform: rotate(135deg);
+}
+.menu-wrap .toggler:checked + .hamburger > div:before,
+.menu-wrap .toggler:checked + .hamburger > div:after {
+  top: 0;
+  transform: rotate(90deg);
+}
+
+/* Rotate on hover when checked */
+.menu-wrap .toggler:checked:hover + .hamburger > div {
+  transform: rotate(225deg);
+}
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgb(77, 58, 58, 0.8);
+  height: 100vh;
+  width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  opacity: 0;
+  transition: all var(--menu-speed) ease;
+}
+.menu > div {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.4s ease-in;
+}
+.menu ul {
+  list-style: none;
+}
+.menu li {
+  padding: 1rem 0;
+}
+.menu > div a {
+  text-decoration: none;
+  color: #fafafa;
+  font-size: 1.5rem;
+  opacity: 0;
+  transition: opacity 1s ease-in;
+}
+.menu a:hover {
+  color: rgb(230, 177, 177);
+  transition: color 0.3s ease-in;
+}
+
+/* Show Menu */
+.menu-wrap .toggler:checked ~ .menu {
+  opacity: 1;
+  width: 30vw;
+  transition: all var(--menu-speed) ease;
+}
+.menu-wrap .toggler:checked ~ .menu > div {
+  opacity: 1;
+  transition: opacity 0.4s ease-in;
+}
+.menu-wrap .toggler:checked ~ .menu > div a {
+  opacity: 1;
+  transition: opacity 1s ease-in;
+}
+
+@media (max-width: 500px) {
+  header {
+    background: url("./bg-img.jpg") no-repeat 40% center / cover;
+  }
+  .menu-wrap .toggler:checked ~ .menu {
+    width: 65vw;
+  }
+}
+
+
diff --git a/html/workshop/index.md b/html/workshop/index.md
@@ -24,63 +24,72 @@ and a certificate after course completion.
 
 ### Rust Programming Course Outline
 
-Module 1: Getting Started with Rust Programming Language
+Module 1: Getting Started with Rust Programming Language - Premiers pas
 
 - Introduction to Rust Programming
-- Installation
-- First Rust Program
-- Programming Concepts
+- Installation  - Installation et utilisation de rustc et de cargo
+- First Rust Program - Développement d'un jeu de devinettes
+- Programming Concepts -  Syntaxe et types de base
+    * Propriété/Possession (Appartenance) et emprunts
+    * Portée d'une variable
+    * Move vs Copy
+    * Références
+    * Mutabilité
 
 Module 2: Introduction to Ownership
 
 - What is Ownership?
 - References and Borrowing
 - Slice Type
 
-Module 3: Using Structs to Structure Related Data
-
-- Defining and Instantiating Structs
+Module 3: Using Structs to Structure Related Data - Types de données
+- Defining and Instantiating Structs - Structures
 - Method Syntax
 
-Module 4: Enums and Pattern Matching
+Module 4: Enums and Pattern Matching - Enumérations
 
 - Defining an Enum
 - Match Control Flow Operator
 
-Module 5: Manage Projects with Packages, Crates, and Modules
+Module 5: Manage Projects with Packages, Crates, and Modules - Modularité
 
 - Packages and Crates
 - Defining Modules
 
-Module 6: Exploring Collections
+Module 6: Exploring Collections 
 
 - Storing Lists of Values with Vectors
 - Storing UTF-8 Encoded Text with Strings
 - Storing Keys with Associated Values in Hash Maps
 
-Module 7: Error Handling
+Module 7: Error Handling -     Gestion des erreurs
 
 - What is Error Handling
 - Unrecoverable Errors with Panic
 - Recoverable Errors with Result
+- Bubble_up error with `?` - Propagation avec ?
 - To Panic! Or Not to Panic!
 
 Module 8: Generic Types, Traits, and Lifetimes
 
-- Generic Data Types
+- Generic Data Types -     Généricité
+    * Types de données génériques
 - Traits: Defining Shared Behaviour
+    * Traits
 - Validating References with Lifetimes
+    * Durées de vie
 
-Module 9: Writing Automated Tests
+Module 9: Writing Automated Tests -     Tests automatisés
 
-- Writing Automated Tests Overview
+- Writing Automated Tests Overview - Framework de base
 - How to Write Tests?
 - Anatomy of a Test Function
 - Controlling How Tests are Run
 - Running Tests in Parallel or Consecutively
 - Test Organisation
 - Unit Test
 - Integration Test
+- Utilisation de rstest
 
 Module 10: I/O Project: Building a Command Line
 
@@ -90,7 +99,10 @@ Module 10: I/O Project: Building a Command Line
 Module 11: Functional Language Features: Iterators and Closures
 
 - Functional Language Features 
-- Closures: Anonymous Functions that can Capture their Environment 
+- Closures: Anonymous Functions that can Capture their Environment  - Programmation fonctionnelle
+    * Clôtures
+    * Itérateurs
+
 - Processing a Series of Items with Iterators
 
 Module 12: Cargo and Crates.io
@@ -103,7 +115,11 @@ Module 12: Cargo and Crates.io
 
 Module 13: Exploring Smart Pointers and Fearless Concurrency
 
-- Smart Pointers
+- Smart Pointers - Pointeurs intelligents
+  * Box
+  * Rc
+  * RefCell
+
 - Fearless Concurrency
 - Creating a New Thread with Spawn
 
@@ -133,6 +149,10 @@ Module 17: Webassembly with Rust
 - wasm-pack
 - Practice time: A wasm project
 
+
+
+---
+
 ## Intermediate Level
 
 [bcnrust devbcn workshop](https://bcnrust.github.io/devbcn-workshop/){target="_blank"}