Browse Source

initial commit

main
Nicolas Massé 5 years ago
commit
080cd3f1d8
  1. 21
      LICENSE
  2. 1
      README.md
  3. 24
      i18n/en.yaml
  4. 24
      i18n/fr.yaml
  5. 9
      layouts/404.html
  6. 12
      layouts/_default/baseof.html
  7. 14
      layouts/_default/section.html
  8. 17
      layouts/_default/single.html
  9. 13
      layouts/_default/taxonomy.html
  10. 14
      layouts/_default/terms.html
  11. 13
      layouts/blog/list.html
  12. 24
      layouts/index.html
  13. 11
      layouts/partials/article-headline.html
  14. 40
      layouts/partials/head.html
  15. 13
      layouts/partials/lang-detection.html
  16. 36
      layouts/partials/mathjax.html
  17. 62
      layouts/partials/menu.html
  18. 38
      layouts/partials/post-metadata.html
  19. 15
      layouts/partials/toolbar.html
  20. 14
      layouts/speaking/list.html
  21. 14
      layouts/writing/list.html
  22. 773
      static/css/itix.css
  23. BIN
      static/fonts/JetBrainsMono-Regular.ttf
  24. BIN
      static/fonts/JetBrainsMono-Regular.woff
  25. BIN
      static/fonts/JetBrainsMono-Regular.woff2
  26. BIN
      static/fonts/SourceSansPro-Regular.ttf
  27. BIN
      static/fonts/SourceSerifPro-Regular.ttf
  28. BIN
      static/fonts/material-icons.ttf
  29. BIN
      static/fonts/material-icons.woff2
  30. 16
      static/icons/en.svg
  31. 2
      static/icons/fr.svg
  32. 19
      theme.toml

21
LICENSE

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Nicolas Massé
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

1
README.md

@ -0,0 +1 @@
# Theme for www.itix.fr

24
i18n/en.yaml

@ -0,0 +1,24 @@
- id: last_modify_on
translation: Last modified on
- id: published_on
translation: Published on
- id: date_format
translation: "January 2, 2006"
- id: toc
translation: Table of contents
- id: back_to_top
translation: Top of the page
- id: minutes
translation:
one: '{{ .Count }} minute'
other: '{{ .Count }} minutes'
- id: continue_reading
translation: Continue reading
- id: articles_related_to
translation: Articles related to
- id: recent_articles
translation: Recent articles
- id: not_found
translation: This page does not exist!
- id: go_home
translation: Go Home

24
i18n/fr.yaml

@ -0,0 +1,24 @@
- id: last_modify_on
translation: Dernière modification le
- id: published_on
translation: Publié le
- id: date_format
translation: "02/01/2006"
- id: toc
translation: Sommaire
- id: back_to_top
translation: Retour en haut de la page
- id: minutes
translation:
one: '{{ .Count }} minute'
other: '{{ .Count }} minutes'
- id: continue_reading
translation: Continuer la lecture
- id: articles_related_to
translation: Articles concernant
- id: recent_articles
translation: Articles récents
- id: not_found
translation: Cette page n'existe pas !
- id: go_home
translation: Retour à la page d'accueil

9
layouts/404.html

@ -0,0 +1,9 @@
{{ define "main" }}
<!-- The "404" layout prints the classical 404 error -->
<article class="post">
<header>
<h1>{{ i18n "not_found" }}</h1>
</header>
<p><a href="{{ .Site.Home.RelPermalink }}">{{ i18n "go_home" }}</a></p>
</article>
{{ end }}

12
layouts/_default/baseof.html

@ -0,0 +1,12 @@
<!-- the baseof.html layout is the entrypoint for every page -->
<!DOCTYPE html>
<html lang="{{ .Lang }}">
{{ partial "head.html" . }}
<body>
{{ partial "menu.html" . }}
{{ partial "toolbar.html" . }}
<main>
{{ block "main" . }}{{- end }}
</main>
</body>
</html>

