Feat: add big-button plugin

pelicanconf.py

@@ -43,6 +43,7 @@ PLUGINS = [
     "always_modified",
     "tag_cloud",
     "pdf-img",
+    "big-button",
 ]
 
 ALWAYS_MODIFIED = True

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)

theme/static/stylesheet/style.less

@@ -75,6 +75,39 @@ img {
   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;
   color: @sidebar-text-color;