diff --git a/index.php b/index.php index 3cdee65..d206285 100644 --- a/index.php +++ b/index.php @@ -33,8 +33,33 @@ $img=$resource_path."images/"; + +
+ +
+
+

ShareYourFingerprint

+

Hai sempre guardato con malcelata invidia chi si presenta ai keysigning party con tanti fogliettini da distribuire agli astanti con scritto fingerprint e ID? Non hai assolutamente idea di cosa stiamo parlando, ma vuoi imparare a usare GnuPG per crittare le tue mail e contribuire a costruire una rete di fiducia con i tuoi amici/compagni?
+ Questo piccolo tool, debitamente compilato, ti permette di ottenere un .pdf pronto per la stampa con tanti piccoli “biglietti da visita” da distribuire ai tuoi contatti.
+ Vuoi saperne di più su come organizzare un keysigning party? leggi qui
+ Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi qui

+
+
+

ShareYourFingerprint

+

Do you ever watched with barely concealed envy the ones who present themselves at keysigning parties with many slips of paper to distribute to bystanders which report their fingerprint and ID? Do you have absolutely no idea of what we're talking about, but you want to learn GnuPG to crypt your emails and contribute in the construction of a web of trust between your friends/comrades?
+This tiny little form, properly filled, gives you a print-ready .pdf with many little "visiting cards" that you can distribute to your contacts.
+Do you want to know more about organizing a keysigning party? Read here
+Do you want to learn something on openPGP good practices? Read here

+
+
+
@@ -91,5 +116,9 @@ $img=$resource_path."images/"; + + diff --git a/res/css/tabs.css b/res/css/tabs.css new file mode 100644 index 0000000..f60a847 --- /dev/null +++ b/res/css/tabs.css @@ -0,0 +1,201 @@ +.tabs { + position: relative; + width: 100%; + overflow: hidden; + margin: 1em 0 2em; + font-weight: 300; +} + +/* Nav */ +.tabs nav { + text-align: center; +} + +.tabs nav ul { + padding: 0; + margin: 0; + list-style: none; + display: inline-block; +} + +.tabs nav ul li { + border: 1px solid #becbd2; + border-bottom: none; + margin: 0 0.25em; + display: block; + float: left; + position: relative; +} + +.tabs nav li.tab-current { + border: 1px solid #cc2a18; + box-shadow: inset 0 2px #cc2a18; + border-bottom: none; + z-index: 100; +} + +.tabs nav li.tab-current:before, +.tabs nav li.tab-current:after { + content: ''; + position: absolute; + height: 1px; + right: 100%; + bottom: 0; + width: 1000px; + background: #cc2a18; +} + +.tabs nav li.tab-current:after { + right: auto; + left: 100%; + width: 4000px; +} + +.tabs nav a { + color: #becbd2; + display: block; + font-size: 1.45em; + line-height: 2.5; + padding: 0 1.25em; + white-space: nowrap; +} + +.tabs nav a:hover { + color: #768e9d; +} + +.tabs nav li.tab-current a { + color: #cc2a18; +} + +/* Content */ +.content section { + font-size: 1.25em; + /*padding: 3em 1em;*/ + display: none; + max-width: 1230px; + margin: 0 auto; +} + +.content section:before, +.content section:after { + content: ''; + display: table; +} + +.content section:after { + clear: both; +} + +/* Fallback example */ +.no-js .content section { + display: block; + padding-bottom: 2em; + border-bottom: 1px solid #cc2a18; +} + +.content section.content-current { + display: block; +} + +.mediabox { + float: left; + width: 33%; + padding: 0 25px; +} + +.mediabox img { + max-width: 100%; + display: block; + margin: 0 auto; +} + +.mediabox h3 { + margin: 0.75em 0 0.5em; +} + +.mediabox p { + padding: 0 0 1em 0; + margin: 0; + line-height: 1.3; +} + +/* Example media queries */ + +@media screen and (max-width: 52.375em) { + .tabs nav a span { + display: none; + } + + .tabs nav a:before { + margin-right: 0; + } + + .mediabox { + float: none; + width: auto; + padding: 0 0 35px 0; + font-size: 90%; + } + + .mediabox img { + float: left; + margin: 0 25px 10px 0; + max-width: 40%; + } + + .mediabox h3 { + margin-top: 0; + } + + .mediabox p { + margin-left: 40%; + margin-left: calc(40% + 25px); + } + + .mediabox:before, + .mediabox:after { + content: ''; + display: table; + } + + .mediabox:after { + clear: both; + } +} + +@media screen and (max-width: 32em) { + .tabs nav ul, + .tabs nav ul li a { + width: 100%; + padding: 0; + } + + .tabs nav ul li { + width: 20%; + width: calc(20% + 1px); + margin: 0 0 0 -1px; + } + + .tabs nav ul li:last-child { + border-right: none; + } + + .mediabox { + text-align: center; + } + + .mediabox img { + float: none; + margin: 0 auto; + max-width: 100%; + } + + .mediabox h3 { + margin: 1.25em 0 1em; + } + + .mediabox p { + margin: 0; + } +} \ No newline at end of file diff --git a/res/js/cbpFWTabs.js b/res/js/cbpFWTabs.js new file mode 100644 index 0000000..0145e09 --- /dev/null +++ b/res/js/cbpFWTabs.js @@ -0,0 +1,72 @@ +/** + * cbpFWTabs.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2014, Codrops + * http://www.codrops.com + */ +;( function( window ) { + + 'use strict'; + + function extend( a, b ) { + for( var key in b ) { + if( b.hasOwnProperty( key ) ) { + a[key] = b[key]; + } + } + return a; + } + + function CBPFWTabs( el, options ) { + this.el = el; + this.options = extend( {}, this.options ); + extend( this.options, options ); + this._init(); + } + + CBPFWTabs.prototype.options = { + start : 0 + }; + + CBPFWTabs.prototype._init = function() { + // tabs elemes + this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) ); + // content items + this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) ); + // current index + this.current = -1; + // show current content item + this._show(); + // init events + this._initEvents(); + }; + + CBPFWTabs.prototype._initEvents = function() { + var self = this; + this.tabs.forEach( function( tab, idx ) { + tab.addEventListener( 'click', function( ev ) { + ev.preventDefault(); + self._show( idx ); + } ); + } ); + }; + + CBPFWTabs.prototype._show = function( idx ) { + if( this.current >= 0 ) { + this.tabs[ this.current ].className = ''; + this.items[ this.current ].className = ''; + } + // change current + this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; + this.tabs[ this.current ].className = 'tab-current'; + this.items[ this.current ].className = 'content-current'; + }; + + // add to global namespace + window.CBPFWTabs = CBPFWTabs; + +})( window ); \ No newline at end of file