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

Finish color and styling settings

Browse Source
This commit is contained in:
Michal Vanko 2021-05-05 20:31:52 +02:00
parent 84ac7b011e
commit 2a432588f9
11 changed files with 207 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/fonts.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/prism.css" />
<link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
<link rel="icon" type="image/png" href="/m-logo-192.png" />

59
src/components/Nav.svelte
View File

@ -4,7 +4,7 @@
export let segment
</script>
<nav class="navigation-theme">
<nav>
<section class="nav-main">
<ul>
<li>
@ -39,22 +39,32 @@
</a>
</aside>
</section>
</nav>
{#if segment === 'portfolio'}
<!-- Move to portfolio layout -->
{#if segment === '/portfolio'}
<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>
<div class="page-navigation-links">
<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>
</div>
</section>
{/if}
</nav>
<style>
@import '../styles/variables.module.less';
a {
color: @menu-link-color;
padding: 0.4em 0.5em;
&:hover {
color: @menu-link-hover-color;
}
}
nav {
padding: 0.5em 0.5em 1em;
@ -65,18 +75,7 @@
);
color: @menu-color;
}
a {
color: @menu-link-color;
&:hover {
color: @menu-link-hover-color;
}
}
nav a {
padding: 0.4em 0.5em;
text-shadow: @menu-link-text-shadow;
}
.nav-main {
@ -111,14 +110,22 @@
}
a.selected {
text-shadow: 0px 0px 1px;
text-shadow: @menu-active-link-text-shadow;
}
.page-navigation {
position: sticky;
top: 0px;
z-index: 1;
width: 100%;
font-size: 0.86em;
border-top: 1px solid #65624f;
padding-top: 0.4em;
max-width: 900px;
margin: 0.3em auto 0;
padding: 0.3em;
background: @bg-color;
box-shadow: 0px 0.5em 0.5em @bg-color;
}
.page-navigation-links {
max-width: @media-l;
margin: 0 auto;
}
</style>

67
src/components/blog/article-footer.svelte
View File

@ -1,41 +1,10 @@
<script lang="typescript">
import { format } from 'date-fns'
import type { PostContent } from '../../routes/blog/_content';
import type { PostContent } from '../../routes/blog/_content'
export let post: PostContent
</script>
<style>
.tags-list {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
.tags-list li {
display: inline;
font-style: italic;
}
.lighten {
color: #595a8f;
}
time {
font-style: italic;
}
footer {
display: flex;
font-size: 0.85em;
justify-content: space-between;
padding-top: 0.2em;
margin-top: 0.4em;
border-top: 1px solid #c0c1e1;
}
</style>
<footer>
<div class="article-tags">
{#if post.tags.length > 0}
@ -56,3 +25,37 @@
</time>
</div>
</footer>
<style>
@import '../../styles/variables.module.less';
.tags-list {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
.tags-list li {
display: inline;
font-style: italic;
}
.lighten {
color: tint(@article-text-color, 25%);
}
time {
white-space: nowrap;
font-style: italic;
}
footer {
display: flex;
font-size: 0.8em;
justify-content: space-between;
padding-top: 0.6em;
margin-top: 1em;
border-top: 1px solid fade(desaturate(@tearkiss, 50%), 40%);
}
</style>

26
src/routes/$layout.svelte
View File

@ -43,12 +43,8 @@
main {
position: relative;
max-width: calc(100vw - 1em);
padding: 1.4em;
@media (min-width: @media-l) {
/* max-width: 34em; */
}
max-width: 100vw;
padding: 1.2em;
h1,
h2,
@ -61,7 +57,9 @@
ol,
figure,
img,
blockquote {
blockquote,
iframe,
footer {
max-width: 42rem;
margin-left: auto;
margin-right: auto;
@ -82,5 +80,19 @@
figure {
max-width: @max-image-size;
}
iframe {
max-width: 46rem;
display: block;
}
footer {
max-width: 52rem;
}
img {
width: 100%;
margin: 0 0 1em 0;
border-radius: 5px;
box-shadow: @content-box-shadow;
}
}
</style>

18
src/routes/blog/[slug].svelte
View File

@ -33,7 +33,6 @@
<svelte:head>
<title>{post.title}</title>
<link rel="stylesheet" href="/prism.css" />
</svelte:head>
<h1>{post.title}</h1>
@ -44,6 +43,8 @@
<ArticleFooter {post} />
<style>
@import '../../styles/variables.module.less';
/*
By default, CSS is locally scoped to the component,
and any unused styles are dead-code-eliminated.
@ -52,18 +53,6 @@
so we have to use the :global(...) modifier to target
all elements inside .content
*/
.content :global(pre) {
background-color: #f9f9f9;
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
padding: 0.5em;
border-radius: 4px;
overflow-x: auto;
}
.content :global(pre) :global(code) {
background-color: transparent;
/* padding: 0; */
}
.content :global(ul) {
line-height: 1.5;
@ -74,10 +63,7 @@
}
.content :global(img) {
max-width: 100%;
max-height: 640px;
border-radius: 5px;
box-shadow: 0px 0px 8px 1px #2d3935;
}
.content :global(img:only-child) {

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

@ -73,7 +73,7 @@
}
.post-list > li:not(:last-child) {
margin-bottom: 2em;
margin-bottom: 3em;
}
.see-all {

7
src/routes/index.svelte
View File

@ -35,13 +35,6 @@
margin: 0 auto;
}
img {
width: 100%;
margin: 0 0 1em 0;
border-radius: 5px;
box-shadow: 0px 0px 8px 1px #2d3935;
}
p {
margin: 1em auto;
}

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

@ -81,10 +81,6 @@
margin-top: 2em;
}
h1 {
text-shadow: 2px 2px 1px #c8c4b7; // TODO
}
.name-tag {
text-align: center;
}

51
src/styles/global.module.less
View File

@ -24,7 +24,7 @@ h5,
h6 {
margin: 1em 0 0.5em 0;
line-height: 1.2;
// text-shadow: 1px 1px 1px #c6c4b7;
text-shadow: @header-text-shadow;
color: @header-color;
letter-spacing: -0.01em;
font-weight: 500;
@ -50,7 +50,7 @@ h4 {
a {
text-decoration: none;
transition: color 2.2s;
transition: color 0.2s;
&:link {
color: @link-color;
@ -70,29 +70,24 @@ a {
}
}
main {
code,
pre {
pre,
code[class*='language-'],
pre[class*='language-'],
:not(pre) > code[class*='language-'] {
font-family: menlo, inconsolata, monospace;
font-size: 0.92em;
line-height: 1.24em;
background-color: #f0f0f0;
background-color: tint(@bg-color, 20%);
padding: 0.2em 0.4em;
color: #464646;
color: lighten(@article-text-color, 15%);
text-shadow: 0 1px white;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.4em;
}
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
code,
code[class*='language-'] {
font-size: 0.84em;
}
}
code {
@ -114,12 +109,13 @@ figcaption {
}
blockquote {
line-height: 1.5em;
margin: 0.2em;
border-left: 2px solid #2d3935; //TODO
border-left: 2px solid @tearkiss;
padding: 0.2em 0.4em 0.2em 0.8em;
background: darken(@bg-color, 3%, relative);
background: darken(@bg-color, 2%, relative);
border-radius: 3px;
box-shadow: 1px 1px 2px #d4dbdb;
box-shadow: @content-box-shadow;
font-size: 0.9em;
overflow: auto;
@ -130,6 +126,7 @@ blockquote {
p {
margin: 0.8em 0;
// text-shadow: @text-shadow;
}
b,
@ -137,14 +134,6 @@ strong {
font-weight: 600;
}
.tearkiss {
color: #16d0e7;
}
.tearkiss-new {
color: #16d0e7;
}
::selection {
background: #0dd0d0;
}

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

@ -5,8 +5,10 @@
@french-violet: #7332c3;
@sacramento-green: #003d2d;
@rose-bonbon: #ff499e;
@midnight: #660066;
@article-text-color: @midnight-blue;
@article-text-color: desaturate(@midnight-blue, 30%);
@text-shadow: 0.02em 0.02em 0.03em fade(@tearkiss, 20%);
@link-color: #127aff;
@link-hover-color: @tearkiss;
@link-visited-color: saturate(@french-violet, 30%, relative);
@ -15,15 +17,19 @@
@menu-color: @sacramento-green;
@menu-link-color: #660066;
@menu-link-color: @midnight;
@menu-link-hover-color: lighten(@menu-link-color, 10%);
@menu-link-text-shadow: 0.02em 0.02em 0.03em fade(@french-violet, 30%);
@menu-active-link-text-shadow: 0.01em 0.01em 0.05em fade(@french-violet, 90%);
@header-color: darken(@french-violet, 35%, relative);
@header-text-shadow: 0.015em 0.015em 0.02em fade(@midnight, 40%);
@footer-visited-link-color: darken(@pinky, 70%, relative);
@bg-color: tint(@light-cyan, 70%);
@menu-bg-color: fade(@pinky, 45%);
@menu-bg-color: fade(@tearkiss, 40%);
@content-box-shadow: 0px 0px 2px 1px desaturate(@tearkiss, 50%);
@media-l: 1000px;
@media-m: 700px;

81
static/prism.css
View File

@ -1,50 +1,70 @@
/* PrismJS 1.17.1
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+typescript&plugins=autolinker */
/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+diff+rust+typescript+yaml&plugins=autolinker+diff-highlight */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*='language-'] {
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
@ -59,8 +79,8 @@ pre[class*='language-'] {
color: #999;
}
.namespace {
opacity: 0.7;
.token.namespace {
opacity: .7;
}
.token.property,
@ -88,7 +108,8 @@ pre[class*='language-'] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
@ -99,7 +120,7 @@ pre[class*='language-'] {
.token.function,
.token.class-name {
color: #dd4a68;
color: #DD4A68;
}
.token.regex,
@ -123,3 +144,17 @@ pre[class*='language-'] {
.token a {
color: inherit;
}
pre.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight .token.deleted:not(.prefix) {
background-color: rgba(255, 0, 0, .1);
color: inherit;
display: block;
}
pre.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight .token.inserted:not(.prefix) {
background-color: rgba(0, 255, 128, .1);
color: inherit;
display: block;
}