From b4ffdef43dd10c6c0fea2c0eebb17c788456ca7c Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Thu, 29 Apr 2021 22:24:45 +0200
Subject: [PATCH] Lots of CSS changes to headers content structure and logo

---
 ...tomated-testing-javascript-applications.md |  9 +-
 email-signature.html                          | 11 +--
 package-lock.json                             | 17 ++++
 package.json                                  |  1 +
 src/app.html                                  |  6 +-
 src/components/Footer.svelte                  | 86 +++++++++----------
 src/components/Nav.svelte                     | 19 ++--
 src/markdown/renderer-extension.ts            | 10 +--
 src/routes/$layout.svelte                     | 43 +++++++++-
 src/routes/blog/index.svelte                  | 57 ++++++------
 src/routes/index.svelte                       |  4 -
 src/routes/portfolio/index.svelte             | 69 ++++++++-------
 src/styles/global.module.less                 | 36 ++++++--
 src/styles/variables.module.less              | 14 ++-
 static/admin/index.html                       |  2 +
 static/m-logo-192.png                         |  3 +
 static/m-logo-512.png                         |  3 +
 static/m-logo.svg                             |  4 +
 static/manifest.json                          |  9 +-
 19 files changed, 252 insertions(+), 151 deletions(-)
 create mode 100644 static/m-logo-192.png
 create mode 100644 static/m-logo-512.png
 create mode 100644 static/m-logo.svg

diff --git a/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md b/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md
index 42a01f5..0d34ad1 100644
--- a/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md
+++ b/_posts/blog/dev-2021-04-05-automated-testing-javascript-applications.md
@@ -47,7 +47,7 @@ A test consists of a description of the requirement that **should** be satisfied
 ```javascript
 describe('Location formatter', () => {
 
-  it('should return formatted location based on a passed primaryLocation', () => {
+  it('should format location based on a passed primaryLocation', () => {
     const formattedLocation = formatLocation({
       primaryLocation: 'Pennsylvania',
       city: null,
@@ -56,7 +56,7 @@ describe('Location formatter', () => {
     expect(formattedLocation).toBe('Pennsylvania, US')
   })
   
-  it('should return formatted location based on a passed city', () => {
+  it('should format location based on a passed city', () => {
     const formattedLocation = formatLocation({
       primaryLocation: null,
       city: 'Svidník',
@@ -65,7 +65,7 @@ describe('Location formatter', () => {
     expect(formattedLocation).toBe('Svidník, SK')
   })
 
-  it('should return formatted location based on a passed primaryLocation with city being ignored', () => {
+  it('should format location based on a passed primaryLocation with city being ignored', () => {
     const formattedLocation = formatLocation({
       primaryLocation: 'Pennsylvania',
       city: 'Košice',
@@ -241,7 +241,8 @@ It's also good user experience testing when tests require validation errors to b
 
 ```javascript
 it('should display validation errors', () => {
-  cy.get('[data-test-id="first-name-input"]').type('{enter}') // Form is submitted with `enter`
+  // Form is submitted with `enter`
+  cy.get('[data-test-id="first-name-input"]').type('{enter}')
 
   // All validation errors should be visible
   cy.get('[data-test-id="first-name-hint"]'.FIRST_NAME_HINT)
diff --git a/email-signature.html b/email-signature.html
index a2a5ebc..94b5ce8 100644
--- a/email-signature.html
+++ b/email-signature.html
@@ -11,21 +11,22 @@
           style="vertical-align: center; width: 80px"
         >
           <img
-            src="https://michalvanko.dev/images/m-logo.png"
+            src="https://michalvanko.dev/m-logo.svg"
             alt="m-logo"
             title="Logo"
-            style="height: 46px;"
+            height="46px"
+            width="46px"
           />
         </td>
 
         <td
-          style="color: #212138; font-size: 12px; padding-bottom: 4px; padding-left: 4px;"
+          style="color: #171664; font-size: 12px; padding-bottom: 4px; padding-left: 4px;"
         >
           <span>Michal Vanko</span>
         </td>
       </tr>
       <tr>
-        <td style="color: #42436a; font-size: 11px; padding-left: 4px;">
+        <td style="color: #171664; font-size: 11px; padding-left: 4px;">
           <span>Software Architect and Consultant</span>
         </td>
       </tr>
@@ -34,7 +35,7 @@
           <a
             target="_blank"
             href="https://michalvanko.dev"
-            style="color: #2e2ed9"
+            style="color: #42a6f0"
             >https://michalvanko.dev</a
           >
         </td>
diff --git a/package-lock.json b/package-lock.json
index 8dbf6cb..d9fee0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "feed": "^4.2.2",
         "front-matter": "^4.0.2",
         "marked": "^2.0.3",
+        "modern-normalize": "^1.0.0",
         "prismjs": "^1.23.0",
         "ramda": "^0.27.1"
       },
@@ -2470,6 +2471,17 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/modern-normalize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
+      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mri": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
@@ -5392,6 +5404,11 @@
       "optional": true,
       "peer": true
     },
