Rebuild homepage to match original, fix overlays, update skills

- Replace pink/purple gradient overlay with dark overlay matching original
- Rebuild homepage with proper section structure: hero with curved
  bottom, icon cards overlapping hero, blog posts, location banner
  with lab background, partner logos, bottom cityscape banner
- Add Font Awesome for proper icons
- Add homepage-specific SCSS partial
- Fix featured image on latest blog post
- Update wp-to-ghpages and wp-audit skills with lessons learned:
  extract actual overlay colors from CSS, include icon libraries,
  check per-page CSS for backgrounds/sections, verify post images

Author: mohammedkhalfan

.claude/skills/wp-audit.md

@@ -103,6 +103,37 @@ done
 
 **Gotcha: Use headless Chrome screenshots to see actual colors/fonts — don't search for theme defaults.** WordPress sites customize colors via the Theme Customizer, overriding theme defaults. The actual values live in inline `<style>` blocks, not the theme's CSS file.
 
+**CRITICAL: Extract per-page CSS for every key page.** WordPress page builders (Elementor, WPBakery, Divi, etc.) generate per-page CSS files that contain the REAL design values — background images, overlay colors, section padding, shape dividers, font sizes/families, icon sizes, and hover effects. The theme CSS only has defaults. You must find these per-page CSS files and extract the actual values.
+
+```bash
+# Find per-page CSS URLs (look for page/post ID-based CSS files)
+curl -sL "$SITE_URL" | grep -oP "href='[^']*post-[0-9]+\.css[^']*'"
+
+# Fetch each one and extract:
+# - Background images: url("...")
+# - Overlay colors: background-color:rgba(...)
+# - Section padding: padding:...
+# - Shape divider dimensions (SVG width/height)
+# - Font families, sizes, weights, colors
+curl -sL "<per-page-css-url>" > page-styles.css
+
+# Extract background images
+grep -oP 'url\("[^"]*"\)' page-styles.css
+
+# Extract overlay colors and opacities
+grep -oP 'background-color:rgba\([^)]+\)' page-styles.css
+grep -oP 'opacity:[0-9.]+' page-styles.css
+
+# Extract section padding values
+grep -oP 'padding:[^;]+' page-styles.css
+
+# Extract font specs
+grep -oP 'font-family:"[^"]*"' page-styles.css | sort -u
+grep -oP 'font-size:[0-9]+px' page-styles.css | sort -u
+```
+
+**Gotcha: Don't invent overlay colors.** Many themes apply dark semi-transparent overlays over hero/banner images, NOT colored gradients. If you guess a pink/purple gradient when the site uses a dark overlay, every page header will look wrong. Always extract the exact overlay `background-color` and `opacity` from the site's actual CSS.
+
 ```bash
 # Google Fonts
 curl -sL "$SITE_URL" | grep -oP 'fonts\.googleapis\.com[^"'"'"']*'
@@ -117,11 +148,11 @@ curl -sL "$SITE_URL" | grep -oP '#[0-9a-fA-F]{3,8}' | sort -u
 curl -sL "$SITE_URL" | grep -oP 'linear-gradient[^;)]+[);]'
 
 # Take screenshots to visually confirm colors and layout
-google-chrome --headless --disable-gpu --screenshot=homepage.png --window-size=1400,3000 "$SITE_URL"
-google-chrome --headless --disable-gpu --screenshot=blogpost.png --window-size=1400,3000 "$SITE_URL/<any-post-slug>/"
+google-chrome --headless --disable-gpu --no-sandbox --screenshot=homepage.png --window-size=1400,5000 "$SITE_URL"
+google-chrome --headless --disable-gpu --no-sandbox --screenshot=blogpost.png --window-size=1400,5000 "$SITE_URL/<any-post-slug>/"
 ```
 
-For theme-specific custom properties (e.g., Hestia uses `--hestia-primary-color`), search for the theme name:
+For theme-specific custom properties, search for the theme name found in Step 1:
 ```bash
 curl -sL "$SITE_URL" | grep -oP '--[a-z]+-primary[^}]*'
 ```
@@ -202,11 +233,13 @@ Compile all findings into a structured summary:
 2. **Nav menu structure** — with dropdowns and **exact href URLs** extracted from the HTML (these become the Jekyll permalinks)
 3. **Blog posts** — date, author, slug, featured image, comment count
 4. **Comments** — total count, distribution by post
-5. **Design tokens** — fonts, colors, gradients, spacing
+5. **Design tokens** — fonts, colors, gradients, spacing, overlay colors/opacities (from Elementor per-page CSS, NOT guessed)
 6. **Image inventory** — organized by category (logos, team, blog, headers, etc.)
