commit
080cd3f1d8
32 changed files with 1239 additions and 0 deletions
@ -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. |
|||
@ -0,0 +1 @@ |
|||
# Theme for www.itix.fr |
|||
@ -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 |
|||
@ -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 |
|||
@ -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 }} |
|||
@ -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> |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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> |
|||
@ -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> |
|||
@ -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 }} |
|||
@ -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> |
|||
|
|||
@ -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"> |
|||
© {{ .Site.Home.Date.Year }} {{.Site.Title}} |
|||
</div> |
|||
</div> |
|||
<div class="menu-overlay"> |
|||
</div> |
|||
</nav> |
|||
@ -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> |
|||
|
|||
</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> |
|||
|
|||
</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> |
|||
@ -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> |
|||
@ -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 }} |
|||
@ -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 }} |
|||
@ -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; |
|||
} |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
|
After Width: | Height: | Size: 248 B |
@ -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…
Reference in new issue