hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

custom terminal fonts -- part 2

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2022-05-18 19:26:14 +03:00
parent 37dfd3c328
commit 33e379fab6
5 changed files with 48 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+helm-releases/release-details/release-details.scss
View File

@ -66,7 +66,7 @@
.notes {
white-space: pre-line;
font-family: "RobotoMono", monospace;
font-family: var(--font-monospace);
font-size: small;
}

22
src/renderer/components/app.scss
View File

@ -9,6 +9,7 @@
@import "~flex.box";
@import "../themes/theme-vars";
@import "./fonts";
:root {
--unit: 8px;
@ -17,7 +18,7 @@
--border-radius: 3px;
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
--font-monospace: Lucida Console, Monaco, Consolas, monospace; // some defaults
--font-terminal: var(--font-monospace); // overridden in terminal.ts
--font-terminal: var(--font-monospace); // overridden in terminal.ts, managed by common/user-store.ts
--font-size-small: calc(1.5 * var(--unit));
--font-size: calc(1.75 * var(--unit));
--font-size-big: calc(2 * var(--unit));
@ -227,16 +228,19 @@ a {
}
}
// import and preload all bundled fonts
@import "fonts";
#fonts-preloading {
> .icons {
@include font-preload("Material Icons");
}
> span {
position: absolute;
visibility: hidden;
height: 0;
> .terminal {
@include font-preload("RobotoMono");
&:before {
width: 0;
display: block;
overflow: hidden;
content: "text-example"; // some text required to start applying/rendering font in document
font-family: inherit; // font-family must be specified via style="" (see: template.html)
}
}
}

32
src/renderer/components/fonts.scss
View File

@ -16,45 +16,45 @@
// Terminal fonts (monospaced)
// Source: https://fonts.google.com/?category=Monospace
@font-face {
font-family: 'Anonymous Pro', monospace;
src: local('Anonymous Pro'), url('../fonts/AnonymousPro-Regular.ttf') format('truetype');
font-family: "Anonymous Pro", monospace;
src: local("Anonymous Pro"), url("../fonts/AnonymousPro-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'IBM Plex Mono', monospace;
src: local('IBM Plex Mono'), url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
font-family: "IBM Plex Mono", monospace;
src: local("IBM Plex Mono"), url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'JetBrains Mono', monospace;
src: local('JetBrains Mono'), url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
font-family: "JetBrains Mono", monospace;
src: local("JetBrains Mono"), url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'Red Hat Mono', monospace;
src: local('Red Hat Mono'), url('../fonts/RedHatMono-Regular.ttf') format('truetype');
font-family: "Red Hat Mono", monospace;
src: local("Red Hat Mono"), url("../fonts/RedHatMono-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'Source Code Pro', monospace;
src: local('Source Code Pro'), url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
font-family: "Source Code Pro", monospace;
src: local("Source Code Pro"), url("../fonts/SourceCodePro-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'Space Mono', monospace;
src: local('Space Mono'), url('../fonts/SpaceMono-Regular.ttf') format('truetype');
font-family: "Space Mono", monospace;
src: local("Space Mono"), url("../fonts/SpaceMono-Regular.ttf") format("truetype");
font-display: block;
}
@font-face {
font-family: 'Ubuntu Mono', monospace;
src: local('Ubuntu Mono'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype');
font-family: "Ubuntu Mono", monospace;
src: local("Ubuntu Mono"), url("../fonts/UbuntuMono-Regular.ttf") format("truetype");
font-display: block;
}
@ -62,7 +62,7 @@
// RobotoMono Windows Compatible for using in terminal
// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
@font-face {
font-family: 'RobotoMono', monospace;
src: local('RobotoMono'), url('../fonts/roboto-mono-nerd.ttf') format('truetype');
font-family: "RobotoMono", monospace;
src: local("RobotoMono"), url("../fonts/roboto-mono-nerd.ttf") format("truetype");
font-display: block;
}

17
src/renderer/components/mixins.scss
View File

@ -59,20 +59,3 @@
@content; // css-modules (*.module.scss)
}
}
// Makes custom @font-family available at earlier stages.
// Element must exist in DOM as soon as possible to initiate preloading.
@mixin font-preload($fontFamily) {
position: absolute;
visibility: hidden;
height: 0;
&:before {
width: 0;
display: block;
overflow: hidden;
content: "x"; // some text required to start applying font in document
font-family: $fontFamily; // imported name in @font-face declaration
@content;
}
}

29
src/renderer/template.html
View File

@ -1,17 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<div id="terminal-init"></div>
<div id="app"></div>
<div id="terminal-init"></div>
<div id="fonts-preloading">
<i class="icons"><!--material icons--></i>
<i class="terminal"><!--roboto mono--></i>
</div>
<div id="fonts-preloading">
<span style="font-family: 'Material Icons'" />
<span style="font-family: 'Anonymous Pro'" />
<span style="font-family: 'RobotoMono'" />
<span style="font-family: 'IBM Plex Mono'" />
<span style="font-family: 'JetBrains Mono'" />
<span style="font-family: 'Red Hat Mono'" />
<span style="font-family: 'Source Code Pro'" />
<span style="font-family: 'Space Mono'" />
<span style="font-family: 'Ubuntu Mono'" />
</div>
</body>
</body>
</html>