Feat: change border size for toctree

.drone.yml

@@ -1,101 +1,30 @@
----
 kind: pipeline
-name: Opytex Main
+name: Opytex 2021-2022
 type: docker
 
 trigger:
   branch:
-    - master
-
-steps:
-  - name: Build Opytex base
-    image: python:3.8-alpine
-    volumes:
-      - name: pelican-output
-        path: /output
-    commands:
-      - apk add --no-cache git imagemagick-dev imagemagick
-      - git submodule init
-      - git submodule update
-      - pip install --no-cache-dir -r requirements.txt
-      - export MAGICK_HOME=/usr
-      - pelican ./content/ -o /output -s publishconf.py --relative-urls
-      - ls /output
-
-  - name: Push to bucket opytex.org
-    image: plugins/s3
-    volumes:
-      - name: pelican-output
-        path: /output
-    settings:
-      bucket: opytex.org
-      endpoint: https://storage.opytex.org
-      access_key:
-        from_secret: minio_access_key
-      secret_key:
-        from_secret: minio_secret_key
-      source: /output/**/*
-      target: /
-      path_style: true
-      strip_prefix: /output
-
-
-volumes:
-  - name: pelican-output
-    temp: {}
-
----
-kind: pipeline
-name: Opytex Year
-type: docker
-
-trigger:
-  branch:
-    - 2022-2023
     - 2021-2022
-    - 2020-2021
-    - 2019-2020
-    - 2018-2019
-    - 2017-2018
-    - 2016-2017
-    - 2015-2016
 
 steps:
-  - name: Build Opytex ${DRONE_BRANCH}
+  - name: Deploy
     image: python:3.8-alpine
-    volumes:
-      - name: pelican-output
-        path: /output
     commands:
-      - apk add --no-cache git imagemagick-dev imagemagick
+      - apk add --no-cache openssh-client ca-certificates bash rsync git imagemagick-dev imagemagick
       - git submodule init
       - git submodule update
-      - git clone https://git.opytex.org/lafrite/${DRONE_BRANCH}.git content
+      - git clone https://git.opytex.org/lafrite/2021-2022.git content
-      - pip install --no-cache-dir -r requirements.txt
-      - apk add --no-cache git imagemagick-dev imagemagick
       - pip install --no-cache-dir -r requirements.txt
       - export MAGICK_HOME=/usr
-      - pelican ./content/ -o /output -s publishconf.py --relative-urls
+      - pelican ./content/ -o output -s publishconf.py --relative-urls
-      - ls /output
+      - eval `ssh-agent -s`
-
+      - echo "$SSH_KEY" | ssh-add -
-  - name: Push to bucket opytex.org
+      - mkdir -p ~/.ssh
-    image: plugins/s3-sync:1
+      - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
-    volumes:
+      - ssh sshcontent@91.121.90.228 'mkdir -p ~/opytex.org/www/enseignements/2021-2022/'
-      - name: pelican-output
+      - rsync -rv --delete -e "ssh -p 22" ./output/ sshcontent@91.121.90.228:~/opytex.org/www/enseignements/2021-2022/ --checksum
-        path: /drone/src/output
+    environment:
-    settings:
+      SSH_KEY:
-      bucket: opytex.org
+        from_secret: sshcontent-key
-      endpoint: https://storage.opytex.org
-      access_key:
-        from_secret: minio_access_key
-      secret_key:
-        from_secret: minio_secret_key
-      source: /output
-      target: /enseignements/${DRONE_BRANCH}
-      path_style: true
-      delete: true
 
 
-volumes:
-  - name: pelican-output
-    temp: {}

.gitmodules

@@ -1,6 +1,3 @@
 [submodule "pelican-plugins"]
 	path = pelican-plugins
 	url = https://github.com/getpelican/pelican-plugins
-[submodule "plugins/peertube"]
-	path = plugins/peertube
-	url = https://git.melonbread.xyz/rain/pelican-peertube.git

pelicanconf.py

@@ -3,34 +3,35 @@
 from __future__ import unicode_literals
 import os
 import sys
+
 sys.path.append(os.curdir)
 from globalconf import *
 
-AUTHOR = 'Benjamin Bertrand'
+AUTHOR = "Benjamin Bertrand"
-SITENAME = 'OpyTex'
+SITENAME = "OpyTex"
-SITETITLE = 'OpyTex'
+SITETITLE = "OpyTex"
-SITESUBTITLE = "2020-2021"
+SITESUBTITLE = "2022-2023"
-SITEURL = ''
+SITEURL = ""
 
 CC_LICENSE_COMMERCIAL = True
 CC_LICENSE = True
 
-PATH = './content'
+PATH = "./content"
 
-TIMEZONE = 'Europe/Paris'
+TIMEZONE = "Europe/Paris"
 
-DEFAULT_LANG = 'fr'
+DEFAULT_LANG = "fr"
 
 # Uncomment following line if you want document-relative URLs when developing
-#RELATIVE_URLS = True
+# RELATIVE_URLS = True
 
 # Files places
-IGNORE_FILES = ['venv', '.git', 'tools']
+IGNORE_FILES = ["venv", ".git", "tools"]
 # Pages, articles and static
-#PAGE_PATHS = ['pages']
+# PAGE_PATHS = ['pages']
-ARTICLE_PATHS = ['.']
+ARTICLE_PATHS = ["."]
-STATIC_PATHS = ['.']
+STATIC_PATHS = ["."]
-INDEX_SAVE_AS = 'blog_index.html'
+INDEX_SAVE_AS = "blog_index.html"
 
 #
 USE_FOLDER_AS_CATEGORY = False
@@ -38,17 +39,18 @@ USE_FOLDER_AS_CATEGORY = False
 # Plugins
 PLUGIN_PATHS = ["plugins"]
 PLUGINS = [
-    'i18n_subsites',
+    "i18n_subsites",
     "always_modified",
     "tag_cloud",
-    'pdf-img',
+    "pdf-img",
+    "big-button",
 ]
 
 ALWAYS_MODIFIED = True
 
 # Mirror source structure
-PATH_METADATA = '(?P<path_no_ext>.*)\..*'
+PATH_METADATA = "(?P<path_no_ext>.*)\..*"
-ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = '{path_no_ext}.html'
+ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = "{path_no_ext}.html"
 
 # USE_FOLDER_AS_CATEGORY = True
 # DEFAULT_CATEGORY = "Autre"
@@ -56,7 +58,7 @@ ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = '{path_no_ext}.html'
 # Readers
 READERS = {"html": None}
 # Everythings in french
-JINJA_ENVIRONMENT = {'extensions': ['jinja2.ext.i18n']}
+JINJA_ENVIRONMENT = {"extensions": ["jinja2.ext.i18n"]}
 # Default theme language.
 I18N_TEMPLATES_LANG = "en"
 # Your language.
@@ -78,7 +80,7 @@ DISPLAY_PAGES_ON_SIDE = False
 TOCTREE = True
 TAG_CLOUD = True
 
-#SITELOGO = ""
+# SITELOGO = ""
 LINKS = ()
 DEFAULT_PAGINATION = 10
 

plugins/big-button/__init__.py

@@ -0,0 +1 @@
+from .big_button import *

plugins/big-button/big_button.py

