improve lookbook styles

Author: spearwolf

apps/lookbook/src/components/DemoCards.astro

@@ -4,7 +4,7 @@ import Card from './Card.astro';
 import TagCloudFilter from './TagCloudFilter.astro';
 
 import lookbook from '../images/20221122-lookbook-white-fat.svg?url';
-import logo from '../images/twopoint5d.png?url';
+import logo from '../images/twopoint5d-glitch.png?url';
 
 const {demos} = loadMetadataForDemos();
 ---
@@ -29,17 +29,24 @@ const {demos} = loadMetadataForDemos();
 <style>
   main {
     margin: auto auto 3rem;
-    padding: 1.5rem;
+    padding: 80px 1.5rem 1.5rem;
     max-width: 120ch;
   }
   .lookbook-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px;
     margin: 0;
     display: flex;
-    align-items: center;
+    justify-content: center;
+    background-color: rgba(13 15 20 / 80%);
+    border-bottom: 1px solid #33353a;
+    box-shadow: 0 0 10px #000;
   }
   .lookbook-header img.primary {
     max-height: 66px;
-    margin-left: 1rem;
   }
   .lookbook-header img.secondary {
     filter: drop-shadow(0 0 2px #ccc) drop-shadow(0 0 15px #999);

apps/lookbook/src/layouts/Layout.astro

@@ -21,14 +21,14 @@ const {title} = Astro.props;
 </html>
 
 <style lang="scss" is:global>
-  $color-background: #252525;
-  $color-primary: #afada5;
+  $color-background: rgb(13 15 20); // #252525;
+  $color-primary: #adafb4;
   $hue-shift: 10deg;
 
   :root {
     --color-background: #{$color-background};
     --color-background-dark: #{darken($color-background, 5%)};
-    --color-background-light: #{lighten($color-background, 5%)};
+    --color-background-light: #{lighten($color-background, 10%)};
     --color-primary: #{$color-primary};
     --color-primary-darker: #{adjust-hue(darken($color-primary, 20%), -$hue-shift)};
     --color-primary-inactive: #{adjust-hue(darken($color-primary, 25%), -$hue-shift)};