Změna struktury hlavní navigace

Byl přidán vlastní icon set pro navigaci.
4 years ago · 78b1044297
parent c25189301a
commit 78b1044297
10 changed files with 69 additions and 13 deletions
--- a/config.toml
+++ b/config.toml
@ -21,7 +21,7 @@ taxonomies = [
 ]

 [extra]
-# Put all your custom variables here
+git = "https://git.microlab.space/terezka/recepty-na-cesty"
 menu = [
 	{name="Polévky",          path="/kategorie/polevky/"},
 	{name="Maso",             path="/kategorie/maso/"},
--- a/sass/_fonts.scss
+++ b/sass/_fonts.scss
@ -1,4 +1,4 @@
@font-face {
 	font-family:sofia;
-	src:url(sofia.otf);
+	src:url(fonts/sofia.otf);
 }
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@ -5,9 +5,15 @@ nav {
 	background:$nav-background-primary;
 	color:$nav-h1-color;

-	h1 a {
+	h1 {
+		margin: 0;
+
+		a {
+			display: block;
+			padding: $nav-h1-padding;
 			color: $nav-h1-color;
-		margin:$nav-h1-margin;
+			font-size: $nav-h1-font-size;
+		}
 	}

 	ul {
@ -21,7 +27,7 @@ nav {
 		li {

 			a {
-				padding:1em;
+				padding: $nav-item-padding;
 				display:block;
 				text-decoration:none;
 				
@ -44,11 +50,10 @@ nav {
 	.mainnav {
 		display:flex;
 		justify-content:space-between;
-		align-items:flex-end;
+		align-items:center;
 		width:100%;
 		max-width:$recipe-wrap;
 		margin:0 auto;
-		padding:0 1em;
 		box-sizing:border-box;
 	}

--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -29,8 +29,10 @@ $nav-color:#fff;
 $nav-background-primary:#333;
 $nav-background-secondary:#555;
 $nav-anchor-hover-color:$anchor-hover-color;
-$nav-h1-margin:1em 0;
+$nav-h1-padding: .8em;
 $nav-h1-color: $primary;
+$nav-h1-font-size: 1.5rem;
+$nav-item-padding: 1em;

 // recipe
 $recipe-background:#fff;
--- a/static/fonts/icons.css
+++ b/static/fonts/icons.css
@ -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";
+}
--- a/static/fonts/icons.svg
+++ b/static/fonts/icons.svg
@ -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>
--- a/static/fonts/icons.ttf
+++ b/static/fonts/icons.ttf
--- a/static/fonts/icons.woff
+++ b/static/fonts/icons.woff
--- a/static/fonts/sofia.otf
+++ b/static/fonts/sofia.otf
--- a/templates/index.html
+++ b/templates/index.html
@ -6,6 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{% block title %}{{ config.title }}{% endblock title %}</title>
 	<link rel="stylesheet" href="/style.css" type="text/css">
+	<link rel="stylesheet" href="/fonts/icons.css" type="text/css">
 </head>
 <body>

@ -13,9 +14,9 @@
 		<div class="mainnav">
 			<h1><a href="/">Recepty na cesty</a></h1>
 			<ul>
-				<li><a href="/vyhledavani/"><img src="/mglass-min.svg" alt="Hledat"></a></li>
-				<li><a href="/kategorie/">Kategorie</a></li>
-				<li><a href="/tagy/">Tagy</a></li>
+				<li><a href="/vyhledavani/"><span class="icon-search"></span></a></li>
+				<!-- <li><a href="/info/"><span class="icon-info"></span></a></li> -->
+				<li><a href="{{ config.extra.git }}"><span class="icon-git"></span></a></li>
 			</ul>
 		</div>
 		<div class="subnav">