stuff

src/components/FemtoHeader.svelte

@@ -0,0 +1,49 @@
+<div>
+  <svg
+    width="96"
+    height="75"
+    viewBox="0 0 32 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 0H14.6453V4.5H5.05011V10.0714H14.2846V14.3571H5.05011V25H0V0Z"
+      fill="#FFFFFF"
+    />
+    <path
+      d="M20.7094 15.6786L17.2104 13.1786L21.3587 8.75L15.4068 7.5L16.7054 3.5L22.2605 6.03572L21.5751 0H25.8317L25.1463 6.03572L30.7014 3.5L32 7.5L26.0481 8.75L30.1964 13.1786L26.6974 15.6786L23.7034 10.4286L20.7094 15.6786Z"
+      fill="#FFFFFF"
+    />
+  </svg>
+
+  <h1>FemtoStar</h1>
+  <h2>Satellite communications, done differently.</h2>
+</div>
+
+<style>
+  div {
+    padding-top: 3em;
+    padding-bottom: 3em;
+    display: flex;
+    width: 100%;
+    background-color: #00111d;
+    color: #ffffff;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  svg {
+    padding-top: 1em;
+  }
+
+  h1 {
+    margin-top: 0.5em;
+    font-weight: bold;
+  }
+
+  h2 {
+    margin-top: -0.25em;
+  }
+</style>

src/components/Globe.svelte

@@ -0,0 +1,19 @@
+<div class="globeContainer">
+  <img alt="placeholder for globe" src="https://via.placeholder.com/225" />
+</div>
+
+<style>
+  .globeContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background-color: #00111d;
+    color: #ffffff;
+  }
+
+  img {
+    padding-right: 3em;
+  }
+</style>

src/components/IntroText.svelte

@@ -0,0 +1,24 @@
+<div class="introText">
+  <p>
+    The FemtoStar Project is a global community developing a satellite
+    constellation for secure, open, and private communications - anywhere on
+    planet Earth.
+  </p>
+</div>
+
+<style>
+  .introText {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: #00111d;
+    color: #ffffff;
+  }
+
+  p {
+    padding-left: 2em;
+    max-width: 225px;
+  }
+</style>

src/components/Nav.svelte

@@ -0,0 +1,71 @@
+<script>
+  export let segment;
+</script>
+
+<nav>
+  <ul>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === undefined ? "page" : undefined}
+        href=".">home</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "about-contact" ? "page" : undefined}
+        href="./about-contact">about & contact</a
+      >
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    font-weight: 300;
+    background-color: #00111d;
+    color: white;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li {
+    display: block;
+  }
+
+  [aria-current] {
+    position: relative;
+    display: inline-block;
+    font-weight: bold;
+  }
+
+  [aria-current]::after {
+    position: absolute;
+    content: "";
+    width: calc(100% - 1em);
+    height: 3px;
+    background-color: white;
+    display: block;
+    bottom: -1px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+    display: block;
+    line-height: 1em;
+  }
+</style>

src/components/TalkingPointContainer.svelte

@@ -0,0 +1,12 @@
+<div class="talkingPointContainer">
+  <slot />
+</div>
+
+<style>
+  .talkingPointContainer {
+    background-color: aquamarine;
+    display: grid;
+    grid-template-columns: 30% auto;
+    grid-template-rows: 1;
+  }
+</style>

src/components/TalkingPointContent.svelte

@@ -0,0 +1,28 @@
+<div class="talkingPointContentContainer">
+  <div class="talkingPointContent">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .talkingPointContentContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background-color: #00111d;
+    color: #ffffff;
+  }
+
+  .talkingPointContentContainer .talkingPointContent {
+    padding-top: 1em;
+    padding-left: 2em;
+    font-size: 1em;
+    max-width: 850px;
+  }
+
+  :global(.talkingPointContent li:not(:last-child)) {
+    margin-bottom: 1em;
+  }
+</style>

src/components/TalkingPointName.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let text = "replace this";
+</script>
+
+<div class="talkingPointNameContainer">
+  <h2 class="talkingPointName">{text}</h2>
+</div>
+
+<style>
+  .talkingPointNameContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    background-color: #00111d;
+    color: #ffffff;
+  }
+
+  .talkingPointNameContainer .talkingPointName {
+    padding-top: 1.25em;
+    padding-right: 2em;
+    max-width: 250px;
+    text-align: right;
+  }
+</style>