Initial

README.md

@@ -1,2 +1,10 @@
-# typo
-A dead simple Hugo theme for your blogs.
+![banner](misc/readme.png)
+
+## Installation
+...
+
+## Features
+...
+
+## Configuration
+...

archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

assets/css/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-Light.woff') format('woff');
+    font-weight: light;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-LightItalic.woff') format('woff');
+    font-weight: light;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-SemiBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Literata';
+    src: url('/fonts/Literata/Literata-SemiBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Monaspace';
+    src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Monaspace';
+    src: url('/fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}

assets/css/main.css

@@ -0,0 +1,251 @@
+/* BASE */
+
+html {
+  scroll-behavior: smooth;
+  padding: 0;
+}
+
+body {
+  font-family: "Literata";
+  font-size: 1rem;
+  color: #222;
+  line-height: 1.3rem;
+  margin: auto;
+  max-width: var(--main-width);
+  padding-left: var(--main-padding);
+  padding-right: var(--main-padding);
+}
+
+.content {
+  min-height: var(--content-height) !important;
+}
+
+h1 {
+  margin-top: var(--h1-margin-top);
+  margin-bottom: var(--h1-margin-bottom);
+  font-size: 2em;
+}
+
+h2 {
+  margin-top: var(--h2-margin-top);
+  margin-bottom: var(--h2-margin-bottom);
+  font-size: 1.5em;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1.2em;
+  margin-top: var(--hx-margin-top);
+  margin-bottom: var(--hx-margin-bottom);
+}
+
+p {
+  margin-top: var(--p-margin-top);
+  margin-bottom: var(--p-margin-bottom);
+}
+
+ul {
+  margin-top: var(--ul-margin-top);
+  margin-bottom: var(--ul-margin-bottom);
+}
+
+li {
+  margin-left: var(--li-indent);
+}
+
+a {
+  text-decoration: underline;
+}
+
+/* Code blocks */
+
+pre {
+  padding: var(--code-padding);
+  overflow: scroll;
+  border-radius: var(--code-border-radius);
+  margin-top: var(--code-margin-top);
+  margin-bottom: var(--code-margin-bottom);
+}
+
+code {
+  -webkit-font-smoothing: antialiased;
+  -moz-font-feature-settings: "liga=1, dlig=1";
+  -ms-font-feature-settings: "liga", "dlig";
+  -webkit-font-feature-settings: "liga", "dlig";
+  -o-font-feature-settings: "liga", "dlig";
+  font-feature-settings: "liga", "dlig";
+  font-variant-ligatures: contextual;
+  font-family: "Monaspace";
+  font-size: .9em;
+}
+
+/* Latex Overflow */
+
+.MathJax {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+/* Footnotes */
+
+.footnotes {
+  margin-top: 3rem;
+  border-style: none;
+}
+
+hr {
+  border: 1px solid black;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+
+/* Header */
+
+.header {
+  padding-top: var(--header-top-gap);
+  margin-bottom: var(--header-bottom-gap);
+}
+
+.header p {
+  font-family: monospace;
+  margin-top: var(--header-menu-top-gap);
+  margin-right: var(--header-menu-side-gap);
+}
+
+.header h1 {
+  font-size: 2.6em;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+/* Footer */
+
+footer {
+  font-size: small;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-height: var(--footer-height);
+}
+
+footer a {
+  font-family: "Monaspace";
+  margin-left: .2rem;
+  margin-right: .2rem;
+}
+
+/* Posts list  */
+
+.post-list-container {
+  margin-bottom: 2rem;
+}
+
+.post-line {
+  margin-bottom: .5rem;
+  display: flex;
+  align-items: baseline;
+}
+
+.post-line p {
+  margin-top: 0rem;
+  margin-bottom: 0rem;
+}
+
+.post-date {
+  font-size: small;
+  font-family: "Monaspace";
+  width: 110px;
+  text-align: right;
+  padding-right: 1rem;
+}
+
+.post-title {
+  margin: 0;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  justify-content: center;
+}
+
+.pagination-control {
+  min-width: 3rem;
+  margin-left: .5rem;
+  margin-right: .5rem;
+  text-align: center;
+  align-items: center;
+}
+
+.page-number {
+  min-width: 3rem;
+  margin-left: .5rem;
+  margin-right: .5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+
+/* Social Icons */
+
+.social-icons {
+  padding: 12px 0;
+  margin-bottom: 3rem;
+}
+
+.social-icons a {
+  text-decoration: none;
+}
+
+.social-icons a:not(:last-of-type) {
+  margin-inline-end: 12px;
+}
+
+.social-icons a svg {
+  height: 20px;
+  width: 20px;
+}
+
+/* Single post page */
+
+.single-intro-container {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.single-title {
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+}
+
+.single-readtime {
+  margin-top: .5rem;
+}
+
+.single-summary {
+  font-style: italic;
+  margin-bottom: 0;
+}
+
+.single-content {
+  margin-bottom: 6rem;
+}
+
+/* Table of contents */
+
+.toc {
+  margin-top: var(--toc-margin-top);
+  margin-bottom: var(--toc-margin-bottom);
+}
+
+.toc ul {
+  margin-top: 0;
+  margin-bottom: .5rem;
+}

assets/css/reset.css

@@ -0,0 +1,117 @@
+*,
+::after,
+::before {
+    box-sizing: border-box;
+}
+
+html {
+    -webkit-tap-highlight-color: transparent;
+    overflow-y: scroll;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+a,
+button,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--primary);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 18px;
+    line-height: 1.6;
+    word-break: break-word;
+    background: var(--theme);
+}
+
+article,
+aside,
+figcaption,
+figure,
+header,
+hgroup,
+main,
+nav,
+section,
+table {
+    display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+ul {
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+body,
+figure,
+ul {
+    margin: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    overflow-x: auto;
+    word-break: keep-all;
+}
+
+button,
+input,
+textarea {
+    padding: 0;
+    font: inherit;
+    background: 0 0;
+    border: 0;
+}
+
+input,
+textarea {
+    outline: 0;
+}
+
+button,
+input[type=button],
+input[type=submit] {
+    cursor: pointer;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill {
+    box-shadow: 0 0 0 50px var(--theme) inset;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}

assets/css/utils.css

@@ -0,0 +1,19 @@
+.flex {
+    display: flex;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.italic {
+    font-style: italic;
+}
+
+.small {
+    font-size: medium;
+}
+
+.monospace {
+    font-family: "Monaspace";
+}

assets/css/vars.css

@@ -0,0 +1,54 @@
+:root {
+    --main-width: 900px;
+    --main-padding: 1rem;
+    --main-padding-bottom: 3rem;
+
+    /* header settings */
+    --header-top-gap: 1.5rem;
+    --header-bottom-gap: 2rem;
+    --header-menu-side-gap: .5rem;
+    --header-menu-top-gap: 1rem;
+
+    /* Typography */
+    --h1-margin-top: 2rem;
+    --h1-margin-bottom: 2rem;
+    --h2-margin-top: 2rem;
+    --h2-margin-bottom: 2rem;
+    --hx-margin-top: 1rem;
+    --hx-margin-bottom: 1rem;
+    --p-margin-top: 1rem;
+    --p-margin-bottom: 1rem;
+    --code-margin-top: 2rem;
+    --code-margin-bottom: 2rem;
+
+    /* List indentation */
+    --li-indent: 1.5rem;
+    --ul-margin-top: 1rem;
+    --ul-margin-bottom: 1rem;
+
+    --toc-margin-top: 2rem;
+    --toc-margin-bottom: 3rem;
+
+    /* code */
+    --code-padding: 1.5rem;
+    --code-border-radius: 20px;
+
+    /* Footer */
+    --footer-height: 3rem;
+
+    /* Content */
+    --content-height: calc(100vh - var(--footer-height));
+}
+
+@media screen and (max-width: 1024px) {
+    :root {
+        --main-width: 750px;
+        --header-top-gap: 1rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    :root {
+        --header-top-gap: .5rem;
+    }
+}

assets/js/main.js

@@ -0,0 +1 @@
+console.log('This site was generated by Hugo.');

content/_index.md

@@ -0,0 +1,4 @@
++++
+title = 'Home'
+draft = false
++++

hugo.toml

@@ -0,0 +1,8 @@
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'typo'
+
+[module]
+[module.hugoVersion]
+extended = false
+min = "0.116.0"

layouts/_default/baseof.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}"
+  dir="{{ or site.Language.LanguageDirection `ltr` }}">
+
+<head>
+  {{ partial "head.html" . }}
+  {{ if .Param "math" }}
+  {{ partialCached "math.html" . }}
+  {{ end }}
+</head>
+
+<body>
+
+  <div class="content">
+    <header>
+      {{ partial "header.html" . }}
+    </header>
+
+    <main class="main">
+      {{ block "main" . }}{{ end }}
+    </main>
+  </div>
+
+  <footer>
+    {{ partial "footer.html" . }}
+  </footer>
+
+</body>
+
+
+</html>

layouts/_default/home.html

@@ -0,0 +1,58 @@
+{{ define "main" }}
+
+{{ .Content }}
+
+{{/* Intro summary section */}}
+{{ if .Site.Params.homeIntro }}
+
+<div class="intro">
+    {{ if .Site.Params.homeIntroTitle }}
+    <h1>{{ .Site.Params.homeIntroTitle }}</h1>
+    {{ end }}
+
+    {{ if .Site.Params.homeIntroContent }}
+    <p>{{ .Site.Params.homeIntroContent | markdownify }}</p>
+    {{ end }}
+</div>
+
+{{ end }}
+
+{{/* Social Icons */}}
+
+{{ with site.Params.social }}
+<div class="social-icons">
+    {{- range . }}
+    <a href="{{ trim .url " " | safeURL }}" target="_blank" rel="noopener noreferrer me"
+        title="{{ (.title | default .name) | title }}">
+        {{ partial "svg.html" . }}
+    </a>
+    {{- end }}
+</div>
+{{ end }}
+
+{{/* Collection Section */}}
+
+{{ if .Site.Params.homeCollection }}
+
+{{ with .Site.Params.homeCollectionTitle}}
+<h1> {{ . }} </h1>
+{{ end }}
+
+{{ $pages := where .Site.RegularPages "Section" .Site.Params.homeCollection }}
+
+{{ $paginationSize := 1}}
+{{ if (gt .Site.Params.paginationSize 0) }}
+{{ $paginationSize = .Site.Params.paginationSize }}
+{{ end }}
+
+{{ $paginator := .Paginate $pages $paginationSize }}
+
+{{ range $index, $page := $paginator.Pages }}
+{{ partial "post-entry.html" $page}}
+{{ end }}
+
+{{ partial "pagination-controls.html" $paginator}}
+
+{{ end }}
+
+{{ end }}

layouts/_default/list.html

@@ -0,0 +1,18 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+{{ .Content }}
+
+{{ $paginationSize := 1}}
+{{ if (gt .Site.Params.paginationSize 0) }}
+{{ $paginationSize = .Site.Params.paginationSize }}
+{{ end }}
+
+{{ $paginator := .Paginate (.Pages) $paginationSize }}
+
+{{ range $index, $page := $paginator.Pages }}
+{{ partial "post-entry.html" $page}}
+{{ end }}
+
+{{ partial "pagination-controls.html" $paginator}}
+
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,45 @@
+{{ define "main" }}
+
+{{/* Intro */}}
+
+<div class="single-intro-container">
+
+  {{/* Title and Summary */}}
+
+  <h1 class="single-title">{{ .Title }}</h1>
+  {{if .Param "summary" }}
+  <p class="single-summary">{{ .Summary }}</p>
+  {{ end }}
+
+  {{/* Reading Time */}}
+
+  <p class="single-readtime">
+    {{if .Date }}
+    {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+    {{ $dateHuman := .Date | time.Format ":date_long" }}
+    <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+    -
+    {{end}}
+    {{if (.Param "readTime")}}
+    {{.ReadingTime}} min
+    {{end }}
+  </p>
+
+</div>
+
+{{/* Table of Content */}}
+
+{{if .Param "toc" }}
+<aside class="toc">
+  <p><strong>Table of contents</strong></p>
+  {{ .TableOfContents }}
+</aside>
+{{ end }}
+
+{{/* Actual document content */}}
+
+<div class="single-content">
+  {{ .Content }}
+</div>
+
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,5 @@
+<p>Powered by
+    <a href="https://gohugo.io/">Hugo</a>
+    {{/* and
+    <a href="https://github.com/tomfran/typo">tomfran/typo</a> */}}
+</p>

layouts/partials/head.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
+{{ partialCached "head/css.html" . }}
+{{ partialCached "head/js.html" . }}
+
+
+{{ if hugo.IsProduction }}
+{{ template "_internal/google_analytics.html" . }}
+{{ end }}

layouts/partials/head/css.html

@@ -0,0 +1,11 @@
+{{- $CSS := slice
+(resources.Get "css/reset.css")
+(resources.Get "css/vars.css")
+(resources.Get "css/utils.css")
+(resources.Get "css/fonts.css")
+(resources.Get "css/main.css") |
+resources.Concat "assets/combined.css" |
+minify |
+fingerprint }}
+
+<link rel="stylesheet" href="{{ $CSS.RelPermalink }}" media="all">

layouts/partials/head/js.html

@@ -0,0 +1,12 @@
+{{- with resources.Get "js/main.js" }}
+  {{- if eq hugo.Environment "development" }}
+    {{- with . | js.Build }}
+      <script src="{{ .RelPermalink }}"></script>
+    {{- end }}
+  {{- else }}
+    {{- $opts := dict "minify" true }}
+    {{- with . | js.Build $opts | fingerprint }}
+      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
+    {{- end }}
+  {{- end }}
+{{- end }}

layouts/partials/header.html

@@ -0,0 +1,20 @@
+{{/* Header */}}
+
+<div class="header">
+    <h1>{{ site.Title }}</h1>
+
+    <div class="flex">
+        {{ $currentPage := . }}
+
+        {{ with site.Params.menu }}
+        {{ range . }}
+        <p class="small {{ if eq .url $currentPage.Path }} bold {{end}}">
+            <a href="{{.url}}">
+                /{{.name }}
+            </a>
+        </p>
+        {{ end }}
+        {{ end }}
+
+    </div>
+</div>

layouts/partials/math.html

@@ -0,0 +1,9 @@
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+<script>
+  MathJax = {
+    tex: {
+      displayMath: [['\\[', '\\]'], ['$$', '$$']],
+      inlineMath: [['\\[', '\\]'], ['$', '$']]
+    }
+  };
+</script>

layouts/partials/pagination-controls.html

@@ -0,0 +1,23 @@
+{{ if gt .TotalPages 1 }}
+<div class="pagination">
+    <div class="pagination-control">
+        {{ if .HasPrev }}
+        <a href="{{ .Prev.URL | absURL }}">
+            prev
+        </a>
+        {{ end }}
+    </div>
+    <div class="page-number">
+        <p>
+            {{ .PageNumber }}/{{ .TotalPages }}
+        </p>
+    </div>
+    <div class="pagination-control">
+        {{ if .HasNext }}
+        <a href="{{ .Next.URL | absURL }}">
+            next
+        </a>
+        {{ end }}
+    </div>
+</div>
+{{ end }}

layouts/partials/post-entry.html

@@ -0,0 +1,4 @@
+<div class="post-line">
+    <p class="post-date">{{ .Date.Format "2 Jan 2006" }} </p>
+    <p class="post-title"> <a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
+</div>

theme.toml

@@ -0,0 +1,14 @@
+name = 'Typo'
+license = 'MIT'
+licenselink = 'https://github.com/tomfran/typo/LICENSE'
+description = 'A simple Hugo theme'
+
+homepage = 'https://github.com/tomfran/typo'
+
+demosite = 'https://tomfran.github.io/'
+
+tags = ['blog']
+
+[author]
+name = 'Francesco Tomaselli'
+homepage = 'https://tomfran.github.io/'