bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Rubik font family

Browse Source
This commit is contained in:
Guntis Smaukstelis
2023-08-08 19:50:19 +03:00
parent 1d6293f698
commit d6cc56e789
4 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+1
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" /> <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<link rel="preload" href="/src/assets/Rubik-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
<title><{ VITE_APP_TITLE }></title> <title><{ VITE_APP_TITLE }></title>
</head> </head>
<body> <body>
web/src/aggregator/map/MapView.tsx
+5 -5
View File
@@ -81,7 +81,7 @@ function drawOnMap(
ctx.fill(); ctx.fill();
// weather values // weather values
ctx.font = "bold 30px Arial"; ctx.font = "bold 30px Rubik";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
@@ -91,7 +91,7 @@ function drawOnMap(
}); });
// wind values // wind values
ctx.font = "bold 45px Arial"; ctx.font = "bold 45px Rubik";
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.fillStyle = "#FFFFFF"; ctx.fillStyle = "#FFFFFF";
@@ -104,12 +104,12 @@ function drawOnMap(
const speedWidth = ctx.measureText(windData[1]).width; const speedWidth = ctx.measureText(windData[1]).width;
ctx.fillText(windData[1], boxMiddleX - speedWidth / 2 - 30, 575); ctx.fillText(windData[1], boxMiddleX - speedWidth / 2 - 30, 575);
ctx.font = "bold 25px Arial"; ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + speedWidth / 2 - 22, 590); ctx.fillText("M/S", boxMiddleX + speedWidth / 2 - 22, 590);
ctx.font = "bold 45px Arial"; ctx.font = "bold 45px Rubik";
const gustsWidth = ctx.measureText(windData[2]).width; const gustsWidth = ctx.measureText(windData[2]).width;
ctx.fillText(windData[2], boxMiddleX - gustsWidth / 2 - 30, 790); ctx.fillText(windData[2], boxMiddleX - gustsWidth / 2 - 30, 790);
ctx.font = "bold 25px Arial"; ctx.font = "bold 25px Rubik";
ctx.fillText("M/S", boxMiddleX + gustsWidth / 2 - 22, 805); ctx.fillText("M/S", boxMiddleX + gustsWidth / 2 - 22, 805);
} }
web/src/assets/Rubik-Medium.ttf
BIN
View File
Binary file not shown.
web/src/css/index.css
+14 -4
View File
@@ -1,23 +1,33 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: Arial, sans-serif;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
h1, h2, h3, h4 {
font-family: 'Rubik', sans-serif;
}
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
@font-face {
font-family: 'Rubik';
src: url('../assets/Rubik-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.primary { .primary {
background-color: #ffcc66; background-color: #ffcc66;
border: none; border: none;
font-weight: bold;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
font-family: 'Rubik', sans-serif;
} }
.primary:hover { .primary:hover {