Add first Fontello icons & styling
This commit is contained in:
parent
b4bb1fc392
commit
da1fa7c77a
|
|
@ -0,0 +1,30 @@
|
|||
Font license info
|
||||
|
||||
|
||||
## Typicons
|
||||
|
||||
(c) Stephen Hutchings 2012
|
||||
|
||||
Author: Stephen Hutchings
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://typicons.com/
|
||||
|
||||
|
||||
## Fontelico
|
||||
|
||||
Copyright (C) 2012 by Fontello project
|
||||
|
||||
Author: Crowdsourced, for Fontello project
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://fontello.com
|
||||
|
||||
|
||||
## Font Awesome
|
||||
|
||||
Copyright (C) 2016 by Dave Gandy
|
||||
|
||||
Author: Dave Gandy
|
||||
License: SIL ()
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
This webfont is generated by http://fontello.com open source project.
|
||||
|
||||
|
||||
================================================================================
|
||||
Please, note, that you should obey original font licenses, used to make this
|
||||
webfont pack. Details available in LICENSE.txt file.
|
||||
|
||||
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
|
||||
site in "About" section.
|
||||
|
||||
- If your project is open-source, usually, it will be ok to make LICENSE.txt
|
||||
file publicly available in your repository.
|
||||
|
||||
- Fonts, used in Fontello, don't require a clickable link on your site.
|
||||
But any kind of additional authors crediting is welcome.
|
||||
================================================================================
|
||||
|
||||
|
||||
Comments on archive content
|
||||
---------------------------
|
||||
|
||||
- /font/* - fonts in different formats
|
||||
|
||||
- /css/* - different kinds of css, for all situations. Should be ok with
|
||||
twitter bootstrap. Also, you can skip <i> style and assign icon classes
|
||||
directly to text elements, if you don't mind about IE7.
|
||||
|
||||
- demo.html - demo file, to show your webfont content
|
||||
|
||||
- LICENSE.txt - license info about source fonts, used to build your one.
|
||||
|
||||
- config.json - keeps your settings. You can import it back into fontello
|
||||
anytime, to continue your work
|
||||
|
||||
|
||||
Why so many CSS files ?
|
||||
-----------------------
|
||||
|
||||
Because we like to fit all your needs :)
|
||||
|
||||
- basic file, <your_font_name>.css - is usually enough, it contains @font-face
|
||||
and character code definitions
|
||||
|
||||
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
|
||||
directly into html
|
||||
|
||||
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
|
||||
rules, but still wish to benefit from css generation. That can be very
|
||||
convenient for automated asset build systems. When you need to update font -
|
||||
no need to manually edit files, just override old version with archive
|
||||
content. See fontello source code for examples.
|
||||
|
||||
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
|
||||
CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
|
||||
We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
|
||||
server headers. But if you ok with dirty hack - this file is for you. Note,
|
||||
that data url moved to separate @font-face to avoid problems with <IE9, when
|
||||
string is too long.
|
||||
|
||||
- animate.css - use it to get ideas about spinner rotation animation.
|
||||
|
||||
|
||||
Attention for server setup
|
||||
--------------------------
|
||||
|
||||
You MUST setup server to reply with proper `mime-types` for font files -
|
||||
otherwise some browsers will fail to show fonts.
|
||||
|
||||
Usually, `apache` already has necessary settings, but `nginx` and other
|
||||
webservers should be tuned. Here is list of mime types for our file extensions:
|
||||
|
||||
- `application/vnd.ms-fontobject` - eot
|
||||
- `application/x-font-woff` - woff
|
||||
- `application/x-font-ttf` - ttf
|
||||
- `image/svg+xml` - svg
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
Animation example, for spinners
|
||||
*/
|
||||
.animate-spin {
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
display: inline-block;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
.icon-heart-outline:before { content: '\e803'; } /* '' */
|
||||
.icon-heart-filled:before { content: '\e804'; } /* '' */
|
||||
.icon-check:before { content: '\e807'; } /* '' */
|
||||
.icon-plus:before { content: '\e808'; } /* '' */
|
||||
.icon-loading:before { content: '\e839'; } /* '' */
|
||||
.icon-external:before { content: '\f08e'; } /* '' */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
.icon-heart-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-heart-filled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: 'icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
||||
/* fix buttons height */
|
||||
line-height: 1em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
}
|
||||
|
||||
.icon-heart-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-heart-filled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
@font-face {
|
||||
font-family: 'icons';
|
||||
src: url('../font/icons.eot?51482644');
|
||||
src: url('../font/icons.eot?51482644#iefix') format('embedded-opentype'),
|
||||
url('../font/icons.woff2?51482644') format('woff2'),
|
||||
url('../font/icons.woff?51482644') format('woff'),
|
||||
url('../font/icons.ttf?51482644') format('truetype'),
|
||||
url('../font/icons.svg?51482644#icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'icons';
|
||||
src: url('../font/icons.svg?51482644#icons') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "icons";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-heart-outline:before { content: '\e803'; } /* '' */
|
||||
.icon-heart-filled:before { content: '\e804'; } /* '' */
|
||||
.icon-check:before { content: '\e807'; } /* '' */
|
||||
.icon-plus:before { content: '\e808'; } /* '' */
|
||||
.icon-loading:before { content: '\e839'; } /* '' */
|
||||
.icon-external:before { content: '\f08e'; } /* '' */
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
<meta charset="UTF-8"><style>/*
|
||||
* Bootstrap v2.2.1
|
||||
*
|
||||
* Copyright 2012 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
*/
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
a:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
*overflow: visible;
|
||||
line-height: normal;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #08c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #005580;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 940px;
|
||||
}
|
||||
.span12 {
|
||||
width: 940px;
|
||||
}
|
||||
.span11 {
|
||||
width: 860px;
|
||||
}
|
||||
.span10 {
|
||||
width: 780px;
|
||||
}
|
||||
.span9 {
|
||||
width: 700px;
|
||||
}
|
||||
.span8 {
|
||||
width: 620px;
|
||||
}
|
||||
.span7 {
|
||||
width: 540px;
|
||||
}
|
||||
.span6 {
|
||||
width: 460px;
|
||||
}
|
||||
.span5 {
|
||||
width: 380px;
|
||||
}
|
||||
.span4 {
|
||||
width: 300px;
|
||||
}
|
||||
.span3 {
|
||||
width: 220px;
|
||||
}
|
||||
.span2 {
|
||||
width: 140px;
|
||||
}
|
||||
.span1 {
|
||||
width: 60px;
|
||||
}
|
||||
[class*="span"].pull-right,
|
||||
.row-fluid [class*="span"].pull-right {
|
||||
float: right;
|
||||
}
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
*zoom: 1;
|
||||
}
|
||||
.container:before,
|
||||
.container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
}
|
||||
small {
|
||||
font-size: 85%;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
h1 small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
h1 {
|
||||
line-height: 40px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 38.5px;
|
||||
}
|
||||
h1 small {
|
||||
font-size: 24.5px;
|
||||
}
|
||||
body {
|
||||
margin-top: 90px;
|
||||
}
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -480px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.footer {
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.footer a {
|
||||
color: #ccc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.the-icons {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.switch {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
.switch input {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.codesOn .i-name {
|
||||
display: none;
|
||||
}
|
||||
.codesOn .i-code {
|
||||
display: inline;
|
||||
}
|
||||
.i-code {
|
||||
display: none;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'icons';
|
||||
src: url('./font/icons.eot?47391532');
|
||||
src: url('./font/icons.eot?47391532#iefix') format('embedded-opentype'),
|
||||
url('./font/icons.woff?47391532') format('woff'),
|
||||
url('./font/icons.ttf?47391532') format('truetype'),
|
||||
url('./font/icons.svg?47391532#icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
.demo-icon
|
||||
{
|
||||
font-family: "icons";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* You can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
|
||||
<script>
|
||||
function toggleCodes(on) {
|
||||
var obj = document.getElementById('icons');
|
||||
|
||||
if (on) {
|
||||
obj.className += ' codesOn';
|
||||
} else {
|
||||
obj.className = obj.className.replace(' codesOn', '');
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container header">
|
||||
<h1>icons <small>font demo</small></h1>
|
||||
<label class="switch">
|
||||
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes
|
||||
</label>
|
||||
</div>
|
||||
<div class="container" id="icons">
|
||||
<div class="row">
|
||||
<div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-heart-outline"></i> <span class="i-name">icon-heart-outline</span><span class="i-code">0xe803</span></div>
|
||||
<div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-heart-filled"></i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe804</span></div>
|
||||
<div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-check"></i> <span class="i-name">icon-check</span><span class="i-code">0xe807</span></div>
|
||||
<div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe808</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="the-icons span3" title="Code: 0xe839"><i class="demo-icon icon-loading animate-spin"></i> <span class="i-name">icon-loading</span><span class="i-code">0xe839</span></div>
|
||||
<div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-external"></i> <span class="i-name">icon-external</span><span class="i-code">0xf08e</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
|
@ -0,0 +1,22 @@
|
|||
<?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>Copyright (C) 2019 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="icons" horiz-adv-x="1000" >
|
||||
<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="heart-outline" unicode="" d="M508-66q-17 0-29 9-26 17-85 58t-154 112-134 110q-106 106-106 264 0 116 82 198t198 82q143 0 228-118 38 55 99 86t129 32q117 0 198-82t81-198q0-158-106-264-38-38-133-110t-155-113-83-57q-13-9-30-9z m-228 729q-72 0-124-51t-52-125q0-114 76-190 79-79 328-248 248 169 327 248 76 76 76 190 0 73-51 125t-124 51q-73 0-125-51t-51-125q0-22-16-37t-36-15-37 15-15 37q0 73-52 125t-124 51z" horiz-adv-x="1015" />
|
||||
|
||||
<glyph glyph-name="heart-filled" unicode="" d="M456 487q0 95-67 161t-161 67-162-67-66-161q0-137 91-229 37-36 128-104t164-118l73-50q282 190 364 272 91 92 91 229 0 95-66 161t-161 67-161-67-67-161z" horiz-adv-x="911" />
|
||||
|
||||
<glyph glyph-name="check" unicode="" d="M625 676q38-20 49-63t-9-80l-260-469q-30-53-91-53-43 0-74 31l-209 207q-31 32-31 74t31 74 74 31 74-31l111-110 193 347q20 38 62 50t80-8z" horiz-adv-x="679" />
|
||||
|
||||
<glyph glyph-name="plus" unicode="" d="M729 454q44 0 74-31t31-73-31-73-74-30l-208 3 0-212q0-43-30-73t-75-31-73 31-30 73l3 212-212-3q-44 0-74 30t-30 73 30 73 74 31l212 0-3 209q0 42 30 73t73 31 75-31 30-73l0-209 208 0z" horiz-adv-x="834" />
|
||||
|
||||
<glyph glyph-name="loading" unicode="" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="external" unicode="" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "icons",
|
||||
"css_prefix_text": "icon-",
|
||||
"css_use_suffix": false,
|
||||
"hinting": true,
|
||||
"units_per_em": 1000,
|
||||
"ascent": 850,
|
||||
"glyphs": [
|
||||
{
|
||||
"uid": "e15f0d620a7897e2035c18c80142f6d9",
|
||||
"css": "external",
|
||||
"code": 61582,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "9bc2902722abb366a213a052ade360bc",
|
||||
"css": "loading",
|
||||
"code": 59449,
|
||||
"src": "fontelico"
|
||||
},
|
||||
{
|
||||
"uid": "3b00728aa97ad1a2581d414bd9d650bc",
|
||||
"css": "heart-outline",
|
||||
"code": 59395,
|
||||
"src": "typicons"
|
||||
},
|
||||
{
|
||||
"uid": "hi76m8qggwn5lbl286oeqp64q0n8kusy",
|
||||
"css": "heart-filled",
|
||||
"code": 59396,
|
||||
"src": "typicons"
|
||||
},
|
||||
{
|
||||
"uid": "43fl9m553j1z5937vfjz0lgolrlspxwl",
|
||||
"css": "check",
|
||||
"code": 59399,
|
||||
"src": "typicons"
|
||||
},
|
||||
{
|
||||
"uid": "1gf923f9wvaezxmfon515dglxa3drf0e",
|
||||
"css": "plus",
|
||||
"code": 59400,
|
||||
"src": "typicons"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@ export class I18n {
|
|||
result = language[section][phrase];
|
||||
} else {
|
||||
console.error(`The translation for "${section}.${phrase}" is set up in neither the target nor default locale.`);
|
||||
result = `${section}.${phrase}`;
|
||||
}
|
||||
|
||||
return result;
|
||||
|
|
|
|||
|
|
@ -16,5 +16,9 @@
|
|||
"people_header": "People",
|
||||
"series_header": "Series",
|
||||
"books_header": "Books"
|
||||
},
|
||||
"interaction": {
|
||||
"heart": "Like",
|
||||
"add": "Add to Shelf"
|
||||
}
|
||||
}
|
||||
|
|
@ -36,10 +36,14 @@
|
|||
|
||||
// @import '../../node_modules/picnic/src/plugins/dropimage/plugin';
|
||||
// @import '../../node_modules/picnic/src/plugins/tabs/plugin';
|
||||
// @import '../../node_modules/picnic/src/plugins/tooltip/plugin';
|
||||
@import '../../node_modules/picnic/src/plugins/tooltip/plugin';
|
||||
|
||||
// Custom global styling
|
||||
@import './picnic-customizations/custom';
|
||||
|
||||
// View styling
|
||||
@import './search';
|
||||
|
||||
// Icons
|
||||
@import '../fonts/fontello/css/animation.css';
|
||||
@import '../fonts/fontello/css/icons.css';
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@ footer nav {
|
|||
}
|
||||
|
||||
// External links
|
||||
// a[href^="http://"]:not([href*="localhost"]):not([href*="guts.plus"]):after,
|
||||
// a[href^="https://"]:not([href*="localhost"]):not([href*="guts.plus"]):after{
|
||||
// font-family: "icons";
|
||||
// font-size: 70%;
|
||||
// vertical-align: top;
|
||||
// margin-left: 3px;
|
||||
// content: "\f08e";
|
||||
// }
|
||||
a[href^="http://"]:after,
|
||||
a[href^="https://"]:after{
|
||||
font-family: "icons";
|
||||
font-size: 70%;
|
||||
vertical-align: top;
|
||||
margin-left: 3px;
|
||||
content: "\f08e";
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const searchView = (state, emit) => {
|
|||
<h1 class="title">${i18n.__('search.header')}</h1>
|
||||
|
||||
<article>
|
||||
${controller.doneSearching ? 'Done searching' : 'Loading...'}
|
||||
${controller.doneSearching ? null : html`<h2><i class="icon-loading animate-spin"></i></h2>`}
|
||||
|
||||
${controller.results.works < 1
|
||||
? null
|
||||
|
|
@ -36,9 +36,19 @@ export const searchView = (state, emit) => {
|
|||
<div class="half-500">
|
||||
<h3 class="title">${result.name}</h3>
|
||||
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
|
||||
<span data-tooltip=${i18n.__('interaction.heart')}>
|
||||
<button class="pseudo">
|
||||
<i class="pseudo icon-heart-outline"></i>
|
||||
</button>
|
||||
</span>
|
||||
<span data-tooltip=${i18n.__('interaction.add')}>
|
||||
<button class="pseudo">
|
||||
<i class="pseudo icon-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="third-500">
|
||||
<a href=${result.link} target="_blank">See details on Inventaire</a>
|
||||
<a class="small pseudo button" href=${result.link} target="_blank">See details on Inventaire</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in New Issue