From 26171379d0196ac645923e72b12e1cf29089835b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 5 Jan 2021 13:48:56 +0100 Subject: Use source sans 3 font --- .../+video-watch/video-watch.component.scss | 2 +- client/src/app/menu/menu.component.scss | 2 ++ .../video-thumbnail.component.scss | 2 +- client/src/sass/bootstrap.scss | 5 ++- .../WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 | Bin 0 -> 112112 bytes .../WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 | Bin 0 -> 117748 bytes .../WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 | Bin 0 -> 139788 bytes .../WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 | Bin 0 -> 144620 bytes client/src/sass/include/_fonts.scss | 34 ++++++++------------- client/src/sass/include/_mixins.scss | 6 +++- client/src/sass/include/_variables.scss | 1 + 11 files changed, 27 insertions(+), 25 deletions(-) create mode 100644 client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 create mode 100644 client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 create mode 100644 client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 create mode 100644 client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 (limited to 'client/src') diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index 9d8dffe3d..555126cbc 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -197,7 +197,7 @@ $video-info-margin-left: 44px; line-height: 1.37; a:nth-of-type(2) { - font-weight: 500; + font-weight: $font-regular; font-size: 90%; } diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index f369fa17a..6a49866b1 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -15,6 +15,7 @@ $menu-link-icon-margin-right: 18px; word-break: break-word; padding-right: 20px; transition: background-color .1s ease-in-out; + line-height: $line-height-normal; &.active { background-color: rgba(255, 255, 255, 0.15); @@ -208,6 +209,7 @@ menu { flex-direction: column; align-items: flex-start; border-top: 1px solid var(--greyForegroundColor); + line-height: $line-height-normal; a { @include menu-link; diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 4f53ffaf6..2b723a15a 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -27,7 +27,7 @@ border-radius: 3px; font-size: 12px; font-weight: $font-semibold; - line-height: 1.2; + line-height: 1.1; z-index: z(miniature); } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index ac53ae7a5..ade8d7033 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -88,6 +88,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; } } +.badge { + line-height: 1.1; +} @media screen and (min-width: #{breakpoint(md)}) { .modal:before { @@ -377,7 +380,7 @@ ngb-tooltip-window { &:not(.callout-light) { border-left-width: .25rem; } - + &.callout-info { border-color: pvar(--mainColorLightest); border-left-color: pvar(--mainColor); diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 new file mode 100644 index 000000000..4d686e31a Binary files /dev/null and b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.otf.woff2 differ diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 new file mode 100644 index 000000000..6cefd8f3d Binary files /dev/null and b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2 differ diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 new file mode 100644 index 000000000..18aab2b90 Binary files /dev/null and b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.otf.woff2 differ diff --git a/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 new file mode 100644 index 000000000..034bc6b9f Binary files /dev/null and b/client/src/sass/fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2 differ diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss index dd1cbadb3..be1132160 100644 --- a/client/src/sass/include/_fonts.scss +++ b/client/src/sass/include/_fonts.scss @@ -1,23 +1,15 @@ -$FontPathSourceSansPro: '~npm-font-source-sans-pro/fonts'; -$basePath: '#{$FontPathSourceSansPro}/WOFF2/TTF/SourceSansPro'; - -@mixin fontface($name, $path, $weight: null, $style: null, $exts: woff2) { - $src: null; - @each $ext in $exts { - $src: append($src, url(quote($path + "." + $ext)) format(quote($ext)), comma); - } - @font-face { - font-family: quote($name); - font-weight: $weight; - font-style: $style; - font-stretch: normal; - font-display: swap; - src: $src; - } +@font-face{ + font-family: 'Source Sans Pro'; + font-weight: 200 900; + font-style: normal; + font-stretch: normal; + src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2'); } -@include fontface('Source Sans Pro', '#{$basePath}-Regular.ttf', 400, normal); -@include fontface('Source Sans Pro', '#{$basePath}-It.ttf', 400, italic); -@include fontface('Source Sans Pro', '#{$basePath}-Semibold.ttf', 600, normal); -@include fontface('Source Sans Pro', '#{$basePath}-SemiboldIt.ttf', 600, italic); -@include fontface('Source Sans Pro', '#{$basePath}-Bold.ttf', 700, normal); \ No newline at end of file +@font-face{ + font-family: 'Source Sans Pro'; + font-weight: 200 900; + font-style: italic; + font-stretch: normal; + src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Italic.ttf.woff2') format('woff2'); +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 10ab44f57..0ce22354e 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -180,6 +180,7 @@ @mixin grey-button { @include button-focus($grey-button-outline-color); + background-color: $grey-background-color; color: pvar(--greyForegroundColor); @@ -247,6 +248,10 @@ } @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { + display: inline-flex; + align-items: center; + line-height: normal !important; + my-global-icon { position: relative; width: $width; @@ -807,7 +812,6 @@ .dashboard-num, .dashboard-text { text-align: center; font-size: 130%; - line-height: 21px; color: pvar(--mainForegroundColor); line-height: 30px; margin-bottom: 20px; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index b1e0431bb..acdc8d05f 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -7,6 +7,7 @@ $main-fonts: 'Source Sans Pro', sans-serif; $font-regular: 400; $font-semibold: 600; $font-bold: 700; +$line-height-normal: 1.2; $grey-background-color: #E5E5E5; $grey-background-hover-color: #EFEFEF; -- cgit v1.2.3