-7. **Interactive elements** — what needs special handling or must be skipped
-8. **Forms** — which can be replaced with Google Forms links, which to skip
-9. **External dependencies** — Google Maps, third-party scripts, etc.
+7. **Full-width sections** — for each page (especially the homepage), document every full-width background section: what background image it uses, what overlay color/opacity, what shape dividers separate it from adjacent sections, and what content sits on top of it
+8. **Icon libraries** — which icon library the site loads (Font Awesome, Material Icons, etc.) and the CDN URL
+9. **Interactive elements** — what needs special handling or must be skipped
+10. **Forms** — which can be replaced with Google Forms links, which to skip
+11. **External dependencies** — Google Maps, third-party scripts, etc.
 
 ## Output
 

.claude/skills/wp-to-ghpages.md

@@ -118,7 +118,8 @@ Create partials from the audit's design tokens:
 - `_sass/_variables.scss` — colors, fonts, spacing, shadows from the audit
 - `_sass/_base.scss` — reset, typography, links, tables, code blocks
 - `_sass/_nav.scss` — sticky header, dropdown menus, mobile toggle
-- `_sass/_page-header.scss` — hero/page header with background image + gradient overlay
+- `_sass/_page-header.scss` — hero/page header with background image + overlay
+- `_sass/_homepage.scss` — homepage-specific sections (icon cards, blog preview, location, banners)
 - `_sass/_content.scss` — content cards, grids, tabs, carousels, team cards, equipment items
 - `_sass/_blog.scss` — blog listing, post preview cards, single post styles
 - `_sass/_comments.scss` — comment thread styling
@@ -136,15 +137,21 @@ Entry point `assets/css/style.scss` (must have empty front matter for Jekyll to
 
 **Key design decisions:**
 - Use the exact colors, fonts, and gradients from the audit's design tokens
-- Keep the WordPress site's visual structure (sticky nav, page header with gradient overlay, content cards with shadow)
+- Keep the WordPress site's visual structure (sticky nav, page header, content cards with shadow)
 - Page backgrounds should match the original (usually light gray, not white)
 - Content areas should be white cards with subtle shadows, floating above the background
 
+**CRITICAL: Extract overlay/background values from the site's actual CSS — never guess.**
+Many WordPress themes use dark overlays (`rgba(0,0,0,0.3)`) over hero/banner images, not colored gradients. If you invent a pink/purple gradient when the site actually uses a subtle dark overlay, every page header will look wrong. Fetch the site's per-page CSS files (look for `<link>` tags with CSS URLs containing `post-` or `page-` IDs) and extract the exact `background-color`, `opacity`, and `background-image` values for each section.
+
+**CRITICAL: Include any icon libraries the original site uses.**
+WordPress sites commonly use Font Awesome, Material Icons, or similar icon libraries. Check the original page source for icon `<link>` tags (e.g., Font Awesome CDN) and include the same library in your `default.html` `<head>`. Don't substitute emoji Unicode characters for proper icons — they look completely different.
+
 ### Step 5: Create layouts
 
 Four layouts cover most WordPress sites:
 
-**`_layouts/default.html`** — HTML shell with head, nav, main, footer, scripts.
+**`_layouts/default.html`** — HTML shell with head, nav, main, footer, scripts. Include any icon libraries (Font Awesome, etc.) and Google Fonts the original site uses in the `<head>`.
 
 **`_layouts/home.html`** — extends default, includes page-header, renders content directly (no card wrapper — homepage has custom sections).
 
@@ -375,8 +382,12 @@ No GitHub Actions configuration needed. GitHub Pages detects the Jekyll project
 1. **`collections_dir` breaks post discovery** — Do NOT set `collections_dir: .` (or any value) in `_config.yml`. With the github-pages gem, this silently prevents Jekyll from finding `_posts/`. You'll get zero posts with no error message — blog sections render empty, homepage blog previews show nothing. Just omit the key entirely.
 2. **`{{ content }}` in page-header include causes duplication** — If `_includes/page-header.html` contains `{{ content }}`, every page's body renders twice: once inside the header overlay (mangled, overlapping the hero image) and once in the normal position. The include should only render title and subtitle — never `{{ content }}`.
 3. **Permalink mismatches break navigation** — Extract every URL from the original site's nav links. Set each Jekyll page's `permalink:` to match exactly. Don't guess — fetch the page and read the hrefs. If the WP blog is at `/posts/`, use `permalink: /posts/`, not `/blog/`.
-4. **GitHub Pages gem version conflicts** — `github-pages` pins specific gem versions. Don't add gems that conflict.
-5. **Sass deprecation warnings** — GitHub Pages uses an older Sass version. Avoid newer Sass features (`@use`, `@forward`). Stick with `@import`.
-6. **Large files** — GitHub has a 100MB file limit. Compress images before committing.
-7. **Missing images** — After porting, grep for any remaining `wp-content/uploads` references and replace them.
-8. **Comment slugs** — The comment YAML filename must match the post's `page.slug` (derived from the filename by default). If you set a custom `slug` in front matter, use `comment_slug` to override.
+4. **Wrong overlay colors on page headers** — Don't guess overlay colors. Most WordPress sites use a dark semi-transparent overlay on hero/banner images, not a colored gradient. Extract the exact overlay `background-color` and `opacity` values from the site's per-page CSS files. A pink gradient on a site that uses a dark overlay makes every page look completely wrong.
+5. **Missing full-width background sections** — WordPress pages often have full-width sections with background images, overlays, and shape dividers between them. If you don't fetch the per-page CSS to discover these background images, you'll miss entire sections. Check the CSS for every `background-image: url(...)` on each page you're porting.
+6. **Wrong images on blog posts** — If the site uses featured images or inline images in posts, verify each post's images individually against the original. Don't reuse the same image across posts or guess which image belongs to which post.
+7. **Missing icon libraries** — WordPress sites commonly use Font Awesome or similar icon libraries. If you substitute emoji characters for proper icons, the visual match will be way off. Check the original `<head>` for icon library `<link>` tags and include them.
+8. **GitHub Pages gem version conflicts** — `github-pages` pins specific gem versions. Don't add gems that conflict.
+9. **Sass deprecation warnings** — GitHub Pages uses an older Sass version. Avoid newer Sass features (`@use`, `@forward`). Stick with `@import`.
+10. **Large files** — GitHub has a 100MB file limit. Compress images before committing.
+11. **Missing images** — After porting, grep for any remaining `wp-content/uploads` references and replace them.
+12. **Comment slugs** — The comment YAML filename must match the post's `page.slug` (derived from the filename by default). If you set a custom `slug` in front matter, use `comment_slug` to override.

_includes/page-header.html

@@ -6,4 +6,11 @@ <h1>{{ page.header_title | default: page.title }}</h1>
     <p class="page-subtitle">{{ page.subtitle }}</p>
     {% endif %}
   </div>
+  {% if page.layout == 'home' %}
+  <div class="hero-curve">
+    <svg viewBox="0 0 1000 100" preserveAspectRatio="none">
+      <path d="M0,0 C400,100 600,100 1000,0 L1000,100 L0,100 Z"></path>
+    </svg>
+  </div>
+  {% endif %}
 </div>

_layouts/default.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
   <meta name="description" content="{{ page.description | default: site.description | strip_html | truncate: 160 }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
   <link rel="icon" href="{{ '/assets/images/logos/gencore-logo-new.png' | relative_url }}" type="image/png">
 </head>

_posts/2024-06-12-nextflow-nf-core-on-nyu-hpc.md

@@ -3,7 +3,7 @@ layout: post
 title: "Nextflow & nf-core on NYU HPC"
 date: 2024-06-12
 author: "Eric Borenstein"
-featured_image: /assets/images/blog/nf-core-rnaseq-featured-image-2.png
+featured_image: /assets/images/blog/m0b37vel.png
 header_image: /assets/images/header-blog.jpg
 comments: true
 ---

_sass/_content.scss

@@ -14,7 +14,7 @@
 }
 
 .page-content {
-  padding: 0 20px 3em;
+  padding: 0 20px 2em;
 }
 
 // Team cards
