Skip to content

Instantly share code, notes, and snippets.

@vinceswann

vinceswann/AnnePro1.html

Last active April 24, 2020 18:26
Show Gist options
  • Save vinceswann/d78edbb108780a1a16e391a7b5a26ee4 to your computer and use it in GitHub Desktop.
Save vinceswann/d78edbb108780a1a16e391a7b5a26ee4 to your computer and use it in GitHub Desktop.
Download ZIP
Anne Pro v1 keyboard layout CSS
Raw
AnnePro1.html
<html>
<head>
<style>
.row div{
display: inline-block;
border: 1px solid black;
padding: 0.5em;
margin: 0.5em;
border-radius: 5px;
width:6em;
height:6em;
font-family: "courier";
font-weight: bold;
font-style: oblique;
border-radius: 15px;
background: #e0e0e0;
box-shadow: 5px 5px 5px #b4b4b4, -5px -5px 5px #cccccc;
}
.row .wide0{width: 8em;}
.row .wide1{width: 10em;}
.row .wide2{width: 14em}
.row .wide3{width: 14em}
.row .wide4{width: 17.9em}
.row .spacebar{width: 46em}
.kb{
border: 1px solid black;
border-radius: 5px;
padding: 2em;
margin: 1em;
background-color: c0c0c0;
width: 125em;
}
</style>
</head>
<body>
<div class="kb">
<div class="row">
<div>Esc<br /></div>
<div>1<br /></div>
<div>2<br /></div>
<div>3<br /></div>
<div>4<br /></div>
<div>5<br /></div>
<div>6<br /></div>
<div>7<br /></div>
<div>8<br /></div>
<div>9<br /></div>
<div>0<br /></div>
<div>-_<br /></div>
<div>=+<br /></div>
<div class="wide3">Backspace<br /></div>
<br /></div>
<div class="row">
<div class="wide1">Tab<br /></div>
<div>Q<br /></div>
<div>W<br /></div>
<div>E<br /></div>
<div>R<br /></div>
<div>T<br /></div>
<div>Y<br /></div>
<div>U<br /></div>
<div>I<br /></div>
<div>O<br /></div>
<div>P<br /></div>
<div>[{<br /></div>
<div>]}<br /></div>
<div class="wide1">\|<br /></div>
</div>
<div class="row">
<div class="wide2">Ctrl<br /></div>
<div>A<br /></div>
<div>S<br /></div>
<div>D<br /></div>
<div>F<br /></div>
<div>G<br /></div>
<div>H<br /></div>
<div>J<br /></div>
<div>K<br /></div>
<div>L<br /></div>
<div>;:<br /></div>
<div>'"<br /></div>
<div class="wide2">Enter<br /></div>
</div>
<div class="row">
<div class="wide4">Shift<br /></div>
<div>Z<br /></div>
<div>X<br /></div>
<div>C<br /></div>
<div>V<br /></div>
<div>B<br /></div>
<div>N<br /></div>
<div>M<br /></div>
<div>,&LT;<br /></div>
<div>.&GT;<br /></div>
<div>/?<br /></div>
<div class="wide4">Shift<br /></div>
</div>
<div class="row">
<div class="wide0">Ctrl<br /></div>
<div class="wide0">Win<br /></div>
<div class="wide0">Alt<br /></div>
<div class="spacebar">Space<br /></div>
<div class="wide0">Alt<br /></div>
<div class="wide0">Fn<br /></div>
<div class="wide0">Anne<br /></div>
<div class="wide0">Ctrl<br /></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment