[UI] SVG icons added
[TWIG][UI] Header completed
This commit is contained in:
rainydaysavings
parent
9d36861076
commit
aac90a9c9e
GPG Key ID:
7D0C7EAFC9D835A0
@ -1,132 +1,247 @@
|
|||||||
/* GENERAL ----------------------------*/
|
/* GENERAL ----------------------------*/
|
||||||
body, html
|
body, html
|
||||||
{
|
{
|
||||||
background-image: linear-gradient(to right bottom, #485563, #404c59, #38434f, #313a45, #29323c);
|
background-image: linear-gradient(to right bottom, #485563, #404c59, #38434f, #313a45, #29323c);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #F6F6F6;
|
color: #F6F6F6;
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
}
|
font-size: 1.250em;
|
||||||
|
margin: 0;
|
||||||
ul
|
padding: 0;
|
||||||
{
|
}
|
||||||
text-decoration: none;
|
ul
|
||||||
margin: 0;
|
{
|
||||||
padding: 0;
|
text-decoration: none;
|
||||||
list-style: none;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
.drop-down ul li
|
}
|
||||||
{
|
.drop-down ul li
|
||||||
position: relative;
|
{
|
||||||
}
|
position: relative;
|
||||||
|
}
|
||||||
.drop-down ul li ul a
|
.drop-down ul li ul a
|
||||||
{
|
{
|
||||||
line-height: 1.8em;
|
line-height: 0.8em;
|
||||||
}
|
}
|
||||||
|
.drop-down ul li ul
|
||||||
.drop-down ul li ul
|
{
|
||||||
{
|
display: none;
|
||||||
display: none;
|
position: absolute;
|
||||||
position: absolute;
|
background-color: #29323C;
|
||||||
background-color: rgba(0, 0, 0, 0.20);
|
padding: 0.4em 0.8em 0.8em 0.8em;
|
||||||
padding: 0.8em 1.5em 1.5em 0.8em;
|
border-radius: 4px;
|
||||||
border-radius: 4px;
|
}
|
||||||
}
|
.drop-down ul li:hover ul
|
||||||
|
{
|
||||||
.drop-down ul li:hover ul
|
display: block;
|
||||||
{
|
}
|
||||||
display: block;
|
.drop-down ul li ul a:hover
|
||||||
}
|
{
|
||||||
|
opacity: 0.6;
|
||||||
.drop-down ul li ul a:hover
|
transition: all 0.5s ease;
|
||||||
{
|
}
|
||||||
opacity: 0.6;
|
#hover-effect:hover
|
||||||
transition: all 0.5s ease;
|
{
|
||||||
}
|
opacity: 0.6;
|
||||||
|
transition: all 0.5s ease;
|
||||||
#hover-effect:hover
|
}
|
||||||
{
|
a:link
|
||||||
opacity: 0.6;
|
{
|
||||||
transition: all 0.5s ease;
|
text-decoration: none;
|
||||||
}
|
outline: 0;
|
||||||
|
color: #F6F6F6;
|
||||||
a:link
|
}
|
||||||
{
|
a:visited
|
||||||
text-decoration: none;
|
{
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: #F6F6F6;
|
color: #F6F6F6;
|
||||||
}
|
}
|
||||||
a:visited
|
ul li ul a
|
||||||
{
|
{
|
||||||
outline: 0;
|
font-size: 0.65em;
|
||||||
color: #F6F6F6;
|
}
|
||||||
}
|
b
|
||||||
|
{
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* CONTAINER --------------------------*/
|
||||||
|
#container
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
/*-------------------------------------*/
|
/*-------------------------------------*/
|
||||||
|
|
||||||
/* HEADER -----------------------------*/
|
/* HEADER -----------------------------*/
|
||||||
#header
|
#header
|
||||||
{
|
{
|
||||||
margin-top: 2em;
|
display: flex;
|
||||||
margin-left: 20%;
|
justify-content: space-between;
|
||||||
margin-right: 20%;
|
flex-wrap: wrap;
|
||||||
display: flex;
|
order: 1;
|
||||||
justify-content: space-between;
|
width: 100%;
|
||||||
}
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
.flex-items
|
background-color: #00000040;
|
||||||
{
|
padding: 1em 1em;
|
||||||
margin: 2em;
|
}
|
||||||
}
|
/* MENU -------------------------------*/
|
||||||
|
#menu
|
||||||
/* MENU -------------------------------*/
|
{
|
||||||
#menu
|
order: 1;
|
||||||
{
|
}
|
||||||
order: 1;
|
.icon-menu
|
||||||
}
|
{
|
||||||
|
display: inline-block;
|
||||||
#menu-png
|
width: 1em;
|
||||||
{
|
height: 1em;
|
||||||
height: 2em;
|
stroke-width: 0;
|
||||||
}
|
stroke: currentColor;
|
||||||
/*-------------------------------------*/
|
fill: currentColor;
|
||||||
|
}
|
||||||
/* INSTANCE ---------------------------*/
|
|
||||||
#instance
|
|
||||||
{
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#align-mid
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo
|
|
||||||
{
|
|
||||||
height: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#down-arrow
|
|
||||||
{
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
/*-------------------------------------*/
|
|
||||||
|
|
||||||
/* SEARCH -----------------------------*/
|
|
||||||
#search
|
|
||||||
{
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-png
|
|
||||||
{
|
|
||||||
height: 2em;
|
|
||||||
}
|
|
||||||
/*-------------------------------------*/
|
|
||||||
|
|
||||||
/*-------------------------------------*/
|
/*-------------------------------------*/
|
||||||
|
/* INSTANCE ---------------------------*/
|
||||||
|
#instance
|
||||||
|
{
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
.icon-logo
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1.25em;
|
||||||
|
height: 1.25em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
.icon-drop
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 0.5em;
|
||||||
|
height: 0.5em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* SEARCH -----------------------------*/
|
||||||
|
#search
|
||||||
|
{
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
.icon-search
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* PROFILE ----------------------------*/
|
||||||
|
#profile
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
order: 4;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.icon-avatar
|
||||||
|
{
|
||||||
|
margin-right: 1em;
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
#nick
|
||||||
|
{
|
||||||
|
order: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
#tags
|
||||||
|
{
|
||||||
|
order: 2;
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
#stats
|
||||||
|
{
|
||||||
|
order: 3;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
#stats b:last-child
|
||||||
|
{
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* PAGES ------------------------------*/
|
||||||
|
.faq-nav
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
order: 2;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
background-color: #00000060;
|
||||||
|
padding: 1em 1em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
.faq-nav ul
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 15%;
|
||||||
|
margin-right: 15%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.faq-nav li
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.active
|
||||||
|
{
|
||||||
|
color: #F6F6F6;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.faq-nav a
|
||||||
|
{
|
||||||
|
color: #91B9D0;
|
||||||
|
}
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/*-------------------------------------*/
|
||||||
|
/* CONTENT ----------------------------*/
|
||||||
|
.content
|
||||||
|
{
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
background-color: #00000040;
|
||||||
|
padding: 1em 1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 0.65em;
|
||||||
|
}
|
||||||
15
public/assets/icons/Read Me.txt
Normal file
15
public/assets/icons/Read Me.txt
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
The *SVG* folder contains the icons you selected as separate SVG files.
|
||||||
|
|
||||||
|
If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.
|
||||||
|
|
||||||
|
*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
|
||||||
|
|
||||||
|
<svg class="icon icon-drop"><use xlink:href="#icon-drop"></use></svg>
|
||||||
|
|
||||||
|
You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
|
||||||
|
|
||||||
|
If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
|
||||||
|
properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse
|
||||||
|
|
||||||
|
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
|
||||||
|
|
||||||
5
public/assets/icons/SVG/attach.svg
Normal file
5
public/assets/icons/SVG/attach.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>attach</title>
|
||||||
|
<path d="M4.703 29.192c-3.652-3.768-3.584-9.844 0.087-13.599l13.11-13.41c2.77-2.833 7.272-2.833 10.042 0 2.743 2.806 2.746 7.333 0 10.142l-13.051 11.381c-2.048 1.659-4.032 1.617-5.243 0.067-1.048-1.407-1.181-3.381 0.454-5.377l8.775-9.424c1.421-1.318 3.019 0.439 1.965 1.644l-8.723 9.548c-0.833 0.91 0.286 2.144 1.163 1.34l11.8-11.976c1.226-1.254 1.226-3.295-0.001-4.55-1.199-1.227-3.122-1.227-4.322 0l-13.11 13.41c-2.303 2.326-1.592 5.802 0.391 7.61 3.605 3.643 7.555 0.332 12.211-3.69 0.386-0.395 5.076-4.978 7.183-6.899 0.901-0.618 1.824 0.244 1.201 1.554l-9.69 11.7c-3.892 4.233-10.565 4.322-14.242 0.528z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 778 B |
5
public/assets/icons/SVG/drop.svg
Normal file
5
public/assets/icons/SVG/drop.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>drop</title>
|
||||||
|
<path d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 284 B |
5
public/assets/icons/SVG/heart.svg
Normal file
5
public/assets/icons/SVG/heart.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.8 KiB |
5
public/assets/icons/SVG/logo.svg
Normal file
5
public/assets/icons/SVG/logo.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>logo</title>
|
||||||
|
<path d="M14.225 29.263c1.48-0.748 2.909-2.155 3.451-3.398 0.827-1.893 1.068-1.818-5.781-1.818-6.744 0-7.349-0.115-8.593-1.628-0.61-0.742-0.633-1.086-0.633-9.456 0-8.422 0.020-8.713 0.651-9.562 1.2-1.613 1.699-1.679 12.7-1.679 11.005 0 11.456 0.062 12.71 1.748 0.566 0.761 0.6 1.3 0.6 9.493 0 8.37-0.023 8.715-0.633 9.456-0.909 1.105-2.149 1.628-3.864 1.628-1.331 0-1.517 0.078-1.681 0.703-0.249 0.95-1.56 2.395-2.912 3.212-1.363 0.823-4.873 1.889-6.166 1.871l-0.953-0.013zM19.7 20.572c1.193-0.547 2.345-2.309 2.627-4.017 0.135-0.818 0.175-1.554 0.090-1.636-0.308-0.294-5.508-0.153-5.508 0.15 0 0.165-0.186 1.211 0.050 1.752 0.31 0.711 1.031 0.333 1.608 0.408 0.496 0.065 0.767 0.336 0.352 0.875-0.364 0.472-0.79 0.578-2.292 0.57-1.599-0.009-2.145-0.173-2.784-0.735-0.708-0.623-0.728-1.11-0.826-3.188-0.133-2.808 0.201-3.318 2.359-3.602 1.79-0.236 3.638 0.109 4.14 1.164 0.299 0.628 0.194 0.74 1.31 0.74 1.54 0 1.643-0.426 1.047-1.992-0.385-1.013-0.726-0.77-0.284-1.661 0.764-1.541 0.606-2.617-0.564-3.839-1.151-1.202-1.664-1.118-1.102 0.18 0.202 0.466 0.322 1.221 0.268 1.676-0.077 0.645-0.273 0.848-0.882 0.916-0.436 0.049-0.956-0.112-1.173-0.362-0.449-0.518-1.263-0.587-1.724-0.146-0.221 0.212-0.56 0.198-1.12-0.046-0.676-0.295-0.894-0.27-1.384 0.154-0.32 0.277-0.9 0.461-1.289 0.408-0.624-0.085-0.705-0.249-0.69-1.4 0.009-0.718 0.126-1.533 0.26-1.812 0.413-0.864-0.597-0.598-1.462 0.385-0.91 1.034-1.070 2.938-0.332 3.946 0.407 0.556 0.083 0.645-0.145 1.877-1.099 5.937 0.040 8.144 3.019 9.304 1.949 0.759 4.694 0.73 6.434-0.068z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
7
public/assets/icons/SVG/menu.svg
Normal file
7
public/assets/icons/SVG/menu.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>menu</title>
|
||||||
|
<path d="M2.222 12.6h27.497c1.219 0 2.208 0.988 2.208 2.208v1.263c0 1.219-0.988 2.208-2.208 2.208h-27.497c-1.219 0-2.208-0.988-2.208-2.208v-1.263c0-1.219 0.988-2.208 2.208-2.208z"></path>
|
||||||
|
<path d="M2.222 21.787h27.497c1.219 0 2.208 0.988 2.208 2.208v1.263c0 1.219-0.988 2.208-2.208 2.208h-27.497c-1.219 0-2.208-0.988-2.208-2.208v-1.263c0-1.219 0.988-2.208 2.208-2.208z"></path>
|
||||||
|
<path d="M2.222 3.414h27.497c1.219 0 2.208 0.988 2.208 2.208v1.263c0 1.219-0.988 2.208-2.208 2.208h-27.497c-1.219 0-2.208-0.988-2.208-2.208v-1.263c0-1.219 0.988-2.208 2.208-2.208z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 725 B |
7
public/assets/icons/SVG/recycle.svg
Normal file
7
public/assets/icons/SVG/recycle.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>recycle</title>
|
||||||
|
<path d="M16.93 22.627c0.914-0.547 1.931-0.247 2.325 0.762l0.544 1.697 6.041 0.087c1.566 0.034 2.565-1.676 1.765-3.022l-1.661-2.793c-0.212-0.356-0.868-1.092-0.094-1.553l2.149-1.278c0.74-0.44 1.172 0.43 1.383 0.786l1.658 2.787c2.407 4.047-0.585 9.169-5.289 9.066l-6.075 0.337-0.691 1.568c-0.455 0.764-1.106 1.047-2.245 0.51l-4.627-3.773c-0.382-0.399-0.382-1.349 0.017-1.73z"></path>
|
||||||
|
<path d="M19.998 14.054c-0.935-0.511-1.191-1.54-0.52-2.391l1.187-1.328-2.984-5.253c-0.763-1.368-2.744-1.363-3.499 0.009l-1.567 2.846c-0.2 0.363-0.502 1.302-1.291 0.867l-2.19-1.206c-0.755-0.415-0.223-1.228-0.023-1.591l1.564-2.841c2.271-4.125 8.203-4.139 10.496-0.030l3.367 5.068 1.702-0.198c0.889 0.005 1.463 0.423 1.577 1.678l-0.91 5.9c-0.151 0.531-0.969 1.012-1.501 0.862z"></path>
|
||||||
|
<path d="M10.97 15.602c0.005 1.065-0.771 1.787-1.84 1.612l-1.737-0.396-3.153 5.154c-0.828 1.33 0.135 3.061 1.701 3.058l3.249-0.006c0.414-0.001 1.382-0.191 1.384 0.71l0.005 2.5c0.002 0.861-0.967 0.789-1.381 0.79l-3.243 0.006c-4.708 0.009-7.591-5.176-5.106-9.17l2.805-5.399-0.997-1.393c-0.426-0.78-0.337-1.485 0.705-2.192l5.604-2.059c0.538-0.125 1.355 0.358 1.48 0.896z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
5
public/assets/icons/SVG/reply.svg
Normal file
5
public/assets/icons/SVG/reply.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>reply</title>
|
||||||
|
<path d="M0.958 15.559l5.203-10.197c0.499-1.17 1.745-3.012 3.015-0.799l0.933 1.625c10.329-3.208 17.723 1.178 19.613 6.884 1.208 3.645 0.922 8.871-1.711 13.899-0.663 0.954-1.522 0.315-1.375-0.532 3.126-11.733-6.743-17.108-11.882-10.468l0.81 1.99c0.518 1.271-0.64 1.541-2.779 1.161l-10.828-1.524c-0.884-0.232-1.358-1.197-0.999-2.039z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 500 B |
5
public/assets/icons/SVG/search.svg
Normal file
5
public/assets/icons/SVG/search.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<!-- Generated by IcoMoon.io -->
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||||
|
<title>search</title>
|
||||||
|
<path d="M11.421 0.625c-5.74 0-10.394 4.653-10.394 10.394v0c0 5.74 4.653 10.394 10.394 10.394v0c2.434-0 4.673-0.837 6.445-2.239l-0.022 0.017 0.716 0.73c-0.311 0.579-0.224 1.321 0.256 1.808l9.021 9.14c0.576 0.584 1.492 0.573 2.055-0.023l0.651-0.69c0.562-0.596 0.552-1.546-0.024-2.13l-9.021-9.14c-0.471-0.477-1.17-0.557-1.716-0.244l-0.645-0.658c1.661-1.835 2.678-4.281 2.678-6.964v0c0-5.74-4.653-10.394-10.394-10.394v0zM11.421 3.932c0 0 0 0 0 0 3.914 0 7.086 3.173 7.086 7.086v0c-0 3.914-3.173 7.086-7.086 7.086-0 0-0 0-0 0v0c-3.914-0-7.086-3.173-7.086-7.086v0c0-3.914 3.173-7.086 7.086-7.086v0z"></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 763 B |
61
public/assets/icons/demo-external-svg.html
Normal file
61
public/assets/icons/demo-external-svg.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>IcoMoon - SVG Icons</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="demo-files/demo.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="bgc1 clearfix">
|
||||||
|
<div class="mhl">
|
||||||
|
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="clearfix mhl ptl">
|
||||||
|
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-drop"><use xlink:href="symbol-defs.svg#icon-drop"></use></svg><span class="name"> icon-drop</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-attach"><use xlink:href="symbol-defs.svg#icon-attach"></use></svg><span class="name"> icon-attach</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-heart"><use xlink:href="symbol-defs.svg#icon-heart"></use></svg><span class="name"> icon-heart</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-logo"><use xlink:href="symbol-defs.svg#icon-logo"></use></svg><span class="name"> icon-logo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-reply"><use xlink:href="symbol-defs.svg#icon-reply"></use></svg><span class="name"> icon-reply</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-menu"><use xlink:href="symbol-defs.svg#icon-menu"></use></svg><span class="name"> icon-menu</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-recycle"><use xlink:href="symbol-defs.svg#icon-recycle"></use></svg><span class="name"> icon-recycle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glyph fs1">
|
||||||
|
<div class="clearfix pbs">
|
||||||
|
<svg class="icon icon-search"><use xlink:href="symbol-defs.svg#icon-search"></use></svg><span class="name"> icon-search</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script defer src="svgxuse.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
public/assets/icons/demo-files/demo.css
Normal file
147
public/assets/icons/demo-files/demo.css
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #555;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: normal;
|
||||||
|
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: .66666667em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #e74c3c;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
box-shadow: 0 1px #e74c3c;
|
||||||
|
}
|
||||||
|
.bshadow0, input {
|
||||||
|
box-shadow: inset 0 -2px #e7e7e7;
|
||||||
|
}
|
||||||
|
input:hover {
|
||||||
|
box-shadow: inset 0 -2px #ccc;
|
||||||
|
}
|
||||||
|
input, fieldset {
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
color: inherit;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 1.5em;
|
||||||
|
padding: .25em 0;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: inset 0 -2px #449fdb;
|
||||||
|
}
|
||||||
|
.glyph {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
float: left;
|
||||||
|
width: 17em;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.liga {
|
||||||
|
width: 80%;
|
||||||
|
width: calc(100% - 2.5em);
|
||||||
|
}
|
||||||
|
.talign-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.talign-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bgc1 {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
.fgc0 {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.fgc1 {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.mvm {
|
||||||
|
margin-top: .75em;
|
||||||
|
margin-bottom: .75em;
|
||||||
|
}
|
||||||
|
.mtn {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.mtl, .mal {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
.mbl, .mal {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
.mal, .mhl {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
}
|
||||||
|
.mhmm {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
.ptl {
|
||||||
|
padding-top: 1.5em;
|
||||||
|
}
|
||||||
|
.pbs, .pvs {
|
||||||
|
padding-bottom: .25em;
|
||||||
|
}
|
||||||
|
.pvs, .pts {
|
||||||
|
padding-top: .25em;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.unitRight {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.size1of2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.size1of1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.hidden-true {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.textbox0 {
|
||||||
|
width: 3em;
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding: .25em .5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.fs0 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.fs1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
margin-left: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
94
public/assets/icons/demo.html
Normal file
94
public/assets/icons/demo.html
Normal file
File diff suppressed because one or more lines are too long
280
public/assets/icons/selection.json
Normal file
280
public/assets/icons/selection.json
Normal file
File diff suppressed because one or more lines are too long
46
public/assets/icons/sprite/sprite.css
Normal file
46
public/assets/icons/sprite/sprite.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url(sprite.svg);
|
||||||
|
}
|
||||||
|
.icon-drop {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
.icon-attach {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -48px 0;
|
||||||
|
}
|
||||||
|
.icon-heart {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -96px 0;
|
||||||
|
}
|
||||||
|
.icon-logo {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -144px 0;
|
||||||
|
}
|
||||||
|
.icon-reply {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -192px 0;
|
||||||
|
}
|
||||||
|
.icon-menu {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -240px 0;
|
||||||
|
}
|
||||||
|
.icon-recycle {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -288px 0;
|
||||||
|
}
|
||||||
|
.icon-search {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-position: -336px 0;
|
||||||
|
}
|
||||||
|
|
||||||
104
public/assets/icons/sprite/sprite.html
Normal file
104
public/assets/icons/sprite/sprite.html
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS Sprite</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="sprite.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #555;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
a, a:visited {
|
||||||
|
color: #e74c3c;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
box-shadow: 0 1px;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: #F1F1F1;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 1em 0 .75em;
|
||||||
|
color: #999;
|
||||||
|
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
|
||||||
|
}
|
||||||
|
.mhl {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
float: left;
|
||||||
|
margin-right: 1.5em;
|
||||||
|
margin-bottom: .25em;
|
||||||
|
width: 17em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.cell span {
|
||||||
|
margin-right: .25em;
|
||||||
|
}
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.fs1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="clearfix">
|
||||||
|
<p class="mhl">CSS Sprite - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
|
||||||
|
</header>
|
||||||
|
<div class="clearfix mhl">
|
||||||
|
<h1>Grid Size: 0</h1>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-drop"></span>
|
||||||
|
icon-drop
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-attach"></span>
|
||||||
|
icon-attach
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-heart"></span>
|
||||||
|
icon-heart
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-logo"></span>
|
||||||
|
icon-logo
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-reply"></span>
|
||||||
|
icon-reply
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-menu"></span>
|
||||||
|
icon-menu
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-recycle"></span>
|
||||||
|
icon-recycle
|
||||||
|
</div>
|
||||||
|
<div class="cell fs1">
|
||||||
|
<span class="icon icon-search"></span>
|
||||||
|
icon-search
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
public/assets/icons/sprite/sprite.svg
Normal file
32
public/assets/icons/sprite/sprite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
16
public/assets/icons/style.css
Normal file
16
public/assets/icons/style.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke: currentColor;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================
|
||||||
|
Single-colored icons can be modified like so:
|
||||||
|
.icon-name {
|
||||||
|
font-size: 32px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
========================================== */
|
||||||
230
public/assets/icons/svgxuse.js
Normal file
230
public/assets/icons/svgxuse.js
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
/*!
|
||||||
|
* @copyright Copyright (c) 2017 IcoMoon.io
|
||||||
|
* @license Licensed under MIT license
|
||||||
|
* See https://github.com/Keyamoon/svgxuse
|
||||||
|
* @version 1.2.6
|
||||||
|
*/
|
||||||
|
/*jslint browser: true */
|
||||||
|
/*global XDomainRequest, MutationObserver, window */
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
if (typeof window !== "undefined" && window.addEventListener) {
|
||||||
|
var cache = Object.create(null); // holds xhr objects to prevent multiple requests
|
||||||
|
var checkUseElems;
|
||||||
|
var tid; // timeout id
|
||||||
|
var debouncedCheck = function () {
|
||||||
|
clearTimeout(tid);
|
||||||
|
tid = setTimeout(checkUseElems, 100);
|
||||||
|
};
|
||||||
|
var unobserveChanges = function () {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
var observeChanges = function () {
|
||||||
|
var observer;
|
||||||
|
window.addEventListener("resize", debouncedCheck, false);
|
||||||
|
window.addEventListener("orientationchange", debouncedCheck, false);
|
||||||
|
if (window.MutationObserver) {
|
||||||
|
observer = new MutationObserver(debouncedCheck);
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
attributes: true
|
||||||
|
});
|
||||||
|
unobserveChanges = function () {
|
||||||
|
try {
|
||||||
|
observer.disconnect();
|
||||||
|
window.removeEventListener("resize", debouncedCheck, false);
|
||||||
|
window.removeEventListener("orientationchange", debouncedCheck, false);
|
||||||
|
} catch (ignore) {}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
|
||||||
|
unobserveChanges = function () {
|
||||||
|
document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
|
||||||
|
window.removeEventListener("resize", debouncedCheck, false);
|
||||||
|
window.removeEventListener("orientationchange", debouncedCheck, false);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var createRequest = function (url) {
|
||||||
|
// In IE 9, cross origin requests can only be sent using XDomainRequest.
|
||||||
|
// XDomainRequest would fail if CORS headers are not set.
|
||||||
|
// Therefore, XDomainRequest should only be used with cross origin requests.
|
||||||
|
function getOrigin(loc) {
|
||||||
|
var a;
|
||||||
|
if (loc.protocol !== undefined) {
|
||||||
|
a = loc;
|
||||||
|
} else {
|
||||||
|
a = document.createElement("a");
|
||||||
|
a.href = loc;
|
||||||
|
}
|
||||||
|
return a.protocol.replace(/:/g, "") + a.host;
|
||||||
|
}
|
||||||
|
var Request;
|
||||||
|
var origin;
|
||||||
|
var origin2;
|
||||||
|
if (window.XMLHttpRequest) {
|
||||||
|
Request = new XMLHttpRequest();
|
||||||
|
origin = getOrigin(location);
|
||||||
|
origin2 = getOrigin(url);
|
||||||
|
if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
|
||||||
|
Request = XDomainRequest || undefined;
|
||||||
|
} else {
|
||||||
|
Request = XMLHttpRequest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Request;
|
||||||
|
};
|
||||||
|
var xlinkNS = "http://www.w3.org/1999/xlink";
|
||||||
|
checkUseElems = function () {
|
||||||
|
var base;
|
||||||
|
var bcr;
|
||||||
|
var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
|
||||||
|
var hash;
|
||||||
|
var href;
|
||||||
|
var i;
|
||||||
|
var inProgressCount = 0;
|
||||||
|
var isHidden;
|
||||||
|
var Request;
|
||||||
|
var url;
|
||||||
|
var uses;
|
||||||
|
var xhr;
|
||||||
|
function observeIfDone() {
|
||||||
|
// If done with making changes, start watching for chagnes in DOM again
|
||||||
|
inProgressCount -= 1;
|
||||||
|
if (inProgressCount === 0) { // if all xhrs were resolved
|
||||||
|
unobserveChanges(); // make sure to remove old handlers
|
||||||
|
observeChanges(); // watch for changes to DOM
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function attrUpdateFunc(spec) {
|
||||||
|
return function () {
|
||||||
|
if (cache[spec.base] !== true) {
|
||||||
|
spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
|
||||||
|
if (spec.useEl.hasAttribute("href")) {
|
||||||
|
spec.useEl.setAttribute("href", "#" + spec.hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function onloadFunc(xhr) {
|
||||||
|
return function () {
|
||||||
|
var body = document.body;
|
||||||
|
var x = document.createElement("x");
|
||||||
|
var svg;
|
||||||
|
xhr.onload = null;
|
||||||
|
x.innerHTML = xhr.responseText;
|
||||||
|
svg = x.getElementsByTagName("svg")[0];
|
||||||
|
if (svg) {
|
||||||
|
svg.setAttribute("aria-hidden", "true");
|
||||||
|
svg.style.position = "absolute";
|
||||||
|
svg.style.width = 0;
|
||||||
|
svg.style.height = 0;
|
||||||
|
svg.style.overflow = "hidden";
|
||||||
|
body.insertBefore(svg, body.firstChild);
|
||||||
|
}
|
||||||
|
observeIfDone();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function onErrorTimeout(xhr) {
|
||||||
|
return function () {
|
||||||
|
xhr.onerror = null;
|
||||||
|
xhr.ontimeout = null;
|
||||||
|
observeIfDone();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
unobserveChanges(); // stop watching for changes to DOM
|
||||||
|
// find all use elements
|
||||||
|
uses = document.getElementsByTagName("use");
|
||||||
|
for (i = 0; i < uses.length; i += 1) {
|
||||||
|
try {
|
||||||
|
bcr = uses[i].getBoundingClientRect();
|
||||||
|
} catch (ignore) {
|
||||||
|
// failed to get bounding rectangle of the use element
|
||||||
|
bcr = false;
|
||||||
|
}
|
||||||
|
href = uses[i].getAttribute("href")
|
||||||
|
|| uses[i].getAttributeNS(xlinkNS, "href")
|
||||||
|
|| uses[i].getAttribute("xlink:href");
|
||||||
|
if (href && href.split) {
|
||||||
|
url = href.split("#");
|
||||||
|
} else {
|
||||||
|
url = ["", ""];
|
||||||
|
}
|
||||||
|
base = url[0];
|
||||||
|
hash = url[1];
|
||||||
|
isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
|
||||||
|
if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
|
||||||
|
// the use element is empty
|
||||||
|
// if there is a reference to an external SVG, try to fetch it
|
||||||
|
// use the optional fallback URL if there is no reference to an external SVG
|
||||||
|
if (fallback && !base.length && hash && !document.getElementById(hash)) {
|
||||||
|
base = fallback;
|
||||||
|
}
|
||||||
|
if (uses[i].hasAttribute("href")) {
|
||||||
|
uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
|
||||||
|
}
|
||||||
|
if (base.length) {
|
||||||
|
// schedule updating xlink:href
|
||||||
|
xhr = cache[base];
|
||||||
|
if (xhr !== true) {
|
||||||
|
// true signifies that prepending the SVG was not required
|
||||||
|
setTimeout(attrUpdateFunc({
|
||||||
|
useEl: uses[i],
|
||||||
|
base: base,
|
||||||
|
hash: hash
|
||||||
|
}), 0);
|
||||||
|
}
|
||||||
|
if (xhr === undefined) {
|
||||||
|
Request = createRequest(base);
|
||||||
|
if (Request !== undefined) {
|
||||||
|
xhr = new Request();
|
||||||
|
cache[base] = xhr;
|
||||||
|
xhr.onload = onloadFunc(xhr);
|
||||||
|
xhr.onerror = onErrorTimeout(xhr);
|
||||||
|
xhr.ontimeout = onErrorTimeout(xhr);
|
||||||
|
xhr.open("GET", base);
|
||||||
|
xhr.send();
|
||||||
|
inProgressCount += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!isHidden) {
|
||||||
|
if (cache[base] === undefined) {
|
||||||
|
// remember this URL if the use element was not empty and no request was sent
|
||||||
|
cache[base] = true;
|
||||||
|
} else if (cache[base].onload) {
|
||||||
|
// if it turns out that prepending the SVG is not necessary,
|
||||||
|
// abort the in-progress xhr.
|
||||||
|
cache[base].abort();
|
||||||
|
delete cache[base].onload;
|
||||||
|
cache[base] = true;
|
||||||
|
}
|
||||||
|
} else if (base.length && cache[base]) {
|
||||||
|
setTimeout(attrUpdateFunc({
|
||||||
|
useEl: uses[i],
|
||||||
|
base: base,
|
||||||
|
hash: hash
|
||||||
|
}), 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uses = "";
|
||||||
|
inProgressCount += 1;
|
||||||
|
observeIfDone();
|
||||||
|
};
|
||||||
|
var winLoad;
|
||||||
|
winLoad = function () {
|
||||||
|
window.removeEventListener("load", winLoad, false); // to prevent memory leaks
|
||||||
|
tid = setTimeout(checkUseElems, 0);
|
||||||
|
};
|
||||||
|
if (document.readyState !== "complete") {
|
||||||
|
// The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
|
||||||
|
window.addEventListener("load", winLoad, false);
|
||||||
|
} else {
|
||||||
|
// No need to add a listener if the document is already loaded, initialize immediately.
|
||||||
|
winLoad();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}());
|
||||||
32
public/assets/icons/symbol-defs.svg
Normal file
32
public/assets/icons/symbol-defs.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
@ -1,52 +1,62 @@
|
|||||||
<!DOCTYPE html>
|
{% extends 'base.html.twig' %}
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset='UTF-8'>
|
|
||||||
<title>{% block title %}{% endblock %}</title>
|
|
||||||
{% block stylesheets %}
|
|
||||||
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
|
|
||||||
{% endblock %}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% block body %}
|
|
||||||
<div id='header'>
|
|
||||||
<nav class='drop-down flex-item' id='menu'>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="#" class='hover-effect'>
|
|
||||||
<img id='menu-png' src="{{ asset('assets/images/menu.png') }}"/>
|
|
||||||
</a>
|
|
||||||
<ul>
|
|
||||||
<li><a>Bookmarks</a></li>
|
|
||||||
<li><a>Messages</a></li>
|
|
||||||
<li><a>Settings</a></li>
|
|
||||||
<li><a>Logout</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<nav class='drop-down flex-item' id='instance'>
|
{% block meta %}{% endblock %}
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="#" class='hover-effect align-mid'>
|
|
||||||
<img id='logo' src="{{ asset('assets/images/logo.png') }}"/>
|
|
||||||
<span> GNUsocial </span>
|
|
||||||
<img id='down-arrow' src="{{ asset('assets/images/drop.png') }}"/>
|
|
||||||
</a>
|
|
||||||
<ul>
|
|
||||||
<li><a>Main Page</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class='flex-item' id='search'>
|
{% block title %}{% endblock %}
|
||||||
<img id='search-png' src="{{ asset('assets/images/search.png') }}"/>
|
|
||||||
</div>
|
{% block stylesheets %}
|
||||||
</div>
|
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block javascripts %}{% endblock %}
|
|
||||||
</body>
|
{% block body %}
|
||||||
</html>
|
<div id='header'>
|
||||||
|
<nav class='drop-down' id='menu'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>
|
||||||
|
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
|
||||||
|
</a>
|
||||||
|
<ul>
|
||||||
|
<li><a>Bookmarks</a></li>
|
||||||
|
<li><a>Messages</a></li>
|
||||||
|
<li><a>Settings</a></li>
|
||||||
|
<li><a>Logout</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class='drop-down' id='instance'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>
|
||||||
|
<svg class="icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
|
||||||
|
<b id='instance-name'>GNU social</b>
|
||||||
|
<svg class="icon icon-drop"><use xlink:href="#icon-drop"></use></svg>
|
||||||
|
</a>
|
||||||
|
<ul>
|
||||||
|
<li><a>Main Page</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class='flex-item' id='search'>
|
||||||
|
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
|
||||||
|
</div>
|
||||||
|
<div id='profile'>
|
||||||
|
<div id='nick'>
|
||||||
|
<svg class="icon icon-avatar"><use xlink:href="#icon-avatar"></use></svg>
|
||||||
|
<b id='name'>someone</b>
|
||||||
|
</div>
|
||||||
|
<div id='tags'>
|
||||||
|
<i>coffee addict</i>
|
||||||
|
<i>lazy</i>
|
||||||
|
</div>
|
||||||
|
<div id='stats'>
|
||||||
|
<b>1337</b> Followers
|
||||||
|
<b>42</b> Following
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block javascripts %}{% endblock %}
|
||||||
|
|||||||
@ -1 +1,50 @@
|
|||||||
{% extends 'faq/base.html.twig' %}
|
{% extends 'faq/base.html.twig' %}
|
||||||
|
|
||||||
|
{% block title %}FAQ{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
{{ parent() }}
|
||||||
|
<nav class='faq-nav'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect active'>FAQ</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>Help</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>Contact</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>Tags</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>Groups</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>API</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class='hover-effect'>OpenID</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
{% apply markdown_to_html %}
|
||||||
|
# FAQ
|
||||||
|
These are some *Frequently Asked Questions* about this service, with some answers.
|
||||||
|
|
||||||
|
|
||||||
|
## What is this site?
|
||||||
|
This is a social network, running the GNU social software.
|
||||||
|
|
||||||
|
You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
|
||||||
|
|
||||||
|
In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
|
||||||
|
{% endapply %}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue
Block a user