em/receptty.org
2
1
Fork 1
Code Pull Requests Actions Releases Activity

Navigation refactoring
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Emil Miler
2023-04-03 22:11:05 +02:00
parent e17c6a2b47
commit 4f9c0bb74d
5 changed files with 66 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
sass/_nav.scss
View File

@@ -1,71 +1,68 @@
nav { nav {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
width:100%; width: 100%;
background:$nav-background-primary; color: $nav-h1-color;
color:$nav-h1-color;
h1 { a.title {
margin: 0; margin: 0;
padding: 0 $nav-item-padding;
a { color: $nav-h1-color;
display: block; font-size: $nav-h1-font-size;
padding: $nav-h1-padding; font-weight: bold;
color: $nav-h1-color;
font-size: $nav-h1-font-size;
}
} }
ul { ul {
display:flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
justify-content:center; justify-content: center;
margin:0; margin: 0;
padding:0; padding: 0;
list-style-type:none; list-style-type: none;
li { li a {
display: block;
padding: $nav-item-padding;
text-decoration: none;
a { &, &:active, &:visited {
padding: $nav-item-padding; color: $nav-color;
display:block; }
text-decoration:none;
&, &:active, &:visited { &:hover, &.selected {
color:$nav-color; color: $nav-anchor-hover-color;
} background-color: $nav-background-primary;
&:hover {
color:$nav-anchor-hover-color;
}
} }
} }
} }
img { img {
height:1em; height: 1em;
width:1em; width: 1em;
} }
.mainnav { .wrap {
display:flex; width: 100%;
justify-content:space-between; max-width: $main-wrap;
align-items:center; margin: 0 auto;
width:100%;
max-width:$recipe-wrap;
margin:0 auto;
box-sizing:border-box;
} }
.subnav { .primary {
display:flex; background: $nav-background-primary;
justify-content:center;
background:$nav-background-secondary;
a.active { .wrap {
color: $nav-anchor-hover-color; display: flex;
background-color: $nav-background-primary; justify-content: space-between;
align-items : center;
}
}
.secondary {
background: $nav-background-secondary;
.wrap {
display: flex;
justify-content: center;
} }
} }
} }

3
sass/_variables.scss
View File

@@ -29,10 +29,9 @@ $nav-color:#fff;
$nav-background-primary:#333; $nav-background-primary:#333;
$nav-background-secondary:#555; $nav-background-secondary:#555;
$nav-anchor-hover-color:$anchor-hover-color; $nav-anchor-hover-color:$anchor-hover-color;
$nav-h1-padding: .8em;
$nav-h1-color: $primary; $nav-h1-color: $primary;
$nav-h1-font-size: 1.5rem; $nav-h1-font-size: 1.5rem;
$nav-item-padding: 1em; $nav-item-padding: 1rem;
// recipe // recipe
$recipe-background:#fff; $recipe-background:#fff;

5
sass/style.scss
View File

@@ -7,6 +7,10 @@
@import "fonts"; @import "fonts";
*, *:before, *:after {
box-sizing: border-box;
}
html, body { html, body {
margin:0; margin:0;
} }
@@ -138,7 +142,6 @@ main {
border:1px solid $border; border:1px solid $border;
border-radius:$article-border-radius; border-radius:$article-border-radius;
overflow:hidden; overflow:hidden;
box-sizing:border-box;
width:100%; width:100%;
box-shadow: none; box-shadow: none;
transition: box-shadow .15s ease; transition: box-shadow .15s ease;

22
templates/base.html
View File

@@ -10,16 +10,20 @@
</head> </head>
<body> <body>
<nav> <nav>
<div class="mainnav"> <div class="primary">
<h1><a href="{{ config.base_url }}">Recepty na cesty</a></h1> <div class="wrap">
<ul> <a href="{{ config.base_url }}" class="title">Recepty na cesty</a>
<li><a href="{{ get_url(path="@/vyhledavani.md") }}" title="Vyhledávání"><span class="icon-search"></span></a></li> <ul>
<!-- <li><a href="/info/"><span class="icon-info"></span></a></li> --> <li><a href="{{ get_url(path="@/vyhledavani.md") }}" title="Vyhledávání"><span class="icon-search"></span></a></li>
<li><a href="{{ config.extra.git }}" title="Git"><span class="icon-git"></span></a></li> <!-- <li><a href="/info/"><span class="icon-info"></span></a></li> -->
</ul> <li><a href="{{ config.extra.git }}" title="Git"><span class="icon-git"></span></a></li>
</ul>
</div>
</div> </div>
<div class="subnav"> <div class="secondary">
{{ macro::subnav() }} <div class="wrap">
{{ macro::subnav() }}
</div>
</div> </div>
</nav> </nav>
{% block content %}{% endblock content %} {% block content %}{% endblock content %}

2
templates/macros.html
View File

@@ -44,7 +44,7 @@
{% for item in config.extra.menu %} {% for item in config.extra.menu %}
<li><a href="{{ item.path }}" <li><a href="{{ item.path }}"
{% if item.path == current_path %} {% if item.path == current_path %}
class="active" class="selected"
{% endif %} {% endif %}
>{{ item.name }}</a></li> >{{ item.name }}</a></li>
{% endfor %} {% endfor %}