kopia lustrzana https://github.com/bristol-seds/pico-tracker
Interactive circles on the picture thing
Richard Meadows
rodzic
b7b282128f
commit
662010ae23
|
|
@ -22,19 +22,24 @@
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Google Maps -->
|
|
||||||
{% if page.maps %}
|
{% if page.maps %}
|
||||||
|
<!-- Google Maps -->
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
|
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
|
||||||
{% for map in page.maps %}
|
{% for map in page.maps %}
|
||||||
<script src="{{ map.url | prepend: page.asset_path }}"></script>
|
<script src="{{ map.url | prepend: page.asset_path }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- nvd3 Graphs -->
|
|
||||||
{% if page.graphs %}
|
{% if page.graphs %}
|
||||||
|
<!-- nvd3 Graphs -->
|
||||||
<script src="/lib/nvd3/d3.min.js"></script>
|
<script src="/lib/nvd3/d3.min.js"></script>
|
||||||
<script src="/lib/nvd3/nv.d3.min.js"></script>
|
<script src="/lib/nvd3/nv.d3.min.js"></script>
|
||||||
{% for graph in page.graphs %}
|
{% for graph in page.graphs %}
|
||||||
<script src="{{ graph.url | prepend: page.asset_path }}"></script>
|
<script src="{{ graph.url | prepend: page.asset_path }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- scroll thing -->
|
||||||
|
{% if page.scroll %}
|
||||||
|
<script src="scroll.js"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
title: ARM Cortex M0+
|
title: ARM Cortex M0+
|
||||||
tagline: Low power and things
|
tagline: Low power and things
|
||||||
|
linkname: armcortex
|
||||||
|
x: 51%
|
||||||
|
y: 33%
|
||||||
---
|
---
|
||||||
|
|
||||||
You’ll find this post in your `_posts` directory. Go ahead and edit it
|
You’ll find this post in your `_posts` directory. Go ahead and edit it
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
title: Global Positioning System Receiver
|
title: Global Positioning System Receiver
|
||||||
tagline: from ublox ag.
|
tagline: from ublox ag.
|
||||||
|
linkname: gps
|
||||||
|
x: 20%
|
||||||
|
y: 42%
|
||||||
---
|
---
|
||||||
|
|
||||||
You’ll find this post in your `_posts` directory. Go ahead and edit it
|
You’ll find this post in your `_posts` directory. Go ahead and edit it
|
||||||
|
|
|
||||||
|
|
@ -92,15 +92,6 @@ pre {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fill-page > img {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border: 0px none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Old Notice
|
* Old Notice
|
||||||
*/
|
*/
|
||||||
|
|
@ -110,3 +101,46 @@ pre {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
float: right
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fill-page > img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border: 0px none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A grid of interactive circles for the top image
|
||||||
|
*/
|
||||||
|
.ch-grid {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
.ch-grid li {
|
||||||
|
position: absolute;
|
||||||
|
width: 4%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.ch-pad {
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
.ch-item {
|
||||||
|
margin: 10%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-image: url(assets/circles.svg);
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
}
|
||||||
|
.ch-item:hover {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="64px"
|
||||||
|
height="64px"
|
||||||
|
id="svg2985"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
sodipodi:docname="circles.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2987" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="11"
|
||||||
|
inkscape:cx="16.710894"
|
||||||
|
inkscape:cy="33.740909"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:grid-bbox="true"
|
||||||
|
inkscape:window-width="2560"
|
||||||
|
inkscape:window-height="1497"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata2990">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer">
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="fill:none;stroke:#de2f0c;stroke-width:1.53711927000000004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.81102359;stroke-dasharray:none"
|
||||||
|
id="path2993"
|
||||||
|
sodipodi:cx="42.136364"
|
||||||
|
sodipodi:cy="41.272728"
|
||||||
|
sodipodi:rx="9.590909"
|
||||||
|
sodipodi:ry="9.090909"
|
||||||
|
d="m 51.727273,41.272728 a 9.590909,9.090909 0 1 1 -19.181818,0 9.590909,9.090909 0 1 1 19.181818,0 z"
|
||||||
|
transform="matrix(3.0827563,0,0,3.2523079,-97.896143,-102.23162)" />
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="fill:none;stroke:#de2f0c;stroke-width:2.36142825999999983;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.81176472;stroke-dasharray:none"
|
||||||
|
id="path2993-7"
|
||||||
|
sodipodi:cx="42.136364"
|
||||||
|
sodipodi:cy="41.272728"
|
||||||
|
sodipodi:rx="9.590909"
|
||||||
|
sodipodi:ry="9.090909"
|
||||||
|
d="m 51.727273,41.272728 a 9.590909,9.090909 0 1 1 -19.181818,0 9.590909,9.090909 0 1 1 19.181818,0 z"
|
||||||
|
transform="matrix(2.0363473,0,0,2.1483464,-53.804271,-56.668117)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Po Szerokość: | Wysokość: | Rozmiar: 2.6 KiB |
20
index.html
20
index.html
|
|
@ -1,9 +1,23 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
asset_path: assets/
|
asset_path: assets/
|
||||||
|
scroll: true
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="image-cover" class="fill-page">
|
<div id="image-highlight" class="fill-page">
|
||||||
|
<!-- A grid of interactive circles for the top image -->
|
||||||
|
<ul class="ch-grid">
|
||||||
|
{% for post in site.posts %}
|
||||||
|
|
||||||
|
<li style="top: {{ post.y }}; left: {{ post.x }}">
|
||||||
|
<a href="#{{ post.linkname }}">
|
||||||
|
<div class="ch-item"><div class="ch-pad"></div></div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
<img src="{{ "pico-tracker-apr-2015.jpg" | prepend: page.asset_path }}">
|
<img src="{{ "pico-tracker-apr-2015.jpg" | prepend: page.asset_path }}">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -19,8 +33,8 @@ asset_path: assets/
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
<h2>{{ post.title }} <small>{{post.tagline}}</small></h2>
|
<h2 id="{{ post.linkname }}">{{ post.title }} <small>{{post.tagline}}</small></h2>
|
||||||
<p class="">{{ post.excerpt }}</p>
|
<p class="">{{ post.content }}</p>
|
||||||
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
$(function() {
|
||||||
|
$('a[href*=#]:not([href=#])').click(function() {
|
||||||
|
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
|
||||||
|
var target = $(this.hash);
|
||||||
|
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
|
||||||
|
if (target.length) {
|
||||||
|
$('html,body').animate({
|
||||||
|
scrollTop: target.offset().top
|
||||||
|
}, 1000);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
Ładowanie…
Reference in New Issue