Skip to content

New design for Homepage and Search results #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vasilyyaremchuk merged 2 commits into from
Jul 28, 2026
Merged

New design for Homepage and Search results #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
952527b
Implement search results header with custom menu and navigation
speedandfunction-alexost Jul 28, 2026
94b11b1
rabbit fixes
speedandfunction-alexost Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions website/modules/@apostrophecms/search/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
options: {
perPage: 99,
},
};
Comment thread
coderabbitai[bot] marked this conversation as resolved.
155 changes: 101 additions & 54 deletions website/modules/@apostrophecms/search/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,115 @@
{% extends 'layout.html' %}

{% block title %}
{{ data.page.title }}
{% endblock %}
{% import '@apostrophecms/pager:macros.html' as pager with context %}
{% import 'fragments/utilities.html' as utilities %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ data.page.title }}</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/css/search-results/search-results.css">
<script src="/js/search-results-menu.js"></script>
</head>
<body>
<section class="sr">
<div class="sr-topgrad-field"></div>
<div class="sr-noise"></div>
<div class="sr-wrap">

{% block extraHead %}
{{ super() }}
{% endblock %}
<div class="sr-top">
<a href="/" class="sr-mark">SPEED &amp; FUNCTION</a>
<button
class="sr-menu"
id="nav-icon"
aria-label="Toggle menu"
aria-expanded="false"
aria-controls="main-navigation"
>
<span class="sr-menu__grid"></span>
<span class="sr-menu__grid"></span>
<span class="sr-menu__grid"></span>
<span class="sr-menu__grid"></span>
</button>
<nav
id="main-navigation"
class="sf-nav"
data-menu
aria-label="Main navigation"
>
<ol class="sf-nav__list">
{% for item in data.global.primaryNav %}
<li>{% render utilities.navLink(item.menuItem) %}</li>
{% endfor %}
</ol>
</nav>
</div>

{% block main %}
<div class="sf-search-page">
<h1 class="sf-search-page__heading">{{ __('Search Results') }}</h1>
<div class="sr-hero">
<h1>Search Results</h1>

{% if data.query.q %}
<p class="sf-search-page__term">
{{ __('Showing Results for ') }}'<span>{{ data.query.q }}</span>'
</p>
{% endif %}
{% if data.query.q %}
<div class="sr-status">
<span class="sr-pulse"></span>
<span class="sr-status-text">Showing </span>
<span class="sr-status-count">{{ data.total or data.docs|length }}</span>
<span class="sr-status-text"> Results for </span>
<span class="sr-status-query">"{{ data.query.q }}"</span>
</div>
{% endif %}
</div>

{% if data.docs|length > 0 %}
<div class="sf-search-page__results">
{% for doc in data.docs %}
{% if doc.type == 'case-studies' %}
{% set meta = __('Case Study') %}
{% set resultUrl = doc._url %}
{% elif doc.type == 'team-members' %}
{% set meta = __('Team Member') %}
{% set resultUrl = '/meet-the-team' %}
{% elif doc.type == 'testimonials' %}
{% set meta = __('Testimonial') %}
{% set resultUrl = '/cases' %}
{% elif doc.type == 'vacancies' %}
{% set meta = __('Job Opening') %}
{% set resultUrl = '/careers' %}
{% elif doc.type == 'business-partner' %}
{% set meta = __('Partner') %}
{% set resultUrl = '/about-us' %}
{% else %}
{% set meta = __('Page') %}
{% set resultUrl = doc._url %}
{% endif %}
<nav class="sr-results">
{% for doc in data.docs %}
{% if doc.type == 'case-studies' %}
{% set meta = 'Case Studies' %}
{% set resultUrl = doc._url %}
{% elif doc.type == 'team-members' %}
{% set meta = 'Team Member' %}
{% set resultUrl = '/meet-the-team' %}
{% elif doc.type == 'testimonials' %}
{% set meta = 'Testimonial' %}
{% set resultUrl = '/cases' %}
{% elif doc.type == 'vacancies' %}
{% set meta = 'Careers' %}
{% set resultUrl = '/careers' %}
{% elif doc.type == 'business-partner' %}
{% set meta = 'Partner' %}
{% set resultUrl = '/about-us' %}
{% else %}
{% set meta = 'Page' %}
{% set resultUrl = doc._url %}
{% endif %}

