aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMax Wofford <max@maxwofford.com>2016-03-06 03:29:52 -0500
committerMax Wofford <max@maxwofford.com>2016-03-06 03:29:52 -0500
commit35791d9fba61b0dbe7aafa752030d70529a57ae8 (patch)
tree2ffbd0f7f2092c0d4de95b1eb237952dd89e51b4
parent424df45a27dada7fc0b5db1990331de6656d2582 (diff)
downloadsshtron-35791d9fba61b0dbe7aafa752030d70529a57ae8.tar.gz
Add call to action on website
Remove old classes from Ponzi.es Separate terminal command from text Restyle title
Diffstat
-rw-r--r--static/img/grid.svg85
-rw-r--r--static/index.html47
-rw-r--r--static/styles.css123
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
Un proyecto texto-plano.xyz