Use base16 theme with initial modifications

- set footer definitively at bottom and max width - removed nav. bar - changed title to name - cleared homepage - set Hack font
6 years ago · abe4976779
17 changed files with 748 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+themes/base16*
+
+commit-msg.txt
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+layout: 
+---
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,4 @@
+baseURL = "http://localhost:1313/"
+languageCode = "en-us"
+title = "Kevin Mok"
+# theme = "base16"
--- a/content/credits.md
+++ b/content/credits.md
@ -0,0 +1,13 @@
+---
+title: "Credits"
+date: 2019-01-31T03:10:25-05:00
+draft: true
+layout: article
+---
+<span>
+  Icons made by <a href="https://www.freepik.com/"
+    title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/"
+    title="Flaticon">www.flaticon.com</a> is licensed by <a
+  href="http://creativecommons.org/licenses/by/3.0/"
+  title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+</span>
--- a/layouts/404.html
+++ b/layouts/404.html
@ -0,0 +1,16 @@
+{{ partial "header.html" . }}
+
+<main role="main" class="page-not-found">
+
+  <h1>
+    <span class="base05">[</span><span class="base08">4</span><span class="base09">0</span><span class="base0a">4</span><span class="base05">]</span>
+    <span class="base05"># _</span>
+  </h1>
+
+  <h2>
+    not found
+  </h2>
+
+</main>
+
+{{ partial "footer.html" . }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -0,0 +1,8 @@
+{{ partial "header.html" . }}
+<main role="main" class="article-list">
+  <h1 class="list-title">{{ .Title }}</h1>
+  {{ range .Data.Pages }}
+    {{ partial "article-list-item.html" . }}
+  {{ end }}
+</main>
+{{ partial "footer.html" . }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -0,0 +1,7 @@
+{{ partial "header.html" . }}
+
+<main role="main" class="article">
+  {{ partial "article.html" . }}
+</main>
+
+{{ partial "footer.html" . }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -0,0 +1,5 @@
+{{ partial "header.html" . }}
+
+{{ partial "homepage.html" . }}
+
+{{ partial "footer.html" . }}
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@ -0,0 +1 @@
+<h1 class="headline">About</h1>
--- a/layouts/partials/article-list-item.html
+++ b/layouts/partials/article-list-item.html
@ -0,0 +1,12 @@
+<article class="list-item" itemscope itemtype="http://schema.org/Blog">
+  <h2 class="headline" itemprop="headline"><a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} (Draft){{ end }}</a></h2>
+  <div class="meta">
+{{ if not .Date.IsZero }}
+    <span class="key">published on</span>
+    <span class="val"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 02, 2006" }}</time></span>
+{{ end }}
+  </div>
+  <section class="summary">
+    {{ .Summary }} {{ if .Truncated }} <a href="{{ .RelPermalink }}">Read More...</a>{{ end }}
+  </section>
+</article>
--- a/layouts/partials/article.html
+++ b/layouts/partials/article.html
@ -0,0 +1,30 @@
+{{ $page := .Page }}
+<article class="single" itemscope itemtype="http://schema.org/BlogPosting">
+  <div class="meta">
+{{ if not .Page.Date.IsZero }}
+    <span class="key">published on</span>
+    <span class="val"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 02, 2006" }}</time></span>
+{{ end }}
+{{ with .Params.categories }}
+    <span class="key">{{ if $page.Date.IsZero }}published {{ end }}in</span>
+    <span class="val">
+{{ range . }}
+        <a href="{{ . | printf "categories/%s" | relURL }}">{{ . }}</a>
+{{ end }}
+    </span>
+{{ end }}
+{{ with .Params.tags }}
+    <br>
+    <span class="key">tags:</span>
+    <span class="val">
+{{ range . }}
+        <a href="{{ . | printf "tags/%s" | relURL }}">{{ . }}</a>
+{{ end }}
+    </span>
+{{ end }}
+  </div>
+  <h1 class="headline" itemprop="headline">{{ .Title }}</h1>
+  <section class="body" itemprop="articleBody">
+    {{ .Content }}
+  </section>
+</article>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -0,0 +1,17 @@
+</div>
+
+<footer>
+  <div class="container">
+    <!-- <span class="copyright">&copy; {{ .Site.LastChange.Year }} {{ .Site.Title }} - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></span> -->
+    <span class="copyright">
+      &copy; {{ now.Year }} {{ .Site.Title }} · <a rel="license"
+        href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> · 
+      <a href="/credits">Credits</a>
+    </span>
+  </div>
+
+</footer>
+
+
+</body>
+</html>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
+<head>
+<meta charset="utf-8">
+<meta name="description" content="{{ if eq .Description "" }}{{ .Site.Params.description }}{{ else }}{{ .Description }}{{ end }}">
+{{- with $.Param "keywords" }}
+<meta name="keywords" content="{{ delimit . "," }}">
+{{- end }}
+{{- with $.Param "author" }}
+<meta name="author" content="{{ . }}">
+{{- end }}
+{{ .Hugo.Generator }}
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> -->
+<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
+<!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> -->
+<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
+<link rel="alternate" href="{{ "index.xml" | relURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
+<title>{{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} - {{ .Site.Title }}{{ end }}</title>
+</head>
+<body>
+
+<!-- <header>
+  <div class="container clearfix">
+    <a class="path" href="{{ .Site.BaseURL }}">[{{ .Site.Title }}]</a>
+    <span class="caret"># _</span>
+    <div class="right">
+      {{ range $i, $page := (where .Site.Pages "Section" "pages") }}
+        {{ if not (eq $i 0) }}|{{ end }}
+        <a class="path" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+      {{ end }}
+    </div>
+  </div>
+</header> -->
+
+<div class="container">
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@ -0,0 +1,23 @@
+{{ $baseurl := .Site.BaseURL }}
+<h1 class="site-title">
+  <!-- <span class="base05">[</span><span class="base08">K</span><span
+    class="base09">e</span><span class="base0a">v</span><span
+    class="base0b">i</span><span class="base0c">n</span><span
+  class="base05">]</span>  <span class="base05"># _</span> -->
+  <span class="base05">[</span><span class="base08">K</span><span
+    class="base0f">e</span><span class="base09">v</span><span
+    class="base0a">i</span><span class="base0b">n </span><span
+    class="base0c">M</span><span class="base0d">o</span><span
+    class="base0e">k</span><span
+  class="base05">]</span>  <span class="base05"># _</span>
+  <!-- <span class="base0d">6</span> -->
+</h1>
+
+<div class="hero-logo">
+  <img src="{{ "img/base16-eighties.svg" | relURL }}">
+</div>
+
+<div style="text-align: center;">
+  <!-- Add your own "<code>layouts/partials/hero.html</code>" to replace this text. -->
+  Live, love and Linux.
+</div>
--- a/layouts/partials/homepage.html
+++ b/layouts/partials/homepage.html
@ -0,0 +1,46 @@
+{{ $baseurl := .Site.BaseURL }}
+<main role="main" class="homepage">
+
+  {{ partial "hero.html" . }}
+
+  <!-- {{ partial "about.html" . }} -->
+
+  <!-- <h1 class="headline">Recent Posts</h1>
+
+  <div class="article-list">
+    {{ range first 3 (where .Data.Pages "Section" "post") }}
+      {{ partial "article-list-item.html" . }}
+    {{ end }}
+  </div> -->
+
+{{ with .Site.Taxonomies.categories }}
+
+  <h1 class="headline">Categories</h1>
+
+  <section class="categories">
+    {{ range $name, $value := . }}
+    <h2 class="category">
+      <a href="{{ $baseurl }}categories/{{ $name | urlize }}">{{ title $name }}</a>
+      <small>({{ .Count }})</small>
+    </h2>
+    {{ end }}
+  </section>
+
+{{ end }}
+
+{{ with .Site.Taxonomies.tags }}
+
+  <h1 class="headline">Tags</h1>
+
+  <section class="tags">
+    {{ range $name, $value := . }}
+    <span class="tag">
+      <a href="{{ $baseurl }}tags/{{ $name | urlize }}">{{ $name }}</a>
+      <small>({{ .Count }})</small>
+    </span>
+    {{ end }}
+  </section>
+
+{{ end }}
+
+</main>
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,500 @@
+/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
+
+.base00 { color: #2d2d2d; }
+.base01 { color: #393939; }
+.base02 { color: #515151; }
+.base03 { color: #747369; }
+.base04 { color: #a09f93; }
+.base05 { color: #d3d0c8; }
+.base06 { color: #e8e6df; }
+.base07 { color: #f2f0ec; }
+.base08 { color: #f2777a; }
+.base09 { color: #f99157; }
+.base0a { color: #ffcc66; }
+.base0b { color: #99cc99; }
+.base0c { color: #66cccc; }
+.base0d { color: #6699cc; }
+.base0e { color: #cc99cc; }
+.base0f { color: #d27b53; }
+
+/* General Page Layout */
+
+body {
+  margin: 0;
+  background-color: #2d2d2d;
+  color: #f2f0ec;
+  line-height: 1.5;
+  font-size: 100%;
+  /* font-family: 'Source Code Pro', monospace; */
+  font-family: 'Hack', monospace;
+}
+
+.container {
+  max-width: 52em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+div.right {
+  float:right;
+}
+
+div.clearfix {
+  overflow: auto;
+}
+
+@media (max-width: 52em) {
+  .container {
+    width: 100%;
+  }
+}
+
+article.single section,
+.article-list article {
+  background-color: #f2f0ec;
+  color: #2d2d2d;
+  padding-left: 8rem;
+  padding-right: 8rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+@media (max-width: 52em) {
+  article.single section,
+  .article-list article {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+header, footer {
+  /* background-color: #393939; */
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+header {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 52em) {
+  header {
+    margin-top: 0;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+footer {
+  margin-top: 2rem;
+  margin-bottom: .5rem;
+  text-align: center;
+  font-size: 0.9em;
+  color: #747369;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}
+
+@media (max-width: 52em) {
+  footer {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+footer .container {
+  background-color: #393939;
+  max-width: 62em;
+  margin-left: auto;
+  margin-right: auto;
+  height: 1.8em;
+}
+
+/* Typography */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  line-height: 1.25;
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+h1 { font-size: 2rem }
+h2 { font-size: 1.5rem }
+h3 { font-size: 1.25rem }
+h4 { font-size: 1rem }
+h5 { font-size: .875rem }
+h6 { font-size: .75rem }
+
+pre, code {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Header Layout */
+
+header a.path {
+  color: #6699cc;
+}
+
+header span.caret {
+  color: #f2f0ec;
+}
+
+/* Footer Layout */
+
+footer a {
+  color: #747369;
+  /* text-decoration: none; */
+}
+
+/* 404 Page Layout */
+
+.page-not-found h1 {
+  text-align: center;
+  font-size: 5em;
+}
+
+.page-not-found h2 {
+  text-align: center;
+  font-size: 3em;
+  color: #a09f93;
+  margin-bottom: 4rem;
+}
+
+@media (max-width: 52em) {
+  .page-not-found h1 {
+    font-size: 3em;
+  }
+
+  .page-not-found h2 {
+    font-size: 2em;
+  }
+}
+
+/* Homepage Layout */
+
+@media (max-width: 52em) {
+  .homepage {
+    margin-bottom: 2rem;
+  }
+}
+
+.homepage h1.site-title {
+  text-align: center;
+  /* font-size: 3.5em; */
+  font-size: 4.8em;
+  color: #66cccc;
+  margin-top: 0.5em;
+}
+
+@media (max-width: 52em) {
+  .homepage h1.site-title {
+    font-size: 3em;
+  }
+}
+
+.homepage h1.headline {
+  font-size: 3em;
+  color: #ffcc66;
+}
+
+@media (max-width: 52em) {
+  .homepage h1.headline {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+.homepage .hero-logo img {
+  width: 100%;
+}
+
+.homepage section.categories,
+.homepage section.tags {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.homepage .category,
+.homepage .category a,
+.homepage .tag,
+.homepage .tag a {
+  color: #cc99cc;
+}
+
+.homepage .tag {
+  margin-right: 2em;
+}
+
+/* Post List Layout */
+
+.article-list h1.list-title {
+  font-size: 3em;
+  color: #ffcc66;
+}
+
+.article-list article {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  margin-bottom: 4rem;
+}
+
+.article-list article h2.headline,
+.article-list article h2.headline a {
+  margin-top: 0;
+  color: #6699cc;
+}
+
+.article-list article .meta {
+  margin-bottom: 1rem;
+}
+
+.article-list article .meta .key {
+  color: #747369;
+}
+
+.article-list article .meta .val,
+.article-list article .meta .val a {
+  color: #cc99cc;
+}
+
+.article-list article section.summary a { color: #d27b53; }
+
+
+/* Single Post Layout */
+
+article.single .meta {
+  font-size: 0.9em;
+  text-align: right;
+}
+
+article.single .meta .key {
+  color: #747369;
+}
+
+article.single .meta .val, article.single .meta .val a {
+  color: #cc99cc;
+}
+
+@media (max-width: 52em) {
+  article.single .meta {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+article.single h1.headline {
+  margin-top: 0;
+  font-size: 3em;
+  color: #ffcc66;
+}
+
+@media (max-width: 52em) {
+  article.single h1.headline {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+article.single section.body {
+  padding-top: 4rem;
+  padding-bottom: 3rem;
+}
+
+@media (max-width: 52em) {
+  article.single section.body {
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+  }
+}
+
+/* Highlight Colors */
+
+article.single section.body h1 { color: #6699cc; }
+article.single section.body h2 { color: #99cc99; }
+article.single section.body h3 { color: #f99157; }
+article.single section.body h4 { color: #f2777a; }
+article.single section.body h5 { color: #515151; }
+article.single section.body h6 { color: #747369; }
+
+article.single section.body a { color: #d27b53; }
+
+/* Article Elements */
+
+article.single * {
+  max-width: 100%;
+}
+
+article.single pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow-x: scroll;
+  border-radius: 3px;
+  padding: 2rem;
+}
+
+article.single p code {
+  padding: 0.2em 0.5em;
+  border-radius: 3px;
+  background: #747369;
+  color: #f2f0ec;
+}
+
+article.single figure, article.single div.highlight {
+  box-sizing: border-box;
+  max-width: 52rem;
+  width: 52rem;
+  margin-left: -8rem;
+  margin-right: -8rem;
+  margin-bottom: 1rem;
+  padding: 1em;
+  background-color: #393939;
+}
+
+@media (max-width: 52em) {
+  article.single figure, article.single div.highlight {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 3px;
+  }
+}
+
+article.single figure img {
+  max-width: 100%;
+  width: 100%;
+  border-radius: 3px;
+}
+
+article.single figure figcaption {
+  margin-top: 1rem;
+}
+
+article.single figure figcaption h4 {
+  margin-top: 0;
+  text-align: center;
+  font-style: italic;
+  font-weight: normal;
+  color: #f2f0ec;
+}
+
+article.single table {
+  border-collapse: separate;
+  border-spacing: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+article.single th,
+article.single td {
+  padding: .25rem 1rem;
+  line-height: inherit;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: #a09f93;
+}
+
+article.single tr:last-child td {
+  border-bottom: 0;
+}
+
+article.single th {
+  text-align: left;
+  font-weight: bold;
+  vertical-align: bottom;
+}
+
+article.single td { vertical-align: top }
+
+article.single blockquote {
+  margin-left: 2rem;
+  margin-right: 3rem;
+  padding-left: 1rem;
+  border-left: 5px solid #66cccc;
+}
+
+article.single hr {
+  border: 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: #a09f93;
+}
+
+/* Pygments template by Jan T. Sott (https://github.com/idleberg) */
+
+pre { background: #2d2d2d; color: #f2f0ec }
+
+.highlight .hll { background-color: #515151 }
+.highlight .c { color: #747369 } /* Comment */
+.highlight .err { color: #f2777a } /* Error */
+.highlight .k { color: #cc99cc } /* Keyword */
+.highlight .l { color: #f99157 } /* Literal */
+.highlight .n { color: #f2f0ec } /* Name */
+.highlight .o { color: #66cccc } /* Operator */
+.highlight .p { color: #f2f0ec } /* Punctuation */
+.highlight .cm { color: #747369 } /* Comment.Multiline */
+.highlight .cp { color: #747369 } /* Comment.Preproc */
+.highlight .c1 { color: #747369 } /* Comment.Single */
+.highlight .cs { color: #747369 } /* Comment.Special */
+.highlight .gd { color: #f2777a } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gh { color: #f2f0ec; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #99cc99 } /* Generic.Inserted */
+.highlight .gp { color: #747369; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
+.highlight .kc { color: #cc99cc } /* Keyword.Constant */
+.highlight .kd { color: #cc99cc } /* Keyword.Declaration */
+.highlight .kn { color: #66cccc } /* Keyword.Namespace */
+.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
+.highlight .kr { color: #cc99cc } /* Keyword.Reserved */
+.highlight .kt { color: #ffcc66 } /* Keyword.Type */
+.highlight .ld { color: #99cc99 } /* Literal.Date */
+.highlight .m { color: #f99157 } /* Literal.Number */
+.highlight .s { color: #99cc99 } /* Literal.String */
+.highlight .na { color: #6699cc } /* Name.Attribute */
+.highlight .nb { color: #f2f0ec } /* Name.Builtin */
+.highlight .nc { color: #ffcc66 } /* Name.Class */
+.highlight .no { color: #f2777a } /* Name.Constant */
+.highlight .nd { color: #66cccc } /* Name.Decorator */
+.highlight .ni { color: #f2f0ec } /* Name.Entity */
+.highlight .ne { color: #f2777a } /* Name.Exception */
+.highlight .nf { color: #6699cc } /* Name.Function */
+.highlight .nl { color: #f2f0ec } /* Name.Label */
+.highlight .nn { color: #ffcc66 } /* Name.Namespace */
+.highlight .nx { color: #6699cc } /* Name.Other */
+.highlight .py { color: #f2f0ec } /* Name.Property */
+.highlight .nt { color: #66cccc } /* Name.Tag */
+.highlight .nv { color: #f2777a } /* Name.Variable */
+.highlight .ow { color: #66cccc } /* Operator.Word */
+.highlight .w { color: #f2f0ec } /* Text.Whitespace */
+.highlight .mf { color: #f99157 } /* Literal.Number.Float */
+.highlight .mh { color: #f99157 } /* Literal.Number.Hex */
+.highlight .mi { color: #f99157 } /* Literal.Number.Integer */
+.highlight .mo { color: #f99157 } /* Literal.Number.Oct */
+.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
+.highlight .sc { color: #f2f0ec } /* Literal.String.Char */
+.highlight .sd { color: #747369 } /* Literal.String.Doc */
+.highlight .s2 { color: #99cc99 } /* Literal.String.Double */
+.highlight .se { color: #f99157 } /* Literal.String.Escape */
+.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
+.highlight .si { color: #f99157 } /* Literal.String.Interpol */
+.highlight .sx { color: #99cc99 } /* Literal.String.Other */
+.highlight .sr { color: #99cc99 } /* Literal.String.Regex */
+.highlight .s1 { color: #99cc99 } /* Literal.String.Single */
+.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
+.highlight .bp { color: #f2f0ec } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #f2777a } /* Name.Variable.Class */
+.highlight .vg { color: #f2777a } /* Name.Variable.Global */
+.highlight .vi { color: #f2777a } /* Name.Variable.Instance */
+.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
+
+/*# sourceMappingURL=style.css.map */
--- a/static/img/base16-eighties.svg
+++ b/static/img/base16-eighties.svg
@ -0,0 +1,21 @@
+<svg width="800" height="50" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <title>Base16 Eighties</title>
+  <line id="base00" x1="025" y1="0" x2="025" y2="720" stroke-width="50" stroke="#2d2d2d" />
+  <line id="base01" x1="075" y1="0" x2="075" y2="720" stroke-width="50" stroke="#393939" />
+  <line id="base02" x1="125" y1="0" x2="125" y2="720" stroke-width="50" stroke="#515151" />
+  <line id="base03" x1="175" y1="0" x2="175" y2="720" stroke-width="50" stroke="#747369" />
+  <line id="base04" x1="225" y1="0" x2="225" y2="720" stroke-width="50" stroke="#a09f93" />
+  <line id="base05" x1="275" y1="0" x2="275" y2="720" stroke-width="50" stroke="#d3d0c8" />
+  <line id="base06" x1="325" y1="0" x2="325" y2="720" stroke-width="50" stroke="#e8e6df" />
+  <line id="base07" x1="375" y1="0" x2="375" y2="720" stroke-width="50" stroke="#f2f0ec" />
+  <line id="base08" x1="425" y1="0" x2="425" y2="720" stroke-width="50" stroke="#f2777a" />
+  <line id="base09" x1="475" y1="0" x2="475" y2="720" stroke-width="50" stroke="#f99157" />
+  <line id="base0A" x1="525" y1="0" x2="525" y2="720" stroke-width="50" stroke="#ffcc66" />
+  <line id="base0B" x1="575" y1="0" x2="575" y2="720" stroke-width="50" stroke="#99cc99" />
+  <line id="base0C" x1="625" y1="0" x2="625" y2="720" stroke-width="50" stroke="#66cccc" />
+  <line id="base0D" x1="675" y1="0" x2="675" y2="720" stroke-width="50" stroke="#6699cc" />
+  <line id="base0E" x1="725" y1="0" x2="725" y2="720" stroke-width="50" stroke="#cc99cc" />
+  <line id="base0F" x1="775" y1="0" x2="775" y2="720" stroke-width="50" stroke="#d27b53" />
+ </g>
+</svg>