From a86e47a55de3b882458d3aab00fb67c00cbd4484 Mon Sep 17 00:00:00 2001 From: Pete Shadbolt Date: Tue, 17 Oct 2017 23:39:42 -0700 Subject: [PATCH] Keystroke formatting in docs --- static/keys.css | 55 ++++++++++++++++++++++++++++++++++++++ templates/boilerplate.html | 1 + templates/doc.md | 13 +++------ 3 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 static/keys.css diff --git a/static/keys.css b/static/keys.css new file mode 100644 index 0000000..4e3c297 --- /dev/null +++ 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); +} diff --git a/templates/boilerplate.html b/templates/boilerplate.html index 99a8d8d..23acf1e 100644 --- a/templates/boilerplate.html +++ b/templates/boilerplate.html @@ -6,6 +6,7 @@ abp + diff --git a/templates/doc.md b/templates/doc.md index 630e1ff..e303e23 100644 --- 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 Ctrl 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 Shift-click another node to act a CZ gate +- Press Space 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 `//graph` will return some JSON. - :::bash $ curl https://abv.peteshadbolt.co.uk//graph - -outputs - - :::python { "adj": { "(0, 0, 1)": {