typography

app/views/dev/ui.scala

@@ -16,9 +16,13 @@ object ui {
         h2("H2 header title"),
         h3("H3 header title"),
         h4("H4 header title"),
+        p(
+          "<p> Random quote: ",
+          lila.quote.Quote.one.text
+        ),
         p(
           "<p> Random quotes: ",
-          (1 to 10).map(_ => lila.quote.Quote.one.text).mkString(" ")
+          (1 to 5).map(_ => lila.quote.Quote.one.text).mkString(" ")
         ),
         div(cls := "palette")(
           List("background", "primary", "secondary", "accent", "brag", "error", "fancy", "font").map { c =>

public/stylesheets/stage.css

@@ -1,23 +1,21 @@
 body {
-  margin-top: 45px;
+  margin-top: 40px;
 }
 
 #stage {
   height: 40px;
   background: #7f1010;
   color: #fff!important;
-  font-size: 1.3em;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
-  border-bottom: 1px solid #666;
-  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
+  padding: 0 1rem;
 }
 #stage a {
   color: #fff!important;

ui/common/css/abstracts/_fluid-size.scss

@@ -1,22 +1,28 @@
+$vp-min-width: 320px !default;
+$vp-max-width: 1200px !default;
+
 @function strip-unit($value) {
   @return $value / ($value * 0 + 1);
 }
 
-@mixin fluid-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
+@mixin fluid-size($prop, $min-size, $max-size, $min-vw: $vp-min-width, $max-vw: $vp-max-width) {
   $u1: unit($min-vw);
   $u2: unit($max-vw);
-  $u3: unit($min-font-size);
-  $u4: unit($max-font-size);
+  $u3: unit($min-size);
+  $u4: unit($max-size);
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
     & {
-      font-size: $min-font-size;
+      #{$prop}: $min-size;
       @media screen and (min-width: $min-vw) {
-        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+        #{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
       }
       @media screen and (min-width: $max-vw) {
-        font-size: $max-font-size;
+        #{$prop}: $max-size;
       }
     }
   }
+  @else {
+    @error 'fluid-size requires that all values have the same unit';
+  }
 }

ui/common/css/base/_layout.scss

@@ -1,3 +1,6 @@
+$vp-min-width: 320px;
+$vp-max-width: 1200px;
+
 body {
   --site-header-height: #{$site-header-short-height};
   @include breakpoint($mq-site-header-tall) {

ui/common/css/base/_typography.scss

@@ -1,17 +1,10 @@
-/* Viewport limits */
-$vp-min-width: 320px;
-$vp-max-width: 1200px;
-
 html {
   // font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   // font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 'Noto Sans', Roboto, Ubuntu, "Helvetica Neue", sans-serif;
   font-family: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
-  @include fluid-size($vp-min-width, $vp-max-width, 14px, 16px);
-  font-smoothing: antialiased;
+  @include fluid-size('font-size', 14px, 16px);
+  // font-smoothing: antialiased;
 }
-// html {
-//   font: 1rem/1.6 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
-// }
 
 h1,
 h2,
@@ -21,17 +14,17 @@ h4 {
   font-weight: normal;
 }
 h1 {
-  @include fluid-size($vp-min-width, $vp-max-width, 27px, 50px);
+  @include fluid-size('font-size', 27px, 52px);
 }
 h2 {
-  @include fluid-size($vp-min-width, $vp-max-width, 23px, 40px);
+  @include fluid-size('font-size', 23px, 40px);
 }
 h3 {
   font-weight: bold;
   color: $c-font-dim;
-  @include fluid-size($vp-min-width, $vp-max-width, 20px, 30px);
+  @include fluid-size('font-size', 20px, 30px);
 }
 h4 {
   color: $c-font-dim;
-  @include fluid-size($vp-min-width, $vp-max-width, 20px, 26px);
+  @include fluid-size('font-size', 20px, 26px);
 }

ui/common/css/components/_box.scss

@@ -1,9 +1,13 @@
+$vp-min-width: 320px;
+$vp-max-width: 1200px;
+
 .box {
   background: $c-background-clear;
   @extend %box-shadow;
 
   &-pad {
-    padding: 3vh 3vw;
+    @include fluid-size('--box-padding', 20px, 50px);
+    padding: 4vh var(--box-padding);
   }
 }
 

ui/common/css/components/_button.scss

@@ -17,4 +17,10 @@
     background: mix(white, $c-primary, 15);
     box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);
   }
+  &[disabled] {
+    cursor: default;
+    background: hsl(0, 0%, 80%);
+    color: hsl(0, 0%, 62%);
+    box-shadow: none;
+  }
 }

