free
/
freedomboneeee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
freedomboneeee/website/EN/mesh_usage.html

653 lines
25 KiB
HTML
Raw Blame History

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- 2017-12-08 Fri 18:53 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>&lrm;</title>
<meta name="generator" content="Org mode" />
<meta name="author" content="Bob Mottram" />
<meta name="description" content="Turn the Beaglebone Black into a personal communications server"
/>
<meta name="keywords" content="freedombox, debian, beaglebone, red matrix, email, web server, home server, internet, censorship, surveillance, social network, irc, jabber" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-hledger:before { content: 'hledger'; }
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-lua:before { content: 'Lua'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
/*]]>*/-->
</style>
<link rel="stylesheet" type="text/css" href="freedombone.css" />
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2017 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="preamble" class="status">
<a name="top" id="top"></a>
</div>
<div id="content">
<div class="org-center">
<div class="figure">
<p><img src="images/logo.png" alt="logo.png" />
</p>
</div>
</div>
<center><h1>Mesh Network: How to use it</h1></center>
<ul class="org-ul">
<li><a href="#org4cf4147">Boot trouble</a></li>
<li><a href="#org1ffdb9e">Set the Date</a></li>
<li><a href="#org13f8cd9">Check network status</a></li>
<li><a href="#orgf44a62c">Connecting to the internet</a></li>
<li><a href="#org8822086">Connecting two meshes over the internet via a VPN tunnel</a></li>
<li><a href="#orgf43a45a">Mobile devices (phones, etc)</a></li>
<li><a href="#orgb2a7736">Chat System</a></li>
<li><a href="#orgf729cfb">Collaborative document editing</a></li>
<li><a href="#org5021aca">Social Network</a></li>
<li><a href="#orgb0f4b8c">Sharing Files</a></li>
<li><a href="#org3581ad5">Blogging</a></li>
</ul>
<p>
When you first boot from the USB drive the system will create some encryption keys, assign a unique network address to the system and then reboot itself. When that's done you should see a prompt asking for a username. This username just makes it easy for others to initially find you on the mesh and will appear in the list of users.
</p>
<p>
After a minute or two if you are within wifi range and there is at least one other user on the network then you should see additional icons appear on the desktop, such as <i>Other Users</i> and <i>Chat</i>.
</p>
<div id="outline-container-org4cf4147" class="outline-2">
<h2 id="org4cf4147">Boot trouble</h2>
<div class="outline-text-2" id="text-org4cf4147">
<p>
If the system doesn't boot and reports an error which includes <b>/dev/mapper/loop0p1</b> then reboot with <b>Ctrl-Alt-Del</b> and when you see the grub menu press <b>e</b> and manually change <b>/dev/mapper/loop0p1</b> to <b>/dev/sdb1</b>, then press <b>Ctrl-x</b>. If that doesn't work then reboot and try <b>/dev/sdc1</b> instead.
</p>
<p>
After the system has booted successfully the problem should resolve itself on subsequent reboots.
</p>
</div>
</div>
<div id="outline-container-org1ffdb9e" class="outline-2">
<h2 id="org1ffdb9e">Set the Date</h2>
<div class="outline-text-2" id="text-org1ffdb9e">
<p>
On the ordinary internet the date and time of your system would be set automatically via NTP. But this is not the internet and so you will need to manually ensure that your date and time settings are correct. You might need to periodically do this if your clock drifts. It's not essential that the time on your system be highly accurate, but if it drifts too far or goes back to epoch then things could become a little confusing in regard to the order of blog posts.
</p>
<p>
<b>Right click on the date</b> in the top right corner of the screen. Select <b>preferences</b>, then click the <b>Time Settings</b> button. You can then select the date from the calendar and set the time, then click the <b>Set System Time</b> button. Enter the default password, which is <i>freedombone</i>.
</p>
</div>
</div>
<div id="outline-container-org13f8cd9" class="outline-2">
<h2 id="org13f8cd9">Check network status</h2>
<div class="outline-text-2" id="text-org13f8cd9">
<p>
Unlike with ordinary wifi, on the mesh you don't get a signal strength icon and so it's not simple to see if you have a good connection.
</p>
<p>
Select the wifi icon on the desktop and enter the password '<i>freedombone</i>'. The network configuration will go into a monitoring mode and in the bottom right side of the window you will be able to see signal strength and other parameters. This can help you to locate systems or adjust antennas to get the best wifi performance.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_signal.jpg" alt="mesh_signal.jpg" />
</p>
</div>
</div>
<p>
When you are finished close the window and then select the <i>Network Restart</i> desktop icon, which will restart the B.A.T.M.A.N. network. You can also use the restart icon if you are within range of the mesh network but the <i>Chat</i> and <i>Other Users</i> icons do not automatically appear after a few minutes.
</p>
</div>
</div>
<div id="outline-container-orgf44a62c" class="outline-2">
<h2 id="orgf44a62c">Connecting to the internet</h2>
<div class="outline-text-2" id="text-orgf44a62c">
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_architecture2.jpg" alt="mesh_architecture2.jpg" />
</p>
</div>
</div>
<p>
If you need to be able to access the internet from the mesh then connect one of the peers to an internet router using an ethernet cable (shown as yellow above), then reboot it. Other peers in the mesh, including any attached mobile devices, will then be able to access the internet using the ethernet attached peer as a gateway. <a href="https://en.wikipedia.org/wiki/Freifunk">Freifunk</a> works in a similar way.
</p>
<p>
After connecting one peer to the internet you may need to reboot other peers in order to update their network configurations.
</p>
<p>
If for legal reasons you need to connect to the internet via a VPN then openvpn is preinstalled and you can run the command:
</p>
<div class="org-src-container">
<pre class="src src-bash">sudo openvpn myclient.ovpn
</pre>
</div>
<p>
Where <i>myclient.ovpn</i> comes from your VPN provider and with the password "<i>freedombone</i>".
</p>
</div>
</div>
<div id="outline-container-org8822086" class="outline-2">
<h2 id="org8822086">Connecting two meshes over the internet via a VPN tunnel</h2>
<div class="outline-text-2" id="text-org8822086">
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_architecture_vpn.jpg" alt="mesh_architecture_vpn.jpg" />
</p>
</div>
</div>
<p>
Maybe the internet exists, but you don't care about getting any content from it and just want to use it as a way to connect mesh networks from different geographical locations together.
</p>
<p>
In your home directory on a system connected via ethernet to an internet router you'll find a file called <b>vpn.tar.gz</b>. If you want another mesh to be able to connect to yours then send them this file and get them to uncompress it into their home directory also on an internet gateway machine. If they have an external IP address or domain name for your router then they will be able to VPN connect using the <b>Connect Meshes</b> icon. They should also forward port 653 from their internet router to the mesh gateway machine.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_connect.png" alt="mesh_connect.png" />
</p>
</div>
</div>
<p>
You should create a new <b>vpn.tar.gz</b> file for every other mesh which wants to be able to connect to yours. If you are prompted for a password it is 'freedombone'.
</p>
<p>
From a deep packet inspection point of view the traffic going over the internet between mesh gateways will just look like any other TLS connection to a server.
</p>
</div>
</div>
<div id="outline-container-orgf43a45a" class="outline-2">
<h2 id="orgf43a45a">Mobile devices (phones, etc)</h2>
<div class="outline-text-2" id="text-orgf43a45a">
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_architecture3.jpg" alt="mesh_architecture3.jpg" />
</p>
</div>
</div>
<p>
To allow mobile devices to connect to the mesh you will need a second wifi adapter connected to your laptop/netbook/SBC. Plug in a second wifi adapter then reboot the system. The second adaptor will then create a wifi hotspot (the connection shown in green above) which mobile devices can connect to. The hotspot name also contains its local IP address (eg. "<i>mesh-192.168.1.83</i>").
</p>
<p>
On a typical Android device go to <b>Settings</b> then <b>Security</b> and ensure that <b>Unknown sources</b> is enabled. Also within <b>Wifi</b> from the <b>Settings</b> screen select the mesh hotspot. The password is "<i>freedombone</i>". Open a non-Tor browser and navigate to the IP address showing in the hotspot name. You can then download and install mesh apps.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_mobileapps.jpg" alt="mesh_mobileapps.jpg" />
</p>
</div>
</div>
<p>
On some android devices you may need to move the downloaded APK file from the <b>Downloads</b> directory to your <b>home</b> directory before you can install it.
</p>
</div>
</div>
<div id="outline-container-orgb2a7736" class="outline-2">
<h2 id="orgb2a7736">Chat System</h2>
<div class="outline-text-2" id="text-orgb2a7736">
<p>
Ensure that you're within wifi range of at least one other mesh peer (could be a router or client) and then you should see that the <i>Chat</i> and <i>Other Users</i> icons appear. Select the users icon and you should see a list of users on the mesh.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_peerslist.png" alt="mesh_peerslist.png" />
</p>
</div>
</div>
<p>
Selecting a user followed by the Ok button will copy their Tox ID to the clipboard.
</p>
<p>
Now select the <i>Chat</i> icon and once you are connected you should see the status light turn green. If after a few minutes you don't get the green status light then try closing and re-opening the Tox chat application. Select the plus button to add a friend and then paste in a Tox ID.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_paste_tox_id.jpg" alt="mesh_paste_tox_id.jpg" />
</p>
</div>
</div>
<p>
The other user can then accept or decline your friend request.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_friend_request.jpg" alt="mesh_friend_request.jpg" />
</p>
</div>
</div>
<p>
You can also select an avatar by selecting the grey head and shoulders image.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_choose_avatar.jpg" alt="mesh_choose_avatar.jpg" />
</p>
</div>
</div>
<p>
And by selecting the user from the list on the left hand side the chat can begin.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_text_chat.jpg" alt="mesh_text_chat.jpg" />
</p>
</div>
</div>
<p>
One important point is that by default the microphone is turned off. When doing voice chat you can select the microphone volume with the drop down slider in the top right corner of the screen.
</p>
<p>
At present video doesn't work reliably, but text and voice chat do work well.
</p>
</div>
</div>
<div id="outline-container-orgf729cfb" class="outline-2">
<h2 id="orgf729cfb">Collaborative document editing</h2>
<div class="outline-text-2" id="text-orgf729cfb">
<p>
The mesh system includes the ability to collaboratively edit various sorts of documents using CryptPad. CryptPad is an almost peer-to-peer system in that it is designed for a client/server environment but that the server aspect of it is very minimal and limited to orchestrating the connected clients. With CryptPad installed on each mesh peer it effectively enables peer-to-peer collaborative editing. Documents are ephemeral and forgotten unless they're exported or copy-pasted to permanent storage.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_cryptpad1.jpg" alt="mesh_cryptpad1.jpg" />
</p>
</div>
</div>
<p>
To create a document click on the CryptPad icon. Depending upon the specifications of your system it may take a few seconds to load, so don't be too disturned if the browser contents look blank for a while. Select <span class="underline">Rich Text Pad</span> and give yourself a username.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_cryptpad2.jpg" alt="mesh_cryptpad2.jpg" />
</p>
</div>
</div>
<p>
If you have the chat system running you can then copy and paste the URL for your pad into the chat, and the other user can then open the link and edit the document with you. You can repeat that for however many other users you wish to be able to edit.
</p>
</div>
</div>
<div id="outline-container-org5021aca" class="outline-2">
<h2 id="org5021aca">Social Network</h2>
<div class="outline-text-2" id="text-org5021aca">
<p>
Patchwork is available as a social networking system for the mesh. Like all social network systems it has a stream of posts and you can follow or unfollow other users. You can also send private messages to other users with end-to-end encryption.
</p>
<p>
Double click on the "Social" icon to open the app, then add your nickname and optionally a description. If you want to choose an avatar image some can be found within the directory <b>/usr/share/freedombone/avatars</b>. On older systems or systems without a hardware random number generator, Patchwork sometimes takes a long time (a few minutes) to open for the first time after clicking the icon. This is most likely due to the initial generation of encryption keys, so be patient.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/patchwork_setup.jpg" alt="patchwork_setup.jpg" />
</p>
</div>
</div>
<p>
Other Patchwork users on the mesh will appear automatically under the <b>local</b> list and you can select and follow them if you wish. It's also possible to select the dark theme from <b>settings</b> on the drop down menu if you prefer.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/patchwork_public.jpg" alt="patchwork_public.jpg" />
</p>
</div>
</div>
<p>
The Secure Scuttlebutt protocol which Patchwork is based upon is intended to be robust to intermittent network connectivity, so you can write posts when out of range and they will sync once you are back in the network.
</p>
</div>
</div>
<div id="outline-container-orgb0f4b8c" class="outline-2">
<h2 id="orgb0f4b8c">Sharing Files</h2>
<div class="outline-text-2" id="text-orgb0f4b8c">
<p>
You can make files publicly available on the network simply by dragging and dropping them into the <i>Public</i> folder on the desktop. To view the files belonging to another user select the desktop icon called <i>Visit a site</i> and enter the username or Tox ID of the other user.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_share_files.jpg" alt="mesh_share_files.jpg" />
</p>
</div>
</div>
</div>
</div>
<div id="outline-container-org3581ad5" class="outline-2">
<h2 id="org3581ad5">Blogging</h2>
<div class="outline-text-2" id="text-org3581ad5">
<p>
To create a blog post select the <i>Blog</i> icon on the desktop and then select <b>New blog entry</b> and <b>Ok</b>. Edit the title of the entry and add your text. You can also include photos if you wish - just copy them to the <b>CreateBlog/content/images</b> directory and then link to them as shown.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_blog.png" alt="mesh_blog.png" />
</p>
</div>
</div>
<p>
To finish your blog entry just select <i>Save</i> and then close the editor. On older hardware it may take a while to publish the results, and this depends upon the amount of computation needed by IPFS to create file hashes. If you make no changes to the default text then the new blog entry will not be saved.
</p>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_new_blog2.jpg" alt="mesh_new_blog2.jpg" />
</p>
</div>
</div>
<div class="org-center">
<div class="figure">
<p><img src="images/mesh_view_blog.jpg" alt="mesh_view_blog.jpg" />
</p>
</div>
</div>
<p>
You can also visit other blogs, edit or delete your previous entry and also change your blog theme.
</p>
</div>
</div>
</div>
<div id="postamble" class="status">
<style type="text/css">
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
</style>
<div class="back-to-top">
<a href="#top">Back to top</a> | <a href="mailto:bob@freedombone.net">E-mail me</a>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink