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

Move global styles to layout

Browse Source
This commit is contained in:
Michal Vanko
2021-04-28 12:22:44 +02:00
parent 1c02d65020
commit 40eae4a8a5
8 changed files with 456 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -11,7 +11,7 @@
<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="/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"> -->

113
src/components/Nav.svelte
View File

@ -4,13 +4,76 @@
export let segment
</script>
<nav class="navigation-theme">
<section class="nav-main">
<ul>
<li>
<a class={classNames({ selected: segment === '/' })} href="/">
Introduction
</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
class={classNames({ selected: segment.startsWith('/blog') })}
href="/blog"
>
Blog
</a>
</li>
<li>
<a
class={classNames({ selected: segment.startsWith('/portfolio') })}
href="/portfolio"
>
Portfolio
</a>
</li>
</ul>
<aside class="logo-section">
<a class="logo" href=".">
<img src="/images/m-logo.png" alt="m logo" />
</a>
</aside>
</section>
{#if segment === 'portfolio'}
<!-- Move to portfolio layout -->
<section class="page-navigation">
<a href="portfolio#personal-information">About</a>
<a href="portfolio#skills">Skills</a>
<a href="portfolio#work-history">Work History</a>
<a href="portfolio#projects">Projects</a>
<a href="portfolio#education">Education</a>
</section>
{/if}
</nav>
<style>
@import '../styles/variables.module.less';
nav {
position: sticky;
top: -2.75em;
z-index: 1;
padding: 0.5em;
box-shadow: 0px 1px 3px #959595;
padding: 0.5em 0.5em 2em;
background: linear-gradient(
177.43deg,
@pinky -6.98%,
rgba(@pinky, 0) 54.88%
);
color: @menu-color;
}
a {
color: @menu-link-color;
&:hover {
color: @menu-link-hover-color;
}
}
nav a {
@ -55,49 +118,3 @@
margin: 0.3em auto 0;
}
</style>
<nav class="navigation-theme">
<section class="nav-main">
<ul>
<li>
<a class={classNames({ selected: segment === '/' })} href="/">
Introduction
</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
class={classNames({ selected: segment.startsWith('/blog') })}
href="/blog">
Blog
</a>
</li>
<li>
<a
class={classNames({ selected: segment.startsWith('/portfolio') })}
href="/portfolio">
Portfolio
</a>
</li>
</ul>
<aside class="logo-section">
<a class="logo" href=".">
<img src="/images/m-logo.png" alt="m logo" />
</a>
</aside>
</section>
{#if segment === 'portfolio'}
<!-- Move to portfolio layout -->
<section class="page-navigation">
<a href="portfolio#personal-information">About</a>
<a href="portfolio#skills">Skills</a>
<a href="portfolio#work-history">Work History</a>
<a href="portfolio#projects">Projects</a>
<a href="portfolio#education">Education</a>
</section>
{/if}
</nav>

5
src/routes/$layout.svelte
View File

@ -32,11 +32,12 @@
<Footer {latestPosts} />
</div>
<style>
<style global>
@import '../styles/global.module.less';
.app-content {
display: grid;
grid-template-rows: auto 1fr auto;
background: #f2f6f6;
min-height: 100vh;
}

138
src/styles/global.module.less Normal file
View File

@ -0,0 +1,138 @@
@import './variables.module.less';
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Cantarell, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 16px;
line-height: 1.65;
color: @article-text-color;
background: @bg-color;
min-height: 1vh;
}
h1,
h2,
h3,
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;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.3em;
}
a {
color: #2e2ed9;
text-decoration: none;
transition: 0.2s;
}
a:visited {
color: #9a2ed9;
}
a:hover {
color: #2e86d9;
text-decoration: underline;
}
code,
pre {
font-family: menlo, inconsolata, monospace;
font-size: 0.92em;
line-height: 1.24em;
background-color: #f0f0f0;
padding: 0.2em 0.4em;
color: #464646;
text-shadow: 0 1px white;
text-align: left;
white-space: pre-wrap;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
figure {
margin: 1em 0.5em;
text-align: center;
}
figcaption {
font-size: 0.7em;
font-style: italic;
}
blockquote {
margin: 0.2em;
border-left: 2px solid #2d3935;
padding: 0 0.4em 0 0.8em;
background: #eaefef;
border-radius: 3px;
box-shadow: 1px 1px 2px #d4dbdb;
}
p {
margin: 0.8em 0;
}
.tearkiss {
color: #16d0e7;
}
.tearkiss-new {
color: #16d0e7;
}
::selection {
background: #0dd0d0;
}
@media only screen and (min-width: 400px) {
body {
font-size: 18px;
}
}
@media only screen and (min-width: 700px) {
body {
font-size: 24px;
}
code,
pre {
font-size: 0.8em;
}
}

14
src/styles/variables.module.less Normal file
View File

@ -0,0 +1,14 @@
@tearkiss: #42a6f0;
@pinky: #fea6eb;
@light-cyan: #d8f6ff;
@midnight-blue: #171664;
@article-text-color: @midnight-blue;
@menu-color: @midnight-blue;
@menu-link-color: @midnight-blue;
@menu-link-hover-color: lighten(@midnight-blue, 30%);
@footer-visited-link-color: darken(@pinky, 70%);
@bg-color: lighten(@light-cyan, 5%, relative);