Lots of CSS improvs

Author: dustinmoris

src/Giraffe.Website/Assets/Private/main.css

@@ -1,6 +1,9 @@
 body {
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     color: #333;
+    -ms-word-wrap: break-word;
+    word-wrap: break-word;
+    font-size: 1.1em;
 }
 
 header, main, nav, footer {
@@ -13,23 +16,52 @@ main {
     margin: 2em auto;
 }
 
-/*code {*/
-/*    background: #333;*/
-/*    color: #f1f1f1;*/
-/*}*/
+/*Fixing monospace handling across browsers*/
+pre,
+code,
+kbd,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+code{
+    display: inline-block;
+    padding: .1em .4em;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    font-family: 'Roboto Mono', Menlo, Consolas, "Courier New", monospace;
+    font-size: .8em;
+    line-height: 1.5em;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background-color: #e1e1e1;
+    color: #cd5c5c;
+}
 
 pre {
+    width: auto;
+    overflow-x: auto;
     display: block;
     padding: .5em 1em;
     border-radius: 3px;
-    font-family: Menlo, Consolas, "Courier New", monospace;
+    font-family: 'Roboto Mono', Menlo, Consolas, "Courier New", monospace;
     line-height: 1.2em;
     background: #444;
     color: #fff;
 }
 
+pre > code {
+    display: block;
+    padding: .2em 0 .2em .5em;
+    font-size: .75em;
+    background: #444;
+    color: #fff;
+}
+
 p {
-    line-height: 1.4em;
+    line-height: 1.5em;
 }
 
 h1 {
@@ -38,6 +70,7 @@ h1 {
 
 h2 {
     font-size: 2.4em;
+    color: #603504;
 }
 
 h3 {
@@ -58,12 +91,29 @@ h6 {
     font-weight: bold;
 }
 
+a {
+    text-decoration: none;
+    color: #ba6a02;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #ffbb02;
+}
+
+ul li {
+    margin: .6em 0;
+}
+
+ul li a {
+    color: #603504;
+}
+
 nav {
     display: flex;
     justify-content: space-around;
     padding: 0;
-    border-top: 1px solid #e1e1e1;
-    border-bottom: 1px solid #e1e1e1;
+    text-align: center;
 }
 
 nav ul {
@@ -74,22 +124,54 @@ nav ul {
 
 nav ul li {
     display: inline-block;
-    margin: .5em;
+    margin: .7em;
 }
 
-a {
-    text-decoration: none;
-    color: #87281b;
+nav a {
+    font-size: .8em;
+    padding-bottom: 3px;
+    border-bottom: 3px solid #fcc72b;
+    text-transform: uppercase;
+    color: #825e34 !important;
 }
 
-a:hover {
-    text-decoration: underline;
+nav a:hover {
+    text-decoration: none;
+    color: #ffbb02 !important;
 }
 
 footer {
     font-size: .8em;
 }
 
+table {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    padding: 5px;
+}
+
+tbody, thead, tr {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+td, th {
+    text-align: left;
+    font-size: .95em;
+    padding: .5em;
+}
+
+td code {
+    background: transparent;
+}
+
+tr:nth-child(odd)  { background-color: #fff; }
+tr:nth-child(even) { background-color: #f1f1f1; }
+
 #inner-footer {
     border-top: 1px solid #e1e1e1;
     text-align: center;

src/Giraffe.Website/Program.fs

@@ -156,7 +156,7 @@ module Views =
                             li [] [ internalLink "/" "Home" ]
                             li [] [ internalLink "/docs" "Documentation" ]
                             li [] [ internalLink "/view-engine" "View Engine" ]
-                            li [] [ externalLink "https://github.com/giraffe-fsharp/giraffe" "GitHub"]
+                            li [] [ externalLink "https://github.com/giraffe-fsharp" "GitHub"]
                             li [] [ externalLink "https://github.com/giraffe-fsharp/Giraffe/releases" "Releases" ]
                         ]
                     ]
@@ -188,6 +188,7 @@ module MarkDog =
     let private pipeline =
         MarkdownPipelineBuilder()
             .UseAutoIdentifiers(AutoIdentifierOptions.GitHub)
+            .UsePipeTables()
             .Build()
 
     let toHtml (value : string) =
@@ -222,13 +223,17 @@ module WebApp =
         (markdownUrl   : string)
         (title         : string)
         (permalink     : string)
-        (lineStart     : int) : HttpHandler =
+        (lineStart     : int)
+        (linkReplacements : Map<string, string>) : HttpHandler =
         fun next ctx ->
             task {
                 let client = new HttpClient()
                 let! allContent = client.GetStringAsync(markdownUrl)
                 let content =
-                    allContent.Split([| Environment.NewLine |], StringSplitOptions.None)
+                    linkReplacements
+                    |> (Map.fold(fun (c : string) key sub -> c.Replace(key, sub)) allContent)
+                    |> fun c -> c.Replace(markdownUrl, permalink)
+                    |> fun c -> c.Split([| Environment.NewLine |], StringSplitOptions.None)
                     |> Array.skip lineStart
                     |> String.concat Environment.NewLine
                 let response =
@@ -240,13 +245,21 @@ module WebApp =
                 return! response next ctx
             }
 
+    let linkReplacements =
+        [
+            "https://github.com/giraffe-fsharp/Giraffe/blob/master/README.md", (Url.create "/")
+            "https://github.com/giraffe-fsharp/Giraffe/blob/master/DOCUMENTATION.md", (Url.create "/docs")
+            "https://github.com/giraffe-fsharp/Giraffe.ViewEngine/blob/master/README.md", (Url.create "/view-engine")
+        ] |> Map.ofList
+
     let private indexHandler =
         allowCaching (TimeSpan.FromDays(1.0)) >=>
         markdownHandler
             "https://raw.githubusercontent.com/giraffe-fsharp/Giraffe/master/README.md"
             "Home"
             (Url.create "/")
             4
+            linkReplacements
 
     let private docsHandler =
         allowCaching (TimeSpan.FromDays(1.0)) >=>
@@ -255,6 +268,7 @@ module WebApp =
             "Documentation"
             (Url.create "/docs")
             0
+            linkReplacements
 
     let private viewEngineHandler =
         allowCaching (TimeSpan.FromDays(1.0)) >=>
@@ -263,6 +277,7 @@ module WebApp =
             "View Engine"
             (Url.create "/view-engine")
             2
+            linkReplacements
 
     let private pingPongHandler : HttpHandler =
         noResponseCaching >=> text "pong"