Lots of CSS changes to headers content structure and logo

This commit is contained in:
Michal Vanko 2021-04-29 22:24:45 +02:00
parent e385faf6dc
commit b4ffdef43d
19 changed files with 252 additions and 151 deletions

View File

@ -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)

View File

@ -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>

17
package-lock.json generated
View File

@ -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",

View File

@ -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"
},

View File

@ -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%

View File

@ -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>

View File

@ -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 {

View File

@ -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 `

View File

@ -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>

View File

@ -6,12 +6,12 @@
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 => {
.then((r) => r.json())
.then((posts) => {
return { props: { posts, query } }
})
}
@ -19,30 +19,12 @@
<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
</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>

View File

@ -35,10 +35,6 @@
margin: 0 auto;
}
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
margin: 0 0 1em 0;

View File

@ -8,7 +8,7 @@
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>

View File

@ -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;
}

View File

@ -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;

View File

@ -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>

BIN
static/m-logo-192.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
static/m-logo-512.png (Stored with Git LFS) Normal file

Binary file not shown.

4
static/m-logo.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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"
}
]
}