~cdv/chris.vittal.dev

5b504731dfe1ae0a72c1adfffcebbb7c37679eef — Chris Vittal 4 years ago 1b8131a 
Rewrite Everything
patch browse .tar.gz 
14 files changed, 271 insertions(+), 99 deletions(-)

A .build.yml
M README.md
M config.toml
M content/_index.md
M sass/style.scss
A static/favicon.ico
M templates/footer.html
M templates/head_tags.html
A templates/header.html
M templates/index.html
A templates/page.html
A templates/shortcodes/fn.html
A templates/shortcodes/fnref.html
A templates/shortcodes/renderfootnotes.html

A .build.yml => .build.yml +22 -0
@@ 0,0 1,22 @@
arch: null
environment: null
image: archlinux
packages:
  - zola-bin
repositories: null
secrets:
  - 6d8b1910-56af-421a-93e7-b01eb28aa0d3
shell: false
sources:
  - https://git.sr.ht/~cdv/chris.vittal.dev
tasks:
  - setup: |
      mkdir -p chris.vittal.dev/secrets
      mv vars chris.vittal.dev/secrets/vars
  - build: |
      zola build
      zola check
triggers:
  - action: email
    condition: always
    to: Chris Vittal <chris@vittal.dev>


M README.md => README.md +22 -9
@@ 1,16 1,29 @@
# My Personal Website

This is a website I made for just me. Mostly so I could have the email. But
Throwing up a tiny static site isn't bad either.
throwing up a tiny static site isn't bad either.

