Skip to content
112 changes: 106 additions & 6 deletions website/modules/asset/ui/src/scss/_footer.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,112 @@
.sf-footer {
background-color: $white;
margin-top: auto;

.sf-footer__content {
max-width: 1200px;
margin: 0 auto;
padding-bottom: 16px;

@include breakpoint-medium {
padding-bottom: 24px;
}
}

.sf-footer__top {
text-align: center;
margin-bottom: 32px;
display: block;
@include breakpoint-medium {
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}

.sf-footer__tagline {
font-size: $font-size-footer-mobile;
font-weight: $font-weight-300;
color: $gray-300;
margin: 0;
line-height: 120%;
display: block;

&:first-child {
display: block;
}

&:not(:first-child) {
display: block;
@include breakpoint-medium {
display: inline-block;
}
}
}

.sf-footer__links {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: $font-size-footer-mobile;
font-weight: $font-weight-300;
line-height: 120%;

@include breakpoint-medium {
flex-direction: row;
justify-content: space-between;
gap: 32px;
text-align: left;
}
}

.sf-footer__links-group {
display: flex;
flex-direction: column;
gap: 12px;

@include breakpoint-medium {
flex-direction: row;
align-items: center;
gap: 32px;
}
}

.sf-footer__links-item {
font-size: $font-size-footer-mobile;
font-weight: $font-weight-normal;
color: $gray-500;
text-decoration: none;
transition: color 0.2s ease;

&:hover,
&:focus {
color: $gray-400;
text-decoration: underline;
}
}

.sf-footer__links-item--policy {
margin-top: 44px;
@include breakpoint-medium {
margin-top: 0;
}
}

.sf-footer__bottom {
text-align: center;
padding-top: 32px;
}

.sf-copy {
margin: 0;
}
}

.sf-copy {
text-align: center;
font-weight: $font-weight-medium;
font-size: $font-size-body-small;
font-size: $font-size-body-medium-mobile;
line-height: 140%;
margin-top: 0;
margin-bottom: 10px;
color: $gray-300;
@include breakpoint-medium {
margin-bottom: 34px;
}
}
Comment thread
Anton-88 marked this conversation as resolved.
4 changes: 4 additions & 0 deletions website/modules/asset/ui/src/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ $font-size-body-large-mobile: 22px;
$font-size-body-medium-mobile: 14px;
$font-size-body-small-mobile: 12px;

// Footer text sizes
$font-size-footer: 11px;
$font-size-footer-mobile: 11px;

Comment thread
Anton-88 marked this conversation as resolved.
// Line heights
$line-height-h1: 140%;
$line-height-h2: 100%;
Expand Down
32 changes: 30 additions & 2 deletions website/views/fragments/fragments.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,36 @@
</div>
</header>
{% endfragment %} {% fragment footer() %}
<footer class="sf-container">
<p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&F</p>
<footer class="sf-footer sf-container">
<div class="sf-footer__content">
<div class="sf-footer__top">
<p class="sf-footer__tagline">A Deliberately Developmental Organization.</p>
<p class="sf-footer__tagline">Built by real people, for real impact.</p>
<p class="sf-footer__tagline">Let's grow something meaningful together.</p>
</div>

<div class="sf-footer__links">
<div class="sf-footer__links-group">
<a href="https://www.linkedin.com/company/speed-and-function/"
class="sf-footer__links-item"
target="_blank"
rel="noopener noreferrer">
linkedin
</a>
<a href="mailto:connect@speedandfunction.com"
class="sf-footer__links-item">
connect@speedandfunction.com
</a>
</div>
<a href="/privacy-policy" class="sf-footer__links-item sf-footer__links-item--policy">
privacy policy
</a>
</div>

<div class="sf-footer__bottom">
<p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&amp;F</p>
</div>
</div>
</footer>
{% endfragment %} {% fragment breadcrumbs() %} {% if data.page._url !=
data.home._url %}
Expand Down
Loading