preamble.html

<style>

#pixel-lambda {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

  
#navbar {
  display: none;
}

#navbar.is-open {
  display: block;
}


#navbar a {
    padding: 4px;
    text-decoration: none; 
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}


.hoverable:hover {
    color: #F689FF;
    background-color: black !important;
    font-weight: bold !important;
}

.hoverable:hover a {
    color: #F689FF;
}




#navbar li {
    list-style-type: none;
}

#navbar ul {
    padding-inline-start: 0;
}


.tooltip-text {
    display: none;
    background-color: black;
    color: white;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
}

button:hover .tooltip-text {
    display: block;
}

a:hover .tooltip-text {
    display: block;
}

.spinner div {
  width: 20px;
  height: 20px;
  background: var(--text);
  animation: spinner 2.5s linear infinite;
}

.spinner div:nth-child(1) {
    animation-delay: 1s;
}
.spinner div:nth-child(2) {
    animation-delay: 0s;
}
.spinner div:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes spinner {
  0%, 100% { opacity: 1.0; }
  50% { opacity: 0.0; }
}


@media only screen and (max-width: 800px) {

button:hover .tooltip-text {
    display: none;
}

a:hover .tooltip-text {
    display: none;
}

}

</style>


<div style="position: absolute; top: 2.5%; left: 2.5%" id="topbar-button"></div>
<div style="height: 25px"></div>

<div style="display: none" id="topbar">

<h4>
  
  <div style="display: flex; justify-content: center; align-items: center">
    
 <canvas id="pixel-lambda" width="16" height="16">ftlm</canvas>
       
  <button onclick="location.href='/'"
          style="background-color:black;;text-decoration:none;padding:0.5rem;font-size:1.5em;">
      <span style="color:#feb48f">:faster-than-light</span>
      <span style="color:#F689FF">/memes</span>
      <span class="tooltip-text">Joyful ideas are better ideas</span>
      
  </button>
  </div>
</h4>
    
    
<div style="display: flex; justify-content: center; align-items: center;">
  <button style="padding-top 12px; padding-bottom 12px;" id="navbar-toggle"><span>search</span>
  <span class="tooltip-text">This is your fathers rock. I mean this is the searchbar.</span>
  </button>
    <span style="margin-left: 1rem;">
<button id="rand-page-button">
    Explore!
    <span class="tooltip-text">Get a random piece of Bennis mind!</span>
</button>

<button onclick="location.href='lisp.html'">Lisp
    <span class="tooltip-text">What does it mean for a language to be beautiful?</span>
</button>

  <button onclick="location.href='documentaries.html'">Documentaries etc.
    <span class="tooltip-text">History of cybernetics and related fields</span>
  </button>
  
<button onclick="location.href='biological-notes-on-the-vehicles-cell-assemblies.html'">Neuronal Memetics
    <span class="tooltip-text">Computers including brains</span>
</button>

<button onclick="location.href='faq.html'">FAQ
    <span class="tooltip-text">Answers and reasons for everything.</span>
</button>

  <button onclick="location.href='dreams.html'">Dreams
    <span class="tooltip-text">Infinitely more angles</span>
</button>

  <button onclick="location.href='reading.html'">Books
    <span class="tooltip-text">A book is to a mind like a whetstone is to a sword</span>
  </button>
  

  
<button onclick="location.href='ftlm-navbar.html'">Posts
  <span class="tooltip-text">A list of all posts.</span>
</button>

<button onclick="location.href='screencasts.html'">Screencasts
    <span class="tooltip-text">How to dance with a computer.</span>
</button>

<button onclick="location.href='/hire-benjamin.html'">Hire Benjamin
  <span class="tooltip-text">The code I write today is better than 2 weeks ago.</span>
</button>

    </span>
</div>
</div>


<div id="navbar" style="width: 100%"></div>
<div id="navbar2" style="width: 100%"></div>
</div>
</div>