Merge pull request #26 from opendatafit/22-add-team-page

22 add team page
open-datakit · Jan 31, 2024 · 4aad3d0 · 4aad3d0
2 parents cdd7ed2 + 77d1ec5
commit 4aad3d0
Show file tree

Hide file tree

Showing 12 changed files with 296 additions and 285 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-
+.DS_Store
 
 # generated types
 .astro

diff --git a/...assets/images/mugshots/james-mugshot.jpeg → ...ssets/images/headshots/james_headshot.jpg b/...assets/images/mugshots/james-mugshot.jpeg → ...ssets/images/headshots/james_headshot.jpg
diff --git a/public/assets/images/headshots/palli_headshot.jpg b/public/assets/images/headshots/palli_headshot.jpg
diff --git a/public/assets/images/headshots/thomas_headshot.jpg b/public/assets/images/headshots/thomas_headshot.jpg
diff --git a/...sets/images/mugshots/varvara-mugshot.jpeg → ...ets/images/headshots/varvara_headshot.jpg b/...sets/images/mugshots/varvara-mugshot.jpeg → ...ets/images/headshots/varvara_headshot.jpg
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -56,11 +56,12 @@ import { SITE_TITLE } from "../consts";
   </div>
   <nav>
     <div class="internal-links">
+      <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="https://community.opendata.fit">Community</HeaderLink>
       <HeaderLink href="https://docs.opendata.fit">Documentation</HeaderLink>
+      <HeaderLink href="/team">Team</HeaderLink>
       <!-- <HeaderLink href="/richardstallmanisgod">Open source</HeaderLink> -->
       <!-- <HeaderLink href="/blog">Blog</HeaderLink> -->
-      <!-- <HeaderLink href="/about">About</HeaderLink> -->
     </div>
   </nav>
 </header>
diff --git a/src/pages/about.astro b/src/pages/about.astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,83 +11,14 @@ var title = `${SITE_TITLE} | ${SITE_DESCRIPTION}`;
   @use "@opendatafit/common-styles/common-styles/variables/fonts";
   @use "@opendatafit/common-styles/common-styles/mixins/boxmodel";
 
-  // @use "../styles/mixins/breakpoints";
-
-  @mixin mobile-bp {
-    @media (max-width: 700px) {
-      @content;
-    }
-  }
-
-  @mixin responsive-desktop-bp {
-    @media (min-width: 701px) and (max-width: 1300px) {
-      @content;
-    }
-  }
-
-  body {
-    max-width: 100vw;
-    width: 100vw;
-    overflow-x: hidden;
-  }
+  @use "../styles/mixins/breakpoints";
 
   .layout-container {
-    overflow-x: hidden;
-    max-width: 100%;
-    width: 100%;
-
-    display: grid;
-
-    grid-template-rows:
-      [header] auto
-      [header-gutter] 2rem
-      [content] auto
-      [footer] auto [end-row];
-
-    grid-template-columns:
-      [gutter-left] 1fr
-      [content-col] 120ch
-      [gutter-right] 1fr [end-col];
-
-    @include responsive-desktop-bp {
-      grid-template-columns:
-        [gutter-left] 4ch
-        [content-col] 1fr
-        [gutter-right] 5ch[end-col];
-    }
-
-    @include mobile-bp {
-      grid-template-columns:
-        [gutter-left] 2ch
-        [content-col] 1fr
-        [gutter-right] 3ch [end-col];
-    }
-
-    // TODO reconsider row gutter implementation
-    // or just research how to do this in non shit manner
-    grid-template-areas:
-      "left-gutter head right-gutter"
-      "left-gutter header-gutter right-gutter"
-      "left-gutter main right-gutter"
-      "left-gutter foot right-gutter";
-
-    .site-header-background {
-      grid-area: header / gutter-left / header / end-col;
-      border-bottom: 1px solid #ddd;
-    }
-
-    .site-header {
-      grid-area: head;
-    }
-
     main {
-      grid-area: main;
-
       display: flex;
       flex-direction: column;
       gap: 2rem;
 
-      padding-bottom: 10vh;
 
       section.introduction {
         min-height: 75vh;
@@ -173,14 +104,14 @@ var title = `${SITE_TITLE} | ${SITE_DESCRIPTION}`;
           }
         }
 
-        @include responsive-desktop-bp {
+        @include breakpoints.responsive-desktop-bp {
           display: block;
           .screenshot-container img {
             width: 100%;
             height: auto;
           }
         }
-        @include mobile-bp {
+        @include breakpoints.mobile-bp {
           display: block;
           .screenshot-container img {
             width: 100%;
@@ -238,22 +169,6 @@ var title = `${SITE_TITLE} | ${SITE_DESCRIPTION}`;
       }
     }
 
-    .site-footer-background {
-      grid-area: footer / gutter-left / footer / end-col;
-      background-color: #f6f6f6;
-      border-top: 1px solid #ddd;
-    }
-
-    .site-footer {
-      grid-area: foot;
-
-      .attribution {
-        @include fonts.monospace;
-
-        font-family: var(--monospace);
-        font-family: "Inconsolata" !important;
-      }
-    }
 
     .opendatafit-branding {
       display: flex;
@@ -335,26 +250,18 @@ var title = `${SITE_TITLE} | ${SITE_DESCRIPTION}`;
           </div>
 
           <div class="link-tiles">
-            <!--
-            <a href="https://opendata.fit">
-              <h2>About&nbsp;→</h2>
-              <p>What is opendata.fit?</p>
+            <a href="https://community.opendata.fit">
+              <h2>Community&nbsp;→</h2>
+              <p>A support forum for opendata.fit users</p>
             </a>
-            -->
             <a href="https://docs.opendata.fit">
               <h2>Documentation&nbsp;→</h2>
               <p>Learn how to use opendata.fit</p>
             </a>
-            <a href="https://community.opendata.fit">
-              <h2>Community&nbsp;→</h2>
-              <p>A support forum for opendata.fit users</p>
-            </a>
-            <!--
-            <a href="https://opendata.fit">
-              <h2>Blog&nbsp;→</h2>
-              <p>Read the opendata.fit blog</p>
+            <a href="/team">
+              <h2>Team&nbsp;→</h2>
+              <p>Meet the opendata.fit team</p>
             </a>
-            -->
           </div>
         </section>