[WIP] make awesome home page

Author: VShawn

source/docs/_extra/css/extra.css

@@ -1,3 +1,60 @@
+.md-typeset__table {
+    min-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    td:nth-child(1) {
+        white-space: nowrap;
+    }
+}
+
+* {
+    --md-primary-fg-color: #102b3e;
+    --md-primary-fg-color--light: #445a68;
+    --md-primary-fg-color--dark: #0c2230;
+    --md-typeset-color: var(--md-default-fg-color);
+    --md-typeset-a-color: var(--md-primary-fg-color--light);
+}
+
+:root {
+    --md-primary-fg-color: #102b3e;
+    --md-primary-fg-color--light: #445a68;
+    --md-primary-fg-color--dark: #0c2230;
+}
+
+:root>* {
+    --md-typeset-color: var(--md-default-fg-color);
+    --md-typeset-a-color: var(--md-primary-fg-color--light);
+}
+
+/*
+markdown and image alignment
+ALT tag and a CSS selector on the alt tag
+*/
+img[src*='#left'] {
+    float: left;
+}
+
+img[src*='#right'] {
+    float: right;
+}
+
+img[src*='#center'] {
+    display: block;
+    margin: auto;
+}
+
+/*
+Tables set to 100% width
+*/
+.md-typeset__table {
+    min-width: 100%;
+}
+
+.md-typeset table:not([class]) {
+    display: table;
+}
+
 img {
     /* box-shadow: 2px 2px 10px 2px #888888; */
     display: block;

source/docs/img/home_override/hero1.png

@@ -0,0 +1,32 @@
+# {{name}}
+
+![logo](img/p2o.png)
+
+> {{name}} is the upgraded version of PRemoteM.
+
+ {{name}} a **open-source** remote access manager and connection launcher for Windows. It comes integrated with a number of different protocols but also provides extensibility options via existing CLI tools implementing any kind of protocol.
+
+!!! warning
+    {{name}} is still under development, you can try it's previous version **`PRemoteM`** instead.
+
+[Download](./download.md){ .md-button .md-button--primary .inline .auto_width}
+
+[Quick Start](./usage/quick-start.md){ .md-button .md-button--primary .inline .auto_width}
+
+[Make contribution](./about.md#make-1remote-stronger){ .md-button .md-button--primary .inline .auto_width}
+
+<img src="https://raw.githubusercontent.com/1Remote/PRemoteM/Doc/DocPic/maindemo.png" width="800" />
+
+## Features
+
+- OTB support for **RDP, SSH, VNC, Telnet, SFTP, FTP, RemoteApp, Local App**
+- Quick and convenient remote **session launcher** by short cut ++alt++ + ++m++
+- **Multi-screen** and **HiDPI** supported RDP connection
+- Multi-address and Multi-account for your session, **auto switching address if one is not available**
+- Detailed connection configuration: **tags, icons, colors**, connection scripts etc.
+- Multiple languages, themes and **tabbed interface**
+- Customizable protocols, choose your favorite tools for each protocol (**e.g. WinSCP for SFTP / TigerVNC for VNC**)
+- Sync sessions between several machines via Dropbox, Google Drive, OneDrive, etc.
+- Sharing sessions in a small team via MySQL.
+- Portable mode supported.
+

source/docs/img/home_override/hero2.gif

@@ -1,32 +1,4 @@
-# {{name}}
-
-![logo](img/p2o.png)
-
-> {{name}} is the upgraded version of PRemoteM.
-
- {{name}} a **open-source** remote access manager and connection launcher for Windows. It comes integrated with a number of different protocols but also provides extensibility options via existing CLI tools implementing any kind of protocol.
-
-!!! warning
-    {{name}} is still under development, you can try it's previous version **`PRemoteM`** instead.
-
-[Download](./download.md){ .md-button .md-button--primary .inline .auto_width}
-
-[Quick Start](./usage/quick-start.md){ .md-button .md-button--primary .inline .auto_width}
-
-[Make contribution](./about.md#make-1remote-stronger){ .md-button .md-button--primary .inline .auto_width}
-
-<img src="https://raw.githubusercontent.com/1Remote/PRemoteM/Doc/DocPic/maindemo.png" width="800" />
-
-## Features
-
-- OTB support for **RDP, SSH, VNC, Telnet, SFTP, FTP, RemoteApp, Local App**
-- Quick and convenient remote **session launcher** by short cut ++alt++ + ++m++
-- **Multi-screen** and **HiDPI** supported RDP connection
-- Multi-address and Multi-account for your session, **auto switching address if one is not available**
-- Detailed connection configuration: **tags, icons, colors**, connection scripts etc.
-- Multiple languages, themes and **tabbed interface**
-- Customizable protocols, choose your favorite tools for each protocol (**e.g. WinSCP for SFTP / TigerVNC for VNC**)
-- Sync sessions between several machines via Dropbox, Google Drive, OneDrive, etc.
-- Sharing sessions in a small team via MySQL.
-- Portable mode supported.
-
+---
+template: home.html
+title: Home
+---

source/docs/index copy.md

@@ -0,0 +1,4 @@
+---
+template: home.html
+title: Home
+---

source/docs/index.md

@@ -1,4 +1,6 @@
-A RemoteApp program is an application installed on an RD Session Host server. Remote Desktop Connection (RDC) and the RD Session Host use Remote Desktop Protocol (RDP) to redirect screen information for just the application instead of the full session-based virtual desktop.
+```A RemoteApp program is an application installed on an RD Session Host server. Remote Desktop Connection (RDC) and the RD Session Host use Remote Desktop Protocol (RDP) to redirect screen information for just the application instead of the full session-based virtual desktop.```
+
+![rdpapp](./img/remoteapp.jpg)
 
 With RemoteApp programs, you can use RDS to make programs on a Remote Desktop Session Host (RD Session Host) server appear as if they are running on a user 's local computer. RemoteApp program windows are shown on and integrated with a client's Desktop instead of being presented as part of a session-based virtual desktop. A RemoteApp program open on a Desktop.
 

source/docs/index_override.md

@@ -4,7 +4,7 @@ site_author: 1Remote Team
 copyright: © 1Remote Team 2022
 
 repo_url: https://github.com/1Remote/1Remote
-edit_uri: edit/main/source/docs
+edit_uri: https://github.com/1Remote/1Remote.github.io/edit/main/source/docs
 
 dev_addr: 127.0.0.1:8000
 
@@ -19,23 +19,38 @@ theme:
   logo: img/logo.png
   features:
     # - navigation.expand
-    - navigation.instant
+    - navigation.instant # now behaves like a Single Page Application
     - navigation.top # Back-to-top button
-    - navigation.indexes
+    - navigation.indexes # documents can be directly attached to sections, which is particularly useful for providing overview pages: https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#with-section-index-pages
+    - header.autohide
     - navigation.tabs
     # - navigation.tabs.sticky # tab will not auto hide
     - navigation.sections
     - navigation.tracking
   name: material
-  palette:
+  # palette:
+  #   - scheme: default
+  #     toggle:
+  #       icon: material/lightbulb-outline
+  #       name: Switch to dark mode
+  #   - scheme: slate
+  #     toggle:
+  #       icon: material/lightbulb
+  #       name: Switch to light mode
+
+  palette: # https://www.materialpalette.com/colors
     - scheme: default
-      toggle:
-        icon: material/lightbulb-outline
-        name: Switch to dark mode
-    - scheme: slate
-      toggle:
-        icon: material/lightbulb
-        name: Switch to light mode
+      #primary: "teal" # comment to replace by /docs/assets/stylesheets
+      accent: purple
+    #   toggle:
+    #     icon: material/toggle-switch-off-outline
+    #     name: Switch to dark mode
+    # - scheme: slate
+    #   #primary: "teal" # comment to replace by /docs/assets/stylesheets
+    #   accent: teal
+    #   toggle:
+    #     icon: material/toggle-switch
+    #     name: Switch to light mode
 
 extra_css:
   - _extra/css/extra.css