Website landing page (4)

5 years ago · e2a4789d77
parent 0553fa9d20
commit e2a4789d77
3 changed files with 37 additions and 14 deletions
--- a/docs/_layouts/landing.html
+++ b/docs/_layouts/landing.html
@ -8,18 +8,31 @@
        <title>{{ site.title }}{% if page.title %} | {{ page.title }}{% endif %}</title>
        <meta name="description" content="{{ site.subtitle }}">

-        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
-        <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">        <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
        <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">

        {% seo %}
    </head>
-    <body id="landing" style="display:table;height:100%;width:100%;margin:0px;">
-        <div class="container" style="display:table-cell; vertical-align:middle;">
-            <div id="content" align="center">
-                <img src="static/icon_foreground.png" width="45%" style="max-width:500px">
+    <body id="landing">
+        <div class="container" align="center">
+            <div>
+                <img src="static/icon_foreground.png" width="45%" style="max-width:400px">
+            </div>
+            <div id="content">
                {{ content }}
            </div>
+            <div class="row justify-content-sm-center">
+                <div class="col-xs-12 col-sm-auto"><a href="home">Documentation</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="about/changelog">Changelog</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="https://github.com/natario1/CameraView">GitHub</a></div>
+                <div class="col-xs-12 col-sm-auto"><a href="extra/donate">Support</a></div>
+            </div>
+            <br/>
+            <div class="row" id="screenshots">
+                <div class="col-sm-4"><img src="static/screen1.png"></div>
+                <div class="col-sm-4"><img src="static/screen2.png"></div>
+                <div class="col-sm-4"><img src="static/screen3.png"></div>
+            </div>
        </div>

        {% if site.google_analytics_id != "" %}
--- a/docs/css/main.css
+++ b/docs/css/main.css
@ -95,7 +95,7 @@ a {
 }

 #landing h1 {
-    font-size: 4em;
+    font-size: 10vw;
    color: white;
    margin-top: 16px;
    margin-bottom: 0px;
@ -103,6 +103,12 @@ a {
    font-weight: bold;
 }

+@media (min-width: 576px) {
+  #landing h1 {
+    font-size: 4em;
+  }
+}
+
 #landing p {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.7);
@ -117,13 +123,21 @@ a {
    border-radius: 24px;
    padding: 10px 20px 10px 20px;
    margin-top: 16px;
-    margin-left: 8px;
-    margin-right: 8px;
    display: inline-block;
    font-family: 'Calistoga', sans-serif;
    font-size: 1.1em;
 }

+#landing #screenshots img {
+    max-width: 100%;
+    padding: 12px;
+}
+
+#landing #screenshots {
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
 #navigation {
    font-size: 1.0em;
 }
--- a/docs/index.md
+++ b/docs/index.md
@ -7,7 +7,3 @@ title: "CameraView"

 A well documented, high-level library that makes capturing pictures and videos easy,
 addressing all of the common issues and needs. Supports real-time filters, gestures, watermarks, frame processing, RAW, outputs of any size and much more.
-
-<br/>
-
-[Documentation](home) [GitHub](https://github.com/natario1/CameraView) [Support](extra/donate)