ui/common/css/components/_site-header.scss

@@ -27,7 +27,7 @@
 }
 
 .site-title {
-  font-size: 2rem;
+  font: 26px/#{$site-header-short-height - 3} 'Noto Sans';
   font-weight: normal;
   white-space: nowrap;
   margin: 0 .5rem;
@@ -35,14 +35,12 @@
   @include breakpoint($mq-xx-small) {
     display: block;
   }
-  line-height: calc(#{$site-header-short-height} - 3px);
-  font-size: 1.5rem;
   @include breakpoint($mq-site-header-tall) {
-    line-height: $site-header-tall-height;
-    font-size: 1.8rem;
+    font-size: 32px;
+    line-height: #{$site-header-tall-height - 3};
   }
   @include breakpoint($mq-site-header-tall $mq-topnav-visible) {
-    line-height: 52px;
+    line-height: #{$site-header-tall-height - 5};
     margin: 0 1rem;
   }
   & a {

ui/common/css/themes/_default.scss

@@ -63,5 +63,6 @@ $borders: $border-width $border-style $c-border;
 /* Shadows */
 
 $box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+// $box-shadow: 0 2px 2px 0 rgba(0,0,0,.157);
 
 $text-shadow: 0 1px 1px $c-font-shadow;

ui/site/src/main.js

@@ -164,8 +164,8 @@ lichess.topMenuIntent = function() {
           suggestion: function(o) {
             var tag = opts.tag || 'a';
             return '<' + tag + ' class="ulpt user_link' + (o.online ? ' online' : '') + '" ' + (tag === 'a' ? '' : 'data-') + 'href="/@/' + o.name + '">' +
-            '<i class="line' + (o.patron ? ' patron' : '') + '"></i>' + (o.title ? '<span class="title">' + o.title + '</span>&nbsp;' : '')  + o.name +
-            '</' + tag + '>';
+              '<i class="line' + (o.patron ? ' patron' : '') + '"></i>' + (o.title ? '<span class="title">' + o.title + '</span>&nbsp;' : '')  + o.name +
+              '</' + tag + '>';
           }
         }
       }).on('typeahead:render', function() {
@@ -508,6 +508,10 @@ lichess.topMenuIntent = function() {
         });
       });
 
+      $('#topnav-toggle').on('change', e => {
+        document.body.classList.toggle('masked', e.target.checked);
+      });
+
       lichess.loadInfiniteScroll = function(el) {
         $(el).each(function() {
           if (!$('.pager a', this).length) return;
@@ -608,13 +612,13 @@ lichess.topMenuIntent = function() {
 
       if (window.Fingerprint2) setTimeout(function() {
         var t = Date.now()
-          new Fingerprint2({
-            excludeJsFonts: true
-          }).get(function(res) {
-            $i = $('#signup-fp-input');
-            if ($i.length) $i.val(res);
-            else $.post('/auth/set-fp/' + res + '/' + (Date.now() - t));
-          });
+        new Fingerprint2({
+          excludeJsFonts: true
+        }).get(function(res) {
+          $i = $('#signup-fp-input');
+          if ($i.length) $i.val(res);
+          else $.post('/auth/set-fp/' + res + '/' + (Date.now() - t));
+        });
       }, 500);
     });
   });