@@ -70,43 +70,6 @@
   }
 }
 
-// Icon button grid (homepage)
-.icon-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 2em;
-  flex-wrap: wrap;
-  margin: 2em 0;
-}
-
-.icon-btn {
-  text-align: center;
-  width: 100px;
-
-  .icon-circle {
-    width: 64px;
-    height: 64px;
-    border: 2px solid $text-light;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 0.5em;
-    color: $text-light;
-    font-size: 1.5rem;
-    transition: background 0.2s;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  span {
-    color: $text-light;
-    font-size: 0.85rem;
-    font-weight: 500;
-  }
-}
 
 // Resource card grid (bioinformatics)
 .resource-grid {
@@ -211,64 +174,6 @@
   }
 }
 
-// Location section (homepage)
-.location-section {
-  text-align: center;
-  padding: 2em 0;
-
-  h2 {
-    font-size: 2rem;
-  }
-}
-
-.location-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2em;
-  margin: 1.5em 0;
-
-  @media (max-width: 700px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.location-card {
-  h3 {
-    color: $purple;
-  }
-
-  p {
-    font-size: 0.9rem;
-    color: $text-muted;
-  }
-
-  iframe {
-    width: 100%;
-    height: 250px;
-    border: 0;
-    border-radius: $border-radius;
-  }
-}
-
-// Partner logos
-.partner-logos {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2em;
-  flex-wrap: wrap;
-  margin: 2em 0;
-
-  img {
-    height: 60px;
-    opacity: 0.8;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
 
 // Carousel (sequencing platforms)
 .carousel {