Logo

src/assets/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="./assets/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/assets/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/assets/logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1500px" height="1500px" viewBox="0 0 1500 1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <!-- Generated by Pixelmator Pro 1.3.4 -->
+ <path id="path" d="M750.04 1458.229 C721.93 1458.372 692.968 1442.149 692.968 1442.149 692.968 1442.149 693.177 1442.144 693.185 1442.144 605.87 1415.793 439.9 1358.938 356.298 1285.905 303.945 1240.17 283.371 1218.867 256.783 1182.567 208.07 1205.079 43.67 1279.767 7.544 1279.343 4.135 1279.303 1.868 1278.592 0.951 1277.106 -10.181 1259.088 138.727 1111.969 178.788 1072.907 168.658 1050.165 162.059 1027.752 159.167 1005.542 147.755 917.878 143.967 840.542 194.212 757.304 244.459 674.066 290.8 646.526 332.935 601.06 375.07 555.594 478.355 447.689 490.64 406.849 500.474 374.161 593.488 315.465 683.576 292.392 693.973 223.105 722.839 43.248 742.525 41.788 761.426 40.387 799.512 221.146 813.624 291.567 904.72 314.037 999.882 373.763 1009.835 406.847 1022.121 447.687 1125.405 555.592 1167.54 601.058 1209.675 646.524 1256.016 674.064 1306.263 757.302 1356.509 840.541 1352.721 917.876 1341.308 1005.54 1338.413 1027.776 1331.803 1050.215 1321.652 1072.985 1361.825 1112.159 1510.533 1259.099 1499.408 1277.106 1488.766 1294.332 1297 1207.255 1243.661 1182.606 1217.088 1218.881 1196.511 1240.187 1144.177 1285.905 1060.804 1358.738 895.194 1415.478 807.503 1441.923 800.088 1445.823 775.785 1457.627 751.378 1458.21 750.933 1458.221 750.486 1458.227 750.04 1458.229 Z M752.089 1407.073 C765.582 1407.101 780.203 1406.013 795.206 1403.065 1031.518 1335.618 1121.452 1202.668 1211.347 1100.456 1306.598 992.155 1258.582 928.525 1225.951 862.438 1218.001 846.34 1202.676 826.722 1182.921 805.792 1205.63 859.891 1226.066 951.94 1190.667 1018.151 1142.448 1108.343 1058.946 1185.284 957.333 1173.704 866.327 1163.332 1233.901 1144.524 1153.628 792.239 1151.892 784.619 1150.879 778.528 1150.472 773.817 1089.362 717.276 1008.08 659.298 958.728 639.022 882.173 607.573 838.199 621.724 755.167 627.103 753.514 627.336 751.833 627.435 750.124 627.388 750.116 627.388 750.107 627.388 750.099 627.388 748.49 627.419 746.905 627.325 745.345 627.106 662.29 621.729 618.313 607.571 541.747 639.024 492.395 659.3 411.114 717.278 350.003 773.819 349.596 778.53 348.583 784.621 346.847 792.241 266.574 1144.526 634.148 1163.333 543.142 1173.706 441.53 1185.286 358.028 1108.345 309.808 1018.153 274.41 951.942 294.846 859.893 317.554 805.794 297.8 826.724 282.474 846.342 274.525 862.44 241.893 928.527 193.878 992.155 289.128 1100.456 378.487 1202.059 467.885 1334.036 701.06 1401.854 713.729 1404.422 731.607 1407.032 752.089 1407.073 Z M590.828 1104.778 C514.393 1104.396 451.828 1044.26 414.591 974.612 359.699 871.939 466.441 694.442 445.359 786.962 378.682 1079.579 683.998 1095.204 608.406 1103.819 602.472 1104.496 596.608 1104.807 590.828 1104.778 Z M908.564 1104.778 C903.135 1104.766 897.635 1104.451 892.072 1103.817 816.479 1095.202 1121.793 1079.577 1055.117 786.96 1034.034 694.44 1140.778 871.938 1085.886 974.61 1048.65 1044.258 986.083 1104.394 909.648 1104.776 909.286 1104.778 908.926 1104.779 908.564 1104.778 Z M638.068 1028.849 C581.767 1028.567 535.681 984.271 508.253 932.97 467.821 857.342 546.444 726.598 530.915 794.747 481.803 1010.285 706.693 1021.796 651.013 1028.142 646.642 1028.64 642.326 1028.87 638.068 1028.849 Z M862.408 1028.847 C858.15 1028.868 853.833 1028.638 849.462 1028.14 793.782 1021.794 1018.673 1010.283 969.56 794.745 954.031 726.596 1032.654 857.34 992.222 932.968 964.794 984.269 918.708 1028.565 862.408 1028.847 Z M682.408 968.034 C646.101 967.882 616.381 939.324 598.697 906.247 572.642 857.512 623.309 773.259 613.302 817.175 581.653 956.072 726.576 963.488 690.695 967.577 688.192 967.862 685.714 968.013 683.267 968.032 682.98 968.035 682.693 968.035 682.408 968.034 Z M818.068 968.032 C817.782 968.033 817.495 968.033 817.208 968.03 814.762 968.011 812.286 967.86 809.783 967.575 773.901 963.486 918.822 956.072 887.173 817.175 877.166 773.259 927.834 857.51 901.779 906.245 884.094 939.323 854.374 967.88 818.068 968.032 Z" fill="#6272a4" fill-opacity="1" stroke="none"/>
+</svg>

src/assets/styles.css

@@ -2,6 +2,26 @@ body {
   background: #282a36;
 }
 
+header {
+  position: relative;
+  color: white;
+  height: 3rem;
+}
+
+.logo {
+  height: 2rem;
+  margin: .5rem;
+}
+
+.name {
+  position: absolute;
+  top: 0;
+  left: 3rem;
+  line-height: 3rem;
+  color: #6272a4;
+  margin: 0;
+}
+
 footer {
   color: #f1fa8c;
 }

src/index.html

@@ -1,17 +1,29 @@
 <html>
 <head>
   <title>Basking</title>
+  <link rel="stylesheet" type="text/css" href="./assets/vital.min.css" />
+  <link rel="stylesheet" type="text/css" href="./assets/styles.css" />
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
+  <link rel="manifest" href="./assets/favicon/site.webmanifest">
+  <link rel="shortcut icon" href="./assets/favicon/favicon.ico">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="msapplication-config" content="./assets/favicon/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
   <meta content='IE=edge' http-equiv='X-UA-Compatible' />
   <meta charset='UTF-8' />
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport' />
-  <link rel="stylesheet" type="text/css" href="./assets/vital.min.css" />
-  <link rel="stylesheet" type="text/css" href="./assets/styles.css" />
 </head>
 <body>
   <script src="./assets/axios.min.js"></script>
   <script src="./assets/vue.min.js"></script>
 
   <div id="app">
+    <header class="nav">
+      <img src="./assets/logo.svg" alt="" class="logo" />
+      <h1 class="name">Basking</h1>
+    </header>
     <main>
       <div class="autogrid">
         <section class="col">