Merge pull request #2167 from florianbader/website_updates

Website updates

help/content/assets/css/style.css

@@ -6,6 +6,7 @@ body {
 
 #content {
     flex: 1;
+    overflow: auto;
 }
 
 nav.navbar {
@@ -20,20 +21,8 @@ nav.navbar {
     color: #aeb9c7;
 }
 
-.same-height-columns {    
-    display: flex !important;
-    flex-flow: row wrap;
-    justify-content: flex-start;
-}
-
-.same-height-column {
-    display: flex !important;
-    flex-flow: column nowrap;
-}
-
-.same-height-columns .button.at-bottom {
-    margin-top: auto;
-    width: 160px;
+a i.fa {
+    color: #222;
 }
 
 footer {
@@ -76,6 +65,34 @@ section.is-small {
     color: #222;
 }
 
+@media screen and (max-width: 768px) {
+    table.pre pre.fssnip.highlighted {
+        width: calc(100vw - 6rem);
+    }
+
+    .section .fssnip.line-numbers {
+        width: calc(100vw - 3rem);
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .same-height-columns {    
+        display: flex !important;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+    }
+
+    .same-height-column {
+        display: flex !important;
+        flex-flow: column nowrap;
+    }
+
+    .same-height-columns .button.at-bottom {
+        margin-top: auto;
+        width: 160px;
+    }
+}
+
 @media screen and (min-width: 1088px) {
     .navbar-dropdown .navbar-item .navbar-dropdown {
         left: 100%;
@@ -202,8 +219,6 @@ pre {
     border: 1px solid #d8d8d8;
     border-collapse: separate;
     white-space: pre;
-    font: 9pt 'Droid Sans Mono', consolas, monospace;
-    width: 90%;
     background-color: #2d2d2d;
     padding: 10px;
     border-radius: 5px;

help/content/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

help/content/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

help/templates/indexpage.cshtml

@@ -34,37 +34,43 @@
 
 		<div class="container is-fluid columns">
 			<div class="column">
-				<div class="media">
-					<div class="media-left">
-						<i class="fa fa-3x fa-cubes fa-fw"></i>
+				<a href="/fake-fake5-modules.html">
+					<div class="media">
+						<div class="media-left">
+							<i class="fa fa-3x fa-cubes fa-fw"></i>
+						</div>
+						<div class="media-content">
+							<h5 class="title is-5 is-uppercase">Modularization</h5>
+							<h6 class="subtitle is-6">Only pay for what you need</h6>
+						</div>
 					</div>
-					<div class="media-content">
-						<h5 class="title is-5 is-uppercase">Modularization</h5>
-						<h6 class="subtitle is-6">Only pay for what you need</h6>
-					</div>
-				</div>
+				</a>
 			</div>
 			<div class="column">
-				<div class="media">
-					<div class="media-left">
-						<i class="fa fa-3x fa-cogs fa-fw"></i>
-					</div>
-					<div class="media-content">
-						<h5 class="title is-5 is-uppercase">Extensibility</h5>
-						<h6 class="subtitle is-6">Integrate your own modules</h6>
+				<a href="/fake-fake5-custom-modules.html">
+					<div class="media">
+						<div class="media-left">
+							<i class="fa fa-3x fa-cogs fa-fw"></i>
+						</div>
+						<div class="media-content">
+							<h5 class="title is-5 is-uppercase">Extensibility</h5>
+							<h6 class="subtitle is-6">Integrate your own modules</h6>
+						</div>
 					</div>
-				</div>
+				</a>
 			</div>
 			<div class="column">
-				<div class="media">
-					<div class="media-left">
-						<i class="fa fa-3x fa-stopwatch fa-fw"></i>
-					</div>
-					<div class="media-content">
-						<h5 class="title is-5 is-uppercase">Quickstart</h5>
-						<h6 class="subtitle is-6">Get started as fast as possible</h6>
+				<a href="/fake-gettingstarted.html">
+					<div class="media">
+						<div class="media-left">
+							<i class="fa fa-3x fa-stopwatch fa-fw"></i>
+						</div>
+						<div class="media-content">
+							<h5 class="title is-5 is-uppercase">Quickstart</h5>
+							<h6 class="subtitle is-6">Get started as fast as possible</h6>
+						</div>
 					</div>
-				</div>
+				</a>
 			</div>
 		</div>
 	</section>

help/templates/template.cshtml

@@ -4,6 +4,17 @@
 <head>
 	<title>@Title</title>
 	<meta charset="utf-8" />
+
+	<!-- from https://realfavicongenerator.net -->
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+	<link rel="manifest" href="/site.webmanifest">
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-TileColor" content="#2d89ef">
+	<meta name="theme-color" content="#ffffff">
+
+
 	<meta name="author" content="@Properties["project-author"]" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -305,7 +316,7 @@
 						</div>
 						<div class="column is-6">
 							<h4 class="title is-4">FAKE is a community effort</h4>
-							<p>Please help with the development of FAKE 5, a free, fully open source DSL and Runtime for
+							<p>Please help with the development of FAKE, a free, fully open source DSL and Runtime for
 								running F# scripts. Look at the open issues at <a href="https://github.com/fsharp/FAKE/issues">GitHub</a>,
 								discuss new features, fix bugs and
 								send pull requests!</p>