<div class="sf-search-page__result">
<p class="sf-search-page__meta">{{ meta }}</p>
<a class="sf-search-page__link" href="{{ resultUrl }}">
<span>{{ doc.title }}</span>
<span class="sf-search-page__arrow" aria-hidden="true">→</span>
</a>
<a class="sr-row" href="{{ resultUrl }}">
<div class="sr-row-content">
<span class="sr-category">{{ meta }}</span>
<span class="sr-title">{{ doc.title }}</span>
</div>
{% endfor %}
</div>
<span class="sr-arrow">→</span>
</a>
{% endfor %}
</nav>
{% else %}
<p class="sf-search-page__empty">
{{ __('Sorry, there are no results that match your search.') }}
</p>
<p class="sr-empty">
Sorry, there are no results that match your search.
</p>
{% endif %}

{% if data.totalPages > 1 %}
<div>
{{
pager.render({ page: data.currentPage, total: data.totalPages, class: 'c-pagination', shown: 2 }, data.url)
}}
</div>
<div class="sr-pagination">
{{
pager.render({ page: data.currentPage, total: data.totalPages, shown: 2 }, data.url)
}}
</div>
{% endif %}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

<div class="sr-foot">
<div class="sr-foot-l"><a href="mailto:letschat@speedandfunction.com">letschat@speedandfunction.com</a><a href="https://www.linkedin.com/company/speed-and-function/posts/">LinkedIn</a></div>
<div class="sr-foot-r"><a href="https://www.speedandfunction.com/privacy-policy">Privacy Policy</a><a href="/">© 2026 S&amp;F</a></div>
</div>
</div>
{% endblock %}
</section>
</body>
</html>
6 changes: 3 additions & 3 deletions website/modules/home-simplified/views/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@

<div class="ca-hero">
<div class="eyebrow"><span class="pulse"></span>The New Site Is On Its Way</div>
<h1>Speed &amp; Function is an engineering and AI consultancy. For over a decade we've partnered with purpose-driven companies to <span class="grad">design, build, and scale software products</span> that carry their mission further.</h1>
<h1>Software that<br class="h1-break"> carries <span class="grad">your</span><br class="h1-break"> <span class="grad">mission further.</span></h1>

<div class="ca-cue">
<span class="cue-txt">Here's what matters most while<br>the new site takes shape.</span>
<span class="cue-txt">For over a decade S&amp;F has partnered with purpose-driven companies to design, build, and scale products that matter.</span>
</div>

<form class="ca-search" id="search-form" method="GET" action="/search" data-search-form data-apos-form-form>
Expand All @@ -43,7 +43,7 @@ <h1>Speed &amp; Function is an engineering and AI consultancy. For over a decade

<div class="ca-foot">
<div class="l"><a href="mailto:letschat@speedandfunction.com">letschat@speedandfunction.com</a><a href="https://www.linkedin.com/company/speed-and-function/posts/">LinkedIn</a></div>
<div class="r"><a href="#">Privacy Policy</a><a href="#">© 2026 S&amp;F</a></div>
<div class="r"><a href="https://www.speedandfunction.com/privacy-policy">Privacy Policy</a><a href="/">© 2026 S&amp;F</a></div>
</div>
</div>
</section>
Expand Down
60 changes: 42 additions & 18 deletions website/public/css/home-simplified/home-simplified.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,23 +174,31 @@ body {
}

.ca-hero h1 {
font-size: 52px;
font-size: 120px;
font-weight: 700;
line-height: 1.22;
letter-spacing: -1px;
line-height: 0.9;
letter-spacing: -2.8px;
vertical-align: middle;
max-width: 1180px;
text-wrap: balance;
color: #141414;
padding-right: 6px;
animation: fade-up .8s cubic-bezier(.16,1,.3,1) .1s both;
}

