From ccfa19d6174d2fa24792866906b442a32af6cde9 Mon Sep 17 00:00:00 2001 From: Jeff MacKinnon Date: Wed, 6 Mar 2024 17:45:56 -0400 Subject: [PATCH] Adding Linktree and Reading Page --- static/css-include/links.css | 0 static/css-include/pelican.css | 129 +++++------- templates/base.html | 6 - templates/include/links.html | 72 +++++++ templates/include/minimal_posts.html | 8 +- templates/page.html | 7 +- test/content/pages/3-reading.rst | 281 +++++++++++++++++++++++++++ test/content/pages/5-links.rst | 9 + test/pelicanconf.py | 2 +- 9 files changed, 420 insertions(+), 94 deletions(-) create mode 100644 static/css-include/links.css create mode 100644 templates/include/links.html create mode 100644 test/content/pages/3-reading.rst create mode 100644 test/content/pages/5-links.rst diff --git a/static/css-include/links.css b/static/css-include/links.css new file mode 100644 index 0000000..e69de29 diff --git a/static/css-include/pelican.css b/static/css-include/pelican.css index 2e61d8c..e0fa82a 100644 --- a/static/css-include/pelican.css +++ b/static/css-include/pelican.css @@ -348,64 +348,6 @@ blockquote::after { /************************************************/ -/* Linktrees are a thing */ -/* used liberally from mollywhite.net from Sept 2, 2022 */ - -.linktree { - width: 100%; - height: 100%; -} -.linktree * { - box-sizing: border-box; -} -.linktree body { - width: 100%; - height: 100%; - background-color: #96B78A; -} -.linktree .linktree-content { - max-width: 680px; - margin: 100px auto 0 auto; - width: 100%; - height: 100%; - padding: 24px 12px; -} -.linktree .linktree-content .wrapper { - display: flex; - flex-direction: column; - justify-content: space-between; -} -.linktree .linktree-content .wrapper a.linktree-link { - display: block; - box-sizing: border-box; - width: 100%; - text-align: center; - text-decoration: none; - line-height: 40px; - background-color: #FFFFFF; - margin-bottom: 15px; - border: 2px solid #FFFFFF; - border-radius: 4px; - padding: 5px; -} -.linktree .linktree-content .wrapper a.linktree-link:hover { - background: rgba(255, 255, 255, 0.4); -} -.linktree .linktree-content .wrapper .social-links { - display: flex; - align-items: center; - justify-content: center; - width: 100%; -} -.linktree .linktree-content .wrapper .social-links a { - color: #FFFFFF; - text-decoration: none; - padding: 0 10px; - font-size: 120%; -} - -/************************************************/ - /* Graphviz */ div.graphviz { @@ -424,27 +366,56 @@ div.graphviz img { /************************************************/ -/* Archive Listing */ +/* Linktrees are a thing */ +/* CSS based on this page https://hashnode.com/post/linktree-clone-using-html-and-css-ckshpyzkz0138wqs19rf61foz from Mar 6, 2024 */ -dl.archive { +.linktree{ + padding:20%; + padding-top:1%; + padding-bottom:1%; +} + +.linktreelink{ + text-align: center; + margin-top: 1px; + padding: 20px 0; + max-width: 590px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top:10px; + background-color:var(--style-colour); + color:white; + text-decoration:none; +} + +.linktreelink a { + border-bottom: none; +} + +.linktreelink:hover{ + color:var(--style-colour); + background-color:white; + border: 2px solid; + border-color:var(--style-colour); +} + +.social-links { + text-align: center; + margin-top:20px; + margin-left: auto; + margin-right: auto; + padding-left: 10%; + padding-right: 10%; + align-items: center; + display: flex; + justify-content: space-between; width: 100%; - overflow: hidden; - padding: 0; - margin: 0 - } -dt.archive { - float: left; - width: 50%; - /* adjust the width; make sure the total of both is 100% */ - font-weight: 600; - padding: 0; - margin: 0 - } -dd.archive { - float: left; - width: 50%; - /* adjust the width; make sure the total of both is 100% */ - padding: 0; - margin: 0 - } +} +.social-links a { + background: none; + font-size: 120%; + padding: 0 .625rem; + border-bottom: none; +} diff --git a/templates/base.html b/templates/base.html index d21e129..1311c5b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,9 +16,6 @@ {% else %} {% endif %} - {% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %} - - {% endif %} {% if FEED_ALL_ATOM %} @@ -67,9 +64,6 @@