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" > m-logo Michal Vanko - + Software Architect and Consultant @@ -34,7 +35,7 @@ https://michalvanko.dev 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 @@ - - - - + + %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 @@ 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 @@ @@ -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 ? `
${title}
` : '' 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; + } } 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 @@ - - - My blog @michalvankodev @@ -78,7 +60,24 @@ {@html post.preview} - + {/each} + + 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 @@ @@ -20,41 +20,13 @@ export let content - - {content.title} -

Michal Vanko

+

Michal Vanko

-

Software Developer

+

Software Architect and Consultant

{@html content.body} @@ -95,3 +67,34 @@ {/each}
+ + 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 @@ + + Content Manager 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 @@ + + + + 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" } ] }