commit 080cd3f1d8109395648458fe6b47f7e217a9b0b3 Author: Nicolas MASSE Date: Tue Dec 22 17:07:46 2020 +0100 initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9e18be0 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..c2ab83b --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Theme for www.itix.fr diff --git a/i18n/en.yaml b/i18n/en.yaml new file mode 100644 index 0000000..e5d30d6 --- /dev/null +++ b/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 diff --git a/i18n/fr.yaml b/i18n/fr.yaml new file mode 100644 index 0000000..6e86f95 --- /dev/null +++ b/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 diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..a1f13c8 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,9 @@ +{{ define "main" }} + +
+
+

{{ i18n "not_found" }}

+
+

{{ i18n "go_home" }}

+
+{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..a08baf9 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,12 @@ + + + +{{ partial "head.html" . }} + +{{ partial "menu.html" . }} +{{ partial "toolbar.html" . }} +
+{{ block "main" . }}{{- end }} +
+ + diff --git a/layouts/_default/section.html b/layouts/_default/section.html new file mode 100644 index 0000000..38234e3 --- /dev/null +++ b/layouts/_default/section.html @@ -0,0 +1,14 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+
+ {{ .Content }} + +
+{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..1e228fd --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,17 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+ {{- if .Params.description }} +

{{ .Params.description }}

+ {{- end }} + {{ partial "post-metadata.html" (dict "current" . "parent" .) -}} +
+ {{ .Content }} + {{- if and (not .Lastmod.IsZero) (ne .Lastmod .PublishDate) }} +
+

{{ i18n "last_modify_on" }} {{ .Lastmod.Format (i18n "date_format") }}

+ {{- end }} +
+{{ end }} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html new file mode 100644 index 0000000..76eb64a --- /dev/null +++ b/layouts/_default/taxonomy.html @@ -0,0 +1,13 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+
+ {{ i18n "articles_related_to" }} {{.Parent.Title}} / {{ .Title }}: + {{ .Content }} + {{ range (sort .Pages "Title") }} + {{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}} + {{ end }} +
+{{ end }} diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 0000000..5fd4900 --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,14 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+
+ {{ .Content }} + +
+{{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html new file mode 100644 index 0000000..5ecfacf --- /dev/null +++ b/layouts/blog/list.html @@ -0,0 +1,13 @@ +{{ define "main" }} + +
+
+

Articles

+
+ {{ .Content }} + + {{ range (sort .Pages "Date").Reverse }} + {{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}} + {{ end }} +
+{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..55c23bf --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,24 @@ +{{ define "main" }} + +
+
+ + {{ .Content }} +
+
+
+

{{ i18n "recent_articles" }}

+
+ {{ range first 5 (sort ((.Site.GetPage "/blog").Pages) "Date").Reverse }} + {{- partial "article-headline.html" (dict "current" . "parent" $.Page) -}} + {{ end }} +
+
+{{ end }} \ No newline at end of file diff --git a/layouts/partials/article-headline.html b/layouts/partials/article-headline.html new file mode 100644 index 0000000..9a63ea7 --- /dev/null +++ b/layouts/partials/article-headline.html @@ -0,0 +1,11 @@ + +
+

{{ .current.Title }} +{{- partial "lang-detection.html" .current -}} +{{ if .current.Scratch.Get "en_article_in_fr_site" }} + en flag +{{ end }} +

+{{- partial "post-metadata.html" . -}} +

{{ .current.Summary }} {{ i18n "continue_reading" }}

+
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..994a342 --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,40 @@ + +{{.Title}} + + +{{ if .IsHome -}} + +{{- else -}} + +{{- end }} + + + + + + + +{{ template "_internal/opengraph.html" . }} +{{ template "_internal/twitter_cards.html" . }} + + + + + +{{- if .Params.enableMathJax -}} + {{- partial "mathjax.html" . -}} +{{- end -}} + +{{- partial "lang-detection.html" . -}} +{{- if .IsTranslated -}} +{{- range .Translations -}} +{{- if .Scratch.Get "en_article_in_fr_site" -}} + + +{{ else }} + +{{ end -}} +{{- end -}} +{{- end -}} + + diff --git a/layouts/partials/lang-detection.html b/layouts/partials/lang-detection.html new file mode 100644 index 0000000..d7de209 --- /dev/null +++ b/layouts/partials/lang-detection.html @@ -0,0 +1,13 @@ +{{ if and .IsTranslated (eq .Lang "fr") }} + + {{ 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 }} + + {{ if eq (index .AllTranslations 0).Plain (index .AllTranslations 1).Plain }} + {{ .Scratch.Set "en_article_in_fr_site" true }} + {{ end }} + {{ end }} +{{ end }} diff --git a/layouts/partials/mathjax.html b/layouts/partials/mathjax.html new file mode 100644 index 0000000..386b8d7 --- /dev/null +++ b/layouts/partials/mathjax.html @@ -0,0 +1,36 @@ + + + + + + + diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html new file mode 100644 index 0000000..e1e50f4 --- /dev/null +++ b/layouts/partials/menu.html @@ -0,0 +1,62 @@ + + diff --git a/layouts/partials/post-metadata.html b/layouts/partials/post-metadata.html new file mode 100644 index 0000000..2579651 --- /dev/null +++ b/layouts/partials/post-metadata.html @@ -0,0 +1,38 @@ +
+ {{- with .current.PublishDate }} + + {{ i18n "published_on" }} + + + {{- end }} + + {{- if gt .current.Params.topics 0 -}} + {{- range .current.Params.topics -}} + {{- if or (not $.parent.Data.topic) (ne . $.parent.Data.Term) }} + + link{{ . }} +   + + {{- end -}} + {{- end -}} + {{- end }} + {{- if gt .current.Params.opensource 0 -}} + {{- range .current.Params.opensource -}} + {{- if or (not $.parent.Data.opensource) (ne . $.parent.Data.Term) }} + + label{{ . }} +   + + {{- end -}} + {{- end -}} + {{- end }} + {{- if eq .current.Type "blog" }} + + schedule + {{- $minutes := .current.ReadingTime -}} + {{- if gt $minutes 0 -}} + {{- i18n "minutes" $minutes -}} + {{- end -}} + + {{- end }} +
diff --git a/layouts/partials/toolbar.html b/layouts/partials/toolbar.html new file mode 100644 index 0000000..c18b019 --- /dev/null +++ b/layouts/partials/toolbar.html @@ -0,0 +1,15 @@ + diff --git a/layouts/speaking/list.html b/layouts/speaking/list.html new file mode 100644 index 0000000..7903829 --- /dev/null +++ b/layouts/speaking/list.html @@ -0,0 +1,14 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+
+ {{ .Content }} + +
+{{ end }} diff --git a/layouts/writing/list.html b/layouts/writing/list.html new file mode 100644 index 0000000..5860145 --- /dev/null +++ b/layouts/writing/list.html @@ -0,0 +1,14 @@ +{{ define "main" }} + +
+
+

{{ .Title }}

+
+ {{ .Content }} + +
+{{ end }} diff --git a/static/css/itix.css b/static/css/itix.css new file mode 100644 index 0000000..a09406f --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/static/fonts/JetBrainsMono-Regular.ttf b/static/fonts/JetBrainsMono-Regular.ttf new file mode 100644 index 0000000..b06b6e2 Binary files /dev/null and b/static/fonts/JetBrainsMono-Regular.ttf differ diff --git a/static/fonts/JetBrainsMono-Regular.woff b/static/fonts/JetBrainsMono-Regular.woff new file mode 100644 index 0000000..8d0c65f Binary files /dev/null and b/static/fonts/JetBrainsMono-Regular.woff differ diff --git a/static/fonts/JetBrainsMono-Regular.woff2 b/static/fonts/JetBrainsMono-Regular.woff2 new file mode 100644 index 0000000..124f414 Binary files /dev/null and b/static/fonts/JetBrainsMono-Regular.woff2 differ diff --git a/static/fonts/SourceSansPro-Regular.ttf b/static/fonts/SourceSansPro-Regular.ttf new file mode 100644 index 0000000..b422bf4 Binary files /dev/null and b/static/fonts/SourceSansPro-Regular.ttf differ diff --git a/static/fonts/SourceSerifPro-Regular.ttf b/static/fonts/SourceSerifPro-Regular.ttf new file mode 100644 index 0000000..e6c5dff Binary files /dev/null and b/static/fonts/SourceSerifPro-Regular.ttf differ diff --git a/static/fonts/material-icons.ttf b/static/fonts/material-icons.ttf new file mode 100644 index 0000000..a7c4999 Binary files /dev/null and b/static/fonts/material-icons.ttf differ diff --git a/static/fonts/material-icons.woff2 b/static/fonts/material-icons.woff2 new file mode 100644 index 0000000..84084a5 Binary files /dev/null and b/static/fonts/material-icons.woff2 differ diff --git a/static/icons/en.svg b/static/icons/en.svg new file mode 100644 index 0000000..3b33fad --- /dev/null +++ b/static/icons/en.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/fr.svg b/static/icons/fr.svg new file mode 100644 index 0000000..b50bd7e --- /dev/null +++ b/static/icons/fr.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..c5214b5 --- /dev/null +++ b/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"