add favicon

FartLabs · Apr 22, 2024 · 4ae0288 · 4ae0288
1 parent 4ffd54b
commit 4ae0288
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 15 deletions.
diff --git a/fl-logo.png b/fl-logo.png
diff --git a/index.css b/index.css
@@ -7,11 +7,17 @@
   --darker-dark-green: #002d17;
 
   --secondary: #db7093;
+  --off-white: #ddd;
+  --dark-off-white: #aaa;
+}
+
+::selection {
+  background-color: #db709396;
 }
 
 body {
   background-color: var(--dark-green);
-  color: #ddd;
+  color: var(--off-white);
   font-family: sans-serif;
 }
 
@@ -26,19 +32,48 @@ h3,
 h4,
 h5,
 h6 {
-  text-align: center;
   font-family: "Overpass", sans-serif;
 }
 
+.page-section {
+  margin: 1em auto;
+  max-width: 64ch;
+
+  @media (max-width: 800px) {
+    padding: 0 1em;
+  }
+}
+
+.page-nav-header {
+  font-family: "Overpass", sans-serif;
+  font-size: 1.5em;
+  font-weight: 700;
+}
+
+.page-link,
+.page-link-visible-on-hover {
+  color: var(--off-white);
+}
+
+.page-link:visited,
+.page-link-visible-on-hover:visited {
+  color: var(--dark-off-white);
+}
+
+.page-link-visible-on-hover {
+  text-decoration: none;
+}
+
+.page-link-visible-on-hover:hover {
+  color: var(--secondary);
+  text-decoration: underline;
+}
+
 p,
 pre {
   width: min(80ch, 80%);
 }
 
-p {
-  margin: 2em auto 2em auto;
-}
-
 pre {
   margin: 4em auto;
   border: 10px solid transparent;
@@ -162,7 +197,11 @@ pre code {
 }
 
 footer {
-  text-align: center;
   margin-top: 4em;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
+
+footer p {
+  text-align: center;
+  width: 100%;
+}
diff --git a/index.html b/index.html
@@ -3,18 +3,25 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FartLabs</title>
+    <title>FartLabs, where imagination becomes software</title>
+    <link rel="icon" href="fl-logo.png" />
     <link rel="stylesheet" href="tube-green.css" />
     <link rel="stylesheet" href="tube-empty.css" />
     <link rel="stylesheet" href="keyframes.css" />
     <link rel="stylesheet" href="index.css" />
     <script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
   </head>
   <body>
-    <h1>FartLabs</h1>
+    <section class="page-section">
+      <nav>
+        <a class="page-nav-header page-link-visible-on-hover" href="">FartLabs</a>
+      </nav>
+    </section>
 
-    <section class="hero">
-      <h2>Where your imagination becomes software.</h2>
+    <section class="hero page-section">
+      <h2 id="imagination">
+        <a class="page-link-visible-on-hover" href="#imagination">Where your imagination becomes software.</a>
+      </h2>
 
       <pre class="border-tube-green glow"><code>import { Lab } from "./labs.ts";
 
@@ -55,7 +62,11 @@ <h2>Where your imagination becomes software.</h2>
 console.log(notes);</code></pre>        
     </section>
 
-    <h2>Rise to the occasion.</h2>
+    <section class="page-section">
+      <h2 id="rise">
+        <a class="page-link-visible-on-hover" href="#rise">Rise to the occasion.</a>
+      </h2>
+    </section>
 
     <section class="cubes">
       <div class="cube">
@@ -83,14 +94,19 @@ <h2>Rise to the occasion.</h2>
       </div>
     </section>
 
-    <section class="qna">
-      <h2>Q&A</h2>
+    <section class="qna page-section">
+      <h2 id="faq">
+        <a class="page-link-visible-on-hover" href="#faq">FAQs</a>
+      </h2>
 
-      <h3>What is FartLabs?</h3>
+      <h3 id="what-is-fartlabs">
+        <a class="page-link-visible-on-hover" href="#what-is-fartlabs">What is FartLabs?</a>
+      </h3>
       <p>
         FartLabs develops software out the wazoo! We specialize in
         <strong class="sparkle">imagination-driven</strong> development.
       </p>
+      </section>
 
     <footer>
       <p>© <a href="https://github.com/FartLabs">FartLabs</a></p>