InlineBrand

src/components/branding/InlineBrand.astro

@@ -0,0 +1,11 @@
+---
+
+---
+
+<style lang="scss">
+  strong {
+    color: var(--brand-blue);
+  }
+</style>
+
+<strong> opendatakit</strong>

src/pages/index.astro

@@ -2,6 +2,9 @@
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+
+import InlineBrand from "../components/branding/InlineBrand.astro";
+
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 
 var title = `${SITE_TITLE}`;
@@ -10,10 +13,6 @@ var title = `${SITE_TITLE}`;
 <style lang="scss">
   @use "../styles/mixins/breakpoints";
 
-  strong.brand {
-    color: #212d49;
-  }
-
   .fa-solid {
     color: #212d49;
   }
@@ -37,8 +36,9 @@ var title = `${SITE_TITLE}`;
 
         .link-tiles {
           display: grid;
+          max-width: 550px;
           margin-top: 2em;
-          grid-template-columns: repeat(4, minmax(0, 1fr));
+          grid-template-columns: repeat(2, minmax(0, 1fr));
 
           @container (max-width: 1120px) {
             grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -71,7 +71,8 @@ var title = `${SITE_TITLE}`;
             &:hover {
               color: firebrick;
               border: 1px solid firebrick;
-              .fa-solid {
+              .fa-solid,
+              strong {
                 color: firebrick;
               }
             }
@@ -176,8 +177,8 @@ var title = `${SITE_TITLE}`;
 
           <div class="intro-box">
             <p>
-              <strong class="brand">opendatakit</strong> is a software toolbox that
-              makes publishing reproducible workflows simple.
+              <InlineBrand /> is a software toolbox that makes publishing reproducible
+              workflows simple.
             </p>
             <p>
               We provide an open-source standard that captures the entire data
@@ -201,7 +202,7 @@ var title = `${SITE_TITLE}`;
             </a>
             <a href="/team">
               <h2><i class="fa-solid fa-people-group"></i> Team&nbsp;→</h2>
-              <p>Meet the <strong class="brand">opendatakit</strong> team</p>
+              <p>Meet the <InlineBrand /> team</p>
             </a>
           </div>
         </section>

src/pages/team.astro

@@ -4,6 +4,8 @@ import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 
+import InlineBrand from "../components/branding/InlineBrand.astro";
+
 var title = `${SITE_TITLE}`;
 ---
 
@@ -95,7 +97,7 @@ var title = `${SITE_TITLE}`;
               and systems chemistry.
             </p>
             <p>
-              Pall is the progenitor of the opendatakit project, starting from
+              Pall is the progenitor of the <InlineBrand /> project, starting from
               its original incarnation as <a href="http://supramolecular.org/"
                 >supramolecular.org</a
               >. Pall is passionate about facilitating tooling for open science
@@ -119,10 +121,10 @@ var title = `${SITE_TITLE}`;
             <span class="project-role">Software Architect</span>
             <p>
               Varvara is a solutions architect and implementation specialist for
-              the opendatakit project with a background in astrophysics. She is
-              responsible for architecting and implementing the backend services
-              underpinning the opendatakit ecosystem as well as frontend
-              implementation details.
+              the <InlineBrand /> project with a background in astrophysics. She
+              is responsible for architecting and implementing the backend services
+              underpinning the <InlineBrand /> ecosystem as well as frontend implementation
+              details.
             </p>
             <p>
               In her various roles she has worked extensively across the web
@@ -145,10 +147,10 @@ var title = `${SITE_TITLE}`;
           <div class="bio-copy">
             <span class="project-role">Software Architect</span>
             <p>
-              James is a solutions architect for the opendatakit project. He
-              specialises in data specification design and is a passionate
-              advocate for FAIR data management principles. He has extensive
-              experience in web application architecture and frontend design.
+              James is a solutions architect for the <InlineBrand /> project. He
+              specialises in data specification design and is a passionate advocate
+              for FAIR data management principles. He has extensive experience in
+              web application architecture and frontend design.
             </p>
             <p>
               James loves to run and has ridden a touring bicycle across both
@@ -167,11 +169,11 @@ var title = `${SITE_TITLE}`;
           <div class="bio-copy">
             <span class="project-role">Cloud Infrastructure Specialist</span>
             <p>
-              Thomas is the cloud infrastructure specialist for opendatakit. He
-              has extensive experience with AWS and Google Cloud infrastructure
-              deployments and holds certifications in both. He specialises in
-              Infrastructure as Code deployments with Terraform, ensuring
-              reproducible and resilient deployments.
+              Thomas is the cloud infrastructure specialist for <InlineBrand />.
+              He has extensive experience with AWS and Google Cloud
+              infrastructure deployments and holds certifications in both. He
+              specialises in Infrastructure as Code deployments with Terraform,
+              ensuring reproducible and resilient deployments.
             </p>
             <a href="https://www.linkedin.com/in/thomas-wilmot/">LinkedIn</a>
           </div>

src/styles/styles.scss

@@ -24,12 +24,14 @@
 
 :root {
   font-family: "Inter";
+  --brand-blue: #212d49;
 }
 
 body {
   max-width: 100vw;
   width: 100vw;
   overflow-x: hidden;
+  font-size: 14px;
 }
 
 h1 {