copied webpage

zlsa · Dec 9, 2016 · adfcbc1 · adfcbc1
1 parent 162d99a
commit adfcbc1
Show file tree

Hide file tree

Showing 13 changed files with 675 additions and 0 deletions.
diff --git a/apk/Autogyro-1.0.0-rc1.apk b/apk/Autogyro-1.0.0-rc1.apk
diff --git a/images/promotional/device.png b/images/promotional/device.png
diff --git a/images/promotional/device.svg b/images/promotional/device.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Autogyro</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
+    <link rel="stylesheet" href="style/style.css">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+  </head>
+  <body>
+
+    <nav id="all-apps">
+      <ul class="app-list">
+
+        <li class="app">
+          <a href="/autogyro/" title="Autogyro: manual screen orientation control">
+            <img class="icon" src="images/ic_launcher.png" />
+          </a>
+        </li>
+
+      </ul>
+    </nav>
+
+    <header id="header">
+
+      <div class="header-content">
+
+        <div class="main-info">
+          <h1 id="app-name"><!-- <img src="images/ic_notify.png" /> -->Autogyro</h1>
+          <h5 id="app-tagline">Manually adjust your device orientation; no gyroscope or fumbling necessary.</h5>
+
+          <a href="apk/Autogyro-1.0.0-rc1.apk" id="download-button">Download Autogyro</a>
+          <span class="works-on"><strong>1.0.0-rc1</strong> Works on Android 5.0 (Lollipop) and
+          up.</span>
+        </div>
+
+        <img class="screenshot" src="images/promotional/device.png" />
+
+      </div>
+
+    </header>
+
+    <main>
+    </main>
+
+    <footer>
+
+      <div class="container">
+        Made by <a href="http://zlsa.github.io/">ZLSA Design</a>. Email feedback
+        to <a href="mailto:jonross.zlsa@gmail.com?subject=Autogyro">jonross.zlsa@gmail.com</a>
+        and I'll get back to you ASAP.
+      </div>
+
+    </footer>
+
+  </body>
+</html>
diff --git a/style/apps.scss b/style/apps.scss
@@ -0,0 +1,44 @@
+
+@import 'metrics';
+
+$apps-bar-height: 64px;
+$app-icon-size: 48px;
+
+#all-apps {
+  background-color: #212121;
+  height: $apps-bar-height;
+
+  display: none;
+
+  ul {
+    height: 100%;
+    margin: 0 auto;
+
+    max-width: $max-width;
+  }
+
+  .app {
+
+    display: inline-block;
+    height: 100%;
+
+    a {
+
+      display: block;
+      height: 100%;
+
+      position: relative;
+
+      display: flex;
+
+      .icon {
+        align-self: center;
+        width: $app-icon-size;
+      }
+
+    }
+
+  }
+
+}
+
diff --git a/style/elevation.scss b/style/elevation.scss
@@ -0,0 +1,5 @@
+
+@mixin elevation($elevation: 1px) {
+  box-shadow: 0 $elevation * 0.5 $elevation * 3 rgba(black, 0.3),
+              0 $elevation * 2 $elevation * 7 rgba(black, 0.2);
+}
diff --git a/style/footer.scss b/style/footer.scss
@@ -0,0 +1,28 @@
+
+@import 'elevation';
+
+footer {
+  background-color: #212121;
+
+  color: rgba(white, 0.5);
+
+  display: flex;
+  justify-content: center;
+
+  font-size: 12px;
+
+  min-height: 128px;
+
+  padding: 0 24px;
+
+  .container {
+
+    align-self: center;
+
+    a {
+      text-decoration: underline;
+    }
+
+  }
+
+}
diff --git a/style/header.scss b/style/header.scss
@@ -0,0 +1,131 @@
+
+@import 'elevation';
+@import 'metrics';
+
+$primary: #4385f8;
+
+$screenshots-width: 80vh;
+
+#header {
+  background-color: $primary;
+
+  width: 100%;
+
+  color: white;
+
+  .header-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .main-info {
+
+    margin: 0 16px;
+    margin-right: 48px;
+
+
+    padding: 24px 0;
+
+    #app-name {
+      font-size: 48px;
+
+      img {
+        height: 36px;
+        margin-right: 24px;
+      }
+
+    }
+
+    #app-tagline {
+      font-size: 18px;
+      margin-top: 16px;
+    }
+
+    #download-button {
+      background-color: white;
+      border-radius: 2px;
+
+      color: $primary;
+
+      display: inline-block;
+
+      margin: 16px 0;
+      margin-top: 24px;
+
+      height: 48px;
+      line-height: 48px;
+
+      padding: 0 16px;
+
+      transition: box-shadow 0.1s ease;
+
+      @include elevation(1px);
+
+      &:active {
+        @include elevation(3px);
+      }
+
+    }
+
+    .works-on {
+      display: block;
+      font-size: 12px;
+      color: rgba(white, 0.54);
+
+      strong {
+        font-weight: bold;
+        color: rgba(white, 0.87);
+        margin-right: 8px;
+      }
+    }
+
+  }
+
+  .screenshot {
+    display: block;
+    width: 512px;
+    max-width: 100%;
+  }
+
+}
+
+@media (max-width: 1023px) {
+
+  .header-content {
+    text-align: center;
+
+    .main-info {
+      padding: 64px 0 !important;
+    }
+
+    .screenshot {
+      margin: 0 auto;
+    }
+
+  }
+
+}
+
+@media (min-width: 1024px) {
+
+  #header {
+    height: 100vh;
+
+    .header-content {
+      width: $max-width;
+      display: flex;
+      margin: 0 auto;
+    }
+
+    .main-info {
+      margin-top: 20vh;
+      flex: 1;
+    }
+
+    .screenshot {
+      align-self: flex-end;
+    }
+
+  }
+
+}
diff --git a/style/main.scss b/style/main.scss
@@ -0,0 +1,10 @@
+
+@import 'reset';
+
+@import 'apps';
+@import 'header';
+@import 'footer';
+
+html {
+  font-family: 'Roboto', sans-serif;
+}
diff --git a/style/metrics.scss b/style/metrics.scss
@@ -0,0 +1,2 @@
+
+$max-width: 80vw;
diff --git a/style/reset.scss b/style/reset.scss
@@ -0,0 +1,20 @@
+
+* {
+  background: none;
+  border: none;
+  outline: none;
+
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  color: inherit;
+  text-decoration: inherit;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+
+  margin: 0;
+  padding: 0;
+}