@@ -0,0 +1,66 @@
+# -*- coding: utf-8 -*-
+"""
+big_button tags for reStructuredText
+==============================
+This plugin allows you to use big_button tags from within reST documents.
+
+.. big_button::
+    :title: Title
+    :link: ""
+    :color: default
+
+    Description
+
+"""
+
+from __future__ import unicode_literals
+from docutils import nodes
+from docutils.parsers.rst import directives, Directive
+
+
+class BigButton(Directive):
+    optional_arguments = 0
+    final_argument_whitespace = True
+    has_content = True
+    required_arguments = 0
+    optional_arguments = 0
+    final_argument_whitespace = False
+    option_spec = {
+        "title": directives.unicode_code,
+        "link": directives.path,
+    }
+
+    def settings(self):
+        self.options['content'] = '\n'.join(self.content)
+
+        if not self.options.get('title'):
+            self.options['title'] = 0
+        if not self.options.get('link'):
+            self.options['link'] = 0
+
+    def html(self):
+        html = "<div class='button'>\n"
+        if self.options["link"]:
+            html += f"<a href={self.options['link']}>"
+        else:
+            html += f"<div class='nolink'>"
+        if self.options["title"]:
+            html += f"<h3> {self.options['title']}</h3>"
+        if self.content:
+            html += "<div class='content'>"
+            html += f"{self.options['content']}"
+            html += "</div>"
+        if self.options["link"]:
+            html += "</a>"
+        else:
+            html += "</div>"
+        html += "</div>"
+        return html
+
+    def run(self):
+        self.settings()
+        return [nodes.raw('', self.html(), format='html')]
+
+
+def register():
+    directives.register_directive("big_button", BigButton)

publishconf.py

@@ -11,7 +11,7 @@ sys.path.append(os.curdir)
 from pelicanconf import *
 
 # If your site is available via HTTPS, make sure SITEURL begins with https://
-SITEURL = 'https://opytex.org/enseignements/2020-2021/'
+SITEURL = 'https://opytex.org/enseignements/2022-2023/'
 RELATIVE_URLS = False
 
 FEED_ALL_ATOM = 'feeds/all.atom.xml'

theme/static/stylesheet/style.less

@@ -1,8 +1,8 @@
 @import "variables.less";
 
 html, body {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
 }
 
 h1,