.ca-hero h1 .h1-break {
display: none;
}

.ca-hero h1 .grad {
font-weight: 800;
background: linear-gradient(95deg, #0173D7 0%, #00A896 45%, #00897B 80%, #F57600 100%);
background: linear-gradient(90deg, #0173D7 0%, #009BA6 42%, #10FFE5 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding-right: 0.05em;
Comment on lines 193 to +200

@coderabbitai coderabbitai Bot Jul 28, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Use contrast-safe colors for the new text and search controls.

The #10FFE5 gradient endpoint is approximately 1.3:1 against white, making the end of the H1 difficult to read. The #9DA0A6 placeholder and #9a9a9a search affordance are also very low contrast. Use darker tokens that pass against the actual page background.

Suggested direction 
-  background: linear-gradient(90deg, `#0173D7` 0%, `#009BA6` 42%, `#10FFE5` 100%);
+  background: linear-gradient(90deg, `#0173D7` 0%, `#009BA6` 42%, `#007F86` 100%);

-  color: `#9DA0A6`;
+  color: `#6B6B6B`;

-    color: `#9a9a9a`;
+    color: `#6B6B6B`;

Also applies to: 255-256, 480-482

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@website/public/css/home-simplified/home-simplified.css` around lines 193 -
200, Update the contrast-sensitive colors in the .ca-hero h1 .grad gradient and
the placeholder/search-affordance styles at the referenced locations, replacing
the light endpoint and gray tokens with darker colors that meet contrast
requirements against the actual page background. Preserve the existing gradient
and control styling otherwise.

margin-right: -0.05em;
}

.ca-cue {
Expand All @@ -202,19 +210,21 @@ body {
}

.ca-cue .cue-txt {
font-size: 18px;
font-weight: 600;
font-size: 30px;
font-weight: 500;
letter-spacing: 0.01em;
color: #6B6B6B;
line-height: 1.4;
line-height: 1.2;
max-width: 1000px;
display: block;
}

.ca-cue .cue-txt br {
display: none;
}

.ca-search {
margin-top: 44px;
margin-top: 80px;
display: flex;
align-items: center;
gap: 20px;
Expand All @@ -236,14 +246,14 @@ svg.sicon {
background: transparent;
outline: none;
font-family: inherit;
font-size: 21px;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.2px;
color: #141414;
}

.ca-search input::placeholder {
color: #9A9A9A;
color: #9DA0A6;
}

.ca-search .sgo {
Expand Down Expand Up @@ -419,9 +429,15 @@ svg.sicon {
}

.ca-hero h1 {
font-size: 26px;
line-height: 1.24;
letter-spacing: -0.4px;
font-size: 40px;
line-height: 0.9;
letter-spacing: -2.8px;
max-width: none;
padding-right: 4px;
}

.ca-hero h1 .h1-break {
display: block;
}

.ca-cue {
Expand All @@ -430,15 +446,18 @@ svg.sicon {
}

.ca-cue .cue-txt {
font-size: 13px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
max-width: 360px;
}

.ca-cue .cue-txt br {
display: inline;
}

.ca-search {
margin-top: 28px;
margin-top: 44px;
gap: 12px;
min-height: 44px;
padding-bottom: 14px;
Expand All @@ -450,12 +469,17 @@ svg.sicon {
min-width: 0;
}

.ca-search input::placeholder {
color: #6b6b6b;
}

.ca-search:focus-within {
border-bottom-color: #00897B;
}

.ca-search .sgo {
font-size: 16px;
color: #9a9a9a;
}

.ca-index {
Expand Down Expand Up @@ -492,15 +516,15 @@ svg.sicon {
}

.ca-row .rn {
font-size: 10px;
font-size: 7px;
letter-spacing: 0.06em;
flex: 0 0 auto;
}

.ca-row .rt {
font-size: 16px;
font-size: 14px;
letter-spacing: -0.2px;
line-height: 1.3;
line-height: 1.2;
}

.ca-row .ra {
Expand Down
Loading
Loading