├── src
    ├── saber-browser.js
    ├── utils
    │   ├── getSvg.js
    │   └── formatDate.js
    ├── layouts
    │   ├── page.vue
    │   ├── post.vue
    │   └── default.vue
    ├── components
    │   ├── Disqus.vue
    │   ├── Footer.vue
    │   ├── Header.vue
    │   ├── Wrap.vue
    │   └── Social.vue
    ├── styles
    │   ├── minima.scss
    │   ├── _base.scss
    │   └── _layout.scss
    └── svg
    │   └── minima-social-icons.svg
├── .gitignore
├── .prettierrc
├── example
    ├── pages
    │   ├── index.md
    │   ├── about.md
    │   └── _posts
    │   │   ├── super-short-article.md
    │   │   ├── my-example-post.md
    │   │   └── super-long-article.md
    └── saber-config.yml
├── .circleci
    └── config.yml
├── package.json
└── README.md


/src/saber-browser.js:
--------------------------------------------------------------------------------
1 | import './styles/minima.scss'
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .saber
3 | dist
4 | *.log
5 | .DS_Store


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }


--------------------------------------------------------------------------------
/src/utils/getSvg.js:
--------------------------------------------------------------------------------
1 | import svg from '../svg/minima-social-icons.svg'
2 | 
3 | export default id => `${svg}#${id}`


--------------------------------------------------------------------------------
/example/pages/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | # Inject post list as `page.posts` (by saber-plugin-query-posts)
4 | injectAllPosts: true
5 | ---
6 | 


--------------------------------------------------------------------------------
/src/utils/formatDate.js:
--------------------------------------------------------------------------------
1 | import tinydate from 'tinydate'
2 | 
3 | const format = tinydate('{YYYY}-{MM}-{DD}')
4 | 
5 | export default date => {
6 |   return (date instanceof Date) ? format(date) : format(new Date(date))
7 | }


