feat(css): add network.css

Author: topheman

www/index.html

@@ -35,7 +35,26 @@
     <canvas id="bevy"></canvas>
     <div id="orientationlock">Please lock your device in portrait mode to use this game.</div>
     <div id="presentation">
-        <h1>bevy-rust-wasm-experiments</h1>
+        <header>
+          <ul class="site-networks">
+            <li class="twitter">
+              <a href="https://twitter.com/topheman" title="@topheman on twitter">
+                <span class="icon"></span>
+                <span class="desc">Twitter</span>
+              </a>
+            </li>
+            <li class="github">
+              <a
+                href="https://github.com/topheman/bevy-rust-wasm-experiments"
+                title="topheman on github"
+              >
+                <span class="icon"></span>
+                <span class="desc">Github</span>
+              </a>
+            </li>
+          </ul>
+          <h1 class="title">bevy-rust-wasm-experiments</h1>
+        </header>
         <p class="logo-wrapper"><img src="./bevy-rust-wasm-experiments-logo-445x380.png" /></p>
         <p class="text-center"><button id="start">PLAY</button></p>
         <p class="text-center">or snap the Qrcode below to play with your mobile device 👇</p>

www/main.js

@@ -1,4 +1,5 @@
 import './style.css'
+import './network.css'
 
 import init from './public/out/bevy-rust-wasm-experiments'
 import './components/qrcode-display'

www/network.css

@@ -0,0 +1,94 @@
+/** github logo from my other sites**/
+/** networks header */
+.site-networks {
+  z-index: 20;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+ul.site-networks {
+  list-style: none;
+  text-align: center;
+  padding: 0px 0px 10px 0px;
+}
+
+ul.site-networks li {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 15px;
+}
+
+ul.site-networks li a {
+  display: block;
+  width: 32px;
+  height: 32px;
+  text-decoration: none;
+  padding-top: 0px;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -ms-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+
+ul.site-networks li a span.icon {
+  position: absolute;
+  display: block;
+  width: 32px;
+  height: 32px;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -ms-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+
+ul.site-networks li a span.desc {
+  display: none;
+}
+
+ul.site-networks li a:hover span.icon {
+  left: 0px;
+  -webkit-transform: rotate(360deg);
+  -moz-transform: rotate(360deg);
+  -ms-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+  transform: rotate(360deg);
+}
+
+/** since logos are included with the css in base64, we don't bother about pixel ratio media query (everybody gets the retina version)*/
+ul.site-networks li.twitter a span.icon {
+  background-image: url(/twitter-retina.png);
+  background-size: 32px 32px;
+}
+
+ul.site-networks li.github a span.icon {
+  background-image: url(/github-retina.png);
+  background-size: 32px 32px;
+}
+
+@media only screen and (max-width: 700px) and (min-width: 370px) {
+  ul.site-networks {
+    /* right: 70px; */
+  }
+  ul.site-networks li {
+    margin-left: 0px;
+  }
+  .site-title {
+    font-size: 26px;
+  }
+  .content {
+    padding: 0 10px;
+  }
+  img {
+    max-width: 100%;
+  }
+}
+
+.hide-site-networks .site-networks {
+  display: none;
+}

www/public/github-retina.png

@@ -59,10 +59,15 @@ button.back-home-page {
 
 @media screen and (max-width: 600px) {
   #presentation h1 {
-    font-size: 1.4rem;
+    font-size: 1.2rem;
   }
 }
 
+#presentation h1.title {
+  max-width: 80%;
+  margin-top: 0px;
+}
+
 #presentation .logo-wrapper {
   text-align: center;
 }