Feat: change border size for toctree

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'
-SITENAME = 'OpyTex'
-SITETITLE = 'OpyTex'
-SITESUBTITLE = "2021-2022"
-SITEURL = ''
+AUTHOR = "Benjamin Bertrand"
+SITENAME = "OpyTex"
+SITETITLE = "OpyTex"
+SITESUBTITLE = "2022-2023"
+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']
-ARTICLE_PATHS = ['.']
-STATIC_PATHS = ['.']
-INDEX_SAVE_AS = 'blog_index.html'
+# PAGE_PATHS = ['pages']
+ARTICLE_PATHS = ["."]
+STATIC_PATHS = ["."]
+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>.*)\..*'
-ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = '{path_no_ext}.html'
+PATH_METADATA = "(?P<path_no_ext>.*)\..*"
+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/2021-2022/'
+SITEURL = 'https://opytex.org/enseignements/2022-2023/'
 RELATIVE_URLS = False
 
 FEED_ALL_ATOM = 'feeds/all.atom.xml'

theme/static/stylesheet/style.less

@@ -71,6 +71,41 @@ hr {
 
 img {
     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 {
@@ -89,8 +124,8 @@ aside {
 
     .title {
         text-align: center;
-    margin-bottom: 50px;
-    margin-top: 50px;
+        //padding-bottom: 20px;
+        padding-top: 20px;
 
         img {
             padding: 20px;
@@ -108,16 +143,38 @@ aside {
             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;
-      }
-      ul.toctree {
                 li {
+                    padding: 0;
+                    display: block;
+                }
                 a {
-                  background-color: @navbar-bg;
                     color: @navbar-text-color;
                     border: none;
                 }
@@ -127,14 +184,16 @@ aside {
                     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;
-                  border-bottom: solid 1px @light-grey;
-                  border-left: solid 2px @grey;
                     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;
@@ -163,84 +222,17 @@ aside {
             }
         }
     }
-
     .tagcloud {
-      h2 {
-          background-color: @sidebar-bg;
-          margin-bottom: 0;
+        display: none;
     }
 
-      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 {
-    text-align: center;
-    text-transform: uppercase;
-    font-size: .72em;
-    padding: 14px 0 14px 0;
-    border-bottom: @nav-border-color 1px solid;
+        display: none;
     }
 
-  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;
-    }
-  }
-
-  .neighbors {
-    margin: 4% 0% 4% 0%;
-    height: 20px;
-  }
-
-  .pagination {
-    margin: 4% 8% 4% 8%;
-    height: 20px;
-  }
-
-  .social-share {
-    p {
-      font-size: .8em;
-    }
-  }
 
     article {
         margin: 0 8% 2% 8%;
@@ -519,18 +511,60 @@ ul.social {
         left: 0;
         overflow-y: auto;
 
-    div {
+        .title {
+            padding-bottom: 50px;
+            padding-top: 50px;
+        }
         nav {
+            background-color: @navbar-bg;
+            label, #toggle
+            {
+                display: none;
+            }
             ul {
-          li {
-            padding: 0;
+                padding-inline-start: 0px;
+                display: block;
+            }
+            ul.toctree {
                 display: block;
             }
         }
+
+        .tagcloud {
+            display: block;
+            h2 {
+                margin-bottom: 0;
+                background-color: @sidebar-bg;
             }
 
-      ul.social {
-        padding-top: 32px;
+            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%;
             }
         }
     }
@@ -542,6 +576,31 @@ ul.social {
         top: 0;
         right: 2.5%;
 
+        nav {
+            display: block;
+            text-align: center;
+            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 {
+                border-right: none;
+            }
+        }
+
         article {
 
             &.single {

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>