--------------------------------------------------------------------------------
/example/pages/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About
3 | layout: page
4 | ---
5 | 
6 | This is the Saber port of the base Jekyll theme. Check out the [GitHub project](https://github.com/egoist/saber-theme-minima) for detailed usages.
7 | 
8 | You can find out more info about customizing your theme, as well as basic Saber usage documentation at https://saberjs.org


--------------------------------------------------------------------------------
/src/layouts/page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Wrap :page="page">
 3 |     <article class="post">
 4 |       <header class="post-header">
 5 |         <h1 class="post-title">{{ page.title }}</h1>
 6 |       </header>
 7 | 
 8 |       <div class="post-content">
 9 |         <slot name="default"></slot>
10 |       </div>
11 |     </article>
12 |   </Wrap>
13 | </template>
14 | 
15 | <script>
16 | import Wrap from '../components/Wrap.vue'
17 | 
18 | export default {
19 |   components: {
20 |     Wrap
21 |   },
22 | 
23 |   props: ['page']
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/example/pages/_posts/super-short-article.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Some articles are just so short that we have to make the footer stick'
3 | date: 2016-05-19
4 | layout: post
5 | ---
6 | 
7 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8 | 


--------------------------------------------------------------------------------
/example/pages/_posts/my-example-post.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: My Example Post
3 | date: 2016-05-20
4 | layout: post
5 | ---
6 | 
7 | Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.
8 | 
9 | No laudem altera adolescens has, volumus lucilius eum no. Eam ei nulla audiam efficiantur. Suas affert per no, ei tale nibh sea. Sea ne magna harum, in denique scriptorem sea, cetero alienum tibique ei eos. Labores persequeris referrentur eos ei.


--------------------------------------------------------------------------------
/example/saber-config.yml:
--------------------------------------------------------------------------------
 1 | theme: ../src
 2 | 
 3 | siteConfig:
 4 |   url: https://minima.saberjs.org
 5 |   author: Author of This Site
 6 |   email: author@your-domain.com
 7 |   description: Write an awesome description for your new site here. You can edit this line in saber-config.yml. It will appear in your document head meta (for Google search results) site description.
 8 | 
 9 | themeConfig:
10 |   nav:
11 |     - text: Home
12 |       link: /
13 |     - text: About
14 |       link: /about.html
15 |   social:
16 |     twitter: _saberjs
17 |     github: egoist
18 |     rss: true
19 |   disqus: saber-minima
20 | 
21 | plugins:
22 |   - resolve: saber-plugin-query-posts
23 |   - resolve: saber-plugin-feed
24 |     options: 
25 |       atomFeed: true


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node:latest
 6 |     branches:
 7 |       ignore:
 8 |         - gh-pages # list of branches to ignore
 9 |         - /release\/.*/ # or ignore regexes
10 |     steps:
11 |       - checkout
12 |       - restore_cache:
13 |           key: dependency-cache-{{ checksum "yarn.lock" }}
14 |       - run:
15 |           name: install dependences
16 |           command: yarn
17 |       - save_cache:
18 |           key: dependency-cache-{{ checksum "yarn.lock" }}
19 |           paths:
20 |             - ./node_modules
21 |       - run:
22 |           name: test
23 |           command: echo lol
24 |       - run:
25 |           name: release
26 |           command: npx semantic-release


--------------------------------------------------------------------------------
/src/components/Disqus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="disqus_thread"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     url: {
 9 |       type: String,
10 |       required: true
11 |     },
12 |     permalink: {
13 |       type: String,
14 |       required: true
15 |     },
16 |     shortname: {
17 |       type: String,
18 |       required: true
19 |     }
20 |   },
21 | 
22 |   mounted() {
23 |     const { permalink, url } = this
24 |     window.disqus_config = function() {
25 |       this.page.url = `${url}${permalink}`
26 |       this.page.identifier = permalink
27 |     }
28 |     const script = document.createElement('script')
29 |     script.async = true
30 |     script.src = `https://${
31 |       this.shortname
32 |     }.disqus.com/embed.js`
33 |     script.setAttribute('data-timestamp', +new Date())
34 |     document.body.appendChild(script)
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "saber-theme-minima",
 3 |   "version": "1.0.1",
 4 |   "license": "MIT",
 5 |   "files": [
 6 |     "dist"
 7 |   ],
 8 |   "scripts": {
 9 |     "build": "vue-compile src -o dist",
10 |     "prepublishOnly": "yarn build",
11 |     "dev:example": "saber example",
12 |     "build:example": "saber build example"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/saberland/saber-theme-minima.git"
17 |   },
18 |   "devDependencies": {
19 |     "saber": "^0.10.4",
20 |     "saber-plugin-feed": "^0.4.2",
21 |     "saber-plugin-query-posts": "^0.4.4",
22 |     "sass": "^1.22.12",
23 |     "sass-loader": "^8.0.0",
24 |     "vue-compile": "^0.6.0"
25 |   },
26 |   "dependencies": {
27 |     "tinydate": "^1.2.0"
28 |   },
29 |   "peerDependencies": {
30 |     "saber": "^0.10.4",
31 |     "saber-plugin-feed": "^0.4.2",
32 |     "saber-plugin-query-posts": "^0.4.4"
33 |   },
34 |   "keywords": [
35 |     "saber",
36 |     "saber-theme",
37 |     "minima",
38 |     "theme",
39 |     "egoist",
40 |     "clean",
41 |     "simple",
42 |     "jekyll"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="site-footer h-card">
 3 |     <div class="wrapper">
 4 |       <div class="footer-col-wrapper">
 5 |         <div class="footer-col one-half">
 6 |           <h2 class="footer-heading">{{ siteTitle }}</h2>
 7 |           <ul class="contact-list">
 8 |             <li class="p-name">{{ $siteConfig.author ? $siteConfig.author : siteTitle }}</li>
 9 |             <li v-if="$siteConfig.email">
10 |               <a class="u-email" :href="`mailto:${$siteConfig.email}`">{{ $siteConfig.email }}</a>
11 |             </li>
12 |           </ul>
13 |         </div>
14 | 
15 |         <div class="footer-col one-half">
16 |           <p>{{ $siteConfig.description }}</p>
17 |         </div>
18 | 
19 |         <div class="social-links">
20 |           <Social />
21 |         </div>
22 |       </div>
23 |     </div>
24 |   </footer>
25 | </template>
26 | 
27 | <script>
28 | import Social from './Social.vue'
29 | 
30 | export default {
31 |   components: {
32 |     Social
33 |   },
34 |   
35 |   props: {
36 |     siteTitle: {
37 |       type: String,
38 |       required: true
39 |     }
40 |   }
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/layouts/post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Wrap :page="page">
 3 |     <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 4 |       <header class="post-header">
 5 |         <h1 class="post-title p-name" itemprop="name headline">{{ page.title }}</h1>
 6 |         <p class="post-meta">
 7 |           <time
 8 |             class="dt-published"
 9 |             :datetime="page.createdAt"
10 |             itemprop="datePublished"
11 |           >{{ formatDate(page.createdAt) }}</time>
12 |         </p>
13 |       </header>
14 | 
15 |       <div class="post-content e-content" itemprop="articleBody">
16 |         <slot name="default"/>
17 |       </div>
18 | 
19 |       <Disqus 
20 |         v-if="page.comments !== false && $themeConfig.disqus" 
21 |         :url="$siteConfig.url" 
22 |         :permalink="page.permalink" 
23 |         :shortname="$themeConfig.disqus" 
24 |       />
25 | 
26 |       <a class="u-url" :href="page.permalink" hidden></a>
27 |     </article>
28 |   </Wrap>
29 | </template>
30 | 
31 | <script>
32 | import formatDate from '../utils/formatDate'
33 | import Wrap from '../components/Wrap.vue'
34 | import Disqus from '../components/Disqus.vue'
35 | 
36 | export default {
37 |   components: {
38 |     Wrap,
39 |     Disqus
40 |   },
41 | 
42 |   props: ['page'],
43 | 
44 |   methods: {
45 |     formatDate
46 |   }
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="site-header">
 3 |     <div class="wrapper">
 4 |       <saber-link class="site-title" rel="author" to="/">{{ siteTitle }}</saber-link>
 5 | 
 6 |       <nav class="site-nav">
 7 |         <input type="checkbox" id="nav-trigger" class="nav-trigger">
 8 |         <label for="nav-trigger">
 9 |           <span class="menu-icon">
10 |             <svg viewBox="0 0 18 15" width="18px" height="15px">
11 |               <path
12 |                 d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"
13 |               ></path>
14 |             </svg>
15 |           </span>
16 |         </label>
17 | 
18 |         <div class="trigger" v-if="$themeConfig.nav">
19 |           <saber-link
20 |             :key="index"
21 |             class="page-link"
22 |             v-for="(navItem, index) in $themeConfig.nav"
23 |             :to="navItem.link"
24 |           >{{ navItem.text }}</saber-link>
25 |         </div>
26 |       </nav>
27 |     </div>
28 |   </header>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   props: {
34 |     siteTitle: {
35 |       type: String,
36 |       required: true
37 |     }
38 |   }
39 | }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/styles/minima.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | // Define defaults for each variable.
 4 | 
 5 | $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 6 | $base-font-size:   16px !default;
 7 | $base-font-weight: 400 !default;
 8 | $small-font-size:  $base-font-size * 0.875 !default;
 9 | $base-line-height: 1.5 !default;
10 | 
11 | $spacing-unit:     30px !default;
12 | 
13 | $text-color:       #111 !default;
14 | $background-color: #fdfdfd !default;
15 | $brand-color:      #2a7ae2 !default;
16 | 
17 | $grey-color:       #828282 !default;
18 | $grey-color-light: lighten($grey-color, 40%) !default;
19 | $grey-color-dark:  darken($grey-color, 25%) !default;
20 | $orange-color:     #f66a0a !default;
21 | $table-text-align: left !default;
22 | 
23 | // Width of the content area
24 | $content-width:    800px !default;
25 | 
26 | $on-palm:          600px !default;
27 | $on-laptop:        800px !default;
28 | 
29 | $on-medium:        $on-palm !default;
30 | $on-large:         $on-laptop !default;
31 | 
32 | // Use media queries like this:
33 | // @include media-query($on-palm) {
34 | //   .wrapper {
35 | //     padding-right: $spacing-unit / 2;
36 | //     padding-left: $spacing-unit / 2;
37 | //   }
38 | // }
39 | // Notice the following mixin uses max-width, in a deprecated, desktop-first
40 | // approach, whereas media queries used elsewhere now use min-width.
41 | @mixin media-query($device) {
42 |   @media screen and (max-width: $device) {
43 |     @content;
44 |   }
45 | }
46 | 
47 | @mixin relative-font-size($ratio) {
48 |   font-size: $base-font-size * $ratio;
49 | }
50 | 
51 | // Import partials.
52 | @import
53 |   "base",
54 |   "layout"
55 | ;


--------------------------------------------------------------------------------
/src/components/Wrap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Header :siteTitle="siteTitle"/>
 4 |     <main class="page-content" aria-label="Content">
 5 |       <div class="wrapper">
 6 |         <slot></slot>
 7 |       </div>
 8 |     </main>
 9 |     <Footer :siteTitle="siteTitle"/>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import variables from 'saber/variables'
15 | import Header from './Header.vue'
16 | import Footer from './Footer.vue'
17 | 
18 | export default {
19 |   components: {
20 |     Header,
21 |     Footer
22 |   },
23 | 
24 |   props: ['page'],
25 | 
26 |   head() {
27 |     const { excerpt } = this.page
28 |     const { title, layout } = this.page
29 |     let { description } = this.$siteConfig
30 |     if (layout === 'page' || layout === 'post') {
31 |       if (excerpt) {
32 |         description = excerpt.replace(/<(?:.|\n)*?>/gm, '')
33 |       }
34 |     }
35 |     return {
36 |       title: title ? `${title} - ${this.siteTitle}` : this.siteTitle,
37 |       meta: [
38 |         description && {
39 |           name: 'description',
40 |           content: description
41 |         }
42 |       ].filter(Boolean),
43 |       link: this.$feed
44 |         ? [
45 |             {
46 |               rel: 'alternate',
47 |               title: `${this.siteTitle} - Feed`,
48 |               type: `application/${
49 |                 this.$feed.type === 'atom'
50 |                   ? 'atom+xml'
51 |                   : this.$feed.type === 'rss'
52 |                   ? 'rss+xml'
53 |                   : 'json'
54 |               }`,
55 |               href: this.$feed.permalink
56 |             }
57 |           ].filter(Boolean)
58 |         : []
59 |     }
60 |   },
61 | 
62 |   computed: {
63 |     siteTitle() {
64 |       return this.$siteConfig.title || 'Your Awesome Title'
65 |     }
66 |   }
67 | }
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Wrap :page="page">
 3 |     <div class="home">
 4 |       <h1 class="page-heading" v-if="page.title">{{ page.title }}</h1>
 5 | 
 6 |       <slot name="default"></slot>
 7 | 
 8 |       <h2
 9 |         class="post-list-heading"
10 |         v-if="page.posts && page.posts.length > 0"
11 |       >{{ page.listTitle || 'Posts' }}</h2>
12 | 
13 |       <ul class="post-list" v-if="page.posts && page.posts.length > 0">
14 |         <li v-for="post in page.posts" :key="post.permalink">
15 |           <span class="post-meta">{{ formatDate(post.createdAt) }}</span>
16 |           <h3>
17 |             <saber-link
18 |               class="post-link"
19 |               :to="post.permalink"
20 |             >{{ post.title }}</saber-link>
21 |           </h3>
22 |         </li>
23 |       </ul>
24 | 
25 |       <div
26 |         class="pagination"
27 |         v-if="page.pagination && (page.pagination.hasNext || page.pagination.hasPrev)"
28 |       >
29 |         <router-link
30 |           class="prev-link"
31 |           :to="page.pagination.prevLink"
32 |           v-if="page.pagination.hasPrev"
33 |         >← Previous</router-link>
34 |         <router-link
35 |           class="next-link"
36 |           :to="page.pagination.nextLink"
37 |           v-if="page.pagination.hasNext"
38 |         >Next →</router-link>
39 |       </div>
40 | 
41 |       <p class="feed-subscribe" v-if="feedLink">
42 |         <svg class="svg-icon orange">
43 |           <use :xlink:href="getSvg('rss')"></use>
44 |         </svg>
45 |         <a :href="feedLink">Subscribe</a>
46 |       </p>
47 |     </div>
48 |   </Wrap>
49 | </template>
50 | 
51 | <script>
52 | import formatDate from '../utils/formatDate'
53 | import Wrap from '../components/Wrap.vue'
54 | import getSvg from '../utils/getSvg'
55 | 
56 | export default {
57 |   components: {
58 |     Wrap
59 |   },
60 | 
61 |   props: ['page'],
62 | 
63 |   computed: {
64 |     feedLink() {
65 |       return this.$feed && this.$feed.permalink
66 |     }
67 |   },
68 | 
69 |   methods: {
70 |     formatDate,
71 |     getSvg
72 |   }
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/example/pages/_posts/super-long-article.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Some articles are just so long they deserve a really long title to see if things will break well
 3 | layout: post
 4 | date: 2016-05-18
 5 | ---
 6 | 
 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
 8 | 
 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
10 | 
11 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # saber-theme-minima
  2 | 
  3 | [![npm](https://badgen.net/npm/v/saber-theme-minima)](https://npm.im/saber-theme-minima) [![circleci](https://badgen.net/circleci/github/saberland/saber-theme-minima/master)](https://circleci.com/gh/saberland/saber-theme-minima)
  4 | 
  5 | > A Saber Port of the Default Jekyll Theme: Minima
  6 | 
  7 | ## Install
  8 | 
  9 | ```bash
 10 | yarn add saber-theme-minima
 11 | ```
 12 | 
 13 | In your `saber-config.yml`:
 14 | 
 15 | ```yml
 16 | theme: minima
 17 | ```
 18 | 
 19 | This theme uses the following [Saber plugins](https://github.com/saberland/awesome-saber#plugins):
 20 | 
 21 | - `saber-plugin-query-posts`: Inject `posts` to homepage's `page` prop, generate tag pages.
 22 | - `saber-plugin-feed`: Generate RSS feed.
 23 | 
 24 | ```bash
 25 | yarn add saber-plugin-query-posts saber-plugin-feed
 26 | ```
 27 | 
 28 | ```yml
 29 | plugins:
 30 |   - resolve: saber-plugin-query-posts
 31 |   - resolve: saber-plugin-feed
 32 |     options:
 33 |       atomFeed: true
 34 | ```
 35 | 
 36 | ## Layouts
 37 | 
 38 | - `post`: For blog post pages.
 39 | - `page`: For normal pages.
 40 | - `default`: For any other pages like homepage and tag pages.
 41 | 
 42 | ## Site Config
 43 | 
 44 | Configure site title, description etc. in your `saber-config.yml`:
 45 | 
 46 | ```yml
 47 | siteConfig:
 48 |   title: My Site
 49 |   description: About this website..
 50 |   author: My Name
 51 |   email: my@email.com
 52 | ```
 53 | 
 54 | ## Theme Config
 55 | 
 56 | ### Navbar
 57 | 
 58 | Configure `nav` to show a set of links in header:
 59 | 
 60 | ```yml
 61 | themeConfig:
 62 |   nav:
 63 |     - text: Home
 64 |       link: /
 65 |     - text: About
 66 |       link: /about.html
 67 | ```
 68 | 
 69 | ### Social
 70 | 
 71 | Configure the accounts of your social network to show at the bottom of homepage:
 72 | 
 73 | ```yml
 74 | themeConfig:
 75 |   social:
 76 |     dribbble: username
 77 |     facebook: username
 78 |     flickr: username
 79 |     github: username
 80 |     instagram: username
 81 |     linkedin: username
 82 |     pinterest: username
 83 |     twitter: username
 84 |     youtube: username
 85 |     telegram: username
 86 |     microdotblog: username
 87 |     googleplus: username
 88 |     rss: true 
 89 | ```
 90 | 
 91 | ### Comments
 92 | 
 93 | You can use Disqus for comments:
 94 | 
 95 | ```yml
 96 | themeConfig:
 97 |   disqus: disqus-short-name
 98 | 
 99 | # Note that `siteConfig.url` is required for Disqus
100 | siteConfig:
101 |   url: https://example.com
102 | ```
103 | 
104 | Comments are only enabled for `post` layout, to disable comments in specific page, you can use the page attribute `comments`:
105 | 
106 | ```markdown
107 | ---
108 | title: Hello
109 | layout: post
110 | date: 2018-08-12
111 | comments: false
112 | ---
113 | 
114 | Hello World!
115 | ```
116 | 
117 | ## License
118 | 
119 | MIT.
120 | 


--------------------------------------------------------------------------------
/src/components/Social.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ul class="social-media-list">
  3 |     <li v-if="social.dribbble">
  4 |       <a :href="`https://dribbble.com/${social.dribbble}`" :title="social.dribbble">
  5 |         <svg class="svg-icon grey">
  6 |           <use :xlink:href="getSvg('dribbble')"></use>
  7 |         </svg>
  8 |       </a>
  9 |     </li>
 10 |     <li v-if="social.facebook">
 11 |       <a :href="`https://www.facebook.com/${social.facebook}`" :title="social.facebook">
 12 |         <svg class="svg-icon grey">
 13 |           <use :xlink:href="getSvg('facebook')"></use>
 14 |         </svg>
 15 |       </a> 
 16 |     </li>
 17 |     <li v-if="social.flickr">
 18 |       <a :href="`https://www.flickr.com/photos/${social.flickr}`" :title="social.flickr">
 19 |         <svg class="svg-icon grey">
 20 |           <use :xlink:href="getSvg('flickr')"></use>
 21 |         </svg>
 22 |       </a>
 23 |     </li>
 24 |     <li v-if="social.github">
 25 |       <a :href="`https://github.com/${social.github}`" :title="social.github">
 26 |         <svg class="svg-icon grey">
 27 |           <use :xlink:href="getSvg('github')"></use>
 28 |         </svg>
 29 |       </a>
 30 |     </li>
 31 |     <li v-if="social.instagram">
 32 |       <a :href="`https://www.instagram.com/${social.instagram}`" :title="social.instagram">
 33 |         <svg class="svg-icon grey">
 34 |           <use :xlink:href="getSvg('instagram')"></use>
 35 |         </svg>
 36 |       </a>
 37 |     </li>
 38 |     <li v-if="social.linkedin">
 39 |       <a :href="`https://www.linkedin.com/in/${social.linkedin}`" :title="social.linkedin">
 40 |         <svg class="svg-icon grey">
 41 |           <use :xlink:href="getSvg('linkedin')"></use>
 42 |         </svg>
 43 |       </a>
 44 |     </li>
 45 |     <li v-if="social.pinterest">
 46 |       <a :href="`https://www.pinterest.com/${social.pinterest}`" :title="social.pinterest">
 47 |         <svg class="svg-icon grey">
 48 |           <use :xlink:href="getSvg('pinterest')"></use>
 49 |         </svg>
 50 |       </a>
 51 |     </li>
 52 |     <li v-if="social.twitter">
 53 |       <a :href="`https://twitter.com/${social.twitter}`" :title="social.twitter">
 54 |         <svg class="svg-icon grey">
 55 |           <use :xlink:href="getSvg('twitter')"></use>
 56 |         </svg>
 57 |       </a>
 58 |     </li>
 59 |     <li v-if="social.youtube">
 60 |       <a :href="`https://www.youtube.com/user/${social.youtube}`" :title="social.youtube">
 61 |         <svg class="svg-icon grey">
 62 |           <use :xlink:href="getSvg('youtube')"></use>
 63 |         </svg>
 64 |       </a>
 65 |     </li>
 66 |     <li v-if="social.telegram">
 67 |       <a :href="`https://t.me/${social.telegram }`" :title="social.telegram">
 68 |         <svg class="svg-icon grey">
 69 |           <use :xlink:href="getSvg('telegram')"></use>
 70 |         </svg>
 71 |       </a>
 72 |     </li>
 73 |     <li v-if="social.microdotblog">
 74 |       <a rel="me" :href="`https://micro.blog/${social.microdotblog}`" :title="social.microdotblog">
 75 |         <svg class="svg-icon grey">
 76 |           <use :xlink:href="getSvg('microdotblog')"></use>
 77 |         </svg>
 78 |       </a>
 79 |     </li>
 80 |     <li v-if="social.googleplus">
 81 |       <a :href="`https://plus.google.com/${social.googleplus}`" :title="social.googleplus">
 82 |         <svg class="svg-icon grey">
 83 |           <use :xlink:href="getSvg('googleplus')"></use>
 84 |         </svg>
 85 |       </a>
 86 |     </li>
 87 |     <li v-if="social.rss && feed">
 88 |       <a :href="feed.permalink" title="rss">
 89 |         <svg class="svg-icon grey">
 90 |           <use :xlink:href="getSvg('rss')"></use>
 91 |         </svg>
 92 |       </a>
 93 |     </li>
 94 |   </ul>
 95 | </template>
 96 | 
 97 | <script>
 98 | import getSvg from '../utils/getSvg'
 99 | 
100 | export default {
101 |   computed: {
102 |     social() {
103 |       return this.$themeConfig.social || {}
104 |     },
105 | 
106 |     feed() {
107 |       return this.$feed
108 |     }
109 |   },
110 | 
111 |   methods: {
112 |     getSvg
113 |   }
114 | }
115 | </script>
116 | 
117 | 


--------------------------------------------------------------------------------
/src/styles/_base.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Reset some basic elements
  3 |  */
  4 |  body, h1, h2, h3, h4, h5, h6,
  5 |  p, blockquote, pre, hr,
  6 |  dl, dd, ol, ul, figure {
  7 |    margin: 0;
  8 |    padding: 0;
  9 |  
 10 |  }
 11 |  
 12 |  
 13 |  
 14 |  /**
 15 |   * Basic styling
 16 |   */
 17 |  body {
 18 |    font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
 19 |    color: $text-color;
 20 |    background-color: $background-color;
 21 |    -webkit-text-size-adjust: 100%;
 22 |    -webkit-font-feature-settings: "kern" 1;
 23 |       -moz-font-feature-settings: "kern" 1;
 24 |         -o-font-feature-settings: "kern" 1;
 25 |            font-feature-settings: "kern" 1;
 26 |    font-kerning: normal;
 27 |    display: flex;
 28 |    min-height: 100vh;
 29 |    flex-direction: column;
 30 |  }
 31 |  
 32 |  
 33 |  
 34 |  /**
 35 |   * Set `margin-bottom` to maintain vertical rhythm
 36 |   */
 37 |  h1, h2, h3, h4, h5, h6,
 38 |  p, blockquote, pre,
 39 |  ul, ol, dl, figure,
 40 |  %vertical-rhythm {
 41 |    margin-bottom: $spacing-unit / 2;
 42 |  }
 43 |  
 44 |  
 45 |  
 46 |  /**
 47 |   * `main` element
 48 |   */
 49 |  main {
 50 |    display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
 51 |  }
 52 |  
 53 |  
 54 |  
 55 |  /**
 56 |   * Images
 57 |   */
 58 |  img {
 59 |    max-width: 100%;
 60 |    vertical-align: middle;
 61 |  }
 62 |  
 63 |  
 64 |  
 65 |  /**
 66 |   * Figures
 67 |   */
 68 |  figure > img {
 69 |    display: block;
 70 |  }
 71 |  
 72 |  figcaption {
 73 |    font-size: $small-font-size;
 74 |  }
 75 |  
 76 |  
 77 |  
 78 |  /**
 79 |   * Lists
 80 |   */
 81 |  ul, ol {
 82 |    margin-left: $spacing-unit;
 83 |  }
 84 |  
 85 |  li {
 86 |    > ul,
 87 |    > ol {
 88 |      margin-bottom: 0;
 89 |    }
 90 |  }
 91 |  
 92 |  
 93 |  
 94 |  /**
 95 |   * Headings
 96 |   */
 97 |  h1, h2, h3, h4, h5, h6 {
 98 |    font-weight: $base-font-weight;
 99 |  }
100 |  
101 |  
102 |  
103 |  /**
104 |   * Links
105 |   */
106 |  a {
107 |    color: $brand-color;
108 |    text-decoration: none;
109 |  
110 |    &:visited {
111 |      color: darken($brand-color, 15%);
112 |    }
113 |  
114 |    &:hover {
115 |      color: $text-color;
116 |      text-decoration: underline;
117 |    }
118 |  
119 |    .social-media-list &:hover {
120 |      text-decoration: none;
121 |  
122 |      .username {
123 |        text-decoration: underline;
124 |      }
125 |    }
126 |  }
127 |  
128 |  
129 |  /**
130 |   * Blockquotes
131 |   */
132 |  blockquote {
133 |    color: $grey-color;
134 |    border-left: 4px solid $grey-color-light;
135 |    padding-left: $spacing-unit / 2;
136 |    @include relative-font-size(1.125);
137 |    letter-spacing: -1px;
138 |    font-style: italic;
139 |  
140 |    > :last-child {
141 |      margin-bottom: 0;
142 |    }
143 |  }
144 |  
145 |  
146 |  
147 |  /**
148 |   * Code formatting
149 |   */
150 |  pre,
151 |  code {
152 |    @include relative-font-size(0.9375);
153 |    border: 1px solid $grey-color-light;
154 |    border-radius: 3px;
155 |    background-color: #eef;
156 |  }
157 |  
158 |  code {
159 |    padding: 1px 5px;
160 |  }
161 |  
162 |  pre {
163 |    padding: 8px 12px;
164 |    overflow-x: auto;
165 |  
166 |    > code {
167 |      border: 0;
168 |      padding-right: 0;
169 |      padding-left: 0;
170 |    }
171 |  }
172 |  
173 |  
174 |  
175 |  /**
176 |   * Wrapper
177 |   */
178 |  .wrapper {
179 |    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
180 |    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
181 |    margin-right: auto;
182 |    margin-left: auto;
183 |    padding-right: $spacing-unit / 2;
184 |    padding-left: $spacing-unit / 2;
185 |    @extend %clearfix;
186 |  
187 |    @media screen and (min-width: $on-large) {
188 |      max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
189 |      max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
190 |      padding-right: $spacing-unit;
191 |      padding-left: $spacing-unit;
192 |    }
193 |  }
194 |  
195 |  
196 |  
197 |  /**
198 |   * Clearfix
199 |   */
200 |  %clearfix:after {
201 |    content: "";
202 |    display: table;
203 |    clear: both;
204 |  }
205 |  
206 |  
207 |  
208 |  /**
209 |   * Icons
210 |   */
211 |  
212 |  .orange {
213 |    color: $orange-color;
214 |  }
215 |  
216 |  .grey {
217 |    color: $grey-color;
218 |  }
219 |  
220 |  .svg-icon {
221 |    width: 16px;
222 |    height: 16px;
223 |    display: inline-block;
224 |    fill: currentColor;
225 |    padding: 5px 3px 2px 5px;
226 |    vertical-align: text-bottom;
227 |  }
228 |  
229 |  
230 |  /**
231 |   * Tables
232 |   */
233 |  table {
234 |    margin-bottom: $spacing-unit;
235 |    width: 100%;
236 |    text-align: $table-text-align;
237 |    color: lighten($text-color, 18%);
238 |    border-collapse: collapse;
239 |    border: 1px solid $grey-color-light;
240 |    tr {
241 |      &:nth-child(even) {
242 |        background-color: lighten($grey-color-light, 6%);
243 |      }
244 |    }
245 |    th, td {
246 |      padding: ($spacing-unit / 3) ($spacing-unit / 2);
247 |    }
248 |    th {
249 |      background-color: lighten($grey-color-light, 3%);
250 |      border: 1px solid darken($grey-color-light, 4%);
251 |      border-bottom-color: darken($grey-color-light, 12%);
252 |    }
253 |    td {
254 |      border: 1px solid $grey-color-light;
255 |    }
256 |  }


--------------------------------------------------------------------------------
/src/styles/_layout.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Site header
  3 |  */
  4 |  .site-header {
  5 |   border-top: 5px solid $grey-color-dark;
  6 |   border-bottom: 1px solid $grey-color-light;
  7 |   min-height: $spacing-unit * 1.865;
  8 |   line-height: $base-line-height * $base-font-size * 2.25;
  9 | 
 10 |   // Positioning context for the mobile navigation icon
 11 |   position: relative;
 12 | }
 13 | 
 14 | .site-title {
 15 |   @include relative-font-size(1.625);
 16 |   font-weight: 300;
 17 |   letter-spacing: -1px;
 18 |   margin-bottom: 0;
 19 |   float: left;
 20 | 
 21 |   @include media-query($on-palm) {
 22 |     padding-right: 45px;
 23 |   }
 24 | 
 25 |   &,
 26 |   &:visited {
 27 |     color: $grey-color-dark;
 28 |   }
 29 | }
 30 | 
 31 | .site-nav {
 32 |   position: absolute;
 33 |   top: 9px;
 34 |   right: $spacing-unit / 2;
 35 |   background-color: $background-color;
 36 |   border: 1px solid $grey-color-light;
 37 |   border-radius: 5px;
 38 |   text-align: right;
 39 | 
 40 |   .nav-trigger {
 41 |       display: none;
 42 |   }
 43 | 
 44 |   .menu-icon {
 45 |     float: right;
 46 |     width: 36px;
 47 |     height: 26px;
 48 |     line-height: 0;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | 
 52 |     > svg path {
 53 |       fill: $grey-color-dark;
 54 |     }
 55 |   }
 56 | 
 57 |   label[for="nav-trigger"] {
 58 |     display: block;
 59 |     float: right;
 60 |     width: 36px;
 61 |     height: 36px;
 62 |     z-index: 2;
 63 |     cursor: pointer;
 64 |   }
 65 | 
 66 |   input ~ .trigger {
 67 |     clear: both;
 68 |     display: none;
 69 |   }
 70 | 
 71 |   input:checked ~ .trigger {
 72 |     display: block;
 73 |     padding-bottom: 5px;
 74 |   }
 75 | 
 76 |   .page-link {
 77 |     color: $text-color;
 78 |     line-height: $base-line-height;
 79 |     display: block;
 80 |     padding: 5px 10px;
 81 | 
 82 |     // Gaps between nav items, but not on the last one
 83 |     &:not(:last-child) {
 84 |       margin-right: 0;
 85 |     }
 86 |     margin-left: 20px;
 87 |   }
 88 | 
 89 |   @media screen and (min-width: $on-medium) {
 90 |     position: static;
 91 |     float: right;
 92 |     border: none;
 93 |     background-color: inherit;
 94 | 
 95 |     label[for="nav-trigger"] {
 96 |       display: none;
 97 |     }
 98 | 
 99 |     .menu-icon {
100 |       display: none;
101 |     }
102 | 
103 |     input ~ .trigger {
104 |       display: block;
105 |     }
106 | 
107 |     .page-link {
108 |       display: inline;
109 |       padding: 0;
110 | 
111 |       &:not(:last-child) {
112 |         margin-right: 20px;
113 |       }
114 |       margin-left: auto;
115 |     }
116 |   }
117 | }
118 | 
119 | /**
120 |  * pagination
121 |  */
122 | .pagination {
123 |   margin-bottom: 25px;
124 |   font-size: .875rem;
125 | 
126 |   .next-link, .prev-link {
127 |     border: 1px solid $grey-color-light;
128 |     padding: 5px 10px;
129 |     color: $text-color;
130 |   }
131 | }
132 | 
133 | 
134 | /**
135 |  * Site footer
136 |  */
137 | .site-footer {
138 |   border-top: 1px solid $grey-color-light;
139 |   padding: $spacing-unit 0;
140 | }
141 | 
142 | .footer-heading {
143 |   @include relative-font-size(1.125);
144 |   margin-bottom: $spacing-unit / 2;
145 | }
146 | 
147 | .contact-list,
148 | .social-media-list {
149 |   list-style: none;
150 |   margin-left: 0;
151 | }
152 | 
153 | .footer-col-wrapper {
154 |   @include relative-font-size(0.9375);
155 |   color: $grey-color;
156 |   margin-left: -$spacing-unit / 2;
157 |   @extend %clearfix;
158 | }
159 | 
160 | .footer-col {
161 |   width: -webkit-calc(100% - (#{$spacing-unit} / 2));
162 |   width:         calc(100% - (#{$spacing-unit} / 2));
163 |   margin-bottom: $spacing-unit / 2;
164 |   padding-left: $spacing-unit / 2;
165 | }
166 | 
167 | .footer-col-1,
168 | .footer-col-2 {
169 |   width: -webkit-calc(50% - (#{$spacing-unit} / 2));
170 |   width:         calc(50% - (#{$spacing-unit} / 2));
171 | }
172 | 
173 | .footer-col-3 {
174 |   width: -webkit-calc(100% - (#{$spacing-unit} / 2));
175 |   width:         calc(100% - (#{$spacing-unit} / 2));
176 | }
177 | 
178 | @media screen and (min-width: $on-large) {
179 |   .footer-col-1 {
180 |     width: -webkit-calc(35% - (#{$spacing-unit} / 2));
181 |     width:         calc(35% - (#{$spacing-unit} / 2));
182 |   }
183 | 
184 |   .footer-col-2 {
185 |     width: -webkit-calc(20% - (#{$spacing-unit} / 2));
186 |     width:         calc(20% - (#{$spacing-unit} / 2));
187 |   }
188 | 
189 |   .footer-col-3 {
190 |     width: -webkit-calc(45% - (#{$spacing-unit} / 2));
191 |     width:         calc(45% - (#{$spacing-unit} / 2));
192 |   }
193 | }
194 | 
195 | @media screen and (min-width: $on-medium) {
196 |   .footer-col {
197 |     float: left;
198 |   }
199 | }
200 | 
201 | 
202 | 
203 | /**
204 |  * Page content
205 |  */
206 | .page-content {
207 |   padding: $spacing-unit 0;
208 |   flex: 1 0 auto;
209 | }
210 | 
211 | .page-heading {
212 |   @include relative-font-size(2);
213 | }
214 | 
215 | .post-list-heading {
216 |   @include relative-font-size(1.75);
217 | }
218 | 
219 | .post-list {
220 |   margin-left: 0;
221 |   list-style: none;
222 | 
223 |   > li {
224 |     margin-bottom: $spacing-unit;
225 |   }
226 | }
227 | 
228 | .post-meta {
229 |   font-size: $small-font-size;
230 |   color: $grey-color;
231 | }
232 | 
233 | .post-link {
234 |   display: block;
235 |   @include relative-font-size(1.5);
236 | }
237 | 
238 | 
239 | 
240 | /**
241 |  * Posts
242 |  */
243 | .post-header {
244 |   margin-bottom: $spacing-unit;
245 | }
246 | 
247 | .post-title,
248 | .post-content h1 {
249 |   @include relative-font-size(2.625);
250 |   letter-spacing: -1px;
251 |   line-height: 1;
252 | 
253 |   @media screen and (min-width: $on-large) {
254 |     @include relative-font-size(2.625);
255 |   }
256 | }
257 | 
258 | .post-content {
259 |   margin-bottom: $spacing-unit;
260 | 
261 |   h2 {
262 |     @include relative-font-size(1.75);
263 | 
264 |     @media screen and (min-width: $on-large) {
265 |       @include relative-font-size(2);
266 |     }
267 |   }
268 | 
269 |   h3 {
270 |     @include relative-font-size(1.375);
271 | 
272 |     @media screen and (min-width: $on-large) {
273 |       @include relative-font-size(1.625);
274 |     }
275 |   }
276 | 
277 |   h4 {
278 |     @include relative-font-size(1.125);
279 | 
280 |     @media screen and (min-width: $on-large) {
281 |       @include relative-font-size(1.25);
282 |     }
283 |   }
284 | }
285 | 
286 | 
287 | .social-media-list {
288 |   display: table;
289 |   margin: 0 auto;
290 |   li {
291 |     float: left;
292 |     margin: 0 5px;
293 |     &:first-of-type { margin-left: 0 }
294 |     &:last-of-type { margin-right: 0 }
295 |     a {
296 |       display: block;
297 |       padding: $spacing-unit / 4;
298 |       border: 1px solid $grey-color-light
299 |     }
300 |     &:hover .svg-icon { fill: currentColor; }
301 |   }
302 | }
303 | 
304 | 
305 | /**
306 |  * Grid helpers
307 |  */
308 | .one-half {
309 |   width: -webkit-calc(50% - (#{$spacing-unit} / 2));
310 |   width:         calc(50% - (#{$spacing-unit} / 2));
311 | }


--------------------------------------------------------------------------------
/src/svg/minima-social-icons.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | 
 3 | <symbol id="dribbble" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm6.747-6.905c-.234-.074-2.115-.635-4.257-.292.894 2.456 1.258 4.456 1.328 4.872 1.533-1.037 2.624-2.68 2.93-4.58zM10.67 14.3c-.102-.6-.5-2.688-1.46-5.18l-.044.014C5.312 10.477 3.93 13.15 3.806 13.4c1.158.905 2.614 1.444 4.194 1.444.947 0 1.85-.194 2.67-.543zm-7.747-1.72c.155-.266 2.03-3.37 5.555-4.51.09-.03.18-.056.27-.08-.173-.39-.36-.778-.555-1.16-3.413 1.02-6.723.977-7.023.97l-.003.208c0 1.755.665 3.358 1.756 4.57zM1.31 6.61c.307.005 3.122.017 6.318-.832-1.132-2.012-2.353-3.705-2.533-3.952-1.912.902-3.34 2.664-3.784 4.785zM6.4 1.368c.188.253 1.43 1.943 2.548 4 2.43-.91 3.46-2.293 3.582-2.468C11.323 1.827 9.736 1.176 8 1.176c-.55 0-1.087.066-1.6.19zm6.89 2.322c-.145.194-1.29 1.662-3.816 2.694.16.325.31.656.453.99.05.117.1.235.147.352 2.274-.286 4.533.172 4.758.22-.015-1.613-.59-3.094-1.543-4.257z"/></symbol>
 4 | 
 5 | <symbol id="facebook" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></symbol>
 6 | 
 7 | <symbol id="flickr" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 8c0 2.05 1.662 3.71 3.71 3.71 2.05 0 3.713-1.66 3.713-3.71S5.76 4.29 3.71 4.29C1.663 4.29 0 5.95 0 8zm8.577 0c0 2.05 1.662 3.71 3.712 3.71C14.33 11.71 16 10.05 16 8s-1.662-3.71-3.71-3.71c-2.05 0-3.713 1.66-3.713 3.71z"/></symbol>
 8 | 
 9 | <symbol id="github" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8"/></symbol>
10 | 
11 | <symbol id="googleplus" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M5.09 7.273v1.745h2.89c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.19 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zm10.91 0h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.46V8.727H16"/></symbol>
12 | 
13 | <symbol id="instagram" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></symbol>
14 | 
15 | <symbol id="linkedin" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51v1.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></symbol>
16 | 
17 | <symbol id="pinterest" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></symbol>
18 | 
19 | <symbol id="rss" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/></symbol>
20 | 
21 | <symbol id="stackoverflow" class="svg-icon" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693h1.42v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.46.3-1.38L4.55 8.54l-.302 1.38zm.906-3.37l6.47 3.02.602-1.3-6.47-3.02-.602 1.29zm1.81-3.19l5.478 4.57.906-1.08L7.87 2.28l-.9 1.078zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></symbol>
22 | 
23 | <symbol id="twitter" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></symbol>
24 | 
25 | <symbol id="youtube" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24z"/></symbol>
26 | 
27 | <symbol id="mastodon" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
28 |   <path transform="scale(0.07)" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
29 |   <path transform="scale(0.07)" fill="#FFF" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
30 | </symbol>
31 | 
32 | <symbol id="microdotblog" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
33 |         <path d="M13.8958184,12.3539692 C13.7934913,12.5766333 13.7214973,12.7460692 13.6798363,12.8622768 C13.534018,13.2690171 13.4876062,13.5959963 13.4737723,13.8031622 C13.4047037,14.8374843 13.8695637,15.452098 13.9792411,15.6152902 C14.143626,15.8598834 14.2103299,15.996999 14.1793527,16.0266369 C14.1187128,16.1331597 13.9329861,16.1331597 13.6221726,16.0266369 C13.1559524,15.8668527 11.8671503,15.3666667 11.3815104,14.6616443 C11.1859547,14.3777486 11.0620507,14.2565499 10.9838025,14.2130531 C10.0617698,14.5547858 9.05472096,14.7428571 8,14.7428571 C3.581722,14.7428571 0,11.4425562 0,7.37142857 C0,3.30030099 3.581722,0 8,0 C12.418278,0 16,3.30030099 16,7.37142857 C16,9.29250872 15.2024583,11.041949 13.8958184,12.3539692 Z M7.94285714,9.78095238 C9.51605596,10.7990263 10.3706771,11.2483272 10.5067204,11.1288551 C10.6427638,11.0093829 10.4795457,10.0577483 10.0170661,8.27395135 C11.4827084,7.15954158 12.1741114,6.48559023 12.0912751,6.2520973 C12.0084388,6.01860437 11.0529434,5.87976276 9.22478879,5.83557246 C8.61970046,4.10392098 8.19238991,3.23809524 7.94285714,3.23809524 C7.69332437,3.23809524 7.26601382,4.10392098 6.6609255,5.83557246 C4.82960347,5.88951121 3.87410803,6.02835282 3.7944392,6.2520973 C3.71477036,6.47584178 4.40617335,7.14979313 5.86864817,8.27395135 C5.36780472,9.99753359 5.20458662,10.9491682 5.37899385,11.1288551 C5.55340109,11.308542 6.40802218,10.8592411 7.94285714,9.78095238 Z"></path>
34 | </symbol>
35 | 
36 | <symbol id="telegram" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" viewBox="0 0 1792 1792">
37 |         <path d="M1189 1307l147-693q9-44-10.5-63t-51.5-7l-864 333q-29 11-39.5 25t-2.5 26.5 32 19.5l221 69 513-323q21-14 32-6 7 5-4 15l-415 375-16 228q23 0 45-22l108-104 224 165q64 36 81-38zm603-411q0 182-71 348t-191 286-286 191-348 71-348-71-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"/>
38 | </symbol>
39 | </svg>


--------------------------------------------------------------------------------