Finish color and styling settings

src/app.html

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

src/components/Nav.svelte

@@ -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;
-  }
+    text-shadow: @menu-link-text-shadow;
-
-  a {
-    color: @menu-link-color;
-
-    &:hover {
-      color: @menu-link-hover-color;
-    }
-  }
-
-  nav a {
-    padding: 0.4em 0.5em;
   }
 
   .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: 0.3em;
-    padding-top: 0.4em;
+    background: @bg-color;
-    max-width: 900px;
+    box-shadow: 0px 0.5em 0.5em @bg-color;
-    margin: 0.3em auto 0;
+  }
+
+  .page-navigation-links {
+    max-width: @media-l;
+    margin: 0 auto;
   }
 </style>

src/components/blog/article-footer.svelte

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

src/routes/$layout.svelte

@@ -43,12 +43,8 @@
 
   main {
     position: relative;
-    max-width: calc(100vw - 1em);
+    max-width: 100vw;
-    padding: 1.4em;
+    padding: 1.2em;
-
-    @media (min-width: @media-l) {
-      /* max-width: 34em; */
-    }
 
     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>

src/routes/blog/[slug].svelte

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

src/routes/blog/index.svelte

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

src/routes/index.svelte

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

src/routes/portfolio/index.svelte

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

src/styles/global.module.less

@@ -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,
+main {
-pre {
+  code,
-  font-family: menlo, inconsolata, monospace;
+  pre,
-  font-size: 0.92em;
+  code[class*='language-'],
-  line-height: 1.24em;
+  pre[class*='language-'],
-  background-color: #f0f0f0;
+  :not(pre) > code[class*='language-'] {
-  padding: 0.2em 0.4em;
+    font-family: menlo, inconsolata, monospace;
-  color: #464646;
+    background-color: tint(@bg-color, 20%);
-  text-shadow: 0 1px white;
+    padding: 0.2em 0.4em;
-  text-align: left;
+    color: lighten(@article-text-color, 15%);
-  white-space: pre;
+    text-shadow: 0 1px white;
-  word-spacing: normal;
+    line-height: 1.4em;
-  word-break: normal;
+  }
-  word-wrap: normal;
 
-  -moz-tab-size: 4;
+  code,
-  -o-tab-size: 4;
+  code[class*='language-'] {
-  tab-size: 4;
+    font-size: 0.84em;
-
+  }
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
 }
 
 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;
 }

src/styles/variables.module.less

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

static/prism.css

@@ -1,66 +1,86 @@
-/* PrismJS 1.17.1
+/* PrismJS 1.23.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+typescript&plugins=autolinker */
+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,
+code[class*="language-"],
-pre[class*='language-'] ::-moz-selection,
+pre[class*="language-"] {
-code[class*='language-']::-moz-selection,
+	color: black;
-code[class*='language-'] ::-moz-selection {
+	background: none;
-  text-shadow: none;
+	text-shadow: 0 1px white;
-  background: #b3d4fc;
+	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-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-pre[class*='language-'] ::selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-code[class*='language-']::selection,
+	text-shadow: none;
-code[class*='language-'] ::selection {
+	background: #b3d4fc;
-  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-'],
+	code[class*="language-"],
-  pre[class*='language-'] {
+	pre[class*="language-"] {
-    text-shadow: none;
+		text-shadow: none;
-  }
+	}
 }
 
 /* Code blocks */
-pre[class*='language-'] {
+pre[class*="language-"] {
-  padding: 1em;
+	padding: 1em;
-  margin: 0.5em 0;
+	margin: .5em 0;
-  overflow: auto;
+	overflow: auto;
 }
 
-:not(pre) > code[class*='language-'],
+:not(pre) > code[class*="language-"],
-pre[class*='language-'] {
+pre[class*="language-"] {
-  background: #f5f2f0;
+	background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
+:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
+	padding: .1em;
-  border-radius: 0.3em;
+	border-radius: .3em;
-  white-space: normal;
+	white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+	color: slategray;
 }
 
 .token.punctuation {
-  color: #999;
+	color: #999;
 }
 
-.namespace {
+.token.namespace {
-  opacity: 0.7;
+	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;
+	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,
 .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;
+}
+