diff --git a/sass/_menu.scss b/sass/_menu.scss index 0a433deb0e45de84639343d46a0f399eb58a2137..17b9c12dfdb25b4de1b4d5c745cd4a86b4c24587 100644 --- a/sass/_menu.scss +++ b/sass/_menu.scss @@ -29,6 +29,14 @@ } } -.navbar-dropdown.wide-dropdown { - width: 100vw; +.navbar-item.is-mega { + position: static; + + .is-mega-menu-title { + margin-bottom: 0; + padding: .375rem 1rem; + } + .is-mega-menu-subtitle { + padding: .375rem 1rem; + } } diff --git a/sass/_teckids.scss b/sass/_teckids.scss index df551f985e4e83afc2760590c5ef9355e88a0c28..ffad834bf2d001b798b77ef3d98fbeaa97e2eca6 100644 --- a/sass/_teckids.scss +++ b/sass/_teckids.scss @@ -10,6 +10,7 @@ $project-colors: ( .menu-project-section { border-left: 0.5em solid; + margin-left: 1em; } @each $project in $projects { diff --git a/templates/menu.html b/templates/menu.html index d9fee475dd1fa2f713fc5ef9bf6019b5ecb8daeb..9e5d752560f1b77ec8cf376858b3451ad059bf48 100644 --- a/templates/menu.html +++ b/templates/menu.html @@ -14,16 +14,16 @@ <div class="navbar-menu" id="main-menu"> <div class="navbar-start"> - <div class="navbar-item has-dropdown is-hoverable"> + <div class="navbar-item has-dropdown is-hoverable is-mega"> <a href="#" class="navbar-item">Projekte</a> - <div class="navbar-dropdown wide-dropdown"> + <div class="navbar-dropdown"> {% include "menu/projects.html" %} </div> </div> - <div class="navbar-item has-dropdown is-hoverable"> + <div class="navbar-item has-dropdown is-hoverable is-mega"> <a href="#" class="navbar-item">Informationen für…</a> - <div class="navbar-dropdown wide-dropdown"> + <div class="navbar-dropdown"> TBA </div> </div> diff --git a/templates/menu/projects.html b/templates/menu/projects.html index fbdbe394bfc4f052d71f7a37c42d0a18df3ec35d..b4b7f28009f05b3eb7ecd19aa9f99f66c9a8c3cc 100644 --- a/templates/menu/projects.html +++ b/templates/menu/projects.html @@ -1,15 +1,19 @@ {% set projects = get_taxonomy(kind = "projekt") %} -{% for project in projects.items %} -<section class="section menu-project-section" id="menu-project-section-{{ project.slug }}"> - {% set section = get_section(path = "projekte/" ~ project.slug ~ "/_index.md") %} - <h1 class="title">{{ section.title }}</h1> - <h2 class="subtitle">{{ section.description }}</h2> +<div class="columns"> + {% for project in projects.items %} + <section class="column menu-project-section" id="menu-project-section-{{ project.slug }}"> + {% set section = get_section(path = "projekte/" ~ project.slug ~ "/_index.md") %} + <h1 class="title is-6 is-mega-menu-title">{{ section.title }}</h1> + <p class="is-mega-menu-subtitle">{{ section.description }}</p> - {% for page in project.pages %} - <ul> - <li><a href="{{ page.permalink }}">{{ page.title }}</a></li> - </ul> + {% for page in project.pages %} + <a class="navbar-item" href="{{ page.permalink }}"> + <div class="navbar-content"> + {{ page.title }} + </div> + </a> + {% endfor %} + </section> {% endfor %} -</section> -{% endfor %} \ No newline at end of file +</div> \ No newline at end of file