fix: prevent font swap on first load

removed some unused sass classes, replace last sass font size variables
pull/3083/head
William Grant 10 months ago
parent d6544efaa6
commit d0a40e41cd

@ -14,6 +14,8 @@
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';"
/>
<!-- Load first to prevent font swapping on start -->
<link href="stylesheets/fonts.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
</head>

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@ -25,6 +25,8 @@
/>
<title>Session</title>
<link href="images/session/session_icon.png" rel="shortcut icon" />
<!-- Load first to prevent font swapping on start -->
<link href="stylesheets/fonts.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
</head>

@ -14,6 +14,8 @@
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';"
/>
<!-- Load first to prevent font swapping on start -->
<link href="stylesheets/fonts.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
</head>

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@ -24,6 +24,8 @@
style-src 'self' 'unsafe-inline';"
/>
<link href="images/session/session_icon.png" rel="shortcut icon" />
<!-- Load first to prevent font swapping on start -->
<link href="stylesheets/fonts.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
</head>
<body>

@ -39,27 +39,3 @@
display: flex;
}
}
.scrollable {
height: 100%;
overflow: auto;
}
.section-conversations-container {
display: flex;
flex-direction: row;
margin-inline-end: 3rem;
align-items: center;
h4 {
flex: 1;
}
}
.left-pane-placeholder {
flex-grow: 1;
display: flex;
}
.left-pane-wrapper {
flex: 1;
}

@ -1,5 +0,0 @@
@mixin color-svg($svg, $color) {
-webkit-mask: url($svg) no-repeat center;
-webkit-mask-size: 100%;
background-color: $color;
}

@ -93,13 +93,13 @@ textarea {
font-weight: bold;
width: 100%;
display: flex;
font-size: $session-font-md;
font-size: var(--font-size-md);
&-text {
color: var(--text-primary-color);
font-weight: 400;
font-size: $session-font-sm;
line-height: $session-font-sm;
font-size: var(--font-size-sm);
line-height: var(--font-size-sm);
}
.module-contact-name {
@ -198,8 +198,8 @@ label {
&__body {
padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
font-family: var(--font-default);
line-height: $session-font-md;
font-size: $session-font-md;
line-height: var(--font-size-md);
font-size: var(--font-size-md);
overflow-y: auto;
overflow-x: hidden;
@ -245,9 +245,9 @@ label {
color: var(--black-color);
font-family: monospace;
font-family: var(--font-mono);
font-style: normal;
font-size: $session-font-xs;
font-size: var(--font-size-xs);
}
}
@ -264,7 +264,7 @@ label {
}
&-main-message {
font-size: $session-font-md;
font-size: var(--font-size-md);
line-height: 1.5;
}

@ -1,106 +1,3 @@
// //////////////////////////////////////////////
// /////////////////// Fonts ////////////////////
// //////////////////////////////////////////////
@font-face {
font-family: SpaceMono;
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
font-style: italic;
font-weight: 100;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
font-style: italic;
font-weight: 300;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
font-style: italic;
font-weight: 500;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Black.ttf') format('truetype');
font-weight: 900;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
// Accented font
@font-face {
font-family: Loor; // Loor does not support some Cyrillic ghyphs so where we use it, we add a fallback to Roboto
src: url('../fonts/Loor.ttf') format('truetype');
line-height: 1.4rem;
}
// //////////////////////////////////////////////
// /////////////////// Text /////////////////////
// //////////////////////////////////////////////
// Sizing
$session-font-xs: 11px;
$session-font-sm: 13px;
$session-font-md: 15px;
// Mixins
@mixin text-highlight($color) {
@ -110,6 +7,12 @@ $session-font-md: 15px;
display: inline-block;
}
@mixin color-svg($svg, $color) {
-webkit-mask: url($svg) no-repeat center;
-webkit-mask-size: 100%;
background-color: $color;
}
$session-subtle-factor: 0.6;
@function subtle($color) {

@ -0,0 +1,89 @@
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
font-style: italic;
font-weight: 100;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
font-style: italic;
font-weight: 300;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
font-style: italic;
font-weight: 500;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-Black.ttf') format('truetype');
font-weight: 900;
}
@font-face {
font-family: Roboto;
src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: SpaceMono;
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
}
/* Accented font */
@font-face {
font-family: Loor; /* Loor does not support some Cyrillic ghyphs so where we use it, we add a fallback to Roboto */
src: url('../fonts/Loor.ttf') format('truetype');
line-height: 1.4rem;
}

@ -9,7 +9,6 @@
// Global Settings and Mixins
@import 'session_constants';
@import 'mixins';
@import 'global';
// Components

Loading…
Cancel
Save