diff options
author | Zach Latta <zach@zachlatta.com> | 2016-03-06 05:07:51 -0500 |
---|---|---|
committer | Zach Latta <zach@zachlatta.com> | 2016-03-06 05:07:51 -0500 |
commit | 6e2716fcc3272832355fb4c995ae4b4b6cd74f05 (patch) | |
tree | dd1087ab1936b1fb9303e8dee53f02ef7f2a02fe | |
parent | b0fbe49e62f337646468cdd5328b67412f00b327 (diff) | |
parent | 35791d9fba61b0dbe7aafa752030d70529a57ae8 (diff) | |
download | sshtron-6e2716fcc3272832355fb4c995ae4b4b6cd74f05.tar.gz |
Merge branch 'master' of github.com:zachlatta/the-grid
-rw-r--r-- | static/img/grid.svg | 85 | ||||
-rw-r--r-- | static/index.html | 47 | ||||
-rw-r--r-- | static/styles.css | 123 |
3 files changed, 152 insertions, 103 deletions
diff --git a/static/img/grid.svg b/static/img/grid.svg new file mode 100644 index 0000000..8a359c0 --- /dev/null +++ b/static/img/grid.svg @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="121.42857" + height="121.42857" + id="svg2" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="grid.svg"> + <defs + id="defs4" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="2.8" + inkscape:cx="50.11316" + inkscape:cy="71.670878" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="false" + inkscape:window-width="1916" + inkscape:window-height="1036" + inkscape:window-x="0" + inkscape:window-y="18" + inkscape:window-maximized="0" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-213.81846,-309.34213)"> + <g + id="g3019" + style="fill:#808080" + transform="matrix(0.11627891,0,0,0.11627891,242.6391,327.42299)" + inkscape:export-filename="/home/maxw/grid.png" + inkscape:export-xdpi="300" + inkscape:export-ydpi="300"> + <rect + style="opacity:0.59166715000000003;fill:#808080;fill-opacity:1;stroke:none" + id="rect3015" + width="7.8571382" + height="30.714281" + x="270.35715" + y="351.29077" + ry="0" /> + <rect + transform="matrix(0,1,-1,0,0,0)" + ry="0" + y="-289.64285" + x="362.71933" + height="30.714281" + width="7.8571382" + id="rect3017" + style="opacity:0.59166715000000003;fill:#808080;fill-opacity:1;stroke:none" /> + </g> + </g> +</svg> diff --git a/static/index.html b/static/index.html index d23fbe4..2e34c68 100644 --- a/static/index.html +++ b/static/index.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<html> <head> <title>SSHTron - Tron in Your Terminal</title> <meta charset="utf-8"> @@ -21,35 +22,29 @@ <body> <div class="container"> <h1 class="title">SSHTRon</h1> - <div class="while-supplies-last"> - <p class="description"> - Run <code>ssh sshtron.zachlatta.com</code> in your terminal and play - multiplayer Tron with players from all around the world. - </p> - <p class="subtext">* As long as the server doesn't crash</p> - </div> - <div> - <p class="subtext"> - By <a href="https://github.com/maxwofford">@MaxWofford</a> and <a - href="https://github.com/zachlatta">@zachlatta</a>. If we can't fulfill - your sticker request, we'll either return your letter in the mail or - send you some nifty <a - href="https://www.stickermule.com/marketplace/9450-the-hack-strikes-back">Hack - Club stickers</a>. <a href="attributions.txt">Attributions</a>. - </p> + <p class="description"> + Run the following command in your terminal and play multiplayer Tron with + players from all around the world. + </p> + <p class="description"><code><span class="no-copy">$</span> ssh sshtron.zachlatta.com</code></p> + <p class="subtext">* As long as the server doesn't crash</p> + <p class="subtext"> + By <a href="https://github.com/maxwofford">@MaxWofford</a> and + <a href="https://github.com/zachlatta">@zachlatta</a>. + <a href="attributions.txt">Attributions</a>. + </p> - <div class="share-links"> - <div class="share-link fb-share-button" data-href="https://sshtron.zachlatta.com" data-layout="button"></div> - <a href="https://twitter.com/share" class="twitter-share-button"{count} data-text="SSHTron - Multiplayer Tron game played through SSH">Tweet</a> - </div> - </div> - <!-- Social buttons --> + <div class="share-links"> + <div class="share-link fb-share-button" data-href="https://sshtron.zachlatta.com" data-layout="button"></div> + <a href="https://twitter.com/share" class="twitter-share-button"{count} data-text="SSHTron - Multiplayer Tron game played through SSH">Tweet</a> + </div> + <!-- Social buttons --> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; - js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; - fjs.parentNode.insertBefore(js, fjs); }(document, 'script', - 'facebook-jssdk'));</script> + if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; + js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; + fjs.parentNode.insertBefore(js, fjs); }(document, 'script', + 'facebook-jssdk'));</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </body> </html> diff --git a/static/styles.css b/static/styles.css index 08f63d5..9a7c2a3 100644 --- a/static/styles.css +++ b/static/styles.css @@ -15,16 +15,28 @@ body { font-family: 'Open Sans', sans-serif; color: #5addf4; + background-image: url('/img/grid.svg'); background-color: black; } +body::selection { + background: #5addf4; +} + p { font-size: 22px; } +.no-copy { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + .container { margin: 0 auto; - width: 720px; + min-width: 720px; text-align: center; } @@ -35,17 +47,18 @@ p { font-family: 'Good Times', cursive; margin-top: 50px; margin-bottom: 40px; - - animation: neon 1.5s ease-in-out infinite alternate; -} - -@-webkit-keyframes neon { - from { - text-shadow: 0 0 10px #000, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; - } - to { - text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; - } + text-align: center; + letter-spacing: 0px; + margin-left: auto; + margin-right: auto; + text-shadow: 0 0 5px rgba(255, 255, 255, 1), + 0 0 10px rgba(255, 255, 255, 0.5), + 0 0 15px rgba(255, 255, 255, 0.5), + 0 0 20px rgba(34,141,255, 0.5), + 0 0 35px rgba(34,141,255, 0.5), + 0 0 40px rgba(34,141,255, 0.5), + 0 0 50px rgba(34,141,255, 0.5), + 0 0 75px rgba(34,141,255, 0.5); } .description { @@ -55,56 +68,10 @@ p { font-weight: 600; } -.while-supplies-last { - margin-bottom: 75px; -} - -.while-supplies-last .description { - margin-bottom: 10px; -} - -.while-supplies-last .subtext { - margin-top: 0; -} - -.directions p { - max-width: 400px; - margin-left: auto; - margin-right: auto; -} - -.directions .description { - margin-bottom: 15px; -} - -.directions .subtext { - font-size: 18px; - bottom: 0px; -} - -.directions .horizontal-steps .columns { - position: relative; - padding-top: 60px; - top: 50%; - transform: translateY(-50%); - margin-bottom: -100px; -} - .subtext { font-size: 20px; font-style: italic; -} - -.subtext.narrow { - max-width: 200px; -} - -.symbol { - font-size: 38px; -} - -.stickers img { - height: 225px; + opacity: 0.8; } .icon { @@ -112,24 +79,6 @@ p { text-indent: -9999px; } -.quarter { - background-image: url('quarter.svg'); - width: 105px; - height: 105px; - background-size: 105px 105px; - - margin-left: 10px; - margin-right: 10px; - margin-bottom: 10px; -} - -.letter { - background-image: url('letter.svg'); - width: 600px; - height: 300px; - background-size: 600px 300px; -} - .share-links { padding-bottom: 2em; } @@ -143,3 +92,23 @@ p { .twitter-share-button[style] { vertical-align: text-bottom; } + +code { + text-shadow: #DF740C 0 -1px 35px; + color: #DF740C; + border: rgba(223, 116, 12, 0.25) 1px solid; + padding: 1em; + background: none; + font-family: monospace; +} + +code::selection { + background: #DF740C; + color: black; +} + +code:hover { + text-shadow: #DF740C 5 10px 55px; + transition-duration: 1s; + border: rgba(223, 116, 12, 25) 1px solid; +}
\ No newline at end of file |