From 7913e6a065bbbf493523ce4e5d147e95361d3030 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 21 Jan 2019 16:39:16 +0100
Subject: [PATCH] typedoc styling updates, fix some props warnings

---
 content/references/squid-py.md    |  3 +--
 src/templates/Doc.jsx             |  4 ++--
 src/templates/Typedoc.jsx         | 26 +++++++++++----------
 src/templates/Typedoc.module.scss | 39 ++++++++++++++++++-------------
 4 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/content/references/squid-py.md b/content/references/squid-py.md
index 1af4f744..ca6c773b 100644
--- a/content/references/squid-py.md
+++ b/content/references/squid-py.md
@@ -1,6 +1,5 @@
 ---
-title: API Reference
-description:
+title: Squid-py API Reference
 ---
 
 ReadTheDocs hosts the [squid-py API Reference Docs](https://squid-py.readthedocs.io/en/latest/).
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index 37bfbd68..e8762621 100644
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@@ -26,8 +26,8 @@ const DocMain = ({ title, description, tableOfContents, post, single }) => (
 
 DocMain.propTypes = {
     title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    tableOfContents: PropTypes.string,
+    description: PropTypes.string,
+    tableOfContents: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     post: PropTypes.object.isRequired,
     single: PropTypes.bool
 }
diff --git a/src/templates/Typedoc.jsx b/src/templates/Typedoc.jsx
index 201d9922..4b485b46 100644
--- a/src/templates/Typedoc.jsx
+++ b/src/templates/Typedoc.jsx
@@ -170,6 +170,8 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
             data-private={!isPublic}
             data-deprecated={!!deprecation}
         >
+            <h3 className={styles.propertyName}>{name}</h3>
+
             <div
                 className={styles.propertyType}
                 data-type={kindString.toLowerCase()}
@@ -177,8 +179,6 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 {kindString}
             </div>
 
-            <h3 className={styles.propertyName}>{name}</h3>
-
             {isStatic && <div className={styles.propertyModifier}>static</div>}
             {!isPublic && (
                 <div className={styles.propertyModifier} data-secondary>
@@ -197,22 +197,24 @@ const PropertyWrapper = ({ property, sourceUrl, parentAnchor }) => {
                 </a>
             )}
 
-            {!!deprecation && (
-                <div className={styles.deprecation}>
-                    <strong>Deprecated:</strong> use{' '}
-                    <a href={`#${parentAnchor}/${slugify(deprecatedUse)}`}>
-                        {deprecatedUse}
-                    </a>{' '}
-                    instead
-                </div>
-            )}
-
             {comment && (
                 <div className={styles.propertyDescription}>
                     {comment.text || comment.shortText}
                 </div>
             )}
 
+            {deprecation && (
+                <div className={styles.deprecation}>
+                    <strong>Deprecated:</strong> use{' '}
+                    <code>
+                        <a href={`#${parentAnchor}/${slugify(deprecatedUse)}`}>
+                            {deprecatedUse}
+                        </a>
+                    </code>{' '}
+                    instead
+                </div>
+            )}
+
             {(() => {
                 switch (kindString) {
                     case 'Method':
diff --git a/src/templates/Typedoc.module.scss b/src/templates/Typedoc.module.scss
index a61c1d9e..72cedb22 100644
--- a/src/templates/Typedoc.module.scss
+++ b/src/templates/Typedoc.module.scss
@@ -31,12 +31,14 @@
     border-radius: $border-radius;
     position: relative;
 
-    &[data-private='true'] {
-        background: rgba($brand-black, .06);
-    }
-
     &[data-deprecated='true'] {
-        background: rgba($brand-pink, .06);
+        > *:not(.deprecation) {
+            opacity: .4;
+        }
+
+        .sourceLink {
+            display: none;
+        }
     }
 }
 
@@ -48,45 +50,44 @@
     margin-bottom: $spacer / 4;
     margin-top: 0;
     display: inline-block;
-    padding: $spacer / 8 $spacer / 3;
+    padding: 0 $spacer / 4;
     border-radius: $border-radius;
     vertical-align: middle;
 }
 
 .propertyName {
     font-size: $font-size-large;
+    padding: 0;
+    margin-right: $spacer / 3;
 }
 
 .propertyType,
 .propertyModifier {
     font-size: $font-size-small;
-    line-height: 1.4em;
-    padding: $spacer / 16 $spacer / 6;
+    color: $brand-grey;
+    margin-right: $spacer / 4;
 }
 
 .propertyType {
     &[data-type='method'] {
-        background: rgba($green, .4);
+        background: rgba($green, .3);
     }
 
     &[data-type='property'] {
-        background: rgba($brand-pink, .4);
+        background: rgba($yellow, .3);
     }
 }
 
 .propertyModifier {
     background: rgba($red, .2);
-    padding: 0 $spacer / 6;
-    margin-right: $spacer / 3;
 
     &[data-secondary] {
-        background: rgba($brand-blue, .5);
-        color: $brand-white;
+        background: rgba($brand-blue, .2);
     }
 }
 
 .propertyDescription {
-    padding: $spacer / 6 0 $spacer / 3;
+    margin-bottom: $spacer;
 }
 
 .sourceLink {
@@ -101,7 +102,13 @@
 
 .deprecation {
     font-size: $font-size-small;
-    color: mix($brand-black, $brand-pink, 50%);
+    padding: $spacer / 3;
+    border: 1px solid $red;
+    border-radius: $border-radius;
+
+    strong {
+        color: $red;
+    }
 }
 
 .type {