Add branding (#10)

* Add F# favicon * Add "Powered by Fable" to the footer. * Update fable logo * Add link to project * oops * Move branding to header and change styling a bit
fsharpforyou · Feb 25, 2024 · 2cf4bc5 · 2cf4bc5
1 parent c247d97
commit 2cf4bc5
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>F# Tour</title>
     <link rel="stylesheet" href="css/pico.min.css" />
+    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
     <style>
         #app {
             height: 100vh;

diff --git a/public/img/fable.png b/public/img/fable.png
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
diff --git a/public/img/github.png b/public/img/github.png
diff --git a/src/App/App.fs b/src/App/App.fs
@@ -660,16 +660,42 @@ module View =
                                     ]
                                 ]
                             ]
+                            Html.ul [
+                                Html.li [
+                                    Html.a [
+                                        prop.href "https://fable.io"
+                                        prop.target "_blank"
+                                        prop.children [
+                                            Html.img [ prop.src "img/fable.png"; prop.width 40; prop.height 40 ]
+                                            Html.small " Powered by Fable"
+                                        ]
+                                    ]
+                                ]
+                                Html.li [
+                                    Html.a [
+                                        prop.href "https://github.com/fsharpforyou/tour"
+                                        prop.target "_blank"
+                                        prop.children [
+                                            Html.img [ prop.src "img/github.png"; prop.width 40; prop.height 40 ]
+                                            Html.small " View Source Code"
+                                        ]
+                                    ]
+                                ]
+                            ]
                             Html.ul [ Html.button [ prop.text "Run"; prop.onClick (fun _ -> dispatch Compile) ] ]
                         ]
                     ]
                 ]
                 Html.main [
                     prop.role "group"
-                    prop.style [ style.height (length.percent 90); style.width (length.percent 100) ]
+                    prop.style [ style.height (length.percent 90) ]
                     prop.children [
                         Html.section [
-                            prop.style [ style.overflow.scroll; style.width (length.percent 50) ]
+                            prop.style [
+                                style.width (length.percent 50)
+                                style.overflow.scroll
+                                style.overflowX.hidden
+                            ]
                             prop.children [
                                 Markdown.markdown [
                                     markdown.children model.Markdown
@@ -722,7 +748,7 @@ module View =
                             prop.style [ style.width (length.percent 50) ]
                             prop.children [
                                 Html.section [
-                                    prop.style [ style.height (length.percent 60) ]
+                                    prop.style [ style.height (length.percent 70) ]
                                     prop.children [
                                         MonacoEditor.editor.editor [
                                             MonacoEditor.props.defaultLanguage "fsharp"
@@ -734,7 +760,11 @@ module View =
                                     ]
                                 ]
                                 Html.article [
-                                    prop.style [ style.height (length.percent 40); style.overflow.scroll ]
+                                    prop.style [
+                                        style.height (length.percent 30)
+                                        style.overflow.scroll
+                                        style.overflowX.hidden
+                                    ]
                                     prop.children [
                                         Html.h4 "Output"
                                         for (log, level) in model.Logs do