~bfiedler/website

d32922516b7756400ed3b09aa009499f5eaff456 — Ben Fiedler 1 year, 2 days ago f0ca069
Add openring, use nicer body font

only show feed on desktops
M .build.yml => .build.yml +13 -0
@@ 1,10 1,12 @@
---
image: debian/unstable
packages:
  - golang-go
  - hugo
  - rsync
sources:
  - https://git.sr.ht/~bfiedler/website
  - https://git.sr.ht/~sircmpwn/openring
environment:
  user: deploy
  webhost: bfiedler.vsos.ethz.ch


@@ 12,8 14,19 @@ environment:
secrets:
  - e7266734-d2dc-46dc-a155-4225c901c280
tasks:
  - openring: |
      cd openring
      go build -o openring
  - build: |
      cd website
      ../openring/openring \
        -s https://blog.antei.de/feed.rss \
        -s https://drewdevault.com/blog/index.xml \
        -s https://emersion.fr/blog/rss.xml \
        -s https://raymii.org/s/feed.xml \
        -s https://sourcehut.org/blog/index.xml \
        < external/openring.in.html \
        > layouts/partials/openring.html
      hugo --minify
  - upload: |
      mkdir -p $HOME/.ssh

M .gitignore => .gitignore +1 -0
@@ 1,2 1,3 @@
public/
resources/_gen/
layouts/partials/openring.html

R assets/syntax.css => assets/highlight.css +0 -0
M assets/style.scss => assets/style.scss +114 -45
@@ 4,8 4,42 @@ $fg: #000000;
$bg: #ffffff;
$link: #0000ee;

html {
    font-size: 1rem;
}

body {
    margin: 0;
    font-family: 'WorkSans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fira Code', monospace;
}

a {
    color: $fg;
}

ul.nav {
        padding: 0;
        margin: 0 1rem;

        text-align: center;

        li {
            display: inline;
            font-family: 'Fira Code', monospace;
        }

        li + li::before {
            content: " | "
        }
}

time.post-time {
    color: $gray;
    white-space: nowrap;
    font-family: 'Fira Code', monospace;
}



@@ 20,11 54,7 @@ body {
    display: grid;
    // see: https://css-tricks.com/preventing-a-grid-blowout/
    grid-template-columns: minmax(240px, 1fr);
    grid-template-rows: auto 1fr auto;
}

a {
    color: $fg;
    grid-template-rows: auto auto 1fr auto;
}

#intro {


@@ 43,19 73,6 @@ a {
        font-size: 4rem;
        font-weight: normal;
    }

    ul {
        padding: 0;
        margin: 0 1em;

        li {
            display: inline;
        }

        li + li::before {
            content: " | "
        }
    }
}

