Keystroke formatting in docs

пре 7 година · a86e47a55d
--- a/static/keys.css
+++ b/static/keys.css
@@ -0,0 +1,55 @@
 /**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

 /* Base style, essential for every key. */
 kbd, .key {
 	display: inline;
 	display: inline-block;
 	min-width: 1em;
 	padding: .2em .3em;
 	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
 	text-align: center;
 	text-decoration: none;
 	-moz-border-radius: .3em;
 	-webkit-border-radius: .3em;
 	border-radius: .3em;
 	border: none;
 	cursor: default;
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	user-select: none;
 }
 kbd[title], .key[title] {
 	cursor: help;
 }

 /* Dark style for display on light background. This is the default style. */
 kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
 	background: rgb(80, 80, 80);
 	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
 	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
 	color: rgb(250, 250, 250);
 	text-shadow: -1px -1px 0 rgb(70, 70, 70);
 	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
 	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
 	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
 }

 /* Light style for display on dark background. */
 kbd.light, .light-keys kbd, .key.light, .light-keys .key {
 	background: rgb(250, 250, 250);
 	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
 	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
 	color:  rgb(50, 50, 50);
 	text-shadow: 0 0 2px rgb(255, 255, 255);
 	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
 	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
 	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
 }
--- a/templates/boilerplate.html
+++ b/templates/boilerplate.html
@@ -6,6 +6,7 @@
  <title>abp</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="{{ url_for("static", filename="doc.css") }}">
  <link rel="stylesheet" href="{{ url_for("static", filename="keys.css") }}">
 </head>

 <body>
--- a/templates/doc.md
+++ b/templates/doc.md
@@ -1,14 +1,14 @@
 # Graph state server
 Graph states are a way of efficiently representing the state of a system of qubits. This tool simulates the behaviour of the graph state and shows an interactive 3D representation of the state. Interaction with the simulation is done either by clicking on things in the web browser or through an API.
 [Graph states](https://en.wikipedia.org/wiki/Graph_state) are a way of efficiently representing the state of a system of qubits. This tool simulates the behaviour of the graph state and shows an interactive 3D representation of the state. Interaction with the simulation is done either by clicking on things in the web browser or through an API.

 ## Using the interface
 The state is initialized as a blank canvas without any qubits.

 - Click on the grid to make a new qubit
 - Hold Ctrl and click on a qubit to act a Hadamard gate
 - Hold <kbd>Ctrl</kbd> and click on a qubit to act a Hadamard gate
 - Click on a qubit to view its properties
 - Select a qubit, then shift-click another node to act a CZ gate
 - Press space to rotate the grid
 - Select a qubit, then <kbd>Shift</kbd>-click another node to act a CZ gate
 - Press <kbd>Space</kbd> to rotate the grid

 Arbitrary 3D structures can be constructed by rotating the grid.

@@ -50,12 +50,7 @@ Here's a complete example of sending a state from Python to the server:

 An HTTP GET to `/<uuid>/graph` will return some JSON.

    :::bash
    $ curl https://abv.peteshadbolt.co.uk/<uuid>/graph

 outputs

    :::python
    {
      "adj": {
        "(0, 0, 1)": {