Změna struktury hlavní navigace

Byl přidán vlastní icon set pro navigaci.
This commit is contained in:
Emil Miler 2021-02-03 23:01:43 +01:00
parent c25189301a
commit 78b1044297
10 changed files with 69 additions and 13 deletions

View File

@ -21,7 +21,7 @@ taxonomies = [
] ]
[extra] [extra]
# Put all your custom variables here git = "https://git.microlab.space/terezka/recepty-na-cesty"
menu = [ menu = [
{name="Polévky", path="/kategorie/polevky/"}, {name="Polévky", path="/kategorie/polevky/"},
{name="Maso", path="/kategorie/maso/"}, {name="Maso", path="/kategorie/maso/"},

View File

@ -1,4 +1,4 @@
@font-face { @font-face {
font-family:sofia; font-family:sofia;
src:url(sofia.otf); src:url(fonts/sofia.otf);
} }

View File

@ -5,9 +5,15 @@ nav {
background:$nav-background-primary; background:$nav-background-primary;
color:$nav-h1-color; color:$nav-h1-color;
h1 a { h1 {
margin: 0;
a {
display: block;
padding: $nav-h1-padding;
color: $nav-h1-color; color: $nav-h1-color;
margin:$nav-h1-margin; font-size: $nav-h1-font-size;
}
} }
ul { ul {
@ -21,7 +27,7 @@ nav {
li { li {
a { a {
padding:1em; padding: $nav-item-padding;
display:block; display:block;
text-decoration:none; text-decoration:none;
@ -44,11 +50,10 @@ nav {
.mainnav { .mainnav {
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
align-items:flex-end; align-items:center;
width:100%; width:100%;
max-width:$recipe-wrap; max-width:$recipe-wrap;
margin:0 auto; margin:0 auto;
padding:0 1em;
box-sizing:border-box; box-sizing:border-box;
} }

View File

@ -29,8 +29,10 @@ $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-margin:1em 0; $nav-h1-padding: .8em;
$nav-h1-color: $primary; $nav-h1-color: $primary;
$nav-h1-font-size: 1.5rem;
$nav-item-padding: 1em;
// recipe // recipe
$recipe-background:#fff; $recipe-background:#fff;

35
static/fonts/icons.css Normal file
View File

@ -0,0 +1,35 @@
@font-face {
font-family: 'icons';
src:
url('/fonts/icons.ttf?88dd9o') format('truetype'),
url('/fonts/icons.woff?88dd9o') format('woff'),
url('/fonts/icons.svg?88dd9o#icons') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e986";
}
.icon-info:before {
content: "\ea0c";
}
.icon-git:before {
content: "\eae7";
}

13
static/fonts/icons.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icommon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe986;" glyph-name="search" d="M992.262 88.604l-242.552 206.294c-25.074 22.566-51.89 32.926-73.552 31.926 57.256 67.068 91.842 154.078 91.842 249.176 0 212.078-171.922 384-384 384-212.076 0-384-171.922-384-384s171.922-384 384-384c95.098 0 182.108 34.586 249.176 91.844-1-21.662 9.36-48.478 31.926-73.552l206.294-242.552c35.322-39.246 93.022-42.554 128.22-7.356s31.892 92.898-7.354 128.22zM384 320c-141.384 0-256 114.616-256 256s114.616 256 256 256 256-114.616 256-256-114.614-256-256-256z" />
<glyph unicode="&#xea0c;" glyph-name="info" d="M448 656c0 26.4 21.6 48 48 48h32c26.4 0 48-21.6 48-48v-32c0-26.4-21.6-48-48-48h-32c-26.4 0-48 21.6-48 48v32zM640 192h-256v64h64v192h-64v64h192v-256h64zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416z" />
<glyph unicode="&#xeae7;" glyph-name="git" d="M1004.692 493.606l-447.096 447.080c-25.738 25.754-67.496 25.754-93.268 0l-103.882-103.876 78.17-78.17c12.532 5.996 26.564 9.36 41.384 9.36 53.020 0 96-42.98 96-96 0-14.82-3.364-28.854-9.362-41.386l127.976-127.974c12.532 5.996 26.566 9.36 41.386 9.36 53.020 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96c0 14.82 3.364 28.854 9.362 41.386l-127.976 127.974c-3.042-1.456-6.176-2.742-9.384-3.876v-266.968c37.282-13.182 64-48.718 64-90.516 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 41.796 26.718 77.334 64 90.516v266.968c-37.282 13.18-64 48.72-64 90.516 0 14.82 3.364 28.852 9.36 41.384l-78.17 78.17-295.892-295.876c-25.75-25.776-25.75-67.534 0-93.288l447.12-447.080c25.738-25.75 67.484-25.75 93.268 0l445.006 445.006c25.758 25.762 25.758 67.54-0.002 93.29z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/fonts/icons.ttf Normal file

Binary file not shown.

BIN
static/fonts/icons.woff Normal file

Binary file not shown.

View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{{ config.title }}{% endblock title %}</title> <title>{% block title %}{{ config.title }}{% endblock title %}</title>
<link rel="stylesheet" href="/style.css" type="text/css"> <link rel="stylesheet" href="/style.css" type="text/css">
<link rel="stylesheet" href="/fonts/icons.css" type="text/css">
</head> </head>
<body> <body>
@ -13,9 +14,9 @@
<div class="mainnav"> <div class="mainnav">
<h1><a href="/">Recepty na cesty</a></h1> <h1><a href="/">Recepty na cesty</a></h1>
<ul> <ul>
<li><a href="/vyhledavani/"><img src="/mglass-min.svg" alt="Hledat"></a></li> <li><a href="/vyhledavani/"><span class="icon-search"></span></a></li>
<li><a href="/kategorie/">Kategorie</a></li> <!-- <li><a href="/info/"><span class="icon-info"></span></a></li> -->
<li><a href="/tagy/">Tagy</a></li> <li><a href="{{ config.extra.git }}"><span class="icon-git"></span></a></li>
</ul> </ul>
</div> </div>
<div class="subnav"> <div class="subnav">