The old Pelican theme I used to use for mcol.xyz
git clone https://mcol.xyz/code/rice-theme
Log | Files | Refs | README

commit 9f054c2d70ca006e14badfdeb58d16e85fada456
parent e0c4d486fe1e8ab1ab8cc9779ef3cc57dd585dbe
Author: mcol <mcol@posteo.net>
Date:   Wed,  5 Aug 2020 21:12:30 +0100

redesign and add icon links to window

Diffstat:
Mreadme.rst | 17+++++++++++++++++
Mstatic/css/main.css | 86+++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
Mtemplates/menu.html | 8+++++++-
3 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/readme.rst b/readme.rst @@ -40,6 +40,8 @@ Non-standard variables EXTRA_HEAD A string that is added into the header of every page as is. MENUPADTO Width to space-pad menu items to. Set this to the length of the largest item. + + ICONITEMS List of class-link pairs used to add icons to the menu windows (see below). ========== ======================= @@ -51,3 +53,18 @@ The menu contains these items in this order: - Archives page - MENUITEMS items if defined - Category links if DISPLAY_CATEGORIES_ON_MENU + +Beside the main text links on the menu are icon links. ICONITEMS should be a +tuple of class-link pairs, where the classes are added to the link's class list +and can be used for styling. For example, the pelican-minify-fontawesome_ +plugin can be used to add Font Awesome icons. Example usage: + +.. code-block:: python + + ICONITEMS = ( + ('fab fa-mastodon', 'https://your.mastodon.instance/@handle" rel="me'), + ('fas fa-envelope', 'mailto:your@email.address'), + ('fas fa-rss', '/rss.xml'), + ) + +.. _pelican-minify-fontawesome: https://mcol.xyz/code/pelican-minify-fontawesome diff --git a/static/css/main.css b/static/css/main.css @@ -46,6 +46,37 @@ body { flex-direction: row; } +li { + list-style-type: square; + padding-left: 5px; +} + +::selection { + background: var(--trim); + color: var(--bg); +} + +a { + color: inherit; + text-decoration: none; +} + +a:hover { + background: var(--text2); + color: var(--bg); +} + +h1 a:hover { + background: var(--text); +} + +.fas { + vertical-align:-5%; +} + + +/* WINDOWS */ + .win { font-family: var(--mono); color: var(--trim); @@ -69,34 +100,36 @@ body { } .wc { - flex: 1 0 auto; font-size: 1.2em; - display: grid; - place-items: center; + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: center; } .wc ul { - padding-left: 0px; + padding: 10px; + flex-basis: 50%; } -li { - list-style-type: square; - padding-left: 5px; +.wc li { + list-style-type: none; } -::selection { - background: var(--trim); - color: var(--bg); +.wc .icons { + direction: rtl; } -a { - color: inherit; - text-decoration: none; +.wc .icons a { + padding: 10px; } -a:hover { - background: var(--text2); - color: var(--bg); +.wc .menu { + border-left: 2px solid var(--text); +} + +.win:hover .wc .menu { + border-left: 2px solid var(--trim); } .win a:hover @@ -104,18 +137,10 @@ a:hover { background: var(--trim); } -h1 a:hover { - background: var(--text); -} - -.fas { - vertical-align:-5%; -} - /* HOME PAGE */ -#home { +#home { /* this flex is only used on small screens */ display: flex; height: 100%; width: 100%; @@ -130,9 +155,7 @@ h1 a:hover { margin: 10px 0; } - -#home1:hover, -#home2:hover +#home1:hover,#home2:hover { border-color: var(--trim); color: var(--trim); @@ -1146,6 +1169,9 @@ table { #home1,#home2 { position: initial; } + #nav { + margin-top: 2%; + } } @media (min-width: 491px) and (max-width: 780px) { @@ -1178,8 +1204,8 @@ table { width: 88%; position: initial; } - .wc ul { - padding-left: 10%; + #nav { + margin-top: 2%; } } diff --git a/templates/menu.html b/templates/menu.html @@ -1,4 +1,10 @@ -<ul> +<ul class=icons> +{% for icon, link in ICONITEMS %} + <li><a href="{{ link }}" class="{{ icon }}"></a></li> +{% endfor %} +</ul> + +<ul class=menu> <li><a href={{ SITEURL }}>{{ SITENAME }}{{ "&nbsp;" * (MENUPADTO - SITENAME|length) }}</a></li> <li><a href="{{ SITEURL }}/{{ ARCHIVES_SAVE_AS }}">