+    "modern-normalize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
+      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw=="
+    },
     "mri": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
diff --git a/package.json b/package.json
index 92a06f8..7d7d8c1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "feed": "^4.2.2",
     "front-matter": "^4.0.2",
     "marked": "^2.0.3",
+    "modern-normalize": "^1.0.0",
     "prismjs": "^1.23.0",
     "ramda": "^0.27.1"
   },
diff --git a/src/app.html b/src/app.html
index a87e74c..8562483 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,14 +11,12 @@
     <link rel="alternate" type="application/rss+xml" title="RSS feed for latest posts" href="https://michalvanko.dev/feed.xml" />
     <link rel="alternate" title="JSON feed for latest posts" type="application/json" href="https://michalvanko.dev/feed.json" />
 
-    <!-- <link rel="stylesheet" href="/global.css" /> -->
     <link rel="stylesheet" href="/print.css" media="print" />
     <link rel="stylesheet" href="/fonts.css" />
-    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet">  -->
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="icon" type="image/svg+xml" href="/m-svgfavicon-192x192.svg" />
-    <link rel="icon" type="image/png" href="/m-svgfavicon-192x192.png" />
+    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
+    <link rel="icon" type="image/png" href="/m-logo-192.png" />
     <!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
     %svelte.head%
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index d819a4c..0909777 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -115,18 +115,10 @@
 <style>
   @import '../styles/variables.module.less';
 
