From a0f0faaef6662cc8b8b256354785aa8d30ea0782 Mon Sep 17 00:00:00 2001 From: Claudio Mendes Date: Fri, 9 Oct 2026 21:42:05 +0200 Subject: [PATCH] Refresh canonical hub design system Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- .github/workflows/validate-site.yml | 58 ++++++++++ README.md | 18 ++-- assets/ad-groups.svg | 9 ++ assets/brand-mark.svg | 19 ++++ assets/disk-layout.svg | 8 ++ assets/driver-automation.svg | 8 ++ assets/favicon.svg | 7 ++ assets/osd-logs.svg | 9 ++ index.html | 43 ++++++-- style.css | 161 ++++++++++++++++++++++++++-- 10 files changed, 316 insertions(+), 24 deletions(-) create mode 100644 .github/workflows/validate-site.yml create mode 100644 assets/ad-groups.svg create mode 100644 assets/brand-mark.svg create mode 100644 assets/disk-layout.svg create mode 100644 assets/driver-automation.svg create mode 100644 assets/favicon.svg create mode 100644 assets/osd-logs.svg diff --git a/.github/workflows/validate-site.yml b/.github/workflows/validate-site.yml new file mode 100644 index 0000000..09b8026 --- /dev/null +++ b/.github/workflows/validate-site.yml @@ -0,0 +1,58 @@ +name: Validate site + +on: + push: + branches: [main] + pull_request: + branches: [main] + +permissions: + contents: read + +jobs: + validate: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + + - name: Validate local assets and SVG accessibility + shell: python + run: | + from html.parser import HTMLParser + from pathlib import Path + from urllib.parse import urlparse + import xml.etree.ElementTree as ET + + root = Path(".") + + class LocalAssetParser(HTMLParser): + def handle_starttag(self, tag, attrs): + values = dict(attrs) + for attribute in ("href", "src"): + value = values.get(attribute) + if not value or urlparse(value).scheme or value.startswith(("#", "mailto:")): + continue + path = root / value.split("?", 1)[0].split("#", 1)[0] + if not path.is_file(): + raise SystemExit(f"Missing local asset: {value}") + + html = (root / "index.html").read_text(encoding="utf-8") + LocalAssetParser().feed(html) + + if "style-src 'self'" not in html or "img-src 'self'" not in html: + raise SystemExit("The CSP must restrict styles and images to local assets.") + + for path in sorted((root / "assets").glob("*.svg")): + svg = ET.parse(path).getroot() + if svg.get("role") != "img": + raise SystemExit(f"{path} is missing role=img") + labels = svg.get("aria-labelledby", "").split() + ids = {element.get("id") for element in svg.iter() if element.get("id")} + if len(labels) != 2 or not set(labels).issubset(ids): + raise SystemExit(f"{path} has an invalid accessible label") + + css = (root / "style.css").read_text(encoding="utf-8") + if "transition: all" in css: + raise SystemExit("Avoid transition: all.") + if "prefers-reduced-motion" not in css or ":focus-visible" not in css: + raise SystemExit("Reduced-motion and visible-focus styles are required.") diff --git a/README.md b/README.md index 59f839b..c5e4d1c 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,16 @@ -# vartaxe.github.io +

+ vartaxe Windows endpoint automation +

-Root GitHub Pages site for the [ConfigMgr OSD Script Hub](https://vartaxe.github.io/). -It contains the public landing page formerly hosted by +# Windows endpoint automation + +Canonical GitHub Pages hub for the +[vartaxe Windows endpoint automation projects](https://vartaxe.github.io/). +It unifies the public profile and the ConfigMgr OSD landing page formerly hosted by [`vartaxe/ConfigMgr-OSD`](https://github.com/vartaxe/ConfigMgr-OSD), while the individual script repositories remain the authoritative sources for code, documentation, tests, releases, and checksums. -The broader profile and maintained-fork portfolio is at -[vartaxe.github.io/vartaxe](https://vartaxe.github.io/vartaxe/). - -GitHub Pages publishes `index.html` directly from the root of `main`. +GitHub Pages publishes the dependency-free `index.html`, `style.css`, and local SVG +artwork directly from `main`. The page supports light and dark color schemes, +keyboard navigation, reduced motion, safe-area insets, and a restrictive CSP. diff --git a/assets/ad-groups.svg b/assets/ad-groups.svg new file mode 100644 index 0000000..a81390c --- /dev/null +++ b/assets/ad-groups.svg @@ -0,0 +1,9 @@ + + Active Directory groups + Three people connected as a group. + + + + + + diff --git a/assets/brand-mark.svg b/assets/brand-mark.svg new file mode 100644 index 0000000..2fdd43e --- /dev/null +++ b/assets/brand-mark.svg @@ -0,0 +1,19 @@ + + vartaxe automation mark + A terminal window connected to three deployment nodes. + + + + + + + + + + + + + + + + diff --git a/assets/disk-layout.svg b/assets/disk-layout.svg new file mode 100644 index 0000000..b399726 --- /dev/null +++ b/assets/disk-layout.svg @@ -0,0 +1,8 @@ + + Disk partition layout + A disk divided into guarded partitions. + + + + + diff --git a/assets/driver-automation.svg b/assets/driver-automation.svg new file mode 100644 index 0000000..6b7d011 --- /dev/null +++ b/assets/driver-automation.svg @@ -0,0 +1,8 @@ + + Driver Automation Tool + A package surrounded by automation arrows. + + + + + diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000..2809436 --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,7 @@ + + vartaxe terminal + A terminal prompt on a blue tile with a teal underline. + + + + diff --git a/assets/osd-logs.svg b/assets/osd-logs.svg new file mode 100644 index 0000000..bf9dc0b --- /dev/null +++ b/assets/osd-logs.svg @@ -0,0 +1,9 @@ + + OSD log archive + A document moving into a verified archive. + + + + + + diff --git a/index.html b/index.html index a3c7d02..cad0678 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,14 @@ - + + - + Windows Endpoint Automation | vartaxe + @@ -23,36 +25,57 @@ GitHub Sponsor -

Claudio Mendes · @vartaxe

-

Windows endpoint automation

-

Safety-focused Windows PowerShell 5.1 tools for Configuration Manager operating-system deployment and endpoint management.

+
+
+

Claudio Mendes · @vartaxe

+

Windows endpoint automation

+

Safety-focused Windows PowerShell 5.1 tools for Configuration Manager operating-system deployment and endpoint management.

+
+ Explore the scripts + Browse GitHub +
+
    +
  • MIT licensed
    • +
  • PowerShell 5.1
    • +
  • Validation first
    • +
+
+ Terminal prompt and deployment nodes representing vartaxe automation +

ConfigMgr OSD scripts

+ +

Active Directory

Add computers to AD groups

Add a computer account to Active Directory groups during an OSD task sequence with Kerberos over LDAPS, membership verification, bounded retries, and CMTrace logging.

-

Source · Documentation

+

Read the guideView source

+ +

Diagnostics

Copy OSD logs to a file share

Collect and archive deployment logs, then upload the verified ZIP to an SMB share with retries and remote size checks.

-

Source · Documentation

+

Read the guideView source

+ +

WinPE storage

Disk partition layout

Create a firmware-appropriate GPT or MBR layout in WinPE with fail-closed target selection and explicit safety checks.

-

Warning: this irreversibly cleans and repartitions the target disk.

-

Source · Documentation

+

Warning: this irreversibly cleans and repartitions the target disk.

+

Read the guideView source

Validate before rollout. Automated checks cover syntax, static analysis, and mocked scenarios. Live ConfigMgr, Active Directory, WinPE, and SMB testing remains environment-specific; use a lab and disposable hardware first.

Related maintenance

-
+
+

Driver and BIOS package automation is maintained in Driver Automation Tool, including the consolidated modern management scripts and vendor BIOS apply scripts.

The former standalone Modern Driver Management and Modern BIOS Management repositories are archived compatibility sources. New maintenance belongs in DAT.

diff --git a/style.css b/style.css index d68434b..b118666 100644 --- a/style.css +++ b/style.css @@ -7,6 +7,8 @@ --link: #155799; --border: #d8e0ea; --accent: #159895; + --accent-strong: #117865; + --shadow: 0 1rem 2.5rem rgba(25, 54, 82, 0.1); } * { @@ -57,9 +59,13 @@ a:focus-visible { } header { - padding: 3rem 1rem; + position: relative; + overflow: hidden; + padding: 1.25rem max(1rem, env(safe-area-inset-right)) 4rem max(1rem, env(safe-area-inset-left)); color: #ffffff; - background: linear-gradient(135deg, #155799, #159895); + background: + radial-gradient(circle at 85% 20%, rgba(112, 222, 197, 0.24), transparent 22rem), + linear-gradient(135deg, #103f72, #117865); } header > div, @@ -73,17 +79,35 @@ nav { display: flex; flex-wrap: wrap; gap: 1rem; - margin-bottom: 2rem; + margin-bottom: 3rem; } nav a { + padding: 0.45rem 0.65rem; color: #ffffff; font-weight: 600; + border-radius: 0.35rem; +} + +nav a:hover { + background: rgba(0, 0, 0, 0.2); } .eyebrow { margin-bottom: 0; font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.hero { + display: grid; + align-items: center; + gap: 2rem; +} + +.hero-copy { + min-width: 0; } h1 { @@ -106,7 +130,7 @@ h2 { } main { - padding: 1rem; + padding: 1.5rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); } .grid { @@ -116,15 +140,19 @@ main { } .card { + position: relative; min-width: 0; - padding: 1.25rem; + padding: 1.5rem; background: var(--panel); border: 1px solid var(--border); - border-radius: 0.5rem; + border-radius: 0.8rem; + box-shadow: var(--shadow); } .card h3 { - margin-top: 0; + margin: 0.2rem 0 0.75rem; + color: var(--accent-strong); + text-wrap: balance; } .card p:last-child { @@ -138,6 +166,117 @@ main { border-left: 0.35rem solid var(--accent); } +.brand-mark { + display: block; + width: min(15rem, 65vw); + height: auto; + margin: 0 auto; + filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.2)); +} + +.hero-actions, +.card-links { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.button, +.card-links a { + display: inline-flex; + align-items: center; + min-height: 2.75rem; + padding: 0.65rem 0.9rem; + border: 1px solid currentColor; + border-radius: 0.45rem; + font-weight: 700; + text-decoration: none; +} + +.button { + color: #ffffff; + background: rgba(0, 0, 0, 0.14); +} + +.button:hover { + background: rgba(0, 0, 0, 0.28); +} + +.button-primary { + color: #103f72; + background: #ffffff; + border-color: #ffffff; +} + +.button-primary:hover { + background: #eaf7f4; +} + +.trust-list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0; + list-style: none; +} + +.trust-list li, +.card-kicker { + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.trust-list li { + padding: 0.35rem 0.6rem; + background: rgba(0, 0, 0, 0.18); + border: 1px solid rgba(255, 255, 255, 0.38); + border-radius: 999px; +} + +.card-icon { + display: block; + width: 3rem; + height: 3rem; +} + +.card-kicker { + margin: 1rem 0 0; + color: var(--muted); +} + +.card-links { + margin-top: 1.25rem; +} + +.card-links a { + min-height: 2.5rem; + padding: 0.5rem 0.75rem; +} + +.card-links a:first-child { + color: #ffffff; + background: var(--link); + border-color: var(--link); +} + +.warning { + padding: 0.75rem; + background: color-mix(in srgb, #c2410c 10%, var(--panel)); + border-left: 0.25rem solid #c2410c; +} + +.maintenance-card { + display: grid; + grid-template-columns: auto 1fr; + gap: 0 1rem; +} + +.maintenance-card .card-icon { + grid-row: 1 / span 2; +} + footer { margin-top: 2rem; padding: 1.5rem 1rem; @@ -153,6 +292,14 @@ footer { --muted: #c4ced8; --link: #9dcbff; --border: #33445a; + --accent-strong: #70dec5; + --shadow: none; + } +} + +@media (min-width: 48rem) { + .hero { + grid-template-columns: minmax(0, 1fr) auto; } }