Merge pull request #99 from braboj/fix/installation-instructions

braboj · web-flow · commit 2299e68271a7 · 2026-04-20T15:48:45.000+03:00
Simplify installation instructions
diff --git a/README.md b/README.md
@@ -97,6 +97,11 @@ After editing a chapter in `chapters/`, copy it to
 - [Dev journal](docs/dev-journal.md)
 - [Playbook](docs/PLAYBOOK.md)
 
+## Credits
+
+- [Branimir Georgiev](https://github.com/braboj)
+- [Marwan Rashed](https://github.com/marwan-rashed)
+
 ## License
 
 [MIT](LICENSE.md)
diff --git a/astro-site/src/components/Header.astro b/astro-site/src/components/Header.astro
@@ -31,7 +31,12 @@ const base = import.meta.env.BASE_URL;
 </div>
 
 <div class="site-tabs-bar">
-  <nav class="site-tabs" aria-label="Main navigation">
+  <button class="nav-toggle" id="nav-toggle" aria-label="Open navigation menu" aria-expanded="false">
+    <svg class="nav-toggle-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+    </svg>
+  </button>
+  <nav class="site-tabs" id="site-tabs" aria-label="Main navigation">
     {site.tabs.map((tab) => {
       const tabSection = tab.href.split("/").filter(Boolean)[0];
       const currentSection = currentPath.split("/").filter(Boolean)[0];
@@ -69,4 +74,13 @@ const base = import.meta.env.BASE_URL;
       theme === "light" ? "Switch to dark theme" : "Switch to light theme"
     );
   }
+
+  const navToggle = document.getElementById("nav-toggle");
+  const siteTabs = document.getElementById("site-tabs");
+
+  navToggle.addEventListener("click", () => {
+    const expanded = navToggle.getAttribute("aria-expanded") === "true";
+    navToggle.setAttribute("aria-expanded", String(!expanded));
+    siteTabs.classList.toggle("open");
+  });
 </script>
diff --git a/astro-site/src/content/docs/introduction.md b/astro-site/src/content/docs/introduction.md
@@ -41,39 +41,31 @@ share with others when you are ready.
 
 ## 3. Installation
 
-### Windows
+### Download
 
-1. Download the installer from https://git-scm.com/downloads
-2. Run the installer with the default options
-3. Open PowerShell and run `git --version`
+Go to https://git-scm.com/downloads and download the installer for
+your operating system.
 
-### macOS
+### Install
 
-**Option A — Xcode Command Line Tools (no extra software needed):**
+| OS | How to install |
+|----|---------------|
+| Windows | Run the downloaded installer with the default options |
+| macOS | Run `xcode-select --install` in Terminal, or `brew install git` if you use Homebrew |
+| Ubuntu / Debian | `sudo apt-get install git` |
+| Fedora | `sudo dnf install git` |
+| Arch Linux | `sudo pacman -S git` |
 
-1. Open Terminal and run `git --version`
-2. If Git is not installed, macOS will prompt you to install the Command Line Tools — follow the dialog
+### Verify
 
-**Option B — Homebrew:**
+Open a terminal and run:
 
-1. Install [Homebrew](https://brew.sh/) if you do not have it
-2. Run `brew install git`
-3. Run `git --version`
-
-### Linux
-
-| Distribution    | Command                              |
-|-----------------|--------------------------------------|
-| Ubuntu / Debian | `apt-get install git`                |
-| Fedora 22+      | `dnf install git`                    |
-| Arch Linux      | `pacman -S git`                      |
-| openSUSE        | `zypper install git`                 |
-| Alpine          | `apk add git`                        |
-| Gentoo          | `emerge --ask --verbose dev-vcs/git` |
-| FreeBSD         | `pkg install git`                    |
-| Nix/NixOS       | `nix-env -i git`                     |
+```text
+$ git --version
+git version 2.47.1
+```
 
-After installing, run `git --version` to verify.
+If you see a version number, Git is installed.
 
 ## 4. Hosting
 
@@ -153,13 +145,15 @@ full history.
 
 ![Command Overview](../assets/images/git-command-overview.png)
 
-Commands are grouped by experience level:
+Commands are grouped by category and experience level:
 
-- **Beginner** — Help, Create, Configure, Track, Inspect
-- **Advanced** — Sync, Revert, Branch, Reuse
-- **Expert** — Rewrite and Cleanup (can destroy history — use with caution)
+| Level | Categories |
+|-------|-----------|
+| Beginner | Help, Create, Configure, Track, Inspect |
+| Advanced | Sync, Revert, Branch, Reuse |
+| Expert | Rewrite, Cleanup (can destroy history) |
 
-Each command group is covered in detail in the following chapters. The
+Each category is covered in detail in the following chapters. The
 table below lists the most common commands in daily operations.
 
 | Command | What it does | Example |
diff --git a/astro-site/src/pages/index.astro b/astro-site/src/pages/index.astro
@@ -107,7 +107,7 @@ const headings = [
   <h2 id="about">About</h2>
 
   <ul>
-    <li>Created by <a href="https://github.com/braboj">Branimir Georgiev</a></li>
+    <li>Created by <a href="https://github.com/braboj">Branimir Georgiev</a> and <a href="https://github.com/marwan-rashed">Marwan Rashed</a></li>
     <li>Part of <a href="https://codewithbranko.com">Code with Branko</a> — practical tutorials for developers</li>
   </ul>
 
diff --git a/astro-site/src/styles/global.css b/astro-site/src/styles/global.css
@@ -260,6 +260,10 @@ a:hover {
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
 }
 
+.nav-toggle {
+  display: none;
+}
+
 .site-tabs {
   display: flex;
   padding: 0 var(--space-md);
@@ -333,7 +337,7 @@ a:hover {
 }
 
 .sidebar-toc ul ul > li {
-  margin-bottom: 0;
+  margin-bottom: var(--space-xs);
 }
 
 .sidebar-toc a {
@@ -562,14 +566,44 @@ a:hover {
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
+  .nav-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: #fff;
+    padding: var(--space-sm) var(--space-md);
+    cursor: pointer;
+  }
+
+  .nav-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
   .site-tabs {
-    padding: 0 var(--space-sm);
+    display: none;
+    flex-direction: column;
+    padding: 0;
+    overflow-x: visible;
+  }
+
+  .site-tabs.open {
+    display: flex;
   }
 
   .site-tabs a {
-    font-size: 0.75rem;
-    padding: 0 var(--space-sm);
+    height: auto;
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: none;
+    border-left: 3px solid transparent;
+  }
+
+  .site-tabs a.active {
+    border-bottom: none;
+    border-left: 3px solid var(--color-accent);
+    background: rgba(255, 255, 255, 0.1);
   }
 
   .content {
diff --git a/chapters/01-introduction.md b/chapters/01-introduction.md
@@ -41,39 +41,31 @@ share with others when you are ready.
 
 ## 3. Installation
 
-### Windows
+### Download
 
-1. Download the installer from https://git-scm.com/downloads
-2. Run the installer with the default options
-3. Open PowerShell and run `git --version`
+Go to https://git-scm.com/downloads and download the installer for
+your operating system.
 
-### macOS
+### Install
 
-**Option A — Xcode Command Line Tools (no extra software needed):**
+| OS | How to install |
+|----|---------------|
+| Windows | Run the downloaded installer with the default options |
+| macOS | Run `xcode-select --install` in Terminal, or `brew install git` if you use Homebrew |
+| Ubuntu / Debian | `sudo apt-get install git` |
+| Fedora | `sudo dnf install git` |
+| Arch Linux | `sudo pacman -S git` |
 
-1. Open Terminal and run `git --version`
-2. If Git is not installed, macOS will prompt you to install the Command Line Tools — follow the dialog
+### Verify
 
-**Option B — Homebrew:**
+Open a terminal and run:
 
-1. Install [Homebrew](https://brew.sh/) if you do not have it
-2. Run `brew install git`
-3. Run `git --version`
-
-### Linux
-
-| Distribution    | Command                              |
-|-----------------|--------------------------------------|
-| Ubuntu / Debian | `apt-get install git`                |
-| Fedora 22+      | `dnf install git`                    |
-| Arch Linux      | `pacman -S git`                      |
-| openSUSE        | `zypper install git`                 |
-| Alpine          | `apk add git`                        |
-| Gentoo          | `emerge --ask --verbose dev-vcs/git` |
-| FreeBSD         | `pkg install git`                    |
-| Nix/NixOS       | `nix-env -i git`                     |
+```text
+$ git --version
+git version 2.47.1
+```
 
-After installing, run `git --version` to verify.
+If you see a version number, Git is installed.
 
 ## 4. Hosting
 
@@ -153,13 +145,15 @@ full history.
 
 ![Command Overview](../assets/images/git-command-overview.png)
 
-Commands are grouped by experience level:
+Commands are grouped by category and experience level:
 
-- **Beginner** — Help, Create, Configure, Track, Inspect
-- **Advanced** — Sync, Revert, Branch, Reuse
-- **Expert** — Rewrite and Cleanup (can destroy history — use with caution)
+| Level | Categories |
+|-------|-----------|
+| Beginner | Help, Create, Configure, Track, Inspect |
+| Advanced | Sync, Revert, Branch, Reuse |
+| Expert | Rewrite, Cleanup (can destroy history) |
 
-Each command group is covered in detail in the following chapters. The
+Each category is covered in detail in the following chapters. The
 table below lists the most common commands in daily operations.
 
 | Command | What it does | Example |