@@ -11,345 +11,337 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 300;
+    font-weight: 300;
-  line-height: 1.1;
+    line-height: 1.1;
 }
 
 h1{
-  font-size: 2.4em
+    font-size: 2.4em
 }
 
 h2 {
-  font-size: 2em;
+    font-size: 2em;
-  background-color: @light-grey;
+    background-color: @light-grey;
-  padding: 4px;
+    padding: 4px;
 }
 
 h3 {
-  font-size: 1.6em
+    font-size: 1.6em
 }
 
 h4 {
-  font-size: 1.36em
+    font-size: 1.36em
 }
 
 h5 {
-  font-size: 1.2em
+    font-size: 1.2em
 }
 
 h6 {
-  font-size: 1.1em
+    font-size: 1.1em
 }
 
 body {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  background-color: @body-bg;
+    background-color: @body-bg;
-  color: @text-color;
+    color: @text-color;
-  font-family: @sans;
+    font-family: @sans;
-  font-size: 1.02em;
+    font-size: 1.02em;
-  line-height: 1.2em;
+    line-height: 1.2em;
 }
 
 a {
-  color: @link-color;
+    color: @link-color;
-  text-decoration: none;
+    text-decoration: none;
 }
 
 a:hover {
-  color: @link-hover-color;
+    color: @link-hover-color;
 }
 
 hr {
-  color: @light-grey;
+    color: @light-grey;
-  background-color: @light-grey;
+    background-color: @light-grey;
-  height: 1px;
+    height: 1px;
-  border: none;
+    border: none;
-  margin-top: 40px;
+    margin-top: 40px;
-  margin-bottom: 40px;
+    margin-bottom: 40px;
 }
 
 img {
-  max-width: 100%;
+    max-width: 100%;
+    border: 2px solid @med-light-grey;
+    box-shadow: 0px 0px 10px @light-grey;
+}
+
+.button {
+    margin: 20px;
+    border: 3px solid @orange;
+    width: 250px;
+    height: 150px;
+    border-radius: 25px;
+    display: inline-flex;
+    vertical-align: top;
+    padding: 5px 15px;
+     * {
+         display: flex;
+         justify-content: center;
+         flex-direction: column;
+         gap: 10px;
+     }
+     a {
+         width:100%;
+         height:100%;
+     }
+     .nolink {
+         width:100%;
+         height:100%;
+     }
+     h3 {
+         margin: 0px;
+     }
+
+}
+
+.button:hover {
+    background-color: @light-grey;
 }
 
 aside {
-  background-color: @sidebar-bg;
+    background-color: @sidebar-bg;
-  color: @sidebar-text-color;
+    color: @sidebar-text-color;
-  // text-align: center;
+    // text-align: center;
 
-  a {
+    a {
-    color: @sidebar-link-color;
+        color: @sidebar-link-color;
-    display: block;
+        display: block;
-  }
-
-  a:hover {
-    color: @sidebar-link-hover-color;
-  }
-
-  .title {
-    text-align: center;
-    margin-bottom: 50px;
-    margin-top: 50px;
-
-    img {
-      padding: 20px;
-      border-radius: 50%;
-      max-width: 140px;
     }
 
-    h1 {
+    a:hover {
-      margin: 15px 0 5px 0;
+        color: @sidebar-link-hover-color;
-      
     }
 
-    p {
+    .title {
-      margin: 0 0 15px 0;
+        text-align: center;
-      font-size: .92em;
+        //padding-bottom: 20px;
+        padding-top: 20px;
+
+        img {
+            padding: 20px;
+            border-radius: 50%;
+            max-width: 140px;
+        }
+
+        h1 {
+            margin: 15px 0 5px 0;
+
+        }
+
+        p {
+            margin: 0 0 15px 0;
+            font-size: .92em;
+        }
+    }
+    nav {
+        .toctree {
+            display: none;
+        }
+        #toggle {
+            display: none;
+        }
+        #toggle:checked + .toctree {
+            display: block;
+        }
+        label {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40px;
+            cursor: pointer;
+        }
+        ul.toctree {
+            display: none;
+            padding-inline-start: 0px;
+            h2 {
+                background-color: @navbar-bg;
+                margin-bottom: 0;
+            }
+            ul {
+                padding-inline-start: 0px;
+                display: block;
+                li {
+                    padding: 0;
+                    display: block;
+                }
+                a {
+                    color: @navbar-text-color;
+                    border: none;
+                }
+            }
+            li.toctree-l1 {
+                li.current{
+                    background-color: @navbar-toctree-l2-sel-bg;
+                    color: @navbar-toctree-l2-sel-txt;
+                    padding: 10px;
+                    border-left: solid 5px @orange;
+                }
+            }
+            li.current{
+                a {
+                    background-color: @navbar-toctree-l1-sel-bg;
+                    color: @navbar-toctree-l1-sel-txt;
+                    border-top: solid 1px @light-grey;
+                    border-bottom: solid 1px @light-grey;
+                    border-left: solid 2px @orange;
+                }
+                a:hover {
+                    color: @orange;
+                }
+            }
+            li.toctree-l2 {
+                a {
+                    border: none;
+                    background-color: @navbar-toctree-l2-bg;
+                    color: @navbar-toctree-l2-txt;
+                }
+            }
+            a {
+                padding: 10px;
+            }
+            a:hover {
+                color: @orange;
+            }
+        }
+        ul.list {
+            li {
+                display: inline;
+                line-height: 1.6em;
+                font-size: 1.28em;
+                text-transform: lowercase;
+            }
+        }
+    }
+    .tagcloud {
+        display: none;
     }
-  }
 
-  nav {
-      ul {
-          padding-inline-start: 0px;
-          display: block;
-      }
-      ul.toctree {
-          li {
-              a {
-                  background-color: @navbar-bg;
-                  color: @navbar-text-color;
-                  border: none;
-              }
-          }
-          li.toctree-l1 {
-              li.current{
-                  background-color: @navbar-toctree-l2-sel-bg;
-                  color: @navbar-toctree-l2-sel-txt;
-                  padding: 10px;
-              }
-          }
-          li.current{
-              a {
-                  background-color: @navbar-toctree-l1-sel-bg;
-                  border-bottom: solid 1px @light-grey;
-                  border-left: solid 2px @grey;
-                  color: @navbar-toctree-l1-sel-txt;
-              }
-              a:hover {
-                  color: @orange;
-              }
-          }
-          li.toctree-l2 {
-              a {
-                  border: none;
-                  background-color: @navbar-toctree-l2-bg;
-                  color: @navbar-toctree-l2-txt;
-              }
-          }
-          a {
-              padding: 10px;
-          }
-          a:hover {
-              color: @orange;
-          }
-      }
-      ul.list {
-          li {
-              display: inline;
-              line-height: 1.6em;
-              font-size: 1.28em;
-              text-transform: lowercase;
-          }
-      }
-  }
-
-  .tagcloud {
-      h2 {
-          background-color: @sidebar-bg;
-          margin-bottom: 0;
-      }
-
-      ul {
-          list-style: none;
-          padding: 0;
-      }
-
-      ul li {
-          display: inline-block;
-      }
-
-      li.tag-0 {
-          font-size: 170%;
-      }
-
-      li.tag-1 {
-          font-size: 150%;
-      }
-
-      li.tag-2 {
-          font-size: 120%;
-      }
-
-      li.tag-3 {
-          font-size: 100%;
-      }
-
-      li.tag-4 {
-          font-size: 80%;
-      }
-  }
 }
 
 main {
-  nav {
+    nav {
-    text-align: center;
+        display: none;
-    text-transform: uppercase;
-    font-size: .72em;
-    padding: 14px 0 14px 0;
-    border-bottom: @nav-border-color 1px solid;
-  }
-
-  nav, .translations {
-    a {
-      padding: 0 4px 0 4px;
-      border-left: @nav-border-color 1px solid;
-      border-right: @nav-border-color 1px solid;
     }
 
-    :first-child {
-      border-left: none;
-    }
 
-    :last-child {
+    article {
-      border-right: none;
+        margin: 0 8% 2% 8%;
-    }
-  }
 
-  .neighbors {
+        header {
-    margin: 4% 0% 4% 0%;
+            h1, h2 {
-    height: 20px;
+                margin-bottom: 0;
-  }
+            }
 
-  .pagination {
+            p {
-    margin: 4% 8% 4% 8%;
+                color: @header-text-color;
-    height: 20px;
+                font-size: 0.86em;
-  }
+            }
 
-  .social-share {
+            .translations {
-    p {
+                float: right;
-      font-size: .8em;
-    }
-  }
 
-  article {
+                .active {
-    margin: 0 8% 2% 8%;
+                    font-weight: 600;
-
+                }
-    header {
+            }
-      h1, h2 {
+        }
-        margin-bottom: 0;
+
-      }
+        code, kbd, samp, pre {
-
+            font-family: @mono;
-      p {
+        }
-        color: @header-text-color;
+
-        font-size: 0.86em;
+        blockquote, pre {
-      }
+            background-color: rgba(128,128,128,0.05);
-
+            border-top-right-radius: 5px;
-      .translations {
+            border-bottom-right-radius: 5px;
-        float: right;
+            border-left: 8px solid rgba(128,128,128,0.075);
-
+            border-left-width: 10px;
-        .active {
+        }
-          font-weight: 600;
+
+        blockquote {
+            padding: 10px 20px;
+            font-weight: 300;
+            font-size: 1.1em;
+        }
+
+        pre {
+            padding: 4px;
+            font-size: .9em;
+            overflow-x: auto;
+        }
+
+        samp {
+            white-space: pre;
+            display: block;
+            overflow-x: auto;
+        }
+
+        kbd {
+            padding: .1em .6em;
+            border: 1px solid rgba(63,63,63,0.25);
+            box-shadow: 0 1px 0 rgba(63,63,63,0.25);
+            background-color: #fff;
+            color: #333;
+            border-radius: 3px;
+            display: inline-block;
+            margin: 0 .1em;
+            white-space: nowrap;
+            font-size: .78em;
+        }
+
+        *:not(pre) > code {
+            font-size: .8em;
+            white-space: nowrap;
+            color: #c25;
+            padding: 1px 3px;
+            background-color: #f7f7f9;
+            border: 1px solid #e1e1e8;
+            border-radius: 3px;
+        }
+
+        .comment-count {
+            font-size: .8em;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+
+            thead:first-child tr:first-child th {
+                border-top: 0;
+            }
+
+            th, td {
+                padding: 8px;
+                line-height: 20px;
+                vertical-align: top;
+                border-top: 1px solid #ddd;
+            }
         }
-      }
     }
 
-    code, kbd, samp, pre {
+    footer {
-      font-family: @mono;
+        padding-top: 4px;
+        border-top: @footer-border-color 1px solid;
+
+        p {
+            margin: 2px;
+            text-align: center;
+            padding: 0 40px 0 40px;
+            color: @footer-text-color;
+            font-size: 11px;
+        }
     }
-
-    blockquote, pre {
-      background-color: rgba(128,128,128,0.05);
-      border-top-right-radius: 5px;
-      border-bottom-right-radius: 5px;
-      border-left: 8px solid rgba(128,128,128,0.075);
-      border-left-width: 10px;
-    }
-
-    blockquote {
-      padding: 10px 20px;
-      font-weight: 300;
-      font-size: 1.1em;
-    }
-
-    pre {
-      padding: 4px;
-      font-size: .9em;
-      overflow-x: auto;
-    }
-
-    samp {
-      white-space: pre;
-      display: block;
-      overflow-x: auto;
-    }
-
-    kbd {
-      padding: .1em .6em;
-      border: 1px solid rgba(63,63,63,0.25);
-      box-shadow: 0 1px 0 rgba(63,63,63,0.25);
-      background-color: #fff;
-      color: #333;
-      border-radius: 3px;
-      display: inline-block;
-      margin: 0 .1em;
-      white-space: nowrap;
-      font-size: .78em;
-    }
-
-    *:not(pre) > code {
-      font-size: .8em;
-      white-space: nowrap;
-      color: #c25;
-      padding: 1px 3px;
-      background-color: #f7f7f9;
-      border: 1px solid #e1e1e8;
-      border-radius: 3px;
-    }
-
-    .comment-count {
-      font-size: .8em;
-    }
-
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-
-      thead:first-child tr:first-child th {
-         border-top: 0;
-      }
-
-      th, td {
-        padding: 8px;
-        line-height: 20px;
-        vertical-align: top;
-        border-top: 1px solid #ddd;
-      }
-    }
-  }
-
-  footer {
-    padding-top: 4px;
-    border-top: @footer-border-color 1px solid;
-
-    p {
-      margin: 2px;
-      text-align: center;
-      padding: 0 40px 0 40px;
-      color: @footer-text-color;
-      font-size: 11px;
-    }
-  }
 }
 
 .about {
@@ -359,96 +351,96 @@ main {
 }
 
 .tag-cloud {
-  text-align: center;
+    text-align: center;
-  a {
+    a {
-    background-color: @tag-bg;
+        background-color: @tag-bg;
-    padding: .2em .6em .2em;
+        padding: .2em .6em .2em;
-    font-size: .74em;
+        font-size: .74em;
+        line-height: 1;
+        color: @tag-text-color;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: .25em;
+    }
+
+    a:hover {
+        background-color: @tag-hover-color;
+    }
+}
+
+a.btn {
+    background-color: @btn-bg;
+    padding: .6em .6em;
+    font-size: .8em;
     line-height: 1;
-    color: @tag-text-color;
+    color: @btn-text-color;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: .25em;
-  }
-
-  a:hover {
-    background-color: @tag-hover-color;
-  }
-}
-
-a.btn {
-  background-color: @btn-bg;
-  padding: .6em .6em;
-  font-size: .8em;
-  line-height: 1;
-  color: @btn-text-color;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
 }
 
 a.btn:hover {
-  background-color: @btn-hover-color;
+    background-color: @btn-hover-color;
 }
 
 .center, .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .img-center {
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
-  display: block;
+    display: block;
 }
 
 .align-center {
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
-  display: block;
+    display: block;
 }
 
 .float-left {
-  float: left;
+    float: left;
 }
 
 .float-right {
-  float: right;
+    float: right;
 }
 
 div.related-posts {
-  margin: 15px 0 15px 0;
+    margin: 15px 0 15px 0;
-  padding-bottom: 20px;
+    padding-bottom: 20px;
-  border-top: @rel-post-border-color 1px solid;
+    border-top: @rel-post-border-color 1px solid;
-  border-bottom: @rel-post-border-color 1px solid;
+    border-bottom: @rel-post-border-color 1px solid;
 
-  h4 {
+    h4 {
-    margin: 20px 0 25px 0;
+        margin: 20px 0 25px 0;
-  }
+    }
-
+
-  ul {
+    ul {
-    font-size: 1.1em;
+        font-size: 1.1em;
-    padding-left: 12px;
+        padding-left: 12px;
-
+
-    li {
+        li {
-      padding: 4px 0 4px 0;
+            padding: 4px 0 4px 0;
+        }
     }
-  }
 }
 
 ul.list, ul.social, ul.related-posts {
-  list-style-type: none;
+    list-style-type: none;
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
 }
 
 ul.list {
-  padding: 1em 0 1em 0;
+    padding: 1em 0 1em 0;
 
-  li {
+    li {
-    padding: 4px;
+        padding: 4px;
-  }
+    }
 }
 
 ul.breadcrumb {
@@ -478,28 +470,28 @@ ul.breadcrumb {
 }
 
 ul.social {
-  font-size: 1.6em;
+    font-size: 1.6em;
-  padding-top: 20px;
+    padding-top: 20px;
 
-  li {
+    li {
-    display: inline;
+        display: inline;
-  }
+    }
 
-  a:hover {
+    a:hover {
-    z-index: 2;
+        z-index: 2;
-    -webkit-transform: translateY(-5px);
+        -webkit-transform: translateY(-5px);
-    transform: translateY(-5px);
+        transform: translateY(-5px);
-  }
+    }
 
-  a {
+    a {
-    display: inline-block;
+        display: inline-block;
-    width: 36px;
+        width: 36px;
-    height: 36px;
+        height: 36px;
-    border-radius: 100%;
+        border-radius: 100%;
-    text-align: center;
+        text-align: center;
-    font-size: .8em;
+        font-size: .8em;
-    line-height: 36px;
+        line-height: 36px;
-  }
+    }
 
 
 }
@@ -510,49 +502,116 @@ ul.social {
 //
 
 @media screen and (min-width: 768px) {
-  aside {
+    aside {
-    width: 20%;
+        width: 20%;
-    max-width: 250px;
+        max-width: 250px;
-    height: 100%;
+        height: 100%;
-    position: fixed;
+        position: fixed;
-    top: 0;
+        top: 0;
-    left: 0;
+        left: 0;
-    overflow-y: auto;
+        overflow-y: auto;
 
-    div {
+        .title {
-      nav {
+            padding-bottom: 50px;
-        ul {
+            padding-top: 50px;
-          li {
+        }
-            padding: 0;
+        nav {
+            background-color: @navbar-bg;
+            label, #toggle
+            {
+                display: none;
+            }
+            ul {
+                padding-inline-start: 0px;
+                display: block;
+            }
+            ul.toctree {
+                display: block;
+            }
+        }
+
+        .tagcloud {
             display: block;
-          }
+            h2 {
+                margin-bottom: 0;
+                background-color: @sidebar-bg;
+            }
+
+            ul {
+                list-style: none;
+                padding: 0;
+                margin: 10px;
+            }
+
+            ul li {
+                display: inline-block;
+            }
+
+            li.tag-0 {
+                font-size: 170%;
+            }
+
+            li.tag-1 {
+                font-size: 150%;
+            }
+
+            li.tag-2 {
+                font-size: 120%;
+            }
+
+            li.tag-3 {
+                font-size: 100%;
+            }
+
+            li.tag-4 {
+                font-size: 80%;
+            }
         }
-      }
-
-      ul.social {
-        padding-top: 32px;
-      }
     }
-  }
 
-  main {
+    main {
-    width: 75%;
+        width: 75%;
-    height: 100%;
+        height: 100%;
-    position: absolute;
+        position: absolute;
-    top: 0;
+        top: 0;
-    right: 2.5%;
+        right: 2.5%;
 
-    article {
+        nav {
-
+            display: block;
-      &.single {
+            text-align: center;
-        min-height: 80%;
+            text-transform: uppercase;
-      }
+            font-size: .72em;
-
+            padding: 14px 0 14px 0;
-      ul.list {
+            border-bottom: @nav-border-color 1px solid;
-        li {
+        }
-          padding: 2px;
+
+        nav, .translations {
+            a {
+                padding: 0 4px 0 4px;
+                border-left: @nav-border-color 1px solid;
+                border-right: @nav-border-color 1px solid;
+            }
+
+            :first-child {
+                border-left: none;
+            }
+
+            :last-child {
+                border-right: none;
+            }
+        }
+
+        article {
+
+            &.single {
+                min-height: 80%;
+            }
+
+            ul.list {
+                li {
+                    padding: 2px;
+                }
+            }
         }
-      }
     }
-  }
 }

theme/static/stylesheet/variables.less

@@ -4,6 +4,7 @@
 @white:  #ffffff;
 @grey: #333333;
 @light-grey:  #eeeeee;
+@med-light-grey: #d9d8d8;
 @med-grey:  #999999;
 @dark-grey: #242121;
 
@@ -20,7 +21,7 @@
 @link-hover-color: @light-orange;
 
 // Sidebar (aside)
-@sidebar-bg: @grey;
+@sidebar-bg: @dark-grey;
 @sidebar-text-color: @white;
 @sidebar-link-color: @white;
 @sidebar-link-hover-color: @light-grey;
@@ -28,8 +29,10 @@
 // NavBar
 @navbar-bg: @dark-grey;
 @navbar-text-color: @white;
-@navbar-toctree-l1-sel-bg: @dark-grey;
+
-@navbar-toctree-l1-sel-txt: @light-grey;
+@navbar-toctree-l1-sel-bg: @med-light-grey;
+@navbar-toctree-l1-sel-txt: @grey;
+
 @navbar-toctree-l2-bg: @med-grey;
 @navbar-toctree-l2-txt: @grey;
 @navbar-toctree-l2-sel-bg: @light-grey;

theme/templates/base.html

@@ -86,6 +86,9 @@
     </div>
 
       <nav>
+        <label for="toggle">☰</label>
+        <input type="checkbox" id="toggle">
+
       {% if TOCTREE %}
           {% include "partial/toctree.html" %}
       {% endif %}

theme/templates/partial/toctree.html

@@ -1,4 +1,5 @@
 <ul class="toctree">
+    <h2>Niveaux</h2>
     {% for cat, articles in categories|sort %}
     {% if (article and article.category == cat) or category == cat %}
     <li class="toctree-l1 current"><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat | upper }}</a>