From 5e8ff3e21741316acb235299d795a01973fd52a4 Mon Sep 17 00:00:00 2001 From: Lerina J-Y Razafy Date: Sat, 4 May 2024 11:26:06 +0200 Subject: [PATCH] hamburger menu in vpkely.css --- css/vpkely.css | 167 +++++++++++++++++++++++++++++++++++++++++ html/workshop/index.md | 52 +++++++++---- 2 files changed, 203 insertions(+), 16 deletions(-) diff --git a/css/vpkely.css b/css/vpkely.css index 87a1643..3dbe4a6 100644 --- a/css/vpkely.css +++ b/css/vpkely.css @@ -737,3 +737,170 @@ dl:hover dd:last-of-type { display: block; } +/* --------- Hamburger Menu -----*/ +/* +
+ +
+
+
+
+
+ +
+
+
+*/ + +.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 index 8939610..e591572 100644 --- a/html/workshop/index.md +++ b/html/workshop/index.md @@ -24,12 +24,17 @@ 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 @@ -37,43 +42,46 @@ Module 2: Introduction to 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 @@ -81,6 +89,7 @@ Module 9: Writing Automated Tests - 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"}