-  h3 {
-    font: inherit;
-    font-weight: bold;
-    font-size: 1.15em;
-    text-shadow: inherit;
-    color: #eae9be;
-    margin: 0;
-  }
-
   .site-footer {
     font-size: 0.9em;
-    padding: 0.4em;
+    padding: 2em 0.8em 0em;
+    color: @menu-color;
 
     background: radial-gradient(
       160% 100% at 100% 100%,
@@ -134,24 +126,45 @@
       fade(@menu-bg-color, 0) 100%
     );
 
-    @media (min-width: 700px) {
+    @media (min-width: @media-m) {
       background: radial-gradient(
         140% 100% at 100% 100%,
         @menu-bg-color 48%,
         fade(@menu-bg-color, 0) 100%
       );
     }
+
+    @media (min-width: @media-l) {
+      font-size: 0.8em;
+    }
+  }
+
+  h3 {
+    font: inherit;
+    font-weight: bold;
+    font-size: 1.15em;
+    text-shadow: inherit;
+    color: @menu-color;
+    margin: 0;
   }
 
   .lists {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
+    display: grid;
+    justify-items: center;
     text-align: center;
+    max-width: @media-max;
+    column-gap: 1em;
+    margin: auto;
+
+    @media only screen and (min-width: @media-l) {
+      grid-template-columns: auto auto auto;
+      justify-items: start;
+      text-align: start;
+    }
   }
 
   .lists > section {
-    margin-bottom: 2em;
+    margin: 1em 0;
   }
 
   .no-wrap {
@@ -170,6 +183,10 @@
 
   .lists li li {
     font-size: 0.9em;
+
+    @media only screen and (min-width: @media-l) {
+      font-size: 0.8em;
+    }
   }
 
   .social-links a span {
@@ -219,16 +236,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @media only screen and (min-width: @media-l) {
+      justify-content: start;
+    }
   }
 
   .bottom-line {
     display: flex;
     justify-content: space-between;
-    margin-top: 1em;
+    margin: 1em auto 0.4em;
+    max-width: @media-max;
   }
 
   .date {
     font-size: 0.7em;
+    white-space: nowrap;
   }
 
   .latest-posts li a:visited:not(:hover) {
@@ -240,33 +263,8 @@
   }
 
   hr {
-    color: #86856f;
-    margin: 0.2em 0;
-  }
-
-  @media only screen and (min-width: 900px) {
-    .site-footer {
-      font-size: 0.8em;
-    }
-
-    .lists li li {
-      font-size: 0.8em;
-    }
-
-    .lists {
-      flex-direction: row;
-      text-align: start;
-      max-width: 900px;
-      margin: auto;
-    }
-
-    .social-links a {
-      justify-content: start;
-    }
-
-    .bottom-line {
-      max-width: 900px;
-      margin: auto;
-    }
+    color: fade(@menu-color, 14%);
+    margin: 0.75em 0.2em;
+    border-width: 1px 0 0;
   }
 </style>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 60c3469..db2214d 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -35,7 +35,7 @@
 
     <aside class="logo-section">
       <a class="logo" href=".">
-        <img src="/images/m-logo.png" alt="m logo" />
+        <img src="/m-logo.svg" alt="m logo" />
       </a>
     </aside>
   </section>
@@ -81,17 +81,22 @@
 
   .nav-main {
     display: flex;
-    max-width: 900px;
+    max-width: @media-max;
     margin: 0 auto;
   }
 
-  .logo-section,
-  .logo-section img {
-    height: 1em;
+  .logo-section {
+    line-height: 0px;
   }
 
-  .logo-section img {
-    filter: invert(1);
+  .logo {
+    padding: 0;
+    display: block;
+    max-height: 1em;
+  }
+
+  .logo img {
+    height: 1.8em;
   }
 
   ul {
diff --git a/src/markdown/renderer-extension.ts b/src/markdown/renderer-extension.ts
index 87d412e..5169cbe 100644
--- a/src/markdown/renderer-extension.ts
+++ b/src/markdown/renderer-extension.ts
@@ -23,13 +23,13 @@ export const renderer = {
   image(href: string, title: string, text: string) {
     const figcaption = title ? `<figcaption>${title}</figcaption>` : ''
     const isLocal = !href.startsWith('http')
-    const src = isLocal ? getNFResize(href, 640, 640) : href
+    const src = isLocal ? getNFResize(href, 800, 800) : href
     const srcset = isLocal
-      ? `srcset="${getNFResize(href, 640, 640)}, ${getNFResize(
+      ? `srcset="${getNFResize(href, 800, 800)}, ${getNFResize(
           href,
-          960,
-          960
-        )} 1.5x, ${getNFResize(href, 1280, 1280)} 2x"`
+          1200,
+          1200
+        )} 1.5x, ${getNFResize(href, 1600, 1600)} 2x"`
       : ''
 
     return `
diff --git a/src/routes/$layout.svelte b/src/routes/$layout.svelte
index 9a0f815..f5770d1 100644
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -43,9 +43,44 @@
 
   main {
     position: relative;
-    max-width: 34em;
-    padding: 2em;
-    margin: 0 auto;
-    box-sizing: border-box;
+    max-width: calc(100vw - 1em);
+    padding: 1.4em;
+
+    @media (min-width: @media-l) {
+      /* max-width: 34em; */
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol,
+    figure,
+    img,
+    blockquote {
+      max-width: 42rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    h1 {
+      max-width: 52rem;
+    }
+    h2 {
+      max-width: 46rem;
+    }
+    pre,
+    pre[class*='language-'] {
+      max-width: 48rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    figure {
+      max-width: @max-image-size;
+    }
   }
 </style>
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
index b085d6f..70ace9a 100644
--- a/src/routes/blog/index.svelte
+++ b/src/routes/blog/index.svelte
@@ -1,48 +1,30 @@
 <script context="module" lang="typescript">
   /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
-  export function load({ fetch, page: { params, query }}) {
+   * @type {import('@sveltejs/kit').Load}
+   */
+  export function load({ fetch, page: { params, query } }) {
     const blogQuery = query
       ? '?' +
         Object.entries(query)
-          .map(q => q.join('='))
+          .map((q) => q.join('='))
           .join('&')
       : ''
     return fetch(`blog.json${blogQuery}`)
-      .then(r => r.json())
-      .then(posts => {
-        return {props: { posts, query }}
+      .then((r) => r.json())
+      .then((posts) => {
+        return { props: { posts, query } }
       })
   }
 </script>
 
-<script lang="typescript"> 
+<script lang="typescript">
   import ArticleFooter from '../../components/blog/article-footer.svelte'
-  import type { PostContent } from './_content';
+  import type { PostContent } from './_content'
 
   export let posts: PostContent[]
-  export let query 
+  export let query
 </script>
 
-<style>
-  .post-list {
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    list-style: none;
-  }
-
-  .post-list > li:not(:last-child) {
-    margin-bottom: 2em;
-  }
-
-  .see-all {
-    text-align: end;
-    margin-top: -1.5em;
-  }
-</style>
-
 <svelte:head>
   <title>My blog @michalvankodev</title>
 </svelte:head>
@@ -78,7 +60,24 @@
         </header>
         {@html post.preview}
       </article>
-      <ArticleFooter post={post} />
+      <ArticleFooter {post} />
     </li>
   {/each}
 </ul>
+
+<style>
+  .post-list {
+    padding: 0;
+    line-height: 1.5;
+    list-style: none;
+  }
+
+  .post-list > li:not(:last-child) {
+    margin-bottom: 2em;
+  }
+
+  .see-all {
+    text-align: end;
+    margin-top: -1.5em;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9138672..3056dc0 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -35,10 +35,6 @@
     margin: 0 auto;
   }
 
-  figure {
-    margin: 0 0 1em 0;
-  }
-
   img {
     width: 100%;
     margin: 0 0 1em 0;
diff --git a/src/routes/portfolio/index.svelte b/src/routes/portfolio/index.svelte
index 7e8ef53..7503238 100644
--- a/src/routes/portfolio/index.svelte
+++ b/src/routes/portfolio/index.svelte
@@ -1,14 +1,14 @@
 <script context="module">
   /**
-	 * @type {import('@sveltejs/kit').Load}
-	 */
+   * @type {import('@sveltejs/kit').Load}
+   */
   export async function load({ fetch }) {
     const res = await fetch('portfolio.json')
     const content = await res.json()
     return {
       props: {
         content,
-      }
+      },
     }
   }
 </script>
@@ -20,41 +20,13 @@
   export let content
 </script>
 
-<style>
-  :global([id])::before {
-    content: '';
-    display: block;
-    height: 5em;
-    margin-top: -5em;
-    visibility: hidden;
-  }
-
-  section[id] {
-    margin-top: 2em;
-  }
-
-  h1 {
-    text-shadow: 2px 2px 1px #c8c4b7;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin: 1.5em 0;
-  }
-</style>
-
 <svelte:head>
   <title>{content.title}</title>
 </svelte:head>
 
-<h1>Michal Vanko</h1>
+<h1 class="name-tag">Michal Vanko</h1>
 
-<h2>Software Developer</h2>
+<h2 class="name-tag">Software Architect and Consultant</h2>
 
 <section id="personal-information">
   {@html content.body}
@@ -95,3 +67,34 @@
     {/each}
   </ul>
 </section>
+
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height: 5em;
+    margin-top: -5em;
+    visibility: hidden;
+  }
+
+  section[id] {
+    margin-top: 2em;
+  }
+
+  h1 {
+    text-shadow: 2px 2px 1px #c8c4b7; // TODO
+  }
+
+  .name-tag {
+    text-align: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin: 1.5em 0;
+  }
+</style>
diff --git a/src/styles/global.module.less b/src/styles/global.module.less
index 529604e..e17be53 100644
--- a/src/styles/global.module.less
+++ b/src/styles/global.module.less
@@ -1,3 +1,4 @@
+@import '../../node_modules/modern-normalize/modern-normalize.css';
 @import './variables.module.less';
 
 html {
@@ -22,19 +23,21 @@ h4,
 h5,
 h6 {
   margin: 1em 0 0.5em 0;
-  font-weight: 200;
   line-height: 1.2;
   text-shadow: 1px 1px 1px #c6c4b7;
   color: #212138;
   letter-spacing: -0.01em;
+  font-weight: 500;
 }
 
 h1 {
   font-size: 2.5em;
+  font-weight: 800;
 }
 
 h2 {
   font-size: 1.7em;
+  font-weight: 700;
 }
 
 h3 {
@@ -70,7 +73,7 @@ pre {
   color: #464646;
   text-shadow: 0 1px white;
   text-align: left;
-  white-space: pre-wrap;
+  white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
@@ -85,6 +88,14 @@ pre {
   hyphens: none;
 }
 
+code {
+  white-space: pre-line;
+
+  pre & {
+    white-space: pre;
+  }
+}
+
 figure {
   margin: 1em 0.5em;
   text-align: center;
@@ -97,17 +108,28 @@ figcaption {
 
 blockquote {
   margin: 0.2em;
-  border-left: 2px solid #2d3935;
-  padding: 0 0.4em 0 0.8em;
-  background: #eaefef;
+  border-left: 2px solid #2d3935; //TODO
+  padding: 0.2em 0.4em 0.2em 0.8em;
+  background: darken(@bg-color, 5%);
   border-radius: 3px;
   box-shadow: 1px 1px 2px #d4dbdb;
+  font-size: 0.9em;
+  overflow: auto;
+
+  p {
+    margin: 0.2em 0;
+  }
 }
 
 p {
   margin: 0.8em 0;
 }
 
+b,
+strong {
+  font-weight: 600;
+}
+
 .tearkiss {
   color: #16d0e7;
 }
@@ -120,13 +142,13 @@ p {
   background: #0dd0d0;
 }
 
-@media only screen and (min-width: 400px) {
+@media only screen and (min-width: @media-s) {
   body {
     font-size: 18px;
   }
 }
 
-@media only screen and (min-width: 700px) {
+@media only screen and (min-width: @media-m) {
   body {
     font-size: 24px;
   }
diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
index 92cafe0..f2c92b9 100644
--- a/src/styles/variables.module.less
+++ b/src/styles/variables.module.less
@@ -2,14 +2,22 @@
 @pinky: #fea6eb;
 @light-cyan: #d8f6ff;
 @midnight-blue: #171664;
+@french-violet: #7332c3;
+@sacramento-green: #003d2d;
 
 @article-text-color: @midnight-blue;
-@menu-color: @midnight-blue;
+@menu-color: @sacramento-green;
 
-@menu-link-color: @midnight-blue;
-@menu-link-hover-color: lighten(@midnight-blue, 30%);
+@menu-link-color: @sacramento-green;
+@menu-link-hover-color: lighten(@menu-link-color, 30%);
 
 @footer-visited-link-color: darken(@pinky, 70%);
 
 @bg-color: lighten(@light-cyan, 5%, relative);
 @menu-bg-color: fade(@pinky, 67%);
+
+@media-l: 1000px;
+@media-m: 700px;
+@media-max: 1140px;
+@media-s: 400px;
+@max-image-size: 800px;
diff --git a/static/admin/index.html b/static/admin/index.html
index c0c12fa..92c96ac 100644
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
+  <link rel="icon" type="image/png" href="/m-logo-192.png" />
   <title>Content Manager</title>
 </head>
 <body>
diff --git a/static/m-logo-192.png b/static/m-logo-192.png
new file mode 100644
index 0000000..906ef53
--- /dev/null
+++ b/static/m-logo-192.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d09b4bf7c70c9b3adee7a13db8e23cd77165a8f12b447fb6ff13d5354fc2dc90
+size 6171
diff --git a/static/m-logo-512.png b/static/m-logo-512.png
new file mode 100644
index 0000000..69de2fa
--- /dev/null
+++ b/static/m-logo-512.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:322de106d04b77a058952238ab1c8b0fe98073f18a3fe7cac33d41a560654607
+size 17300
diff --git a/static/m-logo.svg b/static/m-logo.svg
new file mode 100644
index 0000000..d4e1bbf
--- /dev/null
+++ b/static/m-logo.svg
@@ -0,0 +1,4 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M477 256C477 312.348 476.994 354.269 473.509 385.636C470.02 417.033 463.118 436.975 450.047 450.047C436.975 463.118 417.033 470.02 385.636 473.509C354.269 476.994 312.348 477 256 477C199.652 477 157.731 476.994 126.364 473.509C94.9671 470.02 75.0246 463.118 61.9534 450.047C48.8822 436.975 41.9797 417.033 38.4912 385.636C35.0059 354.269 35 312.348 35 256C35 199.652 35.0059 157.731 38.4912 126.364C41.9797 94.9671 48.8822 75.0246 61.9534 61.9534C75.0246 48.8822 94.9671 41.9797 126.364 38.4912C157.731 35.0059 199.652 35 256 35C312.348 35 354.269 35.0059 385.636 38.4912C417.033 41.9797 436.975 48.8822 450.047 61.9534C463.118 75.0246 470.02 94.9671 473.509 126.364C476.994 157.731 477 199.652 477 256Z" fill="#D8F6FF" stroke="#32A8EB" stroke-width="8" stroke-linejoin="round"/>
+<path d="M347.694 326.566H360V235.186C360 203.566 340.791 185 310.176 185C290.066 185 270.257 193.413 256.15 208.208C248.046 193.123 232.739 185 212.629 185C194.62 185 177.212 191.382 163.405 202.696L161.004 187.031H152V326.566H164.306V212.269C176.912 201.535 193.12 195.153 209.628 195.153C234.84 195.153 249.847 210.528 249.847 236.927V326.566H262.153V235.186C262.153 227.934 261.253 221.262 259.152 215.46C272.058 202.696 289.466 195.153 307.175 195.153C332.687 195.153 347.694 210.528 347.694 236.927V326.566Z" fill="#32A8EB"/>
+</svg>
diff --git a/static/manifest.json b/static/manifest.json
index 1d08401..bfaa815 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -7,14 +7,19 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "m-svgfavicon-192x192.svg",
+      "src": "m-logo.svg",
       "sizes": "192x192",
       "type": "image/svg+xml"
     },
     {
-      "src": "images/m-svgfavicion-192x192.png",
+      "src": "images/m-logo-192.png",
       "sizes": "192x192",
       "type": "image/png"
+    },
+    {
+      "src": "images/m-logo-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }