puzzle storm font

ui/storm/css/_clock.scss

@@ -12,7 +12,8 @@
 
 .storm {
   &__clock {
-    @extend %roboto, %flex-center-nowrap;
+    @extend %flex-center-nowrap;
+    font-family: 'storm';
 
     &__time {
       font-size: 5em;

ui/storm/css/_combo.scss

@@ -14,6 +14,8 @@
   &__combo {
     @extend %flex-center-nowrap;
 
+    font-family: 'storm';
+
     &__icon {
       flex: 5em 0 0;
       width: 5em;
@@ -30,26 +32,18 @@
       &__value {
         @extend %flex-center-nowrap;
 
-        strong {
-          @extend %roboto-fat;
-
-          font-size: 2.3em;
-          line-height: 1em;
-        }
+        font-size: 2.3em;
+        line-height: 1em;
 
         span {
-          @extend %roboto;
-
           margin-right: .5ch;
         }
       }
 
       &__combo {
-        @extend %roboto;
 
         margin-right: .5ch;
         font-size: .9em;
-        letter-spacing: -1px;
       }
 
       transition: color .1s;
@@ -103,10 +97,10 @@
 
       animation: level-fade-in .3s ease-out;
       transform: skewX(-45deg) scaleY(0.70711);
-
       flex: 21% 0 0;
       margin-right: 4%;
       height: 1em;
+
       // box-shadow: 0 0 15px $c-level;
       background: mix($c-level, black, 80%);
 

ui/storm/css/_end.scss

@@ -23,9 +23,9 @@
       margin: auto;
 
       &__number {
-        @extend %roboto;
+        font-family: 'storm';
 
-        font-size: 8em;
+        font-size: 10em;
         width: 3ch;
         text-align: center;
       }

ui/storm/css/_play.scss

@@ -28,6 +28,7 @@
     //   grid-template-areas: '.    board   side';
     //   grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
     // }
+ 
   }
 
   &__side {
@@ -37,9 +38,9 @@
   }
 
   &__solved {
-    @extend %flex-center;
 
-    strong {
+    &__value {
+      font-family: 'storm';
       font-size: 2em;
       margin-right: 1rem;
     }

ui/storm/css/_storm.scss

@@ -10,5 +10,13 @@ $mq-col3: $mq-col3-uniboard;
   }
 }
 
+@font-face {
+  font-family: 'storm';
+  font-style: normal;
+  font-weight: 400;
+
+  src: url("#{$font-path}/alarmclock.woff2") format("woff2");
+}
+
 @import "play";
 @import "end";

ui/storm/src/view/end.ts

@@ -15,10 +15,9 @@ const renderEnd = (ctrl: StormCtrl): VNode[] => [
 
 const renderSummary = (ctrl: StormCtrl): VNode => {
   const wins = ctrl.countWins();
-  console.log(ctrl.trans.vdomPlural('xPuzzlesSolved', wins, h('strong', wins)));
   return h('div.storm__summary', [
     h('div.storm__summary__solved', [
-      h('strong.storm__summary__solved__number', {
+      h('span.storm__summary__solved__number', {
         hook: onInsert(el => numberSpread(el, wins, Math.round(wins * 50), 0)(wins))
       }, '0'),
       h('p', ctrl.trans('puzzlesSolved'))

ui/storm/src/view/main.ts

@@ -38,10 +38,7 @@ const renderCombo = (ctrl: StormCtrl): VNode =>
   h('div.storm__combo', [
     h('div.storm__combo__icon'),
     h('div.storm__combo__counter', [
-      h('span.storm__combo__counter__value', [
-        h('span', 'x'),
-        h('strong', ctrl.vm.combo)
-      ]),
+      h('span.storm__combo__counter__value', ctrl.vm.combo),
       h('span.storm__combo__counter__combo', 'COMBO')
     ]),
     h('div.storm__combo__bars', [
@@ -63,7 +60,7 @@ const renderCombo = (ctrl: StormCtrl): VNode =>
 const renderSolved = (ctrl: StormCtrl): VNode =>
   h('div.storm__solved', [
     h('div', [
-      h('strong', ctrl.countWins()),
+      h('span.storm__solved__value', ctrl.countWins()),
       'puzzles solved'
     ]),
     h('div.alpha', [