GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[UI] SVG icons added

Browse Source 
[TWIG][UI] Header completed
This commit is contained in:
rainydaysavings 2020-06-12 23:45:10 +01:00 committed by Hugo Sales
parent 9d36861076
commit aac90a9c9e
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
27 changed files with 1506 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

371
public/assets/css/faq/base.css
View File

@ -1,132 +1,247 @@
/* GENERAL ----------------------------*/
body, html
{
background-image: linear-gradient(to right bottom, #485563, #404c59, #38434f, #313a45, #29323c);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
}
ul
{
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li
{
position: relative;
}
.drop-down ul li ul a
{
line-height: 1.8em;
}
.drop-down ul li ul
{
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.20);
padding: 0.8em 1.5em 1.5em 0.8em;
border-radius: 4px;
}
.drop-down ul li:hover ul
{
display: block;
}
.drop-down ul li ul a:hover
{
opacity: 0.6;
transition: all 0.5s ease;
}
#hover-effect:hover
{
opacity: 0.6;
transition: all 0.5s ease;
}
a:link
{
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited
{
outline: 0;
color: #F6F6F6;
}
body, html
{
background-image: linear-gradient(to right bottom, #485563, #404c59, #38434f, #313a45, #29323c);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #F6F6F6;
font-family: 'Open Sans', sans-serif;
font-size: 1.250em;
margin: 0;
padding: 0;
}
ul
{
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
}
.drop-down ul li
{
position: relative;
}
.drop-down ul li ul a
{
line-height: 0.8em;
}
.drop-down ul li ul
{
display: none;
position: absolute;
background-color: #29323C;
padding: 0.4em 0.8em 0.8em 0.8em;
border-radius: 4px;
}
.drop-down ul li:hover ul
{
display: block;
}
.drop-down ul li ul a:hover
{
opacity: 0.6;
transition: all 0.5s ease;
}
#hover-effect:hover
{
opacity: 0.6;
transition: all 0.5s ease;
}
a:link
{
text-decoration: none;
outline: 0;
color: #F6F6F6;
}
a:visited
{
outline: 0;
color: #F6F6F6;
}
ul li ul a
{
font-size: 0.65em;
}
b
{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
/*-------------------------------------*/
/* CONTAINER --------------------------*/
#container
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/*-------------------------------------*/
/* HEADER -----------------------------*/
#header
{
margin-top: 2em;
margin-left: 20%;
margin-right: 20%;
display: flex;
justify-content: space-between;
}
.flex-items
{
margin: 2em;
}
/* MENU -------------------------------*/
#menu
{
order: 1;
}
#menu-png
{
height: 2em;
}
/*-------------------------------------*/
/* INSTANCE ---------------------------*/
#instance
{
order: 2;
}
#align-mid
{
}
#logo
{
height: 2em;
}
#down-arrow
{
height: 1em;
}
/*-------------------------------------*/
/* SEARCH -----------------------------*/
#search
{
order: 3;
}
#search-png
{
height: 2em;
}
/*-------------------------------------*/
#header
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
order: 1;
width: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: #00000040;
padding: 1em 1em;
}
/* MENU -------------------------------*/
#menu
{
order: 1;
}
.icon-menu
{
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/*-------------------------------------*/
/* 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
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 778 B

5
public/assets/icons/SVG/drop.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

5
public/assets/icons/SVG/heart.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

5
public/assets/icons/SVG/logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

7
public/assets/icons/SVG/menu.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

7
public/assets/icons/SVG/recycle.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
public/assets/icons/SVG/reply.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

5
public/assets/icons/SVG/search.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 763 B

61
public/assets/icons/demo-external-svg.html Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long

280
public/assets/icons/selection.json Normal file
View File

File diff suppressed because one or more lines are too long

46
public/assets/icons/sprite/sprite.css Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

16
public/assets/icons/style.css Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/images/drop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/assets/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/images/menu.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

BIN
public/assets/images/search.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

52
templates/base.html.twig
View File

File diff suppressed because one or more lines are too long

110
templates/faq/base.html.twig
View File

@ -1,52 +1,62 @@
<!DOCTYPE html>
<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>
{% extends 'base.html.twig' %}
<nav class='drop-down flex-item' id='instance'>
<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>
{% block meta %}{% endblock %}
<div class='flex-item' id='search'>
<img id='search-png' src="{{ asset('assets/images/search.png') }}"/>
</div>
</div>
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
{% block title %}{% endblock %}
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/base.css') }}">
{% endblock %}
{% block body %}
<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 %}

51
templates/faq/home.html.twig
View File

@ -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 %}