.content > header {


@@ 84,21 101,6 @@ a {
        display: flex;
        justify-content: center;

        ul {
            padding: 0;
            margin: 0 1em;

            text-align: center;

            li {
                display: inline;
            }

            li + li::before {
                content: " | "
            }
        }

        dl {
            display: none;
        }


@@ 121,9 123,9 @@ a {
        margin: 0;
        padding: 0;

        .post-title {
        h1.post-title {
            font-size: 1.2rem;
            margin-top: 0.5em;
            margin-top: 0.5rem;
        }
    }



@@ 143,13 145,19 @@ a {
        }
    }

    pre, code {
        padding: 0 0.1rem;
    pre {
        padding: 0.1rem;
        overflow-x: auto;
        color: #272822;
        background-color: #fafafa;
    }

    code {
        padding: 0 0.1rem;
        color: #272822;
        background-color: #fafafa;
    }

    table {
        display: block;
        overflow-x: auto;


@@ 169,20 177,17 @@ a {
    }
}

article {
    > header {
        h1 {
.blogpost {
    header {
        .post-title {
            margin: 0;
            margin-bottom: 2px;
        }

        > time {
            color: $gray;
            white-space: nowrap;
        }

        .post-metadata {
            color: $gray;
            align-items: center;
            align-items: center;

            a {
                color: $gray;


@@ 231,6 236,62 @@ article {
    }
}

section.webring {
    margin: 0 0.5rem;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    text-justify: none;

    grid-row: 3 / 4;

    > header > h2 {
        text-align: center;
    }

    header {
        h2 {
            font-size: 1rem;
        }

        h3 {
            font-size: 0.9rem;
        }
    }

    .articles {
        display: flex;
        flex-direction: column;
    }

    .article {
        text-align: left;
        text-justify: none;

        margin: 0 0.3rem;
    }

    .article:first-child {
        margin-left: 0;
    }

    .summary {
        margin-bottom: 0.5rem;
    }

    .source {
        margin-bottom: 0.8rem;
    }

    .attribution {
        color: $gray;

        a {
            color: $gray;
        }
    }
}

@media (min-width: 768px) {
    .content {
        // see: https://css-tricks.com/preventing-a-grid-blowout/


@@ 309,4 370,12 @@ article {
        grid-column: 1/3;
        grid-row: 2;
    }

    section.webring {
        grid-column: 1/3;

        .articles {
            flex-direction: row;
        }
    }
}

A assets/work-sans.css => assets/work-sans.css +35 -0
@@ 0,0 1,35 @@
@font-face{
    font-family: 'WorkSans';
    src: url('/fonts/woff2/WorkSans-Light.woff2') format('woff2'),
         url('/fonts/woff/WorkSans-Light.woff') format('woff'),
         url('/fonts/ttf/WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face{
    font-family: 'WorkSans';
    src: url('/fonts/woff2/WorkSans-Regular.woff2') format('woff2'),
         url('/fonts/woff/WorkSans-Regular.woff') format('woff'),
         url('/fonts/ttf/WorkSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face{
    font-family: 'WorkSans';
    src: url('/fonts/woff2/WorkSans-Medium.woff2') format('woff2'),
         url('/fonts/woff/WorkSans-Medium.woff') format('woff'),
         url('/fonts/ttf/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face{
    font-family: 'WorkSans';
    src: url('/fonts/woff2/WorkSans-Bold.woff2') format('woff2'),
         url('/fonts/woff/WorkSans-Bold.woff') format('woff'),
         url('/fonts/ttf/WorkSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

A external/openring.in.html => external/openring.in.html +24 -0
@@ 0,0 1,24 @@
<section class="webring">
    <header>
        <h2>Articles from blogs I follow</h2>
    </header>
    <section class="articles">
        {{- range .Articles }}
        <section class="article">
            <header>
                <h3 class="title">
                    <a href="{{.Link}}" target="_blank" rel="noopener">{{ .Title }}</a>
                </h3>
            </header>
            <p class="summary">{{ .Summary }}</p>
            <small class="source">
                via <a href="{{ .SourceLink }}">{{ .SourceTitle }}</a>
                on <time datetime="{{ .Date | datef "2006-01-02" }}">{{ .Date | datef "January 2, 2006" }}</time>
            </small>
        </section>
        {{- end }}
    </section>
    <footer>
        <p class="attribution">Generated by <a href="https://git.sr.ht/~sircmpwn/openring">openring</a></p>
    </footer>
</section>

M layouts/_default/baseof.html => layouts/_default/baseof.html +8 -6
@@ 4,12 4,14 @@
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ block "title" . }}{{ .Title }}{{ end }}</title>
        {{- $css := resources.Get "style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
        <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
        {{- $font := resources.Get "fira-code.css" | resources.Minify | resources.Fingerprint }}
        <link rel="stylesheet" href="{{ $font.RelPermalink }}" integrity="{{ $font.Data.Integrity }}">
        {{- $syntax := resources.Get "syntax.css" | resources.Minify | resources.Fingerprint }}
        <link rel="stylesheet" href="{{ $syntax.RelPermalink }}" integrity="{{ $syntax.Data.Integrity }}">
        {{- $main := resources.Get "style.scss" | toCSS | minify | fingerprint }}
        <link rel="stylesheet" href="{{ $main.RelPermalink }}" integrity="{{ $main.Data.Integrity }}">
        {{- $fira := resources.Get "fira-code.css" | minify | fingerprint }}
        <link rel="stylesheet" href="{{ $fira.RelPermalink }}" integrity="{{ $fira.Data.Integrity }}">
        {{- $worksans := resources.Get "work-sans.css" | minify | fingerprint }}
        <link rel="stylesheet" href="{{ $worksans.RelPermalink }}" integrity="{{ $worksans.Data.Integrity }}">
        {{- $highlight := resources.Get "highlight.css" | minify | fingerprint }}
        <link rel="stylesheet" href="{{ $highlight.RelPermalink }}" integrity="{{ $highlight.Data.Integrity }}">
        {{- with .OutputFormats.Get "rss" -}}
        {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
        {{- end -}}

M layouts/_default/home.html => layouts/_default/home.html +3 -1
@@ 2,10 2,12 @@
<main id="intro">
    <h1>Ben Fiedler</h1>
    <nav>
        <ul>
        <ul class="nav">
            {{- range .Site.Menus.main }}
            {{- if ne .Name "Feed" }}
            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
            {{- end }}
            {{- end }}
        </ul>
    </nav>
</main>

M layouts/blog/list.html => layouts/blog/list.html +1 -1
@@ 8,7 8,7 @@
        <li>
            <article>
                <header>
                    <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "2006-01-02" }}</time>
                    <time class="post-time" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "2006-01-02" }}</time>
                    <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
                </header>
            </article>

M layouts/blog/single.html => layouts/blog/single.html +5 -1
@@ 4,7 4,10 @@
    <article>
        <header>
            <h1 class="post-title">{{ .Title }}</h1>
            <span class="post-metadata"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "2006-01-02" }}</time> on <a href="/blog/">this blog</a></span>
            <span class="post-metadata">
                <time class="post-time" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "2006-01-02" }}</time>
                on <a href="/blog/">this blog</a>
            </span>
        </header>
        {{- if in .Params.tags "math" }}
        <section>{{ replace .Content "$" "<span class=\"inline-math\">$</span>" | safeHTML }}</section>


@@ 13,5 16,6 @@
        {{- end }}
    </article>
</main>
{{ partial "openring.html" . }}
{{ partial "footer.html" . }}
{{ end }} 

M layouts/partials/header.html => layouts/partials/header.html +3 -1
@@ 10,10 10,12 @@
            <dd><a href="{{ .URL }}">{{ .Identifier }}</a></dd>
            {{- end }}
        </dl>
        <ul>
        <ul class="nav">
            {{- range .context.Site.Menus.main }}
            {{- if ne .Name "Feed" }}
            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
            {{- end }}
            {{- end }}
        </ul>
    </nav>
</header>

A layouts/partials/openring.html => layouts/partials/openring.html +56 -0
@@ 0,0 1,56 @@
<section class="webring">
    <header>
        <h2>Articles from blogs I follow</h2>
    </header>
    <section class="articles">
        <section class="article">
            <header>
                <h3 class="title">
                    <a href="https://drewdevault.com/2020/10/23/Im-handing-wlroots-and-sway-to-Simon.html" target="_blank" rel="noopener">I&#39;m handing over maintenance of wlroots and sway to Simon Ser</a>
                </h3>
            </header>
            <p class="summary">Over the past several months, I’ve been gradually weaning down my role in both
projects, and as a contributor to Wayland in general. I feel that I’ve already
accomplished everything I set out to do with Wayland — and more! I have
been happily using sway as m…</p>
            <small class="source">
                via <a href="https://drewdevault.com">Drew DeVault&#39;s blog</a>
                on <time datetime="2020-10-23">October 23, 2020</time>
            </small>
        </section>
        <section class="article">
            <header>
                <h3 class="title">
                    <a href="https://emersion.fr/blog/2020/status-update-22/" target="_blank" rel="noopener">Status update, October 2020</a>
                </h3>
            </header>
            <p class="summary">Hi all, it’s been a while! I’ve been taking some time off this month: I’ve been
hiking in Corsica (an island in the south of France) for 2 weeks! The path
(called GR20) was very difficult but the gorgeous landscapes made it entirely
worth it. :)

I’ve uploaded…</p>
            <small class="source">
                via <a href="https://emersion.fr/blog/">emersion</a>
                on <time datetime="2020-10-16">October 16, 2020</time>
            </small>
        </section>
        <section class="article">
            <header>
                <h3 class="title">
                    <a href="https://leah.is/posts/mein-roggenmischbrot/" target="_blank" rel="noopener">Mein Roggenmischbrot</a>
                </h3>
            </header>
            <p class="summary">Über die letzten Monate hab ich mich, wie wohl viele, mit dem Brot backen beschäftigt ;)
Nachdem ich auf Mastodon regelmäßig Bilder von meinem „Standardbrot“ gepostet habe, kam immer wieder die Frage nach dem Rezept.
Das möchte ich heute mit euch Teilen. Es…</p>
            <small class="source">
                via <a href="https://leah.is/">Leahs Gedanken</a>
                on <time datetime="2020-09-12">September 12, 2020</time>
            </small>
        </section>
    </section>
    <footer>
        <p class="attribution">Generated by <a href="https://git.sr.ht/~sircmpwn/openring">openring</a></p>
    </footer>
</section>

A static/fonts/ttf/WorkSans-Bold.ttf => static/fonts/ttf/WorkSans-Bold.ttf +0 -0
A static/fonts/ttf/WorkSans-Light.ttf => static/fonts/ttf/WorkSans-Light.ttf +0 -0
A static/fonts/ttf/WorkSans-Medium.ttf => static/fonts/ttf/WorkSans-Medium.ttf +0 -0
A static/fonts/ttf/WorkSans-Regular.ttf => static/fonts/ttf/WorkSans-Regular.ttf +0 -0
A static/fonts/woff/WorkSans-Bold.woff => static/fonts/woff/WorkSans-Bold.woff +0 -0
A static/fonts/woff/WorkSans-Light.woff => static/fonts/woff/WorkSans-Light.woff +0 -0
A static/fonts/woff/WorkSans-Medium.woff => static/fonts/woff/WorkSans-Medium.woff +0 -0
A static/fonts/woff/WorkSans-Regular.woff => static/fonts/woff/WorkSans-Regular.woff +0 -0
A static/fonts/woff2/WorkSans-Bold.woff2 => static/fonts/woff2/WorkSans-Bold.woff2 +0 -0
A static/fonts/woff2/WorkSans-Light.woff2 => static/fonts/woff2/WorkSans-Light.woff2 +0 -0
A static/fonts/woff2/WorkSans-Medium.woff2 => static/fonts/woff2/WorkSans-Medium.woff2 +0 -0
A static/fonts/woff2/WorkSans-Regular.woff2 => static/fonts/woff2/WorkSans-Regular.woff2 +0 -0