Využití ikon v metadatech a u stránkování

This commit is contained in:
Emil Miler 2022-01-11 14:34:08 +01:00
parent 319920e701
commit 11869dbf93
9 changed files with 56 additions and 15 deletions

View File

@ -1,4 +1,4 @@
span.tag { .taglist .tag {
margin-right:$tag-margin-right; margin-right:$tag-margin-right;
padding:$tag-padding; padding:$tag-padding;
background:$tag-background; background:$tag-background;

View File

@ -79,14 +79,29 @@ main {
.meta { .meta {
display: flex; display: flex;
align-items: center; align-items: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 3em; margin-bottom: 3em;
&>.edit { .edit {
margin-left: auto; margin-left: auto;
font-size: 1.2em; font-size: 1.2em;
} }
.item {
display: flex;
align-items: baseline;
margin-right: 1.5em;
font-size: .9rem;
font-weight: bold;
color: #333;
cursor: default;
.icon {
margin-right: .3em;
font-size: 1.2em;
}
}
} }
.taglist { .taglist {
@ -96,7 +111,13 @@ main {
} }
.pagination { .pagination {
text-align:center; display: flex;
align-items: center;
justify-content: center;
.icon {
margin: 0 1em;
}
} }
section { section {

Binary file not shown.

View File

@ -8,7 +8,12 @@
<missing-glyph horiz-adv-x="1024" /> <missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" /> <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe905;" glyph-name="pencil" d="M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z" /> <glyph unicode="&#xe905;" glyph-name="pencil" d="M864 960c88.364 0 160-71.634 160-160 0-36.020-11.91-69.258-32-96l-64-64-224 224 64 64c26.742 20.090 59.978 32 96 32zM64 224l-64-288 288 64 592 592-224 224-592-592zM715.578 596.422l-448-448-55.156 55.156 448 448 55.156-55.156z" />
<glyph unicode="&#xe91f;" glyph-name="book" d="M896 832v-832h-672c-53.026 0-96 42.98-96 96s42.974 96 96 96h608v768h-640c-70.398 0-128-57.6-128-128v-768c0-70.4 57.602-128 128-128h768v896h-64zM224.056 128v0c-0.018-0.002-0.038 0-0.056 0-17.672 0-32-14.326-32-32s14.328-32 32-32c0.018 0 0.038 0.002 0.056 0.002v-0.002h607.89v64h-607.89z" />
<glyph unicode="&#xe94e;" glyph-name="clock" d="M658.744 210.744l-210.744 210.746v282.51h128v-229.49l173.256-173.254zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
<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="&#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="&#xe9a3;" glyph-name="spoon-knife" d="M224 960c-106.040 0-192-100.288-192-224 0-105.924 63.022-194.666 147.706-217.998l-31.788-518.124c-2.154-35.132 24.882-63.878 60.082-63.878h32c35.2 0 62.236 28.746 60.082 63.878l-31.788 518.124c84.684 23.332 147.706 112.074 147.706 217.998 0 123.712-85.96 224-192 224zM869.334 960l-53.334-320h-40l-26.666 320h-26.668l-26.666-320h-40l-53.334 320h-26.666v-416c0-17.672 14.326-32 32-32h83.338l-31.42-512.122c-2.154-35.132 24.882-63.878 60.082-63.878h32c35.2 0 62.236 28.746 60.082 63.878l-31.42 512.122h83.338c17.674 0 32 14.328 32 32v416h-26.666z" />
<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="&#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="&#xea3c;" glyph-name="arrow-right2" d="M621.254 82.746l320 320c24.994 24.992 24.994 65.516 0 90.51l-320 320c-24.994 24.992-65.516 24.992-90.51 0-24.994-24.994-24.994-65.516 0-90.51l210.746-210.746h-613.49c-35.346 0-64-28.654-64-64s28.654-64 64-64h613.49l-210.746-210.746c-12.496-12.496-18.744-28.876-18.744-45.254s6.248-32.758 18.744-45.254c24.994-24.994 65.516-24.994 90.51 0z" />
<glyph unicode="&#xea40;" glyph-name="arrow-left2" d="M402.746 82.746l-320 320c-24.994 24.992-24.994 65.516 0 90.51l320 320c24.994 24.992 65.516 24.992 90.51 0 24.994-24.994 24.994-65.516 0-90.51l-210.746-210.746h613.49c35.346 0 64-28.654 64-64s-28.654-64-64-64h-613.49l210.746-210.746c12.496-12.496 18.744-28.876 18.744-45.254s-6.248-32.758-18.744-45.254c-24.994-24.994-65.516-24.994-90.51 0z" />
<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" /> <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> </font></defs></svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Binary file not shown.

View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'icons'; font-family: 'icons';
src: url('icons.eot?3nfdne'); src: url('fonts/icons.eot?zcunvu');
src: url('icons.eot?3nfdne#iefix') format('embedded-opentype'), src: url('fonts/icons.eot?zcunvu#iefix') format('embedded-opentype'),
url('icons.ttf?3nfdne') format('truetype'), url('fonts/icons.ttf?zcunvu') format('truetype'),
url('icons.woff?3nfdne') format('woff'), url('fonts/icons.woff?zcunvu') format('woff'),
url('icons.svg?3nfdne#icons') format('svg'); url('fonts/icons.svg?zcunvu#icons') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@ -28,12 +28,27 @@
.icon-pencil:before { .icon-pencil:before {
content: "\e905"; content: "\e905";
} }
.icon-book:before {
content: "\e91f";
}
.icon-clock:before {
content: "\e94e";
}
.icon-search:before { .icon-search:before {
content: "\e986"; content: "\e986";
} }
.icon-spoon-knife:before {
content: "\e9a3";
}
.icon-info:before { .icon-info:before {
content: "\ea0c"; content: "\ea0c";
} }
.icon-arrow-right2:before {
content: "\ea3c";
}
.icon-arrow-left2:before {
content: "\ea40";
}
.icon-git:before { .icon-git:before {
content: "\eae7"; content: "\eae7";
} }

View File

@ -6,7 +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"> <link rel="stylesheet" href="/icons.css" type="text/css">
</head> </head>
<body> <body>

View File

@ -26,9 +26,9 @@
{% endmacro print_recipe %} {% endmacro print_recipe %}
{% macro pagination() %} {% macro pagination() %}
{% if paginator.previous %}<a href="{{ paginator.previous }}">&laquo; Předchozí stránka</a> |{% endif %} {% if paginator.previous %}<a href="{{ paginator.previous }}"><span class="icon icon-arrow-left2"></span></a>{% endif %}
<span>{{ paginator.current_index }} / {{ paginator.number_pagers }}</span> <span>{{ paginator.current_index }} / {{ paginator.number_pagers }}</span>
{% if paginator.next %}| <a href="{{ paginator.next }}">Další stránka &raquo;</a>{% endif %} {% if paginator.next %}<a href="{{ paginator.next }}"><span class="icon icon-arrow-right2"></span></a>{% endif %}
{% endmacro pagination %} {% endmacro pagination %}
{% macro subnav() %} {% macro subnav() %}
@ -50,9 +50,9 @@
{% endmacro recipe_image %} {% endmacro recipe_image %}
{% macro recipe_meta() %} {% macro recipe_meta() %}
{% if page.extra.portions %}<span class="tag">Porce: <strong>{{ page.extra.portions }}</strong></span>{% endif %} {% if page.extra.portions %}<span class="item" title="Porce"><span class="icon icon-spoon-knife"></span>{{ page.extra.portions }}</span>{% endif %}
{% if page.extra.time %}<span class="tag">Doba přípravy: <strong>{{ page.extra.time }} min</strong></span>{% endif %} {% if page.extra.time %}<span class="item" title="Doba přípravy"><span class="icon icon-clock"></span>{{ page.extra.time }} min</span>{% endif %}
{% if page.extra.source %}<span class="tag">Zdroj: <strong>{{ page.extra.source }}</strong></span>{% endif %} {% if page.extra.source %}<span class="item" title="Zdroj"><span class="icon icon-book"></span>{{ page.extra.source }}</span>{% endif %}
<a href="{{ config.extra.git }}/_edit/master/content/{{ page.relative_path }}" class="edit" title="Upravit"><span class="icon-pencil"></span></a> <a href="{{ config.extra.git }}/_edit/master/content/{{ page.relative_path }}" class="edit" title="Upravit"><span class="icon-pencil"></span></a>
{% endmacro recipe_meta %} {% endmacro recipe_meta %}