Improve the look and feel of the HTML tools.

yy7bg · May 21, 2015 · cb019fa · cb019fa
1 parent 35d75e6
commit cb019fa
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/interactive/ec.css b/interactive/ec.css
@@ -5,22 +5,27 @@
 
 html, body {
   min-width: 600px;
+  background-color: #f0f0f0;
 }
 
 html, body, input {
-  color: #7f8d8c;
+  color: #000000;
   font-size: 1.125rem;
   font-family: "Source Sans Pro", sans-serif;
   line-height: 1.5;
 }
 
+a {
+  color: #a84646;
+}
+
 header {
+  padding-bottom: 10px;
   text-align: center;
 }
 
 header h1 {
   color: #000000;
-  text-transform: uppercase;
   margin: 0;
 }
 
@@ -48,19 +53,24 @@ header nav ul li:last-child {
 }
 
 header nav ul li a {
-  font-weight: 900;
   text-decoration: none;
   text-transform: uppercase;
+}
+
+header nav ul li a.active {
+  font-weight: 900;
   color: #000000;
 }
 
-header nav ul li a.active,
-header nav ul li a:hover {
-  color: #3fc380;
+footer {
+  padding: 20px 60px;
+  font-size: 18px;
 }
 
 main {
+  padding: 20px 0;
   text-align: center;
+  background-color: #ffffff;
 }
 
 label {
@@ -76,7 +86,6 @@ main .box {
 main #plot {
   width: 600px;
   height: 600px;
-  margin: 1em .5em 0 .5em;
 }
 
 main #form {

diff --git a/interactive/modk-add.html b/interactive/modk-add.html
@@ -12,7 +12,6 @@
   <body>
     <header>
       <h1>Elliptic Curve point addition (&#120125;<sub>p</sub>)</h1>
-      <p>A set of tools to play with elliptic curves in real and finite fields.</p>
       <nav>
         <ul>
           <li class="field">&#8477;</li>
@@ -55,13 +54,17 @@ <h1>Elliptic Curve point addition (&#120125;<sub>p</sub>)</h1>
           </div>
         </div>
         <div id="summary">
-          <p>Point addition over the elliptic curve <span class="curve-equation"></span> in &#120125;/<span class="field-order"></span>.</p>
+          <p>Point addition over the elliptic curve <span class="curve-equation"></span> in &#120125;<sub class="field-order"></sub>.</p>
           <p>The curve has <span class="curve-order"></span> points (including the point at infinity).</p>
           <p class="curve-singular-warning"><strong>Warning:</strong> this curve is singular.</p>
           <p class="composite-warning"><strong>Warning:</strong> <em>p</em> is not a prime.</p>
         </div>
       </div>
     </main>
+    <footer>
+      <p>This tool was created for <a href="http://andrea.corbellini.name/2015/05/17/elliptic-curve-cryptography-a-gentle-introduction/">Elliptic Curve Cryptography: a gentle introduction</a>.</p>
+      <p>It's free software, released under the <a href="http://opensource.org/licenses/MIT">MIT license</a>, hosted on <a href="https://github.com/andreacorbellini/ecc">GitHub</a> and served by <a href="http://rawgit.com/">RawGit</a>.</p>
+    </footer>
     <script type="text/javascript">
         $(function() {
             $.ec.curve = new $.ec.modk.PointAddition();

diff --git a/interactive/modk-mul.html b/interactive/modk-mul.html
@@ -12,7 +12,6 @@
   <body>
     <header>
       <h1>Elliptic Curve scalar multiplication (&#120125;<sub>p</sub>)</h1>
-      <p>A set of tools to play with elliptic curves in real and finite fields.</p>
       <nav>
         <ul>
           <li class="field">&#8477;</li>
@@ -55,14 +54,18 @@ <h1>Elliptic Curve scalar multiplication (&#120125;<sub>p</sub>)</h1>
           </div>
         </div>
         <div id="summary">
-          <p>Scalar multiplication over the elliptic curve <span class="curve-equation"></span> in &#120125;/<span class="field-order"></span>.</p>
+          <p>Scalar multiplication over the elliptic curve <span class="curve-equation"></span> in &#120125;/<sub class="field-order"></sub>.</p>
           <p>The curve has <span class="curve-order"></span> points (including the point at infinity).</p>
           <p>The subgroup generated by <em>P</em> has <span class="subgroup-order"></span> points.</p>
           <p class="curve-singular-warning"><strong>Warning:</strong> this curve is singular.</p>
           <p class="composite-warning"><strong>Warning:</strong> <em>p</em> is not a prime.</p>
         </div>
       </div>
     </main>
+    <footer>
+      <p>This tool was created for <a href="http://andrea.corbellini.name/2015/05/17/elliptic-curve-cryptography-a-gentle-introduction/">Elliptic Curve Cryptography: a gentle introduction</a>.</p>
+      <p>It's free software, released under the <a href="http://opensource.org/licenses/MIT">MIT license</a>, hosted on <a href="https://github.com/andreacorbellini/ecc">GitHub</a> and served by <a href="http://rawgit.com/">RawGit</a>.</p>
+    </footer>
     <script type="text/javascript">
         $(function() {
             $.ec.curve = new $.ec.modk.ScalarMultiplication();

diff --git a/interactive/reals-add.html b/interactive/reals-add.html
@@ -12,7 +12,6 @@
   <body>
     <header>
       <h1>Elliptic Curve point addition (&#8477;)</h1>
-      <p>A set of tools to play with elliptic curves in real and finite fields.</p>
       <nav>
         <ul>
           <li class="field">&#8477;</li>
@@ -55,6 +54,10 @@ <h1>Elliptic Curve point addition (&#8477;)</h1>
         </div>
       </div>
     </main>
+    <footer>
+      <p>This tool was created for <a href="http://andrea.corbellini.name/2015/05/17/elliptic-curve-cryptography-a-gentle-introduction/">Elliptic Curve Cryptography: a gentle introduction</a>.</p>
+      <p>It's free software, released under the <a href="http://opensource.org/licenses/MIT">MIT license</a>, hosted on <a href="https://github.com/andreacorbellini/ecc">GitHub</a> and served by <a href="http://rawgit.com/">RawGit</a>.</p>
+    </footer>
     <script type="text/javascript">
         $(function() {
             $.ec.curve = new $.ec.reals.PointAddition();

diff --git a/interactive/reals-mul.html b/interactive/reals-mul.html
@@ -12,7 +12,6 @@
   <body>
     <header>
       <h1>Elliptic Curve scalar multiplication (&#8477;)</h1>
-      <p>A set of tools to play with elliptic curves in real and finite fields.</p>
       <nav>
         <ul>
           <li class="field">&#8477;</li>
@@ -55,6 +54,10 @@ <h1>Elliptic Curve scalar multiplication (&#8477;)</h1>
         </div>
       </div>
     </main>
+    <footer>
+      <p>This tool was created for <a href="http://andrea.corbellini.name/2015/05/17/elliptic-curve-cryptography-a-gentle-introduction/">Elliptic Curve Cryptography: a gentle introduction</a>.</p>
+      <p>It's free software, released under the <a href="http://opensource.org/licenses/MIT">MIT license</a>, hosted on <a href="https://github.com/andreacorbellini/ecc">GitHub</a> and served by <a href="http://rawgit.com/">RawGit</a>.</p>
+    </footer>
     <script type="text/javascript">
         $(function() {
             $.ec.curve = new $.ec.reals.ScalarMultiplication();