michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of CSS changes to headers content structure and logo

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.html
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%

86
src/components/Footer.svelte
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>

19
src/components/Nav.svelte
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 {

10
src/markdown/renderer-extension.ts
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 `

43
src/routes/$layout.svelte
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>

57
src/routes/blog/index.svelte
View File

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

4
src/routes/index.svelte
View File

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

69
src/routes/portfolio/index.svelte
View File

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

36
src/styles/global.module.less
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;
}

14
src/styles/variables.module.less
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;