commit 35b76dd227526641335dcfbcd2ef18cd9d9abc1e
parent 98213a193c2eb48b8f2d6875645f96bf7fcc0c8a
Author: Nathan Randecker <nathan.randecker@gmail.com>
Date: Mon, 16 Jan 2017 00:11:45 -0600
Added some styles, particle.js
Diffstat:
12 files changed, 195 insertions(+), 9 deletions(-)
diff --git a/_config.yml b/_config.yml
@@ -1,3 +1,13 @@
# Site settings
title: A blog about lorem ipsum dolor sit amet
description: A blog about lorem ipsum dolor sit amet
+
+# User settings
+username: Lorem Ipsum
+user_description: Anon Developer at Lorem Ipsum Dolor
+user_title: Anon Developer
+email: anon@anon.com
+twitter_username: lorem_ipsum
+github_username: lorem_ipsum
+gplus_username: lorem_ipsum
+disqus_username: lorem_ipsum
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1 +1,2 @@
+<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="{{ "/assets/js/main.js" | prepend: site.baseurl }}"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,5 +7,6 @@
<meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,14 @@
+<div id="particles-js">
+ <div class="content">
+ <h1>
+ <span class="site-title">{{site.username}}</span>
+ <span class="site-description">{{site.user_title}}</span>
+ </h1>
+ <div class="icons">
+ <a aria-label="Send email" href="mailto:{{site.email}}"><i class="icon fa fa-envelope"></i></a>
+ <a aria-label="My Twitter" target="_blank" href="https://twitter.com/{{site.twitter_username}}"><i class="icon fa fa-twitter"></i></a>
+ <a aria-label="My Google Plus" target="_blank" href="https://plus.google.com/{{site.gplus_username}}/posts"><i class="icon fa fa-google-plus"></i></a>
+ <a aria-label="My Github" target="_blank" href="https://github.com/{{site.github_username}}"><i class="icon fa fa-github"></i></a>
+ </div>
+ </div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,12 +2,9 @@
<html lang="en">
{% include head.html %}
<body>
- <div class="container">
- <div class="row">
- <div class="twelve columns">
- {{ content }}
- {% include footer.html %}
- </div>
- </div>
+ <div class"container">
+ {% include header.html %}
+ {{ content }}
+ {% include footer.html %}
</div>
</body>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1 @@
+body{margin:0}#particles-js{background:#1a222c;position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:50% 50%}.icons{text-align:center}.icons a{display:inline-block;padding:15px;margin:2px;border-radius:50px;border:2px solid #fff;line-height:0;transition:all .7s}.icons a:hover{background:#fff}.icons a:hover .icon{fill:#1a222c}@media only screen and (min-width:37.5rem){.icons{width:30px;height:30px}}
+\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1 @@
+particlesJS.load("particles-js","assets/particles.json",function(){console.log("callback - particles-js config loaded")});
+\ No newline at end of file
diff --git a/assets/particles.json b/assets/particles.json
@@ -0,0 +1,110 @@
+{
+ "particles": {
+ "number": {
+ "value": 80,
+ "density": {
+ "enable": true,
+ "value_area": 800
+ }
+ },
+ "color": {
+ "value": "#ffffff"
+ },
+ "shape": {
+ "type": "circle",
+ "stroke": {
+ "width": 0,
+ "color": "#000000"
+ },
+ "polygon": {
+ "nb_sides": 5
+ },
+ "image": {
+ "src": "img/github.svg",
+ "width": 100,
+ "height": 100
+ }
+ },
+ "opacity": {
+ "value": 0.5,
+ "random": false,
+ "anim": {
+ "enable": false,
+ "speed": 1,
+ "opacity_min": 0.1,
+ "sync": false
+ }
+ },
+ "size": {
+ "value": 10,
+ "random": true,
+ "anim": {
+ "enable": false,
+ "speed": 80,
+ "size_min": 0.1,
+ "sync": false
+ }
+ },
+ "line_linked": {
+ "enable": true,
+ "distance": 300,
+ "color": "#ffffff",
+ "opacity": 0.4,
+ "width": 2
+ },
+ "move": {
+ "enable": true,
+ "speed": 12,
+ "direction": "none",
+ "random": false,
+ "straight": false,
+ "out_mode": "out",
+ "bounce": false,
+ "attract": {
+ "enable": false,
+ "rotateX": 600,
+ "rotateY": 1200
+ }
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": {
+ "enable": false,
+ "mode": "repulse"
+ },
+ "onclick": {
+ "enable": true,
+ "mode": "push"
+ },
+ "resize": true
+ },
+ "modes": {
+ "grab": {
+ "distance": 800,
+ "line_linked": {
+ "opacity": 1
+ }
+ },
+ "bubble": {
+ "distance": 800,
+ "size": 80,
+ "duration": 2,
+ "opacity": 8,
+ "speed": 3
+ },
+ "repulse": {
+ "distance": 400,
+ "duration": 0.4
+ },
+ "push": {
+ "particles_nb": 4
+ },
+ "remove": {
+ "particles_nb": 2
+ }
+ }
+ },
+ "retina_detect": true
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,3 @@
---
layout: default
---
-
-<h1>Welcome to particle</h1>
diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,4 @@
+/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+particlesJS.load('particles-js', 'assets/particles.json', function() {
+ console.log('callback - particles-js config loaded');
+});
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -0,0 +1,43 @@
+$main: #1a222c;
+$sec: #FFF;
+$cut: 37.5rem;
+
+body {
+ margin: 0;
+}
+
+#particles-js {
+ background: $main;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 50% 50%;
+}
+
+.icons {
+ text-align: center;
+
+ a {
+ display: inline-block;
+ padding: 15px;
+ margin: 2px;
+ border-radius: 50px;
+ border: 2px solid $sec;
+ line-height: 0;
+ transition: all .7s;
+ &:hover {
+ background: $sec;
+ .icon {
+ fill: $main;
+ }
+ }
+ }
+
+ @media only screen and (min-width:$cut) {
+ width: 30px;
+ height: 30px
+ }
+
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1471,6 +1471,10 @@ parse-passwd@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+particles.js@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/particles.js/-/particles.js-2.0.0.tgz#21386c4328d6c7f96780a201e96eedfc09c736f6"
+
path-exists@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