Built with [Zola](https://getzola.org).

## Building

```
zola build
```

## Testing

```sh
zola serve
```

## Licensing

All _code_ here is licenced under the GNU Affero General Public License version
3 or (at your option) any later version. Code will be defined better as this
site grows. For now, it's the Makefile and configuration files, and this
README. A copy can be found in the `LICENSE-AGPLv3` file.

All other _text_ content, notably the static html and markdown files, written
by us are licensed under a [Creative Commons
Attribution-NonCommercial-NoDerivatives 4.0 International
License](https://creativecommons.org/licenses/by-nc-nd/4.0/).
3. Code will be defined better as this site grows. For now, it's the Makefile
and configuration files, and this README. A copy can be found in the
`LICENSE-AGPLv3` file.

All other _text_ content, notably the static html and markdown files, written by
me are licensed under a [Creative Commons Attribution-ShareAlike 4.0
International License](https://creativecommons.org/licenses/by-sa/4.0/).


M config.toml => config.toml +4 -0
@@ 7,9 7,13 @@ compile_sass = true
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true
highlight_theme = "gruvbox-dark"

# Whether to build a search index to be used later on by a JavaScript library
build_search_index = false

# build rss
generate_rss = true

[extra]
# Put all your custom variables here


M content/_index.md => content/_index.md +4 -6
@@ 1,10 1,8 @@
+++
title = "Home"
sort_by = "date"
+++

This is a stub. I may add more, may not, dunno yet.

## Welcome

I'm Chris Vittal, and this is my personal website. I write free software, both
personally and professionally.
This is my blog/personal website. I develop free software. To see what I do on
company time, check out [hail](https://hail.is). Any opinions or perspectives
here are my own, not those of my employer.


M sass/style.scss => sass/style.scss +144 -62
@@ 1,76 1,163 @@
$bdy-font-stack: 'Open Sans', sans-serif;
$fg: #333;
$bg: #EEEEEE;
/* this is a nightmare of organization, abandon all hope designers who enter here */
$bdy-font-stack: 'IBM Plex Mono', 'Fira Mono', monospace;
$fg: #222;
$bg: #EEE;
$subheading-light: #666;
$subheading-dark: #999;

body{
  font-family: $bdy-font-stack;
  margin: 4px;
  line-height: 1.4;
  font-size: 16px;
  max-width: 850px;
  padding: 4px;
  margin: 0 auto;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  // FIXME: mobile
  display: grid;
  grid-template-columns: 3fr 1fr;
footer#copyright {
  hr {
    min-width: 100%;
  }

  line-height: 1.1;
  font-size: 12px;

  img {
    vertical-align: middle;
  }
}

header {
  grid-column: 1 / 3;
footer#article-footer {
  margin: 4rem 0;
  color: #555;

  a {
    color: inherit;
  }

  hr {
    margin: 2rem auto;
    border: none;
    border-top: 1px solid grey;
    max-width: 40px;
  }
}

main {
  grid-column: 1;
ul.post-list {
  list-style-type: none;
  padding: 0;

  li {
    h3 {
      line-height: 1.5;
    }

    time {
      font-size: 1rem;
      font-weight: normal;
      padding-right: 1em;
    }
  }
}

h1, h2, h3 {
  line-height: 1.2
.footnotes::before {
  content: "Footnotes:";
}

hr#foot-border {
  min-width: 100%;
  grid-column: 1 / 3;
.footnotes {
  margin-top: 3rem;
  font-size: 0.75rem;

  p {
    font-size: 1rem;
  }
}

footer {
  line-height: 1.1;
  font-size: 12px;
  grid-column: 1;
code {
  padding: 0.1em 0.2em;
  background-color: #fcf0ca;
  color: #407959;
}

  img {
    vertical-align: middle;

@media only screen and (min-width: 520px) {
  header.top-level {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;

    .subheading {
      grid-row: 2;
      grid-column: 1;
    }

    h1 {
      grid-row: 1;
      grid-column: 1 / -1;
    }

    nav {
      grid-column: 2;
      grid-row: 2;
    }
  }
}

ul {
  list-style-type: none;
  padding: 0;
header.top-level {
  h1 {
    margin-bottom: 0px;
    a {
      text-decoration: none;
    }
  }

  nav {
    font-size: 90%;
    display: flex;
    justify-content: flex-end;

    span.sep {
      padding: 0 0.5em;
    }
  }

  margin-bottom: 2 * 0.67em;
}

nav#sidebar {
  padding-left: 1rem;
  grid-column: 2;
  line-height: 1.2;
article {
  header.post {
    h1 { margin: 0px; }

  li {
    margin: (1.5*0.83em) 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-flow: wrap;
    margin-top: 1ex;

    span.context {
      order: 99;
      margin: 0;
      font-size: small;
    }

    a {
      font-size: 90%;
    time {
      align-self: flex-end;
    }
  }


}

time {
  color: $subheading-light;
}

body {
  color: $fg;
  background-color: $bg;
}

a {
  color: #0266bf
}

p {
  text-align: justify;
}

.subheading {
  color: $subheading-light;
}

@media (prefers-color-scheme: dark) {


@@ 79,29 166,24 @@ nav#sidebar {
    background-color: $fg;
  }

  a {
    color: $bg;
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: $fg;
    background-color: $bg;
  time {
    color: $subheading-dark;
  }

  a {
    color: $fg;
    color: #70bcff;
  }
}

@media (prefers-color-scheme: no-preference) {
  body {
    color: $fg;
    background-color: $bg;
  .subheading {
    color: $subheading-dark;
  }

  a {
    color: $fg;
   code {
     background-color: #28282888;
     color: #8ec07c;
   }

  footer#article-footer {
    color: #AAA;
  }
}


A static/favicon.ico => static/favicon.ico +0 -0
M templates/footer.html => templates/footer.html +2 -1
@@ 1,4 1,5 @@
<footer>
<footer id=copyright>
    <hr>
  &copy; 2019 Christopher Vittal.
  The content on this site (unless otherwise specified) is licensed under
  <a rel="license" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">


M templates/head_tags.html => templates/head_tags.html +1 -0
@@ 1,3 1,4 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
<link rel="alternate" type="application/xml+rss" title="RSS" href="{{config.base_url}}/rss.xml">


A templates/header.html => templates/header.html +11 -0
@@ 0,0 1,11 @@
<header class=top-level>
  <h1><a href="/">chris.vittal<small style="font-size: 0.5em;">.dev</small></a></h1>
  <span class=subheading >free programmer.</span>
  <nav id=external-links>
    <a href="mailto:chris@vittal.dev">email</a> <span class=sep>|</span>
    <a href="/publickey.txt">pgp</a> <span class=sep>|</span>
    <a href="https://git.sr.ht/~cdv">sourcehut</a> <span class=sep>|</span>
    <a href="https://github.com/chrisvittal">github</a> <span class=sep>|</span>
    <a href="https://kind.social/@viralstitch">mastodon</a>
  </nav>
</header>


M templates/index.html => templates/index.html +21 -21
@@ 2,28 2,28 @@
<html lang="en">
  <head>
    {% include "head_tags.html" -%}
    <title>{{section.title}} | Chris Vittal</title>
    <title>{{section.title}} | chris.vittal.dev</title>
  </head>
  <body>
    <div class=container>
      <header>
        <h1>Chris Vittal</h1>
      </header>
      <main>
        {{section.content | safe}}
      </main>
      <nav id="sidebar">
        <ul>
          <li><span class=context>email </span><a href="mailto:chris@vittal.dev">chris@vittal.dev</a></li>
          <li><span class=context>pgp </span><a href="/publickey.txt">D76E093744A98127</a></li>
          <li><span class=context>sourcehut </span><a href="https://git.sr.ht/~cdv">~cdv</a></li>
          <li><span class=context>github </span><a href="https://github.com/chrisvittal">chrisvittal</a></li>
          <li><span class=context>mastodon </span><a href="https://kind.social/@viralstitch">@viralstitch@kind.social</a></li>
          <li><span class=context>work </span><a href="https://hail.is">hail.is</a></li>
        </ul>
      </nav>
      <hr id="foot-border">
      {% include "footer.html" -%}
    </div>
    {% include "header.html" -%}
    <main>
      {{section.content | safe}}
      <h2>Posts</h2>
      <ul class=post-list>
        {% for post in section.pages -%}
        <li>
          <h3>
            <time datetime="{{post.date}}">{{post.date}}</time>
            <a href="{{post.permalink | safe}}">{{post.title}}</a>
          </h3>
        </li>
        {% endfor -%}
      </ul>
    </main>
    {% include "footer.html" -%}

    <pre>
      {{__tera_context}}
    </pre>
  </body>
</html>


A templates/page.html => templates/page.html +28 -0
@@ 0,0 1,28 @@
<!doctype html>
<html lang="en">
  <head>
    {% include "head_tags.html" -%}
    <title>{{page.title}} | chris.vittal.dev</title>
  </head>
  <body>
    {% include "header.html" -%}
    <main>
      <article>
        <header class=post>
          <h1>{{page.title}}</h1>
          {% if page.date -%}<time datetime={{page.date}}>{{page.date}}</time>{% endif -%}
        </header>
        {{ page.content | safe }}
      </article>
    </main>
    <footer id=article-footer>
      <hr>
      Thanks for reading! Should you have questions or comments, please leave them in
      <a href="https://lists.sr.ht/~cdv/public-inbox">my public inbox</a> by sending a
      plain text email to
        <a href="mailto:~cdv/public-inbox@lists.sr.ht?subject={{page.title | urlencode}}">
          ~cdv/public-inbox@lists.sr.ht</a>.
    </footer>
    {% include "footer.html" -%}
  </body>
</html>


A templates/shortcodes/fn.html => templates/shortcodes/fn.html +1 -0
@@ 0,0 1,1 @@
<sup id="fnref:{{id}}"><a href="#fn:{{id}}">{{id}}</a></sup>


A templates/shortcodes/fnref.html => templates/shortcodes/fnref.html +0 -0
A templates/shortcodes/renderfootnotes.html => templates/shortcodes/renderfootnotes.html +11 -0
@@ 0,0 1,11 @@
<div class="footnotes">
  <ol>
    {% for it in items -%}
    <li id="fn:{{loop.index}}">
      <p>
        {{it | markdown(inline=true) | safe}}<a class="reversefootnote" href="#fnref:{{loop.index}}">&#x21B2;</a>
      </p>
    </li>
    {% endfor %}
  </ol>
</div>