14
layouts/_default/section.html

@ -0,0 +1,14 @@
{{ define "main" }}
<!-- the section.html layout is used to render a list of articles under writing, speaking, etc. -->
<article class="section">
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
<ul>
{{ range (sort .Pages "Date").Reverse }}
<li><a href="{{.RelPermalink}}">{{ .Title }}</a></li>
{{ end }}
</ul>
</article>
{{ end }}

17
layouts/_default/single.html

@ -0,0 +1,17 @@
{{ define "main" }}
<!-- The "single" layout prints a single post -->
<article class="post">
<header>
<h1>{{ .Title }}</h1>
{{- if .Params.description }}
<h4>{{ .Params.description }}</h4>
{{- end }}
{{ partial "post-metadata.html" (dict "current" . "parent" .) -}}
</header>
{{ .Content }}
{{- if and (not .Lastmod.IsZero) (ne .Lastmod .PublishDate) }}
<hr width="100%" id="EOF">
<p>{{ i18n "last_modify_on" }} {{ .Lastmod.Format (i18n "date_format") }}</p>
{{- end }}
</article>
{{ end }}

13
layouts/_default/taxonomy.html

@ -0,0 +1,13 @@
{{ define "main" }}
<!-- the taxonomy.html layout is used to render the list of posts having a certain tag, topic, etc. -->
<article class="article-list">
<header>
<h1>{{ .Title }}</h1>
</header>
{{ i18n "articles_related_to" }} <a href="{{.Parent.RelPermalink}}">{{.Parent.Title}}</a> / <a href="{{.RelPermalink}}">{{ .Title }}</a>:
{{ .Content }}
{{ range (sort .Pages "Title") }}
{{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}}
{{ end }}
</article>
{{ end }}

14
layouts/_default/terms.html

@ -0,0 +1,14 @@
{{ define "main" }}
<!-- the terms.html layout is used to render the list of values of a certain tag, topic, etc. -->
<article class="terms">
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
<ul>
{{ range sort .Pages "Title" }}
<li><a href="{{.RelPermalink}}">{{ .Title }}</a></li>
{{ end }}
</ul>
</article>
{{ end }}

13
layouts/blog/list.html

@ -0,0 +1,13 @@
{{ define "main" }}
<!-- the blog/list.html layout is used to render the list of posts under "blog" -->
<article class="article-list">
<header>
<h1>Articles</h1>
</header>
{{ .Content }}
{{ range (sort .Pages "Date").Reverse }}
{{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}}
{{ end }}
</article>
{{ end }}

24
layouts/index.html

@ -0,0 +1,24 @@
{{ define "main" }}
<!-- the index.html layout is used only to render the home page -->
<div>
<article class="bio">
<!--
<header>
<h1>{{ .Title }}</h1>
{{ if .Params.description }}
<h2>{{ .Params.description }}</h2>
{{ end }}
</header>
-->
{{ .Content }}
</article>
<article class="article-list">
<header>
<h1>{{ i18n "recent_articles" }}</h1>
</header>
{{ range first 5 (sort ((.Site.GetPage "/blog").Pages) "Date").Reverse }}
{{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}}
{{ end }}
</article>
</div>
{{ end }}

11
layouts/partials/article-headline.html

@ -0,0 +1,11 @@
<section>
<h4><a href="{{ .current.RelPermalink }}">{{ .current.Title }}
{{- partial "lang-detection.html" .current -}}
{{ if .current.Scratch.Get "en_article_in_fr_site" }}
<img src="/icons/en.svg" class="tiny-flag" alt="en flag">
{{ end }}
</a></h4>
{{- partial "post-metadata.html" . -}}
<p>{{ .current.Summary }} <a href="{{ .current.RelPermalink }}" class="continue-reading">{{ i18n "continue_reading" }}</a></p>
</section>

40
layouts/partials/head.html

