DINO TIME

_includes/frame.html

@@ -0,0 +1,6 @@
+<div class="framed{% if include.crosshair %} crosshair{% endif %}">
+  <div class="NW"></div>
+  <div class="NE"></div>
+  <div class="SW"></div>
+  <div class="SE"></div>
+</div>

_sass/_animations.scss

@@ -56,96 +56,35 @@ hr.squiggle::before {
 
 @keyframes rotate {
   from { transform: rotate(0deg);    }
-  to {   transform: rotate(calc(5 * -360deg)); }
+  to {   transform: rotate(calc(3 * -360deg)); }
 }
 
 @keyframes rotate-back {
   from { transform: rotate(0deg);    }
-  to {   transform: rotate(calc(5 * 360deg)); }
+  to {   transform: rotate(calc(3 * 360deg)); }
 }
 
 @keyframes rotate-chromeball {
   from { transform: rotate(0deg);   }
-  to {   transform: rotate(calc(5 * -180deg)); }
+  to {   transform: rotate(calc(3 * -180deg)); }
 }
 
 @keyframes rotate-circle-dotted-inner {
   from { transform: rotate(0deg);  }
-  to {   transform: rotate(calc(5 * 60deg)); }
+  to {   transform: rotate(calc(3 * 60deg)); }
 }
 
 @keyframes rotate-circle-dotted-middle {
   from { transform: rotate(0deg);    }
-  to {   transform: rotate(calc(5 * -60deg)); }
+  to {   transform: rotate(calc(3 * -60deg)); }
 }
 
 @keyframes rotate-circle-dotted-outer {
   from { transform: rotate(0deg);   }
-  to {   transform: rotate(calc(5 * 30deg)); }
+  to {   transform: rotate(calc(3 * 30deg)); }
 }
 
 @keyframes scroll-bg-x {
   from { background-position-x: 0;   }
-  to {   background-position-x: 50vmax; }
+  to {   background-position-x: -50vmax; }
 }
-
-@keyframes colourful {
-  0% { 
-    --linear-cover: 0%;
-  }
-  50% { 
-    --linear-cover: 50%;
-    --blue-x: 100%;
-    --blue-y: 100%;
-    --red-x: 0%;
-    --red-y: 100%;
-    --green-x: 100%;
-    --green-y: 0%;
-    --yellow-x: 0%;
-    --yellow-y: 0%;
-  }
-  62% {
-    --linear-cover: 40%;
-    --blue-x: 0%;
-    --blue-y: 100%;
-    --red-x: 0%;
-    --red-y: 0%;
-    --green-x: 100%;
-    --green-y: 100%;
-    --yellow-x: 100%;
-    --yellow-y: 0%;
-  }
-  75% {
-    --linear-cover: 65%;
-    --blue-x: 0%;
-    --blue-y: 0%;
-    --red-x: 100%;
-    --red-y: %;
-    --green-x: 0%;
-    --green-y: 100%;
-    --yellow-x: 100%;
-    --yellow-y: 100%;
-  }
-  87% {
-    --linear-cover: 75%;
-    --blue-x: 100%;
-    --blue-y: 0%;
-    --red-x: 100%;
-    --red-y: 100%;
-    --green-x: 0%;
-    --green-y: 0%;
-    --yellow-x: 0%;
-    --yellow-y: 100%;
-  }
-  100% {
-    --linear-cover: 75%;
-    --blue-x: 100%;
-    --blue-y: 100%;
-    --red-x: 0%;
-    --red-y: 100%;
-    --green-x: 100%;
-    --green-y: 0%;
-    --yellow-x: 0%;
-    --yellow-y: 0%;
-  }
-}

_sass/_base.scss

@@ -53,12 +53,12 @@
     }
     @include query($bp-med){
       --f-semi: var(--f-20);
-      --f-lrg:  var(--f-24);
       --f-2xl:  var(--f-48);
       --f-3xh:  var(--f-72);
       --f-4xh:  var(--f-96);
     }
     @include query($bp-lrg){
+      --f-lrg:  var(--f-24);
       --f-hero: var(--f-48);
       --f-xhr:  var(--f-60);
       --f-2xh:  var(--f-72);

_sass/_layout.scss

@@ -23,7 +23,8 @@ body {
     position: fixed;
     left: 0;
     top: 0;
-    opacity: 0.1;
+    opacity: 0.05;
+    // filter: blur(1px);
     width: 100vw;
     height: 100vh;
     background-image: url(../images/the_color_of_television_tuned_to_a_dead_channel.gif);
@@ -77,14 +78,14 @@ body {
 
   .grid-twos {
     grid-column: span 12;
-    @include query($bp-lrg){
+    @include query($bp-med){
       grid-column: span 6;
     }
   }
 
     .grid-twos-primary {
       grid-column: span 12;
-      @include query($bp-lrg){
+      @include query($bp-med){
         grid-column: span 7;
       }
       @include query($bp-xlg){
@@ -97,7 +98,7 @@ body {
 
     .grid-twos-secondary {
       grid-column: span 12;
-      @include query($bp-lrg){
+      @include query($bp-med){
         grid-column: span 5;
       }
       @include query($bp-xlg){
@@ -113,9 +114,11 @@ body {
     @include query($bp-med){
       grid-column: span 4;
     }
-    .box {
-      padding-top: var(--s1);
-      padding-bottom: var(--s1);
+    @include query($bp-med){
+      .box {
+        padding-top: var(--s1);
+        padding-bottom: var(--s1);
+      }
     }
   }
 
@@ -184,35 +187,85 @@ body {
 a { @include transit; }
 a.box {
   display: block;
-  //   height: 100%;
-  // @include query($bp-lrg){
-  //   height: calc(100% - var(--u1));
-  // }
-  // @include query($bp-2xl){
-  //   height: calc(100% - var(--u2));
-  // }
+    height: 100%;
+  @include query($bp-lrg){
+    height: calc(100% - var(--u2));
+  }
+  @include query($bp-2xl){
+    height: calc(100% - var(--u2));
+  }
   &:hover {
     background-color: var(--fg);
     color: var(--bg);
   }
 }
 
-nav .flex {
-  height: 100%;
-  flex-direction: column;
-  align-items: stretch;
-  li {
-    flex: 1 0 auto;
+header .box {
+  padding-top: var(--s8);
+  padding-bottom: var(--s2);
+  box-shadow: none;
+}
+
+.featured {
+  position: relative;
+  @include query($bp-xlg){
+    max-width: 40em;
+    padding: var(--s2);
   }
-  .box {
-    display: flex;
-    align-items: center;
+  @include query($bp-3xl){
+    margin: var(--s2);
+    padding: var(--s2);
   }
 }
 
-header .box {
-  padding-top: var(--s8);
-  padding-bottom: var(--s2);
+.framed {
+  --placement: 0;
+  --corner: 8px;
+  --img: url("../images/corner.svg");
+  &.crosshair {
+    --placement: -8px;
+    --corner: 16px;
+    --img: url("../images/crosshair.svg");
+  }
+  display: none;
+  @include query($bp-xlg){
+    display: initial;
+    position: absolute;
+    z-index: -1;
+    top: var(--placement);
+    left: var(--placement);
+    bottom: var(--placement);
+    right: var(--placement);
+    height: 100%;
+    width: 100%;
+    mix-blend-mode: difference;
+    .NW, .NE, .SW, .SE {
+      position: absolute;
+      height: var(--corner);
+      width: var(--corner);
+      background-image: var(--img);
+    }
+    .NW {
+      top: var(--placement);
+      left: var(--placement);
+    }
+    .NE {
+      top: var(--placement);
+      right: var(--placement);
+      rotate: 90deg;
+    }
+    .SE {
+      bottom: var(--placement);
+      right: var(--placement);
+      rotate: 180deg;
+    }
+    .SW {
+      bottom: var(--placement);
+      left: var(--placement);
+      rotate: 270deg;
+    }
+  }
+
 }
 
 h2.grid-ones {
@@ -240,8 +293,16 @@ article {
 
 .chromeball {
   @include xy-center
+  @include querydown($bp-sml){
+    padding: var(--s8);
+  }
+  @include querydown($bp-lrg){
+    padding: var(--s2);
+  }
 }
 
+// make it smaller on mobile views
+
   #chromeball-protect {
   }
 
@@ -252,13 +313,26 @@ hr.squiggle {
   height: var(--s4);
   mix-blend-mode: difference;
   &::before {
+    --margin-tb: var(--u1);
+    --margin-lr: calc(var(--s1) / 2);
     content:'';
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-image: url("../images/squiggle.svg");
+    width: calc(100% - 2 * var(--margin-lr));
+    height: calc(100% - 2 * var(--margin-tb));
+    margin: var(--margin-tb) var(--s1);
+    background-image: url("../images/lines.svg");
     background-repeat: repeat-x;
-    background-position-y: center;
+    background-position-y: bottom;
     background-color: black;
   }
+  &::after {
+    content:'';
+    position: absolute;
+    height: 100%;
+    aspect-ratio: 1.5 / 1;
+    background-image: url(../images/chrome_dino.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: right;
+  }
 }

_sass/_typography.scss

@@ -150,7 +150,7 @@ li:has(.box) {
 .f-2xh,
 .f-3xh,
 .f-4xh {
-  line-height: 0.75;
+  line-height: 0.8;
   letter-spacing: -0.05em;
 }
 
@@ -173,9 +173,7 @@ header {
     &::after {
       content: '”';
     }
-    @include query($bp-lrg){
-      margin-top: 1rem;
-    }
+    margin-top: 1rem;
   }
   @include querydown($bp-lrg){
     line-height: 1;