doc: general update and add more information

Updates:
* Refreshing the information on installing and building PySide
* Adding hyperlinks to some files
* Including PySide installation GIF (from Wiki)
* Modifying the CSS to improve the code snippets, :command: role,
  and adding layout for two columns.

New tutorials
* QTableWidget
* QTreeWidget

New documentation
* Differences between Widgets and QML
* IDE information (+ QtCreator GIF from Wiki)
* When to use Shiboken
* file types explanation
* Summary on distributing applications

Pick-to: 6.0
Change-Id: I5195cc5a4af858bb7aad7891d14562ca07b6df23
Reviewed-by: Christian Tismer <tismer@stackless.com>
Reviewed-by: Friedemann Kleint <Friedemann.Kleint@qt.io>

1 files changed, 39 insertions, 8 deletions

diff --git a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
index f6a1c5ae4..a9e7a0b05 100644
--- a/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
+++ b/sources/pyside6/doc/_themes/pysidedocs/static/pyside.css
@@ -52,7 +52,7 @@ div.body p.centered {
     margin-top: 25px;
 }
 
-div.warning, div.seealso, div.note {
+div.warning, div.seealso, div.note, div.important {
     padding: 6px 0px 6px 10px;
     border: none;
 }
@@ -61,12 +61,18 @@ div.warning {
     background-color: #ffe4e4;
 }
 
+div.important {
+    background-color: #fef9f3;
+    border-left: 5px solid #feeec8;
+}
+
 div.seealso {
     background-color: #fff2d6;
 }
 
 div.note {
-    background-color: #f3f3f4;
+    background-color: #c5d3f4;
+    border-left: 5px solid #7899f4;
 }
 
 table.docutils {
@@ -346,7 +352,7 @@ tt.descname {
 
 #detailed-description dd > blockquote,
 #detailed-description dd > .field-list {
-    font-family: 'Droid Sans Mono';
+    font-family: 'Droid Sans Mono', monospace;
     font-size: small;
     border-left: 10px solid #e2e2e2;
     padding-left: 10px;
@@ -443,7 +449,7 @@ tt.descname {
 }
 
 #detailed-description .attribute td:nth-child(1) {
-    font-family: 'Droid Sans Mono';
+    font-family: 'Droid Sans Mono', monospace;
 }
 
 /* Qt theme */
@@ -895,7 +901,7 @@ tt.descname {
   /* Legacy iOS */
 }
 @font-face {
-  font-family:'Droid Sans Mono';
+  font-family: 'Droid Sans Mono', monospace;
   font-style:normal;
   font-weight:400;
   src:local("Droid Sans Mono"),local("DroidSansMono"),url(//fonts.gstatic.com/s/droidsansmono/v7/ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4.woff) format("woff")
@@ -1473,7 +1479,7 @@ pre, .LegaleseLeft {
   background-color:#222840;
   color:#fff;
   display:block;
-  font-family:"Droid Sans Mono";
+  font-family: 'Droid Sans Mono', monospace;
   line-height:1.5;
   overflow-x:auto;
   margin-bottom:25px;
@@ -1553,7 +1559,13 @@ pre span.wrap {
 }
 
 span.pre {
-    color: #09102d;
+    color: black;
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #eaeaea;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
 }
 
 span.wrap:hover {
@@ -1579,7 +1591,7 @@ span.wrap:active {
   color:#46a2da
 }
 code,.codelike {
-  font-family:"Droid Sans Mono"
+  font-family: 'Droid Sans Mono', monospace;
 }
 #detailed-description .function dt > code,
 #detailed-description .function dt > em {
@@ -2074,3 +2086,22 @@ table.special td {
     padding-bottom: 2px;
     border-bottom: 4px solid #41cd52;
 }
+
+.command {
+    font-family: monospace;
+    font-weight: normal;
+    background-color: #9cd1a6;
+    padding: 2px 4px;
+    color: black;
+    border-radius: 2px;
+}
+
+div.leftside {
+    width: 50%;
+    padding: 0px 50px 0px 0px;
+    float: left;
+}
+
+div.rightside {
+    margin-left: 50%;
+}