Browse Source

wip: designing the landing page

Beautus 6 years ago
parent
commit
adf994e0a5

BIN
docs/assets/badge_get-it-on-en-us.png


BIN
docs/assets/google-play-badge.png


BIN
docs/assets/home-screen.png


+ 26 - 55
docs/index.html

@@ -2,66 +2,37 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-    <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
-    <link href="./main.css" rel="stylesheet">
-    <title>Slim Launcher - Fewer distraction, more life</title>
+  <meta charset="UTF-8"/>
+  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+  <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
+  <link href="./main.css" rel="stylesheet">
+  <title>Slim Launcher - Fewer distraction, more life</title>
 </head>
 
 <body>
 <header>
-    <h1>Slim Launcher</h1>
-    <h3>v2.3</h3>
+  <nav>
+    <a href="#">Donate</a>
+  </nav>
 </header>
-<main>
-    <article>
-        <h2>Frequently Asked Questions (FAQs)</h2>
-        <ol>
-            <li><h3>Where is the app drawer?</h3></li>
-            <span>There is no app drawer! You don't need an app drawer when all the apps you need fit in one screen.</span>
-            <li><h3>Why can't I access all the other apps on my phone?</h3></li>
-            <span>Clearly you didn't understand the whole idea of this app.
-                The whole point of this app is to stop you from doing exactly that. Google 'minimalism'</span>
-            <li><h3>How do I get to my other apps?</h3></li>
-            <span>Well simple! Swipe up from your home screen &gt; Go to Options &gt; Tap Customise apps. have fun!</span>
-            <li><h3>You should add a google search bar and a way to access all the other apps.</h3></li>
-            <span>First of all this is not a question! Secondly, I do appreciate the feedback but
-                let it not be against the reason why the app exists in the first place</span>
-            <li><h3>Why can't I set a wallpaper?</h3></li>
-            <span>Well why do you want a wallpaper? You want to look at your phone? for how long? for what? For who?
-            Read a book instead.</span>
-            <li><h3>Hey, your app sucks!</h3></li>
-            <span>Where's yours that doesn't suck?!?</span>
-            <li><h3>Is it possible to change the apps on the home screen?</h3></li>
-            <span>Yes, you can. If you have the latest version installed, you'll find that adding, renaming
-            and exchanging apps has been made easier.</span>
-            <li><h3>WHAT ABOUT OTHER APPS?</h3></li>
-            <span><i>Where's Thanos when you need him the most?...</i> Did you even read the description of the app?</span>
-            <li><h3>Does it support other languages?</h3></li>
-            <span>No, unfortunately. I would love for the app to be accessible no matter the language.
-                But the app is free, I can't afford to pay for translation services as of yet. If you know
-            a language that you would like this app to support and you are fluent in it, please shoot me an email and we'll make magic happen</span>
-            <li><h3>I have a youtube channel, can I review your app for a small fee? I have many subscribers and
-            my videos have millions of views</h3></li>
-            <span>Like I said! I'm broke</span>
-            <li><h3>Is the app free forever?</h3></li>
-            <span>Yes. I made the app because I needed it myself. Then I decided to share it with the world.
-                I see no reason why I should make other people pay for it.
-                Fun fact! I actually made this because I didn't want to pay for something I can create myself</span>
-            <li><h3>How do I support the project</h3></li>
-            <span>You can become a tester. Shoot me an email if you need more info regarding this.
-                This way, you can give feedback that will shape the direction of the app and make a better experience for everyone.
-            You can contribute on the project on GitHub.
-                The most of the work has been put in to make the code more modular and readable
-                so that it's easy for other people to add in their input as PRs. You can also
-                <a href="https://buymeacoff.ee/sduduzog">buy me a coffee</a>.
-                I will probably buy a big mac with the cash or go watch a movie to reward myself.
-                I will however spend it on the project if stated otherwise. I wouldn't be able to live with myself if I don't</span>
-            <li><h3>Why does this website look like crap?</h3></li>
-            <span>I hit a designers block.</span>
-        </ol>
-    </article>
+<main role="main">
+  <section role="banner" class="banner">
+    <div class="wrapper">
+      <h1>A minimalist launcher that only allows you to use fewer apps on your phone</h1>
+      <img src="./assets/home-screen.png" class="screenshot" alt="Home screen screenshot">
+      <a href="https://play.google.com/store/apps/details?id=com.sduduzog.slimlauncher">
+        <img class="badge g-play"
+             src="./assets/google-play-badge.png"
+             alt="Google Play badge">
+      </a>
+      <a href="https://f-droid.org/en/packages/com.sduduzog.slimlauncher">
+        <img class="badge f-droid"
+             src="./assets/badge_get-it-on-en-us.png"
+             alt="F-droid badge">
+      </a>
+    </div>
+  </section>
 </main>
 </body>
 

+ 144 - 6
docs/main.css

@@ -1,16 +1,154 @@
-*{
+* {
   box-sizing: border-box;
 }
-body{
+
+body {
   margin: 0;
-  font-family: monospace;
+  font-family: 'Ubuntu', sans-serif;
 }
 
-header{
-  padding: 20px;
+header {
+  background-color: red;
+}
+
+header nav {
+  height: 60px;
+  display: none;
 }
 
-main{
+main {
   margin: auto;
+}
+
+main section > * {
+  max-width: 1280px;
+}
+
+.wrapper {
+  padding: 80px 100px;
+  margin: auto;
+  max-width: 1200px;
+}
+
+.banner .wrapper {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr 1fr 300px;
+  grid-template-rows: max-content;
+}
+
+.banner h1 {
+  grid-column: 1 / 3;
+  margin: 100px 0 0;
+  font-weight: lighter;
+  font-size: xx-large;
+  text-align: center;
+  padding: 20px;
+}
+
+.banner img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.banner .screenshot {
+  box-shadow: 0 12px 30px 8px #363636;
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+
+.banner .badge {
   padding: 20px;
+  max-width: 260px;
+  margin: 20px auto auto;
+}
+
+.banner .g-play {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.banner .f-droid {
+  margin-left: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .banner .wrapper {
+    grid-template-columns: 1fr 250px;
+  }
+
+  .banner h1 {
+    margin: 0;
+    grid-column: 1 /2;
+  }
+
+  .banner a {
+    grid-column: 1 / 3;
+    grid-row: 2 /3;
+  }
+
+  .banner .screenshot {
+    grid-column: 2 / 3;
+    grid-row: 1 / 4;
+  }
+
+  .banner a:nth-child(3), .banner a:nth-child(4){
+    grid-column: 1 / 2;
+  }
+
+  .banner a:nth-child(4){
+    grid-row: 3 / 4;
+  }
+
+  .banner .g-play, .banner .f-droid {
+    margin: 0 auto;
+    padding: 0;
+    width: 180px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .wrapper {
+    padding: 0;
+  }
+
+  .banner .wrapper {
+    grid-template-columns: 1fr;
+    padding: 20px;
+    gap: 0;
+  }
+
+  .banner h1 {
+    text-align: center;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    font-size: x-large;
+  }
+
+  .banner .screenshot {
+    width: 230px;
+    margin: auto;
+    display: block;
+    grid-column: 1 / 2;
+  }
+
+  .banner .screenshot {
+    margin: 50px auto;
+    grid-row: 1 / 2;
+  }
+
+  .banner a:nth-child(3){
+    grid-row: 3 / 4;
+  }
+
+  .banner a:nth-child(4){
+    grid-row: 4 / 5;
+  }
+}
+
+@media screen and (max-width: 375px) {
+  .banner h1 {
+    font-size: larger;
+  }
 }