mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-10-22 16:49:19 +02:00
A. Shelepenok
GitHub
commit
5cc516ffb5
4
.babelrc
Normal file
4
.babelrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"presets": ['react', 'es2015', 'stage-1'],
|
||||
"plugins": ['add-module-exports']
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
# Browsers that we support
|
||||
|
||||
> 1%
|
||||
Last 2 versions
|
||||
Last 2 versions
|
||||
IE 10
|
||||
11
.eslintrc
11
.eslintrc
@ -1,10 +1,14 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": "airbnb",
|
||||
"plugins": [
|
||||
"react",
|
||||
"jsx-a11y",
|
||||
"import"
|
||||
],
|
||||
"globals": {
|
||||
"graphql": true
|
||||
},
|
||||
"rules": {
|
||||
"global-require": [0],
|
||||
"react/jsx-filename-extension": [0],
|
||||
@ -13,7 +17,10 @@
|
||||
"react/forbid-prop-types": [0],
|
||||
/* to allow importing 'gatsby-helpers' */
|
||||
"import/no-extraneous-dependencies": [0],
|
||||
"comma-dangle": ["error", {"functions": "ignore"}],
|
||||
"arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": true }],
|
||||
"import/no-unresolved": [0],
|
||||
"import/extensions": [0]
|
||||
"import/extensions": [0],
|
||||
"no-console": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
7
.gitattributes
vendored
7
.gitattributes
vendored
@ -1,4 +1,3 @@
|
||||
$ cat .gitattributes
|
||||
*.js linguist-language=JavaScript
|
||||
**/*.js linguist-language=JavaScript
|
||||
static/css/*.css linguist-vendored
|
||||
*.jsx linguist-language=JavaScript
|
||||
public linguist-vendored
|
||||
src/assets/fonts linguist-vendored
|
||||
7
.gitignore
vendored
7
.gitignore
vendored
@ -1,11 +1,8 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
public/
|
||||
npm-debug.log
|
||||
|
||||
.eslintcache
|
||||
|
||||
public
|
||||
|
||||
.gatsby-context.js
|
||||
pages/.manifest
|
||||
.idea
|
||||
gatsby-starter-lumen.iml
|
||||
11
.project
11
.project
@ -1,11 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>gatsby-starter-lumen</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
</natures>
|
||||
</projectDescription>
|
||||
75
README.md
75
README.md
@ -1,25 +1,86 @@
|
||||
[](https://github.com/gatsbyjs/gatsby) [](https://codeclimate.com/github/alxshelepenok/gatsby-starter-lumen) [](https://raw.githubusercontent.com/alxshelepenok/gatsby-starter-lumen/master/LICENSE) [](https://twitter.com/intent/tweet?text=Wow:&url=https://github.com/alxshelepenok/gatsby-starter-lumen)
|
||||
|
||||
# Lumen
|
||||
|
||||
[Gatsby](https://github.com/gatsbyjs/gatsby) starter for creating a blog.
|
||||
Lumen is a minimal, lightweight and mobile-first starter for creating blogs uses [Gatsby](https://github.com/gatsbyjs/gatsby).
|
||||
|
||||
## Features
|
||||
+ Clean and extensible code.
|
||||
+ Lost Grid ([peterramsing/lost](https://github.com/peterramsing/lost)).
|
||||
+ Beautiful Typography ([matejlatin/Gutenberg](https://github.com/matejlatin/Gutenberg)).
|
||||
+ Beautiful typography inspired by [matejlatin/Gutenberg](https://github.com/matejlatin/Gutenberg).
|
||||
+ [Mobile-First](https://medium.com/@mrmrs_/mobile-first-css-48bc4cc3f60f) approach in development.
|
||||
+ Stylesheet built using SASS and [BEM](http://getbem.com/naming/)-Style naming.
|
||||
+ Syntax highlighting in code blocks.
|
||||
+ Sidebar menu built using a configuration block.
|
||||
+ Archive organized by tags and categories.
|
||||
+ Automatic RSS generation.
|
||||
+ Automatic Sitemap generation.
|
||||
+ Offline support.
|
||||
+ Google Analitics support.
|
||||
|
||||
## Installing
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
└── src
|
||||
├── assets
|
||||
│ ├── fonts
|
||||
│ │ └── fontello-771c82e0
|
||||
│ │ ├── css
|
||||
│ │ └── font
|
||||
│ └── scss
|
||||
│ ├── base
|
||||
│ ├── mixins
|
||||
│ └── pages
|
||||
├── components
|
||||
│ ├── CategoryTemplateDetails
|
||||
│ ├── Links
|
||||
│ ├── Menu
|
||||
│ ├── PageTemplateDetails
|
||||
│ ├── Post
|
||||
│ ├── PostTemplateDetails
|
||||
│ ├── Sidebar
|
||||
│ └── TagTemplateDetails
|
||||
├── layouts
|
||||
├── pages
|
||||
│ ├── articles
|
||||
│ │ ├── 2016-01-09---Perfecting-the-Art-of-Perfection
|
||||
│ │ ├── 2016-01-12---The-Origins-of-Social-Stationery-Lettering
|
||||
│ │ ├── 2016-02-02---A-Brief-History-of-Typography
|
||||
│ │ ├── 2017-18-08---The-Birth-of-Movable-Type
|
||||
│ │ └── 2017-19-08---Humane-Typography-in-the-Digital-Age
|
||||
│ └── pages
|
||||
│ ├── 2015-05-01---about
|
||||
│ └── 2015-05-01---contact
|
||||
└── templates
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
Install this starter (assuming Gatsby is installed) by running from your CLI:
|
||||
`gatsby new lumen https://github.com/wpioneer/gatsby-starter-lumen`
|
||||
`gatsby new lumen https://github.com/alxshelepenok/gatsby-starter-lumen`
|
||||
|
||||
## Running in development
|
||||
#### Running in Development
|
||||
`gatsby develop`
|
||||
|
||||
#### Building
|
||||
`gatsby build`
|
||||
|
||||
## Screenshot
|
||||
|
||||
|
||||
|
||||
## Ports
|
||||
|
||||
[Statinamic port](https://github.com/thangngoc89/statinamic-theme-lumen) by [Khoa Nguyen](https://github.com/thangngoc89)
|
||||
|
||||
## Contributors
|
||||
|
||||
[<img alt="alxshelepenok" src="https://avatars2.githubusercontent.com/u/8599449?v=4&s=117" width="117">](https://github.com/alxshelepenok) |[<img alt="abisz" src="https://avatars3.githubusercontent.com/u/7287780?v=4&s=117" width="117">](https://github.com/abisz) |[<img alt="ihororlovskyi" src="https://avatars3.githubusercontent.com/u/7969737?v=4&s=117" width="117">](https://github.com/ihororlovskyi) |[<img alt="vinnymac" src="https://avatars0.githubusercontent.com/u/1832781?v=4&s=117" width="117">](https://github.com/vinnymac) |[<img alt="axelclark" src="https://avatars1.githubusercontent.com/u/16856928?v=4&s=117" width="117">](https://github.com/axelclark) |[<img alt="concreted" src="https://avatars2.githubusercontent.com/u/4016897?v=4&s=117" width="117">](https://github.com/concreted) |
|
||||
:---: |:---: |:---: |:---: |:---: |:---: |
|
||||
[alxshelepenok](https://github.com/alxshelepenok) |[abisz](https://github.com/abisz) |[ihororlovskyi](https://github.com/ihororlovskyi) |[vinnymac](https://github.com/vinnymac) |[axelclark](https://github.com/axelclark) |[concreted](https://github.com/concreted) |
|
||||
|
||||
[<img alt="charandas" src="https://avatars2.githubusercontent.com/u/542168?v=4&s=117" width="117">](https://github.com/charandas) |[<img alt="zollillo" src="https://avatars3.githubusercontent.com/u/8833904?v=4&s=117" width="117">](https://github.com/zollillo) |[<img alt="swapnilmishra" src="https://avatars2.githubusercontent.com/u/875450?v=4&s=117" width="117">](https://github.com/swapnilmishra) |
|
||||
:---: |:---: |:---: |
|
||||
[charandas](https://github.com/charandas) |[zollillo](https://github.com/zollillo) |[swapnilmishra](https://github.com/swapnilmishra) |
|
||||
|
||||
|
||||
## License
|
||||
The MIT License (MIT)
|
||||
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { include as includes } from 'underscore.string';
|
||||
import find from 'lodash/find';
|
||||
|
||||
import './style.css';
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
const { post } = this.props;
|
||||
const { pages } = this.props.route;
|
||||
const { readNext } = post;
|
||||
|
||||
let nextPost;
|
||||
if (readNext) {
|
||||
nextPost = find(pages, page => includes(page.path, readNext));
|
||||
}
|
||||
if (!nextPost) {
|
||||
return React.createElement('noscript', null);
|
||||
}
|
||||
|
||||
nextPost = find(pages, page => includes(page.path, readNext.slice(1, -1)));
|
||||
const description = nextPost.data.description;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h6 style={{ fontSize: '16px', margin: '20px 0 0' }}>READ THIS NEXT:</h6>
|
||||
<h3 style={{ margin: '5px 0 0' }}>
|
||||
<Link to={nextPost.path} query={{ readNext: true }}>
|
||||
{nextPost.data.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="description">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReadNext.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
route: React.PropTypes.object,
|
||||
};
|
||||
|
||||
export default ReadNext;
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
.description {
|
||||
font-size: responsive 12px 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
import { config } from 'config';
|
||||
import './style.css';
|
||||
import '../../static/fonts/fontawesome/style.css';
|
||||
|
||||
class SiteLinks extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="blog-links">
|
||||
<ul>
|
||||
{config.siteTwitterUrl && (
|
||||
<li>
|
||||
<a href={config.siteTwitterUrl}>
|
||||
<i className="fa fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{config.siteGithubUrl && (
|
||||
<li>
|
||||
<a href={config.siteGithubUrl}>
|
||||
<i className="fa fa-github-alt" />
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{config.siteVkUrl && (
|
||||
<li>
|
||||
<a href={config.siteVkUrl}><i className="fa fa-vk" /></a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<ul>
|
||||
{config.siteEmailUrl && (
|
||||
<li>
|
||||
<a href={`mailto:${config.siteEmailUrl}`}>
|
||||
<i className="fa fa-envelope-o" />
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{config.siteTelegramUrl && (
|
||||
<li>
|
||||
<a href={config.siteTelegramUrl}>
|
||||
<i className="fa fa-paper-plane" />
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<ul>
|
||||
{config.siteRssUrl && (
|
||||
<li>
|
||||
<a href={config.siteRssUrl}><i className="fa fa-rss" /></a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SiteLinks;
|
||||
@ -1,32 +0,0 @@
|
||||
.blog-links {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-links ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
clear: fix-legacy;
|
||||
}
|
||||
.blog-links ul > li {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 3px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-links ul > li:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-links ul > li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.blog-links ul > li > a > i {
|
||||
color: #606060;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.blog-links ul > li:hover a > i {
|
||||
color: #444;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { prefixLink } from 'gatsby-helpers';
|
||||
import './style.css';
|
||||
|
||||
class SiteNav extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<nav className="blog-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={prefixLink('/')} activeClassName="current" onlyActiveOnIndex> Articles
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={prefixLink('/about/')} activeClassName="current"> About me
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={prefixLink('/contact/')} activeClassName="current"> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SiteNav;
|
||||
@ -1,24 +0,0 @@
|
||||
.blog-nav {
|
||||
margin: 20px 0px 10px;
|
||||
}
|
||||
.blog-nav ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.blog-nav ul li {
|
||||
margin: 10px 0 10px;
|
||||
}
|
||||
.blog-nav ul li a {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
border-bottom: 0;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
}
|
||||
.blog-nav ul li a.current {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-nav ul li a:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import SiteSidebar from '../SiteSidebar';
|
||||
import './style.css';
|
||||
|
||||
class SitePage extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props;
|
||||
const post = route.page.data;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SiteSidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="main">
|
||||
<div className="main-inner">
|
||||
<div className="blog-page">
|
||||
<div className="text">
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: post.body }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SitePage.propTypes = {
|
||||
route: React.PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default SitePage;
|
||||
@ -1,17 +0,0 @@
|
||||
.blog-page {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.blog-page h1 {
|
||||
font-size: responsive 20px 36px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.blog-page p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { Link } from 'react-router';
|
||||
import { prefixLink } from 'gatsby-helpers';
|
||||
import { config } from 'config';
|
||||
import ReadNext from '../ReadNext';
|
||||
import './style.css';
|
||||
import '../../static/css/highlight.css';
|
||||
|
||||
class SitePost extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props;
|
||||
const post = route.page.data;
|
||||
const home = (
|
||||
<div>
|
||||
<Link className="gohome" to={prefixLink('/')}>All Articles</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{home}
|
||||
<div className="blog-single">
|
||||
<div className="text">
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: post.body }} />
|
||||
<div className="date-published">
|
||||
<em>Published {moment(post.date).format('D MMM YYYY')}</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
<ReadNext post={post} {...this.props} />
|
||||
<hr />
|
||||
<p>
|
||||
{config.siteDescr}
|
||||
<a href={config.siteTwitterUrl}>
|
||||
<br /> <strong>{config.siteAuthor}</strong> on Twitter
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SitePost.propTypes = {
|
||||
route: React.PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default SitePost;
|
||||
@ -1,109 +0,0 @@
|
||||
.blog-post {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.blog-post:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-post h2 {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-post h2 a {
|
||||
color: #222;
|
||||
}
|
||||
.blog-post h2 a:hover,
|
||||
.blog-post h2 a:focus {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-post p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.blog-post time {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .blog-category {
|
||||
font-size: 14px;
|
||||
color: #f7a046;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .readmore {
|
||||
font-size: 16px;
|
||||
color: #5d93ff;
|
||||
}
|
||||
.blog-post .readmore:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-single {
|
||||
max-width: 945px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single h1 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-single .text {
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.blog-single h1, .blog-single .date-published, .blog-single .text *:not(div) {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single .text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.blog-single .footer {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.gohome {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
color: #999;
|
||||
background: #f4f4f4;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.gohome:focus {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
.gohome:hover {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single h1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.gohome {
|
||||
position: static;
|
||||
margin: 20px auto 0;
|
||||
text-align: center;
|
||||
width: 85px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { prefixLink } from 'gatsby-helpers';
|
||||
import { config } from 'config';
|
||||
import SiteNav from '../SiteNav';
|
||||
import SiteLinks from '../SiteLinks';
|
||||
import './style.css';
|
||||
import profilePic from '../../pages/photo.jpg';
|
||||
|
||||
class SiteSidebar extends React.Component {
|
||||
render() {
|
||||
const { location } = this.props;
|
||||
const isHome = location.pathname === prefixLink('/');
|
||||
|
||||
/* eslint-disable jsx-a11y/img-redundant-alt*/
|
||||
const header = (
|
||||
<header>
|
||||
<Link style={{ textDecoration: 'none', borderBottom: 'none', outline: 'none' }} to={prefixLink('/')}>
|
||||
<img
|
||||
src={profilePic}
|
||||
width="75" height="75"
|
||||
alt="Profile picture of the author"
|
||||
/>
|
||||
</Link>
|
||||
{ isHome ? (
|
||||
<h1><Link style={{ textDecoration: 'none', borderBottom: 'none', color: 'inherit' }} to={prefixLink('/')}> {config.siteAuthor}</Link></h1>
|
||||
) :
|
||||
<h2><Link style={{ textDecoration: 'none', borderBottom: 'none', color: 'inherit' }} to={prefixLink('/')}> {config.siteAuthor}</Link></h2> }
|
||||
<p>
|
||||
{config.siteDescr}
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
/* eslint-enable jsx-a11y/img-redundant-alt*/
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<div className="sidebar-inner">
|
||||
<div className="blog-details">
|
||||
<header>
|
||||
{header}
|
||||
</header>
|
||||
</div>
|
||||
<div className="blog-options">
|
||||
<SiteNav {...this.props} />
|
||||
<footer>
|
||||
<SiteLinks {...this.props} />
|
||||
<p className="copyright">
|
||||
© All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SiteSidebar.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
};
|
||||
|
||||
export default SiteSidebar;
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
.sidebar {
|
||||
lost-column: 1/3;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
position: relative;
|
||||
padding: 40px;
|
||||
}
|
||||
.sidebar .sidebar-inner:after {
|
||||
background: #eee;
|
||||
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%);
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 540px;
|
||||
top: 30px;
|
||||
right: -10px;
|
||||
bottom: 0;
|
||||
}
|
||||
.sidebar .sidebar-inner img {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
.sidebar .sidebar-inner p {
|
||||
color: #888;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.sidebar .sidebar-inner p.copyright {
|
||||
color: #b6b6b6;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (max-width:1100px) {
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 35px 20px 0;
|
||||
}
|
||||
.sidebar {
|
||||
lost-column: 1/2;
|
||||
}
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.sidebar {
|
||||
lost-column: 5/12;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 30px 20px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
.sidebar {
|
||||
lost-column: 1;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 25px 20px 0;
|
||||
}
|
||||
.sidebar .sidebar-inner:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
14
config.toml
14
config.toml
@ -1,14 +0,0 @@
|
||||
siteTitle = "Blog by John Doe"
|
||||
siteDescr = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
|
||||
siteAuthor = "John Doe"
|
||||
|
||||
siteTelegramUrl = "#"
|
||||
siteTwitterUrl = "#"
|
||||
siteGithubUrl = "#"
|
||||
siteEmailUrl = "#"
|
||||
siteRssUrl = "#"
|
||||
siteVkUrl = "#"
|
||||
|
||||
googleAnalyticsId = ""
|
||||
|
||||
linkPrefix = "/gatsby-starter-lumen"
|
||||
@ -1,8 +0,0 @@
|
||||
import ReactGA from 'react-ga';
|
||||
import { config } from 'config';
|
||||
|
||||
ReactGA.initialize(config.googleAnalyticsId);
|
||||
|
||||
exports.onRouteUpdate = (state) => {
|
||||
ReactGA.pageview(state.pathname);
|
||||
};
|
||||
165
gatsby-config.js
Normal file
165
gatsby-config.js
Normal file
@ -0,0 +1,165 @@
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
url: 'https://alxshelepenok.github.com/gatsby-starter-lumen',
|
||||
title: 'Blog by John Doe',
|
||||
subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
|
||||
copyright: '© All rights reserved.',
|
||||
menu: [
|
||||
{
|
||||
label: 'Articles',
|
||||
path: '/'
|
||||
},
|
||||
{
|
||||
label: 'About me',
|
||||
path: '/about/'
|
||||
},
|
||||
{
|
||||
label: 'Contact me',
|
||||
path: '/contact/'
|
||||
}
|
||||
],
|
||||
author: {
|
||||
name: 'John Doe',
|
||||
email: '#',
|
||||
telegram: '#',
|
||||
twitter: '#',
|
||||
github: '#',
|
||||
rss: '#',
|
||||
vk: '#'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
path: `${__dirname}/src/pages`,
|
||||
name: 'pages'
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-feed',
|
||||
options: {
|
||||
query: `
|
||||
{
|
||||
site {
|
||||
siteMetadata {
|
||||
url
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
feeds: [
|
||||
{
|
||||
serialize: ({ query: { site, allMarkdownRemark } }) => (
|
||||
allMarkdownRemark.edges.map(edge =>
|
||||
Object.assign({}, edge.node.frontmatter, {
|
||||
description: edge.node.frontmatter.description,
|
||||
date: edge.node.frontmatter.date,
|
||||
url: site.siteMetadata.url + edge.node.fields.slug,
|
||||
guid: site.siteMetadata.url + edge.node.fields.slug,
|
||||
custom_elements: [{ 'content:encoded': edge.node.html }]
|
||||
})
|
||||
)
|
||||
),
|
||||
query: `
|
||||
{
|
||||
allMarkdownRemark(
|
||||
limit: 1000,
|
||||
sort: { order: DESC, fields: [frontmatter___date] },
|
||||
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
layout
|
||||
draft
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
output: '/rss.xml'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-transformer-remark',
|
||||
options: {
|
||||
plugins: [
|
||||
{
|
||||
resolve: 'gatsby-remark-images',
|
||||
options: {
|
||||
maxWidth: 960,
|
||||
linkImagesToOriginal: false
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-remark-responsive-iframe',
|
||||
options: {
|
||||
wrapperStyle: 'margin-bottom: 1.0725rem'
|
||||
}
|
||||
},
|
||||
'gatsby-remark-prismjs',
|
||||
'gatsby-remark-copy-linked-files',
|
||||
'gatsby-remark-smartypants'
|
||||
]
|
||||
}
|
||||
},
|
||||
'gatsby-transformer-sharp',
|
||||
'gatsby-plugin-sharp',
|
||||
{
|
||||
resolve: 'gatsby-plugin-google-analytics',
|
||||
options: {
|
||||
trackingId: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-sitemap',
|
||||
options: {
|
||||
query: `
|
||||
{
|
||||
site {
|
||||
siteMetadata {
|
||||
url
|
||||
}
|
||||
}
|
||||
allSitePage(
|
||||
filter: {
|
||||
path: { regex: "/^(?!/404/|/404.html|/dev-404-page/)/" }
|
||||
}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,
|
||||
output: '/sitemap.xml',
|
||||
serialize: ({ site, allSitePage }) =>
|
||||
allSitePage.edges.map((edge) => {
|
||||
return {
|
||||
url: site.siteMetadata.url + edge.node.path,
|
||||
changefreq: 'daily',
|
||||
priority: 0.7
|
||||
};
|
||||
})
|
||||
}
|
||||
},
|
||||
'gatsby-plugin-offline',
|
||||
'gatsby-plugin-catch-links',
|
||||
'gatsby-plugin-react-helmet',
|
||||
'gatsby-plugin-postcss-sass'
|
||||
]
|
||||
};
|
||||
211
gatsby-node.js
211
gatsby-node.js
@ -1,22 +1,203 @@
|
||||
const rucksack = require('rucksack-css');
|
||||
const _ = require('lodash');
|
||||
const Promise = require('bluebird');
|
||||
const path = require('path');
|
||||
const lost = require('lost');
|
||||
const cssnext = require('postcss-cssnext');
|
||||
const pxtorem = require('postcss-pxtorem');
|
||||
const slash = require('slash');
|
||||
|
||||
exports.modifyWebpackConfig = function (config) {
|
||||
exports.createPages = ({ graphql, boundActionCreators }) => {
|
||||
const { createPage } = boundActionCreators;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const postTemplate = path.resolve('./src/templates/post-template.js');
|
||||
const pageTemplate = path.resolve('./src/templates/page-template.js');
|
||||
const tagTemplate = path.resolve('./src/templates/tag-template.js');
|
||||
const categoryTemplate = path.resolve('./src/templates/category-template.js');
|
||||
|
||||
graphql(
|
||||
`
|
||||
{
|
||||
allMarkdownRemark(
|
||||
limit: 1000,
|
||||
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } },
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
tags
|
||||
category
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
).then((result) => {
|
||||
if (result.errors) {
|
||||
console.log(result.errors);
|
||||
reject(result.errors);
|
||||
}
|
||||
|
||||
_.each(result.data.allMarkdownRemark.edges, (edge) => {
|
||||
createPage({
|
||||
path: edge.node.fields.slug,
|
||||
component: slash(postTemplate),
|
||||
context: {
|
||||
slug: edge.node.fields.slug
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let tags = [];
|
||||
_.each(result.data.allMarkdownRemark.edges, (edge) => {
|
||||
if (_.get(edge, 'node.frontmatter.tags')) {
|
||||
tags = tags.concat(edge.node.frontmatter.tags);
|
||||
}
|
||||
});
|
||||
tags = _.uniq(tags);
|
||||
_.each(tags, (tag) => {
|
||||
const tagPath = `/tags/${_.kebabCase(tag)}/`;
|
||||
createPage({
|
||||
path: tagPath,
|
||||
component: tagTemplate,
|
||||
context: {
|
||||
tag
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let categories = [];
|
||||
_.each(result.data.allMarkdownRemark.edges, (edge) => {
|
||||
if (_.get(edge, 'node.frontmatter.category')) {
|
||||
categories = categories.concat(edge.node.frontmatter.category);
|
||||
}
|
||||
});
|
||||
categories = _.uniq(categories);
|
||||
_.each(categories, (category) => {
|
||||
const categoryPath = `/categories/${_.kebabCase(category)}/`;
|
||||
createPage({
|
||||
path: categoryPath,
|
||||
component: categoryTemplate,
|
||||
context: {
|
||||
category
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
resolve();
|
||||
});
|
||||
|
||||
graphql(
|
||||
`
|
||||
{
|
||||
allMarkdownRemark(
|
||||
limit: 1000,
|
||||
filter: { frontmatter: { layout: { eq: "page" }, draft: { ne: true } } },
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
).then((result) => {
|
||||
if (result.errors) {
|
||||
console.log(result.errors);
|
||||
reject(result.errors);
|
||||
}
|
||||
|
||||
_.each(result.data.allMarkdownRemark.edges, (edge) => {
|
||||
createPage({
|
||||
path: edge.node.fields.slug,
|
||||
component: slash(pageTemplate),
|
||||
context: {
|
||||
slug: edge.node.fields.slug
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
|
||||
const { createNodeField } = boundActionCreators;
|
||||
|
||||
if (node.internal.type === 'File') {
|
||||
const parsedFilePath = path.parse(node.absolutePath);
|
||||
const slug = `/${parsedFilePath.dir.split('---')[1]}/`;
|
||||
createNodeField({ node, name: 'slug', value: slug });
|
||||
} else if (
|
||||
node.internal.type === 'MarkdownRemark' &&
|
||||
typeof node.slug === 'undefined'
|
||||
) {
|
||||
const fileNode = getNode(node.parent);
|
||||
let slug = fileNode.fields.slug;
|
||||
if (typeof node.frontmatter.path !== 'undefined') {
|
||||
slug = node.frontmatter.path;
|
||||
}
|
||||
createNodeField({
|
||||
node,
|
||||
name: 'slug',
|
||||
value: slug
|
||||
});
|
||||
|
||||
if (typeof node.frontmatter.tags !== 'undefined') {
|
||||
const tagSlugs = node.frontmatter.tags.map(
|
||||
tag => `/tags/${_.kebabCase(tag)}/`
|
||||
);
|
||||
createNodeField({ node, name: 'tagSlugs', value: tagSlugs });
|
||||
}
|
||||
|
||||
if (typeof node.frontmatter.category !== 'undefined') {
|
||||
const categorySlug = `/categories/${_.kebabCase(node.frontmatter.category)}/`;
|
||||
createNodeField({ node, name: 'categorySlug', value: categorySlug });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
exports.modifyWebpackConfig = ({ config }) => {
|
||||
config.merge({
|
||||
postcss: [
|
||||
lost(),
|
||||
rucksack(),
|
||||
cssnext({
|
||||
browsers: ['>1%', 'last 2 versions'],
|
||||
}),
|
||||
],
|
||||
pxtorem({
|
||||
rootValue: 16,
|
||||
unitPrecision: 5,
|
||||
propList: [
|
||||
'font',
|
||||
'font-size',
|
||||
'line-height',
|
||||
'letter-spacing',
|
||||
'margin',
|
||||
'margin-top',
|
||||
'margin-left',
|
||||
'margin-bottom',
|
||||
'margin-right',
|
||||
'padding',
|
||||
'padding-top',
|
||||
'padding-left',
|
||||
'padding-bottom',
|
||||
'padding-right',
|
||||
'border-radius',
|
||||
'width',
|
||||
'max-width'
|
||||
],
|
||||
selectorBlackList: [],
|
||||
replace: true,
|
||||
mediaQuery: false,
|
||||
minPixelValue: 0
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
config.loader('svg', {
|
||||
test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||
loader: 'file-loader',
|
||||
});
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
39
html.js
39
html.js
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { prefixLink } from 'gatsby-helpers';
|
||||
|
||||
const BUILD_TIME = new Date().getTime();
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'HTML',
|
||||
propTypes: {
|
||||
body: React.PropTypes.string,
|
||||
},
|
||||
render() {
|
||||
const { body } = this.props;
|
||||
const { title } = Helmet.rewind();
|
||||
const font = <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700&subset=latin,cyrillic" rel="stylesheet" type="text/css" />;
|
||||
let css;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// eslint-disable-next-line import/no-webpack-loader-syntax
|
||||
css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=5.0" />
|
||||
{ title.toComponent() }
|
||||
{ font }
|
||||
{ css }
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
<script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
},
|
||||
});
|
||||
63
package.json
63
package.json
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "1.2.0",
|
||||
"version": "2.0.0",
|
||||
"name": "gatsby-starter-lumen",
|
||||
"description": "Simple starter for Gatsby",
|
||||
"main": "n/a",
|
||||
@ -8,8 +8,6 @@
|
||||
"build": "gatsby build",
|
||||
"clean:public": "rm -rf public",
|
||||
"clean": "npm run clean:public",
|
||||
"copy:files": "find ./pages -maxdepth 1 -type f -regextype posix-extended -regex '.+\\.(pdf|txt|png|jpg|jpeg|gif)$' -exec cp -v {} ./public ';'",
|
||||
"copy": "npm run copy:files",
|
||||
"lint": "./node_modules/.bin/eslint --cache --ext .js,.jsx --ignore-pattern public .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"deploy": "gatsby build --prefix-links && gh-pages -d public"
|
||||
@ -26,48 +24,39 @@
|
||||
"author": "Alexander Shelepenok <alxshelepenok@gmail.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-preset-es2015": "^6.13.2",
|
||||
"babel-preset-react": "^6.11.1",
|
||||
"babel-preset-stage-0": "^6.5.0",
|
||||
"classnames": "^2.1.2",
|
||||
"front-matter": "^2.1.0",
|
||||
"gatsby": "^0.12.28",
|
||||
"history": "^2.1.2",
|
||||
"lodash": "^4.17.2",
|
||||
"moment": "^2.17.1",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-ga": "^2.1.2",
|
||||
"react-helmet": "^4.0.0",
|
||||
"react-router": "^2.6.1",
|
||||
"safe-access": "^0.1.0",
|
||||
"underscore.string": "^3.2.3",
|
||||
"raw-loader": "^0.5.1",
|
||||
"url-loader": "^0.5.7"
|
||||
"gatsby": "^1.8.12",
|
||||
"gatsby-link": "^1.6.8",
|
||||
"gatsby-plugin-catch-links": "^1.0.5",
|
||||
"gatsby-plugin-google-analytics": "^1.0.4",
|
||||
"gatsby-plugin-manifest": "^1.0.4",
|
||||
"gatsby-plugin-postcss-sass": "^1.0.3",
|
||||
"gatsby-plugin-feed": "^1.3.5",
|
||||
"gatsby-plugin-sitemap": "^1.2.2",
|
||||
"gatsby-plugin-offline": "^1.0.4",
|
||||
"gatsby-plugin-preact": "^1.0.0",
|
||||
"gatsby-plugin-react-helmet": "^1.0.3",
|
||||
"gatsby-plugin-sharp": "^1.6.2",
|
||||
"gatsby-remark-copy-linked-files": "^1.5.2",
|
||||
"gatsby-remark-images": "^1.5.4",
|
||||
"gatsby-remark-prismjs": "^1.2.1",
|
||||
"gatsby-remark-responsive-iframe": "^1.4.3",
|
||||
"gatsby-remark-smartypants": "^1.4.3",
|
||||
"gatsby-source-filesystem": "^1.4.3",
|
||||
"gatsby-transformer-remark": "^1.7.1",
|
||||
"gatsby-transformer-sharp": "^1.6.1",
|
||||
"typeface-roboto": "latest",
|
||||
"lodash": "^4.17.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.7",
|
||||
"babel-core": "^6.13.2",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-preset-react-hmre": "^1.1.1",
|
||||
"css-loader": "^0.26.1",
|
||||
"postcss-pxtorem": "^4.0.1",
|
||||
"eslint": "^3.x",
|
||||
"eslint-config-airbnb": "^13.0.0",
|
||||
"eslint-plugin-import": "^2.2.x",
|
||||
"eslint-plugin-jsx-a11y": "^2.2.3",
|
||||
"eslint-plugin-react": "^6.8.0",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"file-loader": "^0.10.0",
|
||||
"gh-pages": "^0.12.0",
|
||||
"image-webpack-loader": "^2.0.0",
|
||||
"lost": "^8.0.0",
|
||||
"null-loader": "^0.1.1",
|
||||
"postcss-loader": "^1.2.2",
|
||||
"react-transform-catch-errors": "^1.0.2",
|
||||
"react-transform-hmr": "^1.0.4",
|
||||
"redbox-react": "^1.3.0",
|
||||
"rucksack-css": "^0.9.1",
|
||||
"style-loader": "^0.13.1",
|
||||
"webpack": "^1.13.2"
|
||||
"lost": "^8.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
---
|
||||
path: /404.html
|
||||
layout: page
|
||||
---
|
||||
# NOT FOUND
|
||||
|
||||
You just hit a route that doesn't exist... the sadness.
|
||||
@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import '../static/css/reset.css';
|
||||
import '../static/css/typography.css';
|
||||
import '../static/css/base.css';
|
||||
|
||||
class Template extends React.Component {
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<div className="wrapper">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Template.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
};
|
||||
|
||||
export default Template;
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
title: My Second Post!
|
||||
date: "2015-05-06T23:46:37.121Z"
|
||||
layout: post
|
||||
path: "/my-second-post/"
|
||||
readNext: "/hi-folks/"
|
||||
category: "FrontEnd"
|
||||
description: "Civil society; save lives pathway to a better life public-private partnerships solution, tackle, protect UNHCR social movement Jane Addams sustainable campaign respond equality."
|
||||
---
|
||||
|
||||
Wow! I love blogging so much already.
|
||||
|
||||
Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."? ([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
|
||||
|
||||
Yeah, I didn't either.
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
title: New Beginnings
|
||||
date: "2015-05-28T22:40:32.169Z"
|
||||
layout: post
|
||||
path: "/hi-folks/"
|
||||
category: "FrontEnd"
|
||||
description: "Employment, gender, breakthrough insights carbon emissions reductions peaceful, sharing economy Angelina Jolie accelerate, inclusive capitalism research inspire social change social good informal economies minority. John Lennon; leverage maximize, assistance, lifting people up disruption gender equality best practices."
|
||||
---
|
||||
|
||||
*This post is going to be a little hard to read for those that don't speak latin.*
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel neque dignissim mi maximus interdum. Cras dictum quam et ex molestie facilisis. Proin dapibus sed sapien nec gravida. Praesent at leo ut erat varius rhoncus at non mi. Quisque cursus non leo et varius. Maecenas porttitor scelerisque sapien at venenatis. Proin pellentesque gravida elementum. Nam eget porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec commodo lacus, eu mollis nisi. Nullam felis mi, tempus ac ipsum a, venenatis blandit magna. Sed mattis magna est, quis tincidunt massa aliquam vitae. Ut in ipsum blandit, ultrices lacus a, condimentum nibh. Sed commodo, lorem eget interdum molestie, lacus nisi lacinia velit, tempus commodo lacus erat porttitor dolor.
|
||||
|
||||
Phasellus vitae ante justo. Fusce dui elit, finibus non posuere sed, ullamcorper at odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque molestie lorem dolor, eget tincidunt ligula suscipit sit amet. Maecenas tempor nulla orci, sed scelerisque massa convallis id. Fusce iaculis nibh et lectus bibendum viverra. Nulla volutpat vehicula tortor non cursus. Maecenas vulputate mi nec accumsan ultricies. Praesent vitae tellus ligula. Praesent placerat fringilla purus, ac fermentum ipsum faucibus sed. Fusce semper, sapien hendrerit fringilla sagittis, lacus felis accumsan tellus, ac mollis ex arcu vitae lorem. Duis vitae semper felis. Duis consectetur, diam id laoreet suscipit, felis felis imperdiet sem, vel posuere leo ligula nec sapien. Maecenas at imperdiet nulla. Quisque quam nibh, feugiat vitae rhoncus ac, hendrerit eu quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||
|
||||
Nullam vehicula lorem sed felis rutrum gravida. Nam mattis cursus lacinia. Cras sit amet interdum elit. Morbi viverra, est a tincidunt facilisis, est est maximus urna, id rhoncus mi metus et lacus. Pellentesque finibus ex vel nulla fermentum tempus. Nunc vel lorem enim. Sed varius scelerisque nulla, nec ultrices ligula gravida eu. Curabitur eu turpis sit amet nisl vehicula tempor ultrices eu lacus. Curabitur malesuada nulla neque. Aenean mattis lectus ex, molestie ultricies elit fringilla eget. Quisque iaculis volutpat nisl, vitae lobortis ipsum elementum sed. Nulla facilisi. Maecenas cursus turpis ac lacus efficitur, non bibendum ligula consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris accumsan placerat felis, at bibendum ante.
|
||||
|
||||
Quisque varius dui vel commodo lobortis. Vestibulum eu metus vel dui lobortis volutpat. Cras vitae neque ornare, vehicula urna et, efficitur dolor. Nunc congue euismod leo non rhoncus. Nulla mollis libero a ullamcorper placerat. Morbi bibendum viverra orci in auctor. Donec in est varius, hendrerit risus vitae, commodo purus. Praesent eget rhoncus ligula. Suspendisse quis ultricies ligula. Nullam tincidunt rutrum nisl eget luctus. Phasellus eget nulla semper, varius ligula a, gravida urna. Etiam tempor feugiat elit eu cursus. Donec tristique ligula a aliquam tempor.
|
||||
|
||||
Proin nec nunc tellus. Donec sapien leo, ornare quis condimentum a, euismod sit amet augue. Aliquam tincidunt mauris at arcu suscipit, quis scelerisque justo rhoncus. Vestibulum lobortis dui at odio lacinia mattis. Praesent nunc urna, bibendum ut dui eget, consequat suscipit leo. Curabitur auctor vel dui fermentum auctor. Sed ultrices ligula mauris, id blandit sapien ultrices id. Morbi volutpat tortor quis ex convallis aliquam. Nunc eleifend risus eget dui condimentum scelerisque.
|
||||
@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import sortBy from 'lodash/sortBy';
|
||||
import moment from 'moment';
|
||||
import Helmet from 'react-helmet';
|
||||
import { prefixLink } from 'gatsby-helpers';
|
||||
import access from 'safe-access';
|
||||
import { config } from 'config';
|
||||
import SiteSidebar from '../components/SiteSidebar';
|
||||
|
||||
class SiteIndex extends React.Component {
|
||||
render() {
|
||||
const pageLinks = [];
|
||||
// Sort pages.
|
||||
const sortedPages = sortBy(this.props.route.pages, page => access(page, 'data.date')).reverse();
|
||||
sortedPages.forEach((page) => {
|
||||
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
|
||||
const title = access(page, 'data.title') || page.path;
|
||||
const description = access(page, 'data.description');
|
||||
const datePublished = access(page, 'data.date');
|
||||
const category = access(page, 'data.category');
|
||||
|
||||
pageLinks.push((
|
||||
<div className="blog-post" key={title}>
|
||||
<time dateTime={moment(datePublished).format('MMMM D, YYYY')}>
|
||||
{moment(datePublished).format('MMMM YYYY')}
|
||||
</time>
|
||||
<span style={{ padding: '5px' }} />
|
||||
<span className="blog-category">{category}</span>
|
||||
<h2><Link style={{ borderBottom: 'none' }} to={prefixLink(page.path)}>{title}</Link></h2>
|
||||
<p dangerouslySetInnerHTML={{ __html: description }} />
|
||||
<Link className="readmore" to={prefixLink(page.path)}>Read</Link>
|
||||
</div>
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet title={config.siteTitle} />
|
||||
<SiteSidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="main">
|
||||
<div className="main-inner">
|
||||
{pageLinks}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SiteIndex.propTypes = {
|
||||
route: React.PropTypes.object,
|
||||
};
|
||||
|
||||
export default SiteIndex;
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
title: "About me"
|
||||
layout: page
|
||||
path: "/about"
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, in summo tamquam mea, gubergren laboramus torquatos usu ne, magna rationibus sit eu. Id constituam honestatis pri, iracundia adversarium vel te. Per ferri aliquam impedit ex. Ei nec elitr nonumy vidisse, et qui fierent maluisset sadipscing, tincidunt vituperata delicatissimi te quo.
|
||||
|
||||
Te est iisque volutpat, tacimates dissentias no ius. Ea eam quodsi omnium deseruisse, affert evertitur sententiae sea ei. Dicit minimum at quo, nulla ludus vivendum cu mea, audire reformidans mei id. In his deserunt tincidunt, cu stet soleat libris sit, et modus illum sea. Id usu ubique volumus deterruisset, mea ut viderer reformidans complectitur. Ignota meliore eu eam.
|
||||
|
||||
Vix mazim ornatus in, populo causae mandamus cu mei, ut malis novum postulant duo. Pro tantas consulatu in, ei nullam labore detraxit sed. Ne nam wisi percipitur. Ea sint nonumy pri. Id mel graeco latine tacimates, eum no habeo laudem iriure, sea putent tritani accommodare id. Pro no rebum decore eripuit.
|
||||
|
||||
Alia albucius pro ut. Mea ut ipsum dolor. Qui ea volumus blandit iudicabit, ad sed timeam nominati posidonium, mel ei meis ocurreret mnesarchum. Mei elitr senserit voluptatibus ad, te quod vivendo vix. Vis no perfecto abhorreant, cu appellantur repudiandae mei, at vix mnesarchum honestatis disputationi.
|
||||
|
||||
Omnium utamur detraxit te pro, affert nominati has ea. Delectus platonem ius et. Cibo aperiam denique an duo, illud laudem constituam quo id. Inani civibus pertinacia nam an. Luptatum instructior sed at, an elit accommodare sit, vix ne nulla soluta.
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
title: "Contact me"
|
||||
layout: page
|
||||
path: "/contact"
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, in summo tamquam mea, gubergren laboramus torquatos usu ne, magna rationibus sit eu. Id constituam honestatis pri, iracundia adversarium vel te. Per ferri aliquam impedit ex. Ei nec elitr nonumy vidisse, et qui fierent maluisset sadipscing, tincidunt vituperata delicatissimi te quo.
|
||||
|
||||
Te est iisque volutpat, tacimates dissentias no ius. Ea eam quodsi omnium deseruisse, affert evertitur sententiae sea ei. Dicit minimum at quo, nulla ludus vivendum cu mea, audire reformidans mei id. In his deserunt tincidunt, cu stet soleat libris sit, et modus illum sea. Id usu ubique volumus deterruisset, mea ut viderer reformidans complectitur. Ignota meliore eu eam.
|
||||
|
||||
Vix mazim ornatus in, populo causae mandamus cu mei, ut malis novum postulant duo. Pro tantas consulatu in, ei nullam labore detraxit sed. Ne nam wisi percipitur. Ea sint nonumy pri. Id mel graeco latine tacimates, eum no habeo laudem iriure, sea putent tritani accommodare id. Pro no rebum decore eripuit.
|
||||
|
||||
Alia albucius pro ut. Mea ut ipsum dolor. Qui ea volumus blandit iudicabit, ad sed timeam nominati posidonium, mel ei meis ocurreret mnesarchum. Mei elitr senserit voluptatibus ad, te quod vivendo vix. Vis no perfecto abhorreant, cu appellantur repudiandae mei, at vix mnesarchum honestatis disputationi.
|
||||
|
||||
Omnium utamur detraxit te pro, affert nominati has ea. Delectus platonem ius et. Cibo aperiam denique an duo, illud laudem constituam quo id. Inani civibus pertinacia nam an. Luptatum instructior sed at, an elit accommodare sit, vix ne nulla soluta.
|
||||
12
src/assets/fonts/fontello-771c82e0/LICENSE.txt
Normal file
12
src/assets/fonts/fontello-771c82e0/LICENSE.txt
Normal file
@ -0,0 +1,12 @@
|
||||
Font license info
|
||||
|
||||
|
||||
## Font Awesome
|
||||
|
||||
Copyright (C) 2016 by Dave Gandy
|
||||
|
||||
Author: Dave Gandy
|
||||
License: SIL ()
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
|
||||
75
src/assets/fonts/fontello-771c82e0/README.txt
Normal file
75
src/assets/fonts/fontello-771c82e0/README.txt
Normal file
@ -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
|
||||
792
src/assets/fonts/fontello-771c82e0/config.json
Normal file
792
src/assets/fonts/fontello-771c82e0/config.json
Normal file
@ -0,0 +1,792 @@
|
||||
{
|
||||
"name": "fontello",
|
||||
"css_prefix_text": "icon-",
|
||||
"css_use_suffix": false,
|
||||
"hinting": true,
|
||||
"units_per_em": 1000,
|
||||
"ascent": 850,
|
||||
"glyphs": [
|
||||
{
|
||||
"uid": "58a16628dcbd6456c61218f3d27591be",
|
||||
"css": "skype",
|
||||
"code": 61822,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "627abcdb627cb1789e009c08e2678ef9",
|
||||
"css": "twitter",
|
||||
"code": 61593,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "f3d95e13eb43f3f6b8efe1eb424a1e3b",
|
||||
"css": "vkontakte",
|
||||
"code": 61833,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "87276033a77d0b9b890125c3639e4f87",
|
||||
"css": "slack",
|
||||
"code": 61848,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "e1597911f34fea0a188ae51fe4a2d9a9",
|
||||
"css": "stackoverflow",
|
||||
"code": 61804,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "8e04c98c8f5ca0a035776e3001ad2638",
|
||||
"css": "facebook",
|
||||
"code": 61594,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "5e0a374728ffa8d0ae1f331a8f648231",
|
||||
"css": "github",
|
||||
"code": 61715,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "38575a803c4da31ce20d77e1e1236bcb",
|
||||
"css": "paper-plane",
|
||||
"code": 61912,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "4c1ef492f1d2c39a2250ae457cee2a6e",
|
||||
"css": "instagram",
|
||||
"code": 61805,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "bf882b30900da12fca090d9796bc3030",
|
||||
"css": "mail",
|
||||
"code": 59392,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "199c44bca402ec5a6351f75ba5228375",
|
||||
"css": "dribbble",
|
||||
"code": 61821,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "72b1277834cba5b7944b0a6cac7ddb0d",
|
||||
"css": "rss",
|
||||
"code": 61598,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "9d3e9faf68fd4e12def853f0d4e1173b",
|
||||
"css": "whatsapp",
|
||||
"code": 62002,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "e9107949dd6c9e8ab2b29ae07156e38c",
|
||||
"css": "linkedin",
|
||||
"code": 61665,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "43fcf807461234935e65261328e1dff6",
|
||||
"css": "tumblr",
|
||||
"code": 61811,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "2f87e74e6eb8d985044bf7f3c47cb50b",
|
||||
"css": "odnoklassniki",
|
||||
"code": 62051,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "190ef5c5f25ece755d6d64130ae02f80",
|
||||
"css": "file-text2",
|
||||
"code": 59396,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M896.3 223.7C874.6 194.1 844.4 159.5 811.2 126.3S743.4 62.9 713.8 41.2C663.4 4.3 639 0 625 0H140.6C97.5 0 62.5 35 62.5 78.1V921.9C62.5 965 97.5 1000 140.6 1000H859.4C902.5 1000 937.5 965 937.5 921.9V312.5C937.5 298.5 933.2 274.1 896.3 223.7ZM767 170.5C796.9 200.5 820.5 227.6 837.8 250H687.5V99.7C709.9 117 737 140.6 767 170.5ZM875 921.9C875 930.3 867.8 937.5 859.4 937.5H140.6C132.2 937.5 125 930.3 125 921.9V78.1C125 69.7 132.2 62.5 140.6 62.5 140.6 62.5 625 62.5 625 62.5V281.3C625 298.5 639 312.5 656.3 312.5H875V921.9ZM718.8 812.5H281.3C264 812.5 250 798.5 250 781.3S264 750 281.3 750H718.8C736 750 750 764 750 781.3S736 812.5 718.8 812.5ZM718.8 687.5H281.3C264 687.5 250 673.5 250 656.3S264 625 281.3 625H718.8C736 625 750 639 750 656.3S736 687.5 718.8 687.5ZM718.8 562.5H281.3C264 562.5 250 548.5 250 531.3S264 500 281.3 500H718.8C736 500 750 514 750 531.3S736 562.5 718.8 562.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"file-text2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "b841cb9f2cce3ce2a2a385d28e3e5f29",
|
||||
"css": "clock",
|
||||
"code": 59405,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M643.3 731.7L437.5 525.9V250H562.5V474.1L731.7 643.3ZM500 0C223.9 0 0 223.9 0 500S223.9 1000 500 1000 1000 776.1 1000 500 776.1 0 500 0ZM500 875C292.9 875 125 707.1 125 500S292.9 125 500 125C707.1 125 875 292.9 875 500S707.1 875 500 875Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"clock"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "9e646020c04b332e553c7b0a22dd998d",
|
||||
"css": "alarm",
|
||||
"code": 59406,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 125C258.4 125 62.5 320.9 62.5 562.5S258.4 1000 500 1000 937.5 804.1 937.5 562.5 741.6 125 500 125ZM500 914.1C305.8 914.1 148.4 756.7 148.4 562.5 148.4 368.3 305.8 210.9 500 210.9 694.2 210.9 851.6 368.3 851.6 562.5 851.6 756.7 694.2 914.1 500 914.1ZM912.9 280.4C928.5 253 937.5 221.3 937.5 187.5 937.5 83.9 853.6 0 750 0 689.6 0 635.9 28.5 601.6 72.8 730.4 99.4 841.1 175.6 912.9 280.4V280.4ZM398.4 72.8C364.1 28.5 310.4 0 250 0 146.4 0 62.5 83.9 62.5 187.5 62.5 221.3 71.5 253 87.1 280.4 158.9 175.6 269.6 99.4 398.4 72.8ZM500 562.5V312.5H437.5V625H687.5V562.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"alarm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "9e816caf7d05ad7f7e464df5e172fa51",
|
||||
"css": "display",
|
||||
"code": 59651,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M0 62.5V687.5H1000V62.5H0ZM937.5 625H62.5V125H937.5V625ZM656.3 750H343.8L312.5 875 250 937.5H750L687.5 875Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"display"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "531ef1039ee5966723e693a867c22bc4",
|
||||
"css": "mobile",
|
||||
"code": 59652,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M718.8 0H281.3C229.7 0 187.5 42.2 187.5 93.8V906.3C187.5 957.8 229.7 1000 281.3 1000H718.8C770.3 1000 812.5 957.8 812.5 906.3V93.8C812.5 42.2 770.3 0 718.8 0ZM375 46.9H625V78.1H375V46.9ZM500 937.5C465.5 937.5 437.5 909.5 437.5 875S465.5 812.5 500 812.5 562.5 840.5 562.5 875 534.5 937.5 500 937.5ZM750 750H250V125H750V750Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"mobile"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "fb64ed4352555da6a0e29454001b91c3",
|
||||
"css": "mobile2",
|
||||
"code": 59653,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M750 0H187.5C153.1 0 125 28.1 125 62.5V937.5C125 971.9 153.1 1000 187.5 1000H750C784.4 1000 812.5 971.9 812.5 937.5V62.5C812.5 28.1 784.4 0 750 0ZM468.8 954.9C441.9 954.9 420.1 933.1 420.1 906.3S441.9 857.6 468.8 857.6 517.4 879.4 517.4 906.3 495.6 954.9 468.8 954.9ZM750 812.5H187.5V125H750V812.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"mobile2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "4baa9f36aa5fa117649f3bc826e8b3e9",
|
||||
"css": "tablet",
|
||||
"code": 59654,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M781.3 0H156.3C104.7 0 62.5 42.2 62.5 93.8V906.3C62.5 957.8 104.7 1000 156.3 1000H781.3C832.8 1000 875 957.8 875 906.3V93.8C875 42.2 832.8 0 781.3 0ZM468.8 968.8C451.5 968.8 437.5 954.8 437.5 937.5S451.5 906.3 468.8 906.3 500 920.2 500 937.5 486 968.8 468.8 968.8ZM750 875H187.5V125H750V875Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"tablet"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "2d5c7be7d8fad80dd6c6da86c2d2cf3e",
|
||||
"css": "database",
|
||||
"code": 59400,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 0C223.9 0 0 70 0 156.3V281.3C0 367.5 223.9 437.5 500 437.5S1000 367.5 1000 281.3V156.3C1000 70 776.1 0 500 0ZM500 531.3C223.9 531.3 0 461.3 0 375V562.5C0 648.8 223.9 718.8 500 718.8S1000 648.8 1000 562.5V375C1000 461.3 776.1 531.3 500 531.3ZM500 812.5C223.9 812.5 0 742.5 0 656.3V843.8C0 930 223.9 1000 500 1000S1000 930 1000 843.8V656.3C1000 742.5 776.1 812.5 500 812.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"database"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "0486b501f6560b04a9a7e8e346d748a8",
|
||||
"css": "hour-glass",
|
||||
"code": 59656,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M711.9 500C846.4 414.7 937.5 250.8 937.5 62.5 937.5 41.3 936.3 20.5 934.1 0H65.9C63.7 20.5 62.5 41.3 62.5 62.5 62.5 250.8 153.6 414.7 288.1 500 153.6 585.3 62.5 749.2 62.5 937.5 62.5 958.7 63.7 979.5 65.9 1000H934.1C936.3 979.5 937.5 958.7 937.5 937.5 937.5 749.2 846.4 585.3 711.9 500ZM156.3 937.5C156.3 755 234.5 600.2 375 549.1V450.9C234.5 399.8 156.3 245 156.3 62.5V62.5H843.8C843.8 245 765.5 399.8 625 450.9V549.1C765.5 600.2 843.8 755 843.8 937.5H156.3ZM605.1 653.9C535.1 614.2 531.3 562.7 531.3 531.5V468.8C531.3 437.5 535 385.8 605.2 346 642.8 324.2 675.3 291 700 250H300C324.7 291 357.2 324.3 394.9 346.1 464.9 385.8 468.7 437.3 468.8 468.5V531.3C468.8 562.5 465 614.2 394.8 654 323.9 695.2 271 776.7 255 875H745C729 776.7 676.1 695.1 605.1 653.9Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"hour-glass"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "c3c5f6a9226093594755ed6178974408",
|
||||
"css": "search",
|
||||
"code": 59395,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M969 851L732.1 649.5C707.7 627.5 681.5 617.4 660.3 618.3 716.2 552.8 750 467.9 750 375 750 167.9 582.1 0 375 0 167.9 0 0 167.9 0 375S167.9 750 375 750C467.9 750 552.8 716.2 618.3 660.3 617.4 681.5 627.5 707.7 649.5 732.1L851 969C885.5 1007.3 941.8 1010.6 976.2 976.2S1007.3 885.5 969 851ZM375 625C236.9 625 125 513.1 125 375S236.9 125 375 125 625 236.9 625 375 513.1 625 375 625Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"search"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "1edec97f65d29893b288b845a045b063",
|
||||
"css": "key",
|
||||
"code": 59401,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M687.5 0C514.9 0 375 139.9 375 312.5 375 332.1 376.8 351.2 380.3 369.8L0 750V937.5C0 972 28 1000 62.5 1000H125V937.5H250V812.5H375V687.5H500L581.1 606.4C614.3 618.4 650.1 625 687.5 625 860.1 625 1000 485.1 1000 312.5S860.1 0 687.5 0ZM781.1 312.6C729.3 312.6 687.4 270.7 687.4 218.9S729.3 125.1 781.1 125.1 874.9 167.1 874.9 218.9 832.9 312.6 781.1 312.6Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"key"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "337184e63a772c6f3f2721cd9b75fb90",
|
||||
"css": "key2",
|
||||
"code": 59402,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M978.6 306.9L879.9 208.1C855.7 183.9 816.1 144.3 791.9 120.1L693.1 21.4C668.9-2.9 625.8-7.1 597.3 11.9L327.3 191.8C298.8 210.8 288.1 251.4 303.4 282.1L372.2 419.7C374.3 423.9 376.7 428.4 379.4 433.1L31.3 781.3 0 1000H187.5V937.5H312.5V812.5H437.5V687.5H562.5V618C568.7 621.7 574.7 625 580.3 627.8L717.9 696.6C748.6 711.9 789.2 701.2 808.2 672.7L988.1 402.7C1007.1 374.2 1002.9 331.1 978.6 306.9ZM147.1 834.6L102.9 790.4 407.2 486.1 451.4 530.3 147.1 834.6ZM895.5 413.8L851.3 458C839.2 470.2 819.3 470.2 807.1 458L542 192.9C529.8 180.7 529.8 160.8 542 148.7L586.2 104.5C598.3 92.3 618.2 92.3 630.4 104.5L895.5 369.6C907.7 381.8 907.7 401.7 895.5 413.8Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"key2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "482d798b2fd95eb7e6b89c9b042a9b83",
|
||||
"css": "lock",
|
||||
"code": 59403,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M578.1 437.5H562.5V250C562.5 146.6 478.4 62.5 375 62.5H250C146.6 62.5 62.5 146.6 62.5 250V437.5H46.9C21.1 437.5 0 458.6 0 484.4V953.1C0 978.9 21.1 1000 46.9 1000H578.1C603.9 1000 625 978.9 625 953.1V484.4C625 458.6 603.9 437.5 578.1 437.5ZM187.5 250C187.5 215.5 215.5 187.5 250 187.5H375C409.5 187.5 437.5 215.5 437.5 250V437.5H187.5V250Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"lock"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "86ba7d10c3e3dee2e2741d43af6c748c",
|
||||
"css": "unlocked",
|
||||
"code": 59404,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M750 62.5C853.4 62.5 937.5 146.6 937.5 250V437.5H812.5V250C812.5 215.5 784.5 187.5 750 187.5H625C590.5 187.5 562.5 215.5 562.5 250V437.5H578.1C603.9 437.5 625 458.6 625 484.4V953.1C625 978.9 603.9 1000 578.1 1000H46.9C21.1 1000 0 978.9 0 953.1V484.4C0 458.6 21.1 437.5 46.9 437.5H437.5V250C437.5 146.6 521.6 62.5 625 62.5H750Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"unlocked"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "e461ff71fe3a3d83794b84c2a6fc088a",
|
||||
"css": "cog",
|
||||
"code": 59392,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M911.9 595.9C859.4 505.1 891 388.6 982.4 335.7L884.1 165.5C856 182 823.4 191.4 788.5 191.4 683.5 191.4 598.4 105.7 598.4 0H401.9C402.1 32.6 394 65.7 376.5 95.9 324 186.8 207.4 217.7 115.9 165L17.6 335.3C45.9 351.3 70.4 374.9 87.8 405.1 140.2 495.8 108.8 612 17.8 665L116.1 835.2C144.1 818.9 176.5 809.6 211.2 809.6 315.9 809.6 400.8 894.8 401.3 1000H597.9C597.8 967.7 605.9 935 623.2 905.1 675.6 814.3 792 783.4 883.4 835.7L981.7 665.5C953.6 649.4 929.2 626 911.9 595.9ZM500 702.5C388.2 702.5 297.5 611.8 297.5 500 297.5 388.2 388.2 297.5 500 297.5 611.8 297.5 702.5 388.2 702.5 500 702.5 611.8 611.8 702.5 500 702.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"cog"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "1ae3c5c6f62f8e25572e3d4f00261e48",
|
||||
"css": "cogs",
|
||||
"code": 59393,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M355.2 705.1L395.5 648.7 351.3 604.5 294.9 644.8C284.4 638.9 273.2 634.3 261.4 630.9L250 562.5H187.5L176.1 630.9C164.3 634.3 153.1 638.9 142.6 644.8L86.2 604.5 42 648.7 82.3 705.1C76.4 715.6 71.8 726.8 68.4 738.6L0 750V812.5L68.4 823.9C71.8 835.7 76.4 846.9 82.3 857.4L42 913.8 86.2 958 142.6 917.7C153.1 923.6 164.3 928.2 176.1 931.6L187.5 1000H250L261.4 931.6C273.2 928.2 284.4 923.6 294.9 917.7L351.3 958 395.5 913.8 355.2 857.4C361 846.9 365.7 835.7 369.1 823.9L437.5 812.5V750L369.1 738.6C365.7 726.8 361.1 715.6 355.2 705.1ZM218.8 843.8C184.2 843.8 156.3 815.8 156.3 781.3S184.2 718.8 218.8 718.8 281.3 746.7 281.3 781.3 253.3 843.8 218.8 843.8ZM1000 375V312.5L934.2 300.5C933 292.7 931.4 284.9 929.6 277.3L985.8 241.1 961.9 183.3 896.5 197.5C892.4 190.7 888 184.2 883.3 177.8L921.4 122.8 877.2 78.6 822.2 116.7C815.8 112 809.3 107.6 802.5 103.5L816.7 38.1 758.9 14.2 722.7 70.4C715.1 68.6 707.3 67 699.5 65.8L687.5 0H625L613 65.8C605.2 67 597.4 68.6 589.8 70.4L553.6 14.2 495.8 38.1 510 103.5C503.2 107.6 496.7 112 490.3 116.7L435.3 78.6 391.1 122.8 429.2 177.8C424.5 184.2 420.1 190.7 416 197.5L350.6 183.3 326.7 241.1 382.9 277.3C381.1 284.9 379.5 292.7 378.3 300.5L312.5 312.5V375L378.3 387C379.5 394.8 381.1 402.6 382.9 410.2L326.7 446.4 350.6 504.2 416 490C420.1 496.8 424.5 503.3 429.2 509.7L391.1 564.7 435.3 608.9 490.3 570.8C496.7 575.5 503.2 579.9 510 584L495.8 649.4 553.6 673.3 589.8 617.1C597.4 618.9 605.2 620.5 613 621.7L625 687.5H687.5L699.5 621.7C707.3 620.5 715.1 618.9 722.7 617.1L758.9 673.3 816.7 649.4 802.5 584C809.3 579.9 815.8 575.5 822.2 570.8L877.2 608.9 921.4 564.7 883.3 509.7C888 503.3 892.4 496.8 896.5 490L961.9 504.2 985.8 446.4 929.6 410.2C931.4 402.6 933 394.8 934.2 387L1000 375ZM656.3 479.7C581.2 479.7 520.3 418.8 520.3 343.8S581.2 207.8 656.3 207.8 792.2 268.7 792.2 343.8C792.2 418.8 731.3 479.7 656.3 479.7Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"cogs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "22564d007384d83cb8d0b19b64054152",
|
||||
"css": "aid-kit",
|
||||
"code": 59664,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M875 250H687.5V125C687.5 90.6 659.4 62.5 625 62.5H375C340.6 62.5 312.5 90.6 312.5 125V250H125C56.3 250 0 306.3 0 375V875C0 943.8 56.3 1000 125 1000H875C943.8 1000 1000 943.8 1000 875V375C1000 306.3 943.8 250 875 250ZM375 125H625V250H375V125ZM750 687.5H562.5V875H437.5V687.5H250V562.5H437.5V375H562.5V562.5H750V687.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"aid-kit"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "835771ff28375ecd0288bf5f49e57cdc",
|
||||
"css": "meter",
|
||||
"code": 59394,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 62.5C776.1 62.5 1000 286.4 1000 562.5 1000 750.8 895.9 914.7 742.2 1000H257.8C104.1 914.7 0 750.8 0 562.5 0 286.4 223.9 62.5 500 62.5ZM783.1 845.6C858.7 770 900.4 669.4 900.4 562.5H812.5V500H895.5C888.7 456.1 874.7 413.9 854 375H750V312.5H812.8C803.6 301 793.7 289.9 783.1 279.4 738 234.2 684 201.2 625 181.9V250H562.5V167C542 163.8 521.1 162.1 500 162.1S458 163.8 437.5 167V250H375V181.9C316 201.2 262 234.2 216.9 279.4 206.3 289.9 196.4 301 187.2 312.5H250V375H146C125.3 413.9 111.3 456.1 104.5 500H187.5V562.5H99.6C99.6 669.4 141.3 770 216.9 845.6 227.3 856.1 238.3 865.9 249.7 875H437.5L473.2 375H526.8L562.5 875H750.3C761.7 865.9 772.7 856.1 783.1 845.6Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"meter"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "19bb52fb40a141b7613533cb0fded2ce",
|
||||
"css": "meter2",
|
||||
"code": 59395,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 0C223.9 0 0 223.9 0 500S223.9 1000 500 1000 1000 776.1 1000 500 776.1 0 500 0ZM295.7 814.6C306.6 784.7 312.5 752.4 312.5 718.8 312.5 597.3 235.5 493.9 127.7 454.5 137.7 371.6 174.8 294.8 234.8 234.8 305.7 164 399.8 125 500 125S694.3 164 765.2 234.8C825.2 294.8 862.3 371.6 872.3 454.5 764.5 493.9 687.5 597.3 687.5 718.8 687.5 752.4 693.4 784.7 704.3 814.6 644 853.9 573.6 875 500 875 426.4 875 356 853.9 295.7 814.6ZM538.8 626C552.4 629.4 562.5 641.7 562.5 656.3V718.8C562.5 735.9 548.4 750 531.3 750H468.8C451.6 750 437.5 735.9 437.5 718.8V656.3C437.5 641.7 447.6 629.4 461.2 626L484.4 187.5H515.6L538.8 626Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"meter2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "6c1bb252a361b9d0bbfc6a63bbe7a096",
|
||||
"css": "wordpress",
|
||||
"code": 59667,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M125 500C125 644.5 211.3 769.5 336.4 828.7L157.5 351.4C136.7 396.8 125 447 125 500ZM753.2 481.6C753.2 436.4 736.5 405.2 722.2 380.8 703.2 350.7 685.4 325.3 685.4 295.2 685.4 261.6 711.5 230.4 748.4 230.4 750 230.4 751.6 230.6 753.2 230.7 686.5 171.1 597.6 134.8 500 134.8 369 134.8 253.7 200.2 186.7 299.4 195.5 299.7 203.8 299.8 210.8 299.8 250 299.8 310.8 295.2 310.8 295.2 331 294 333.3 323 313.2 325.3 313.2 325.3 292.8 327.6 270.2 328.8L406.8 724.4 488.9 484.7 430.4 328.8C410.2 327.6 391.1 325.3 391.1 325.3 370.9 324.1 373.3 294 393.5 295.2 393.5 295.2 455.4 299.8 492.3 299.8 531.5 299.8 592.2 295.2 592.2 295.2 612.4 294 614.8 323 594.6 325.3 594.6 325.3 574.3 327.6 551.7 328.8L687.2 721.3 724.6 599.6C740.8 549.1 753.2 512.8 753.2 481.6ZM506.6 531.9L394.1 850.4C427.7 860 463.2 865.2 500 865.2 543.7 865.2 585.6 857.9 624.5 844.5 623.5 843 622.6 841.3 621.8 839.5L506.6 531.9ZM829.1 324.8C830.7 336.4 831.6 348.9 831.6 362.3 831.6 399.4 824.5 441 803.1 493.1L688.5 815.7C800 752.4 875 634.7 875 500 875 436.5 858.3 376.8 829.1 324.8ZM500 0C223.9 0 0 223.9 0 500S223.9 1000 500 1000 1000 776.1 1000 500 776.1 0 500 0ZM500 937.5C258.4 937.5 62.5 741.6 62.5 500S258.4 62.5 500 62.5 937.5 258.4 937.5 500 741.6 937.5 500 937.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"wordpress"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "6cde86e693a9fb99d864e087a402c08b",
|
||||
"css": "chrome",
|
||||
"code": 59405,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M252.2 436.1L109.1 188.2C200.7 73.5 341.8 0 500 0 683 0 843.1 98.4 930.2 245.1H522.2C514.9 244.5 507.5 244.1 500 244.1 381 244.1 280.7 325.8 252.2 436.1ZM679 317.4H965.6C987.8 374 1000 435.6 1000 500 1000 774.2 779.2 996.9 505.7 999.9L710.2 645.8C739 604.4 755.9 554.1 755.9 500 755.9 428.5 726.4 363.8 679 317.4ZM318.4 500C318.4 399.8 399.8 318.4 500 318.4S681.6 399.8 681.6 500C681.6 600.2 600.2 681.6 500 681.6S318.4 600.2 318.4 500ZM568.5 746.5L425.4 994.5C184.6 958.4 0 750.8 0 500 0 410.9 23.3 327.3 64.2 254.9L268.3 608.4C309.2 695.5 397.7 755.9 500 755.9 523.7 755.9 546.7 752.6 568.5 746.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"chrome"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "239e2cb8ae14ba1347db383178b34301",
|
||||
"css": "firefox",
|
||||
"code": 59402,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M998.6 326.3L987 400.6C987 400.6 970.4 263.1 950.1 211.6 919 132.8 905.2 133.5 905.1 133.6 925.9 186.5 922.2 214.9 922.2 214.9S885.3 114.4 787.7 82.4C679.6 46.9 621.1 56.6 614.3 58.5 613.3 58.4 612.3 58.4 611.4 58.4 612.2 58.5 613 58.6 613.8 58.6 613.7 58.7 613.7 58.7 613.7 58.7 614.1 59.2 733.1 79.5 754.2 108.5 754.2 108.5 703.7 108.5 653.4 123 651.1 123.6 838.4 146.4 876.8 333.6 876.8 333.6 856.2 290.8 830.8 283.5 847.5 334.3 843.2 430.7 827.3 478.7 825.3 484.8 823.2 452 791.8 437.9 801.9 509.8 791.2 623.9 741.3 655.3 737.5 657.7 772.6 542.7 748.4 587.2 609.1 800.8 444.3 685.8 370.2 635.1 408.2 643.4 480.3 633.8 512.2 610.1 512.2 610.1 512.2 610.1 512.3 610 546.9 586.3 567.4 569.1 585.8 573.1 604.3 577.3 616.5 558.8 602.2 542.4 587.9 525.9 553.1 503.3 506 515.6 472.8 524.3 431.7 561.1 368.9 523.9 320.6 495.3 316.1 471.6 315.7 455.1 316.9 449.3 318.4 443.9 320.2 438.9 325.7 423.4 342.5 418.7 351.9 415 367.8 417.8 381.4 422.7 395.8 430.1 396 425.3 396 419 395.8 411.8 397.2 409 396.3 400.8 394.1 390.7 392.8 380.6 390.8 370.2 387.5 360.7 387.5 360.7 387.5 360.7 387.5 360.7 387.6 360.7 387.6 360.7 387.7 360.6 387.8 360.6 387.8 360.5 387.9 360.4 387.9 360.4 387.9 360.4 387.9 360.4 388 360.3 388.1 360.1 388.1 359.9 389.1 355.4 399.9 346.7 413.2 337.4 425.2 329 439.3 320.1 450.4 313.2 460.2 307.1 467.7 302.6 469.3 301.4 469.9 300.9 470.6 300.4 471.4 299.8 471.6 299.7 471.7 299.6 471.9 299.5 472 299.4 472.1 299.3 472.1 299.2 477.4 295 485.3 287.1 487 270.3 487 270.3 487 270.3 487 270.2 487 269.7 487.1 269.2 487.1 268.7 487.1 268.4 487.2 268 487.2 267.7 487.2 267.4 487.2 267.1 487.2 266.8 487.2 266.2 487.3 265.5 487.3 264.8 487.3 264.8 487.3 264.7 487.3 264.7 487.3 263.1 487.3 261.4 487.2 259.6 487.1 258.6 487.1 257.7 486.9 256.9 486.9 256.9 486.9 256.8 486.9 256.8 486.8 256.7 486.8 256.6 486.8 256.5 486.8 256.4 486.7 256.3 486.7 256.1 486.7 256.1 486.7 256.1 486.7 256.1 486.6 255.9 486.6 255.8 486.5 255.6 486.5 255.6 486.5 255.6 486.5 255.6 484.8 251.6 478.4 250.1 451.9 249.6 451.9 249.6 451.8 249.6 451.8 249.6V249.6C441 249.5 426.9 249.4 408.3 249.5 375.9 249.7 357.9 217.8 352.2 205.4 360.1 162 382.7 131.1 420 110.1 420.7 109.7 420.6 109.4 419.8 109.2 427 104.7 331.6 109 287.7 164.9 248.8 155.2 214.8 155.8 185.6 162.7 180 162.5 173 161.8 164.6 160.1 145.2 142.5 117.3 109.9 115.8 71 115.8 71 115.8 71.1 115.6 71.2 115.6 70.9 115.5 70.5 115.5 70.1 115.5 70.1 56.2 115.7 65.1 239.9 65.1 241.9 65 243.8 65 245.7 48.9 267.4 41 285.7 40.4 289.8 26.2 318.7 11.7 362.3 0 428.4 0 428.4 8.2 402.4 24.7 372.9 12.6 410 3 467.8 8.6 554.4 8.6 554.4 10.1 535.2 15.4 507.5 19.4 561.2 37.3 627.6 82.6 705.5 169.5 855.3 303 930.9 450.6 942.5 476.8 944.6 503.3 944.7 530.1 942.7 532.5 942.5 535 942.3 537.4 942.1 567.7 940 598.1 935.4 628.5 928.1 1043.7 827.7 998.6 326.3 998.6 326.3Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"firefox"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "2754d01a17a427ca7308c96ba44016be",
|
||||
"css": "IE",
|
||||
"code": 59401,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M717 614.1H947.5C949.3 598.1 950 581.8 950 565.1 950 486.7 929 413.2 892.3 350 930.2 249.1 928.9 163.5 878 112.3 829.7 64.2 700 72 553.4 136.9 542.6 136.1 531.6 135.6 520.6 135.6 319.4 135.6 150.5 274.1 103.9 460.7 167 379.9 233.4 321.3 322.1 278.6 314 286.2 267 333 259.1 340.9 25.1 574.8-48.6 880.2 30.7 959.6 91.1 1020 200.4 1009.8 326 948.3 384.4 978 450.5 994.8 520.6 994.8 709.2 994.8 869 873.4 926.9 704.3H694.6C662.7 763.3 600.1 803.4 528.4 803.4 456.6 803.4 394.1 763.3 362.2 704.3 348 677.7 339.8 647.1 339.8 614.8V614.1H717ZM340.1 500.8C345.5 406 424.3 330.3 520.6 330.3S695.7 405.9 701 500.8H340.1ZM875.9 160C908.7 193.1 907.9 253.9 879.9 329.9 831.9 256.8 762.2 199.1 679.9 166.2 767.9 128.5 839.4 123.5 875.9 160ZM91.3 944.6C49.5 902.8 62.1 815.1 115.9 709.4 149.4 803.4 214.7 882.3 298.9 933.2 205.7 975.5 129.4 982.7 91.3 944.6Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"IE"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "739a1ff3d86266305f1a7b52ba792cc1",
|
||||
"css": "opera",
|
||||
"code": 59400,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M498.1 0C224.9 0 28.6 198.1 28.6 495.3 28.6 759.8 219.5 1000 498.1 1000 779.5 1000 971.4 759.9 971.4 495.3 971.4 195.8 768.8 0 498.1 0ZM672.2 486.9C672.2 652.2 663.3 887.7 498.1 887.7V887.8C335.3 887.8 328.8 652.1 328.8 487.1 328.8 293.3 346.9 107.6 498.1 107.6 649.4 107.6 672.2 295.7 672.2 486.9Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"opera"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "8400314587873c54e2777a165ae9c7ea",
|
||||
"css": "safari",
|
||||
"code": 59398,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 62.5C476.5 62.5 453.4 64.3 430.8 67.6 430.5 66.8 430.2 66.1 429.9 65.3 442.4 55.6 449 42.1 446.1 28.7 442.5 11.5 424.3 0 400.8 0 395.7 0 390.6 0.5 385.5 1.6 356 7.9 336.5 29.6 341 51 343.8 64 355 73.8 370.5 77.8 370.5 78.7 370.5 79.7 370.5 80.6 174.6 136.8 31.3 317.3 31.3 531.3 31.3 790.1 241.1 1000 500 1000 758.9 1000 968.8 790.1 968.8 531.3 968.8 272.4 758.9 62.5 500 62.5ZM356.3 47.8C353.7 35.3 368.5 21.2 388.7 16.9 392.7 16.1 396.8 15.6 400.8 15.6 416.4 15.6 428.8 22.3 430.8 31.9 432.4 39.3 427.8 47.2 419.7 53.3 412.8 48.5 404.1 46.4 395.2 48.2 386.4 50.1 379.2 55.6 374.9 62.7 365 60.4 357.8 54.9 356.3 47.8ZM751.4 782.6C708.4 825.5 656.4 856.1 599.7 872.6L558.3 805.4 547.8 883.5C532.1 885.6 516.1 886.7 500 886.7 405.1 886.7 315.8 849.7 248.6 782.6 205.7 739.7 175.1 687.7 158.7 630.9L225.8 589.5 147.7 579C145.6 563.3 144.5 547.4 144.5 531.3 144.5 436.3 181.5 347 248.6 279.9 291.6 237 343.6 206.4 400.3 189.9L441.7 257.1 452.2 179C467.9 176.9 483.9 175.8 500 175.8 594.9 175.8 684.2 212.8 751.4 279.9 794.3 322.8 824.9 374.8 841.3 431.6L774.2 473 852.3 483.5C854.4 499.2 855.5 515.1 855.5 531.3 855.5 626.2 818.5 715.5 751.4 782.6ZM743.1 288.2L550.7 434.4C536.4 426.9 520.6 422.6 504.4 421.9L454.5 317.3 451.5 433.2C438.6 439.5 427 448.5 417.5 459.5L355.9 437.6 400.9 485C394.7 498.2 391.2 512.4 390.7 526.9L286 576.7 402 579.7C402.4 580.5 402.7 581.2 403.1 582L256.9 774.3 449.3 628.1C463.6 635.6 479.4 639.9 495.6 640.6L545.5 745.2 548.5 629.3C561.5 623 573 614 582.5 603L644.1 624.9 599.1 577.5C605.3 564.3 608.8 550.1 609.3 535.6L714 485.8 598 482.8C597.6 482 597.3 481.3 596.9 480.5L743.1 288.2ZM500.1 434.1V434.1ZM480.5 439.5C487.1 438.2 493.6 437.5 500.1 437.5 504.1 437.5 508.2 437.7 512.1 438.3L512.2 438.3 512.2 438.3C520.7 439.4 529 441.7 536.7 445L466.9 498.1 413.8 568C411.4 562.5 409.6 556.8 408.3 550.7 397.5 500.1 429.9 450.3 480.5 439.5ZM548.9 611.2V611.2 611.2C540.1 616.6 530.2 620.7 519.5 623 512.9 624.3 506.4 625 499.9 625 495.9 625 491.8 624.8 487.9 624.2L487.8 624.2C479.3 623.1 471.1 620.8 463.3 617.5L533.1 564.4 586.3 494.5C588.6 500 590.4 505.7 591.7 511.8 600.2 551.7 581.9 591.1 548.9 611.2Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"safari"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "b9e321d44e62e5745b691ba42b063b03",
|
||||
"css": "pinterest-p",
|
||||
"code": 59399,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M0 342.1Q0 281.8 20.9 228.5T78.7 135.6 163.5 67 266.7 23.4 379.5 8.9Q467.6 8.9 543.5 46T666.9 154 714.3 314.2Q714.3 367.7 703.7 419.1T670.2 517.9 614.4 601.3 533.5 658.8 428 680.2Q390.1 680.2 352.7 662.4T299.1 613.3Q293.5 635 283.5 676.1T270.4 729.1 258.9 768.7 244.4 808.3 226.6 843.2 200.9 886.4 166.3 934.7L158.5 937.5 153.5 931.9Q145.1 844.3 145.1 827 145.1 775.7 157.1 711.8T194.2 551.3 223.2 438.1Q205.4 401.8 205.4 343.8 205.4 297.4 234.4 256.7T308 216Q342.1 216 361 238.6T380 295.8Q380 332.6 355.5 402.3T330.9 506.7Q330.9 541.9 356 565T416.9 588.2Q447.5 588.2 473.8 574.2T517.6 536.3 548.8 483.3 570 421.6 581.2 359.7 584.8 304.1Q584.8 207.6 523.7 153.7T364.4 99.9Q252.8 99.9 178 172.2T103.2 355.5Q103.2 380 110.2 402.9T125.3 439.2 140.3 464.6 147.3 481.6Q147.3 497.2 139 522.3T118.3 547.4Q117.2 547.4 108.8 545.8 80.4 537.4 58.3 514.5T24.3 461.8 6.1 401.5 0 342.1Z",
|
||||
"width": 713.8671875
|
||||
},
|
||||
"search": [
|
||||
"pinterest-p"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "c6abb859dc98ce46376a3a1d2b916ec9",
|
||||
"css": "user-secret",
|
||||
"code": 59674,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M321.4 866.1L375 616.1 321.4 544.6 250 508.9ZM464.3 866.1L535.7 508.9 464.3 544.6 410.7 616.1ZM553.6 302.5Q552.5 300.2 551.3 299.1 545.8 294.6 497.8 294.6 458.7 294.6 404.6 305.2 400.7 306.4 392.9 306.4T381.1 305.2Q327 294.6 287.9 294.6 240 294.6 234.4 299.1 233.3 300.2 232.1 302.5 233.3 312.5 234.4 317.5 235.5 319.2 238.6 321.1T242.7 327Q243.9 329.2 246.9 338.4T250.8 349.9 255 359.4 259.8 368.9 264.8 376.7 271.5 384.2 279.3 389.5 289.1 394 300.5 396.2 314.2 397.3Q334.3 397.3 347.1 390.3T365.2 373.6 373.3 354.4 379.7 337.9 389.5 330.9H396.2Q402.3 330.9 406 337.9T412.4 354.4 420.5 373.6 438.6 390.3 471.5 397.3Q478.8 397.3 485.2 396.2T496.6 394 506.4 389.5 514.2 384.2 520.9 376.7 525.9 368.9 530.7 359.4 534.9 349.9 538.8 338.4 543 327Q544.1 323.1 547.2 321.1T551.3 317.5Q552.5 312.5 553.6 302.5ZM785.7 793Q785.7 860.5 745 899T636.7 937.5H149Q81.5 937.5 40.7 899T0 793Q0 758.9 2.5 727.1T13.1 657.1 34 588.2 69.5 530.4 121.7 488.8L71.4 366.1H190.8Q178.6 330.4 178.6 294.6 178.6 287.9 179.7 276.8 71.4 254.5 71.4 223.2 71.4 191.4 188.6 168 198.1 133.4 217.4 93.2T256.7 29.6Q274.6 8.9 299.1 8.9 315.9 8.9 346 26.2T392.9 43.5 439.7 26.2 486.6 8.9Q511.2 8.9 529 29.6 549.1 53 568.4 93.2T597.1 168Q714.3 191.4 714.3 223.2 714.3 254.5 606 276.8 609.9 322 594.9 366.1H714.3L668.5 491.6Q703.7 510 728.5 545.5T765.1 625.6 781.3 710.1 785.7 793Z",
|
||||
"width": 786.1328125
|
||||
},
|
||||
"search": [
|
||||
"user-secret"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "0e49f4940343074bea7cb8a910941290",
|
||||
"css": "line-chart",
|
||||
"code": 59675,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M1142.9 866.1V937.5H0V80.4H71.4V866.1H1142.9ZM1071.4 169.6V412.4Q1071.4 424.1 1060.5 428.8T1040.7 424.7L973.2 357.1 620 710.4Q614.4 716 607.1 716T594.3 710.4L464.3 580.4 232.1 812.5 125 705.4 451.5 378.9Q457 373.3 464.3 373.3T477.1 378.9L607.1 508.9 866.1 250 798.5 182.5Q789.6 173.5 794.4 162.7T810.8 151.8H1053.6Q1061.4 151.8 1066.4 156.8T1071.4 169.6Z",
|
||||
"width": 1142.578125
|
||||
},
|
||||
"search": [
|
||||
"line-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "dfb1ef1c8e8b2a4e6ec85ab8a5702fe4",
|
||||
"css": "pie-chart",
|
||||
"code": 59676,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M428.6 505.6L733.3 810.3Q674.1 870.5 595.1 904T428.6 937.5Q311.9 937.5 213.4 880T57.5 724.1 0 508.9 57.5 293.8 213.4 137.8 428.6 80.4V505.6ZM532.9 508.9H964.3Q964.3 596.5 930.8 675.5T837.1 813.6ZM928.6 437.5H500V8.9Q616.6 8.9 715.1 66.4T871.1 222.4 928.6 437.5Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"pie-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "a0d910d27a9c3f4a2631869bfe85288f",
|
||||
"css": "area-chart",
|
||||
"code": 59677,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M1142.9 866.1V937.5H0V80.4H71.4V866.1H1142.9ZM928.6 294.6L1071.4 794.6H142.9V473.2L392.9 151.8 714.3 473.2Z",
|
||||
"width": 1142.578125
|
||||
},
|
||||
"search": [
|
||||
"area-chart"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "1a22134ce6369882654aaaa93ea4367d",
|
||||
"css": "paint-brush",
|
||||
"code": 59678,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M901.2 8.9Q940.3 8.9 969.6 34.9T998.9 99.9Q998.9 135 973.8 184.2 788.5 535.2 714.3 603.8 660.2 654.6 592.6 654.6 522.3 654.6 471.8 603T421.3 480.5Q421.3 409 472.7 362.2L828.7 39.1Q861.6 8.9 901.2 8.9ZM394 585.9Q415.7 628.3 453.4 658.5T537.4 700.9L537.9 740.5Q540.2 859.4 465.7 934.2T271.2 1008.9Q202.6 1008.9 149.6 983T64.5 911.8 16.2 809.7 0 686.9Q3.9 689.7 22.9 703.7T57.5 728.5 90.4 748.9 116.1 758.4Q139 758.4 146.8 737.7 160.7 700.9 178.9 674.9T217.6 632.5 266.7 606 324.2 591.8 394 585.9Z",
|
||||
"width": 1000
|
||||
},
|
||||
"search": [
|
||||
"paint-brush"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "4b5bba8110cc0cf5c56fc9c7451de8f1",
|
||||
"css": "vk",
|
||||
"code": 59392,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M1069.8 299.1Q1082.6 334.8 986 463.2 972.7 481 949.8 510.6 906.3 566.4 899.6 583.7 890.1 606.6 907.4 628.9 916.9 640.6 952.6 674.7H953.1L955.4 676.9Q1034 750 1061.9 800.2 1063.6 803 1065.6 807.2T1069.5 822 1069.2 841 1055.2 856.3 1022.3 863.3L879.5 865.5Q866.1 868.3 848.2 862.7T819.2 850.4L808 843.8Q791.3 832 769 808T730.7 764.8 696.7 732.4 665.2 723.8Q663.5 724.3 660.7 725.7T651.2 733.8 639.2 750.3 629.7 779.3 626.1 822.5Q626.1 830.9 624.2 837.9T620 848.2L617.7 851Q607.7 861.6 588.2 863.3H524Q484.4 865.5 442.5 854.1T369.1 824.5 311.7 787.7 272.3 755.6L258.4 742.2Q252.8 736.6 243 725.4T203.1 674.7 144 590.4 75.6 472.7 2.8 320.9Q-0.6 311.9-0.6 305.8T1.1 296.9L3.3 293.5Q11.7 282.9 35.2 282.9L188.1 281.8Q194.8 282.9 200.9 285.4T209.8 290.2L212.6 291.9Q221.5 298 226 309.7 237.2 337.6 251.7 367.5T274.6 412.9L283.5 429.1Q299.7 462.6 314.7 487.2T341.8 525.4 365 546.9 383.9 554.7 399 551.9Q400.1 551.3 401.8 549.1T408.5 536.8 416 510.6 421.3 465.4 421.3 395.6Q420.2 373.3 416.3 354.9T408.5 329.2L405.1 322.5Q391.2 303.6 357.7 298.5 350.4 297.4 360.5 285.2 370 274.6 381.7 268.4 411.3 253.9 515.1 255 560.8 255.6 590.4 262.3 601.6 265.1 609.1 269.8T620.5 283.2 626.4 301.1 628.3 326.5 627.8 357.1 626.4 396.5 625.6 442.5Q625.6 448.7 625 466T624.7 492.7 626.7 515.3 633.1 537.1 645.6 550.8Q650.1 551.9 655.1 553T669.6 546.9 690.8 527.6 719.9 490.2 757.8 430.2Q791.3 372.2 817.5 304.7 819.8 299.1 823.1 294.9T829.2 289.1L831.5 287.4 834.3 286T841.5 284.3 852.7 284L1013.4 282.9Q1035.2 280.1 1049.1 284.3T1066.4 293.5Z",
|
||||
"width": 1071.2890625
|
||||
},
|
||||
"search": [
|
||||
"vk"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "4543990c3c3e8b8aa88742e31afdfa44",
|
||||
"css": "tumblr-1",
|
||||
"code": 59423,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M526.8 750.6L571.4 882.8Q558.6 902.3 509.5 919.6T410.7 937.5Q352.7 938.6 304.4 923T224.9 881.7 171.9 822.5 140.9 755.6 131.7 689.7V386.2H37.9V266.2Q78.1 251.7 109.9 227.4T160.7 177.2 193.1 120.3 212.1 65 220.4 15.6Q221 12.8 222.9 10.9T227.1 8.9H363.3V245.5H549.1V386.2H362.7V675.2Q362.7 692 366.3 706.5T378.9 735.8 406.5 758.9 452 766.7Q495.5 765.6 526.8 750.6Z",
|
||||
"width": 571.2890625
|
||||
},
|
||||
"search": [
|
||||
"tumblr"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "3f854f5d504c40689944c513274856d4",
|
||||
"css": "stack-overflow",
|
||||
"code": 59424,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M517.9 790.7V875L123.3 875.6V791.3ZM652.3 597.7V988.8L651.8 1008.4V1008.9L0 1008.4V597.7H67.5V942.5H585.4V597.7H652.3ZM134.5 646.8L527.3 683 520.1 766.7 126.7 730.5ZM172.4 470.4L553.6 572.5 531.8 654 150.7 551.9ZM263.4 275.7L603.2 476.6 560.3 549.1 220.4 348.2ZM464.3 91L686.4 417.4 617.2 464.8 394.5 139ZM717.1 8.9L784.6 397.9 701.5 412.4 633.9 23.4Z",
|
||||
"width": 786.1328125
|
||||
},
|
||||
"search": [
|
||||
"stack-overflow"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "466f2bf65cfac3c3359a7c6596f47946",
|
||||
"css": "bitcoin-1",
|
||||
"code": 59393,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M651.2 366.1Q661.3 467.6 578.1 510 643.4 525.7 675.8 567.5T700.9 686.9Q697 726.6 682.8 756.7T646.8 806.4 592.6 839 524.8 858.3 443.6 866.6V1008.9H357.7V868.9Q313.1 868.9 289.6 868.3V1008.9H203.7V866.6Q193.6 866.6 173.5 866.4T142.9 866.1H31.2L48.5 764H110.5Q138.4 764 142.9 735.5V511.2H151.8Q148.4 510.6 142.9 510.6V350.4Q135.6 312.5 93.2 312.5H31.2V221L149.6 221.5Q185.3 221.5 203.7 221V80.4H289.6V218.2Q335.4 217.1 357.7 217.1V80.4H443.6V221Q487.7 224.9 521.8 233.5T584.8 258.7 630.9 302.2 651.2 366.1ZM531.3 670.2Q531.3 650.1 522.9 634.5T502.2 608.8 470.1 591.8 433.6 581.5 392.3 576.5 353.8 574.8 317.8 575.3 291.3 575.9V764.5Q295.8 764.5 311.9 764.8T338.7 765.1 368.3 764.2 400.9 762 432.8 757.3 463.7 749.4 490.2 737.7 512.3 721 525.9 698.7 531.3 670.2ZM491.6 404.6Q491.6 386.2 484.7 371.9T467.6 348.5 440.8 332.9 410.2 323.7 375.8 319.2 343.5 317.8 313.3 318.4 291.3 318.6V490Q294.1 490 310.5 490.2T336.5 490.2 364.4 489.1 395.1 486 423.8 479.9 450.9 469.6 471.5 454.5 486.6 433 491.6 404.6Z",
|
||||
"width": 713.8671875
|
||||
},
|
||||
"search": [
|
||||
"bitcoin"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "eb29dbd6a0be7b54cf9aadcba49309e3",
|
||||
"css": "dollar",
|
||||
"code": 59683,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M545.8 670.2Q545.8 755.6 490.2 817.2T346 893.4V991.1Q346 998.9 341 1003.9T328.1 1008.9H252.8Q245.5 1008.9 240.2 1003.6T234.9 991.1V893.4Q198.1 888.4 163.8 876.1T107.1 851.3 65.8 824.5 39.9 803.6 30.1 793.5Q20.6 781.8 29 770.6L86.5 695.3Q90.4 689.7 99.3 688.6 107.7 687.5 112.7 693.6L113.8 694.8Q176.9 750 249.4 764.5 270.1 769 290.7 769 335.9 769 370.3 745T404.6 676.9Q404.6 661.3 396.2 647.3T377.5 623.9 344.9 603 308 585.1 263.4 567Q241.6 558 229.1 553T194.8 538.2 159.9 520.9 128.3 501.1 98.5 477.4 74.2 450.1 54.4 417.7 42.7 380.6 37.9 337.1Q37.9 260 92.6 202T234.9 127.2V26.8Q234.9 19.5 240.2 14.2T252.8 8.9H328.1Q335.9 8.9 341 13.9T346 26.8V125Q377.8 128.3 407.6 137.8T456.2 156.5 491.6 177.5 513.4 193.6 521.8 201.4Q531.3 211.5 524.6 222.7L479.4 304.1Q474.9 312.5 466.5 313.1 458.7 314.7 451.5 309.2 449.8 307.5 443.4 302.5T421.6 287.7 389 269.8 347.4 255.3 299.7 248.9Q246.7 248.9 213.2 272.9T179.7 334.8Q179.7 349.3 184.4 361.6T200.9 384.8 222.9 403.2 254.2 420.5 287.9 435.5 327 450.9Q356.6 462.1 372.2 468.5T414.6 488 456.8 511.7 491.4 539.6 520.9 575.1 538.5 617.7 545.8 670.2Z",
|
||||
"width": 571.2890625
|
||||
},
|
||||
"search": [
|
||||
"dollar"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "a7b4fdbc9f251ba0f6c07b03aba6817d",
|
||||
"css": "shield",
|
||||
"code": 59684,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M607.1 544.6V187.5H357.1V822Q423.5 786.8 476 745.5 607.1 642.9 607.1 544.6ZM714.3 116.1V544.6Q714.3 592.6 695.6 639.8T649.3 723.5 583.4 794.6 512.8 852.1 445.3 895.4 395.4 923 371.7 934.2Q365 937.5 357.1 937.5T342.6 934.2Q333.7 930.2 318.9 923T269 895.4 201.4 852.1 130.9 794.6 65 723.5 18.7 639.8 0 544.6V116.1Q0 101.6 10.6 91T35.7 80.4H678.6Q693.1 80.4 703.7 91T714.3 116.1Z",
|
||||
"width": 713.8671875
|
||||
},
|
||||
"search": [
|
||||
"shield"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "e4d8f1f6a76e0f7de244fc64ccd99217",
|
||||
"css": "code",
|
||||
"code": 59685,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M344.3 789.6L316.4 817.5Q310.8 823.1 303.6 823.1T290.7 817.5L30.7 557.5Q25.1 551.9 25.1 544.6T30.7 531.8L290.7 271.8Q296.3 266.2 303.6 266.2T316.4 271.8L344.3 299.7Q349.9 305.2 349.9 312.5T344.3 325.3L125 544.6 344.3 763.9Q349.9 769.5 349.9 776.8T344.3 789.6ZM674.1 194.2L466 914.6Q463.7 921.9 457.3 925.5T444.2 926.9L409.6 917.4Q402.3 915.2 398.7 908.8T397.3 895.1L605.5 174.7Q607.7 167.4 614.1 163.8T627.2 162.4L661.8 171.9Q669.1 174.1 672.7 180.5T674.1 194.2ZM1040.7 557.5L780.7 817.5Q775.1 823.1 767.9 823.1T755 817.5L727.1 789.6Q721.5 784 721.5 776.8T727.1 764L946.4 544.6 727.1 325.3Q721.5 319.8 721.5 312.5T727.1 299.7L755 271.8Q760.6 266.2 767.9 266.2T780.7 271.8L1040.7 531.8Q1046.3 537.4 1046.3 544.6T1040.7 557.5Z",
|
||||
"width": 1071.2890625
|
||||
},
|
||||
"search": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "ebea27c533c91e2a2d852528cdf515a1",
|
||||
"css": "github-alt",
|
||||
"code": 59394,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M357.1 687.5Q357.1 709.8 350.2 733.3T326.2 775.7 285.7 794.6 245.3 775.7 221.3 733.3 214.3 687.5 221.3 641.7 245.3 599.3 285.7 580.4 326.2 599.3 350.2 641.7 357.1 687.5ZM714.3 687.5Q714.3 709.8 707.3 733.3T683.3 775.7 642.9 794.6 602.4 775.7 578.4 733.3 571.4 687.5 578.4 641.7 602.4 599.3 642.9 580.4 683.3 599.3 707.3 641.7 714.3 687.5ZM803.6 687.5Q803.6 620.5 765.1 573.7T660.7 526.8Q637.8 526.8 551.9 538.5 512.3 544.6 464.3 544.6T376.7 538.5Q291.9 526.8 267.9 526.8 202 526.8 163.5 573.7T125 687.5Q125 736.6 142.9 773.2T188.1 830.6 256.1 864.1 334.3 880.6 417.4 884.5H511.2Q556.9 884.5 594.3 880.6T672.4 864.1 740.5 830.6 785.7 773.2 803.6 687.5ZM928.6 589.3Q928.6 704.8 894.5 774 873.3 817 835.7 848.2T757 896.2 662.1 922.7 566.4 935 473.2 937.5Q429.7 937.5 394 935.8T311.7 928.9 226.6 912.1 150.1 883.4 82.6 838.2 34.6 774Q0 705.4 0 589.3 0 457 75.9 368.3 60.8 322.5 60.8 273.4 60.8 208.7 89.3 151.8 149.6 151.8 195.3 173.8T300.8 242.7Q382.8 223.2 473.2 223.2 555.8 223.2 629.5 241.1 688.1 195.3 733.8 173.5T839.3 151.8Q867.7 208.7 867.7 273.4 867.7 322 852.7 367.2 928.6 456.5 928.6 589.3Z",
|
||||
"width": 928.7109375
|
||||
},
|
||||
"search": [
|
||||
"github-alt"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "4f73560e87937d9f892fc96a0ec2d6c8",
|
||||
"css": "linkedin-1",
|
||||
"code": 59406,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M194.8 357.7V910.7H10.6V357.7H194.8ZM206.5 186.9Q207 227.7 178.3 255T102.7 282.4H101.6Q55.8 282.4 27.9 255T0 186.9Q0 145.6 28.7 118.6T103.8 91.5 178 118.6 206.5 186.9ZM857.1 593.8V910.7H673.5V615Q673.5 556.4 650.9 523.2T580.4 490Q545.2 490 521.5 509.2T486 556.9Q479.9 573.7 479.9 602.1V910.7H296.3Q297.4 688.1 297.4 549.7T296.9 384.5L296.3 357.7H479.9V438.1H478.8Q490 420.2 501.7 406.8T533.2 377.8 581.8 353.5 645.6 344.9Q741.1 344.9 799.1 408.2T857.1 593.8Z",
|
||||
"width": 857.421875
|
||||
},
|
||||
"search": [
|
||||
"linkedin"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "8a4d1f55d7e3df9f761ce979a00d6939",
|
||||
"css": "google-plus",
|
||||
"code": 59688,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M410.2 453.1Q410.2 473.2 428 492.5T471.3 530.4 521.8 571.4 564.7 629.5 582.6 708.7Q582.6 758.9 555.8 805.2 515.6 873.3 438.1 905.4T271.8 937.5Q198.1 937.5 134.2 914.3T38.5 837.6Q17.9 804.1 17.9 764.5 17.9 719.3 42.7 680.8T108.8 616.6Q181.9 570.9 334.3 560.8 316.4 537.4 307.8 519.5T299.1 478.8Q299.1 458.7 310.8 431.4 285.2 433.6 272.9 433.6 190.3 433.6 133.7 379.7T77 243.3Q77 197.5 97.1 154.6T152.3 81.5Q195.3 44.6 254.2 26.8T375.6 8.9H608.8L531.8 58H458.7Q500 93.2 521.2 132.3T542.4 221.5Q542.4 261.7 528.7 293.8T495.8 345.7 457 382 423.8 416.3 410.2 453.1ZM328.7 399.6Q349.9 399.6 372.2 390.3T409 366.1Q438.6 334.3 438.6 277.3 438.6 245 429.1 207.6T402.1 135.3 354.9 77.6 289.6 54.7Q266.2 54.7 243.6 65.6T207 94.9Q180.8 127.8 180.8 184.2 180.8 209.8 186.4 238.6T204 296 233 347.7 274.8 385 328.7 399.6ZM329.8 886.7Q362.2 886.7 392 879.5T447.3 857.7 488 817 503.3 756.1Q503.3 742.2 499.4 728.8T491.3 705.4 476.3 682.2 459.8 662.7 438.3 643.4 418 627.2 394.8 610.5 374.4 596Q365.5 594.9 347.7 594.9 318.1 594.9 289.1 598.8T229.1 612.7 174.9 638.4 136.7 680 121.6 738.8Q121.6 777.9 141.2 807.8T192.2 854.1 258.6 878.6 329.8 886.7ZM781.8 397.9H900.7V458.1H781.8V580.4H723.2V458.1H604.9V397.9H723.2V276.8H781.8V397.9Z",
|
||||
"width": 928.7109375
|
||||
},
|
||||
"search": [
|
||||
"google-plus"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "f977e468736fcc7d3bd500027e26243c",
|
||||
"css": "magic",
|
||||
"code": 59689,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M664.1 333.1L827.6 169.6 767.9 109.9 604.4 273.4ZM913.5 169.6Q913.5 184.7 903.5 194.8L185.8 912.4Q175.8 922.4 160.7 922.4T135.6 912.4L25.1 801.9Q15.1 791.9 15.1 776.8T25.1 751.7L742.7 34Q752.8 24 767.9 24T793 34L903.5 144.5Q913.5 154.6 913.5 169.6ZM159.6 63.6L214.3 80.4 159.6 97.1 142.9 151.8 126.1 97.1 71.4 80.4 126.1 63.6 142.9 8.9ZM354.9 154L464.3 187.5 354.9 221 321.4 330.4 287.9 221 178.6 187.5 287.9 154 321.4 44.6ZM873.9 420.8L928.6 437.5 873.9 454.2 857.1 508.9 840.4 454.2 785.7 437.5 840.4 420.8 857.1 366.1ZM516.7 63.6L571.4 80.4 516.7 97.1 500 151.8 483.3 97.1 428.6 80.4 483.3 63.6 500 8.9Z",
|
||||
"width": 928.7109375
|
||||
},
|
||||
"search": [
|
||||
"magic"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "a6226d354f47d58634594af44f9f89fb",
|
||||
"css": "wrench",
|
||||
"code": 59398,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M214.3 830.4Q214.3 815.8 203.7 805.2T178.6 794.6 153.5 805.2 142.9 830.4 153.5 855.5 178.6 866.1 203.7 855.5 214.3 830.4ZM573.7 596L193.1 976.6Q172.4 997.2 142.9 997.2 113.8 997.2 92.1 976.6L32.9 916.3Q11.7 896.2 11.7 866.1 11.7 836.5 32.9 815.3L412.9 435.3Q434.7 490 476.8 532.1T573.7 596ZM927.5 353.2Q927.5 375 914.6 412.4 888.4 487.2 822.8 533.8T678.6 580.4Q575.3 580.4 502 507T428.6 330.4 502 153.7 678.6 80.4Q710.9 80.4 746.4 89.6T806.4 115.5Q815.3 121.7 815.3 131.1T806.4 146.8L642.9 241.1V366.1L750.6 425.8Q753.3 424.1 794.6 398.7T870.3 353.5 909.6 333.7Q918 333.7 922.7 339.3T927.5 353.2Z",
|
||||
"width": 928.7109375
|
||||
},
|
||||
"search": [
|
||||
"wrench"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "fd324937aabece202989f1094a3eb247",
|
||||
"css": "feed",
|
||||
"code": 59422,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M214.3 758.9Q214.3 803.6 183 834.8T107.1 866.1 31.3 834.8 0 758.9 31.3 683 107.1 651.8 183 683 214.3 758.9ZM500 827.6Q501.1 843.2 490.5 854.4 480.5 866.1 464.3 866.1H389Q375 866.1 365 856.9T353.8 833.7Q341.5 705.9 250.8 615.2T32.4 512.3Q18.4 511.2 9.2 501.1T0 477.1V401.8Q0 385.6 11.7 375.6 21.2 366.1 35.7 366.1H38.5Q127.8 373.3 209.3 411T353.8 512.3Q417.4 575.3 455.1 656.8T500 827.6ZM785.7 828.7Q786.8 843.8 775.7 854.9 765.6 866.1 750 866.1H670.2Q655.7 866.1 645.4 856.3T634.5 832.6Q627.8 712.6 578.1 604.6T448.9 417.1 261.4 287.9 33.5 231Q19.5 230.5 9.8 220.1T0 195.9V116.1Q0 100.4 11.2 90.4 21.2 80.4 35.7 80.4H37.4Q183.6 87.6 317.2 147.3T554.7 311.4Q659 415.2 718.7 548.8T785.7 828.7Z",
|
||||
"width": 786.1328125
|
||||
},
|
||||
"search": [
|
||||
"feed"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "18f599287f49a17c0ab4256f19f55fdb",
|
||||
"css": "credit-card",
|
||||
"code": 59692,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M982.1 80.4Q1019 80.4 1045.2 106.6T1071.4 169.6V848.2Q1071.4 885 1045.2 911.3T982.1 937.5H89.3Q52.5 937.5 26.2 911.3T0 848.2V169.6Q0 132.8 26.2 106.6T89.3 80.4H982.1ZM89.3 151.8Q82 151.8 76.7 157.1T71.4 169.6V294.6H1000V169.6Q1000 162.4 994.7 157.1T982.1 151.8H89.3ZM982.1 866.1Q989.4 866.1 994.7 860.8T1000 848.2V508.9H71.4V848.2Q71.4 855.5 76.7 860.8T89.3 866.1H982.1ZM142.9 794.6V723.2H285.7V794.6H142.9ZM357.1 794.6V723.2H571.4V794.6H357.1Z",
|
||||
"width": 1071.2890625
|
||||
},
|
||||
"search": [
|
||||
"credit-card"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "c0e3ec66b0cb403907ac0088a9a0c2a0",
|
||||
"css": "github-1",
|
||||
"code": 59421,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M857.1 508.9Q857.1 649 775.4 760.9T564.2 915.7Q549.1 918.5 542.1 911.8T535.2 895.1V777.3Q535.2 723.2 506.1 698.1 537.9 694.8 563.3 688.1T615.8 666.3 661 629.2 690.6 570.6 702 486.6Q702 419.1 657.9 371.7 678.6 320.9 653.5 257.8 637.8 252.8 608.3 264T556.9 288.5L535.7 301.9Q483.8 287.4 428.6 287.4T321.4 301.9Q312.5 295.8 297.7 286.8T251.1 265.3 203.1 257.8Q178.6 320.9 199.2 371.7 155.1 419.1 155.1 486.6 155.1 534 166.6 570.3T195.9 628.9 240.8 666.3 293.2 688.1 350.4 698.1Q328.1 718.2 323.1 755.6 311.4 761.2 298 764T266.2 766.7 229.6 754.7 198.7 719.9Q188.1 702 171.6 690.8T144 677.5L132.8 675.8Q121.1 675.8 116.6 678.3T113.8 684.7 118.9 692.5 126.1 699.2L130 702Q142.3 707.6 154.3 723.2T171.9 751.7L177.5 764.5Q184.7 785.7 202 798.8T239.4 815.6 278.2 819.5 309.2 817.5L322 815.3Q322 836.5 322.3 865T322.5 895.1Q322.5 905.1 315.3 911.8T293 915.7Q163.5 872.8 81.8 760.9T0 508.9Q0 392.3 57.5 293.8T213.4 137.8 428.6 80.4 643.7 137.8 799.7 293.8 857.1 508.9Z",
|
||||
"width": 857.421875
|
||||
},
|
||||
"search": [
|
||||
"github"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "a3c8113b1393d6b5b19bce6b76a213ce",
|
||||
"css": "facebook-1",
|
||||
"code": 59420,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M535.2 15.6V162.9H447.5Q399.6 162.9 382.8 183T366.1 243.3V348.8H529.6L507.8 514H366.1V937.5H195.3V514H53V348.8H195.3V227.1Q195.3 123.3 253.3 66.1T407.9 8.9Q490 8.9 535.2 15.6Z",
|
||||
"width": 571.2890625
|
||||
},
|
||||
"search": [
|
||||
"facebook"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "5988460df34b4c5186bc82c06077fa2b",
|
||||
"css": "twitter-1",
|
||||
"code": 59396,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M904 236.6Q866.6 291.3 813.6 329.8 814.2 337.6 814.2 353.2 814.2 425.8 793 498T728.5 636.7 625.6 754.2 481.6 835.7 301.3 866.1Q150.1 866.1 24.6 785.2 44.1 787.4 68.1 787.4 193.6 787.4 291.9 710.4 233.3 709.3 186.9 674.4T123.3 585.4Q141.7 588.2 157.4 588.2 181.4 588.2 204.8 582 142.3 569.2 101.3 519.8T60.3 405.1V402.9Q98.2 424.1 141.7 425.8 104.9 401.2 83.1 361.6T61.4 275.7Q61.4 226.6 85.9 184.7 153.5 267.9 250.3 317.8T457.6 373.3Q453.1 352.1 453.1 332 453.1 257.3 505.9 204.5T633.4 151.8Q711.5 151.8 765.1 208.7 825.9 197 879.5 165.2 858.8 229.4 800.2 264.5 852.1 258.9 904 236.6Z",
|
||||
"width": 928.7109375
|
||||
},
|
||||
"search": [
|
||||
"twitter"
|
||||
]
|
||||
},
|
||||
{
|
||||
"uid": "614bae07570394fea18e83f41140593b",
|
||||
"css": "cogs2",
|
||||
"code": 59399,
|
||||
"src": "custom_icons",
|
||||
"selected": false,
|
||||
"svg": {
|
||||
"path": "M500 508.9Q500 449.8 458.1 407.9T357.1 366.1 256.1 407.9 214.3 508.9 256.1 609.9 357.1 651.8 458.1 609.9 500 508.9ZM928.6 794.6Q928.6 765.6 907.4 744.4T857.1 723.2 806.9 744.4 785.7 794.6Q785.7 824.2 806.6 845.1T857.1 866.1 907.6 845.1 928.6 794.6ZM928.6 223.2Q928.6 194.2 907.4 173T857.1 151.8 806.9 173 785.7 223.2Q785.7 252.8 806.6 273.7T857.1 294.6 907.6 273.7 928.6 223.2ZM714.3 458.1V561.4Q714.3 567 710.4 572.3T701.5 578.1L615 591.5Q608.8 611 597.1 633.9 616.1 660.7 647.3 698.1 651.2 703.7 651.2 709.3 651.2 716 647.3 719.9 634.5 736.6 601.3 769.8T557.5 803Q551.3 803 545.8 799.1L481.6 748.9Q460.9 759.5 438.6 766.2 432.5 826.5 425.8 852.7 421.9 866.1 409 866.1H305.2Q299.1 866.1 294.1 861.9T288.5 852.1L275.7 766.7Q256.7 761.2 233.8 749.4L168 799.1Q164.1 803 156.8 803 150.7 803 145.1 798.5 64.7 724.3 64.7 709.3 64.7 704.2 68.6 698.7 74.2 690.8 91.5 669.1T117.7 635Q104.9 610.5 98.2 589.3L13.4 575.9Q7.8 575.3 3.9 570.6T0 559.7V456.5Q0 450.9 3.9 445.6T12.8 439.7L99.3 426.3Q105.5 406.8 117.2 383.9 98.2 357.1 67 319.8 63.1 313.6 63.1 308.6 63.1 301.9 67 297.4 79.2 280.7 112.7 247.8T156.8 214.8Q162.9 214.8 168.5 218.7L232.7 269Q251.7 258.9 275.7 251.1 281.8 190.8 288.5 165.2 292.4 151.8 305.2 151.8H409Q415.2 151.8 420.2 156T425.8 165.7L438.6 251.1Q457.6 256.7 480.5 268.4L546.3 218.7Q550.8 214.8 557.5 214.8 563.6 214.8 569.2 219.3 649.6 293.5 649.6 308.6 649.6 313.6 645.6 319.2 639 328.1 622.2 349.3T597.1 382.8Q609.9 409.6 616.1 428.6L700.9 441.4Q706.5 442.5 710.4 447.3T714.3 458.1ZM1071.4 755.6V833.7Q1071.4 842.6 988.3 851 981.6 866.1 971.5 880 1000 943.1 1000 957 1000 959.3 997.8 960.9 929.7 1000.6 928.6 1000.6 924.1 1000.6 902.9 974.3T873.9 936.4Q862.7 937.5 857.1 937.5T840.4 936.4Q832.6 948.1 811.4 974.3T785.7 1000.6Q784.6 1000.6 716.5 960.9 714.3 959.3 714.3 957 714.3 943.1 742.7 880 732.7 866.1 726 851 642.9 842.6 642.9 833.7V755.6Q642.9 746.7 726 738.3 733.3 722.1 742.7 709.3 714.3 646.2 714.3 632.3 714.3 630 716.5 628.3 718.8 627.2 736 617.2T769 598.2 785.7 589.3Q790.2 589.3 811.4 615.2T840.4 652.9Q851.6 651.8 857.1 651.8T873.9 652.9Q902.3 613.3 925.2 590.4L928.6 589.3Q930.8 589.3 997.8 628.3 1000 630 1000 632.3 1000 646.2 971.5 709.3 981 722.1 988.3 738.3 1071.4 746.6 1071.4 755.6ZM1071.4 184.2V262.3Q1071.4 271.2 988.3 279.6 981.6 294.6 971.5 308.6 1000 371.7 1000 385.6 1000 387.8 997.8 389.5 929.7 429.1 928.6 429.1 924.1 429.1 902.9 402.9T873.9 365Q862.7 366.1 857.1 366.1T840.4 365Q832.6 376.7 811.4 402.9T785.7 429.1Q784.6 429.1 716.5 389.5 714.3 387.8 714.3 385.6 714.3 371.7 742.7 308.6 732.7 294.6 726 279.6 642.9 271.2 642.9 262.3V184.2Q642.9 175.2 726 166.9 733.3 150.7 742.7 137.8 714.3 74.8 714.3 60.8 714.3 58.6 716.5 56.9 718.8 55.8 736 45.8T769 26.8 785.7 17.9Q790.2 17.9 811.4 43.8T840.4 81.5Q851.6 80.4 857.1 80.4T873.9 81.5Q902.3 41.9 925.2 19L928.6 17.9Q930.8 17.9 997.8 56.9 1000 58.6 1000 60.8 1000 74.8 971.5 137.8 981 150.7 988.3 166.9 1071.4 175.2 1071.4 184.2Z",
|
||||
"width": 1071.2890625
|
||||
},
|
||||
"search": [
|
||||
"cogs2"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
85
src/assets/fonts/fontello-771c82e0/css/animation.css
vendored
Normal file
85
src/assets/fonts/fontello-771c82e0/css/animation.css
vendored
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
17
src/assets/fonts/fontello-771c82e0/css/fontello-codes.css
vendored
Normal file
17
src/assets/fonts/fontello-771c82e0/css/fontello-codes.css
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
.icon-mail:before { content: '\e800'; } /* '' */
|
||||
.icon-twitter:before { content: '\f099'; } /* '' */
|
||||
.icon-facebook:before { content: '\f09a'; } /* '' */
|
||||
.icon-rss:before { content: '\f09e'; } /* '' */
|
||||
.icon-linkedin:before { content: '\f0e1'; } /* '' */
|
||||
.icon-github:before { content: '\f113'; } /* '' */
|
||||
.icon-stackoverflow:before { content: '\f16c'; } /* '' */
|
||||
.icon-instagram:before { content: '\f16d'; } /* '' */
|
||||
.icon-tumblr:before { content: '\f173'; } /* '' */
|
||||
.icon-dribbble:before { content: '\f17d'; } /* '' */
|
||||
.icon-skype:before { content: '\f17e'; } /* '' */
|
||||
.icon-vkontakte:before { content: '\f189'; } /* '' */
|
||||
.icon-slack:before { content: '\f198'; } /* '' */
|
||||
.icon-paper-plane:before { content: '\f1d8'; } /* '' */
|
||||
.icon-whatsapp:before { content: '\f232'; } /* '' */
|
||||
.icon-odnoklassniki:before { content: '\f263'; } /* '' */
|
||||
70
src/assets/fonts/fontello-771c82e0/css/fontello-embedded.css
vendored
Normal file
70
src/assets/fonts/fontello-771c82e0/css/fontello-embedded.css
vendored
Normal file
File diff suppressed because one or more lines are too long
17
src/assets/fonts/fontello-771c82e0/css/fontello-ie7-codes.css
vendored
Normal file
17
src/assets/fonts/fontello-771c82e0/css/fontello-ie7-codes.css
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
.icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-facebook { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-linkedin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-stackoverflow { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-instagram { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-tumblr { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-dribbble { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-skype { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-vkontakte { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-slack { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-paper-plane { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-whatsapp { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-odnoklassniki { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
28
src/assets/fonts/fontello-771c82e0/css/fontello-ie7.css
vendored
Normal file
28
src/assets/fonts/fontello-771c82e0/css/fontello-ie7.css
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: 'fontello';
|
||||
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-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-facebook { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-linkedin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-github { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-stackoverflow { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-instagram { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-tumblr { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-dribbble { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-skype { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-vkontakte { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-slack { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-paper-plane { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-whatsapp { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-odnoklassniki { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
73
src/assets/fonts/fontello-771c82e0/css/fontello.css
vendored
Normal file
73
src/assets/fonts/fontello-771c82e0/css/fontello.css
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.eot?65524428');
|
||||
src: url('../font/fontello.eot?65524428#iefix') format('embedded-opentype'),
|
||||
url('../font/fontello.woff2?65524428') format('woff2'),
|
||||
url('../font/fontello.woff?65524428') format('woff'),
|
||||
url('../font/fontello.ttf?65524428') format('truetype'),
|
||||
url('../font/fontello.svg?65524428#fontello') 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: 'fontello';
|
||||
src: url('../font/fontello.svg?65524428#fontello') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
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-mail:before { content: '\e800'; } /* '' */
|
||||
.icon-twitter:before { content: '\f099'; } /* '' */
|
||||
.icon-facebook:before { content: '\f09a'; } /* '' */
|
||||
.icon-rss:before { content: '\f09e'; } /* '' */
|
||||
.icon-linkedin:before { content: '\f0e1'; } /* '' */
|
||||
.icon-github:before { content: '\f113'; } /* '' */
|
||||
.icon-stackoverflow:before { content: '\f16c'; } /* '' */
|
||||
.icon-instagram:before { content: '\f16d'; } /* '' */
|
||||
.icon-tumblr:before { content: '\f173'; } /* '' */
|
||||
.icon-dribbble:before { content: '\f17d'; } /* '' */
|
||||
.icon-skype:before { content: '\f17e'; } /* '' */
|
||||
.icon-vkontakte:before { content: '\f189'; } /* '' */
|
||||
.icon-slack:before { content: '\f198'; } /* '' */
|
||||
.icon-paper-plane:before { content: '\f1d8'; } /* '' */
|
||||
.icon-whatsapp:before { content: '\f232'; } /* '' */
|
||||
.icon-odnoklassniki:before { content: '\f263'; } /* '' */
|
||||
330
src/assets/fonts/fontello-771c82e0/demo.html
Normal file
330
src/assets/fonts/fontello-771c82e0/demo.html
Normal file
@ -0,0 +1,330 @@
|
||||
<!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: 'fontello';
|
||||
src: url('./font/fontello.eot?33839734');
|
||||
src: url('./font/fontello.eot?33839734#iefix') format('embedded-opentype'),
|
||||
url('./font/fontello.woff?33839734') format('woff'),
|
||||
url('./font/fontello.ttf?33839734') format('truetype'),
|
||||
url('./font/fontello.svg?33839734#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
.demo-icon
|
||||
{
|
||||
font-family: "fontello";
|
||||
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/fontello-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>
|
||||
fontello
|
||||
<small>font demo</small>
|
||||
</h1>
|
||||
<label class="switch">
|
||||
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes
|
||||
</label>
|
||||
</div>
|
||||
<div id="icons" class="container">
|
||||
<div class="row">
|
||||
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-mail"></i> <span class="i-name">icon-mail</span><span class="i-code">0xe800</span></div>
|
||||
<div title="Code: 0xf099" class="the-icons span3"><i class="demo-icon icon-twitter"></i> <span class="i-name">icon-twitter</span><span class="i-code">0xf099</span></div>
|
||||
<div title="Code: 0xf09a" class="the-icons span3"><i class="demo-icon icon-facebook"></i> <span class="i-name">icon-facebook</span><span class="i-code">0xf09a</span></div>
|
||||
<div title="Code: 0xf09e" class="the-icons span3"><i class="demo-icon icon-rss"></i> <span class="i-name">icon-rss</span><span class="i-code">0xf09e</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xf0e1" class="the-icons span3"><i class="demo-icon icon-linkedin"></i> <span class="i-name">icon-linkedin</span><span class="i-code">0xf0e1</span></div>
|
||||
<div title="Code: 0xf113" class="the-icons span3"><i class="demo-icon icon-github"></i> <span class="i-name">icon-github</span><span class="i-code">0xf113</span></div>
|
||||
<div title="Code: 0xf16c" class="the-icons span3"><i class="demo-icon icon-stackoverflow"></i> <span class="i-name">icon-stackoverflow</span><span class="i-code">0xf16c</span></div>
|
||||
<div title="Code: 0xf16d" class="the-icons span3"><i class="demo-icon icon-instagram"></i> <span class="i-name">icon-instagram</span><span class="i-code">0xf16d</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xf173" class="the-icons span3"><i class="demo-icon icon-tumblr"></i> <span class="i-name">icon-tumblr</span><span class="i-code">0xf173</span></div>
|
||||
<div title="Code: 0xf17d" class="the-icons span3"><i class="demo-icon icon-dribbble"></i> <span class="i-name">icon-dribbble</span><span class="i-code">0xf17d</span></div>
|
||||
<div title="Code: 0xf17e" class="the-icons span3"><i class="demo-icon icon-skype"></i> <span class="i-name">icon-skype</span><span class="i-code">0xf17e</span></div>
|
||||
<div title="Code: 0xf189" class="the-icons span3"><i class="demo-icon icon-vkontakte"></i> <span class="i-name">icon-vkontakte</span><span class="i-code">0xf189</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xf198" class="the-icons span3"><i class="demo-icon icon-slack"></i> <span class="i-name">icon-slack</span><span class="i-code">0xf198</span></div>
|
||||
<div title="Code: 0xf1d8" class="the-icons span3"><i class="demo-icon icon-paper-plane"></i> <span class="i-name">icon-paper-plane</span><span class="i-code">0xf1d8</span></div>
|
||||
<div title="Code: 0xf232" class="the-icons span3"><i class="demo-icon icon-whatsapp"></i> <span class="i-name">icon-whatsapp</span><span class="i-code">0xf232</span></div>
|
||||
<div title="Code: 0xf263" class="the-icons span3"><i class="demo-icon icon-odnoklassniki"></i> <span class="i-name">icon-odnoklassniki</span><span class="i-code">0xf263</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.eot
Normal file
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.eot
Normal file
Binary file not shown.
42
src/assets/fonts/fontello-771c82e0/font/fontello.svg
Normal file
42
src/assets/fonts/fontello-771c82e0/font/fontello.svg
Normal file
@ -0,0 +1,42 @@
|
||||
<?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) 2017 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="mail" unicode="" d="M929 11v428q-18-20-39-36-149-115-238-189-28-24-46-37t-48-28-57-13h-2q-26 0-57 13t-48 28-46 37q-88 74-238 189-21 16-39 36v-428q0-7 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 83-159 107-84 223-176 4-3 20-17t25-21 25-17 28-16 24-5h2q11 0 24 5t28 16 25 17 25 21 20 17q116 92 224 176 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="twitter" unicode="" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
|
||||
|
||||
<glyph glyph-name="facebook" unicode="" d="M535 843v-147h-87q-48 0-65-20t-17-60v-106h164l-22-165h-142v-424h-171v424h-142v165h142v122q0 104 58 161t155 57q82 0 127-7z" horiz-adv-x="571.4" />
|
||||
|
||||
<glyph glyph-name="rss" unicode="" d="M214 100q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m286-69q1-15-9-26-10-12-27-12h-75q-14 0-24 9t-11 23q-12 128-103 219t-219 103q-14 1-23 11t-9 24v75q0 16 12 26 9 10 24 10h3q89-7 170-45t145-101q63-63 101-145t45-171z m286-1q1-15-10-26-10-11-26-11h-80q-14 0-25 10t-10 23q-7 120-57 228t-129 188-188 129-227 57q-14 1-24 11t-10 24v80q0 16 11 26 10 10 25 10h1q147-8 280-67t238-164q104-104 164-238t67-280z" horiz-adv-x="785.7" />
|
||||
|
||||
<glyph glyph-name="linkedin" unicode="" d="M195 501v-553h-184v553h184z m12 171q0-41-29-68t-75-27h-1q-46 0-74 27t-28 68q0 41 29 68t75 27 74-27 29-68z m650-407v-317h-183v296q0 59-23 92t-71 33q-35 0-58-19t-36-48q-6-17-6-45v-309h-184q1 223 1 361t0 165l-1 27h184v-80h-1q11 18 23 31t31 29 49 24 64 9q95 0 153-63t58-186z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="github" unicode="" d="M357 171q0-22-7-45t-24-43-40-19-41 19-24 43-7 45 7 46 24 43 41 19 40-19 24-43 7-46z m357 0q0-22-7-45t-24-43-40-19-41 19-24 43-7 45 7 46 24 43 41 19 40-19 24-43 7-46z m90 0q0 67-39 114t-104 47q-23 0-109-12-40-6-88-6t-87 6q-85 12-109 12-66 0-104-47t-39-114q0-49 18-85t45-58 68-33 78-17 83-4h94q46 0 83 4t78 17 69 33 45 58 18 85z m125 99q0-116-34-185-22-43-59-74t-79-48-95-27-96-12-93-3q-43 0-79 2t-82 7-85 17-77 29-67 45-48 64q-35 69-35 185 0 132 76 221-15 45-15 95 0 64 28 121 61 0 106-22t106-69q82 20 172 20 83 0 157-18 58 46 104 67t105 22q29-57 29-121 0-49-15-94 76-89 76-222z" horiz-adv-x="928.6" />
|
||||
|
||||
<glyph glyph-name="stackoverflow" unicode="" d="M719-61h-624v268h-89v-357h803v357h-90v-268z m-525 293l18 87 437-92-18-87z m57 208l38 82 404-189-37-81z m112 199l57 69 343-287-57-68z m222 211l266-358-71-53-267 357z m-401-821v89h447v-89h-447z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="instagram" unicode="" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m77 0q0-91-64-156t-155-64-156 64-64 156 64 156 156 64 155-64 64-156z m61 229q0-21-15-36t-37-15-36 15-15 36 15 36 36 15 37-15 15-36z m-280 123q-4 0-43 0t-59 0-54-2-57-5-40-11q-28-11-49-32t-33-49q-6-16-10-40t-6-58-1-53 0-59 0-43 0-43 0-59 1-53 6-58 10-40q12-28 33-49t49-32q16-6 40-11t57-5 54-2 59 0 43 0 42 0 59 0 54 2 58 5 39 11q28 11 50 32t32 49q6 16 10 40t6 58 1 53 0 59 0 43 0 43 0 59-1 53-6 58-10 40q-11 28-32 49t-50 32q-16 6-39 11t-58 5-54 2-59 0-42 0z m428-352q0-128-3-177-5-116-69-180t-179-69q-50-3-177-3t-177 3q-116 6-180 69t-69 180q-3 49-3 177t3 177q5 116 69 180t180 69q49 3 177 3t177-3q116-6 179-69t69-180q3-49 3-177z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="tumblr" unicode="" d="M527 108l44-132q-12-19-61-37t-99-18q-58-1-107 15t-79 41-53 59-31 67-9 66v304h-94v120q40 14 72 39t51 50 32 57 19 55 8 49q1 3 3 5t4 2h136v-237h186v-140h-186v-289q0-17 3-31t13-30 28-23 45-8q44 1 75 16z" horiz-adv-x="571.4" />
|
||||
|
||||
<glyph glyph-name="dribbble" unicode="" d="M571 13q-23 134-78 278h-1l-1-1q-9-3-24-9t-56-27-77-46-73-64-57-82l-9 6q103-84 234-84 73 0 142 29z m-103 339q-11 27-29 62-174-52-376-52 0-4 0-12 0-69 24-132t69-112q28 49 69 93t80 69 73 45 55 27l21 7q2 1 7 2t7 3z m-59 118q-67 119-137 211-77-36-130-104t-72-152q169 0 339 45z m381-178q-117 33-228 16 49-133 71-262 62 42 104 106t53 140z m-449 414q-1 0-1-1 0 1 1 1z m329-81q-103 91-241 91-43 0-87-10 73-95 137-214 39 15 73 34t54 34 36 32 21 23z m125-271q-2 129-83 229l-1-1q-5-7-11-13t-24-25-40-34-55-36-74-36q14-30 25-53 1-3 3-10t5-9q20 2 41 4t41 1 39-1 35-2 32-3 27-4 20-3 14-3z m62-4q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="skype" unicode="" d="M655 257q0 28-11 51t-27 38-41 27-46 19-49 13l-58 14q-17 4-25 6t-19 6-17 9-9 12-4 16q0 43 80 43 24 0 43-6t30-16 21-19 23-16 27-7q26 0 42 18t16 43q0 31-32 55t-79 38-101 13q-38 0-74-9t-67-26-49-48-19-72q0-34 10-60t32-42 44-27 58-18l81-20q51-12 63-20 18-11 18-34 0-21-23-36t-58-14q-29 0-51 9t-37 22-25 25-26 21-30 9q-28 0-42-17t-14-41q0-52 68-88t162-37q41 0 78 10t69 30 49 52 19 74z m202-121q0-89-63-152t-151-63q-73 0-131 45-43-9-83-9-80 0-153 31t-126 84-83 125-31 153q0 41 9 84-45 58-45 130 0 89 63 152t151 63q73 0 131-45 43 9 84 9 79 0 152-31t126-84 84-125 30-153q0-41-8-84 44-58 44-130z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="vkontakte" unicode="" d="M1070 560q13-36-84-164-13-18-36-48-22-28-31-40t-17-27-7-24 8-19 18-24 32-30q2-1 2-2 79-73 107-123 2-3 4-7t4-15-1-19-14-15-33-7l-142-3q-14-2-32 3t-29 13l-11 6q-17 12-39 36t-38 43-34 33-32 8q-1 0-4-2t-10-8-12-16-9-29-4-44q0-8-2-15t-4-10l-2-3q-10-11-30-12h-64q-40-3-81 9t-74 29-57 37-40 32l-14 14q-5 5-15 17t-40 50-59 85-68 117-73 152q-4 9-4 15t2 9l2 3q9 11 32 11l153 1q7-1 13-3t9-5l3-2q9-6 13-18 11-28 26-57t23-46l9-16q16-34 31-58t27-38 23-22 19-8 15 3q1 1 3 3t7 12 7 26 5 46 0 69q-1 23-5 41t-7 26l-4 6q-14 19-47 24-8 2 3 14 8 10 21 17 29 14 133 13 46-1 75-7 12-3 19-8t12-13 5-18 2-25 0-31-2-40 0-46q0-6-1-23t0-27 2-22 6-22 13-14q4-1 9-2t15 6 21 19 29 38 38 60q33 58 60 125 2 6 5 10t6 6l3 2 2 1t8 2 11 0l160 1q22 3 36-1t17-10z" horiz-adv-x="1071.4" />
|
||||
|
||||
<glyph glyph-name="slack" unicode="" d="M848 417q34 0 57-23t24-56q0-54-52-73l-96-33 31-93q4-12 4-26 0-33-24-57t-56-24q-26 0-48 15t-29 40l-31 92-173-59 31-91q4-14 4-27 0-33-23-57t-57-24q-27 0-48 15t-29 41l-31 91-85-30q-17-5-28-5-34 0-57 22t-23 57q0 26 16 47t40 30l87 29-59 175-87-30q-14-5-27-5-33 0-56 23t-23 56q0 26 15 48t40 29l88 30-30 88q-4 14-4 27 0 33 23 57t57 24q26 0 48-16t29-40l30-89 173 59-30 89q-4 13-4 26 0 33 23 57t57 24q26 0 48-15t30-40l29-90 91 31q11 3 24 3 33 0 57-22t24-55q0-25-17-45t-41-29l-88-30 59-177 91 32q13 4 26 4z m-443-146l173 58-59 176-173-60z" horiz-adv-x="928.6" />
|
||||
|
||||
<glyph glyph-name="paper-plane" unicode="" d="M984 844q19-13 15-36l-142-857q-3-16-18-25-8-5-18-5-6 0-13 3l-253 104-135-165q-10-13-27-13-7 0-12 2-11 4-17 13t-7 21v195l482 590-596-516-221 91q-20 8-22 30-1 23 18 33l928 536q9 5 18 5 11 0 20-6z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="whatsapp" unicode="" d="M550 307q7 0 54-25t50-30q1-2 1-8 0-18-9-42-9-22-40-37t-57-15q-32 0-106 35-55 25-95 66t-82 103q-41 60-40 108v5q2 50 41 88 14 12 29 12 4 0 10-1t11-1q11 0 15-3t8-16q5-11 19-49t14-41q0-12-19-33t-20-26q0-3 3-8 19-41 57-76 31-30 84-57 7-4 13-4 8 0 30 27t29 28z m-114-296q71 0 136 28t112 74 75 112 28 136-28 136-75 112-112 75-136 28-135-28-112-75-75-112-28-136q0-113 67-205l-44-130 135 43q88-58 192-58z m0 771q86 0 164-34t134-89 90-135 33-163-33-163-90-134-134-90-164-34q-108 0-203 53l-233-75 76 226q-60 99-60 217 0 86 33 163t90 135 134 89 163 34z" horiz-adv-x="857.1" />
|
||||
|
||||
<glyph glyph-name="odnoklassniki" unicode="" d="M357 344q-105 0-179 74t-74 179q0 105 74 179t179 74 179-74 75-179q0-105-75-179t-179-74z m0 378q-51 0-88-37t-36-88q0-52 36-88t88-37 88 37 37 88q0 52-37 88t-88 37z m292-409q7-15 8-27t-2-23-15-21-24-21-34-23q-64-41-176-53l41-40 149-149q17-17 17-41t-17-41l-7-7q-17-17-41-17t-41 17q-38 38-149 149l-149-149q-18-17-42-17t-40 17l-7 7q-17 17-17 41t17 41l149 149 40 40q-113 12-177 53-21 14-34 23t-24 21-15 21-2 23 8 27q6 11 16 20t23 12 32-1 36-20q3-2 8-6t24-13 39-17 51-14 63-6q51 0 97 14t67 28l21 14q19 15 37 20t31 1 23-12 16-20z" horiz-adv-x="714.3" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.ttf
Normal file
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.woff
Normal file
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.woff2
Normal file
BIN
src/assets/fonts/fontello-771c82e0/font/fontello.woff2
Normal file
Binary file not shown.
5
src/assets/scss/_base.scss
Normal file
5
src/assets/scss/_base.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "base/normalize";
|
||||
@import "base/generic";
|
||||
@import "base/highlight";
|
||||
6
src/assets/scss/_mixins.scss
Normal file
6
src/assets/scss/_mixins.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/margin";
|
||||
@import "mixins/padding";
|
||||
@import "mixins/line-height";
|
||||
4
src/assets/scss/_pages.scss
Normal file
4
src/assets/scss/_pages.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "pages/tags";
|
||||
@import "pages/categories";
|
||||
37
src/assets/scss/_variables.scss
Normal file
37
src/assets/scss/_variables.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Variables
|
||||
*/
|
||||
|
||||
// Colors
|
||||
$color-base: #222;
|
||||
$color-primary: #5d93ff;
|
||||
$color-secondary: #f7a046;
|
||||
|
||||
$color-white: lighten($color-base, 100%);
|
||||
$color-gray: lighten($color-base, 40%);
|
||||
$color-gray-border: lighten($color-base, 77%);
|
||||
$color-gray-bg: lighten($color-base, 79%);
|
||||
|
||||
// Typographic
|
||||
$typographic-font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
|
||||
$typographic-root-font-size: 100;
|
||||
$typographic-base-font-size: 16px;
|
||||
$typographic-small-font-size: 14px;
|
||||
|
||||
$typographic-base-line-height: 1.625;
|
||||
|
||||
$typographic-base-font-color: $color-base;
|
||||
$typographic-link-p-font-color: $color-primary;
|
||||
$typographic-link-s-font-color: $color-secondary;
|
||||
|
||||
$typographic-leading: round(16 * ($typographic-root-font-size / 100) * $typographic-base-line-height);
|
||||
|
||||
// Layout
|
||||
$layout-post-single-max-width: 945px;
|
||||
$layout-post-single-width: $layout-post-single-max-width - 305px;
|
||||
|
||||
$layout-width: 1070px;
|
||||
$layout-breakpoint-sm: 685px;
|
||||
$layout-breakpoint-md: 960px;
|
||||
$layout-breakpoint-lg: 1100px;
|
||||
182
src/assets/scss/base/_generic.scss
Normal file
182
src/assets/scss/base/_generic.scss
Normal file
@ -0,0 +1,182 @@
|
||||
/**
|
||||
* Generic
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: $typographic-root-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $typographic-font-family;
|
||||
color: $typographic-base-font-color;
|
||||
line-height: $typographic-base-line-height;
|
||||
font-size: $typographic-base-font-size;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $typographic-font-family;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $typographic-base-font-size * 2.5;
|
||||
@include line-height(2);
|
||||
@include margin-top(4);
|
||||
@include margin-bottom(1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $typographic-base-font-size * 1.6875;
|
||||
@include line-height(1.5);
|
||||
@include margin-top(2);
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $typographic-base-font-size * 1.375;
|
||||
@include line-height(1);
|
||||
@include margin-top(2);
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $typographic-base-font-size * 1.2;
|
||||
@include line-height(1);
|
||||
@include margin-top(1.5);
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $typographic-base-font-size;
|
||||
@include line-height(1);
|
||||
@include margin-top(2.5);
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: $typographic-base-font-size;
|
||||
@include line-height(1);
|
||||
@include margin-top(2.5);
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: inherit auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 52px;
|
||||
margin-bottom: 52px;
|
||||
border: 0;
|
||||
color: $color-base;
|
||||
display: block;
|
||||
height: 26px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-size: 100% 26px;
|
||||
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, $color-base 11px, $color-base 15px, transparent 15px, transparent 26px);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $typographic-link-p-font-color;
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $typographic-link-s-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: square;
|
||||
@include margin-bottom(1);
|
||||
& li {
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@include line-height(1);
|
||||
@include margin-bottom(1);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@include line-height(.75);
|
||||
@include margin-top(.25);
|
||||
color: $color-base;
|
||||
font-size: $typographic-small-font-size;
|
||||
font-style: italic;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout {
|
||||
lost-center: $layout-width;
|
||||
}
|
||||
|
||||
.content {
|
||||
&__inner {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-sm {
|
||||
figure.float-left,
|
||||
figure.float-right {
|
||||
max-width: 310px;
|
||||
@include padding(0, 1, 0, 1);
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
.content {
|
||||
lost-column: 7/12;
|
||||
&__inner {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-md {
|
||||
.content {
|
||||
lost-column: 2/3;
|
||||
&__inner {
|
||||
padding: 40px 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
137
src/assets/scss/base/_highlight.scss
Normal file
137
src/assets/scss/base/_highlight.scss
Normal file
@ -0,0 +1,137 @@
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
461
src/assets/scss/base/_normalize.scss
Normal file
461
src/assets/scss/base/_normalize.scss
Normal file
@ -0,0 +1,461 @@
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
6
src/assets/scss/init.scss
Normal file
6
src/assets/scss/init.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "base";
|
||||
@import "pages";
|
||||
25
src/assets/scss/mixins/_breakpoints.scss
Normal file
25
src/assets/scss/mixins/_breakpoints.scss
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Breakpoints
|
||||
*/
|
||||
|
||||
@mixin breakpoint-xs {
|
||||
@content;
|
||||
}
|
||||
|
||||
@mixin breakpoint-sm {
|
||||
@media screen and (min-width: $layout-breakpoint-sm) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint-md {
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint-lg {
|
||||
@media screen and (min-width: $layout-breakpoint-lg) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
7
src/assets/scss/mixins/_line-height.scss
Normal file
7
src/assets/scss/mixins/_line-height.scss
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Line-Height
|
||||
*/
|
||||
|
||||
@mixin line-height($number) {
|
||||
line-height: #{ $number * $typographic-leading + "px"};
|
||||
}
|
||||
23
src/assets/scss/mixins/_margin.scss
Normal file
23
src/assets/scss/mixins/_margin.scss
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Margin
|
||||
*/
|
||||
|
||||
@mixin margin-top($number) {
|
||||
margin-top: #{ $number * $typographic-leading + "px"};
|
||||
}
|
||||
|
||||
@mixin margin-bottom($number) {
|
||||
margin-bottom: #{ $number * $typographic-leading + "px"};
|
||||
}
|
||||
|
||||
@mixin margin($top, $right, $bottom:null, $left:null) {
|
||||
@if $left==null and $bottom==null {
|
||||
margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
|
||||
}
|
||||
@else if $left==null or $left==$right {
|
||||
margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
|
||||
}
|
||||
@else {
|
||||
margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
|
||||
}
|
||||
}
|
||||
19
src/assets/scss/mixins/_padding.scss
Normal file
19
src/assets/scss/mixins/_padding.scss
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Padding
|
||||
*/
|
||||
|
||||
@mixin padding($top, $right, $bottom:null, $left:null) {
|
||||
@if $left==null and $bottom==null {
|
||||
padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
|
||||
}
|
||||
@else if $left==null or $left==$right {
|
||||
padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
|
||||
}
|
||||
@else {
|
||||
padding: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin padding-equal($number) {
|
||||
padding: #{ $number * $typographic-leading + "px"};
|
||||
}
|
||||
18
src/assets/scss/pages/_categories.scss
Normal file
18
src/assets/scss/pages/_categories.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Categories
|
||||
*/
|
||||
|
||||
.categories {
|
||||
&__list {
|
||||
&-item {
|
||||
&-link {
|
||||
color: $color-base;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/assets/scss/pages/_tags.scss
Normal file
18
src/assets/scss/pages/_tags.scss
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Tags
|
||||
*/
|
||||
|
||||
.tags {
|
||||
&__list {
|
||||
&-item {
|
||||
&-link {
|
||||
color: $color-base;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/components/CategoryTemplateDetails/index.jsx
Normal file
44
src/components/CategoryTemplateDetails/index.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Post from '../Post';
|
||||
|
||||
class CategoryTemplateDetails extends React.Component {
|
||||
render() {
|
||||
const items = [];
|
||||
const category = this.props.pathContext.category;
|
||||
const posts = this.props.data.allMarkdownRemark.edges;
|
||||
posts.forEach((post) => {
|
||||
items.push(
|
||||
<Post data={post} key={post.node.fields.slug} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">
|
||||
{category}
|
||||
</h1>
|
||||
<div className="page__body">
|
||||
{items}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CategoryTemplateDetails.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
allMarkdownRemark: PropTypes.shape({
|
||||
edges: PropTypes.array.isRequired
|
||||
})
|
||||
}),
|
||||
pathContext: PropTypes.shape({
|
||||
category: PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
export default CategoryTemplateDetails;
|
||||
65
src/components/Links/index.jsx
Normal file
65
src/components/Links/index.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './style.scss';
|
||||
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
|
||||
|
||||
class Links extends React.Component {
|
||||
render() {
|
||||
const author = this.props.data;
|
||||
const links = {
|
||||
telegram: author.telegram,
|
||||
twitter: author.twitter,
|
||||
github: author.github,
|
||||
vk: author.vk,
|
||||
rss: author.rss,
|
||||
email: author.email
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="links">
|
||||
<ul className="links__list">
|
||||
<li className="links__list-item">
|
||||
<a href={links.twitter}>
|
||||
<i className="icon-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="links__list-item">
|
||||
<a href={links.github}>
|
||||
<i className="icon-github" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="links__list-item">
|
||||
<a href={links.vk}>
|
||||
<i className="icon-vkontakte" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="links__list">
|
||||
<li className="links__list-item">
|
||||
<a href={`mailto:${links.email}`}>
|
||||
<i className="icon-mail" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="links__list-item">
|
||||
<a href={`telegram:${links.telegram}`}>
|
||||
<i className="icon-paper-plane" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="links__list">
|
||||
<li className="links__list-item">
|
||||
<a href={links.rss}>
|
||||
<i className="icon-rss" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Links.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default Links;
|
||||
35
src/components/Links/style.scss
Normal file
35
src/components/Links/style.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.links {
|
||||
@include margin-bottom(1);
|
||||
&__list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px -3px;
|
||||
&-item {
|
||||
padding: 0;
|
||||
margin: 0 3px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
background: $color-gray-bg;
|
||||
& a {
|
||||
border: 0;
|
||||
& i {
|
||||
font-size: 14px;
|
||||
color: lighten($color-base, 20%);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
& i {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/components/Menu/index.jsx
Normal file
38
src/components/Menu/index.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'gatsby-link';
|
||||
import './style.scss';
|
||||
|
||||
class Menu extends React.Component {
|
||||
render() {
|
||||
const menu = this.props.data;
|
||||
|
||||
const menuBlock = (
|
||||
<ul className="menu__list">
|
||||
{menu.map(item =>
|
||||
<li className="menu__list-item" key={item.path}>
|
||||
<Link
|
||||
exact to={item.path}
|
||||
className="menu__list-item-link"
|
||||
activeClassName="menu__list-item-link menu__list-item-link--active"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
|
||||
return (
|
||||
<nav className="menu">
|
||||
{menuBlock}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Menu.propTypes = {
|
||||
data: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
export default Menu;
|
||||
30
src/components/Menu/style.scss
Normal file
30
src/components/Menu/style.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.menu {
|
||||
@include margin-bottom(1);
|
||||
&__list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&-item {
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
&-link {
|
||||
font-size: $typographic-base-font-size;
|
||||
color: $typographic-base-font-color;
|
||||
font-weight: 400;
|
||||
border: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
}
|
||||
&--active {
|
||||
color: $color-base;
|
||||
border-bottom: 1px solid $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/components/PageTemplateDetails/index.jsx
Normal file
32
src/components/PageTemplateDetails/index.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Sidebar from '../Sidebar';
|
||||
import './style.scss';
|
||||
|
||||
class PageTemplateDetails extends React.Component {
|
||||
render() {
|
||||
const page = this.props.data.markdownRemark;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Sidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">{page.frontmatter.title}</h1>
|
||||
<div className="page__body" dangerouslySetInnerHTML={{ __html: page.html }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PageTemplateDetails.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
markdownRemark: PropTypes.object.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
export default PageTemplateDetails;
|
||||
18
src/components/PageTemplateDetails/style.scss
Normal file
18
src/components/PageTemplateDetails/style.scss
Normal file
@ -0,0 +1,18 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.page {
|
||||
@include margin-bottom(2);
|
||||
&__title {
|
||||
font-size: $typographic-base-font-size * 2.5;
|
||||
font-weight: 500;
|
||||
@include line-height(2);
|
||||
@include margin-top(0);
|
||||
@include margin-bottom(1.45);
|
||||
}
|
||||
&__body {
|
||||
font-size: $typographic-base-font-size;
|
||||
@include line-height(1);
|
||||
@include margin(0, 0, 1);
|
||||
}
|
||||
}
|
||||
46
src/components/Post/index.jsx
Normal file
46
src/components/Post/index.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'gatsby-link';
|
||||
import moment from 'moment';
|
||||
import './style.scss';
|
||||
|
||||
class Post extends React.Component {
|
||||
render() {
|
||||
const data = this.props.data;
|
||||
const post = {
|
||||
title: data.node.frontmatter.title,
|
||||
slug: data.node.fields.slug,
|
||||
description: data.node.frontmatter.description,
|
||||
date: data.node.frontmatter.date,
|
||||
category: data.node.frontmatter.category,
|
||||
categorySlug: data.node.fields.categorySlug
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="post">
|
||||
<div className="post__meta">
|
||||
<time className="post__meta-time" dateTime={moment(post.date).format('MMMM D, YYYY')}>
|
||||
{moment(post.date).format('MMMM YYYY')}
|
||||
</time>
|
||||
<span className="post__meta-divider" />
|
||||
<span className="post__meta-category" key={post.categorySlug}>
|
||||
<Link to={post.categorySlug} className="post__meta-category-link">
|
||||
{post.category}
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="post__title">
|
||||
<Link className="post__title-link" to={post.slug}>{post.title}</Link>
|
||||
</h2>
|
||||
<p className="post__description">{post.description}</p>
|
||||
<Link className="post__readmore" to={post.slug}>Read</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Post.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default Post;
|
||||
60
src/components/Post/style.scss
Normal file
60
src/components/Post/style.scss
Normal file
@ -0,0 +1,60 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.post {
|
||||
@include margin-bottom(1.25);
|
||||
&:last-child {
|
||||
@include margin-bottom(.5);
|
||||
}
|
||||
&__title {
|
||||
font-size: $typographic-base-font-size * 1.6875;
|
||||
@include line-height(1.5);
|
||||
@include margin-top(0);
|
||||
@include margin-bottom(.5);
|
||||
&-link {
|
||||
color: $color-base;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-base;
|
||||
border-bottom: 1px solid $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
font-size: $typographic-base-font-size;
|
||||
@include line-height(1);
|
||||
@include margin-bottom(.75);
|
||||
}
|
||||
&__meta {
|
||||
&-time {
|
||||
font-size: $typographic-small-font-size;
|
||||
color: $color-base;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&-divider {
|
||||
margin: 0 5px;
|
||||
}
|
||||
&-category {
|
||||
&-link {
|
||||
font-size: $typographic-small-font-size;
|
||||
color: $color-secondary;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__readmore {
|
||||
font-size: $typographic-base-font-size;
|
||||
color: $color-primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-primary;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
src/components/PostTemplateDetails/index.jsx
Normal file
72
src/components/PostTemplateDetails/index.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'gatsby-link';
|
||||
import moment from 'moment';
|
||||
import './style.scss';
|
||||
|
||||
class PostTemplateDetails extends React.Component {
|
||||
render() {
|
||||
const { subtitle, author } = this.props.data.site.siteMetadata;
|
||||
const post = this.props.data.markdownRemark;
|
||||
const tags = post.fields.tagSlugs;
|
||||
|
||||
const homeBlock = (
|
||||
<div>
|
||||
<Link className="post-single__home-button" to="/">All Articles</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
const tagsBlock = (
|
||||
<div className="post-single__tags">
|
||||
<ul className="post-single__tags-list">
|
||||
{tags.map((tag, i) =>
|
||||
<li className="post-single__tags-list-item" key={tag}>
|
||||
<Link to={tag} className="post-single__tags-list-item-link">
|
||||
{post.frontmatter.tags[i]}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{homeBlock}
|
||||
<div className="post-single">
|
||||
<div className="post-single__inner">
|
||||
<h1 className="post-single__title">{post.frontmatter.title}</h1>
|
||||
<div className="post-single__body" dangerouslySetInnerHTML={{ __html: post.html }} />
|
||||
<div className="post-single__date">
|
||||
<em>Published {moment(post.frontmatter.date).format('D MMM YYYY')}</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className="post-single__footer">
|
||||
{tagsBlock}
|
||||
<hr />
|
||||
<p className="post-single__footer-text">
|
||||
{subtitle}
|
||||
<a href={author.twitter} target="_blank" rel="noopener noreferrer">
|
||||
<br /> <strong>{author.name}</strong> on Twitter
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PostTemplateDetails.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
author: PropTypes.object.isRequired
|
||||
})
|
||||
}),
|
||||
markdownRemark: PropTypes.object.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
export default PostTemplateDetails;
|
||||
166
src/components/PostTemplateDetails/style.scss
Normal file
166
src/components/PostTemplateDetails/style.scss
Normal file
@ -0,0 +1,166 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.post-single {
|
||||
&__inner {
|
||||
max-width: $layout-post-single-max-width;
|
||||
padding: 0 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&__title {
|
||||
font-size: $typographic-base-font-size * 2;
|
||||
max-width: $layout-post-single-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
@include line-height(1.65);
|
||||
@include margin-top(1);
|
||||
@include margin-bottom(0);
|
||||
}
|
||||
&__body {
|
||||
& figure {
|
||||
@include margin-bottom(1);
|
||||
& blockquote {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
@include padding(1, 0);
|
||||
& p {
|
||||
max-width: $layout-post-single-width;
|
||||
font-size: $typographic-base-font-size * 1.6817;
|
||||
margin-top: 0;
|
||||
@include margin-bottom(1);
|
||||
@include line-height(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
& .gatsby-highlight {
|
||||
max-width: $layout-post-single-width;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
@include margin-bottom(1);
|
||||
}
|
||||
& :not(div) {
|
||||
max-width: $layout-post-single-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
max-width: $layout-post-single-width;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
@include line-height(1);
|
||||
@include margin-top(1);
|
||||
@include margin-bottom(2);
|
||||
&-text {
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__date {
|
||||
max-width: $layout-post-single-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
&__tags {
|
||||
@include margin-bottom(.5);
|
||||
&-list {
|
||||
list-style: none;
|
||||
margin: 0 -5px;
|
||||
padding: 0;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin: 10px 5px;
|
||||
&-link {
|
||||
background: $color-gray-bg;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: lighten($color-base, 20%);
|
||||
line-height: $typographic-base-line-height;
|
||||
padding: 8px 16px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-base;
|
||||
background: darken($color-gray-bg, 5%);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__home-button {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 90px;
|
||||
font-size: $typographic-base-font-size;
|
||||
padding: 0 16px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: lighten($color-base, 20%);
|
||||
background: $color-gray-bg;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
@include margin-top(1);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-base;
|
||||
background: darken($color-gray-bg, 5%);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-sm {
|
||||
.post-single {
|
||||
&__footer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
&__body {
|
||||
& .gatsby-highlight {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-md {
|
||||
.post-single {
|
||||
&__inner {
|
||||
padding: 0;
|
||||
}
|
||||
&__title {
|
||||
font-size: $typographic-base-font-size * 3;
|
||||
@include line-height(2.25);
|
||||
@include margin-top(2.25);
|
||||
@include margin-bottom(1.5);
|
||||
}
|
||||
&__body {
|
||||
font-size: $typographic-base-font-size * 1.125;
|
||||
@include line-height(1.125);
|
||||
@include margin-bottom(1.125);
|
||||
& p {
|
||||
font-size: $typographic-base-font-size * 1.125;
|
||||
@include line-height(1.125);
|
||||
@include margin-bottom(1.125);
|
||||
}
|
||||
}
|
||||
&__home-button {
|
||||
position: fixed;
|
||||
max-width: auto;
|
||||
margin: 0;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
src/components/Sidebar/index.jsx
Normal file
74
src/components/Sidebar/index.jsx
Normal file
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import get from 'lodash/get';
|
||||
import Link from 'gatsby-link';
|
||||
import Menu from '../Menu';
|
||||
import Links from '../Links';
|
||||
import profilePic from '../../pages/photo.jpg';
|
||||
import './style.scss';
|
||||
|
||||
class Sidebar extends React.Component {
|
||||
render() {
|
||||
const { location } = this.props;
|
||||
const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
|
||||
const isHomePage = get(location, 'pathname', '/') === '/';
|
||||
|
||||
/* eslint-disable jsx-a11y/img-redundant-alt*/
|
||||
const authorBlock = (
|
||||
<div>
|
||||
<Link to="/">
|
||||
<img
|
||||
src={profilePic}
|
||||
className="sidebar__author-photo"
|
||||
width="75" height="75"
|
||||
alt={author.name}
|
||||
/>
|
||||
</Link>
|
||||
{ isHomePage ? (
|
||||
<h1 className="sidebar__author-title">
|
||||
<Link className="sidebar__author-title-link" to="/">{author.name}</Link>
|
||||
</h1>
|
||||
) :
|
||||
<h2 className="sidebar__author-title">
|
||||
<Link className="sidebar__author-title-link" to="/">{author.name}</Link>
|
||||
</h2>
|
||||
}
|
||||
<p className="sidebar__author-subtitle">{subtitle}</p>
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable jsx-a11y/img-redundant-alt*/
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<div className="sidebar__inner">
|
||||
<div className="sidebar__author">
|
||||
{authorBlock}
|
||||
</div>
|
||||
<div>
|
||||
<Menu data={menu} />
|
||||
<Links data={author} />
|
||||
<p className="sidebar__copyright">
|
||||
{copyright}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Sidebar.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
author: PropTypes.object.isRequired,
|
||||
copyright: PropTypes.string.isRequired,
|
||||
menu: PropTypes.array.isRequired
|
||||
})
|
||||
})
|
||||
}),
|
||||
location: PropTypes.object
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
69
src/components/Sidebar/style.scss
Normal file
69
src/components/Sidebar/style.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@import "../../assets/scss/variables";
|
||||
@import "../../assets/scss/mixins";
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
&__inner {
|
||||
position: relative;
|
||||
padding: 25px 20px 0;
|
||||
}
|
||||
&__author {
|
||||
&-photo {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
&-title {
|
||||
font-size: $typographic-base-font-size * 1.125;
|
||||
font-weight: 500;
|
||||
@include line-height(1.125);
|
||||
@include margin(.5, 0, .5, 0);
|
||||
&-link {
|
||||
color: $color-base;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-subtitle {
|
||||
color: $color-gray;
|
||||
@include line-height(1);
|
||||
@include margin-bottom(1);
|
||||
}
|
||||
}
|
||||
&__copyright {
|
||||
color: lighten($color-gray, 18%);
|
||||
font-size: $typographic-small-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-sm {
|
||||
.sidebar {
|
||||
lost-column: 5/12;
|
||||
&__inner {
|
||||
padding: 30px 20px 0;
|
||||
&:after {
|
||||
background: $color-gray-border;
|
||||
background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 540px;
|
||||
top: 30px;
|
||||
right: -10px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint-md {
|
||||
.sidebar {
|
||||
lost-column: 1/3;
|
||||
&__inner {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/components/TagTemplateDetails/index.jsx
Normal file
44
src/components/TagTemplateDetails/index.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Post from '../Post';
|
||||
|
||||
class TagTemplateDetails extends React.Component {
|
||||
render() {
|
||||
const items = [];
|
||||
const tagTitle = this.props.pathContext.tag;
|
||||
const posts = this.props.data.allMarkdownRemark.edges;
|
||||
posts.forEach((post) => {
|
||||
items.push(
|
||||
<Post data={post} key={post.node.fields.slug} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">
|
||||
All Posts tagget as "{tagTitle}"
|
||||
</h1>
|
||||
<div className="page__body">
|
||||
{items}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TagTemplateDetails.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
allMarkdownRemark: PropTypes.shape({
|
||||
edges: PropTypes.array.isRequired
|
||||
})
|
||||
}),
|
||||
pathContext: PropTypes.shape({
|
||||
tag: PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
export default TagTemplateDetails;
|
||||
57
src/html.js
Normal file
57
src/html.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class HTML extends React.Component {
|
||||
render() {
|
||||
const { postBodyComponents, headComponents, body } = this.props;
|
||||
let styles;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
try {
|
||||
// eslint-disable-next-line import/no-webpack-loader-syntax
|
||||
styles = require('!raw-loader!../public/styles.css');
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
let css;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
css = (
|
||||
<style
|
||||
id="gatsby-inlined-css"
|
||||
dangerouslySetInnerHTML={{ __html: styles }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
{headComponents}
|
||||
{css}
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="___gatsby"
|
||||
dangerouslySetInnerHTML={{ __html: body }}
|
||||
/>
|
||||
{postBodyComponents}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
postBodyComponents: PropTypes.node.isRequired,
|
||||
headComponents: PropTypes.node.isRequired,
|
||||
body: PropTypes.node.isRequired
|
||||
};
|
||||
|
||||
export default HTML;
|
||||
24
src/layouts/index.jsx
Normal file
24
src/layouts/index.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Helmet from 'react-helmet';
|
||||
import 'typeface-roboto';
|
||||
import '../assets/scss/init.scss';
|
||||
|
||||
class Layout extends React.Component {
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<Helmet defaultTitle="Blog by John Doe" />
|
||||
{children()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
children: PropTypes.func
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
49
src/pages/404.jsx
Normal file
49
src/pages/404.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
class NotFoundRoute extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Sidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">NOT FOUND</h1>
|
||||
<div className="page__body">
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NotFoundRoute;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query NotFoundQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
copyright
|
||||
menu {
|
||||
label
|
||||
path
|
||||
}
|
||||
author {
|
||||
name
|
||||
email
|
||||
telegram
|
||||
twitter
|
||||
github
|
||||
rss
|
||||
vk
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 821 KiB |
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Perfecting the Art of Perfection
|
||||
date: "2016-09-01T23:46:37.121Z"
|
||||
layout: post
|
||||
draft: false
|
||||
path: "/posts/perfecting-the-art-of-perfection/"
|
||||
category: "Design Inspiration"
|
||||
tags:
|
||||
- "Handwriting"
|
||||
- "Learning to write"
|
||||
description: "Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum."
|
||||
---
|
||||
|
||||
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
|
||||
|
||||
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
|
||||
|
||||
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 948 KiB |
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: The Origins of Social Stationery Lettering
|
||||
date: "2016-12-01T22:40:32.169Z"
|
||||
layout: post
|
||||
draft: false
|
||||
path: "/posts/the-origins-of-social-stationery-lettering"
|
||||
category: "Design Culture"
|
||||
tags:
|
||||
- "Typefaces"
|
||||
- "Lettering"
|
||||
- "History"
|
||||
description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante."
|
||||
---
|
||||
|
||||
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
|
||||
|
||||
|
||||
|
||||
## Header Level 2
|
||||
|
||||
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
+ Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
||||
<footer>
|
||||
<cite>— Aliquam tincidunt mauris eu risus.</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
### Header Level 3
|
||||
|
||||
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
+ Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
```css
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "A Brief History of Typography"
|
||||
date: "2016-02-02T22:40:32.169Z"
|
||||
layout: post
|
||||
draft: false
|
||||
path: "/posts/a-brief-history-of-typography/"
|
||||
category: "Design Inspiration"
|
||||
tags:
|
||||
- "Linotype"
|
||||
- "Monotype"
|
||||
- "History of typography"
|
||||
- "Helvetica"
|
||||
description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."
|
||||
---
|
||||
|
||||
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. *Aenean ultricies mi vitae est.* Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
|
||||
|
||||
|
||||
|
||||
## Header Level 2
|
||||
|
||||
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
+ Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
||||
<footer>
|
||||
<cite>— Aliquam tincidunt mauris eu risus.</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
### Header Level 3
|
||||
|
||||
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
+ Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
```css
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 319 KiB After Width: | Height: | Size: 319 KiB |
@ -1,16 +1,23 @@
|
||||
---
|
||||
title: "The Birth of Movable Type"
|
||||
date: "2016-03-01T22:12:03.284Z"
|
||||
title: "Johannes Gutenberg: The Birth of Movable Type"
|
||||
date: "2017-08-18T22:12:03.284Z"
|
||||
layout: post
|
||||
path: "/hello-world/"
|
||||
category: "Typography TESTS"
|
||||
draft: false
|
||||
path: "/posts/the-birth-of-movable-type/"
|
||||
category: "Typography"
|
||||
tags:
|
||||
- "Open source"
|
||||
- "Gatsby"
|
||||
- "Typography"
|
||||
description: "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible."
|
||||
---
|
||||
|
||||
Johannes Gensfleisch zur Laden zum Gutenberg (c. 1398 – 1468) was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe. His invention of mechanical movable type printing started the Printing Revolution and is widely regarded as the most important event of the modern period. It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the Scientific revolution and laid the material basis for the modern knowledge-based economy and the spread of learning to the masses.
|
||||
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
|
||||
|
||||
<figure class="floatRight">
|
||||
<img style="height: 310px;" src="./Gutenberg.jpg" alt="Gutenberg">
|
||||
**Johannes Gensfleisch zur Laden zum Gutenberg** (c. 1398 – 1468) was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe. His invention of mechanical movable type printing started the Printing Revolution and is widely regarded as the most important event of the modern period. It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the Scientific revolution and laid the material basis for the modern knowledge-based economy and the spread of learning to the masses.
|
||||
|
||||
<figure class="float-right" style="width: 240px">
|
||||
<img src="./Gutenberg.jpg" alt="Gutenberg">
|
||||
<figcaption>Johannes Gutenberg</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -26,8 +33,8 @@ His major work, the Gutenberg Bible (also known as the 42-line Bible), has been
|
||||
|
||||
Around 1439, Gutenberg was involved in a financial misadventure making polished metal mirrors (which were believed to capture holy light from religious relics) for sale to pilgrims to Aachen: in 1439 the city was planning to exhibit its collection of relics from Emperor Charlemagne but the event was delayed by one year due to a severe flood and the capital already spent could not be repaid. When the question of satisfying the investors came up, Gutenberg is said to have promised to share a “secret”. It has been widely speculated that this secret may have been the idea of printing with movable type. Also around 1439–1440, the Dutch Laurens Janszoon Coster came up with the idea of printing. Legend has it that the idea came to him “like a ray of light”.
|
||||
|
||||
<figure class="floatLeft">
|
||||
<img style="height: 310px;" src="./Printing-press.png" alt="Early Printing Press">
|
||||
<figure class="float-left" style="width: 240px">
|
||||
<img src="./Printing-press.png" alt="Early Printing Press">
|
||||
<figcaption>Early wooden printing press as depicted in 1568.</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -35,9 +42,14 @@ Until at least 1444 he lived in Strasbourg, most likely in the St. Arbogast pari
|
||||
|
||||
By 1450, the press was in operation, and a German poem had been printed, possibly the first item to be printed there. Gutenberg was able to convince the wealthy moneylender Johann Fust for a loan of 800 guilders. Peter Schöffer, who became Fust’s son-in-law, also joined the enterprise. Schöffer had worked as a scribe in Paris and is believed to have designed some of the first typefaces.
|
||||
|
||||
>All that has been written to me about that marvelous man seen at Frankfurt is true. I have not seen complete Bibles but only a number of quires of various books of the Bible. The script was very neat and legible, not at all difficult to follow—your grace would be able to read it without effort, and indeed without glasses.
|
||||
|
||||
—Future pope Pius II in a letter to Cardinal Carvajal, March 1455
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>All that has been written to me about that marvelous man seen at Frankfurt is true. I have not seen complete Bibles but only a number of quires of various books of the Bible. The script was very neat and legible, not at all difficult to follow—your grace would be able to read it without effort, and indeed without glasses.</p>
|
||||
<footer>
|
||||
<cite>—Future pope Pius II in a letter to Cardinal Carvajal, March 1455</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
Gutenberg's workshop was set up at Hof Humbrecht, a property belonging to a distant relative. It is not clear when Gutenberg conceived the Bible project, but for this he borrowed another 800 guilders from Fust, and work commenced in 1452. At the same time, the press was also printing other, more lucrative texts (possibly Latin grammars). There is also some speculation that there may have been two presses, one for the pedestrian texts, and one for the Bible. One of the profit-making enterprises of the new press was the printing of thousands of indulgences for the church, documented from 1454–55.
|
||||
|
||||
@ -94,16 +106,4 @@ A 1568 history by Hadrianus Junius of Holland claims that the basic idea of the
|
||||
|
||||
The 19th century printer and typefounder Fournier Le Jeune suggested that Gutenberg might not have been using type cast with a reusable matrix, but possibly wooden types that were carved individually. A similar suggestion was made by Nash in 2004. This remains possible, albeit entirely unproven.
|
||||
|
||||
It has also been questioned whether Gutenberg used movable types at all. In 2004, Italian professor Bruno Fabbiani claimed that examination of the 42-line Bible revealed an overlapping of letters, suggesting that Gutenberg did not in fact use movable type (individual cast characters) but rather used whole plates made from a system somewhat like a modern typewriter, whereby the letters were stamped successively into the plate and then printed. However, most specialists regard the occasional overlapping of type as caused by paper movement over pieces of type of slightly unequal height.
|
||||
|
||||
## Legacy
|
||||
|
||||
Although Gutenberg was financially unsuccessful in his lifetime, the printing technologies spread quickly, and news and books began to travel across Europe much faster than before. It fed the growing Renaissance, and since it greatly facilitated scientific publishing, it was a major catalyst for the later scientific revolution.
|
||||
|
||||
The capital of printing in Europe shifted to Venice, where visionary printers like Aldus Manutius ensured widespread availability of the major Greek and Latin texts. The claims of an Italian origin for movable type have also focused on this rapid rise of Italy in movable-type printing. This may perhaps be explained by the prior eminence of Italy in the paper and printing trade. Additionally, Italy's economy was growing rapidly at the time, facilitating the spread of literacy. Christopher Columbus had a geographical book (printed by movable types) bought by his father. That book is in a Spanish museum. Finally, the city of Mainz was sacked in 1462, driving many (including a number of printers and punch cutters) into exile.
|
||||
|
||||
Printing was also a factor in the Reformation. Martin Luther's 95 Theses were printed and circulated widely; subsequently he issued broadsheets outlining his anti-indulgences position (certificates of indulgences were one of the first items Gutenberg had printed). The broadsheet contributed to development of the newspaper.
|
||||
|
||||
In the decades after Gutenberg, many conservative patrons looked down on cheap printed books; books produced by hand were considered more desirable.
|
||||
|
||||
Today there is a large antique market for the earliest printed objects. Books printed prior to 1500 are known as incunabula.
|
||||
It has also been questioned whether Gutenberg used movable types at all. In 2004, Italian professor Bruno Fabbiani claimed that examination of the 42-line Bible revealed an overlapping of letters, suggesting that Gutenberg did not in fact use movable type (individual cast characters) but rather used whole plates made from a system somewhat like a modern typewriter, whereby the letters were stamped successively into the plate and then printed. However, most specialists regard the occasional overlapping of type as caused by paper movement over pieces of type of slightly unequal height.
|
||||
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
@ -0,0 +1,74 @@
|
||||
---
|
||||
title: Humane Typography in the Digital Age
|
||||
date: "2017-08-19T22:40:32.169Z"
|
||||
layout: post
|
||||
draft: false
|
||||
path: "/posts/humane-typography-in-the-digital-age/"
|
||||
category: "Typography"
|
||||
tags:
|
||||
- "Design"
|
||||
- "Typography"
|
||||
- "Web Development"
|
||||
description: "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts."
|
||||
---
|
||||
|
||||
An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.
|
||||
|
||||
The typography of this industrial age was no longer handcrafted. Mass production and profit became more important. Quantity mattered more than the quality. The books and printed works in general lost a part of its humanity. The typefaces were not produced by craftsmen anymore. It was the machines printing and tying the books together now. The craftsmen had to let go of their craft and became a cog in the process. An extension of the industrial machine.
|
||||
|
||||
But the victory of the industrialism didn’t mean that the craftsmen were completely extinct. The two worlds continued to coexist independently. Each recognising the good in the other — the power of industrialism and the humanity of craftsmanship. This was the second transition that would strip typography of a part of its humanity. We have to go 500 years back in time to meet the first one.
|
||||
|
||||
## The first transition
|
||||
|
||||
A similar conflict emerged after the invention of the first printing press in Europe. Johannes Gutenberg invented movable type and used it to produce different compositions. His workshop could print up to 240 impressions per hour. Until then, the books were being copied by hand. All the books were handwritten and decorated with hand drawn ornaments and figures. A process of copying a book was long but each book, even a copy, was a work of art.
|
||||
|
||||
The first printed books were, at first, perceived as inferior to the handwritten ones. They were smaller and cheaper to produce. Movable type provided the printers with flexibility that allowed them to print books in languages other than Latin. Gill describes the transition to industrialism as something that people needed and wanted. Something similar happened after the first printed books emerged. People wanted books in a language they understood and they wanted books they could take with them. They were hungry for knowledge and printed books satisfied this hunger.
|
||||
|
||||
|
||||
|
||||
*The 42–Line Bible, printed by Gutenberg.*
|
||||
|
||||
But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.
|
||||
|
||||
## The digital age
|
||||
|
||||
The first transition took away a large part of humanity from written communication. Industrialisation, the second transition described by Eric Gill, took away most of what was left. But it’s the third transition that stripped it naked. Typefaces are faceless these days. They’re just fonts on our computers. Hardly anyone knows their stories. Hardly anyone cares. Flicking through thousands of typefaces and finding the “right one” is a matter of minutes.
|
||||
|
||||
> In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.
|
||||
>
|
||||
— Massimo Vignelli
|
||||
|
||||
Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.
|
||||
|
||||
## Loss of humanity through transitions
|
||||
|
||||
Each transition took away a part of humanity from written language. Handwritten books being the most humane form and the digital typefaces being the least. Overuse of Helvetica is a good example. Messages are being told in a typeface just because it’s a safe option. It’s always there. Everyone knows it but yet, nobody knows it. Stop someone on the street and ask him what Helvetica is? Ask a designer the same question. Ask him where it came from, when, why and who designed it. Most of them will fail to answer these questions. Most of them used it in their precious projects but they still don’t spot it in the street.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect.</p>
|
||||
<footer>
|
||||
<cite>— Josef Mueller-Brockmann</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
Typefaces don’t look handmade these days. And that’s all right. They don’t have to. Industrialism took that away from them and we’re fine with it. We’ve traded that part of humanity for a process that produces more books that are easier to read. That can’t be bad. And it isn’t.
|
||||
|
||||
> Humane typography will often be comparatively rough and even uncouth; but while a certain uncouthness does not seriously matter in humane works, uncouthness has no excuse whatever in the productions of the machine.
|
||||
>
|
||||
> — Eric Gill
|
||||
|
||||
We’ve come close to “perfection” in the last five centuries. The letters are crisp and without rough edges. We print our compositions with high–precision printers on a high quality, machine made paper.
|
||||
|
||||
|
||||
|
||||
*Type through 5 centuries.*
|
||||
|
||||
We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.
|
||||
|
||||
## Chasing perfection
|
||||
|
||||
Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?
|
||||
|
||||
*Originally published by [Matej Latin](http://matejlatin.co.uk/) on [Medium](https://medium.com/design-notes/humane-typography-in-the-digital-age-9bd5c16199bd?ref=webdesignernews.com#.lygo82z0x).*
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
89
src/pages/categories.jsx
Normal file
89
src/pages/categories.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'gatsby-link';
|
||||
import Helmet from 'react-helmet';
|
||||
import kebabCase from 'lodash/kebabCase';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
class CategoriesRoute extends React.Component {
|
||||
render() {
|
||||
const { title } = this.props.data.site.siteMetadata;
|
||||
const categories = this.props.data.allMarkdownRemark.group;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet title={`All Categories - ${title}`} />
|
||||
<Sidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">Categories</h1>
|
||||
<div className="page__body">
|
||||
<div className="categories">
|
||||
<ul className="categories__list">
|
||||
{categories.map(category =>
|
||||
<li key={category.fieldValue} className="categories__list-item">
|
||||
<Link to={`/categories/${kebabCase(category.fieldValue)}/`} className="categories__list-item-link">
|
||||
{category.fieldValue} ({category.totalCount})
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CategoriesRoute.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired
|
||||
})
|
||||
}),
|
||||
allMarkdownRemark: PropTypes.shape({
|
||||
group: PropTypes.array.isRequired
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
export default CategoriesRoute;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query CategoryesQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
copyright
|
||||
menu {
|
||||
label
|
||||
path
|
||||
}
|
||||
author {
|
||||
name
|
||||
email
|
||||
telegram
|
||||
twitter
|
||||
github
|
||||
rss
|
||||
vk
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 2000
|
||||
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
|
||||
) {
|
||||
group(field: frontmatter___category) {
|
||||
fieldValue
|
||||
totalCount
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
94
src/pages/index.jsx
Normal file
94
src/pages/index.jsx
Normal file
@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Helmet from 'react-helmet';
|
||||
import Post from '../components/Post';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
class IndexRoute extends React.Component {
|
||||
render() {
|
||||
const items = [];
|
||||
const { title, subtitle } = this.props.data.site.siteMetadata;
|
||||
const posts = this.props.data.allMarkdownRemark.edges;
|
||||
posts.forEach((post) => {
|
||||
items.push(
|
||||
<Post data={post} key={post.node.fields.slug} />
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={subtitle} />
|
||||
</Helmet>
|
||||
<Sidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
{items}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
IndexRoute.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
subtitle: PropTypes.string.isRequired
|
||||
})
|
||||
}),
|
||||
allMarkdownRemark: PropTypes.shape({
|
||||
edges: PropTypes.array.isRequired
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
export default IndexRoute;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query IndexQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
copyright
|
||||
menu {
|
||||
label
|
||||
path
|
||||
}
|
||||
author {
|
||||
name
|
||||
email
|
||||
telegram
|
||||
twitter
|
||||
github
|
||||
rss
|
||||
vk
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 1000,
|
||||
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } },
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
){
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
category
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
BIN
src/pages/pages/2015-05-01---about/1.jpg
Normal file
BIN
src/pages/pages/2015-05-01---about/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
13
src/pages/pages/2015-05-01---about/index.md
Normal file
13
src/pages/pages/2015-05-01---about/index.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: "About me"
|
||||
layout: page
|
||||
path: "/about"
|
||||
---
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
|
||||
|
||||
|
||||
|
||||
*Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.*
|
||||
|
||||
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
|
||||
BIN
src/pages/pages/2015-05-01---contact/1.jpg
Normal file
BIN
src/pages/pages/2015-05-01---contact/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
31
src/pages/pages/2015-05-01---contact/index.md
Normal file
31
src/pages/pages/2015-05-01---contact/index.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "Contact me"
|
||||
layout: page
|
||||
path: "/contact"
|
||||
---
|
||||
|
||||
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
|
||||
|
||||
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
|
||||
|
||||
|
||||
*Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.*
|
||||
|
||||
## Header Level 2
|
||||
|
||||
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
|
||||
+ **Lorem ipsum** dolor sit amet, consectetuer adipiscing elit.
|
||||
+ Aliquam tincidunt mauris eu risus.
|
||||
+ Vestibulum auctor dapibus neque.
|
||||
|
||||
### Header Level 3
|
||||
|
||||
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec **consectetuer** ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
|
||||
|
||||
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
|
||||
|
||||
#### Header Level 4
|
||||
|
||||
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
89
src/pages/tags.jsx
Normal file
89
src/pages/tags.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Link from 'gatsby-link';
|
||||
import Helmet from 'react-helmet';
|
||||
import kebabCase from 'lodash/kebabCase';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
class TagsRoute extends React.Component {
|
||||
render() {
|
||||
const { title } = this.props.data.site.siteMetadata;
|
||||
const tags = this.props.data.allMarkdownRemark.group;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet title={`All Tags - ${title}`} />
|
||||
<Sidebar {...this.props} />
|
||||
<div className="content">
|
||||
<div className="content__inner">
|
||||
<div className="page">
|
||||
<h1 className="page__title">Tags</h1>
|
||||
<div className="page__body">
|
||||
<div className="tags">
|
||||
<ul className="tags__list">
|
||||
{tags.map(tag =>
|
||||
<li key={tag.fieldValue} className="tags__list-item">
|
||||
<Link to={`/tags/${kebabCase(tag.fieldValue)}/`} className="tags__list-item-link">
|
||||
{tag.fieldValue} ({tag.totalCount})
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TagsRoute.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired
|
||||
})
|
||||
}),
|
||||
allMarkdownRemark: PropTypes.shape({
|
||||
group: PropTypes.array.isRequired
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
export default TagsRoute;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query TagsQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
copyright
|
||||
menu {
|
||||
label
|
||||
path
|
||||
}
|
||||
author {
|
||||
name
|
||||
email
|
||||
telegram
|
||||
twitter
|
||||
github
|
||||
rss
|
||||
vk
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 2000
|
||||
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } }
|
||||
) {
|
||||
group(field: frontmatter___tags) {
|
||||
fieldValue
|
||||
totalCount
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
80
src/templates/category-template.js
Normal file
80
src/templates/category-template.js
Normal file
@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Helmet from 'react-helmet';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import CategoryTemplateDetails from '../components/CategoryTemplateDetails';
|
||||
|
||||
class CategoryTemplate extends React.Component {
|
||||
render() {
|
||||
const { title } = this.props.data.site.siteMetadata;
|
||||
const { category } = this.props.pathContext;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet title={`${category} - ${title}`} />
|
||||
<Sidebar {...this.props} />
|
||||
<CategoryTemplateDetails {...this.props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CategoryTemplate.propTypes = {
|
||||
data: PropTypes.shape({
|
||||
site: PropTypes.shape({
|
||||
siteMetadata: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired
|
||||
})
|
||||
})
|
||||
}),
|
||||
pathContext: PropTypes.shape({
|
||||
category: PropTypes.string.isRequired
|
||||
})
|
||||
};
|
||||
|
||||
export default CategoryTemplate;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query CategoryPage($category: String) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
copyright
|
||||
menu {
|
||||
label
|
||||
path
|
||||
}
|
||||
author {
|
||||
name
|
||||
email
|
||||
telegram
|
||||
twitter
|
||||
github
|
||||
rss
|
||||
vk
|
||||
}
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: 1000,
|
||||
filter: { frontmatter: { category: { eq: $category }, layout: { eq: "post" }, draft: { ne: true } } },
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
){
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
category
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user