@ -0,0 +1,40 @@
<head>
<title>{{.Title}}</title>
<meta charset="utf-8">
{{ if .IsHome -}}
<meta name="description" content="{{ .Site.Params.description }}">
{{- else -}}
<meta name="description" content="{{ .Params.description }}">
{{- end }}
<meta name="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="telephone=no" name="format-detection">
<meta name="renderer" content="webkit">
<meta name="theme-color" content="#ffffff">
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}
<!-- The chroma syntax highlighter needs a separate CSS that can be generated using "hugo gen chromastyles --style=your-style > static/css/chroma.css" -->
<link rel="stylesheet" href="/css/chroma.css">
<link rel="stylesheet" href="/css/itix.css">
{{- if .Params.enableMathJax -}}
{{- partial "mathjax.html" . -}}
{{- end -}}
{{- partial "lang-detection.html" . -}}
{{- if .IsTranslated -}}
{{- range .Translations -}}
{{- if .Scratch.Get "en_article_in_fr_site" -}}
<link rel="canonical" href="{{ .Permalink }}">
<meta name="robots" content="noindex">
{{ else }}
<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}">
{{ end -}}
{{- end -}}
{{- end -}}
</head>

13
layouts/partials/lang-detection.html

@ -0,0 +1,13 @@
{{ if and .IsTranslated (eq .Lang "fr") }}
<!-- Try to compare files by MD5 fingerprint. -->
{{ if (index .AllTranslations 0).File }}
{{ if eq (index .AllTranslations 0).File.UniqueID (index .AllTranslations 1).File.UniqueID }}
{{ .Scratch.Set "en_article_in_fr_site" true }}
{{ end }}
{{ else }}
<!-- Sometimes there is no file though. In that case, compare the content. -->
{{ if eq (index .AllTranslations 0).Plain (index .AllTranslations 1).Plain }}
{{ .Scratch.Set "en_article_in_fr_site" true }}
{{ end }}
{{ end }}
{{ end }}

36
layouts/partials/mathjax.html

