titlebar

pulse.html

@@ -37,7 +37,7 @@
       float: left;
       margin-right: 2rem;
       margin-left: 0.65rem;
-      margin-top: -0.45rem;
+      margin-top: -0.1rem;
     }
   
     nav {
@@ -70,12 +70,14 @@
       height: 146px;
       user-select: none;
     }
+
     header {
       top: 0;
       left:0;
       height: 170px;
       z-index:10;
       background: rgba(21, 21, 23, 0.9);
+      padding-top: 20px;
       width: 100%;
       transition: background-color .4s, color .4s;
       position: fixed;
@@ -91,7 +93,7 @@
     h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
     blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }
     blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
-    .col { max-width: 63rem; margin: 0 auto; }
+    .col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; }
     
     #mode {
       position: absolute;
@@ -138,7 +140,33 @@
       display: inline;
     }
 
+    #bar {
+      backdrop-filter: blur(64px);
+      -webkit-app-region: drag;
+      height: var(--title-bar-height);
+      padding: 0;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      color: #FFF;
+      white-space: nowrap;
+      box-sizing: border-box;
+      position: fixed;
+      z-index: 100;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+    #bar:hover {
+      outline: #B0D944;
+    }
+    pear-ctrl {
+      display: inline-block;
+      margin-top: 6px;
+    }
+    pear-ctrl { float: right }
   </style>
+  <div id="bar"><pear-ctrl></pear-ctrl></div>
+
   <header>
     <div id="headin">
       <svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">