sphericalkat/katbin
1
0
Fork 0
Code Issues 5 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

refactor(styles): use JetBrains Mono variable

Browse Source 
- Remove Google fonts' "JetBrains Mono" as it didn't support variable
  and add the variable ttf for it

Signed-off-by: Akshit Garg <garg.akshit@gmail.com>
This commit is contained in:
Akshit Garg 2021-08-21 18:01:27 +05:30
parent 0ed4427322
commit 8c99eb04a4
No known key found for this signature in database
GPG Key ID: 31EE28F4B925E878
4 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/build.js
View File

@ -25,6 +25,7 @@ esbuild
outfile: "../priv/static/assets/app.js", outfile: "../priv/static/assets/app.js",
minify: productionBuild, minify: productionBuild,
watch: !productionBuild, watch: !productionBuild,
external: ["*.ttf"],
plugins: [ plugins: [
postCSSPlugin({ postCSSPlugin({
plugins: [postcssImport, tailwindcss, autoprefixer], plugins: [postcssImport, tailwindcss, autoprefixer],

41
assets/css/app.css
View File

@ -3,11 +3,18 @@
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
@font-face {
font-family: "JetBrains Mono";
src: url(/fonts/jetbrains_mono_variable.ttf);
font-weight: 100 1000;
font-stretch: 25% 151%;
}
* { * {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
html, html,
@ -17,7 +24,7 @@ body {
} }
a:hover { a:hover {
color: #ff9800 color: #ff9800;
} }
header { header {
@ -29,31 +36,31 @@ code {
} }
code { code {
white-space: pre; white-space: pre;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
textarea { textarea {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
.alert { .alert {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.alert-info { .alert-info {
background-color: #1ed98e; background-color: #1ed98e;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
.alert-danger { .alert-danger {
background-color: #ff9800; background-color: #ff9800;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
@import './highlight.css'; @import "./highlight.css";

BIN
assets/static/fonts/jetbrains_mono_variable.ttf Normal file
View File

Binary file not shown.

3
lib/ketbin_web/templates/layout/app.html.eex
View File

@ -6,9 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Katbin</title> <title>Katbin</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/> <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script> <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
</head> </head>
<body class="flex flex-col "> <body class="flex flex-col ">