@ -0,0 +1,36 @@
<!-- From https://note.qidong.name/2018/03/hugo-mathjax/ -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script"
async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
MathJax.Hub.Queue(function() {
// Fix <code> tags after MathJax finishes running. This is a
// hack to overcome a shortcoming of Markdown. Discussion at
// https://github.com/mojombo/jekyll/issues/199
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>

62
layouts/partials/menu.html

@ -0,0 +1,62 @@
<nav class="menu">
<!--
-- A fake / hidden checkbox is used as click reciever,
-- so you can use the :checked selector on it.
-->
<input type="checkbox" class="hamburger-menu" />
<!-- Some spans to draw a hamburger. -->
<div class="hamburger-menu"></div>
<div class="hamburger-menu"></div>
<div class="hamburger-menu"></div>
<!-- And the site title for the mobile browsers -->
<div class="mobile-title">{{- .Site.Title -}}</div>
<div class="menu-content">
{{- if .IsHome }}
<a class="menu-head active" href="{{ .Site.Home.RelPermalink }}">
{{ else }}
<a class="menu-head" href="{{ .Site.Home.RelPermalink }}">
{{ end -}}
<div class="menu-title">
{{- .Site.Title -}}
</div>
{{- with .Site.Params.subtitle -}}
<div class="menu-subtitle">
{{- . -}}
</div>
{{- end -}}
</a>
<div class="menu-link-list">
{{- $currentPage := . -}}
{{- range .Site.Menus.main }}
<a class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}" href="{{ .URL| relLangURL }}">
{{- .Name -}}
</a>
{{- end }}
</div>
<div class="menu-lang">
{{- if .IsTranslated -}}
<!-- Try to redirect the user to the translated page if possible -->
{{- range .AllTranslations }}
<a href="{{ .RelPermalink }}"><img src="/icons/{{ .Lang }}.svg" class="tiny-flag" alt="{{ .Lang }} flag"></a>
{{- end -}}
{{- else -}}
<!-- Otherwise, redirect it to the homepage -->
{{- range site.Sites }}
<a href="{{ .Home.RelPermalink }}"><img src="/icons/{{ .Language.Lang }}.svg" class="tiny-flag" alt="{{ .Language.Lang }} flag"></a>
{{- end -}}
{{- end }}
</div>
<div class="menu-footer">
&copy; {{ .Site.Home.Date.Year }} {{.Site.Title}}
</div>
</div>
<div class="menu-overlay">
</div>
</nav>

38
layouts/partials/post-metadata.html

@ -0,0 +1,38 @@
<div class="post-metadata">
{{- with .current.PublishDate }}
<span class="publication-date">
{{ i18n "published_on" }}
<time itemprop="published-on" date-time="{{ .Format "2006-01-02" }}">{{ .Format (i18n "date_format") }}</time>
</span>
{{- end }}
{{- if gt .current.Params.topics 0 -}}
{{- range .current.Params.topics -}}
{{- if or (not $.parent.Data.topic) (ne . $.parent.Data.Term) }}
<span class="topic">
<i class="material-icons">link</i><a href="{{ "/topics/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
&nbsp;
</span>
{{- end -}}
{{- end -}}
{{- end }}
{{- if gt .current.Params.opensource 0 -}}
{{- range .current.Params.opensource -}}
{{- if or (not $.parent.Data.opensource) (ne . $.parent.Data.Term) }}
<span class="opensource">
<i class="material-icons">label</i><a href="{{ "/opensource/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
&nbsp;
</span>
{{- end -}}
{{- end -}}
{{- end }}
{{- if eq .current.Type "blog" }}
<span class="reading-time">
<i class="material-icons">schedule</i>
{{- $minutes := .current.ReadingTime -}}
{{- if gt $minutes 0 -}}
{{- i18n "minutes" $minutes -}}
{{- end -}}
</span>
{{- end }}
</div>

15
layouts/partials/toolbar.html

@ -0,0 +1,15 @@
<aside class="toolbar">
<!-- Sometimes Hugo will generate an empty TOC enclosed within a nav element. -->
<!-- 32 is the length of this empty output. -->
{{- if gt (len .TableOfContents) 32 }}
<div class="toc">
<h4>{{ i18n "toc" }}</h4>
{{ .TableOfContents }}
</div>
{{- end }}
<div class="actions">
<a href="#top" class="action" title="{{ i18n "back_to_top" }}">
<i class="material-icons">vertical_align_top</i>
</a>
</div>
</aside>

14
layouts/speaking/list.html

@ -0,0 +1,14 @@
{{ define "main" }}
<!-- the speaking/list.html layout is used to render the list of posts under "speaking" -->
<article class="article-list">
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
<ul>
{{ range (sort .Pages "Date").Reverse }}
<li>{{ .Date.Format "January 2006" }} - <a href="{{.RelPermalink}}">{{ .Title }}</a></li>
{{ end }}
</ul>
</article>
{{ end }}

14
layouts/writing/list.html

@ -0,0 +1,14 @@
{{ define "main" }}
<!-- the writing/list.html layout is used to render the list of posts under "writing" -->
<article class="article-list">
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
<ul>
{{ range (sort .Pages "Date").Reverse }}
<li>{{ .Date.Format "January 2006" }} - <a href="{{.RelPermalink}}">{{ .Title }}</a></li>
{{ end }}
</ul>
</article>
{{ end }}

773
static/css/itix.css

@ -0,0 +1,773 @@
:root {
/*
* Theme colors
*/
--main-color-decimal: 25, 118, 210; /* main-color */
--main-color: var(--main-color-decimal);
--main-background-color: #fcfcfc;
--alternate-text-color: #145ca4;
--main-text-color: #092949; /* 50% darker than main-color */
--active-menu-background-color: #f4f8fb;
--active-menu-color: #0e4377;
--active-menu-border-color: #74abe3;
--hover-menu-background-color: #f4f8fb;
--hover-menu-color: #0e4377;
--hover-menu-border-color: #74abe3;
--post-metadata-color: #555;
--text-selection-background-color: #a2c7ec;
--quote-background-color: #f0f5fa;
--quote-border-color: #589bdd;
--codeblock-background-color: #ebf2f9;
--toc-background-color: #f0f5fa;
/*
* Layout
*/
--heading1-size: 30px;
--heading-diff: 3px;
--menu-container-width: 25%;
--toolbar-container-width: 25%;
/*
* Fonts
*/
--default-font-list: "Source Serif Pro";
--mono-font-list: "JetBrains Mono", monospace;
--sans-preferred-font-list: "Source Sans Pro";
}
/*
* Fonts
*/
@font-face{
font-family: 'JetBrains Mono';
src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
url('/fonts/JetBrainsMono-Regular.woff') format('woff'),
url('/fonts/JetBrainsMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face{
font-family: 'Source Serif Pro';
src: url('/fonts/SourceSerifPro-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face{
font-family: 'Source Sans Pro';
src: url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/fonts/material-icons.woff2') format('woff2'),
url('/fonts/material-icons.ttf') format('truetype');
}
/*
* The Google "Material Icons" font is used to render the tag icons, the
* "back to top" link, etc.
*/
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
/*
* General settings
*/
::selection {
/* Text selection uses the theme main color with some transparency */
background: var(--text-selection-background-color);
}
body {
background: var(--main-background-color);
padding: 0;
margin: 0;
font-family: var(--default-font-list);
color: var(--main-text-color);
}
* {
/* By default in the CSS box model, the width and height you assign to an
* element is applied only to the element's content box. If the element has
* any border or padding, this is then added to the width and height to arrive
* at the size of the box that's rendered on the screen. This means that when
* you set width and height, you have to adjust the value you give to allow
* for any border or padding that may be added.
*
* border-box tells the browser to account for any border and padding in the
* values you specify for an element's width and height. If you set an element's
* width to 100 pixels, that 100 pixels will include any border or padding you
* added, and the content box will shrink to absorb that extra width.
* This typically makes it much easier to size elements.
*/
box-sizing: border-box;
}
/*
* Heading and figure numbering
*/
main, #TableOfContents {
/*
* all counters need to be specified on one single line
* and they have to be reset on an enclosing element
*/
counter-reset: h2 figcaption;
}
h2::before, #TableOfContents > ul > li::before {
content: counter(h2) ".\0000a0\0000a0"; /* \0000a0 => Non-breakable space */
counter-increment: h2;
}
h2, #TableOfContents > ul > li {
counter-reset: h3;
}
h3::before, #TableOfContents > ul > li > ul > li::before {
content: counter(h2) "." counter(h3) ".\0000a0\0000a0";
counter-increment: h3;
}
figcaption::before {
content: "Figure " counter(figcaption) " :";
counter-increment: figcaption;
}
/*
* Main content formatting
*/
h1, h2, h3 {
font-weight: bold;
}
h1 {
font-size: var(--heading1-size);
margin: 20px auto;
}
h2 {
font-size: calc(var(--heading1-size) - 2 * var(--heading-diff));
margin: 20px auto;
}
h3 {
font-size: calc(var(--heading1-size) - 3 * var(--heading-diff));
margin: 20px auto;
}
h4 {
font-size: calc(var(--heading1-size) - 3 * var(--heading-diff));
padding: 20px auto;
}
h5 {
font-size: calc(var(--heading1-size) - 3 * var(--heading-diff)) - 1;
padding: 10px auto;
}
h6 {
font-size: calc(var(--heading1-size) - 3 * var(--heading-diff)) - 2;
padding: 10px auto;
}
figure {
margin: 0;
}
figure figcaption {
font-style: italic;
}
ul {
list-style-type: "\2013\0000a0";
list-style-position: outside;
}
textarea,
select,
input,
button {
outline: none !important;
}
table {
table-layout: fixed;
overflow-x: scroll;
}
button {
cursor: hand;
cursor: pointer;
}
blockquote {
padding: 10px 20px;
border-left: 3px solid var(--quote-border-color);
color: var(--alternate-text-color);
background: var(--quote-background-color);
}
blockquote p {
margin-bottom: 0;
}
blockquote * {
color: var(--alternate-text-color);
}
a {
color: var(--main-color);
}
a:hover {
color: var(--alternate-text-color);
}
/*
* Code block
*/
pre.chroma {
/* Overide the default chroma background color with ours */
background: var(--codeblock-background-color);
}
/* Code block (three backticks in markdown) */
pre {
background: var(--codeblock-background-color);
padding: 12px 15px;
border-radius: 5px;
font-family: var(--mono-font-list);
/* Do not wrap lines of code */
overflow-x: hidden;
}
/* Inline code (single backticks in markdown) */
code {
color: var(--alternate-text-color);
background: var(--codeblock-background-color) !important;
padding: 2px 5px;
border-radius: 3px;
font-family: var(--mono-font-list);
}
/*
* And because there is a code tag inside a pre tag for Markdown code blocks,
* we need to overide some properties
*/
pre code {
background: none !important;
font-family: var(--mono-font-list) !important;
padding: 0;
}
pre:hover {
/* Show the horizontal scroll bar when hovering code (if needed) */
overflow-x: auto;
}
/*
* i18n
*/
.tiny-flag {
height: 0.9rem;
vertical-align: middle;
margin-left: 5px;
margin-right: 5px;
}
/*
* Article list
*/
.article-list p {
/* Move the excerpt closer to the metadata */
margin-top: 0.5em;
/* Add spacing around each item of the list */
margin-bottom: 2.5em;
}
.article-list h4 {
/* Move the title closer to the metadata */
margin-bottom: 0.5em;
}
.article-list .post-metadata {
/* Fade the metadata */
color: var(--post-metadata-color);
}
.article-list .continue-reading {
/* Leave some space between the excerpt and the "continue reading" link */
margin-left: 0.5em;
}
/*
* Post Metadata (valid for the "list" and "single" views)
*/
.post-metadata .material-icons {
vertical-align: sub;
margin-right: 3px;
margin-left: 5px;
}
.post-metadata time {
/* Leave some space between publication date and taxonomies */
margin-right: 20px;
}
article .post-metadata {
/* Leave some space between the metadata and the title */
margin-top: 20px;
}
/*
* Single post layout
*/
article {
padding: 50px 35px 20px 35px;
font-size: 16px;
line-height: 1.5em;
}
article img {
max-width: 100%;
border-radius: 5px;
overflow: hidden;
}
article p {
text-align: justify;
text-justify: inter-word;
}
article header {
padding-bottom: 30px;
font-weight: 600;
font-style: normal;
line-height: 1.5em;
/* Align the site title with the article title */
padding-top: 11px;
}
/* Article title */
article header h1 {
font-size: 30px;
margin: 0;
}
/* Article subtitle */
article header h4 {
font-size: 18px;
opacity: 0.6;
padding: 0px 0 8px 0;
}
/*
* Menu (left side)
*/
.menu-lang {
padding-right: 28px;
}
.menu-head, .menu-link-list a, .menu-head:hover, .menu-link-list a:hover {
display: block;
text-decoration: none !important;
cursor: hand;
cursor: pointer;
border-right: 2px solid transparent;
}
.menu-head.active, .menu-link-list a.active {
border-right: 2px solid var(--active-menu-border-color);
background: var(--active-menu-background-color);
color: var(--active-menu-color);
}
.menu-head:hover, .menu-link-list a:hover {
border-right: 2px solid var(--hover-menu-border-color);
background: var(--hover-menu-background-color);
color: var(--hover-menu-color);
}
.menu-footer {
padding: 20px 30px 0 20px;
font-size: 12px;
}
.menu-head {
padding: 30px 28px 30px 20px;
margin-bottom: 10px;
color: var(--main-text-color);
}
.menu-title {
--menu-title-size: 30px;
font-size: var(--menu-title-size);
line-height: calc(var(--menu-title-size) * 1.4);
}
.menu-subtitle {
margin-top: 8px;
font-size: 18px;
}
.menu-link-list {
flex-grow: 1;
}
.menu-link-list a {
font-size: 20px;
margin-bottom: 10px;
padding: 8px 28px 8px 30px;
color: var(--main-text-color);
}
.menu-content {
position: fixed;
top: 0;
height: 100vh;
width: var(--menu-container-width);
text-align: right;
font-family: var(--sans-preferred-font-list);
padding: 20px 0 50px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
/* Below the hamburger menu but on top of the overlay */
z-index: 253;
}
/*
* Hamburger menu
*/
.menu input.hamburger-menu {
display: block;
width: 40px;
height: 32px;
position: fixed;
top: 20px;
left: 20px;
margin: 0;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 255; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Draw the hamburger
*/
.menu div.hamburger-menu {
width: 32px;
height: 4px;
position: fixed;
left: 24px;
background: var(--main-text-color);
border-radius: 3px;
z-index: 254;
transform-origin: center;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
.menu div.hamburger-menu:nth-child(2) {
top: 25px;
}
.menu div.hamburger-menu:nth-child(3) {
top: 34px;
}
.menu div.hamburger-menu:nth-child(4) {
top: 43px;
}
/* Transform all the slices of hamburger into a crossmark. */
.menu input.hamburger-menu:checked ~ div.hamburger-menu:nth-child(2) {
opacity: 1;
transform: translate(0, 9px) rotate(45deg);
}
/* But let's hide the middle one. */
.menu input.hamburger-menu:checked ~ div.hamburger-menu:nth-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/* And the last one should go the other direction */
.menu input.hamburger-menu:checked ~ div.hamburger-menu:nth-child(4) {
transform: translate(0, -9px) rotate(-45deg);
}
/* On mobile browsers, keep a title displayed on top */
.menu .mobile-title {
padding: 20px 80px 20px 80px;
margin: 0;
width: 100%;
height: 80px;
line-height: 40px; /* line-height = height - padding-top - padding-bottom */
text-align: center;
font-size: calc(var(--heading1-size) - 3 * var(--heading-diff));
font-weight: bold;
position: fixed;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
background-color: var(--main-background-color);
}
/* But hide them by default. They will be uncovered when needed by media queries */
.menu .hamburger-menu, .menu .mobile-title {
display: none;
}
/*
* Toolbar (right side)
*/
.toolbar {
position: fixed;
top: 0;
right: 0;
width: var(--toolbar-container-width);
font-family: var(--sans-preferred-font-list);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.actions {
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
}
.actions .action {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
width: 64px;
cursor: hand;
cursor: pointer;
padding: 15px 0;
}
.actions a {
text-decoration: none;
}
.actions .material-icons {
font-size: 2em;
}
@media screen {
/*
* Main part of the page (center)
*
* Enclosed in @media screen block because this style is not desired for
* printing.
*/
main {
padding-left: var(--menu-container-width);
padding-right: var(--toolbar-container-width);
width: 100%;
min-height: 100vh;
}
/* Immediate children of main gets a left/right shadow */
main > * {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
min-height: 100vh;
}
}
/*
* Table of content (within the toolbar on the right)
*/
.toc {
float: right;
border-radius: 5px;
margin-left: 30px;
margin-right: 60px;
margin-top: 30px;
max-width: 260px;
max-height: 80vh;
overflow: auto;
background: var(--toc-background-color);
padding: 20px;
font-size: 16px;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1.7em;
}
.toc h4 {
text-align: center;
margin: 0 0 10px 0;
}
/* Mathjax container */
mjx-container {
overflow-y: hidden !important;
}
/*
* Reactive tweaks
*/
@media screen and (max-width: 1440px) {
:root {
--menu-container-width: 20%;
}
}
@media screen and (max-width: 1280px) {
.toc {
display: none;
}
:root {
--toolbar-container-width: 5%;
}
}
@media screen and (max-width: 1140px) {
article {
padding: 30px 20px 20px 20px;
}
main {
padding: 0;
min-height: unset;
}
.toolbar {
display: none;
}
.toc {
line-height: 2em;
float: none;
margin-top: 30px;
margin-left: 0;
margin-right: 0;
}
/*
* On mobile devices, there are no :hover events. So we must always
* propose horizontal scrollbars when needed.
*/
pre {
overflow-x: auto;
}
.menu .hamburger-menu, .menu .mobile-title {
display: block;
}
/*
* On mobile, leave some room above the article so that the title + hamburger
* menu do not hide the article title.
*/
main > *:first-child {
padding-top: 110px;
}
.menu .menu-content {
width: 300px;
height: 100vh;
background-color: var(--main-background-color);
position: fixed;
transform: translate(-300px, 0);
transition: transform 0.2s linear;
}
.menu .menu-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transition: background-color 0.2s linear;
/*
* Put the overlay on the bottom of the stack so that it does not catch
* click events.
*/
z-index: -1;
}
/*
* When the hamburger menu is clicked, show the menu content and enable
* the overlay that hides the article content.
*/
.menu input.hamburger-menu:checked ~ .menu-content {
transform: none;
}
.menu input.hamburger-menu:checked ~ .menu-overlay {
/* Semi transparent background */
background-color: rgba(0, 0, 0, 0.5);
/* Below the hamburger menu, the menu content but over the article content */
z-index: 250;
}
}
/*
* Tweaks for printing
*/
@media print {
.menu, .menu-content, .hamburger-menu, .toolbar {
display: none !important;
}
/* Since you cannot scroll horizontally on a paper, wrap the code blocks */
pre {
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
}

BIN
static/fonts/JetBrainsMono-Regular.ttf

Binary file not shown.

BIN
static/fonts/JetBrainsMono-Regular.woff

Binary file not shown.

BIN
static/fonts/JetBrainsMono-Regular.woff2

Binary file not shown.

BIN
static/fonts/SourceSansPro-Regular.ttf

Binary file not shown.

BIN
static/fonts/SourceSerifPro-Regular.ttf

Binary file not shown.

BIN
static/fonts/material-icons.ttf

Binary file not shown.

BIN
static/fonts/material-icons.woff2

Binary file not shown.

16
static/icons/en.svg

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="s">
<path d="M0,0 v30 h60 v-30 z"/>
</clipPath>
<clipPath id="t">
<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<g clip-path="url(#s)">
<path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 672 B

2
static/icons/fr.svg

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"><rect width="900" height="600" fill="#ED2939"/><rect width="600" height="600" fill="#fff"/><rect width="300" height="600" fill="#002395"/></svg>

After

Width:  |  Height:  |  Size: 248 B

19
theme.toml

@ -0,0 +1,19 @@
name = "ITIX"
license = "MIT"
licenselink = "https://github.com/nmasse-itix/hugo-theme-itix/blob/master/LICENSE"
description = "Theme of my personal site: www.itix.fr"
homepage = "https://www.itix.fr/"
tags = ["blog"]
features = ["mobile","elegant"]
min_version = "0.59.0"
[author]
name = "Nicolas Massé"
homepage = "https://www.itix.fr/"
# If porting an existing theme
[original]
name = "amazingrise"
homepage = "https://amazingrise.net/"
repo = "https://github.com/amazingrise/hugo-theme-diary"
Loading…
Cancel
Save