From 718c99086cd02a1bbfc704d2555b204f3aa77caa Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Sat, 9 Feb 2019 12:57:57 +0700 Subject: [PATCH] typography --- app/views/dev/ui.scala | 6 +++++- public/stylesheets/stage.css | 6 ++---- ui/common/css/abstracts/_fluid-size.scss | 18 ++++++++++++------ ui/common/css/base/_layout.scss | 3 +++ ui/common/css/base/_typography.scss | 19 ++++++------------- ui/common/css/components/_box.scss | 6 +++++- ui/common/css/components/_button.scss | 6 ++++++ ui/common/css/components/_site-header.scss | 10 ++++------ ui/common/css/themes/_default.scss | 1 + ui/site/src/main.js | 22 +++++++++++++--------- 10 files changed, 57 insertions(+), 40 deletions(-) diff --git a/app/views/dev/ui.scala b/app/views/dev/ui.scala index 64ff41d258..aa59a0b501 100644 --- a/app/views/dev/ui.scala +++ b/app/views/dev/ui.scala @@ -16,9 +16,13 @@ object ui { h2("H2 header title"), h3("H3 header title"), h4("H4 header title"), + p( + "

Random quote: ", + lila.quote.Quote.one.text + ), 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 => diff --git a/public/stylesheets/stage.css b/public/stylesheets/stage.css index 4bd74fd425..82c3a4d8df 100644 --- a/public/stylesheets/stage.css +++ b/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; diff --git a/ui/common/css/abstracts/_fluid-size.scss b/ui/common/css/abstracts/_fluid-size.scss index 595304b33f..02e6e389a9 100644 --- a/ui/common/css/abstracts/_fluid-size.scss +++ b/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'; + } } diff --git a/ui/common/css/base/_layout.scss b/ui/common/css/base/_layout.scss index 2bccca6592..bd1ab630e8 100644 --- a/ui/common/css/base/_layout.scss +++ b/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) { diff --git a/ui/common/css/base/_typography.scss b/ui/common/css/base/_typography.scss index 687dcac2de..03c678f7ba 100644 --- a/ui/common/css/base/_typography.scss +++ b/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); } diff --git a/ui/common/css/components/_box.scss b/ui/common/css/components/_box.scss index 5bf5aa9b66..376932ba71 100644 --- a/ui/common/css/components/_box.scss +++ b/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); } } diff --git a/ui/common/css/components/_button.scss b/ui/common/css/components/_button.scss index e5c5d3655e..4427c9d158 100644 --- a/ui/common/css/components/_button.scss +++ b/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; + } } diff --git a/ui/common/css/components/_site-header.scss b/ui/common/css/components/_site-header.scss index 6b648eb0a5..0d7dee194b 100644 --- a/ui/common/css/components/_site-header.scss +++ b/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 { diff --git a/ui/common/css/themes/_default.scss b/ui/common/css/themes/_default.scss index 8f9be56b25..a54c0e1417 100644 --- a/ui/common/css/themes/_default.scss +++ b/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; diff --git a/ui/site/src/main.js b/ui/site/src/main.js index 4590d54a48..ba5008af70 100644 --- a/ui/site/src/main.js +++ b/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 + '">' + - '' + (o.title ? '' + o.title + ' ' : '') + o.name + - ''; + '' + (o.title ? '' + o.title + ' ' : '') + o.name + + ''; } } }).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); }); });