Finish color and styling settings
This commit is contained in:
parent
84ac7b011e
commit
2a432588f9
@ -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" />
|
||||
|
||||
@ -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>
|
||||
|
||||
{#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>
|
||||
|
||||
{#if segment === '/portfolio'}
|
||||
<section class="page-navigation">
|
||||
<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}
|
||||
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.post-list > li:not(:last-child) {
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.see-all {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -81,10 +81,6 @@
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-shadow: 2px 2px 1px #c8c4b7; // TODO
|
||||
}
|
||||
|
||||
.name-tag {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
main {
|
||||
code,
|
||||
pre,
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'],
|
||||
:not(pre) > code[class*='language-'] {
|
||||
font-family: menlo, inconsolata, monospace;
|
||||
background-color: tint(@bg-color, 20%);
|
||||
padding: 0.2em 0.4em;
|
||||
color: lighten(@article-text-color, 15%);
|
||||
text-shadow: 0 1px white;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
123
static/prism.css
123
static/prism.css
@ -1,66 +1,86 @@
|
||||
/* 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 {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
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-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
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 {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f2f0;
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -70,7 +90,7 @@ pre[class*='language-'] {
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
@ -79,7 +99,7 @@ pre[class*='language-'] {
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
@ -87,39 +107,54 @@ pre[class*='language-'] {
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
color: #9a6e3a;
|
||||
/* This background color was intended by the author of this theme. */
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #dd4a68;
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token a {
|
||||
color: inherit;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user