From b11d6b219d8c97d37f2981e6d8e6018f4f3fdb4c Mon Sep 17 00:00:00 2001
From: Jake <j.vondoemming@stud.uni-goettingen.de>
Date: Sat, 6 Aug 2022 04:02:21 +0200
Subject: [PATCH] added Breadcrumb Navigation
closes GAUMI-fginfo/fg-website#42
---
theme/static/css/Makefile | 3 +
theme/static/css/main.css | 50 ++-
theme/static/css/old.css | 572 ++++++++++++++++++++++++++++++++
theme/templates/base.html | 8 +-
theme/templates/index.html | 3 +
theme/templates/macros/nav.html | 14 +
theme/templates/page.html | 4 +
theme/templates/tag.html | 4 +
8 files changed, 651 insertions(+), 7 deletions(-)
create mode 100644 theme/static/css/Makefile
create mode 100644 theme/static/css/old.css
diff --git a/theme/static/css/Makefile b/theme/static/css/Makefile
new file mode 100644
index 0000000..93bc0ec
--- /dev/null
+++ b/theme/static/css/Makefile
@@ -0,0 +1,3 @@
+.PHONY: run
+run:
+ make -C ../../../fgs
diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 9b92bb2..3df9ee0 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -2,6 +2,7 @@
--site-width: 90ch;
--site-lr-margin: 1rem;
--site-header-height: 6rem;
+ --site-breadcrumb-height: 2rem;
--sitemenu-nav-height: 3rem;
--card-size: 20ch;
--text-color: #333333;
@@ -253,8 +254,55 @@ footer#site-footer a {
+nav.breadcrumb {
+ color: var(--category-contrast-color);
+ background-color: var(--category-color);
+ line-height: var(--site-breadcrumb-height);
+ margin-top: 0.5rem;
+}
+nav.breadcrumb ul li {
+ display: inline-block;
+}
+nav.breadcrumb ul li::after {
+ content: ' > ';
+ white-space: pre-wrap;
+}
+nav.breadcrumb ul li:last-child::after {
+ content: '';
+ display: none;
+}
+nav.breadcrumb a {
+ color: var(--category-contrast-color);
+ background-color: var(--category-color);
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+/*
+nav.breadcrumb a::before {
+ content: '';
+ border-top: 0.5em solid transparent;
+ border-bottom: 0.5em solid transparent;
+ border-left: 0.5em solid #fff;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+nav.breadcrumb a::after {
+ content: '';
+ border-top: 0.5em solid transparent;
+ border-bottom: 0.5em solid transparent;
+ border-left: 0.5em solid #E7E9EB;
+ position: absolute;
+ right: -0.5em;
+ top: 0;
+ z-index: 1;
+}
-
+nav.breadcrumb ul li:first-child a::before {
+ content: '';
+ display: none;
+}
+*/
diff --git a/theme/static/css/old.css b/theme/static/css/old.css
new file mode 100644
index 0000000..2b077fb
--- /dev/null
+++ b/theme/static/css/old.css
@@ -0,0 +1,572 @@
+:root {
+ --main-width: 90ch;
+ --header-height: 6rem;
+ --card-size: 20ch;
+ --card-row-num: 3;
+ --nav-height: 3rem;
+ --text-color: #333333;
+ --bg-color: #FFFFFF;
+ --text-shawdow-color: rgba(0, 0, 0, 0.004);
+ --link-color: #337AB7;
+ --hline-color: #EEEEEE;
+ --category-contrast-color: #FFFFFF;
+ --header-menu-bg-color: #F0F0F0;
+ --header-menu-hover-bg-color: #E6E6E6;
+}
+
+* {
+ background: transparent;
+ border: 0;
+ font-size: 100%;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+}
+
+body {
+ /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
+ /*color: #000000;*/
+ color: var(--text-color);
+ background-color: var(--bg-color);
+ font-size: 100%;
+ font-family: sans-serif;
+
+
+ letter-spacing: 0.025em;
+ text-shadow: 0 0 1em transparent, 1px 1px 1.2px var(--text-shawdow-color);
+
+ overflow: visible;
+ display: grid;
+ grid-template-columns: 1fr var(--main-width) 1fr;
+ grid-template-rows: var(--header-height) var(--nav-height) 1fr 5rem;
+ /*gap: 0px 0px;*/
+ grid-template-areas:
+ ". header ."
+ "nav nav nav"
+ ". main ."
+ "footer footer footer";
+ justify-items: center;
+ align-content: space-evenly;
+ z-index: 0;
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: underline;
+}
+a.external::after {
+ /* content: '↪'; */
+ content: '🡕';
+ /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20.092'%3E%3Cpath d='m12 0 2.561 2.537-6.975 6.976 2.828 2.828 6.988-6.988L20 7.927 19.998 0H12z'/%3E%3Cpath d='M9 4.092v-2H0v18h18v-9h-2v7H2v-14h7z'/%3E%3C/svg%3E");
+ background-repeat: no-repeat no-repeat;
+ background-position: center center;
+ background-size: cover;*/
+}
+a.external[href^="mailto:"]::after {
+ content: '';
+}
+a.external[href^="mailto:"]::before {
+ content: '📧';
+}
+
+p, blockquote, ul, ol, dl, table, pre {
+ margin: 0 0 1em 0;
+}
+
+ul, ol {
+ padding-left: 2em;
+}
+
+/*
+li + li {
+ margin-top: 0.25em;
+}
+*/
+
+h1 {
+ padding-bottom: 0.3em;
+ font-size: 2em;
+ border-bottom: 0.1em solid var(--hline-color);
+}
+
+h2 {
+ padding-bottom: 0.3em;
+ font-size: 1.5em;
+ border-bottom: 0.1em solid var(--hline-color);
+}
+
+h1,h2,h3,h4,h5,h6 {
+ margin-top: 1.5em;
+ margin-bottom: 1em;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+
+
+body > header {
+ grid-area: header;
+ /* background-color: yellow; */
+ /* display: flex; */
+ /*justify-content: center;
+ align-items: center;*/
+ width: 100%;
+ /*position: fixed;
+ top: 0;
+ left: 0;*/
+}
+
+body > header h1 {
+ /* line-height: calc(var(--header-height) - 1rem); */
+ display: inline-block;
+ height: calc( var(--header-height) - 1rem );
+ /* max-height: 3em; */
+ margin: 0.5rem;
+ border-bottom: 0 solid transparent;
+ /*margin-left: auto;
+ margin-right: auto;*/
+ padding: 0;
+}
+body > header h1 a {
+ display: flex;
+ line-height: calc( var(--header-height) - 1rem );
+ text-align: center;
+}
+body > header h1 a span {
+ display: inline-block;
+ line-height: calc( var(--header-height) - 1rem );
+ text-align: center;
+}
+body > header h1 img {
+ display: inline-block;
+ height: calc(var(--header-height) - 1rem);
+}
+body > .nav-container {
+ grid-area: nav;
+ /*background-color: yellow;*/
+ /*! margin: 1em; */
+ /* display: flex; */
+ /* justify-content: center;
+ align-items: center; */
+ /* height: 6em; */
+ width: 100%;
+}
+
+.nav-container ul {
+ /*! margin: 1em; */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ padding: 0;
+ margin: 0;
+
+}
+.nav-container ul li {
+ /*! margin: 1em; */
+ /* justify-content: center;
+ align-items: center; */
+ display: inline-block;
+ list-style-type: none;
+}
+
+.nav-container li + li {
+ margin-top: 0;
+}
+.nav-container li a {
+ display: inline-block;
+ height: var(--nav-height);
+ line-height: var(--nav-height);
+ padding-left: 1em;
+ padding-right: 1em;
+ border-bottom: 0.2em solid var(--category-color);
+ color: var(--link-color);
+ transition: all 0.2s;
+}
+
+.nav-container li a:hover {
+ color: var(--category-contrast-color);
+ background-color: var(--category-color);
+ /*background-color: #e6e6e6;
+ border-bottom: 0.2em solid var(--category-color);*/
+}
+
+.nav-container .show-header-menu {
+ display: none;
+ background-color: var(--header-menu-bg-color);
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
+ cursor: pointer;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 11;
+}
+.nav-container .show-header-menu:hover {
+ background-color: var(--header-menu-hover-bg-color);
+ /*border-bottom: 0.2em solid #536;*/
+}
+.nav-container .show-header-menu-bg {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ background-color: rgba(120,120, 120, 0.5);
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* Standard */
+ cursor: pointer;
+ z-index: 5;
+}
+
+.nav-container input[type=checkbox] {
+ display: none;
+}
+
+.tag-link {
+ border-radius: 0.5em;
+ padding-left: 0.3em;
+ padding-right: 0.3em;
+ color: var(--category-contrast-color);
+ background-color: var(--category-color);
+}
+
+
+@media only screen and (max-width: 79ch) {
+ body > header h1{
+ width: 100%;
+ }
+ body > header h1 a {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+ .nav-container {
+ margin-bottom: 0.2em;
+ font-size: 1.2em;
+ }
+ .nav-container nav {
+ display: none;
+ /*border-top: 0.1em solid #333;*/
+ position: fixed;
+ top: 3.2em;
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ }
+ .nav-container nav ul {
+ flex-direction: column;
+ }
+ .nav-container nav li {
+ width: 100%;
+ background-color: var(--category-contrast-color);
+ }
+ .nav-container .show-header-menu {
+ display: inline-block;
+ font-style: normal;
+ padding: 1em;
+ }
+ .nav-container a {
+ width: 100%;
+ /*! margin-top: 0.2em; */
+ /* padding-bottom: 0.2em;*/
+ box-sizing: border-box;
+ display: block;
+ line-height: 2em;
+ /* border-top: 0.1em solid #333; */
+ }
+ .nav-container a:hover {
+ border-bottom: 0.1em solid #536;
+ }
+ .nav-container input[type=checkbox]:checked ~ .show-header-menu-bg {
+ display: block;
+ }
+ .nav-container input[type=checkbox]:checked ~ nav{
+ display: block;
+ }
+ :root {
+ --main-width: 70ch;
+ --header-height: 3rem;
+ --card-size: 30ch;
+ --card-row-num: 2;
+ --nav-height: 3rem;
+ }
+ body {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "nav"
+ "header"
+ "main"
+ "footer";
+ }
+}
+
+@media only screen and (max-width: 69ch) {
+ :root {
+ --main-width: 60ch;
+ --header-height: 3rem;
+ --card-size: 30ch;
+ --card-row-num: 1;
+ --nav-height: 3rem;
+ }
+}
+
+@media only screen and (max-width: 59ch) {
+ :root {
+ --main-width: 50ch;
+ --header-height: 3rem;
+ --card-size: 30ch;
+ --card-row-num: 1;
+ --nav-height: 3rem;
+ }
+}
+
+@media only screen and (max-width: 49ch) {
+ :root {
+ --main-width: 40ch;
+ --header-height: 3rem;
+ --card-size: 35ch;
+ --card-row-num: 1;
+ --nav-height: 3rem;
+ }
+}
+
+body > footer {
+ grid-area: footer;
+}
+
+main {
+ grid-area: main;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ line-height: 1.5;
+ word-wrap: break-word;
+ /*padding-top: 2.5em;*/
+ padding-bottom: 2.5em;
+ padding-right: 1em;
+ padding-left: 1em;
+ margin-right: auto;
+ margin-left: auto;
+ width: 100%;
+ max-width: var(--main-width);
+}
+
+main iframe {
+ width: 100%;
+ min-height: var(--main-width);
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(var(--card-row-num), var(--card-size));
+ /* grid-auto-rows: var(--card-size); */
+ grid-auto-rows: var(--card-size);
+ /*justify-content: space-between; */
+ column-gap: 0.2rem;
+ row-gap: 0.2rem;
+}
+
+.cards li {
+ display: inline-block;
+ list-style-type: none;
+ /* font-size: 125%; */
+}
+.cards li a {
+ display: inline-block;
+ width: calc(100% - 1.3rem );
+ height: calc(100% - 1.3rem );
+ padding: 0.5rem;
+ transition: all 0.2s;
+ /* padding: 1rem; */
+ /*width: var(--card-size);
+ height: var(--card-size);*/
+ color: var(--category-contrast-color);
+ background-color: var(--category-color);
+ /* text-align: center; */
+ border: 0.2rem solid var(--category-color);
+}
+.cards li a:hover {
+ background-color: var(--category-contrast-color);
+ color: var(--category-color);
+}
+
+
+article > footer {
+ border-top: 0.1em solid var(--hline-color);
+}
+
+article > footer .languages {
+ display: inline-flex;
+}
+article > footer .languages li {
+ list-style-type: none;
+ display: inline;
+}
+
+article > footer .languages img {
+ width: 1em;
+ height: 0.7em;
+ object-fit: cover;
+ border-radius: 0.1em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.caps {
+ font-size:.92em;
+}
+.amp {
+ color:#666;
+ font-size:1.05em;
+ /*font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif;*/
+ font-family:serif;
+ font-style:italic;
+}
+.dquo {
+ margin-left:-.38em;
+}
+
+
+
+
+
+
+
+
+.info, .success, .warning, .danger, .alert {
+ padding:1em;
+ margin-bottom:1.2em;
+ border:0.1em solid transparent;
+ border-radius:0.25em;
+ /*padding:15px;
+ margin-bottom:20px;
+ border:1px solid transparent;
+ border-radius:4px;*/
+}
+
+.info h4 { margin-top:0; color:inherit; }
+.success h4 { margin-top:0; color:inherit; }
+.warning h4 { margin-top:0; color:inherit; }
+.danger h4 { margin-top:0; color:inherit; }
+.alert h4 {
+ margin-top:0;
+ color:inherit;
+}
+
+.alert .alert-link {
+ font-weight:700;
+}
+
+.alert > p, .alert > ul { margin-bottom:0; }
+.info > p, .info > ul { margin-bottom:0; }
+.success > p, .success > ul { margin-bottom:0; }
+.warning > p, .warning > ul { margin-bottom:0; }
+.danger > p, .danger > ul { margin-bottom:0; }
+
+.alert > p+p { margin-top:0.33em; }
+.info > p+p { margin-top:0.33em; }
+.success > p+p { margin-top:0.33em; }
+.warning > p+p { margin-top:0.33em; }
+.danger > p+p { margin-top:0.33em; }
+
+.alert-dismissable, .alert-dismissible {
+ padding-right:2em;
+}
+
+.alert-dismissable .close,.alert-dismissible .close{
+ position:relative;
+ top:-0.1em;
+ right:-1.4em;
+ color:inherit;
+}
+
+.success {
+ color:#3c763d;
+ background-color:#dff0d8;
+ border-color:#d6e9c6;
+}
+
+.success hr {
+ border-top-color:#c9e2b3;
+}
+
+
+.success .alert-link {
+ color:#2b542c;
+}
+
+.info {
+ color:#31708f;
+ background-color:#d9edf7;
+ border-color:#bce8f1;
+}
+
+.info hr {
+ border-top-color:#a6e1ec;
+}
+
+.info .alert-link {
+ color:#245269;
+}
+
+.warning {
+ color:#8a6d3b;
+ background-color:#fcf8e3;
+ border-color:#faebcc;
+
+}
+
+.warning hr {
+ border-top-color:#f7e1b5;
+}
+
+.warning .alert-link {
+ color:#66512c;
+}
+
+.danger {
+ color:#a94442;
+ background-color:#f2dede;
+ border-color:#ebccd1;
+}
+
+.danger hr {
+ border-top-color:#e4b9c0;
+}
+
+.danger .alert-link {
+ color:#843534;
+}
+
+
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 40dc233..a69a62f 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -42,12 +42,8 @@
<label for="show-header-menu" class="show-header-menu-bg"> </label>
{{ nav.render_menu(config.menuitems, l) }}
</div>
- <!--<nav class="breadcrumb">
- <ul>
- {% block breadcrumb %}
- {% endblock breadcrumb %}
- </ul>
- </nav>-->
+ {% block breadcrumb %}
+ {% endblock breadcrumb %}
<main class="content">
{% block main %}
{% endblock main %}
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 56cc7ce..5aff99c 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -1,4 +1,7 @@
{% extends "page.html" %}
+{% block breadcrumb %}
+{% endblock breadcrumb %}
+
{% block page_footer %}
{% endblock %}
diff --git a/theme/templates/macros/nav.html b/theme/templates/macros/nav.html
index 511ba0c..f1fceaf 100644
--- a/theme/templates/macros/nav.html
+++ b/theme/templates/macros/nav.html
@@ -22,3 +22,17 @@
TODO: handle custom menu items
{%- endif -%}
{%- endmacro -%}
+
+{%- macro render_breadcrumb_menu(cat, lang, slug = None) -%}
+ {%- call(cattitle, catcolor, caturl, catpage, catpages) get.tag_by_name(cat, lang) -%}
+ <nav class="breadcrumb" {% if catcolor -%}style="--category-color: {{ catcolor }}"{%- endif -%}>
+ <ul>
+ <li>{{ link.render(['slug',config.theme.homepage_slug]|join(':'), None, lang) }}</li>
+ <li>{{ link.render(['tag',cat]|join(':'), None, lang) }}</li>
+ {%- if slug -%}
+ <li>{{ link.render(['slug',slug]|join(':'), None, lang) }}</li>
+ {%- endif -%}
+ </ul>
+ </nav>
+ {%- endcall -%}
+{%- endmacro -%}
diff --git a/theme/templates/page.html b/theme/templates/page.html
index 65cd6ed..2f4d75c 100644
--- a/theme/templates/page.html
+++ b/theme/templates/page.html
@@ -12,6 +12,10 @@
{% endif %}
{% endblock %}
+{% block breadcrumb %}
+ {{ nav.render_breadcrumb_menu(page.category, l, page.slug) }}
+{% endblock breadcrumb %}
+
{% block main %}
<article>
{% block page_header %}
diff --git a/theme/templates/tag.html b/theme/templates/tag.html
index a60cf28..264fa26 100644
--- a/theme/templates/tag.html
+++ b/theme/templates/tag.html
@@ -5,6 +5,10 @@
{%- endcall -%}
{%- endblock -%}
+{% block breadcrumb %}
+ {{ nav.render_breadcrumb_menu(tag, l) }}
+{% endblock breadcrumb %}
+
{% block main %}
<section>
{{ render.section({"type": "tag", "tag": tag, "num": None}, l) }}
--
GitLab